From 0be5274b01234f16233448207d31afc6e0020558 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 27 Sep 2024 07:32:38 -0600
Subject: [PATCH] Fix onClick exceptoins

---
 web/src/components/player/HlsVideoPlayer.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index daa4c9b1b..bb0c89802 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -154,6 +154,7 @@ export default function HlsVideoPlayer({
   const [mobileCtrlTimeout, setMobileCtrlTimeout] = useState<NodeJS.Timeout>();
   const [controls, setControls] = useState(isMobile);
   const [controlsOpen, setControlsOpen] = useState(false);
+  const [zoomScale, setZoomScale] = useState(1.0);
 
   useEffect(() => {
     if (!isDesktop) {
@@ -185,7 +186,11 @@ export default function HlsVideoPlayer({
   }, [videoRef, controlsOpen]);
 
   return (
-    <TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
+    <TransformWrapper
+      minScale={1.0}
+      wheel={{ smoothStep: 0.005 }}
+      onZoom={(zoom) => setZoomScale(zoom.state.scale)}
+    >
       {frigateControls && (
         <VideoControls
           className={cn(
@@ -267,7 +272,13 @@ export default function HlsVideoPlayer({
           controls={!frigateControls}
           playsInline
           muted={muted}
-          onClick={() => onPlayPause(!isPlaying)}
+          onClick={
+            isDesktop
+              ? () => {
+                  if (zoomScale == 1.0) onPlayPause(!isPlaying);
+                }
+              : undefined
+          }
           onVolumeChange={() =>
             setVolume(videoRef.current?.volume ?? 1.0, true)
           }