From ced5ab203f9d35e94469cb8f8944dc1562b13da7 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 28 May 2024 13:41:51 -0500
Subject: [PATCH] ensure the correct container is used for canvas calcs
 (#11599)

---
 web/src/components/player/JSMpegPlayer.tsx | 36 ++++++++++++++--------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/web/src/components/player/JSMpegPlayer.tsx b/web/src/components/player/JSMpegPlayer.tsx
index 62d794306..de07170b9 100644
--- a/web/src/components/player/JSMpegPlayer.tsx
+++ b/web/src/components/player/JSMpegPlayer.tsx
@@ -23,8 +23,13 @@ export default function JSMpegPlayer({
   const playerRef = useRef<HTMLDivElement | null>(null);
   const internalContainerRef = useRef<HTMLDivElement | null>(null);
 
+  const selectedContainerRef = useMemo(
+    () => containerRef ?? internalContainerRef,
+    [containerRef, internalContainerRef],
+  );
+
   const [{ width: containerWidth, height: containerHeight }] =
-    useResizeObserver(containerRef ?? internalContainerRef);
+    useResizeObserver(selectedContainerRef);
 
   const stretch = true;
   const aspectRatio = width / height;
@@ -35,11 +40,14 @@ export default function JSMpegPlayer({
   );
 
   const scaledHeight = useMemo(() => {
-    if (containerRef?.current && width && height) {
+    if (selectedContainerRef?.current && width && height) {
       const scaledHeight =
         aspectRatio < (fitAspect ?? 0)
           ? Math.floor(
-              Math.min(containerHeight, containerRef.current?.clientHeight),
+              Math.min(
+                containerHeight,
+                selectedContainerRef.current?.clientHeight,
+              ),
             )
           : aspectRatio > fitAspect
             ? Math.floor(containerWidth / aspectRatio)
@@ -60,7 +68,7 @@ export default function JSMpegPlayer({
     height,
     width,
     stretch,
-    containerRef,
+    selectedContainerRef,
   ]);
 
   const scaledWidth = useMemo(() => {
@@ -93,15 +101,17 @@ export default function JSMpegPlayer({
   }, [url, camera]);
 
   return (
-    <div className={className} ref={internalContainerRef}>
-      <div ref={playerRef} className="jsmpeg">
-        <canvas
-          id={`${camera}-canvas`}
-          style={{
-            width: scaledWidth ?? width,
-            height: scaledHeight ?? height,
-          }}
-        ></canvas>
+    <div className={className}>
+      <div className="size-full" ref={internalContainerRef}>
+        <div ref={playerRef} className="jsmpeg">
+          <canvas
+            id={`${camera}-canvas`}
+            style={{
+              width: scaledWidth ?? width,
+              height: scaledHeight ?? height,
+            }}
+          ></canvas>
+        </div>
       </div>
     </div>
   );