feat(web): AutoUpdatingCameraImage to replace MJPEG feed

web/src/Camera.jsx

@@ -1,4 +1,5 @@
 import { h } from 'preact';
+import AutoUpdatingCameraImage from './components/AutoUpdatingCameraImage';
 import Box from './components/Box';
 import Heading from './components/Heading';
 import Link from './components/Link';
@@ -36,12 +37,7 @@ export default function Camera({ camera, url }) {
     <div className="space-y-4">
       <Heading size="2xl">{camera}</Heading>
       <Box>
-        <img
-          width={cameraConfig.width}
-          height={cameraConfig.height}
-          key={searchParamsString}
-          src={`${apiHost}/api/${camera}?${searchParamsString}`}
-        />
+        <AutoUpdatingCameraImage camera={camera} searchParams={searchParamsString} />
       </Box>
 
       <Box className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">

web/src/CameraMap.jsx

@@ -213,7 +213,7 @@ ${Object.keys(objectMaskPoints)
   );
 
   return (
-    <div class="flex-col space-y-4" style={`max-width: ${width}px`}>
+    <div class="flex-col space-y-4">
       <Heading size="2xl">{camera} mask & zone creator</Heading>
 
       <Box>
@@ -226,7 +226,7 @@ ${Object.keys(objectMaskPoints)
 
       <Box className="space-y-4">
         <div className="relative">
-          <img ref={imageRef} width={width} height={height} src={`${apiHost}/api/${camera}/latest.jpg`} />
+          <img ref={imageRef} className="w-full" src={`${apiHost}/api/${camera}/latest.jpg`} />
           <EditableMask
             onChange={handleUpdateEditable}
             points={editing.subkey ? editing.set[editing.key][editing.subkey] : editing.set[editing.key]}

web/src/components/AutoUpdatingCameraImage.jsx

@@ -0,0 +1,27 @@
+import { h } from 'preact';
+import { ApiHost, Config } from '../context';
+import { useCallback, useEffect, useContext, useState } from 'preact/hooks';
+
+export default function AutoUpdatingCameraImage({ camera, searchParams }) {
+  const config = useContext(Config);
+  const apiHost = useContext(ApiHost);
+  const cameraConfig = config.cameras[camera];
+
+  const [key, setKey] = useState(Date.now());
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setKey(Date.now());
+    }, 500);
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [key, searchParams]);
+
+  return (
+    <img
+      className="w-full"
+      src={`${apiHost}/api/${camera}/latest.jpg?cache=${key}&${searchParams}`}
+      alt={`Auto-updating ${camera} image`}
+    />
+  );
+}