From 1cc7bb9a54a927c20409d85b08b1b3de14293499 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Thu, 15 Dec 2022 12:17:45 -0700
Subject: [PATCH] Add pan/tilt support

---
 web/src/components/CameraControlPanel.jsx | 27 +++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/web/src/components/CameraControlPanel.jsx b/web/src/components/CameraControlPanel.jsx
index e062e1ffc..baa059e68 100644
--- a/web/src/components/CameraControlPanel.jsx
+++ b/web/src/components/CameraControlPanel.jsx
@@ -26,6 +26,17 @@ export default function CameraControlPanel({ camera = '' }) {
     setCurrentPreset('');
   };
 
+  const onSetMove = async (e, dir) => {
+    e.stopPropagation();
+    sendPtz(`MOVE_${dir}`);
+    setCurrentPreset('');
+  };
+
+  const onSetStop = async (e) => {
+    e.stopPropagation();
+    sendPtz('STOP');
+  };
+
   if (!ptz) {
     return <ActivityIndicator />;
   }
@@ -35,14 +46,22 @@ export default function CameraControlPanel({ camera = '' }) {
       {ptz.features.includes('pt') && (
         <div className="w-44 p-4">
           <div className="w-full flex justify-center">
-            <ArrowUpDouble className="h-12 p-2 bg-slate-500" />
+            <button onMouseDown={(e) => onSetMove(e, 'UP')} onMouseUp={(e) => onSetStop(e)}>
+              <ArrowUpDouble className="h-12 p-2 bg-slate-500" />
+            </button>
           </div>
           <div className="w-full flex justify-between">
-            <ArrowLeftDouble className="h-12 p-2 bg-slate-500" />
-            <ArrowRightDouble className="h-12 p-2 bg-slate-500" />
+            <button onMouseDown={(e) => onSetMove(e, 'LEFT')} onMouseUp={(e) => onSetStop(e)}>
+              <ArrowLeftDouble className="btn h-12 p-2 bg-slate-500" />
+            </button>
+            <button onMouseDown={(e) => onSetMove(e, 'RIGHT')} onMouseUp={(e) => onSetStop(e)}>
+              <ArrowRightDouble className="h-12 p-2 bg-slate-500" />
+            </button>
           </div>
           <div className="flex justify-center">
-            <ArrowDownDouble className="h-12 p-2 bg-slate-500" />
+            <button onMouseDown={(e) => onSetMove(e, 'DOWN')} onMouseUp={(e) => onSetStop(e)}>
+              <ArrowDownDouble className="h-12 p-2 bg-slate-500" />
+            </button>
           </div>
         </div>
       )}