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 { useRef, useEffect } from 'preact/hooks';
import JSMpeg from '@cycjimmy/jsmpeg-player'; import JSMpeg from '@cycjimmy/jsmpeg-player';
export default function JSMpegPlayer({ camera }) { export default function JSMpegPlayer({ camera, width, height }) {
const playerRef = useRef(); const playerRef = useRef();
const url = `${baseUrl.replace(/^http/, 'ws')}/live/${camera}` const url = `${baseUrl.replace(/^http/, 'ws')}/live/${camera}`
@ -32,6 +32,6 @@ export default function JSMpegPlayer({ camera }) {
}, [url]); }, [url]);
return ( 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 = ( player = (
<Fragment> <Fragment>
<div> <div>
<JSMpegPlayer camera={camera} /> <JSMpegPlayer camera={camera} width={cameraConfig.detect.width} height={cameraConfig.detect.height} />
</div> </div>
</Fragment> </Fragment>
); );

View File

@ -13,7 +13,7 @@ describe('Camera Route', () => {
mockSetOptions = jest.fn(); mockSetOptions = jest.fn();
mockUsePersistence = jest.spyOn(Context, 'usePersistence').mockImplementation(() => [{}, mockSetOptions]); mockUsePersistence = jest.spyOn(Context, 'usePersistence').mockImplementation(() => [{}, mockSetOptions]);
jest.spyOn(Api, 'useConfig').mockImplementation(() => ({ 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(Api, 'useApiHost').mockImplementation(() => 'http://base-url.local:5000');
jest.spyOn(AutoUpdatingCameraImage, 'default').mockImplementation(({ searchParams }) => { jest.spyOn(AutoUpdatingCameraImage, 'default').mockImplementation(({ searchParams }) => {