Merge branch 'streamline-live' of github.com:blakeblackshear/frigate into streamline-live

web/src/components/Header.tsx

@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { ENV } from "@/env";
 import { NavLink } from "react-router-dom";
 import { navbarLinks } from "@/pages/site-navigation";
-import SettingsDropdownMenu from "./settings/SettingsNavItems";
+import SettingsNavItems from "./settings/SettingsNavItems";
 
 type HeaderProps = {
   onToggleNavbar: () => void;
@@ -62,7 +62,7 @@ function Header({ onToggleNavbar }: HeaderProps) {
         </Link>
         <HeaderNavigation />
       </div>
-      <SettingsDropdownMenu className="flex flex-shrink-0 md:gap-2" />
+      <SettingsNavItems className="flex flex-shrink-0 md:gap-2" />
     </div>
   );
 }

web/src/components/Sidebar.tsx

@@ -4,7 +4,12 @@ import { Sheet, SheetContent } from "@/components/ui/sheet";
 import Logo from "./Logo";
 import { ENV } from "@/env";
 import { navbarLinks } from "@/pages/site-navigation";
-import SettingsDropdownMenu from "./settings/SettingsNavItems";
+import SettingsNavItems from "./settings/SettingsNavItems";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 function Sidebar({
   sheetOpen,
@@ -14,7 +19,7 @@ function Sidebar({
   setSheetOpen: (open: boolean) => void;
 }) {
   const sidebar = (
-    <aside className="w-[52px] h-screen sticky top-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
+    <aside className="w-[52px] z-10 h-screen sticky top-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
       <div className="w-full flex flex-col gap-0 items-center">
         <Logo className="w-8 h-8 mb-6" />
         {navbarLinks.map((item) => (
@@ -28,7 +33,7 @@ function Sidebar({
           />
         ))}
       </div>
-      <SettingsDropdownMenu className="flex flex-col items-center" />
+      <SettingsNavItems className="hidden md:flex flex-col items-center" />
     </aside>
   );
 
@@ -40,7 +45,7 @@ function Sidebar({
         modal={false}
         onOpenChange={() => setSheetOpen(false)}
       >
-        <SheetContent side="left" className="w-[100px]">
+        <SheetContent side="left" className="w-[90px]">
           <div className="w-full flex flex-row justify-center"></div>
           {sidebar}
         </SheetContent>
@@ -62,20 +67,26 @@ function SidebarItem({ Icon, title, url, dev, onClick }: SidebarItemProps) {
 
   return (
     shouldRender && (
+      <Tooltip>
         <NavLink
           to={url}
           onClick={onClick}
           className={({ isActive }) =>
             `mx-[10px] mb-6 flex flex-col justify-center items-center rounded-lg ${
               isActive
-              ? "font-bold text-white bg-blue-400"
+                ? "font-bold text-white bg-primary"
                 : "text-muted-foreground bg-secondary"
             }`
           }
         >
+          <TooltipTrigger>
             <Icon className="w-5 h-5 m-[6px]" />
-        <div className="hidden">{title}</div>
+          </TooltipTrigger>
         </NavLink>
+        <TooltipContent side="right">
+          <p>{title}</p>
+        </TooltipContent>
+      </Tooltip>
     )
   );
 }

web/src/components/player/LivePlayer.tsx

@@ -11,7 +11,7 @@ import { Label } from "../ui/label";
 import { usePersistence } from "@/hooks/use-persistence";
 import MSEPlayer from "./MsePlayer";
 import JSMpegPlayer from "./JSMpegPlayer";
-import { MdCircle, MdLeakAdd, MdSelectAll } from "react-icons/md";
+import { MdCircle, MdLeakAdd } from "react-icons/md";
 import { BsSoundwave } from "react-icons/bs";
 import Chip from "../Chip";
 import useCameraActivity from "@/hooks/use-camera-activity";
@@ -153,7 +153,13 @@ export default function LivePlayer({
   }
 
   return (
-    <div className={`relative flex justify-center w-full ${className}`}>
+    <div
+      className={`relative flex justify-center w-full outline ${
+        activeTracking
+          ? "outline-destructive outline-1 rounded-2xl shadow-[0_0_6px_1px] shadow-destructive"
+          : "outline-0"
+      } transition-all duration-500 ${className}`}
+    >
       {(showStillWithoutActivity == false || activeMotion || activeTracking) &&
         player}
 
@@ -188,14 +194,6 @@ export default function LivePlayer({
             <div className="ml-1 text-white text-xs">Sound</div>
           </Chip>
         )}
-
-        <Chip
-          in={activeTracking}
-          className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500/90 `}
-        >
-          <MdSelectAll className="w-4 h-4 text-object" />
-          <div className="ml-1 text-white text-xs">Tracking</div>
-        </Chip>
       </div>
 
       <Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-300/50 to-gray-500/90">

web/src/components/settings/SettingsNavItems.tsx

@@ -52,6 +52,11 @@ import {
   SheetHeader,
   SheetTitle,
 } from "../ui/sheet";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import ActivityIndicator from "../ui/activity-indicator";
 
 type SettingsNavItemsProps = {
@@ -93,10 +98,17 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
     <>
       <div className={className}>
         <DropdownMenu>
-          <DropdownMenuTrigger asChild>
+          <DropdownMenuTrigger>
+            <Tooltip>
+              <TooltipTrigger asChild>
                 <Button size="icon" variant="ghost">
                   <LuSettings />
                 </Button>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                <p>Settings</p>
+              </TooltipContent>
+            </Tooltip>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="md:w-72 mr-5">
             <DropdownMenuLabel>System</DropdownMenuLabel>
@@ -229,9 +241,16 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger>
             <Button size="icon" variant="ghost">
               <VscAccount />
             </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            <p>Account</p>
+          </TooltipContent>
+        </Tooltip>
       </div>
       {restartDialogOpen && (
         <AlertDialog

web/src/context/providers.tsx

@@ -3,6 +3,7 @@ import { ThemeProvider } from "@/context/theme-provider";
 import { RecoilRoot } from "recoil";
 import { ApiProvider } from "@/api";
 import { IconContext } from "react-icons";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 type TProvidersProps = {
   children: ReactNode;
@@ -13,9 +14,11 @@ function providers({ children }: TProvidersProps) {
     <RecoilRoot>
       <ApiProvider>
         <ThemeProvider defaultTheme="light" storageKey="frigate-ui-theme">
+          <TooltipProvider>
             <IconContext.Provider value={{ size: "20" }}>
               {children}
             </IconContext.Provider>
+          </TooltipProvider>
         </ThemeProvider>
       </ApiProvider>
     </RecoilRoot>

web/tailwind.config.js

@@ -24,13 +24,8 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
       },
       aspectRatio: {
-        "wide": "32 / 9",
-        "tall": "9 / 16",
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        wide: "32 / 9",
+        tall: "9 / 16",
       },
       colors: {
         border: "hsl(var(--border))",