administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-05 18:55:23 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Add useState hook and toggle button for dynamic width adjustment and refactor code for readability in env.js and Birdseye.jsx

Browse Source
This commit is contained in:
Sergey Krashevich 2023-06-17 01:09:12 +03:00
parent 1442502bb5
commit 6232f7b83c
No known key found for this signature in database
GPG Key ID: 625171324E7D3856
1 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/routes/Birdseye.jsx
View File

@ -6,7 +6,7 @@ import Heading from '../components/Heading';
import WebRtcPlayer from '../components/WebRtcPlayer'; import WebRtcPlayer from '../components/WebRtcPlayer';
import '../components/MsePlayer'; import '../components/MsePlayer';
import useSWR from 'swr'; import useSWR from 'swr';
import { useMemo } from 'preact/hooks'; import { useMemo, useState } from 'preact/hooks'; // Added useState
import CameraControlPanel from '../components/CameraControlPanel'; import CameraControlPanel from '../components/CameraControlPanel';
import { baseUrl } from '../api/baseUrl'; import { baseUrl } from '../api/baseUrl';
@ -26,11 +26,14 @@ export default function Birdseye() {
.map(([_, camera]) => camera.name); .map(([_, camera]) => camera.name);
}, [config]); }, [config]);
const [isMaxWidth, setIsMaxWidth] = useState(false); // Added state for class toggle
if (!config || !sourceIsLoaded) { if (!config || !sourceIsLoaded) {
return <ActivityIndicator />; return <ActivityIndicator />;
} }
let player; let player;
const playerClass = isMaxWidth ? 'max-w-5xl xl:w-1/2' : 'w-full'; // Class based on state
if (viewSource == 'mse' && config.birdseye.restream) { if (viewSource == 'mse' && config.birdseye.restream) {
if ('MediaSource' in window) { if ('MediaSource' in window) {
player = ( player = (
@ -93,10 +96,14 @@ export default function Birdseye() {
</select> </select>
)} )}
<button onClick={() => setIsMaxWidth(!isMaxWidth)}>Toggle Width</button> {/* Added button */}
</div> </div>
<div className="xl:flex justify-between"> <div className="xl:flex justify-between">
<div className={playerClass}> {/* Use dynamic class */}
{player} {player}
</div>
{ptzCameras.length ? ( {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 sm:w-min xl:h-min {playerClass}">