use live dimensions

twosky2000 · Oct 17, 2021 · 7ab6961 · 7ab6961
1 parent ae24cf3
commit 7ab6961
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/web/src/routes/Camera.jsx b/web/src/routes/Camera.jsx
@@ -21,6 +21,7 @@ export default function Camera({ camera }) {
  const [viewMode, setViewMode] = useState('live');
 
  const cameraConfig = config?.cameras[camera];
+ const liveWidth = Math.round(cameraConfig.live.height * (cameraConfig.detect.width / cameraConfig.detect.height))
  const [options, setOptions] = usePersistence(`${camera}-feed`, emptyObject);
 
  const handleSetOption = useCallback(
@@ -87,7 +88,7 @@ export default function Camera({ camera }) {
  player = (
  <Fragment>
  <div>
- <JSMpegPlayer camera={camera} width={cameraConfig.detect.width} height={cameraConfig.detect.height} />
+ <JSMpegPlayer camera={camera} width={liveWidth} height={cameraConfig.live.height} />
  </div>
  </Fragment>
  );

diff --git a/web/src/routes/__tests__/Camera.test.jsx b/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', detect: {width: 1280, height: 720}, objects: { track: ['taco', 'cat', 'dog'] } } } },
+ data: { cameras: { front: { name: 'front', detect: {width: 1280, height: 720}, live: {height: 720}, objects: { track: ['taco', 'cat', 'dog'] } } } },
  }));
  jest.spyOn(Api, 'useApiHost').mockImplementation(() => 'http:https://base-url.local:5000');
  jest.spyOn(AutoUpdatingCameraImage, 'default').mockImplementation(({ searchParams }) => {