try 8/9

web/src/components/player/LivePlayer.tsx

@@ -23,7 +23,6 @@ const emptyObject = Object.freeze({});
 
 type LivePlayerProps = {
   className?: string;
-  aspectRatio?: string;
   cameraConfig: CameraConfig;
   preferredLiveMode?: LivePlayerMode;
   showStillWithoutActivity?: boolean;
@@ -33,7 +32,6 @@ type Options = { [key: string]: boolean };
 
 export default function LivePlayer({
   className,
-  aspectRatio,
   cameraConfig,
   preferredLiveMode,
   showStillWithoutActivity = true,
@@ -168,7 +166,6 @@ export default function LivePlayer({
           ? "outline-destructive outline-1 rounded-2xl shadow-[0_0_6px_1px] shadow-destructive"
           : "outline-0"
       } transition-all duration-500 ${className}`}
-      style={{ aspectRatio: aspectRatio }}
     >
       {(showStillWithoutActivity == false || activeMotion || activeTracking) &&
         player}

web/src/pages/Live.tsx

@@ -80,17 +80,15 @@ function Live() {
           let grow;
           let aspectRatio = camera.detect.width / camera.detect.height;
           if (aspectRatio > 2) {
-            grow = "md:col-span-2";
+            grow = "md:col-span-2 aspect-wide";
           } else if (aspectRatio < 1) {
-            grow = `md:row-span-2`;
+            grow = `md:row-span-2 aspect-[8/9]`;
+          } else {
+            grow = "aspect-video";
           }
           return (
             <LivePlayer
               key={camera.name}
-              aspectRatio={getAspectRatio(
-                camera.detect.width,
-                camera.detect.height
-              )}
               className={`mb-2 md:mb-0 rounded-2xl bg-black ${grow}`}
               cameraConfig={camera}
               preferredLiveMode="mse"
@@ -102,13 +100,4 @@ function Live() {
   );
 }
 
-function getAspectRatio(width: number, height: number): string {
-  const gcd = (a: number, b: number): number => {
-    return b === 0 ? a : gcd(b, a % b);
-  };
-
-  const common = gcd(width, height);
-  return `${width / common}/${height / common}`;
-}
-
 export default Live;