Use common type for time range

web/src/components/player/PreviewPlayer.tsx

@@ -14,11 +14,12 @@ import { isCurrentHour } from "@/utils/dateUtil";
 import { baseUrl } from "@/api/baseUrl";
 import { isAndroid, isChrome, isMobile, isSafari } from "react-device-detect";
 import { Skeleton } from "../ui/skeleton";
+import { TimeRange } from "@/types/timeline";
 
 type PreviewPlayerProps = {
   className?: string;
   camera: string;
-  timeRange: { start: number; end: number };
+  timeRange: TimeRange;
   cameraPreviews: Preview[];
   startTime?: number;
   isScrubbing: boolean;
@@ -37,7 +38,7 @@ export default function PreviewPlayer({
 }: PreviewPlayerProps) {
   const [currentHourFrame, setCurrentHourFrame] = useState<string>();
 
-  if (isCurrentHour(timeRange.end)) {
+  if (isCurrentHour(timeRange.before)) {
     return (
       <PreviewFramesPlayer
         className={className}
@@ -84,7 +85,7 @@ export abstract class PreviewController {
 type PreviewVideoPlayerProps = {
   className?: string;
   camera: string;
-  timeRange: { start: number; end: number };
+  timeRange: TimeRange;
   cameraPreviews: Preview[];
   startTime?: number;
   isScrubbing: boolean;
@@ -148,8 +149,8 @@ function PreviewVideoPlayer({
     return cameraPreviews.find(
       (preview) =>
         preview.camera == camera &&
-        Math.round(preview.start) >= timeRange.start &&
-        Math.floor(preview.end) <= timeRange.end,
+        Math.round(preview.start) >= timeRange.after &&
+        Math.floor(preview.end) <= timeRange.before,
     );
 
     // we only want to calculate this once
@@ -179,8 +180,8 @@ function PreviewVideoPlayer({
     const preview = cameraPreviews.find(
       (preview) =>
         preview.camera == camera &&
-        Math.round(preview.start) >= timeRange.start &&
-        Math.floor(preview.end) <= timeRange.end,
+        Math.round(preview.start) >= timeRange.after &&
+        Math.floor(preview.end) <= timeRange.before,
     );
 
     if (preview != currentPreview) {
@@ -292,7 +293,7 @@ function PreviewVideoPlayer({
 class PreviewVideoController extends PreviewController {
   // main state
   private previewRef: MutableRefObject<HTMLVideoElement | null>;
-  private timeRange: { start: number; end: number } | undefined = undefined;
+  private timeRange: TimeRange | undefined = undefined;
 
   // preview
   private preview: Preview | undefined = undefined;
@@ -377,7 +378,7 @@ class PreviewVideoController extends PreviewController {
 type PreviewFramesPlayerProps = {
   className?: string;
   camera: string;
-  timeRange: { start: number; end: number };
+  timeRange: TimeRange;
   startTime?: number;
   onControllerReady: (controller: PreviewController) => void;
   onClick?: () => void;
@@ -395,8 +396,8 @@ function PreviewFramesPlayer({
   // frames data
 
   const { data: previewFrames } = useSWR<string[]>(
-    `preview/${camera}/start/${Math.floor(timeRange.start)}/end/${Math.ceil(
-      timeRange.end,
+    `preview/${camera}/start/${Math.floor(timeRange.after)}/end/${Math.ceil(
+      timeRange.before,
     )}/frames`,
     { revalidateOnFocus: false },
   );
@@ -457,7 +458,7 @@ function PreviewFramesPlayer({
     }
 
     if (!startTime) {
-      controller.scrubToTimestamp(frameTimes?.at(-1) ?? timeRange.start);
+      controller.scrubToTimestamp(frameTimes?.at(-1) ?? timeRange.after);
     } else {
       controller.scrubToTimestamp(startTime);
     }

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -8,7 +8,7 @@ import { Preview } from "@/types/preview";
 import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
 import { DynamicVideoController } from "./DynamicVideoController";
 import HlsVideoPlayer from "../HlsVideoPlayer";
-import { Timeline } from "@/types/timeline";
+import { TimeRange, Timeline } from "@/types/timeline";
 
 /**
  * Dynamically switches between video playback and scrubbing preview player.
@@ -16,7 +16,7 @@ import { Timeline } from "@/types/timeline";
 type DynamicVideoPlayerProps = {
   className?: string;
   camera: string;
-  timeRange: { start: number; end: number };
+  timeRange: TimeRange;
   cameraPreviews: Preview[];
   startTimestamp?: number;
   isScrubbing: boolean;
@@ -100,7 +100,7 @@ export default function DynamicVideoPlayer({
 
   const [isLoading, setIsLoading] = useState(false);
   const [source, setSource] = useState(
-    `${apiHost}vod/${camera}/start/${timeRange.start}/end/${timeRange.end}/master.m3u8`,
+    `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`,
   );
 
   // start at correct time
@@ -134,8 +134,8 @@ export default function DynamicVideoPlayer({
 
   const recordingParams = useMemo(() => {
     return {
-      before: timeRange.end,
-      after: timeRange.start,
+      before: timeRange.before,
+      after: timeRange.after,
     };
   }, [timeRange]);
   const { data: recordings } = useSWR<Recording[]>(
@@ -153,7 +153,7 @@ export default function DynamicVideoPlayer({
     }
 
     setSource(
-      `${apiHost}vod/${camera}/start/${timeRange.start}/end/${timeRange.end}/master.m3u8`,
+      `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`,
     );
     setIsLoading(true);
 

web/src/types/playback.ts

@@ -1,5 +1,6 @@
 import { Preview } from "./preview";
 import { Recording } from "./record";
+import { TimeRange } from "./timeline";
 
 export type DynamicPlayback = {
   recordings: Recording[];
@@ -7,5 +8,5 @@ export type DynamicPlayback = {
 
 export type PreviewPlayback = {
   preview: Preview | undefined;
-  timeRange: { end: number; start: number };
+  timeRange: TimeRange;
 };

web/src/utils/timelineUtil.tsx

@@ -21,7 +21,7 @@ import {
 } from "react-icons/md";
 import { FaBicycle } from "react-icons/fa";
 import { endOfHourOrCurrentTime } from "./dateUtil";
-import { Timeline } from "@/types/timeline";
+import { TimeRange, Timeline } from "@/types/timeline";
 
 export function getTimelineIcon(timelineItem: Timeline) {
   switch (timelineItem.class_type) {
@@ -124,7 +124,7 @@ export function getTimelineItemDescription(timelineItem: Timeline) {
 export function getChunkedTimeDay(timestamp: number) {
   const endOfThisHour = new Date();
   endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0);
-  const data: { start: number; end: number }[] = [];
+  const data: TimeRange[] = [];
   const startDay = new Date(timestamp * 1000);
   startDay.setHours(0, 0, 0, 0);
   const startTimestamp = startDay.getTime() / 1000;
@@ -140,8 +140,8 @@ export function getChunkedTimeDay(timestamp: number) {
 
     end = endOfHourOrCurrentTime(startDay.getTime() / 1000);
     data.push({
-      start,
-      end,
+      after: start,
+      before: end,
     });
     start = startDay.getTime() / 1000;
   }
@@ -155,7 +155,7 @@ export function getChunkedTimeRange(
 ) {
   const endOfThisHour = new Date();
   endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0);
-  const data: { start: number; end: number }[] = [];
+  const data: TimeRange[] = [];
   const startDay = new Date(startTimestamp * 1000);
   startDay.setMinutes(0, 0, 0);
   let start = startDay.getTime() / 1000;
@@ -170,8 +170,8 @@ export function getChunkedTimeRange(
 
     end = endOfHourOrCurrentTime(startDay.getTime() / 1000);
     data.push({
-      start,
-      end,
+      after: start,
+      before: end,
     });
     start = startDay.getTime() / 1000;
   }

web/src/views/events/RecordingView.tsx

@@ -68,7 +68,7 @@ export function RecordingView({
   const timeRange = useMemo(() => getChunkedTimeDay(startTime), [startTime]);
   const [selectedRangeIdx, setSelectedRangeIdx] = useState(
     timeRange.ranges.findIndex((chunk) => {
-      return chunk.start <= startTime && chunk.end >= startTime;
+      return chunk.after <= startTime && chunk.before >= startTime;
     }),
   );
   const currentTimeRange = useMemo(
@@ -97,7 +97,7 @@ export function RecordingView({
   const updateSelectedSegment = useCallback(
     (currentTime: number, updateStartTime: boolean) => {
       const index = timeRange.ranges.findIndex(
-        (seg) => seg.start <= currentTime && seg.end >= currentTime,
+        (seg) => seg.after <= currentTime && seg.before >= currentTime,
       );
 
       if (index != -1) {
@@ -114,8 +114,8 @@ export function RecordingView({
   useEffect(() => {
     if (scrubbing) {
       if (
-        currentTime > currentTimeRange.end + 60 ||
-        currentTime < currentTimeRange.start - 60
+        currentTime > currentTimeRange.before + 60 ||
+        currentTime < currentTimeRange.after - 60
       ) {
         updateSelectedSegment(currentTime, false);
         return;
@@ -139,8 +139,8 @@ export function RecordingView({
     if (!scrubbing) {
       if (Math.abs(currentTime - playerTime) > 10) {
         if (
-          currentTimeRange.start <= currentTime &&
-          currentTimeRange.end >= currentTime
+          currentTimeRange.after <= currentTime &&
+          currentTimeRange.before >= currentTime
         ) {
           mainControllerRef.current?.seekToTimestamp(currentTime, true);
         } else {
@@ -244,7 +244,6 @@ export function RecordingView({
             reviewSummary={reviewSummary}
             filter={filter}
             onUpdateFilter={updateFilter}
-            severity={"alert"}
             motionOnly={false}
             setMotionOnly={() => {}}
           />