From 37dd3fc25b25c95a4dc41ee8d9c40f321c148fd7 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 29 May 2024 14:18:51 -0500
Subject: [PATCH] fix birdseye fullscreen (#11625)

---
 web/src/components/player/JSMpegPlayer.tsx |  2 +-
 web/src/views/live/LiveBirdseyeView.tsx    | 24 +++++++++++-----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/web/src/components/player/JSMpegPlayer.tsx b/web/src/components/player/JSMpegPlayer.tsx
index de07170b9..3b43e16da 100644
--- 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
index dde52e339..77cb1b140 100644
--- 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