From 3983507c0a25316a4da86e0a0e2a9f8dd6603c65 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 15 Mar 2024 06:33:34 -0600
Subject: [PATCH] Add zooming to full recordings

---
 web/src/components/player/HlsVideoPlayer.tsx | 87 +++++++++++---------
 web/src/views/live/LiveCameraView.tsx        | 26 +++---
 2 files changed, 59 insertions(+), 54 deletions(-)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 0ede0ea3c..4492bae43 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -27,6 +27,7 @@ import {
 } from "react-icons/md";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { Slider } from "../ui/slider-volume";
+import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 
 const HLS_MIME_TYPE = "application/vnd.apple.mpegurl" as const;
 const unsupportedErrorCodes = [
@@ -169,48 +170,54 @@ export default function HlsVideoPlayer({
       }
       onClick={isDesktop ? undefined : () => setControls(!controls)}
     >
-      <video
-        ref={videoRef}
-        className="size-full rounded-2xl"
-        preload="auto"
-        autoPlay
-        controls={false}
-        playsInline
-        muted
-        onPlay={() => {
-          setIsPlaying(true);
+      <TransformWrapper minScale={1.0}>
+        <TransformComponent>
+          <video
+            ref={videoRef}
+            className="size-full rounded-2xl"
+            preload="auto"
+            autoPlay
+            controls={false}
+            playsInline
+            muted
+            onPlay={() => {
+              setIsPlaying(true);
 
-          if (isMobile) {
-            setControls(true);
-            setMobileCtrlTimeout(setTimeout(() => setControls(false), 4000));
-          }
-        }}
-        onPlaying={onPlaying}
-        onPause={() => {
-          setIsPlaying(false);
+              if (isMobile) {
+                setControls(true);
+                setMobileCtrlTimeout(
+                  setTimeout(() => setControls(false), 4000),
+                );
+              }
+            }}
+            onPlaying={onPlaying}
+            onPause={() => {
+              setIsPlaying(false);
 
-          if (isMobile && mobileCtrlTimeout) {
-            clearTimeout(mobileCtrlTimeout);
-          }
-        }}
-        onTimeUpdate={() =>
-          onTimeUpdate && videoRef.current
-            ? onTimeUpdate(videoRef.current.currentTime)
-            : undefined
-        }
-        onLoadedData={onPlayerLoaded}
-        onEnded={onClipEnded}
-        onError={(e) => {
-          if (
-            !hlsRef.current &&
-            // @ts-expect-error code does exist
-            unsupportedErrorCodes.includes(e.target.error.code) &&
-            videoRef.current
-          ) {
-            setUseHlsCompat(true);
-          }
-        }}
-      />
+              if (isMobile && mobileCtrlTimeout) {
+                clearTimeout(mobileCtrlTimeout);
+              }
+            }}
+            onTimeUpdate={() =>
+              onTimeUpdate && videoRef.current
+                ? onTimeUpdate(videoRef.current.currentTime)
+                : undefined
+            }
+            onLoadedData={onPlayerLoaded}
+            onEnded={onClipEnded}
+            onError={(e) => {
+              if (
+                !hlsRef.current &&
+                // @ts-expect-error code does exist
+                unsupportedErrorCodes.includes(e.target.error.code) &&
+                videoRef.current
+              ) {
+                setUseHlsCompat(true);
+              }
+            }}
+          />
+        </TransformComponent>
+      </TransformWrapper>
       <VideoControls
         video={videoRef.current}
         isPlaying={isPlaying}
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index e5fb8fb03..0ed7c342a 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -265,20 +265,18 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
           }}
         >
           <TransformWrapper minScale={1.0}>
-            <div className="p-2">
-              <TransformComponent>
-                <LivePlayer
-                  key={camera.name}
-                  className={`${fullscreen ? "*:rounded-none" : ""}`}
-                  windowVisible
-                  showStillWithoutActivity={false}
-                  cameraConfig={camera}
-                  playAudio={audio}
-                  micEnabled={mic}
-                  preferredLiveMode={preferredLiveMode}
-                />
-              </TransformComponent>
-            </div>
+            <TransformComponent>
+              <LivePlayer
+                key={camera.name}
+                className={`m-1 ${fullscreen ? "*:rounded-none" : ""}`}
+                windowVisible
+                showStillWithoutActivity={false}
+                cameraConfig={camera}
+                playAudio={audio}
+                micEnabled={mic}
+                preferredLiveMode={preferredLiveMode}
+              />
+            </TransformComponent>
           </TransformWrapper>
         </div>
         {camera.onvif.host != "" && <PtzControlPanel camera={camera.name} />}