From 5c12762cb5bec01b2851c55ce35d248acaf02e32 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 14 Jul 2023 05:29:57 -0600
Subject: [PATCH] Fix Birdseye Width & PTZ control panel (#7118)

* Cleanup birdseye UI

* Cleanup

* Fix reversed condition
---
 web/src/routes/Birdseye.jsx | 35 +++++++++++++++++++----------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/web/src/routes/Birdseye.jsx b/web/src/routes/Birdseye.jsx
index 6d5df85e8..d41e04b04 100644
--- a/web/src/routes/Birdseye.jsx
+++ b/web/src/routes/Birdseye.jsx
@@ -6,7 +6,7 @@ import Heading from '../components/Heading';
 import WebRtcPlayer from '../components/WebRtcPlayer';
 import '../components/MsePlayer';
 import useSWR from 'swr';
-import { useMemo, useState } from 'preact/hooks';
+import { useMemo } from 'preact/hooks';
 import CameraControlPanel from '../components/CameraControlPanel';
 import { baseUrl } from '../api/baseUrl';
 
@@ -26,19 +26,19 @@ export default function Birdseye() {
       .map(([_, camera]) => camera.name);
   }, [config]);
 
-  const [isMaxWidth, setIsMaxWidth] = useState(false);
+  const [isMaxWidth, setIsMaxWidth] = usePersistence('birdseye-width', false);
 
   if (!config || !sourceIsLoaded) {
     return <ActivityIndicator />;
   }
 
   let player;
-  const playerClass = isMaxWidth ? 'max-w-5xl xl:w-1/2' : 'w-full';
+  const playerClass = ptzCameras.length || isMaxWidth ? 'w-full' : 'max-w-5xl xl:w-1/2';
   if (viewSource == 'mse' && config.birdseye.restream) {
     if ('MediaSource' in window) {
       player = (
         <Fragment>
-          <div className={ptzCameras.length && !isMaxWidth ? 'max-w-5xl xl:w-1/2' : 'w-full'}>
+          <div className={playerClass}>
             <video-stream
               mode="mse"
               src={new URL(`${baseUrl.replace(/^http/, 'ws')}live/webrtc/api/ws?src=birdseye`)}
@@ -55,10 +55,10 @@ export default function Birdseye() {
         </Fragment>
       );
     }
-  } else if (viewSource == 'webrtc' ) {
+  } else if (viewSource == 'webrtc') {
     player = (
       <Fragment>
-        <div className={ptzCameras.length && config.birdseye.restream && !isMaxWidth ? 'max-w-5xl xl:w-1/2' : 'w-full'}>
+        <div className={playerClass}>
           <WebRtcPlayer camera="birdseye" />
         </div>
       </Fragment>
@@ -66,7 +66,7 @@ export default function Birdseye() {
   } else {
     player = (
       <Fragment>
-        <div className={ ptzCameras.length && config.birdseye.restream && !isMaxWidth ? 'max-w-5xl xl:w-1/2' : 'w-full' }>
+        <div className={playerClass}>
           <JSMpegPlayer camera="birdseye" />
         </div>
       </Fragment>
@@ -80,12 +80,14 @@ export default function Birdseye() {
           Birdseye
         </Heading>
 
-        <button
-          className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded hidden md:inline"
-          onClick={() => setIsMaxWidth(!isMaxWidth)}
-        >
-          Toggle width
-        </button>
+        {!ptzCameras.length && (
+          <button
+            className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded hidden md:inline"
+            onClick={() => setIsMaxWidth(!isMaxWidth)}
+          >
+            Toggle width
+          </button>
+        )}
 
         {config.birdseye.restream && (
           <select
@@ -99,18 +101,19 @@ export default function Birdseye() {
                 {item}
               </option>
             ))}
-           
           </select>
         )}
       </div>
 
       <div className="xl:flex justify-between">
-        <div className={playerClass}> {/* Use dynamic class */}
+        <div className={playerClass}>
+          {' '}
+          {/* Use dynamic class */}
           {player}
         </div>
 
         {ptzCameras.length ? (
-          <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4 sm:w-min xl:h-min {playerClass}">
+          <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4 w-full sm:w-min xl:h-min xl:w-1/2">
             <Heading size="sm">Control Panel</Heading>
             {ptzCameras.map((camera) => (
               <div className="p-4" key={camera}>