feat: Timeline UI (#2830)

web/src/components/HistoryViewer/HistoryViewer.tsx

@@ -0,0 +1,79 @@
+import { Fragment, h } from 'preact';
+import { useCallback, useEffect, useState } from 'preact/hooks';
+import { useEvents } from '../../api';
+import { useSearchString } from '../../hooks/useSearchString';
+import { getNowYesterdayInLong } from '../../utils/dateUtil';
+import Timeline from '../Timeline/Timeline';
+import { TimelineChangeEvent } from '../Timeline/TimelineChangeEvent';
+import { TimelineEvent } from '../Timeline/TimelineEvent';
+import { HistoryHeader } from './HistoryHeader';
+import { HistoryVideo } from './HistoryVideo';
+
+export default function HistoryViewer({ camera }) {
+  const { searchString } = useSearchString(500, `camera=${camera}&after=${getNowYesterdayInLong()}`);
+  const { data: events } = useEvents(searchString);
+
+  const [timelineEvents, setTimelineEvents] = useState<TimelineEvent[]>(undefined);
+  const [currentEvent, setCurrentEvent] = useState<TimelineEvent>(undefined);
+  const [isPlaying, setIsPlaying] = useState(undefined);
+  const [currentTime, setCurrentTime] = useState<number>(undefined);
+
+  useEffect(() => {
+    if (events) {
+      const filteredEvents = [...events].reverse().filter((e) => e.end_time !== undefined);
+      setTimelineEvents(filteredEvents);
+    }
+  }, [events]);
+
+  const handleTimelineChange = useCallback(
+    (event: TimelineChangeEvent) => {
+      if (event.seekComplete) {
+        setCurrentEvent(event.timelineEvent);
+
+        if (isPlaying && event.timelineEvent) {
+          const eventTime = (event.markerTime.getTime() - event.timelineEvent.startTime.getTime()) / 1000;
+          setCurrentTime(eventTime);
+        }
+      }
+    },
+    [isPlaying]
+  );
+
+  const onPlayHandler = () => {
+    setIsPlaying(true);
+  };
+
+  const onPausedHandler = () => {
+    setIsPlaying(false);
+  };
+
+  const onPlayPauseHandler = (isPlaying: boolean) => {
+    setIsPlaying(isPlaying);
+  };
+
+  return (
+    <Fragment>
+      <Fragment>
+        <div className='relative flex flex-col'>
+          <Fragment>
+            <HistoryHeader event={currentEvent} className='mb-2' />
+            <HistoryVideo
+              id={currentEvent ? currentEvent.id : undefined}
+              isPlaying={isPlaying}
+              currentTime={currentTime}
+              onPlay={onPlayHandler}
+              onPause={onPausedHandler}
+            />
+          </Fragment>
+        </div>
+      </Fragment>
+
+      <Timeline
+        events={timelineEvents}
+        isPlaying={isPlaying}
+        onChange={handleTimelineChange}
+        onPlayPause={onPlayPauseHandler}
+      />
+    </Fragment>
+  );
+}