From 048dae318215897de43b9b385df8e833c52b663c Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 13 Mar 2024 08:49:34 -0500
Subject: [PATCH] preserve aspect ratio

---
 web/src/components/player/BirdseyeLivePlayer.tsx |  6 +++++-
 web/src/components/player/JSMpegPlayer.tsx       | 15 +++++++++++++--
 web/src/components/player/LivePlayer.tsx         |  5 ++++-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/web/src/components/player/BirdseyeLivePlayer.tsx b/web/src/components/player/BirdseyeLivePlayer.tsx
index c70e428db..7ab4c92d7 100644
--- a/web/src/components/player/BirdseyeLivePlayer.tsx
+++ b/web/src/components/player/BirdseyeLivePlayer.tsx
@@ -37,7 +37,11 @@ export default function BirdseyeLivePlayer({
   } else if (liveMode == "jsmpeg") {
     return (
       <div className={`max-w-[${birdseyeConfig.width}px]`}>
-        <JSMpegPlayer camera="birdseye" />
+        <JSMpegPlayer
+          camera="birdseye"
+          width={birdseyeConfig.width}
+          height={birdseyeConfig.height}
+        />
       </div>
     );
   } else {
diff --git a/web/src/components/player/JSMpegPlayer.tsx b/web/src/components/player/JSMpegPlayer.tsx
index a8b3087ce..d23f38310 100644
--- a/web/src/components/player/JSMpegPlayer.tsx
+++ b/web/src/components/player/JSMpegPlayer.tsx
@@ -6,9 +6,16 @@ import { useEffect, useRef } from "react";
 type JSMpegPlayerProps = {
   className?: string;
   camera: string;
+  width: number;
+  height: number;
 };
 
-export default function JSMpegPlayer({ camera, className }: JSMpegPlayerProps) {
+export default function JSMpegPlayer({
+  camera,
+  width,
+  height,
+  className,
+}: JSMpegPlayerProps) {
   const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`;
   const playerRef = useRef<HTMLDivElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -38,7 +45,11 @@ export default function JSMpegPlayer({ camera, className }: JSMpegPlayerProps) {
 
   return (
     <div className={className} ref={containerRef}>
-      <div ref={playerRef} className="jsmpeg size-full" />
+      <div
+        ref={playerRef}
+        className="jsmpeg size-full"
+        style={{ aspectRatio: width / height }}
+      />
     </div>
   );
 }
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index c1a6a364c..b14498c11 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -46,7 +46,8 @@ export default function LivePlayer({
 
   // camera live state
 
-  const liveMode = useCameraLiveMode(cameraConfig, preferredLiveMode);
+  // const liveMode = useCameraLiveMode(cameraConfig, preferredLiveMode);
+  const liveMode = "jsmpeg";
 
   const [liveReady, setLiveReady] = useState(false);
   useEffect(() => {
@@ -124,6 +125,8 @@ export default function LivePlayer({
       <JSMpegPlayer
         className="size-full flex justify-center rounded-2xl overflow-hidden"
         camera={cameraConfig.name}
+        width={cameraConfig.detect.width}
+        height={cameraConfig.detect.height}
       />
     );
   } else {