From efde23ed817b7e77965e3550e7cdbbbf777f76aa Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 2 May 2024 12:15:57 -0500
Subject: [PATCH] fix overflowing camera image and remove mse console debug

---
 web/src/components/camera/CameraImage.tsx | 7 ++++++-
 web/src/components/player/MsePlayer.tsx   | 6 ++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/web/src/components/camera/CameraImage.tsx b/web/src/components/camera/CameraImage.tsx
index ab0bfdf08..3a8c0554f 100644
--- a/web/src/components/camera/CameraImage.tsx
+++ b/web/src/components/camera/CameraImage.tsx
@@ -24,6 +24,7 @@ export default function CameraImage({
 
   const { name } = config ? config.cameras[camera] : "";
   const enabled = config ? config.cameras[camera].enabled : "True";
+  const [isPortraitImage, setIsPortraitImage] = useState(false);
 
   useEffect(() => {
     if (!config || !imgRef.current) {
@@ -40,11 +41,15 @@ export default function CameraImage({
       {enabled ? (
         <img
           ref={imgRef}
-          className="object-contain rounded-lg md:rounded-2xl"
+          className={`object-contain ${isPortraitImage ? "h-full w-auto" : "w-full h-auto"} rounded-lg md:rounded-2xl`}
           onLoad={() => {
             setHasLoaded(true);
 
             if (onload) {
+              if (imgRef.current) {
+                const { naturalHeight, naturalWidth } = imgRef.current;
+                setIsPortraitImage(naturalHeight > naturalWidth);
+              }
               onload();
             }
           }}
diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index 222f2ebcd..63f78006f 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -215,8 +215,7 @@ function MSEPlayer({
             }
           }
         } catch (e) {
-          // eslint-disable-next-line no-console
-          console.debug(e);
+          // no-op
         }
       });
 
@@ -233,8 +232,7 @@ function MSEPlayer({
           try {
             sb?.appendBuffer(data);
           } catch (e) {
-            // eslint-disable-next-line no-console
-            console.debug(e);
+            // no-op
           }
         }
       };