chore: refactor

web/src/components/HistoryViewer/HistoryViewer.tsx

@@ -3,17 +3,14 @@ import { useEffect, useState } from 'preact/hooks';
 import { useEvents } from '../../api';
 import { useSearchString } from '../../hooks/useSearchString';
 import { HistoryHeader } from './HistoryHeader';
-import Timeline, { TimelineChangeEvent, TimelineEvent, TimelineEventBlock } from '../Timeline/Timeline';
+import Timeline from '../Timeline/Timeline';
 import { HistoryVideo } from './HistoryVideo';
-
-const getLast24Hours = (): number => {
-  const currentTimeEpoch = new Date().getTime();
-  const twentyFourHoursAgoEpoch = new Date(currentTimeEpoch - 24 * 60 * 60 * 1000).getTime();
-  return twentyFourHoursAgoEpoch / 1000;
-};
+import { TimelineEvent } from '../Timeline/TimelineEvent';
+import { TimelineChangeEvent } from '../Timeline/TimelineChangeEvent';
+import { getNowYesterdayInLong } from '../../utils/dateUtil';
 
 export default function HistoryViewer({ camera }) {
-  const { searchString } = useSearchString(500, `camera=${camera}&after=${getLast24Hours()}`);
+  const { searchString } = useSearchString(500, `camera=${camera}&after=${getNowYesterdayInLong()}`);
   const { data: events } = useEvents(searchString);
 
   const [timelineEvents, setTimelineEvents] = useState<TimelineEvent[]>(undefined);

web/src/components/Timeline/Timeline.tsx

@@ -2,41 +2,16 @@ import { Fragment, h } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { longToDate } from '../../utils/dateUtil';
 import { TimelineBlocks } from './TimelineBlocks';
+import { TimelineChangeEvent } from './TimelineChangeEvent';
 import { DisabledControls, TimelineControls } from './TimelineControls';
-
-export interface TimelineEvent {
-  start_time: number;
-  end_time: number;
-  startTime: Date;
-  endTime: Date;
-  id: string;
-  label: 'car' | 'person' | 'dog';
-}
-
-export interface TimelineEventBlock extends TimelineEvent {
-  index: number;
-  yOffset: number;
-  width: number;
-  positionX: number;
-  seconds: number;
-}
-
-export interface TimelineChangeEvent {
-  timelineEvent: TimelineEvent;
-  markerTime: Date;
-  seekComplete: boolean;
-}
+import { TimelineEvent } from './TimelineEvent';
+import { TimelineEventBlock } from './TimelineEventBlock';
 
 interface TimelineProps {
   events: TimelineEvent[];
   onChange: (event: TimelineChangeEvent) => void;
 }
 
-interface ScrollPermission {
-  allowed: boolean;
-  resetAfterSeeked: boolean;
-}
-
 export default function Timeline({ events, onChange }: TimelineProps) {
   const timelineContainerRef = useRef<HTMLDivElement>(undefined);
 
@@ -49,7 +24,7 @@ export default function Timeline({ events, onChange }: TimelineProps) {
   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<number | undefined>(undefined);
+  const [scrollTimeout, setScrollTimeout] = useState<any | undefined>(undefined);
   const [scrollPermission, setScrollPermission] = useState<ScrollPermission>({
     allowed: true,
     resetAfterSeeked: false,
@@ -134,12 +109,12 @@ export default function Timeline({ events, onChange }: TimelineProps) {
         rowMap.push([current]);
         return rowMap;
       }, [] as TimelineEventBlock[][])
-      .flatMap((r, rowPosition) => {
-        r.forEach((eventBlock) => {
+      .flatMap((rows, rowPosition) => {
+        rows.forEach((eventBlock) => {
           const OFFSET_DISTANCE_IN_PIXELS = 10;
           eventBlock.yOffset = OFFSET_DISTANCE_IN_PIXELS * rowPosition;
         });
-        return r;
+        return rows;
       })
       .sort((a, b) => a.startTime.getTime() - b.startTime.getTime());
   };

web/src/utils/dateUtil.js

@@ -1 +0,0 @@
-export const longToDate = (long) => new Date(long * 1000);