From 95c3faf6def9cf40b886b8a27453ec94966c40a1 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Tue, 27 Dec 2022 11:03:25 -0700
Subject: [PATCH] Fix mobile pressing

---
 web/src/components/CameraControlPanel.jsx | 78 +++++++++++++++++++++--
 1 file changed, 72 insertions(+), 6 deletions(-)

diff --git a/web/src/components/CameraControlPanel.jsx b/web/src/components/CameraControlPanel.jsx
index fec9b6447..09e5acce9 100644
--- a/web/src/components/CameraControlPanel.jsx
+++ b/web/src/components/CameraControlPanel.jsx
@@ -115,20 +115,64 @@ export default function CameraControlPanel({ camera = '' }) {
             Pan / Tilt
           </Heading>
           <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" />
             </button>
           </div>
           <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" />
             </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" />
             </button>
           </div>
           <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" />
             </button>
           </div>
@@ -141,13 +185,35 @@ export default function CameraControlPanel({ camera = '' }) {
             Zoom
           </Heading>
           <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>
             </button>
           </div>
           <div className="h-12" />
           <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>
             </button>
           </div>