switch to vite

web/src/components/HistoryViewer/HistoryHeader.tsx

@@ -3,7 +3,7 @@ import Heading from '../Heading';
 import type { TimelineEvent } from '../Timeline/TimelineEvent';
 
 interface HistoryHeaderProps {
-  event: TimelineEvent;
+  event?: TimelineEvent;
   className?: string;
 }
 export const HistoryHeader = ({ event, className = '' }: HistoryHeaderProps) => {

web/src/components/HistoryViewer/HistoryVideo.tsx

@@ -15,7 +15,7 @@ interface VideoProperties {
 }
 
 interface HistoryVideoProps {
-  id: string;
+  id?: string;
   isPlaying: boolean;
   currentTime: number;
   onTimeUpdate?: (event: OnTimeUpdateEvent) => void;
@@ -32,9 +32,13 @@ export const HistoryVideo = ({
   onPlay,
 }: HistoryVideoProps) => {
   const apiHost = useApiHost();
-  const videoRef = useRef<HTMLVideoElement>();
-  const [videoHeight, setVideoHeight] = useState<number>(undefined);
-  const [videoProperties, setVideoProperties] = useState<VideoProperties>(undefined);
+  const videoRef = useRef<HTMLVideoElement|null>(null);
+  const [videoHeight, setVideoHeight] = useState<number>(0);
+  const [videoProperties, setVideoProperties] = useState<VideoProperties>({
+    posterUrl: '',
+    videoUrl: '',
+    height: 0,
+  });
 
   const currentVideo = videoRef.current;
   if (currentVideo && !videoHeight) {
@@ -48,7 +52,7 @@ export const HistoryVideo = ({
     const idExists = !isNullOrUndefined(id);
     if (idExists) {
       if (videoRef.current && !videoRef.current.paused) {
-        videoRef.current = undefined;
+        videoRef.current = null;
       }
 
       setVideoProperties({
@@ -57,7 +61,11 @@ export const HistoryVideo = ({
         height: videoHeight,
       });
     } else {
-      setVideoProperties(undefined);
+      setVideoProperties({
+        posterUrl: '',
+        videoUrl: '',
+        height: 0,
+      });
     }
   }, [id, videoHeight, videoRef, apiHost]);
 
@@ -78,7 +86,7 @@ export const HistoryVideo = ({
 
     const video = videoRef.current;
     const videoExists = !isNullOrUndefined(video);
-    if (videoExists) {
+    if (video && videoExists) {
       if (videoIsPlaying) {
         attemptPlayVideo(video);
       } else {
@@ -91,7 +99,7 @@ export const HistoryVideo = ({
     const video = videoRef.current;
     const videoExists = !isNullOrUndefined(video);
     const hasSeeked = currentTime >= 0;
-    if (videoExists && hasSeeked) {
+    if (video && videoExists && hasSeeked) {
       video.currentTime = currentTime;
     }
   }, [currentTime, videoRef]);

web/src/components/HistoryViewer/HistoryViewer.tsx

@@ -8,7 +8,7 @@ import type { TimelineEvent } from '../Timeline/TimelineEvent';
 import { HistoryHeader } from './HistoryHeader';
 import { HistoryVideo } from './HistoryVideo';
 
-export default function HistoryViewer({ camera }) {
+export default function HistoryViewer({ camera }: {camera: string}) {
   const searchParams = {
     before: null,
     after: null,
@@ -18,17 +18,17 @@ export default function HistoryViewer({ camera }) {
   };
 
   // TODO: refactor
-  const eventsFetcher = (path, params) => {
+  const eventsFetcher = (path: string, params: {[name:string]: string|number}) => {
     params = { ...params, include_thumbnails: 0, limit: 500 };
-    return axios.get(path, { params }).then((res) => res.data);
+    return axios.get<TimelineEvent[]>(path, { params }).then((res) => res.data);
   };
 
   const { data: events } = useSWR(['events', searchParams], eventsFetcher);
 
-  const [timelineEvents, setTimelineEvents] = useState<TimelineEvent[]>(undefined);
-  const [currentEvent, setCurrentEvent] = useState<TimelineEvent>(undefined);
-  const [isPlaying, setIsPlaying] = useState(undefined);
-  const [currentTime, setCurrentTime] = useState<number>(undefined);
+  const [timelineEvents, setTimelineEvents] = useState<TimelineEvent[]>([]);
+  const [currentEvent, setCurrentEvent] = useState<TimelineEvent>();
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const [currentTime, setCurrentTime] = useState<number>(new Date().getTime());
 
   useEffect(() => {
     if (events) {