From 063ed05738d86141e72a8b1ac467d6762d04f2bd Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 8 Feb 2024 11:50:32 -0700
Subject: [PATCH] Animate visibility of chips

---
 web/src/components/player/LivePlayer.tsx | 18 +++++++++++++++---
 web/src/pages/Live.tsx                   |  2 +-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 4e23b698d..aa63d3f08 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -175,7 +175,11 @@ export default function LivePlayer({
 
       {liveChips && (
         <div className="absolute flex left-2 top-2 gap-2">
-          <Chip className="bg-gray-500 bg-gradient-to-br">
+          <Chip
+            className={`bg-gray-500 bg-gradient-to-br ${
+              activeMotion ? "visible opacity-100" : "invisible opacity-0"
+            }`}
+          >
             <MdLeakAdd
               className={`w-4 h-4 ${
                 activeMotion ? "text-motion" : "text-white"
@@ -184,7 +188,11 @@ export default function LivePlayer({
             <div className="ml-1 capitalize text-white text-xs">Motion</div>
           </Chip>
           {cameraConfig.audio.enabled_in_config && (
-            <Chip className="bg-gray-500 bg-gradient-to-br">
+            <Chip
+              className={`bg-gray-500 bg-gradient-to-br transition-all ${
+                activeAudio ? "visible opacity-100" : "invisible opacity-0"
+              }`}
+            >
               <BsSoundwave
                 className={`w-4 h-4 ${
                   activeAudio ? "text-audio" : "text-white"
@@ -193,7 +201,11 @@ export default function LivePlayer({
               <div className="ml-1 capitalize text-white text-xs">Sound</div>
             </Chip>
           )}
-          <Chip className="bg-gray-500 bg-gradient-to-br">
+          <Chip
+            className={`bg-gray-500 bg-gradient-to-br transition-all ${
+              activeTracking ? "inline opacity-100" : "invisible opacity-0"
+            }`}
+          >
             <MdSelectAll
               className={`w-4 h-4 ${
                 activeTracking ? "text-object" : "text-white"
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index 61977022a..b95e17a46 100644
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@@ -77,7 +77,7 @@ function Live() {
           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) {
+          } else if (camera.detect.width / camera.detect.height < 0.7) {
             grow = "aspect-tall md:row-span-2";
           } else {
             grow = "aspect-video";