From 16bee2dd3de129f4b075d8b127c3dc65039175b5 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 1 Mar 2024 14:17:05 -0700
Subject: [PATCH] Cleanup mobile live

---
 web/src/App.tsx                       |  2 +-
 web/src/views/live/LiveCameraView.tsx | 39 ++++++++++++++++++++-------
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 9bbb666f8..0512d15d3 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -27,7 +27,7 @@ function App() {
             {isMobile && <Bottombar />}
             <div
               id="pageRoot"
-              className="absolute left-0 top-2 right-0 bottom-16 md:left-16 md:bottom-8 overflow-hidden"
+              className={`absolute top-2 right-0 overflow-hidden ${isMobile ? "left-0 bottom-16" : "left-16 bottom-8"}`}
             >
               <Routes>
                 <Route path="/" element={<Live />} />
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 60cad970e..5c00127b7 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -19,7 +19,12 @@ 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 { isSafari } from "react-device-detect";
+import {
+  isDesktop,
+  isMobile,
+  isSafari,
+  useMobileOrientation,
+} from "react-device-detect";
 import { BsThreeDotsVertical } from "react-icons/bs";
 import {
   FaAngleDown,
@@ -46,6 +51,7 @@ type LiveCameraViewProps = {
 };
 export default function LiveCameraView({ camera }: LiveCameraViewProps) {
   const navigate = useNavigate();
+  const { isPortrait } = useMobileOrientation();
 
   // camera features
 
@@ -65,41 +71,55 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
   const [audio, setAudio] = useState(false);
 
   const growClassName = useMemo(() => {
-    if (camera.detect.width / camera.detect.height > 2) {
+    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%]";
+      }
+    } else if (camera.detect.width / camera.detect.height > 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]);
+  }, [camera, isPortrait]);
 
   return (
-    <div className="size-full flex flex-col">
-      <div className="w-full h-12 flex items-center justify-between">
-        <Button className="rounded-lg" onClick={() => navigate(-1)}>
-          <IoMdArrowBack className="size-5 mr-[10px]" />
-          Back
+    <div className="size-full flex flex-col landscape:flex-row">
+      <div className="w-full landscape:w-min landscape:h-full h-12 flex flex-row landscape:flex-col items-center justify-between">
+        <Button
+          className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
+          size={isMobile ? "icon" : "default"}
+          onClick={() => navigate(-1)}
+        >
+          <IoMdArrowBack className="size-5 lg:mr-[10px]" />
+          {isDesktop && "Back"}
         </Button>
         <TooltipProvider>
-          <div className="flex items-center gap-1 mr-1 *:rounded-lg">
+          <div className="flex flex-row landscape:flex-col items-center gap-1 mr-1 *:rounded-lg">
             <CameraFeatureToggle
+              className="p-2 md:p-0"
               Icon={audio ? GiSpeaker : GiSpeakerOff}
               isActive={audio}
               title={`${audio ? "Disable" : "Enable"} Camera Audio`}
               onClick={() => setAudio(!audio)}
             />
             <CameraFeatureToggle
+              className="p-2 md:p-0"
               Icon={detectState == "ON" ? MdPersonSearch : MdPersonOff}
               isActive={detectState == "ON"}
               title={`${detectState == "ON" ? "Disable" : "Enable"} Detect`}
               onClick={() => sendDetect(detectState == "ON" ? "OFF" : "ON")}
             />
             <CameraFeatureToggle
+              className="p-2 md:p-0"
               Icon={recordState == "ON" ? LuVideo : LuVideoOff}
               isActive={recordState == "ON"}
               title={`${recordState == "ON" ? "Disable" : "Enable"} Recording`}
               onClick={() => sendRecord(recordState == "ON" ? "OFF" : "ON")}
             />
             <CameraFeatureToggle
+              className="p-2 md:p-0"
               Icon={snapshotState == "ON" ? MdPhotoCamera : MdNoPhotography}
               isActive={snapshotState == "ON"}
               title={`${snapshotState == "ON" ? "Disable" : "Enable"} Snapshots`}
@@ -107,6 +127,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
             />
             {camera.audio.enabled_in_config && (
               <CameraFeatureToggle
+                className="p-2 md:p-0"
                 Icon={audioState == "ON" ? LuEar : LuEarOff}
                 isActive={audioState == "ON"}
                 title={`${audioState == "ON" ? "Disable" : "Enable"} Audio Detect`}