From 0bb2f5b845abda3de81679022fc63a536b354c20 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Thu, 15 Dec 2022 13:39:58 -0700
Subject: [PATCH] Support zooming

---
 frigate/ptz.py                            |  2 +-
 web/src/components/CameraControlPanel.jsx | 38 ++++++++++++++++++++---
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/frigate/ptz.py b/frigate/ptz.py
index 3c121cfab..3726047ad 100644
--- a/frigate/ptz.py
+++ b/frigate/ptz.py
@@ -152,7 +152,7 @@ class OnvifController:
         if command == OnvifCommandEnum.zoom_in:
             move_request.Velocity = {"Zoom": {"x": 0.5}}
         elif command == OnvifCommandEnum.zoom_out:
-            move_request.Velocity = {"PanTilt": {"x": -0.5}}
+            move_request.Velocity = {"Zoom": {"x": -0.5}}
 
         onvif.get_service("ptz").ContinuousMove(move_request)
 
diff --git a/web/src/components/CameraControlPanel.jsx b/web/src/components/CameraControlPanel.jsx
index baa059e68..820e618d1 100644
--- a/web/src/components/CameraControlPanel.jsx
+++ b/web/src/components/CameraControlPanel.jsx
@@ -8,6 +8,7 @@ import ArrowUpDouble from '../icons/ArrowUpDouble';
 import ArrowDownDouble from '../icons/ArrowDownDouble';
 import ArrowLeftDouble from '../icons/ArrowLeftDouble';
 import Button from './Button';
+import Heading from './Heading';
 
 export default function CameraControlPanel({ camera = '' }) {
   const { data: ptz } = useSWR(`${camera}/ptz/info`);
@@ -32,6 +33,12 @@ export default function CameraControlPanel({ camera = '' }) {
     setCurrentPreset('');
   };
 
+  const onSetZoom = async (e, dir) => {
+    e.stopPropagation();
+    sendPtz(`ZOOM_${dir}`);
+    setCurrentPreset('');
+  };
+
   const onSetStop = async (e) => {
     e.stopPropagation();
     sendPtz('STOP');
@@ -44,7 +51,10 @@ export default function CameraControlPanel({ camera = '' }) {
   return (
     <div data-testid="control-panel" className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
       {ptz.features.includes('pt') && (
-        <div className="w-44 p-4">
+        <div className="w-44 px-4">
+          <Heading size="xs" className="my-4">
+            Pan / Tilt
+          </Heading>
           <div className="w-full flex justify-center">
             <button onMouseDown={(e) => onSetMove(e, 'UP')} onMouseUp={(e) => onSetStop(e)}>
               <ArrowUpDouble className="h-12 p-2 bg-slate-500" />
@@ -66,11 +76,31 @@ export default function CameraControlPanel({ camera = '' }) {
         </div>
       )}
 
-      {ptz.features.includes('zoom') && <div>zoom</div>}
+      {ptz.features.includes('zoom') && (
+        <div className="w-44 px-4">
+          <Heading size="xs" className="my-4">
+            Zoom
+          </Heading>
+          <div className="w-full flex justify-center">
+            <button onMouseDown={(e) => onSetZoom(e, 'IN')} onMouseUp={(e) => onSetStop(e)}>
+              <div className="h-12 w-12 p-2 text-2xl bg-slate-500">+</div>
+            </button>
+          </div>
+          <div className="h-12" />
+          <div className="flex justify-center">
+            <button onMouseDown={(e) => onSetZoom(e, 'OUT')} onMouseUp={(e) => onSetStop(e)}>
+              <div className="h-12 w-12 p-2 text-2xl bg-slate-500">-</div>
+            </button>
+          </div>
+        </div>
+      )}
 
       {ptz.presets && (
-        <div>
-          <div className="p-4">
+        <div className="px-4">
+          <Heading size="xs" className="my-4">
+            Presets
+          </Heading>
+          <div className="py-4">
             <select
               className="cursor-pointer rounded dark:bg-slate-800"
               value={currentPreset}