Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

UI Improvement: Full-width birdseye (if no PTZ cameras) (#6817)

Browse Source 
* Refactor video player div class names in Birdseye.jsx to be more responsive

* let's JSMpegPlayer dont takes up the entire screen

* Update Birdseye.jsx

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

* fix stupid typo

* Swapped the controls around

* Remove useless comments

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

* Add button styles to the Birdseye component's toggle width button

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
This commit is contained in:
Sergey Krashevich 2023-07-07 15:09:55 +03:00 committed by GitHub
parent 04aada8720
commit 5259d51c04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
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';
import CameraControlPanel from '../components/CameraControlPanel'; import CameraControlPanel from '../components/CameraControlPanel';
import { baseUrl } from '../api/baseUrl'; import { baseUrl } from '../api/baseUrl';
@ -26,16 +26,19 @@ export default function Birdseye() {
.map(([_, camera]) => camera.name); .map(([_, camera]) => camera.name);
}, [config]); }, [config]);
const [isMaxWidth, setIsMaxWidth] = useState(false);
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';
if (viewSource == 'mse' && config.birdseye.restream) { if (viewSource == 'mse' && config.birdseye.restream) {
if ('MediaSource' in window) { if ('MediaSource' in window) {
player = ( player = (
<Fragment> <Fragment>
<div className={ptzCameras.length ? 'max-w-5xl xl:w-1/2' : 'max-w-5xl'}> <div className={ptzCameras.length && !isMaxWidth ? 'max-w-5xl xl:w-1/2' : 'w-full'}>
<video-stream <video-stream
mode="mse" mode="mse"
src={new URL(`${baseUrl.replace(/^http/, 'ws')}live/webrtc/api/ws?src=birdseye`)} src={new URL(`${baseUrl.replace(/^http/, 'ws')}live/webrtc/api/ws?src=birdseye`)}
@ -52,10 +55,10 @@ export default function Birdseye() {
</Fragment> </Fragment>
); );
} }
} else if (viewSource == 'webrtc' && config.birdseye.restream) { } else if (viewSource == 'webrtc' ) {
player = ( player = (
<Fragment> <Fragment>
<div className={ptzCameras.length ? 'max-w-5xl xl:w-1/2' : 'max-w-5xl'}> <div className={ptzCameras.length && config.birdseye.restream && !isMaxWidth ? 'max-w-5xl xl:w-1/2' : 'w-full'}>
<WebRtcPlayer camera="birdseye" /> <WebRtcPlayer camera="birdseye" />
</div> </div>
</Fragment> </Fragment>
@ -63,7 +66,7 @@ export default function Birdseye() {
} else { } else {
player = ( player = (
<Fragment> <Fragment>
<div className={ptzCameras.length ? 'max-w-5xl xl:w-1/2' : 'max-w-5xl'}> <div className={ ptzCameras.length && config.birdseye.restream && !isMaxWidth ? 'max-w-5xl xl:w-1/2' : 'w-full' }>
<JSMpegPlayer camera="birdseye" /> <JSMpegPlayer camera="birdseye" />
</div> </div>
</Fragment> </Fragment>
@ -77,26 +80,37 @@ export default function Birdseye() {
Birdseye Birdseye
</Heading> </Heading>
<button
className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded"
onClick={() => setIsMaxWidth(!isMaxWidth)}
>
Toggle width
</button>
{config.birdseye.restream && ( {config.birdseye.restream && (
<select <select
className="basis-1/8 cursor-pointer rounded dark:bg-slate-800" className="basis-1/8 cursor-pointer rounded dark:bg-slate-800"
value={viewSource} value={viewSource}
onChange={(e) => setViewSource(e.target.value)} onChange={(e) => setViewSource(e.target.value)}
key="width-changer"
> >
{sourceValues.map((item) => ( {sourceValues.map((item) => (
<option key={item} value={item}> <option key={item} value={item}>
{item} {item}
</option> </option>
))} ))}
</select> </select>
)} )}
</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 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> <Heading size="sm">Control Panel</Heading>
{ptzCameras.map((camera) => ( {ptzCameras.map((camera) => (
<div className="p-4" key={camera}> <div className="p-4" key={camera}>