From 79ca599aceeb74d7d07192608e983cf1500b382a Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 13 Mar 2024 09:00:37 -0500
Subject: [PATCH] Fix jsmpeg player component (#10425)

* fix jsmpeg component

* preserve aspect ratio

* remove forcing of jsmpeg

* full height only
---
 web/src/components/player/JSMpegPlayer.tsx | 52 ++--------------------
 web/src/components/player/LivePlayer.tsx   |  4 +-
 2 files changed, 5 insertions(+), 51 deletions(-)

diff --git a/web/src/components/player/JSMpegPlayer.tsx b/web/src/components/player/JSMpegPlayer.tsx
index 8da686d6b..937502f60 100644
--- a/web/src/components/player/JSMpegPlayer.tsx
+++ b/web/src/components/player/JSMpegPlayer.tsx
@@ -1,8 +1,7 @@
 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;
@@ -20,38 +19,6 @@ export default function JSMpegPlayer({
   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 +32,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 {
@@ -90,11 +47,8 @@ export default function JSMpegPlayer({
     <div className={className} ref={containerRef}>
       <div
         ref={playerRef}
-        className={`jsmpeg`}
-        style={{
-          height: `${scaledHeight}px`,
-          width: `${scaledWidth}px`,
-        }}
+        className="jsmpeg h-full"
+        style={{ aspectRatio: width / height }}
       />
     </div>
   );
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 30c1d5b5c..ae982a5ce 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -125,7 +125,7 @@ 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}
@@ -137,7 +137,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"