Revert "Fix dashboard live rendering and rotated cover fitting"

web/src/components/player/LivePlayer.tsx

@@ -94,7 +94,6 @@ export default function LivePlayer({
   const shouldRotateClockwise = applyDashboardTransforms && rotateClockwise;
 
   const mediaViewportRef = useRef<HTMLDivElement | null>(null);
-  const mediaContentRef = useRef<HTMLDivElement | null>(null);
   const [{ width: viewportWidth, height: viewportHeight }] =
     useResizeObserver(mediaViewportRef);
 
@@ -105,54 +104,17 @@ export default function LivePlayer({
       transforms.push("rotate(90deg)");
     }
 
-    if (!shouldRotateClockwise || !viewportWidth || !viewportHeight) {
+    // For a 90° rotation, the media box must use swapped viewport dimensions
-      return {
+    // before rotating, otherwise the rotated content can under-fill one axis.
-        transform: transforms.join(" "),
+    const rotatedWidth = viewportHeight ? `${viewportHeight}px` : "100%";
-        width: "100%",
+    const rotatedHeight = viewportWidth ? `${viewportWidth}px` : "100%";
-        height: "100%",
-      };
-    }
-
-    const sourceWidth = cameraConfig.detect.width || 1;
-    const sourceHeight = cameraConfig.detect.height || 1;
-    const rotatedAspect = sourceHeight / sourceWidth;
-    const containerAspect = viewportWidth / viewportHeight;
-
-    let renderedWidth = viewportWidth;
-    let renderedHeight = viewportHeight;
-
-    if (shouldFillContainer) {
-      if (rotatedAspect > containerAspect) {
-        renderedHeight = viewportHeight;
-        renderedWidth = renderedHeight * rotatedAspect;
-      } else {
-        renderedWidth = viewportWidth;
-        renderedHeight = renderedWidth / rotatedAspect;
-      }
-    } else if (rotatedAspect > containerAspect) {
-      renderedWidth = viewportWidth;
-      renderedHeight = renderedWidth / rotatedAspect;
-    } else {
-      renderedHeight = viewportHeight;
-      renderedWidth = renderedHeight * rotatedAspect;
-    }
-
-    const rotatedWidth = `${Math.ceil(renderedHeight)}px`;
-    const rotatedHeight = `${Math.ceil(renderedWidth)}px`;
 
     return {
       transform: transforms.join(" "),
       width: shouldRotateClockwise ? rotatedWidth : "100%",
       height: shouldRotateClockwise ? rotatedHeight : "100%",
     };
-  }, [
+  }, [shouldRotateClockwise, viewportHeight, viewportWidth]);
-    cameraConfig.detect.height,
-    cameraConfig.detect.width,
-    shouldFillContainer,
-    shouldRotateClockwise,
-    viewportHeight,
-    viewportWidth,
-  ]);
   // stats
 
   const [stats, setStats] = useState<PlayerStatsType>({
@@ -348,7 +310,7 @@ export default function LivePlayer({
         className={cn(
           "size-full rounded-lg md:rounded-2xl",
           shouldFillContainer && "object-cover",
-          liveReady ? "opacity-100" : "opacity-0",
+          liveReady ? "" : "hidden",
         )}
         camera={streamName}
         playbackEnabled={cameraActive || liveReady}
@@ -371,7 +333,7 @@ export default function LivePlayer({
           className={cn(
             "size-full rounded-lg md:rounded-2xl",
             shouldFillContainer && "object-cover",
-            liveReady ? "opacity-100" : "opacity-0",
+            liveReady ? "" : "hidden",
           )}
           camera={streamName}
           playbackEnabled={cameraActive || liveReady}
@@ -411,11 +373,7 @@ export default function LivePlayer({
           }
           useWebGL={useWebGL}
           setStats={setStats}
-          containerRef={
+          containerRef={containerRef ?? internalContainerRef}
-            applyDashboardTransforms
-              ? mediaContentRef
-              : (containerRef ?? internalContainerRef)
-          }
           onPlaying={playerIsPlaying}
           fit={shouldFillContainer ? "cover" : "contain"}
         />
@@ -463,7 +421,6 @@ export default function LivePlayer({
           )}
         >
           <div
-            ref={mediaContentRef}
             className="absolute left-1/2 top-1/2"
             style={mediaTransformStyle}
           >