fix birdseye fullscreen (#11625)

blakeblackshear · May 29, 2024 · 37dd3fc · 37dd3fc
1 parent 9e82028
commit 37dd3fc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/web/src/components/player/JSMpegPlayer.tsx b/web/src/components/player/JSMpegPlayer.tsx
@@ -49,7 +49,7 @@ export default function JSMpegPlayer({
                 selectedContainerRef.current?.clientHeight,
               ),
             )
-          : aspectRatio > fitAspect
+          : aspectRatio >= fitAspect
             ? Math.floor(containerWidth / aspectRatio)
             : Math.floor(containerWidth / aspectRatio) / 1.5;
       const finalHeight = stretch

diff --git a/web/src/views/live/LiveBirdseyeView.tsx b/web/src/views/live/LiveBirdseyeView.tsx
@@ -48,12 +48,22 @@ export default function LiveBirdseyeView() {
 
   const containerAspectRatio = useMemo(() => {
     if (!containerRef.current) {
-      return windowAspectRatio;
+      return windowAspectRatio ?? 0;
     }
 
     return containerRef.current.clientWidth / containerRef.current.clientHeight;
   }, [windowAspectRatio, containerRef]);
 
+  const constrainedAspectRatio = useMemo<number>(() => {
+    if (isMobile || fullscreen) {
+      return cameraAspectRatio;
+    } else {
+      return containerAspectRatio < cameraAspectRatio
+        ? containerAspectRatio
+        : cameraAspectRatio;
+    }
+  }, [cameraAspectRatio, containerAspectRatio, fullscreen]);
+
   const growClassName = useMemo(() => {
     if (isMobile) {
       if (isPortrait) {
@@ -90,16 +100,6 @@ export default function LiveBirdseyeView() {
     return "mse";
   }, [config]);
 
-  const aspectRatio = useMemo<number>(() => {
-    if (isMobile || fullscreen) {
-      return cameraAspectRatio;
-    } else {
-      return containerAspectRatio < cameraAspectRatio
-        ? containerAspectRatio
-        : cameraAspectRatio;
-    }
-  }, [cameraAspectRatio, containerAspectRatio, fullscreen]);
-
   if (!config) {
     return <ActivityIndicator />;
   }
@@ -163,7 +163,7 @@ export default function LiveBirdseyeView() {
             <div
               className={growClassName}
               style={{
-                aspectRatio: aspectRatio,
+                aspectRatio: constrainedAspectRatio,
               }}
             >
               <BirdseyeLivePlayer