Add support for live fullscreen mode (#10191)

* Fix timeline colors

* Add support for full screen mode

* Add support for live view full screen

* Cleanup

* Add border to sidebar and statusbar

web/src/components/Statusbar.tsx

@@ -28,7 +28,7 @@ export default function Statusbar() {
   }, [stats]);
 
   return (
-    <div className="absolute left-0 bottom-0 right-0 w-full h-8 flex items-center px-4 bg-primary z-10 text-secondary-foreground">
+    <div className="absolute left-0 bottom-0 right-0 w-full h-8 flex items-center px-4 bg-primary z-10 text-secondary-foreground border-t border-secondary-highlight">
       {cpuPercent && (
         <div className="flex items-center text-sm mr-4">
           <MdCircle

web/src/components/dynamic/CameraFeatureToggle.tsx

@@ -8,18 +8,18 @@ import { isDesktop } from "react-device-detect";
 
 const variants = {
   primary: {
-    active: "font-bold text-primary-foreground bg-selected",
+    active: "font-bold text-white bg-selected rounded-lg",
-    inactive: "text-secondary-foreground bg-secondary",
+    inactive: "text-secondary-foreground bg-secondary rounded-lg",
   },
-  secondary: {
+  overlay: {
-    active: "font-bold text-primary",
+    active: "font-bold text-white bg-selected rounded-full",
-    inactive: "text-secondary-foreground",
+    inactive: "text-primary-white rounded-full bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500",
   },
 };
 
 type CameraFeatureToggleProps = {
   className?: string;
-  variant?: "primary" | "secondary";
+  variant?: "primary" | "overlay";
   isActive: boolean;
   Icon: IconType;
   title: string;
@@ -37,7 +37,7 @@ export default function CameraFeatureToggle({
   const content = (
     <div
       onClick={onClick}
-      className={`${className} flex flex-col justify-center items-center rounded-lg ${
+      className={`${className} flex flex-col justify-center items-center ${
         variants[variant][isActive ? "active" : "inactive"]
       }`}
     >

web/src/components/navigation/Sidebar.tsx

@@ -5,7 +5,7 @@ import NavItem from "./NavItem";
 
 function Sidebar() {
   return (
-    <aside className="absolute w-[52px] z-10 left-o inset-y-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between bg-primary">
+    <aside className="absolute w-[52px] z-10 left-o inset-y-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between bg-primary border-r border-secondary-highlight">
       <span tabIndex={0} className="sr-only" />
       <div className="w-full flex flex-col gap-0 items-center">
         <Logo className="w-8 h-8 mb-6" />

web/src/components/timeline/EventSegment.tsx

@@ -61,7 +61,7 @@ function MinimapBounds({
     <>
       {isFirstSegmentInMinimap && (
         <div
-          className="absolute inset-0 -bottom-7 w-full flex items-center justify-center text-primary font-medium z-20 text-center text-[10px] scroll-mt-8"
+          className="absolute inset-0 -bottom-7 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px] scroll-mt-8"
           ref={firstMinimapSegmentRef}
         >
           {new Date(alignedMinimapStartTime * 1000).toLocaleTimeString([], {
@@ -73,7 +73,7 @@ function MinimapBounds({
       )}
 
       {isLastSegmentInMinimap && (
-        <div className="absolute inset-0 -top-3 w-full flex items-center justify-center text-primary font-medium z-20 text-center text-[10px]">
+        <div className="absolute inset-0 -top-3 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px]">
           {new Date(alignedMinimapEndTime * 1000).toLocaleTimeString([], {
             hour: "2-digit",
             minute: "2-digit",
@@ -247,7 +247,7 @@ export function EventSegment({
   const segmentClasses = `h-2 relative w-full ${
     showMinimap
       ? isInMinimapRange
-        ? "bg-card"
+        ? "bg-secondary-highlight"
         : isLastSegmentInMinimap
           ? ""
           : "opacity-70"

web/src/views/live/LiveCameraView.tsx

@@ -18,7 +18,13 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { CameraConfig } from "@/types/frigateConfig";
 import { CameraPtzInfo } from "@/types/ptz";
-import React, { useCallback, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   isDesktop,
   isMobile,
@@ -31,6 +37,8 @@ import {
   FaAngleLeft,
   FaAngleRight,
   FaAngleUp,
+  FaCompress,
+  FaExpand,
 } from "react-icons/fa";
 import { GiSpeaker, GiSpeakerOff } from "react-icons/gi";
 import { IoMdArrowBack } from "react-icons/io";
@@ -52,6 +60,7 @@ type LiveCameraViewProps = {
 export default function LiveCameraView({ camera }: LiveCameraViewProps) {
   const navigate = useNavigate();
   const { isPortrait } = useMobileOrientation();
+  const mainRef = useRef<HTMLDivElement | null>(null);
 
   // camera features
 
@@ -66,45 +75,105 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
   );
   const { payload: audioState, send: sendAudio } = useAudioState(camera.name);
 
+  // fullscreen state
+
+  useEffect(() => {
+    if (mainRef.current == null) {
+      return;
+    }
+
+    const listener = () => {
+      setFullscreen(document.fullscreenElement != null);
+    };
+    document.addEventListener("fullscreenchange", listener);
+
+    return () => {
+      document.removeEventListener("fullscreenchange", listener);
+    };
+  }, [mainRef]);
+
   // playback state
 
   const [audio, setAudio] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
 
   const growClassName = useMemo(() => {
+    const aspect = camera.detect.width / camera.detect.height;
+
     if (isMobile) {
       if (isPortrait) {
         return "absolute left-2 right-2 top-[50%] -translate-y-[50%]";
       } else {
-        return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
+        if (aspect > 16 / 9) {
+          return "absolute left-12 top-[50%] -translate-y-[50%]";
+        } else {
+          return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
+        }
       }
-    } else if (camera.detect.width / camera.detect.height > 2) {
+    }
+
+    if (fullscreen) {
+      if (aspect > 16 / 9) {
+        return "absolute inset-x-0 top-[50%] -translate-y-[50%]";
+      } else {
+        return "absolute inset-y-0 left-[50%] -translate-x-[50%]";
+      }
+    } else if (aspect > 2) {
       return "absolute left-2 right-2 top-[50%] -translate-y-[50%]";
     } else {
       return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
     }
-  }, [camera, isPortrait]);
+  }, [camera, fullscreen, isPortrait]);
 
   return (
     <div
-      className={`size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}`}
+      ref={mainRef}
+      className={
+        fullscreen
+          ? `fixed inset-0 bg-black z-30`
+          : `size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
+      }
     >
       <div
-        className={`w-full h-12 flex flex-row items-center justify-between ${isMobile ? "landscape:w-min landscape:h-full landscape:flex-col" : ""}`}
+        className={
+          fullscreen
+            ? `absolute right-32 top-1 z-40 ${isMobile ? "landscape:left-2 landscape:right-auto landscape:bottom-1 landscape:top-auto" : ""}`
+            : `w-full h-12 flex flex-row items-center justify-between ${isMobile ? "landscape:w-min landscape:h-full landscape:flex-col" : ""}`
+        }
       >
-        <Button
+        {!fullscreen ? (
-          className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
+          <Button
-          size={isMobile ? "icon" : "default"}
+            className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
-          onClick={() => navigate(-1)}
+            size={isMobile ? "icon" : "default"}
-        >
+            onClick={() => navigate(-1)}
-          <IoMdArrowBack className="size-5 lg:mr-[10px]" />
+          >
-          {isDesktop && "Back"}
+            <IoMdArrowBack className="size-5 lg:mr-[10px]" />
-        </Button>
+            {isDesktop && "Back"}
+          </Button>
+        ) : (
+          <div />
+        )}
         <TooltipProvider>
           <div
             className={`flex flex-row items-center gap-2 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
           >
             <CameraFeatureToggle
               className="p-2 md:p-0"
+              variant={fullscreen ? "overlay" : "primary"}
+              Icon={fullscreen ? FaCompress : FaExpand}
+              isActive={fullscreen}
+              title={fullscreen ? "Close" : "Fullscreen"}
+              onClick={() => {
+                if (fullscreen) {
+                  document.exitFullscreen();
+                } else {
+                  mainRef.current?.requestFullscreen();
+                }
+              }}
+            />
+            <CameraFeatureToggle
+              className="p-2 md:p-0"
+              variant={fullscreen ? "overlay" : "primary"}
               Icon={audio ? GiSpeaker : GiSpeakerOff}
               isActive={audio}
               title={`${audio ? "Disable" : "Enable"} Camera Audio`}
@@ -112,6 +181,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
             />
             <CameraFeatureToggle
               className="p-2 md:p-0"
+              variant={fullscreen ? "overlay" : "primary"}
               Icon={detectState == "ON" ? MdPersonSearch : MdPersonOff}
               isActive={detectState == "ON"}
               title={`${detectState == "ON" ? "Disable" : "Enable"} Detect`}
@@ -119,6 +189,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
             />
             <CameraFeatureToggle
               className="p-2 md:p-0"
+              variant={fullscreen ? "overlay" : "primary"}
               Icon={recordState == "ON" ? LuVideo : LuVideoOff}
               isActive={recordState == "ON"}
               title={`${recordState == "ON" ? "Disable" : "Enable"} Recording`}
@@ -126,6 +197,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
             />
             <CameraFeatureToggle
               className="p-2 md:p-0"
+              variant={fullscreen ? "overlay" : "primary"}
               Icon={snapshotState == "ON" ? MdPhotoCamera : MdNoPhotography}
               isActive={snapshotState == "ON"}
               title={`${snapshotState == "ON" ? "Disable" : "Enable"} Snapshots`}
@@ -134,6 +206,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
             {camera.audio.enabled_in_config && (
               <CameraFeatureToggle
                 className="p-2 md:p-0"
+                variant={fullscreen ? "overlay" : "primary"}
                 Icon={audioState == "ON" ? LuEar : LuEarOff}
                 isActive={audioState == "ON"}
                 title={`${audioState == "ON" ? "Disable" : "Enable"} Audio Detect`}
@@ -143,7 +216,6 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
           </div>
         </TooltipProvider>
       </div>
-
       <div className="relative size-full">
         <div
           className={growClassName}
@@ -151,7 +223,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
         >
           <LivePlayer
             key={camera.name}
-            className="size-full"
+            className={`size-full ${fullscreen ? "*:rounded-none" : ""}`}
             windowVisible
             showStillWithoutActivity={false}
             cameraConfig={camera}

web/tailwind.config.js

@@ -52,6 +52,7 @@ module.exports = {
         secondary: {
           DEFAULT: "hsl(var(--secondary))",
           foreground: "hsl(var(--secondary-foreground))",
+          highlight: "hsl(var(--secondary-highlight))",
         },
         destructive: {
           DEFAULT: "hsl(var(--destructive))",

web/themes/theme-default.css

@@ -30,6 +30,9 @@
     --secondary-foreground: hsl(0, 0%, 45%);
     --secondary-foreground: 0, 0%, 45%;
 
+    --secondary-highlight: hsl(0, 0%, 94%);
+    --secondary-highlight: 0, 0%, 94%;
+
     --muted: hsl(210 40% 96.1%);
     --muted: 210 40% 96.1%;
 
@@ -103,6 +106,9 @@
     --secondary-foreground: hsl(0, 0%, 83%);
     --secondary-foreground: 0, 0%, 83%;
 
+    --secondary-highlight: hsl(0, 0%, 25%);
+    --secondary-highlight: 0, 0%, 25%;
+
     --muted: hsl(0, 0%, 8%);
     --muted: 0, 0%, 8%;