fix: video not replaced if a new event was queued

web/src/components/HistoryViewer.jsx

@@ -1,5 +1,5 @@
 import { Fragment, h } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { useApiHost, useEvents } from '../api';
 import { useSearchString } from '../hooks/useSearchString';
 import { Next } from '../icons/Next';
@@ -60,17 +60,8 @@ export default function HistoryViewer({ camera }) {
     setCurrentEventIndex(currentEvent.index + 1);
   };
 
+  const RenderVideo = useCallback(() => {
     return (
-    <Fragment>
-      {currentEvent && (
-        <Fragment>
-          <div className='relative flex flex-col'>
-            <HistoryHeader
-              camera={camera}
-              date={longToDate(currentEvent.start_time)}
-              objectLabel={currentEvent.label}
-              className='mb-2'
-            />
       <video
         ref={videoRef}
         onTimeUpdate={handleTimeUpdate}
@@ -84,6 +75,21 @@ export default function HistoryViewer({ camera }) {
           src={`${apiHost}/api/${camera}/start/${currentEvent.start_time}/end/${currentEvent.end_time}/clip.mp4`}
         />
       </video>
+    );
+  }, [currentEvent, apiHost, camera]);
+
+  return (
+    <Fragment>
+      {currentEvent && (
+        <Fragment>
+          <div className='relative flex flex-col'>
+            <HistoryHeader
+              camera={camera}
+              date={longToDate(currentEvent.start_time)}
+              objectLabel={currentEvent.label}
+              className='mb-2'
+            />
+            <RenderVideo />
           </div>
         </Fragment>
       )}