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

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();
  }

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