Add zooming to full recordings

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,6 +170,8 @@ export default function HlsVideoPlayer({
       }
       onClick={isDesktop ? undefined : () => setControls(!controls)}
     >
+      <TransformWrapper minScale={1.0}>
+        <TransformComponent>
           <video
             ref={videoRef}
             className="size-full rounded-2xl"
@@ -182,7 +185,9 @@ export default function HlsVideoPlayer({
 
               if (isMobile) {
                 setControls(true);
-            setMobileCtrlTimeout(setTimeout(() => setControls(false), 4000));
+                setMobileCtrlTimeout(
+                  setTimeout(() => setControls(false), 4000),
+                );
               }
             }}
             onPlaying={onPlaying}
@@ -211,6 +216,8 @@ export default function HlsVideoPlayer({
               }
             }}
           />
+        </TransformComponent>
+      </TransformWrapper>
       <VideoControls
         video={videoRef.current}
         isPlaying={isPlaying}

web/src/views/live/LiveCameraView.tsx

@@ -265,11 +265,10 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
           }}
         >
           <TransformWrapper minScale={1.0}>
-            <div className="p-2">
             <TransformComponent>
               <LivePlayer
                 key={camera.name}
-                  className={`${fullscreen ? "*:rounded-none" : ""}`}
+                className={`m-1 ${fullscreen ? "*:rounded-none" : ""}`}
                 windowVisible
                 showStillWithoutActivity={false}
                 cameraConfig={camera}
@@ -278,7 +277,6 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
                 preferredLiveMode={preferredLiveMode}
               />
             </TransformComponent>
-            </div>
           </TransformWrapper>
         </div>
         {camera.onvif.host != "" && <PtzControlPanel camera={camera.name} />}