From 1442502bb53e8c66625c61ef74cdaad52424f9ab Mon Sep 17 00:00:00 2001
From: Sergey Krashevich <svk@svk.su>
Date: Sat, 17 Jun 2023 12:04:49 +0300
Subject: [PATCH] Update Birdseye.jsx

---
 web/src/routes/Birdseye.jsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/web/src/routes/Birdseye.jsx b/web/src/routes/Birdseye.jsx
index 61f3bd10a..46b93dee2 100644
--- a/web/src/routes/Birdseye.jsx
+++ b/web/src/routes/Birdseye.jsx
@@ -35,7 +35,7 @@ export default function Birdseye() {
     if ('MediaSource' in window) {
       player = (
         <Fragment>
-          <div className={ptzCameras.length ? 'max-w-5xl xl:w-1/2' : 'w-full'}>
+          <div className={ptzCameras.length && !isMaxWidth ? 'max-w-5xl xl:w-1/2' : 'w-full'}>
             <video-stream
               mode="mse"
               src={new URL(`${baseUrl.replace(/^http/, 'ws')}live/webrtc/api/ws?src=birdseye`)}
@@ -52,10 +52,10 @@ export default function Birdseye() {
         </Fragment>
       );
     }
-  } else if (viewSource == 'webrtc' && config.birdseye.restream) {
+  } else if (viewSource == 'webrtc' ) {
     player = (
       <Fragment>
-        <div className={ptzCameras.length ? 'max-w-5xl xl:w-1/2' : 'w-full'}>
+        <div className={ptzCameras.length && config.birdseye.restream && !isMaxWidth ? 'max-w-5xl xl:w-1/2' : 'w-full'}>
           <WebRtcPlayer camera="birdseye" />
         </div>
       </Fragment>
@@ -63,8 +63,8 @@ export default function Birdseye() {
   } else {
     player = (
       <Fragment>
-        <div className={ptzCameras.length ? 'max-w-5xl xl:w-1/2' : 'w-full'}>
-          <JSMpegPlayer camera="birdseye" height={config.birdseye.height} width={config.birdseye.width} />
+        <div className={ ptzCameras.length && config.birdseye.restream && !isMaxWidth ? 'max-w-5xl xl:w-1/2' : 'w-full' }>
+          <JSMpegPlayer camera="birdseye" />
         </div>
       </Fragment>
     );
@@ -80,15 +80,18 @@ export default function Birdseye() {
         {config.birdseye.restream && (
           <select
             className="basis-1/8 cursor-pointer rounded dark:bg-slate-800"
-            value={viewSource}
-            onChange={(e) => setViewSource(e.target.value)}
+            value={isMaxWidth ? "true" : "false"}
+            onChange={(e) => setIsMaxWidth(e.target.value)}
+            key="width-changer"
           >
             {sourceValues.map((item) => (
               <option key={item} value={item}>
                 {item}
               </option>
             ))}
+           
           </select>
+         
         )}
       </div>
 
@@ -96,7 +99,7 @@ export default function Birdseye() {
         {player}
 
         {ptzCameras.length ? (
-          <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">
+          <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4 sm:w-min xl:h-min {playerClass}">
             <Heading size="sm">Control Panel</Heading>
             {ptzCameras.map((camera) => (
               <div className="p-4" key={camera}>