fix jsmpeg component

web/src/components/player/BirdseyeLivePlayer.tsx

@@ -37,11 +37,7 @@ export default function BirdseyeLivePlayer({
   } else if (liveMode == "jsmpeg") {
     return (
       <div className={`max-w-[${birdseyeConfig.width}px]`}>
-        <JSMpegPlayer
-          camera="birdseye"
-          width={birdseyeConfig.width}
-          height={birdseyeConfig.height}
-        />
+        <JSMpegPlayer camera="birdseye" />
       </div>
     );
   } else {

web/src/components/player/JSMpegPlayer.tsx

@@ -1,57 +1,17 @@
 import { baseUrl } from "@/api/baseUrl";
-import { useResizeObserver } from "@/hooks/resize-observer";
 // @ts-expect-error we know this doesn't have types
 import JSMpeg from "@cycjimmy/jsmpeg-player";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useRef } from "react";
 
 type JSMpegPlayerProps = {
   className?: string;
   camera: string;
-  width: number;
-  height: number;
 };
 
-export default function JSMpegPlayer({
-  camera,
-  width,
-  height,
-  className,
-}: JSMpegPlayerProps) {
+export default function JSMpegPlayer({ camera, className }: JSMpegPlayerProps) {
   const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`;
   const playerRef = useRef<HTMLDivElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const [{ width: containerWidth, height: containerHeight }] =
-    useResizeObserver(containerRef);
-
-  // Add scrollbar width (when visible) to the available observer width to eliminate screen juddering.
-  // https://github.com/blakeblackshear/frigate/issues/1657
-  let scrollBarWidth = 0;
-  if (window.innerWidth && document.body.offsetWidth) {
-    scrollBarWidth = window.innerWidth - document.body.offsetWidth;
-  }
-  const availableWidth = scrollBarWidth
-    ? containerWidth + scrollBarWidth
-    : containerWidth;
-  const aspectRatio = width / height;
-
-  const scaledHeight = useMemo(() => {
-    const scaledHeight = Math.floor(availableWidth / aspectRatio);
-    const finalHeight = Math.min(scaledHeight, height);
-
-    if (containerHeight < finalHeight) {
-      return containerHeight;
-    }
-
-    if (finalHeight > 0) {
-      return finalHeight;
-    }
-
-    return 100;
-  }, [availableWidth, aspectRatio, containerHeight, height]);
-  const scaledWidth = useMemo(
-    () => Math.ceil(scaledHeight * aspectRatio - scrollBarWidth),
-    [scaledHeight, aspectRatio, scrollBarWidth],
-  );
 
   useEffect(() => {
     if (!playerRef.current) {
@@ -65,16 +25,6 @@ export default function JSMpegPlayer({
       { protocols: [], audio: false, videoBufferSize: 1024 * 1024 * 4 },
     );
 
-    const fullscreen = () => {
-      if (video.els.canvas.webkitRequestFullScreen) {
-        video.els.canvas.webkitRequestFullScreen();
-      } else {
-        video.els.canvas.mozRequestFullScreen();
-      }
-    };
-
-    video.els.canvas.addEventListener("click", fullscreen);
-
     return () => {
       if (playerRef.current) {
         try {
@@ -88,14 +38,7 @@ export default function JSMpegPlayer({
 
   return (
     <div className={className} ref={containerRef}>
-      <div
-        ref={playerRef}
-        className={`jsmpeg`}
-        style={{
-          height: `${scaledHeight}px`,
-          width: `${scaledWidth}px`,
-        }}
-      />
+      <div ref={playerRef} className="jsmpeg size-full" />
     </div>
   );
 }

web/src/components/player/LivePlayer.tsx

@@ -122,10 +122,8 @@ export default function LivePlayer({
   } else if (liveMode == "jsmpeg") {
     player = (
       <JSMpegPlayer
-        className="w-full flex justify-center rounded-2xl overflow-hidden"
+        className="size-full flex justify-center rounded-2xl overflow-hidden"
         camera={cameraConfig.name}
-        width={cameraConfig.detect.width}
-        height={cameraConfig.detect.height}
       />
     );
   } else {
@@ -134,7 +132,7 @@ export default function LivePlayer({
 
   return (
     <div
-      className={`relative flex justify-center w-full outline cursor-pointer ${
+      className={`relative flex justify-center ${liveMode == "jsmpeg" ? "size-full" : "w-full"} outline cursor-pointer ${
         activeTracking
           ? "outline-severity_alert outline-1 rounded-2xl shadow-[0_0_6px_2px] shadow-severity_alert"
           : "outline-0 outline-background"