From 8377e466a36b082f3cc7a854f8984b567c3fd434 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 10 Feb 2024 09:09:59 -0600
Subject: [PATCH] set aspect ratios on live display

---
 web/src/components/Sidebar.tsx           |  4 ++--
 web/src/components/player/LivePlayer.tsx |  3 +++
 web/src/pages/Live.tsx                   | 24 ++++++++++++++++++------
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index a855dbdc0..0a563cbce 100644
--- a/web/src/components/Sidebar.tsx
+++ b/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"
             }`
           }
         >
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index a13a43707..ba3e31f05 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/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}
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index c50c0d4d2..e8bde6475 100644
--- a/web/src/pages/Live.tsx
+++ b/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;