set aspect ratios on live display

web/src/components/Sidebar.tsx

@@ -74,8 +74,8 @@ function SidebarItem({ Icon, title, url, dev, onClick }: SidebarItemProps) {
           className={({ isActive }) =>
             `mx-[10px] mb-6 flex flex-col justify-center items-center rounded-lg ${
               isActive
-                ? "font-bold text-white bg-primary"
-                : "text-muted-foreground bg-secondary"
+                ? "font-bold text-primary-foreground bg-primary"
+                : "text-muted-foreground bg-muted"
             }`
           }
         >

web/src/components/player/LivePlayer.tsx

@@ -23,6 +23,7 @@ const emptyObject = Object.freeze({});
 
 type LivePlayerProps = {
   className?: string;
+  aspectRatio?: string;
   cameraConfig: CameraConfig;
   preferredLiveMode?: LivePlayerMode;
   showStillWithoutActivity?: boolean;
@@ -32,6 +33,7 @@ type Options = { [key: string]: boolean };
 
 export default function LivePlayer({
   className,
+  aspectRatio,
   cameraConfig,
   preferredLiveMode,
   showStillWithoutActivity = true,
@@ -166,6 +168,7 @@ 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

@@ -78,16 +78,19 @@ function Live() {
       <div className="mt-4 md:grid md:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-4">
         {cameras.map((camera) => {
           let grow;
-          if (camera.detect.width / camera.detect.height > 2) {
-            grow = "aspect-wide md:col-span-2";
-          } else if (camera.detect.width / camera.detect.height < 1) {
-            grow = "aspect-tall md:aspect-auto md:row-span-2";
-          } else {
-            grow = "aspect-video";
+          let aspectRatio = camera.detect.width / camera.detect.height;
+          if (aspectRatio > 2) {
+            grow = "md:col-span-2";
+          } else if (aspectRatio < 1) {
+            grow = `md:row-span-2`;
           }
           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"
@@ -99,4 +102,13 @@ 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;