feat: Timeline UI (#2830)

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/BubbleButton.tsx

@@ -0,0 +1,45 @@
+import { h } from 'preact';
+
+interface BubbleButtonProps {
+  variant?: 'primary' | 'secondary';
+  children?: preact.JSX.Element;
+  disabled?: boolean;
+  className?: string;
+  onClick?: () => void;
+}
+
+export const BubbleButton = ({
+  variant = 'primary',
+  children,
+  onClick,
+  disabled = false,
+  className = '',
+}: BubbleButtonProps) => {
+  const BASE_CLASS = 'rounded-full px-4 py-2';
+  const PRIMARY_CLASS = 'text-white bg-blue-500 dark:text-black dark:bg-white';
+  const SECONDARY_CLASS = 'text-black dark:text-white bg-transparent';
+  let computedClass = BASE_CLASS;
+
+  if (disabled) {
+    computedClass += ' text-gray-200 dark:text-gray-200';
+  } else if (variant === 'primary') {
+    computedClass += ` ${PRIMARY_CLASS}`;
+  } else if (variant === 'secondary') {
+    computedClass += ` ${SECONDARY_CLASS}`;
+  }
+
+  const onClickHandler = () => {
+    if (disabled) {
+      return;
+    }
+
+    if (onClick) {
+      onClick();
+    }
+  };
+  return (
+    <button onClick={onClickHandler} className={`${computedClass} ${className}`}>
+      {children}
+    </button>
+  );
+};

web/src/components/DebugCamera.jsx

@@ -0,0 +1,74 @@
+import { h } from 'preact';
+import Link from './Link';
+import Switch from './Switch';
+import { useCallback, useMemo } from 'preact/hooks';
+import { usePersistence } from '../context';
+import AutoUpdatingCameraImage from './AutoUpdatingCameraImage';
+
+const emptyObject = Object.freeze({});
+
+export function DebugCamera({ camera }) {
+  const [options, setOptions] = usePersistence(`${camera}-feed`, emptyObject);
+
+  const handleSetOption = useCallback(
+    (id, value) => {
+      const newOptions = { ...options, [id]: value };
+      setOptions(newOptions);
+    },
+    [options, setOptions]
+  );
+
+  const searchParams = useMemo(
+    () =>
+      new URLSearchParams(
+        Object.keys(options).reduce((memo, key) => {
+          memo.push([key, options[key] === true ? '1' : '0']);
+          return memo;
+        }, [])
+      ),
+    [options]
+  );
+
+  const optionContent = (
+    <div className='grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4'>
+      <Switch
+        checked={options['bbox']}
+        id='bbox'
+        onChange={handleSetOption}
+        label='Bounding box'
+        labelPosition='after'
+      />
+      <Switch
+        checked={options['timestamp']}
+        id='timestamp'
+        onChange={handleSetOption}
+        label='Timestamp'
+        labelPosition='after'
+      />
+      <Switch checked={options['zones']} id='zones' onChange={handleSetOption} label='Zones' labelPosition='after' />
+      <Switch checked={options['mask']} id='mask' onChange={handleSetOption} label='Masks' labelPosition='after' />
+      <Switch
+        checked={options['motion']}
+        id='motion'
+        onChange={handleSetOption}
+        label='Motion boxes'
+        labelPosition='after'
+      />
+      <Switch
+        checked={options['regions']}
+        id='regions'
+        onChange={handleSetOption}
+        label='Regions'
+        labelPosition='after'
+      />
+      <Link href={`/cameras/${camera}/editor`}>Mask & Zone creator</Link>
+    </div>
+  );
+
+  return (
+    <div>
+      <AutoUpdatingCameraImage camera={camera} searchParams={searchParams} />
+      {optionContent}
+    </div>
+  );
+}

web/src/components/Dialog.jsx

@@ -1,10 +1,8 @@
 import { h, Fragment } from 'preact';
-import Button from './Button';
-import Heading from './Heading';
 import { createPortal } from 'preact/compat';
 import { useState, useEffect } from 'preact/hooks';
 
-export default function Dialog({ actions = [], portalRootID = 'dialogs', title, text }) {
+export default function Dialog({ children, portalRootID = 'dialogs' }) {
   const portalRoot = portalRootID && document.getElementById(portalRootID);
   const [show, setShow] = useState(false);
 
@@ -27,17 +25,7 @@ export default function Dialog({ actions = [], portalRootID = 'dialogs', title,
             show ? 'scale-100 opacity-100' : ''
           }`}
         >
-          <div className="p-4">
-            <Heading size="lg">{title}</Heading>
-            <p>{text}</p>
-          </div>
-          <div className="p-2 flex justify-start flex-row-reverse space-x-2">
-            {actions.map(({ color, text, onClick, ...props }, i) => (
-              <Button className="ml-2" color={color} key={i} onClick={onClick} type="text" {...props}>
-                {text}
-              </Button>
-            ))}
-          </div>
+          {children}
         </div>
       </div>
     </Fragment>

web/src/components/HistoryViewer/HistoryHeader.tsx

@@ -0,0 +1,30 @@
+import { h } from 'preact';
+import Heading from '../Heading';
+import { TimelineEvent } from '../Timeline/Timeline';
+
+interface HistoryHeaderProps {
+  event: TimelineEvent;
+  className?: string;
+}
+export const HistoryHeader = ({ event, className = '' }: HistoryHeaderProps) => {
+  let title = 'No Event Found';
+  let subtitle = <span>Event was not found at marker position.</span>;
+  if (event) {
+    const { startTime, endTime, label } = event;
+    const thisMorning = new Date();
+    thisMorning.setHours(0, 0, 0);
+    const isToday = endTime.getTime() > thisMorning.getTime();
+    title = label;
+    subtitle = (
+      <span>
+        {isToday ? 'Today' : 'Yesterday'}, {startTime.toLocaleTimeString()} - {endTime.toLocaleTimeString()} &middot;
+      </span>
+    );
+  }
+  return (
+    <div className={`text-center ${className}`}>
+      <Heading size='lg'>{title}</Heading>
+      <div>{subtitle}</div>
+    </div>
+  );
+};

web/src/components/HistoryViewer/HistoryVideo.tsx

@@ -0,0 +1,134 @@
+import { h } from 'preact';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { useApiHost } from '../../api';
+import { isNullOrUndefined } from '../../utils/objectUtils';
+
+interface OnTimeUpdateEvent {
+  timestamp: number;
+  isPlaying: boolean;
+}
+
+interface VideoProperties {
+  posterUrl: string;
+  videoUrl: string;
+  height: number;
+}
+
+interface HistoryVideoProps {
+  id: string;
+  isPlaying: boolean;
+  currentTime: number;
+  onTimeUpdate?: (event: OnTimeUpdateEvent) => void;
+  onPause: () => void;
+  onPlay: () => void;
+}
+
+export const HistoryVideo = ({
+  id,
+  isPlaying: videoIsPlaying,
+  currentTime,
+  onTimeUpdate,
+  onPause,
+  onPlay,
+}: HistoryVideoProps) => {
+  const apiHost = useApiHost();
+  const videoRef = useRef<HTMLVideoElement>();
+  const [videoHeight, setVideoHeight] = useState<number>(undefined);
+  const [videoProperties, setVideoProperties] = useState<VideoProperties>(undefined);
+
+  const currentVideo = videoRef.current;
+  if (currentVideo && !videoHeight) {
+    const currentVideoHeight = currentVideo.offsetHeight;
+    if (currentVideoHeight > 0) {
+      setVideoHeight(currentVideoHeight);
+    }
+  }
+
+  useEffect(() => {
+    const idExists = !isNullOrUndefined(id);
+    if (idExists) {
+      if (videoRef.current && !videoRef.current.paused) {
+        videoRef.current = undefined;
+      }
+
+      setVideoProperties({
+        posterUrl: `${apiHost}/api/events/${id}/snapshot.jpg`,
+        videoUrl: `${apiHost}/vod/event/${id}/index.m3u8`,
+        height: videoHeight,
+      });
+    } else {
+      setVideoProperties(undefined);
+    }
+  }, [id, videoHeight, videoRef, apiHost]);
+
+  useEffect(() => {
+    const playVideo = (video: HTMLMediaElement) => video.play();
+
+    const attemptPlayVideo = (video: HTMLMediaElement) => {
+      const videoHasNotLoaded = video.readyState <= 1;
+      if (videoHasNotLoaded) {
+        video.oncanplay = () => {
+          playVideo(video);
+        };
+        video.load();
+      } else {
+        playVideo(video);
+      }
+    };
+
+    const video = videoRef.current;
+    const videoExists = !isNullOrUndefined(video);
+    if (videoExists) {
+      if (videoIsPlaying) {
+        attemptPlayVideo(video);
+      } else {
+        video.pause();
+      }
+    }
+  }, [videoIsPlaying, videoRef]);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    const videoExists = !isNullOrUndefined(video);
+    const hasSeeked = currentTime >= 0;
+    if (videoExists && hasSeeked) {
+      video.currentTime = currentTime;
+    }
+  }, [currentTime, videoRef]);
+
+  const onTimeUpdateHandler = useCallback(
+    (event: Event) => {
+      const target = event.target as HTMLMediaElement;
+      const timeUpdateEvent = {
+        isPlaying: videoIsPlaying,
+        timestamp: target.currentTime,
+      };
+
+      onTimeUpdate && onTimeUpdate(timeUpdateEvent);
+    },
+    [videoIsPlaying, onTimeUpdate]
+  );
+
+  const videoPropertiesIsUndefined = isNullOrUndefined(videoProperties);
+  if (videoPropertiesIsUndefined) {
+    return <div style={{ height: `${videoHeight}px`, width: '100%' }} />;
+  }
+
+  const { posterUrl, videoUrl, height } = videoProperties;
+  return (
+    <video
+      ref={videoRef}
+      key={posterUrl}
+      onTimeUpdate={onTimeUpdateHandler}
+      onPause={onPause}
+      onPlay={onPlay}
+      poster={posterUrl}
+      preload='metadata'
+      controls
+      style={height ? { minHeight: `${height}px` } : {}}
+      playsInline
+    >
+      <source type='application/vnd.apple.mpegurl' src={videoUrl} />
+    </video>
+  );
+};

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

web/src/components/LiveChip.jsx

@@ -0,0 +1,18 @@
+import { h } from 'preact';
+
+export function LiveChip({ className }) {
+  return (
+    <div className={`inline relative px-2 py-1 rounded-full ${className}`}>
+      <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 class='relative inline-flex rounded-full h-3 w-3' style={{ backgroundColor: 'rgb(74 222 128)' }} />
+        </span>
+      </div>
+      <span>Live</span>
+    </div>
+  );
+}

web/src/components/Prompt.jsx

@@ -0,0 +1,22 @@
+import { h } from 'preact';
+import Button from './Button';
+import Heading from './Heading';
+import Dialog from './Dialog';
+
+export default function Prompt({ actions = [], title, text }) {
+  return (
+    <Dialog>
+      <div className='p-4'>
+        <Heading size='lg'>{title}</Heading>
+        <p>{text}</p>
+      </div>
+      <div className='p-2 flex justify-start flex-row-reverse space-x-2'>
+        {actions.map(({ color, text, onClick, ...props }, i) => (
+          <Button className='ml-2' color={color} key={i} onClick={onClick} type='text' {...props}>
+            {text}
+          </Button>
+        ))}
+      </div>
+    </Dialog>
+  );
+}

web/src/components/Tabs.jsx

@@ -0,0 +1,39 @@
+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 = useCallback(
+    (index) => () => {
+      setSelectedIndex(index);
+      onChange && onChange(index);
+    },
+    [onChange]
+  );
+
+  const RenderChildren = useCallback(() => {
+    return children.map((child, i) => {
+      child.props.selected = i === selectedIndex;
+      child.props.onClick = handleSelected(i);
+      return child;
+    });
+  }, [selectedIndex, children, handleSelected]);
+
+  return (
+    <div className={`flex ${className}`}>
+      <RenderChildren />
+    </div>
+  );
+}
+
+export function TextTab({ selected, text, onClick }) {
+  const selectedStyle = selected
+    ? 'text-white bg-blue-500 dark:text-black dark:bg-white'
+    : 'text-black dark:text-white bg-transparent';
+  return (
+    <button onClick={onClick} className={`rounded-full px-4 py-2 ${selectedStyle}`}>
+      <span>{text}</span>
+    </button>
+  );
+}

web/src/components/Timeline/ScrollPermission.ts

@@ -0,0 +1,4 @@
+export interface ScrollPermission {
+  allowed: boolean;
+  resetAfterSeeked: boolean;
+}

web/src/components/Timeline/Timeline.tsx

@@ -0,0 +1,242 @@
+import { Fragment, h } from 'preact';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { getTimelineEventBlocksFromTimelineEvents } from '../../utils/Timeline/timelineEventUtils';
+import { ScrollPermission } from './ScrollPermission';
+import { TimelineBlocks } from './TimelineBlocks';
+import { TimelineChangeEvent } from './TimelineChangeEvent';
+import { DisabledControls, TimelineControls } from './TimelineControls';
+import { TimelineEvent } from './TimelineEvent';
+import { TimelineEventBlock } from './TimelineEventBlock';
+
+interface TimelineProps {
+  events: TimelineEvent[];
+  isPlaying: boolean;
+  onChange: (event: TimelineChangeEvent) => void;
+  onPlayPause?: (isPlaying: boolean) => void;
+}
+
+export default function Timeline({ events, isPlaying, onChange, onPlayPause }: TimelineProps) {
+  const timelineContainerRef = useRef<HTMLDivElement>(undefined);
+
+  const [timeline, setTimeline] = useState<TimelineEventBlock[]>([]);
+  const [disabledControls, setDisabledControls] = useState<DisabledControls>({
+    playPause: false,
+    next: true,
+    previous: false,
+  });
+  const [timelineOffset, setTimelineOffset] = useState<number | undefined>(undefined);
+  const [markerTime, setMarkerTime] = useState<Date | undefined>(undefined);
+  const [currentEvent, setCurrentEvent] = useState<TimelineEventBlock | undefined>(undefined);
+  const [scrollTimeout, setScrollTimeout] = useState<NodeJS.Timeout | undefined>(undefined);
+  const [scrollPermission, setScrollPermission] = useState<ScrollPermission>({
+    allowed: true,
+    resetAfterSeeked: false,
+  });
+
+  const scrollToPosition = useCallback(
+    (positionX: number) => {
+      if (timelineContainerRef.current) {
+        const permission: ScrollPermission = {
+          allowed: true,
+          resetAfterSeeked: true,
+        };
+        setScrollPermission(permission);
+        timelineContainerRef.current.scroll({
+          left: positionX,
+          behavior: 'smooth',
+        });
+      }
+    },
+    [timelineContainerRef]
+  );
+
+  const scrollToEvent = useCallback(
+    (event, offset = 0) => {
+      scrollToPosition(event.positionX + offset - timelineOffset);
+    },
+    [timelineOffset, scrollToPosition]
+  );
+
+  useEffect(() => {
+    if (timeline.length > 0 && currentEvent) {
+      const currentIndex = currentEvent.index;
+      if (currentIndex === 0) {
+        setDisabledControls((previous) => ({
+          ...previous,
+          next: false,
+          previous: true,
+        }));
+      } else if (currentIndex === timeline.length - 1) {
+        setDisabledControls((previous) => ({
+          ...previous,
+          previous: false,
+          next: true,
+        }));
+      } else {
+        setDisabledControls((previous) => ({
+          ...previous,
+          previous: false,
+          next: false,
+        }));
+      }
+    }
+  }, [timeline, currentEvent]);
+
+  useEffect(() => {
+    if (events && events.length > 0 && timelineOffset) {
+      const timelineEvents = getTimelineEventBlocksFromTimelineEvents(events, timelineOffset);
+      const lastEventIndex = timelineEvents.length - 1;
+      const recentEvent = timelineEvents[lastEventIndex];
+
+      setTimeline(timelineEvents);
+      setMarkerTime(recentEvent.startTime);
+      setCurrentEvent(recentEvent);
+      scrollToEvent(recentEvent);
+    }
+  }, [events, timelineOffset, scrollToEvent]);
+
+  useEffect(() => {
+    const timelineIsLoaded = timeline.length > 0;
+    if (timelineIsLoaded) {
+      const lastEvent = timeline[timeline.length - 1];
+      scrollToEvent(lastEvent);
+    }
+  }, [timeline, scrollToEvent]);
+
+  const checkMarkerForEvent = (markerTime: Date) => {
+    const adjustedMarkerTime = new Date(markerTime);
+    adjustedMarkerTime.setSeconds(markerTime.getSeconds() + 1);
+
+    return [...timeline]
+      .reverse()
+      .find(
+        (timelineEvent) =>
+          timelineEvent.startTime.getTime() <= adjustedMarkerTime.getTime() &&
+          timelineEvent.endTime.getTime() >= adjustedMarkerTime.getTime()
+      );
+  };
+
+  const seekCompleteHandler = (markerTime: Date) => {
+    if (scrollPermission.allowed) {
+      const markerEvent = checkMarkerForEvent(markerTime);
+      setCurrentEvent(markerEvent);
+
+      onChange({
+        markerTime,
+        timelineEvent: markerEvent,
+        seekComplete: true,
+      });
+    }
+
+    if (scrollPermission.resetAfterSeeked) {
+      setScrollPermission({
+        allowed: true,
+        resetAfterSeeked: false,
+      });
+    }
+  };
+
+  const waitForSeekComplete = (markerTime: Date) => {
+    clearTimeout(scrollTimeout);
+    setScrollTimeout(setTimeout(() => seekCompleteHandler(markerTime), 150));
+  };
+
+  const onTimelineScrollHandler = () => {
+    if (timelineContainerRef.current && timeline.length > 0) {
+      const currentMarkerTime = getCurrentMarkerTime();
+      setMarkerTime(currentMarkerTime);
+      waitForSeekComplete(currentMarkerTime);
+      onChange({
+        timelineEvent: currentEvent,
+        markerTime: currentMarkerTime,
+        seekComplete: false,
+      });
+    }
+  };
+
+  const getCurrentMarkerTime = useCallback(() => {
+    if (timelineContainerRef.current && timeline.length > 0) {
+      const scrollPosition = timelineContainerRef.current.scrollLeft;
+      const firstTimelineEvent = timeline[0] as TimelineEventBlock;
+      const firstTimelineEventStartTime = firstTimelineEvent.startTime.getTime();
+      return new Date(firstTimelineEventStartTime + scrollPosition * 1000);
+    }
+  }, [timeline, timelineContainerRef]);
+
+  useEffect(() => {
+    if (timelineContainerRef) {
+      const timelineContainerWidth = timelineContainerRef.current.offsetWidth;
+      const offset = Math.round(timelineContainerWidth / 2);
+      setTimelineOffset(offset);
+    }
+  }, [timelineContainerRef]);
+
+  const handleViewEvent = useCallback(
+    (event: TimelineEventBlock) => {
+      scrollToEvent(event);
+      setMarkerTime(getCurrentMarkerTime());
+    },
+    [scrollToEvent, getCurrentMarkerTime]
+  );
+
+  const onPlayPauseHandler = (isPlaying: boolean) => {
+    onPlayPause(isPlaying);
+  };
+
+  const onPreviousHandler = () => {
+    if (currentEvent) {
+      const previousEvent = timeline[currentEvent.index - 1];
+      setCurrentEvent(previousEvent);
+      scrollToEvent(previousEvent);
+    }
+  };
+  const onNextHandler = () => {
+    if (currentEvent) {
+      const nextEvent = timeline[currentEvent.index + 1];
+      setCurrentEvent(nextEvent);
+      scrollToEvent(nextEvent);
+    }
+  };
+
+  const timelineBlocks = useMemo(() => {
+    if (timelineOffset && timeline.length > 0) {
+      return <TimelineBlocks timeline={timeline} firstBlockOffset={timelineOffset} onEventClick={handleViewEvent} />;
+    }
+  }, [timeline, timelineOffset, handleViewEvent]);
+
+  return (
+    <Fragment>
+      <div className='flex-grow-1'>
+        <div className='w-full text-center'>
+          <span className='text-black dark:text-white'>
+            {markerTime && <span>{markerTime.toLocaleTimeString()}</span>}
+          </span>
+        </div>
+        <div className='relative'>
+          <div className='absolute left-0 top-0 h-full w-full text-center'>
+            <div className='h-full text-center' style={{ margin: '0 auto' }}>
+              <div
+                className='z-20 h-full absolute'
+                style={{
+                  left: 'calc(100% / 2)',
+                  borderRight: '2px solid rgba(252, 211, 77)',
+                }}
+              />
+            </div>
+          </div>
+          <div ref={timelineContainerRef} onScroll={onTimelineScrollHandler} className='overflow-x-auto hide-scroll'>
+            {timelineBlocks}
+          </div>
+        </div>
+      </div>
+      <TimelineControls
+        disabled={disabledControls}
+        isPlaying={isPlaying}
+        onPrevious={onPreviousHandler}
+        onPlayPause={onPlayPauseHandler}
+        onNext={onNextHandler}
+        className='mt-2'
+      />
+    </Fragment>
+  );
+}

web/src/components/Timeline/TimelineBlockView.tsx

@@ -0,0 +1,25 @@
+import { h } from 'preact';
+import { useCallback } from 'preact/hooks';
+import { getColorFromTimelineEvent } from '../../utils/tailwind/twTimelineEventUtil';
+import { TimelineEventBlock } from './TimelineEventBlock';
+
+interface TimelineBlockViewProps {
+  block: TimelineEventBlock;
+  onClick: (block: TimelineEventBlock) => void;
+}
+
+export const TimelineBlockView = ({ block, onClick }: TimelineBlockViewProps) => {
+  const onClickHandler = useCallback(() => onClick(block), [block, onClick]);
+  return (
+    <div
+      key={block.id}
+      onClick={onClickHandler}
+      className={`absolute z-10 rounded-full ${getColorFromTimelineEvent(block)} h-2`}
+      style={{
+        top: `${block.yOffset}px`,
+        left: `${block.positionX}px`,
+        width: `${block.width}px`,
+      }}
+    />
+  );
+};

web/src/components/Timeline/TimelineBlocks.tsx

@@ -0,0 +1,47 @@
+import { h } from 'preact';
+import { useMemo } from 'preact/hooks';
+import { findLargestYOffsetInBlocks, getTimelineWidthFromBlocks } from '../../utils/Timeline/timelineEventUtils';
+import { convertRemToPixels } from '../../utils/windowUtils';
+import { TimelineBlockView } from './TimelineBlockView';
+import { TimelineEventBlock } from './TimelineEventBlock';
+
+interface TimelineBlocksProps {
+  timeline: TimelineEventBlock[];
+  firstBlockOffset: number;
+  onEventClick: (block: TimelineEventBlock) => void;
+}
+
+export const TimelineBlocks = ({ timeline, firstBlockOffset, onEventClick }: TimelineBlocksProps) => {
+  const timelineEventBlocks = useMemo(() => {
+    if (timeline.length > 0 && firstBlockOffset) {
+      const largestYOffsetInBlocks = findLargestYOffsetInBlocks(timeline);
+      const timelineContainerHeight = largestYOffsetInBlocks + convertRemToPixels(1);
+      const timelineContainerWidth = getTimelineWidthFromBlocks(timeline, firstBlockOffset);
+      const timelineBlockOffset = (timelineContainerHeight - largestYOffsetInBlocks) / 2;
+      return (
+        <div
+          className='relative'
+          style={{
+            height: `${timelineContainerHeight}px`,
+            width: `${timelineContainerWidth}px`,
+            background: "url('/marker.png')",
+            backgroundPosition: 'center',
+            backgroundSize: '30px',
+            backgroundRepeat: 'repeat',
+          }}
+        >
+          {timeline.map((block) => {
+            const onClickHandler = (block: TimelineEventBlock) => onEventClick(block);
+            const updatedBlock: TimelineEventBlock = {
+              ...block,
+              yOffset: block.yOffset + timelineBlockOffset,
+            };
+            return <TimelineBlockView block={updatedBlock} onClick={onClickHandler} />;
+          })}
+        </div>
+      );
+    }
+  }, [timeline, onEventClick, firstBlockOffset]);
+
+  return timelineEventBlocks;
+};

web/src/components/Timeline/TimelineChangeEvent.ts

@@ -0,0 +1,7 @@
+import { TimelineEvent } from './TimelineEvent';
+
+export interface TimelineChangeEvent {
+  timelineEvent: TimelineEvent;
+  markerTime: Date;
+  seekComplete: boolean;
+}

web/src/components/Timeline/TimelineControls.tsx

@@ -0,0 +1,45 @@
+import { h } from 'preact';
+import Next from '../../icons/Next';
+import Pause from '../../icons/Pause';
+import Play from '../../icons/Play';
+import Previous from '../../icons/Previous';
+import { BubbleButton } from '../BubbleButton';
+
+export interface DisabledControls {
+  playPause: boolean;
+  next: boolean;
+  previous: boolean;
+}
+
+interface TimelineControlsProps {
+  disabled: DisabledControls;
+  className?: string;
+  isPlaying: boolean;
+  onPlayPause: (isPlaying: boolean) => void;
+  onNext: () => void;
+  onPrevious: () => void;
+}
+
+export const TimelineControls = ({
+  disabled,
+  isPlaying,
+  onPlayPause,
+  onNext,
+  onPrevious,
+  className = '',
+}: TimelineControlsProps) => {
+  const onPlayClickHandler = () => {
+    onPlayPause(!isPlaying);
+  };
+  return (
+    <div className={`flex space-x-2 self-center ${className}`}>
+      <BubbleButton variant='secondary' onClick={onPrevious} disabled={disabled.previous}>
+        <Previous />
+      </BubbleButton>
+      <BubbleButton onClick={onPlayClickHandler}>{!isPlaying ? <Play /> : <Pause />}</BubbleButton>
+      <BubbleButton variant='secondary' onClick={onNext} disabled={disabled.next}>
+        <Next />
+      </BubbleButton>
+    </div>
+  );
+};

web/src/components/Timeline/TimelineEvent.ts

@@ -0,0 +1,8 @@
+export interface TimelineEvent {
+  start_time: number;
+  end_time: number;
+  startTime: Date;
+  endTime: Date;
+  id: string;
+  label: 'car' | 'person' | 'dog';
+}

web/src/components/Timeline/TimelineEventBlock.ts

@@ -0,0 +1,9 @@
+import { TimelineEvent } from './TimelineEvent';
+
+export interface TimelineEventBlock extends TimelineEvent {
+  index: number;
+  yOffset: number;
+  width: number;
+  positionX: number;
+  seconds: number;
+}

web/src/components/__tests__/Dialog.test.jsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import Dialog from '../Dialog';
-import { fireEvent, render, screen } from '@testing-library/preact';
+import { render, screen } from '@testing-library/preact';
 
 describe('Dialog', () => {
   let portal;
@@ -16,23 +16,8 @@ describe('Dialog', () => {
   });
 
   test('renders to a portal', async () => {
-    render(<Dialog title="Tacos" text="This is the dialog" />);
-    expect(screen.getByText('Tacos')).toBeInTheDocument();
+    render(<Dialog>Sample</Dialog>);
+    expect(screen.getByText('Sample')).toBeInTheDocument();
     expect(screen.getByRole('modal').closest('#dialogs')).not.toBeNull();
   });
-
-  test('renders action buttons', async () => {
-    const handleClick = jest.fn();
-    render(
-      <Dialog
-        actions={[
-          { color: 'red', text: 'Delete' },
-          { text: 'Okay', onClick: handleClick },
-        ]}
-        title="Tacos"
-      />
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Okay' }));
-    expect(handleClick).toHaveBeenCalled();
-  });
 });

web/src/components/__tests__/Prompt.test.jsx

@@ -0,0 +1,38 @@
+import { h } from 'preact';
+import Prompt from '../Prompt';
+import { fireEvent, render, screen } from '@testing-library/preact';
+
+describe('Prompt', () => {
+  let portal;
+
+  beforeAll(() => {
+    portal = document.createElement('div');
+    portal.id = 'dialogs';
+    document.body.appendChild(portal);
+  });
+
+  afterAll(() => {
+    document.body.removeChild(portal);
+  });
+
+  test('renders to a portal', async () => {
+    render(<Prompt title='Tacos' text='This is the dialog' />);
+    expect(screen.getByText('Tacos')).toBeInTheDocument();
+    expect(screen.getByRole('modal').closest('#dialogs')).not.toBeNull();
+  });
+
+  test('renders action buttons', async () => {
+    const handleClick = jest.fn();
+    render(
+      <Prompt
+        actions={[
+          { color: 'red', text: 'Delete' },
+          { text: 'Okay', onClick: handleClick },
+        ]}
+        title='Tacos'
+      />
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Okay' }));
+    expect(handleClick).toHaveBeenCalled();
+  });
+});