administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-05 02:35:22 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix mobile pressing

Browse Source
This commit is contained in:
Nick Mowen 2022-12-27 11:03:25 -07:00
parent 3c63801952
commit 95c3faf6de
1 changed files with 72 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
web/src/components/CameraControlPanel.jsx
View File

@ -115,20 +115,64 @@ export default function CameraControlPanel({ camera = '' }) {
Pan / Tilt Pan / Tilt
</Heading> </Heading>
<div className="w-full flex justify-center"> <div className="w-full flex justify-center">
<button onMouseDown={(e) => onSetMove(e, 'UP')} onMouseUp={(e) => onSetStop(e)}> <button
onMouseDown={(e) => onSetMove(e, 'UP')}
onMouseUp={(e) => onSetStop(e)}
onTouchStart={(e) => {
onSetMove(e, 'UP');
e.preventDefault();
}}
onTouchEnd={(e) => {
onSetStop(e);
e.preventDefault();
}}
>
<ArrowUpDouble className="h-12 p-2 bg-slate-500" /> <ArrowUpDouble className="h-12 p-2 bg-slate-500" />
</button> </button>
</div> </div>
<div className="w-full flex justify-between"> <div className="w-full flex justify-between">
<button onMouseDown={(e) => onSetMove(e, 'LEFT')} onMouseUp={(e) => onSetStop(e)}> <button
onMouseDown={(e) => onSetMove(e, 'LEFT')}
onMouseUp={(e) => onSetStop(e)}
onTouchStart={(e) => {
onSetMove(e, 'LEFT');
e.preventDefault();
}}
onTouchEnd={(e) => {
onSetStop(e);
e.preventDefault();
}}
>
<ArrowLeftDouble className="btn h-12 p-2 bg-slate-500" /> <ArrowLeftDouble className="btn h-12 p-2 bg-slate-500" />
</button> </button>
<button onMouseDown={(e) => onSetMove(e, 'RIGHT')} onMouseUp={(e) => onSetStop(e)}> <button
onMouseDown={(e) => onSetMove(e, 'RIGHT')}
onMouseUp={(e) => onSetStop(e)}
onTouchStart={(e) => {
onSetMove(e, 'RIGHT');
e.preventDefault();
}}
onTouchEnd={(e) => {
onSetStop(e);
e.preventDefault();
}}
>
<ArrowRightDouble className="h-12 p-2 bg-slate-500" /> <ArrowRightDouble className="h-12 p-2 bg-slate-500" />
</button> </button>
</div> </div>
<div className="flex justify-center"> <div className="flex justify-center">
<button onMouseDown={(e) => onSetMove(e, 'DOWN')} onMouseUp={(e) => onSetStop(e)}> <button
onMouseDown={(e) => onSetMove(e, 'DOWN')}
onMouseUp={(e) => onSetStop(e)}
onTouchStart={(e) => {
onSetMove(e, 'DOWN');
e.preventDefault();
}}
onTouchEnd={(e) => {
onSetStop(e);
e.preventDefault();
}}
>
<ArrowDownDouble className="h-12 p-2 bg-slate-500" /> <ArrowDownDouble className="h-12 p-2 bg-slate-500" />
</button> </button>
</div> </div>
@ -141,13 +185,35 @@ export default function CameraControlPanel({ camera = '' }) {
Zoom Zoom
</Heading> </Heading>
<div className="w-full flex justify-center"> <div className="w-full flex justify-center">
<button onMouseDown={(e) => onSetZoom(e, 'IN')} onMouseUp={(e) => onSetStop(e)}> <button
onMouseDown={(e) => onSetZoom(e, 'IN')}
onMouseUp={(e) => onSetStop(e)}
onTouchStart={(e) => {
onSetZoom(e, 'IN');
e.preventDefault();
}}
onTouchEnd={(e) => {
onSetStop(e);
e.preventDefault();
}}
>
<div className="h-12 w-12 p-2 text-2xl bg-slate-500 select-none">+</div> <div className="h-12 w-12 p-2 text-2xl bg-slate-500 select-none">+</div>
</button> </button>
</div> </div>
<div className="h-12" /> <div className="h-12" />
<div className="flex justify-center"> <div className="flex justify-center">
<button onMouseDown={(e) => onSetZoom(e, 'OUT')} onMouseUp={(e) => onSetStop(e)}> <button
onMouseDown={(e) => onSetZoom(e, 'OUT')}
onMouseUp={(e) => onSetStop(e)}
onTouchStart={(e) => {
onSetZoom(e, 'OUT');
e.preventDefault();
}}
onTouchEnd={(e) => {
onSetStop(e);
e.preventDefault();
}}
>
<div className="h-12 w-12 p-2 text-2xl bg-slate-500 select-none">-</div> <div className="h-12 w-12 p-2 text-2xl bg-slate-500 select-none">-</div>
</button> </button>
</div> </div>