chore: refactored debug camera and cleaned up cameras_v2

web/src/components/DebugCamera.jsx

@@ -0,0 +1,74 @@
+import { h } from 'preact';
+import Link from './Link';
+import Switch from './Switch';
+import { useCallback, useMemo } from 'preact/hooks';
+import { usePersistence } from '../context';
+import AutoUpdatingCameraImage from './AutoUpdatingCameraImage';
+
+const emptyObject = Object.freeze({});
+
+export function DebugCamera({ camera }) {
+  const [options, setOptions] = usePersistence(`${camera}-feed`, emptyObject);
+
+  const handleSetOption = useCallback(
+    (id, value) => {
+      const newOptions = { ...options, [id]: value };
+      setOptions(newOptions);
+    },
+    [options, setOptions]
+  );
+
+  const searchParams = useMemo(
+    () =>
+      new URLSearchParams(
+        Object.keys(options).reduce((memo, key) => {
+          memo.push([key, options[key] === true ? '1' : '0']);
+          return memo;
+        }, [])
+      ),
+    [options]
+  );
+
+  const optionContent = (
+    <div className='grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4'>
+      <Switch
+        checked={options['bbox']}
+        id='bbox'
+        onChange={handleSetOption}
+        label='Bounding box'
+        labelPosition='after'
+      />
+      <Switch
+        checked={options['timestamp']}
+        id='timestamp'
+        onChange={handleSetOption}
+        label='Timestamp'
+        labelPosition='after'
+      />
+      <Switch checked={options['zones']} id='zones' onChange={handleSetOption} label='Zones' labelPosition='after' />
+      <Switch checked={options['mask']} id='mask' onChange={handleSetOption} label='Masks' labelPosition='after' />
+      <Switch
+        checked={options['motion']}
+        id='motion'
+        onChange={handleSetOption}
+        label='Motion boxes'
+        labelPosition='after'
+      />
+      <Switch
+        checked={options['regions']}
+        id='regions'
+        onChange={handleSetOption}
+        label='Regions'
+        labelPosition='after'
+      />
+      <Link href={`/cameras/${camera}/editor`}>Mask & Zone creator</Link>
+    </div>
+  );
+
+  return (
+    <div>
+      <AutoUpdatingCameraImage camera={camera} searchParams={searchParams} />
+      {optionContent}
+    </div>
+  );
+}

web/src/components/HistoryViewer.jsx

@@ -76,7 +76,7 @@ export default function HistoryViewer({ camera }) {
         />
       </video>
     );
-  }, [currentEvent, apiHost, camera]);
+  }, [currentEvent, apiHost, camera, videoRef]);
 
   return (
     <Fragment>

web/src/routes/Camera_V2.jsx

@@ -1,17 +1,12 @@
 import { h, Fragment } from 'preact';
-import AutoUpdatingCameraImage from '../components/AutoUpdatingCameraImage';
 import JSMpegPlayer from '../components/JSMpegPlayer';
 import Heading from '../components/Heading';
-import Link from '../components/Link';
+import { useState } from 'preact/hooks';
-import Switch from '../components/Switch';
-import { usePersistence } from '../context';
-import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
 import { useConfig } from '../api';
 import { Tabs, TextTab } from '../components/Tabs';
 import { LiveChip } from '../components/LiveChip';
 import HistoryViewer from '../components/HistoryViewer';
-
+import { DebugCamera } from '../components/DebugCamera';
-const emptyObject = Object.freeze({});
 
 export default function Camera({ camera }) {
   const { data: config } = useConfig();
@@ -20,89 +15,23 @@ export default function Camera({ camera }) {
 
   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(
+  const RenderPlayer = () => {
-    (id, value) => {
+    if (playerType === 'live') {
-      const newOptions = { ...options, [id]: value };
+      return (
-      setOptions(newOptions);
-    },
-    [options, setOptions]
-  );
-
-  const searchParams = useMemo(
-    () =>
-      new URLSearchParams(
-        Object.keys(options).reduce((memo, key) => {
-          memo.push([key, options[key] === true ? '1' : '0']);
-          return memo;
-        }, [])
-      ),
-    [options]
-  );
-
-  const optionContent = (
-    <div className='grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4'>
-      <Switch
-        checked={options['bbox']}
-        id='bbox'
-        onChange={handleSetOption}
-        label='Bounding box'
-        labelPosition='after'
-      />
-      <Switch
-        checked={options['timestamp']}
-        id='timestamp'
-        onChange={handleSetOption}
-        label='Timestamp'
-        labelPosition='after'
-      />
-      <Switch checked={options['zones']} id='zones' onChange={handleSetOption} label='Zones' labelPosition='after' />
-      <Switch checked={options['mask']} id='mask' onChange={handleSetOption} label='Masks' labelPosition='after' />
-      <Switch
-        checked={options['motion']}
-        id='motion'
-        onChange={handleSetOption}
-        label='Motion boxes'
-        labelPosition='after'
-      />
-      <Switch
-        checked={options['regions']}
-        id='regions'
-        onChange={handleSetOption}
-        label='Regions'
-        labelPosition='after'
-      />
-      <Link href={`/cameras/${camera}/editor`}>Mask & Zone creator</Link>
-    </div>
-  );
-
-  let renderPlayer;
-
-  switch (playerType) {
-    case 'live':
-      renderPlayer = (
         <Fragment>
           <div>
             <JSMpegPlayer camera={camera} width={liveWidth} height={cameraConfig.live.height} />
           </div>
         </Fragment>
       );
-      break;
+    } else if (playerType === 'history') {
-    case 'history':
+      return <HistoryViewer camera={camera} />;
-      renderPlayer = <HistoryViewer camera={camera} />;
+    } else if (playerType === 'debug') {
-      break;
+      return <DebugCamera camera={camera} />;
-    case 'debug':
+    }
-      renderPlayer = (
+    return <Fragment />;
-        <Fragment>
+  };
-          <AutoUpdatingCameraImage camera={camera} searchParams={searchParams} />
-          {optionContent}
-        </Fragment>
-      );
-      break;
-    default:
-      break;
-  }
 
   const handleTabChange = (index) => {
     if (index === 0) {
@@ -130,7 +59,9 @@ export default function Camera({ camera }) {
           </div>
         </div>
 
-        <div className='flex flex-col justify-center h-full'>{renderPlayer}</div>
+        <div className='flex flex-col justify-center h-full'>
+          <RenderPlayer />
+        </div>
 
         <div className='absolute flex justify-center bottom-8 w-full'>
           <Tabs selectedIndex={1} onChange={handleTabChange} className='justify'>