From 6a5366d320470563023bf1af59707d3848b7ea30 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 27 May 2024 14:10:22 -0500
Subject: [PATCH] make jsmpeg canvas responsive

---
 web/src/components/player/JSMpegPlayer.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/src/components/player/JSMpegPlayer.tsx b/web/src/components/player/JSMpegPlayer.tsx
index 937502f60..ba2f7ff9d 100644
--- a/web/src/components/player/JSMpegPlayer.tsx
+++ b/web/src/components/player/JSMpegPlayer.tsx
@@ -18,7 +18,6 @@ export default function JSMpegPlayer({
 }: JSMpegPlayerProps) {
   const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`;
   const playerRef = useRef<HTMLDivElement | null>(null);
-  const containerRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     if (!playerRef.current) {
@@ -28,7 +27,7 @@ export default function JSMpegPlayer({
     const video = new JSMpeg.VideoElement(
       playerRef.current,
       url,
-      {},
+      { canvas: "#video-canvas" },
       { protocols: [], audio: false, videoBufferSize: 1024 * 1024 * 4 },
     );
 
@@ -44,12 +43,17 @@ export default function JSMpegPlayer({
   }, [url]);
 
   return (
-    <div className={className} ref={containerRef}>
+    <div className={className}>
       <div
         ref={playerRef}
         className="jsmpeg h-full"
         style={{ aspectRatio: width / height }}
-      />
+      >
+        <canvas
+          id="video-canvas"
+          style={{ width: "100%", height: "100%" }}
+        ></canvas>
+      </div>
     </div>
   );
 }