set max width/height for live view

This commit is contained in:
Blake Blackshear 2021-10-17 07:39:23 -05:00
parent 2e494477a6
commit ae24cf3bb2
3 changed files with 4 additions and 4 deletions

View File

@ -3,7 +3,7 @@ import { baseUrl } from '../api/baseUrl';
import { useRef, useEffect } from 'preact/hooks';
import JSMpeg from '@cycjimmy/jsmpeg-player';
export default function JSMpegPlayer({ camera }) {
export default function JSMpegPlayer({ camera, width, height }) {
const playerRef = useRef();
const url = `${baseUrl.replace(/^http/, 'ws')}/live/${camera}`
@ -32,6 +32,6 @@ export default function JSMpegPlayer({ camera }) {
}, [url]);
return (
<div ref={playerRef} class="jsmpeg" />
<div ref={playerRef} class="jsmpeg" style={`max-height: ${height}px; max-width: ${width}px`} />
);
}

View File

@ -87,7 +87,7 @@ export default function Camera({ camera }) {
player = (
<Fragment>
<div>
<JSMpegPlayer camera={camera} />
<JSMpegPlayer camera={camera} width={cameraConfig.detect.width} height={cameraConfig.detect.height} />
</div>
</Fragment>
);

View File

@ -13,7 +13,7 @@ describe('Camera Route', () => {
mockSetOptions = jest.fn();
mockUsePersistence = jest.spyOn(Context, 'usePersistence').mockImplementation(() => [{}, mockSetOptions]);
jest.spyOn(Api, 'useConfig').mockImplementation(() => ({
data: { cameras: { front: { name: 'front', objects: { track: ['taco', 'cat', 'dog'] } } } },
data: { cameras: { front: { name: 'front', detect: {width: 1280, height: 720}, objects: { track: ['taco', 'cat', 'dog'] } } } },
}));
jest.spyOn(Api, 'useApiHost').mockImplementation(() => 'http://base-url.local:5000');
jest.spyOn(AutoUpdatingCameraImage, 'default').mockImplementation(({ searchParams }) => {