From f54cb21bd061d8677ed4b7906af244ebc1db9945 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 12 Feb 2024 17:34:45 -0600
Subject: [PATCH] UI changes (#9823)

* fix button within button

* add subtle overlay gradient

* try disconnecting to improve memory usage

* rounded corners on gradients
---
 web/src/components/Header.tsx                 |  4 +--
 web/src/components/player/LivePlayer.tsx      | 19 +++++++++-----
 web/src/components/player/MsePlayer.tsx       |  4 +++
 .../components/settings/SettingsNavItems.tsx  | 26 ++++++++++---------
 4 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 9eb84fe2f..0d67be7ed 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -50,9 +50,7 @@ function Header({ onToggleNavbar }: HeaderProps) {
         </Button>
         <Link to="/">
           <div className="flex flex-row items-center">
-            <div className="w-10 mr-5">
-              <Logo />
-            </div>
+            <Logo className="w-10 mr-5" />
           </div>
         </Link>
         <HeaderNavigation />
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 1c41f9ca5..09ed3c027 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -40,7 +40,10 @@ export default function LivePlayer({
   const { activeMotion, activeAudio, activeTracking } =
     useCameraActivity(cameraConfig);
 
-  const cameraActive = useMemo(() => activeMotion || activeTracking, [activeMotion, activeTracking])
+  const cameraActive = useMemo(
+    () => activeMotion || activeTracking,
+    [activeMotion, activeTracking]
+  );
   const liveMode = useCameraLiveMode(cameraConfig, preferredLiveMode);
 
   const [liveReady, setLiveReady] = useState(false);
@@ -168,8 +171,10 @@ export default function LivePlayer({
           : "outline-0"
       } transition-all duration-500 ${className}`}
     >
-      {(showStillWithoutActivity == false || cameraActive) &&
-        player}
+      <div className="absolute top-0 left-0 right-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
+      <div className="absolute bottom-0 left-0 right-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
+
+      {(showStillWithoutActivity == false || cameraActive) && player}
 
       <div
         className={`absolute left-0 top-0 right-0 bottom-0 w-full ${
@@ -180,14 +185,14 @@ export default function LivePlayer({
           className="w-full h-full"
           camera={cameraConfig.name}
           showFps={false}
-          reloadInterval={(cameraActive && !liveReady) ? 200 : 30000}
+          reloadInterval={cameraActive && !liveReady ? 200 : 30000}
         />
       </div>
 
       <div className="absolute flex left-2 top-2 gap-2">
         <Chip
           in={activeMotion}
-          className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500/90`}
+          className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
         >
           <MdLeakAdd className="w-4 h-4 text-motion" />
           <div className="ml-1 text-white text-xs">Motion</div>
@@ -196,7 +201,7 @@ export default function LivePlayer({
         {cameraConfig.audio.enabled_in_config && (
           <Chip
             in={activeAudio}
-            className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500/90`}
+            className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
           >
             <BsSoundwave className="w-4 h-4 text-audio" />
             <div className="ml-1 text-white text-xs">Sound</div>
@@ -204,7 +209,7 @@ export default function LivePlayer({
         )}
       </div>
 
-      <Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-300/50 to-gray-500/90">
+      <Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500">
         {recording == "ON" && (
           <MdCircle className="w-2 h-2 drop-shadow-md shadow-danger text-danger" />
         )}
diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index 14ac3363a..ebdf09b6f 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -243,6 +243,10 @@ function MSEPlayer({ camera, className, onPlaying }: MSEPlayerProps) {
 
   useEffect(() => {
     onConnect();
+
+    return () => {
+      onDisconnect();
+    };
   }, [wsURL]);
 
   return (
diff --git a/web/src/components/settings/SettingsNavItems.tsx b/web/src/components/settings/SettingsNavItems.tsx
index 317424355..db42775d3 100644
--- a/web/src/components/settings/SettingsNavItems.tsx
+++ b/web/src/components/settings/SettingsNavItems.tsx
@@ -98,17 +98,19 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
     <>
       <div className={className}>
         <DropdownMenu>
-          <DropdownMenuTrigger>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button size="icon" variant="ghost">
-                  <LuSettings />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="right">
-                <p>Settings</p>
-              </TooltipContent>
-            </Tooltip>
+          <DropdownMenuTrigger asChild>
+            <a href="#">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button size="icon" variant="ghost">
+                    <LuSettings />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="right">
+                  <p>Settings</p>
+                </TooltipContent>
+              </Tooltip>
+            </a>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="md:w-72 mr-5">
             <DropdownMenuLabel>System</DropdownMenuLabel>
@@ -242,7 +244,7 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
           </DropdownMenuContent>
         </DropdownMenu>
         <Tooltip>
-          <TooltipTrigger>
+          <TooltipTrigger asChild>
             <Button size="icon" variant="ghost">
               <VscAccount />
             </Button>