Merge pull request #94 from ibs0d/claude/add-camera-rotation-support-Lg2l9

Add ui.rotate support to PreviewPlayer (scrubbing preview in recordings)

web/src/components/player/PreviewPlayer.tsx

@@ -33,6 +33,7 @@ type PreviewPlayerProps = {
   isScrubbing: boolean;
   forceAspect?: number;
   isVisible?: boolean;
+  rotate?: boolean;
   onControllerReady: (controller: PreviewController) => void;
   onClick?: () => void;
 };
@@ -45,6 +46,7 @@ export default function PreviewPlayer({
   startTime,
   isScrubbing,
   isVisible = true,
+  rotate,
   onControllerReady,
   onClick,
 }: PreviewPlayerProps) {
@@ -69,6 +71,7 @@ export default function PreviewPlayer({
         isScrubbing={isScrubbing}
         isVisible={isVisible}
         currentHourFrame={currentHourFrame}
+        rotate={rotate}
         onControllerReady={onControllerReady}
         onClick={onClick}
         setCurrentHourFrame={setCurrentHourFrame}
@@ -83,6 +86,7 @@ export default function PreviewPlayer({
         camera={camera}
         timeRange={timeRange}
         startTime={startTime}
+        rotate={rotate}
         onControllerReady={onControllerReady}
         onClick={onClick}
         setCurrentHourFrame={setCurrentHourFrame}
@@ -127,6 +131,7 @@ type PreviewVideoPlayerProps = {
   isScrubbing: boolean;
   isVisible: boolean;
   currentHourFrame?: string;
+  rotate?: boolean;
   onControllerReady: (controller: PreviewVideoController) => void;
   onClick?: () => void;
   setCurrentHourFrame: (src: string | undefined) => void;
@@ -142,6 +147,7 @@ function PreviewVideoPlayer({
   isScrubbing,
   isVisible,
   currentHourFrame,
+  rotate,
   onControllerReady,
   onClick,
   setCurrentHourFrame,
@@ -183,6 +189,33 @@ function PreviewVideoPlayer({
     controller.scrubbing = isScrubbing;
   }, [controller, isScrubbing]);
 
+  // rotation support
+  const rotateContainerRef = useRef<HTMLDivElement>(null);
+  const [rotateContainerSize, setRotateContainerSize] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    if (!rotate) return;
+
+    const container = rotateContainerRef.current;
+    if (!container) return;
+
+    const updateSize = () => {
+      setRotateContainerSize({
+        width: container.clientWidth,
+        height: container.clientHeight,
+      });
+    };
+
+    updateSize();
+    const resizeObserver = new ResizeObserver(updateSize);
+    resizeObserver.observe(container);
+
+    return () => resizeObserver.disconnect();
+  }, [rotate]);
+
   // initial state
 
   const [firstLoad, setFirstLoad] = useState(true);
@@ -282,14 +315,43 @@ function PreviewVideoPlayer({
       ref={visibilityRef}
       className={cn(
         "relative flex w-full justify-center overflow-hidden rounded-lg bg-black md:rounded-2xl",
+        rotate && "h-full",
         onClick && "cursor-pointer",
         className,
       )}
       data-camera={camera}
       onClick={onClick}
+    >
+      <div
+        ref={rotateContainerRef}
+        className="size-full"
+        style={
+          rotate
+            ? { position: "relative" as const, overflow: "hidden" as const }
+            : undefined
+        }
+      >
+        <div
+          style={
+            rotate
+              ? {
+                  position: "absolute" as const,
+                  top: "50%",
+                  left: "50%",
+                  width: rotateContainerSize.height || "100%",
+                  height: rotateContainerSize.width || "100%",
+                  transform: "translate(-50%, -50%)",
+                }
+              : { width: "100%", height: "100%" }
+          }
         >
           <img
             className={`absolute size-full object-contain ${currentHourFrame ? "visible" : "invisible"}`}
+            style={
+              rotate
+                ? { transform: "rotate(90deg)", transformOrigin: "center center" }
+                : undefined
+            }
             src={currentHourFrame}
             onLoad={() => {
               if (changeoverTimeout) {
@@ -304,6 +366,11 @@ function PreviewVideoPlayer({
             <video
               ref={previewRef}
               className={`absolute size-full ${currentHourFrame ? "invisible" : "visible"}`}
+              style={
+                rotate
+                  ? { transform: "rotate(90deg)", transformOrigin: "center center" }
+                  : undefined
+              }
               preload="auto"
               autoPlay
               playsInline
@@ -343,6 +410,8 @@ function PreviewVideoPlayer({
               )}
             </video>
           )}
+        </div>
+      </div>
       {cameraPreviews && !currentPreview && (
         <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background_alt text-primary dark:bg-black md:rounded-2xl">
           {t("noPreviewFoundFor", { camera: cameraName })}
@@ -452,6 +521,7 @@ type PreviewFramesPlayerProps = {
   camera: string;
   timeRange: TimeRange;
   startTime?: number;
+  rotate?: boolean;
   onControllerReady: (controller: PreviewController) => void;
   onClick?: () => void;
   setCurrentHourFrame: (src: string) => void;
@@ -461,6 +531,7 @@ function PreviewFramesPlayer({
   camera,
   timeRange,
   startTime,
+  rotate,
   setCurrentHourFrame,
   onControllerReady,
   onClick,
@@ -504,6 +575,33 @@ function PreviewFramesPlayer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imgRef, frameTimes, imgRef.current]);
 
+  // rotation support
+  const rotateContainerRef = useRef<HTMLDivElement>(null);
+  const [rotateContainerSize, setRotateContainerSize] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    if (!rotate) return;
+
+    const container = rotateContainerRef.current;
+    if (!container) return;
+
+    const updateSize = () => {
+      setRotateContainerSize({
+        width: container.clientWidth,
+        height: container.clientHeight,
+      });
+    };
+
+    updateSize();
+    const resizeObserver = new ResizeObserver(updateSize);
+    resizeObserver.observe(container);
+
+    return () => resizeObserver.disconnect();
+  }, [rotate]);
+
   // initial state
 
   const [firstLoad, setFirstLoad] = useState(true);
@@ -555,17 +653,48 @@ function PreviewFramesPlayer({
     <div
       className={cn(
         "relative flex w-full justify-center",
+        rotate && "h-full",
         className,
         onClick && "cursor-pointer",
       )}
       onClick={onClick}
+    >
+      <div
+        ref={rotateContainerRef}
+        className="size-full"
+        style={
+          rotate
+            ? { position: "relative" as const, overflow: "hidden" as const }
+            : undefined
+        }
+      >
+        <div
+          style={
+            rotate
+              ? {
+                  position: "absolute" as const,
+                  top: "50%",
+                  left: "50%",
+                  width: rotateContainerSize.height || "100%",
+                  height: rotateContainerSize.width || "100%",
+                  transform: "translate(-50%, -50%)",
+                }
+              : { width: "100%", height: "100%" }
+          }
         >
           <img
             ref={imgRef}
             className={`size-full rounded-lg bg-black object-contain md:rounded-2xl`}
+            style={
+              rotate
+                ? { transform: "rotate(90deg)", transformOrigin: "center center" }
+                : undefined
+            }
             loading="lazy"
             onLoad={onImageLoaded}
           />
+        </div>
+      </div>
       {previewFrames?.length === 0 && (
         <div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-background_alt text-center text-primary dark:bg-black md:rounded-2xl">
           {t("noPreviewFoundFor", { cameraName: cameraName })}

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -337,6 +337,7 @@ export default function DynamicVideoPlayer({
         cameraPreviews={cameraPreviews}
         startTime={startTimestamp}
         isScrubbing={isScrubbing}
+        rotate={rotate}
         onControllerReady={(previewController) =>
           setPreviewController(previewController)
         }