From e32e69c2d03ad0eb1188c79c484b65d30aa3b459 Mon Sep 17 00:00:00 2001
From: Paul Armstrong <paul@spaceyak.com>
Date: Wed, 20 Jan 2021 09:01:00 -0800
Subject: [PATCH] feat(web): AutoUpdatingCameraImage to replace MJPEG feed

---
 web/src/Camera.jsx                            |  8 ++----
 web/src/CameraMap.jsx                         |  4 +--
 .../components/AutoUpdatingCameraImage.jsx    | 27 +++++++++++++++++++
 3 files changed, 31 insertions(+), 8 deletions(-)
 create mode 100644 web/src/components/AutoUpdatingCameraImage.jsx

diff --git a/web/src/Camera.jsx b/web/src/Camera.jsx
index 8d773cd3f..9136dbd37 100644
--- a/web/src/Camera.jsx
+++ b/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">
diff --git a/web/src/CameraMap.jsx b/web/src/CameraMap.jsx
index fce285481..b84a8137c 100644
--- a/web/src/CameraMap.jsx
+++ b/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]}
diff --git a/web/src/components/AutoUpdatingCameraImage.jsx b/web/src/components/AutoUpdatingCameraImage.jsx
new file mode 100644
index 000000000..8c5f984fe
--- /dev/null
+++ b/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`}
+    />
+  );
+}