feat: add timeline

web/src/components/AutoUpdatingCameraImage.jsx

@@ -4,7 +4,7 @@ import { useCallback, useState } from 'preact/hooks';
 
 const MIN_LOAD_TIMEOUT_MS = 200;
 
-export default function AutoUpdatingCameraImage({ camera, searchParams = '', showFps = true }) {
+export default function AutoUpdatingCameraImage({ camera, searchParams = '', showFps = true, className }) {
   const [key, setKey] = useState(Date.now());
   const [fps, setFps] = useState(0);
 
@@ -20,7 +20,7 @@ export default function AutoUpdatingCameraImage({ camera, searchParams = '', sho
   }, [key, setFps]);
 
   return (
-    <div>
+    <div className={className}>
       <CameraImage camera={camera} onload={handleLoad} searchParams={`cache=${key}&${searchParams}`} />
       {showFps ? <span className="text-xs">Displaying at {fps}fps</span> : null}
     </div>

web/src/components/LiveChip.jsx

@@ -0,0 +1,15 @@
+import { h } from 'preact'; 
+
+export function LiveChip({ className }) {
+  return (
+    <div className={`inline relative px-2 py-1 rounded-full ${className}`} style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}>
+      <div className='relative inline-block w-3 h-3 mr-2'>
+        <span class="flex h-3 w-3">
+          <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" style={{ backgroundColor: "rgb(74 222 128)" }}></span>
+          <span class="relative inline-flex rounded-full h-3 w-3" style={{ backgroundColor: "rgb(74 222 128)" }}></span>
+        </span>
+      </div>
+      <span>Live</span>
+    </div>
+  )
+}

web/src/components/Tabs.jsx

@@ -0,0 +1,34 @@
+import { h } from 'preact';
+import { useCallback, useState } from "preact/hooks";
+
+export function Tabs({ children, selectedIndex: selectedIndexProp, onChange, className }) {
+  const [selectedIndex, setSelectedIndex] = useState(selectedIndexProp);
+
+  const handleSelected = (index) => () => {
+    setSelectedIndex(index);
+    onChange && onChange(index)
+  };
+
+  const RenderChildren = useCallback(() => {
+    return children.map((child, i) => {
+      child.props.selected = i == selectedIndex
+      child.props.onClick = handleSelected(i)
+      return child;
+    })
+  }, [selectedIndex])
+
+  return (
+    <div className={`flex ${className}`}>
+      <RenderChildren />
+    </div>
+  )
+}
+
+export function TextTab({ selected, text, onClick }) {
+  const selectedStyle = selected ? 'text-black bg-white' : "text-white bg-transparent"
+  return (
+    <button onClick={onClick} className={`rounded-full px-4 py-2 ${selectedStyle}`}>
+      <span>{text}</span>
+    </button>
+  )
+}

web/src/components/Timeline.jsx

@@ -0,0 +1,186 @@
+import { Fragment, h } from 'preact';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { FetchStatus, useEvents } from '../api';
+import { useSearchString } from '../hooks/useSearchString';
+import { Next } from '../icons/Next';
+import { Play } from '../icons/Play';
+import { Previous } from '../icons/Previous';
+import { TextTab } from './Tabs';
+import { longToDate } from '../utils/dateUtil'
+
+export default function Timeline({ camera, onChange }) {
+  const timelineContainerRef = useRef(undefined);
+
+  const { searchString } = useSearchString(25, `camera=${camera}`);
+  const { data: events, status } = useEvents(searchString);
+  const [timeline, setTimeline] = useState([]);
+  const [timelineOffset, setTimelineOffset] = useState();
+  const [markerTime, setMarkerTime] = useState();
+  const [currentEvent, setCurrentEvent] = useState();
+  const [scrollTimeout, setScrollTimeout] = useState();
+  const [scrollActive, setScrollActive] = useState(true);
+  
+  useEffect(() => {
+    if (status === FetchStatus.LOADED && timelineOffset) {
+      const filteredEvents = [...events].reverse().filter(e => e.end_time !== undefined)
+      const firstEvent = events[events.length - 1];
+      if (firstEvent) {
+        setMarkerTime(longToDate(firstEvent.start_time))
+      }      
+      
+      const firstEventTime = longToDate(firstEvent.start_time);
+      const eventsMap = filteredEvents.map((e, i) => {
+        const startTime = longToDate(e.start_time)
+        const endTime = e.end_time ? longToDate(e.end_time) : new Date();
+        const seconds = Math.round(Math.abs(endTime - startTime) / 1000);
+        const positionX = Math.round((Math.abs(startTime - firstEventTime) / 1000) + timelineOffset);
+        return {
+          ...e,
+          startTime,
+          endTime,
+          seconds,
+          width: seconds,
+          positionX,
+        }
+      })
+
+      const recentEvent = eventsMap[eventsMap.length - 1]
+      const event = {
+        ...recentEvent,
+        id: recentEvent.id,
+        index: eventsMap.length - 1,
+        startTime: recentEvent.start_time,
+        endTime: recentEvent.end_time
+      }
+      setCurrentEvent(event)
+      setTimeline(eventsMap)
+    }
+  }, [events, timelineOffset])
+
+  const checkMarkerForEvent = (markerTime) => {
+    if (!scrollActive) {
+      setScrollActive(true)
+      return
+    }
+
+    if (timeline) {
+      const foundIndex = timeline.findIndex((event => event.startTime <= markerTime && markerTime <= event.endTime))
+      if (foundIndex > -1) {
+        const found = timeline[foundIndex]
+        setCurrentEvent({
+          ...found,
+          id: found.id,
+          index: foundIndex,
+          startTime: found.start_time,
+          endTime: found.end_time
+        })
+      }
+
+    }
+  }
+
+  const handleScroll = event => {
+    clearTimeout(scrollTimeout)
+
+    const scrollPosition = event.target.scrollLeft
+    const startTime = longToDate(timeline[0].start_time)
+    const markerTime = new Date((startTime.getTime()) + (scrollPosition * 1000));
+    setMarkerTime(markerTime)
+
+    setScrollTimeout(setTimeout(() => {
+      checkMarkerForEvent(markerTime)
+    }, 250))
+  }
+
+  useEffect(() => {    
+    if (timelineContainerRef) {
+      const timelineContainerWidth = timelineContainerRef.current.offsetWidth
+      const offset = Math.round(timelineContainerWidth / 2)
+      setTimelineOffset(offset);
+    }
+  }, [timelineContainerRef])
+
+  useEffect(() => {
+    onChange && onChange(currentEvent)
+  }, [currentEvent])
+
+  const RenderTimeline = useCallback(() => {
+    if (timeline && timeline.length > 0) {
+      const lastEvent = timeline[timeline.length - 1]
+      const timelineLength = timelineOffset + lastEvent.positionX + lastEvent.width;
+      return (
+        <div className="relative flex items-center h-20" style={{
+          width: `${timelineLength}px`,
+          background: "url('/marker.png')",
+          backgroundPosition: "center",
+          backgroundSize: "30px",
+          backgroundRepeat: "repeat-x"
+        }}>
+          {
+            timeline.map((e) => {
+              return (
+                <div key={e.id} className='absolute z-10 rounded-full bg-blue-300 h-2' style={{
+                  left: `${e.positionX}px`,
+                  width: `${e.seconds}px`
+                }}></div>
+              )
+            })
+          }
+        </div>
+      )
+    }
+  }, [timeline])
+
+  const setNextCurrentEvent = function(offset) {
+    setScrollActive(false)
+    setCurrentEvent(currentEvent => {
+      const index = currentEvent.index + offset;
+      const nextEvent = timeline[index];
+      const positionX = nextEvent.positionX - timelineOffset
+      timelineContainerRef.current.scrollLeft = positionX
+      return {
+        ...nextEvent,
+        id: nextEvent.id,
+        index,
+        startTime: nextEvent.start_time,
+        endTime: nextEvent.end_time
+      }
+    })
+  }
+  
+  const handlePrevious = function() {
+    setNextCurrentEvent(-1);
+  }
+
+  const handleNext = function () {
+    setNextCurrentEvent(1);
+  }
+
+  return (
+    <Fragment>
+      <div className='relative flex-grow-1'>
+        <div className='absolute left-0 top-0 h-full w-full' style={{ textAlign: 'center' }}>
+          <div className="h-full" style={{ margin: "0 auto", textAlign: "center" }}>
+            <span className='z-20 text-white'>{markerTime && (<span>{markerTime.toLocaleTimeString()}</span>)}</span>
+            <div className='z-20 h-full absolute' style={{
+              left: "calc(100% / 2)",
+              height: "calc(100% - 24px)",
+              borderRight: "2px solid rgba(252, 211, 77)"
+            }}></div>
+          </div>
+        </div>
+        <div ref={timelineContainerRef} className='overflow-x-auto' onScroll={handleScroll}>
+          <RenderTimeline />
+        </div>
+      </div>
+
+      <div className='flex self-center'>
+        <TextTab onClick={handlePrevious} text={<Previous />} />
+        <TextTab text={<Play />}/>
+        <TextTab onClick={handleNext} text={<Next />} />
+      </div>
+    </Fragment>
+  )
+}
+
+