Add fullscreen button to the default live grid on desktops (#12250)

web/src/views/live/LiveDashboardView.tsx

@@ -7,7 +7,12 @@ import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer";
 import LivePlayer from "@/components/player/LivePlayer";
 import { Button } from "@/components/ui/button";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import { TooltipProvider } from "@/components/ui/tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { usePersistence } from "@/hooks/use-persistence";
 import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import { ReviewSegment } from "@/types/review";
@@ -24,6 +29,8 @@ import { IoClose } from "react-icons/io5";
 import { LuLayoutDashboard } from "react-icons/lu";
 import { cn } from "@/lib/utils";
 import { LivePlayerError, LivePlayerMode } from "@/types/live";
+import { FaCompress, FaExpand } from "react-icons/fa";
+import { useResizeObserver } from "@/hooks/resize-observer";
 
 type LiveDashboardViewProps = {
   cameras: CameraConfig[];
@@ -122,6 +129,16 @@ export default function LiveDashboardView({
     setPreferredLiveModes(newPreferredLiveModes);
   }, [cameras, config]);
 
+  const [{ height: containerHeight }] = useResizeObserver(containerRef);
+
+  const hasScrollbar = useMemo(() => {
+    if (containerHeight && containerRef.current) {
+      return (
+        containerRef.current.offsetHeight < containerRef.current.scrollHeight
+      );
+    }
+  }, [containerRef, containerHeight]);
+
   const [windowVisible, setWindowVisible] = useState(true);
   const visibilityListener = useCallback(() => {
     setWindowVisible(document.visibilityState == "visible");
@@ -277,6 +294,7 @@ export default function LiveDashboardView({
       )}
 
       {!cameraGroup || cameraGroup == "default" || isMobileOnly ? (
+        <>
           <div
             className={cn(
               "mt-2 grid grid-cols-1 gap-2 px-2 md:gap-4",
@@ -335,6 +353,36 @@ export default function LiveDashboardView({
               );
             })}
           </div>
+          {isDesktop && (
+            <div
+              className={cn(
+                "fixed",
+                isDesktop && "bottom-12 lg:bottom-9",
+                isMobile && "bottom-12 lg:bottom-16",
+                hasScrollbar && isDesktop ? "right-6" : "right-3",
+                "z-50 flex flex-row gap-2",
+              )}
+            >
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div
+                    className="cursor-pointer rounded-lg bg-secondary text-secondary-foreground opacity-60 transition-all duration-300 hover:bg-muted hover:opacity-100"
+                    onClick={toggleFullscreen}
+                  >
+                    {fullscreen ? (
+                      <FaCompress className="size-5 md:m-[6px]" />
+                    ) : (
+                      <FaExpand className="size-5 md:m-[6px]" />
+                    )}
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {fullscreen ? "Exit Fullscreen" : "Fullscreen"}
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          )}
+        </>
       ) : (
         <DraggableGridLayout
           cameras={cameras}