fix initial switch state

frigate/mqtt.py

@@ -115,8 +115,8 @@ def create_mqtt_client(config: FrigateConfig, camera_metrics):
 
     for name in config.cameras.keys():
         client.publish(f"{mqtt_config.topic_prefix}/{name}/clips/state", 'ON' if config.cameras[name].clips.enabled else 'OFF', retain=True)
-        client.publish(f"{mqtt_config.topic_prefix}/{name}/snapshots/state", 'ON' if config.cameras[name].clips.enabled else 'OFF', retain=True)
-        client.publish(f"{mqtt_config.topic_prefix}/{name}/detect/state", 'ON' if config.cameras[name].clips.enabled else 'OFF', retain=True)
+        client.publish(f"{mqtt_config.topic_prefix}/{name}/snapshots/state", 'ON' if config.cameras[name].snapshots.enabled else 'OFF', retain=True)
+        client.publish(f"{mqtt_config.topic_prefix}/{name}/detect/state", 'ON' if config.cameras[name].detect.enabled else 'OFF', retain=True)
 
     client.subscribe(f"{mqtt_config.topic_prefix}/+/clips/set")
     client.subscribe(f"{mqtt_config.topic_prefix}/+/snapshots/set")

frigate/object_processing.py

@@ -183,7 +183,11 @@ class TrackedObject():
         if self.thumbnail_data is None:
             return None
             
-        best_frame = cv2.cvtColor(self.frame_cache[self.thumbnail_data['frame_time']], cv2.COLOR_YUV2BGR_I420)
+        try:
+            best_frame = cv2.cvtColor(self.frame_cache[self.thumbnail_data['frame_time']], cv2.COLOR_YUV2BGR_I420)
+        except KeyError:
+            logger.warning(f"Unable to create jpg because frame {self.thumbnail_data['frame_time']} is not in the cache")
+            return None
  
         if bounding_box:
             thickness = 2

web/src/App.jsx

@@ -33,7 +33,7 @@ export default function App() {
             <Event path="/events/:eventId" />
             <Events path="/events" />
             <Debug path="/debug" />
-            <Cameras path="/" />
+            <Cameras default path="/" />
           </Router>
         </div>
       </div>

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