Hide PTZ Controls in Birdseye when no cameras support it (#6353)

* Refactor filter logic to exclude cameras with empty onvif host address

* Refactor filter logic to exclude cameras with empty onvif host address-2

* Apply suggestions from code review

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

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
This commit is contained in:
Sergey Krashevich 2023-05-05 02:00:18 +03:00 committed by GitHub
parent 03b45c153b
commit 02f577347d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -24,7 +24,7 @@ export default function Birdseye() {
} }
return Object.entries(config.cameras) return Object.entries(config.cameras)
.filter(([_, conf]) => conf.onvif?.host) .filter(([_, conf]) => conf.onvif?.host && conf.onvif.host != '')
.map(([_, camera]) => camera.name); .map(([_, camera]) => camera.name);
}, [config]); }, [config]);
@ -37,7 +37,7 @@ export default function Birdseye() {
if ('MediaSource' in window) { if ('MediaSource' in window) {
player = ( player = (
<Fragment> <Fragment>
<div className="max-w-5xl xl:w-1/2"> <div className={ptzCameras.length ? 'max-w-5xl xl:w-1/2' : 'max-w-5xl'}>
<MsePlayer camera="birdseye" /> <MsePlayer camera="birdseye" />
</div> </div>
</Fragment> </Fragment>
@ -54,7 +54,7 @@ export default function Birdseye() {
} else if (viewSource == 'webrtc' && config.birdseye.restream) { } else if (viewSource == 'webrtc' && config.birdseye.restream) {
player = ( player = (
<Fragment> <Fragment>
<div className="max-w-5xl xl:w-1/2"> <div className={ptzCameras.length ? 'max-w-5xl xl:w-1/2' : 'max-w-5xl'}>
<WebRtcPlayer camera="birdseye" /> <WebRtcPlayer camera="birdseye" />
</div> </div>
</Fragment> </Fragment>
@ -62,7 +62,7 @@ export default function Birdseye() {
} else { } else {
player = ( player = (
<Fragment> <Fragment>
<div className="max-w-7xl xl:w-1/2"> <div className={ptzCameras.length ? 'max-w-5xl xl:w-1/2' : 'max-w-5xl'}>
<JSMpegPlayer camera="birdseye" /> <JSMpegPlayer camera="birdseye" />
</div> </div>
</Fragment> </Fragment>
@ -94,7 +94,7 @@ export default function Birdseye() {
<div className="xl:flex justify-between"> <div className="xl:flex justify-between">
{player} {player}
{ptzCameras && ( {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 w-full sm:w-min xl:h-min xl:w-1/2">
<Heading size="sm">Control Panel</Heading> <Heading size="sm">Control Panel</Heading>
{ptzCameras.map((camera) => ( {ptzCameras.map((camera) => (
@ -104,7 +104,7 @@ export default function Birdseye() {
</div> </div>
))} ))}
</div> </div>
)} ) : null}
</div> </div>
</div> </div>
); );