From db5581e72d80882c9169d9c8701cc7ee8c67e50a Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sat, 2 Mar 2024 09:40:21 -0700
Subject: [PATCH] Add support for live view full screen

---
 .../dynamic/CameraFeatureToggle.tsx           | 14 ++++-----
 web/src/views/live/LiveCameraView.tsx         | 29 ++++++++++++-------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/web/src/components/dynamic/CameraFeatureToggle.tsx b/web/src/components/dynamic/CameraFeatureToggle.tsx
index a3a674c64..f183601a5 100644
--- a/web/src/components/dynamic/CameraFeatureToggle.tsx
+++ b/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",
-    inactive: "text-secondary-foreground bg-secondary",
+    active: "font-bold text-white bg-selected rounded-lg",
+    inactive: "text-secondary-foreground bg-secondary rounded-lg",
   },
-  secondary: {
-    active: "font-bold text-primary",
-    inactive: "text-secondary-foreground",
+  overlay: {
+    active: "font-bold text-white bg-selected rounded-full",
+    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"]
       }`}
     >
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index b59fd0f4e..bbea49497 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -37,6 +37,7 @@ import {
   FaAngleLeft,
   FaAngleRight,
   FaAngleUp,
+  FaCompress,
   FaExpand,
 } from "react-icons/fa";
 import { GiSpeaker, GiSpeakerOff } from "react-icons/gi";
@@ -99,20 +100,20 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
   const growClassName = useMemo(() => {
     const aspect = camera.detect.width / camera.detect.height;
 
-    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%]";
-      }
-    }
-
     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 (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 {
@@ -132,7 +133,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
       <div
         className={
           fullscreen
-            ? `absolute right-24 top-1 z-40`
+            ? `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" : ""}`
         }
       >
@@ -154,9 +155,10 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
           >
             <CameraFeatureToggle
               className="p-2 md:p-0"
-              Icon={fullscreen ? FaExpand : FaExpand}
+              variant={fullscreen ? "overlay" : "primary"}
+              Icon={fullscreen ? FaCompress : FaExpand}
               isActive={fullscreen}
-              title={fullscreen ? "Fullscreen" : "Close"}
+              title={fullscreen ? "Close" : "Fullscreen"}
               onClick={() => {
                 if (fullscreen) {
                   document.exitFullscreen();
@@ -167,6 +169,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
             />
             <CameraFeatureToggle
               className="p-2 md:p-0"
+              variant={fullscreen ? "overlay" : "primary"}
               Icon={audio ? GiSpeaker : GiSpeakerOff}
               isActive={audio}
               title={`${audio ? "Disable" : "Enable"} Camera Audio`}
@@ -174,6 +177,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`}
@@ -181,6 +185,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`}
@@ -188,6 +193,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`}
@@ -196,6 +202,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`}