set max width/height for live view

web/src/components/JSMpegPlayer.jsx

@@ -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`} />
   );
 }

web/src/routes/Camera.jsx

@@ -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>
     );

web/src/routes/__tests__/Camera.test.jsx

@@ -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 }) => {