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

Fix Birdseye Width & PTZ control panel (#7118)

Browse Source 
* Cleanup birdseye UI

* Cleanup

* Fix reversed condition
This commit is contained in:
Nicolas Mowen 2023-07-14 05:29:57 -06:00 committed by GitHub
parent 3a0c36e8db
commit 5c12762cb5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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}>