Fix overflowing portrait images in debug and motion tuner views (#11209)

* fix overflowing camera image and remove mse console debug * move calc into onLoad * check container aspect
blakeblackshear · May 2, 2024 · b69c182 · b69c182
1 parent 7a5df60
commit b69c182
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/web/src/components/camera/CameraImage.tsx b/web/src/components/camera/CameraImage.tsx
@@ -2,6 +2,7 @@ import { useApiHost } from "@/api";
 import { useEffect, useRef, useState } from "react";
 import useSWR from "swr";
 import ActivityIndicator from "../indicators/activity-indicator";
+import { useResizeObserver } from "@/hooks/resize-observer";
 
 type CameraImageProps = {
   className?: string;
@@ -24,6 +25,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) {
@@ -35,15 +37,25 @@ export default function CameraImage({
     }`;
   }, [apiHost, name, imgRef, searchParams, config]);
 
+  const [{ width: containerWidth, height: containerHeight }] =
+    useResizeObserver(containerRef);
+
   return (
     <div className={className} ref={containerRef}>
       {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 (imgRef.current) {
+              const { naturalHeight, naturalWidth } = imgRef.current;
+              setIsPortraitImage(
+                naturalWidth / naturalHeight < containerWidth / containerHeight,
+              );
+            }
+
             if (onload) {
               onload();
             }

diff --git 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
           }
         }
       };