From c9283f59902dab7e40bd2ec8d4d8c5503435aadc Mon Sep 17 00:00:00 2001
From: ibs0d <53568938+ibs0d@users.noreply.github.com>
Date: Sun, 8 Mar 2026 23:31:00 +1100
Subject: [PATCH] refactor: use shared live zoom helpers in camera view

---
 web/src/views/live/LiveCameraView.tsx | 35 ++++++---------------------
 1 file changed, 7 insertions(+), 28 deletions(-)

diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 9d6f45f87..0e5278b34 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -122,6 +122,10 @@ import {
   SnapshotResult,
 } from "@/utils/snapshotUtil";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import {
+  createLiveZoomWrapperProps,
+  getLiveZoomTransformStyles,
+} from "@/views/live/liveZoom";
 
 type LiveCameraViewProps = {
   config?: FrigateConfig;
@@ -437,11 +441,7 @@ export default function LiveCameraView({
   );
 
   return (
-    <TransformWrapper
-      minScale={1.0}
-      wheel={{ smoothStep: 0.005 }}
-      disabled={debug}
-    >
+    <TransformWrapper {...createLiveZoomWrapperProps(debug)}>
       <Toaster position="top-center" closeButton={true} />
       <div
         ref={mainRef}
@@ -621,18 +621,7 @@ export default function LiveCameraView({
         </div>
         {!debug ? (
           <div id="player-container" className="size-full" ref={containerRef}>
-            <TransformComponent
-              wrapperStyle={{
-                width: "100%",
-                height: "100%",
-              }}
-              contentStyle={{
-                position: "relative",
-                width: "100%",
-                height: "100%",
-                padding: "8px",
-              }}
-            >
+            <TransformComponent {...getLiveZoomTransformStyles("player")}>
               <div
                 className={`flex flex-col items-center justify-center ${growClassName}`}
                 ref={clickOverlayRef}
@@ -675,17 +664,7 @@ export default function LiveCameraView({
               )}
           </div>
         ) : (
-          <TransformComponent
-            wrapperStyle={{
-              width: "100%",
-              height: "100%",
-            }}
-            contentStyle={{
-              position: "relative",
-              width: "100%",
-              height: "100%",
-            }}
-          >
+          <TransformComponent {...getLiveZoomTransformStyles("debug")}>
             <ObjectSettingsView selectedCamera={camera.name} />
           </TransformComponent>
         )}