Improve desktop timeline view (#9150)

* Break apart mobile and desktop timeline views

* Set aspect ratio for player correctly

* more modest default width

* Add timeline item card

* Get video player to fit

* get layout going

* More work on youtube view

* Get video scaling working

* Better dialog sizes

* Show all timelines for day

* Add full day of timelines

* Improve hooks

* Fix previews

* Separate mobile and desktop views and don't rerender

* cleanup

* Optimizations and improvements

* make preview dates more efficient

* Remove seekbar and use timeline as seekbar

* Improve background and scrubbing

web/src/components/card/TimelineItemCard.tsx

@@ -0,0 +1,76 @@
+import { getTimelineItemDescription } from "@/utils/timelineUtil";
+import { Button } from "../ui/button";
+import Logo from "../Logo";
+import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
+import VideoPlayer from "../player/VideoPlayer";
+import { Card } from "../ui/card";
+
+type TimelineItemCardProps = {
+  timeline: Timeline;
+  relevantPreview: Preview | undefined;
+  onSelect: () => void;
+};
+export default function TimelineItemCard({
+  timeline,
+  relevantPreview,
+  onSelect,
+}: TimelineItemCardProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  return (
+    <Card className="relative m-2 flex w-full h-32 cursor-pointer" onClick={onSelect}>
+      <div className="w-1/2 p-2">
+        {relevantPreview && (
+          <VideoPlayer
+            options={{
+              preload: "auto",
+              height: "114",
+              width: "202",
+              autoplay: true,
+              controls: false,
+              fluid: false,
+              muted: true,
+              loadingSpinner: false,
+              sources: [
+                {
+                  src: `${relevantPreview.src}`,
+                  type: "video/mp4",
+                },
+              ],
+            }}
+            seekOptions={{}}
+            onReady={(player) => {
+              player.pause(); // autoplay + pause is required for iOS
+              player.currentTime(timeline.timestamp - relevantPreview.start);
+            }}
+          />
+        )}
+      </div>
+      <div className="px-2 py-1 w-1/2">
+        <div className="capitalize font-semibold text-sm">
+          {getTimelineItemDescription(timeline)}
+        </div>
+        <div className="text-sm">
+          {formatUnixTimestampToDateTime(timeline.timestamp, {
+            strftime_fmt:
+              config?.ui.time_format == "24hour" ? "%H:%M:%S" : "%I:%M:%S %p",
+            time_style: "medium",
+            date_style: "medium",
+          })}
+        </div>
+        <Button
+          className="absolute bottom-1 right-1"
+          size="sm"
+          variant="secondary"
+        >
+          <div className="w-8 h-8">
+            <Logo />
+          </div>
+          +
+        </Button>
+      </div>
+    </Card>
+  );
+}

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -186,8 +186,8 @@ function PreviewContent({
 
       const touchEnd = new Date().getTime();
 
-      // consider tap less than 500 ms
+      // consider tap less than 300 ms
-      if (touchEnd - touchStart < 500) {
+      if (touchEnd - touchStart < 300) {
         onClick();
       }
     });
@@ -214,10 +214,11 @@ function PreviewContent({
   } else {
     return (
       <>
-        <div className={`${getPreviewWidth(camera, config)}`}>
+        <div className="w-full">
           <VideoPlayer
             options={{
               preload: "auto",
+              aspectRatio: "16:9",
               autoplay: true,
               controls: false,
               muted: true,
@@ -263,12 +264,12 @@ function isCurrentHour(timestamp: number) {
 function getPreviewWidth(camera: string, config: FrigateConfig) {
   const detect = config.cameras[camera].detect;
 
-  if (detect.width / detect.height < 1.0) {
+  if (detect.width / detect.height < 1) {
-    return "w-[120px]";
+    return "w-1/2";
   }
 
-  if (detect.width / detect.height < 1.4) {
+  if (detect.width / detect.height < 16 / 9) {
-    return "w-[208px]";
+    return "w-2/3";
   }
 
   return "w-full";

web/src/components/scrubber/ActivityScrubber.tsx

@@ -76,7 +76,7 @@ const domEvents: TimelineEventsWithMissing[] = [
 type ActivityScrubberProps = {
   className?: string;
   items?: TimelineItem[];
-  timeBars?: { time: DateType; id?: IdType | undefined }[];
+  timeBars?: { time: DateType; id: IdType }[];
   groups?: TimelineGroup[];
   options?: TimelineOptions;
 } & TimelineEventsHandlers;
@@ -94,6 +94,9 @@ function ActivityScrubber({
     timeline: null,
   });
   const [currentTime, setCurrentTime] = useState(Date.now());
+  const [_, setCustomTimes] = useState<
+    { id: IdType; time: DateType }[]
+  >([]);
 
   const defaultOptions: TimelineOptions = {
     width: "100%",
@@ -161,6 +164,41 @@ function ActivityScrubber({
     };
   }, [containerRef]);
 
+  // need to keep custom times in sync
+  useEffect(() => {
+    if (!timelineRef.current.timeline || timeBars == undefined) {
+      return;
+    }
+
+    setCustomTimes((prevTimes) => {
+      if (prevTimes.length == 0 && timeBars.length == 0) {
+        return [];
+      }
+
+      prevTimes
+        .filter((x) => timeBars.find((y) => x.id == y.id) == undefined)
+        .forEach((time) => {
+          try {
+            timelineRef.current.timeline?.removeCustomTime(time.id);
+          } catch {}
+        });
+
+      timeBars.forEach((time) => {
+        try {
+          const existing = timelineRef.current.timeline?.getCustomTime(time.id);
+
+          if (existing != time.time) {
+            timelineRef.current.timeline?.setCustomTime(time.time, time.id);
+          }
+        } catch {
+          timelineRef.current.timeline?.addCustomTime(time.time, time.id);
+        }
+      });
+
+      return timeBars;
+    });
+  }, [timeBars, timelineRef]);
+
   return (
     <div className={className || ""}>
       <div ref={containerRef} />

web/src/pages/History.tsx

@@ -19,12 +19,13 @@ import {
 import HistoryFilterPopover from "@/components/filter/HistoryFilterPopover";
 import useApiFilter from "@/hooks/use-api-filter";
 import HistoryCardView from "@/views/history/HistoryCardView";
-import HistoryTimelineView from "@/views/history/HistoryTimelineView";
 import { Button } from "@/components/ui/button";
 import { IoMdArrowBack } from "react-icons/io";
 import useOverlayState from "@/hooks/use-overlay-state";
 import { useNavigate } from "react-router-dom";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
+import MobileTimelineView from "@/views/history/MobileTimelineView";
+import DesktopTimelineView from "@/views/history/DesktopTimelineView";
 
 const API_LIMIT = 200;
 
@@ -76,10 +77,25 @@ function History() {
     setSize,
     isValidating,
   } = useSWRInfinite<HourlyTimeline>(getKey, timelineFetcher);
+
+  const previewTimes = useMemo(() => {
+    if (!timelinePages) {
+      return undefined;
+    }
+
+    const startDate = new Date();
+    startDate.setMinutes(0, 0, 0);
+
+    const endDate = new Date(timelinePages.at(-1)!!.end);
+    endDate.setHours(0, 0, 0, 0);
+    return {
+      start: startDate.getTime() / 1000,
+      end: endDate.getTime() / 1000,
+    };
+  }, [timelinePages]);
   const { data: allPreviews } = useSWR<Preview[]>(
-    timelinePages
+    previewTimes
-      ? `preview/all/start/${timelinePages?.at(0)
+      ? `preview/all/start/${previewTimes.start}/end/${previewTimes.end}`
-          ?.start}/end/${timelinePages?.at(-1)?.end}`
       : null,
     { revalidateOnFocus: false }
   );
@@ -104,9 +120,9 @@ function History() {
     return window.innerWidth < 768;
   }, [playback]);
 
-  const timelineCards: CardsData | never[] = useMemo(() => {
+  const timelineCards: CardsData = useMemo(() => {
     if (!timelinePages) {
-      return [];
+      return {};
     }
 
     return getHourlyTimelineData(
@@ -152,7 +168,7 @@ function History() {
     }
   }, [itemsToDelete, updateHistory]);
 
-  if (!config || !timelineCards || timelineCards.length == 0) {
+  if (!config || !timelineCards) {
     return <ActivityIndicator />;
   }
 
@@ -217,6 +233,8 @@ function History() {
         onItemSelected={(item) => setPlaybackState(item)}
       />
       <TimelineViewer
+        timelineData={timelineCards}
+        allPreviews={allPreviews || []}
         playback={viewingPlayback ? playback : undefined}
         isMobile={isMobile}
         onClose={() => setPlaybackState(undefined)}
@@ -226,25 +244,37 @@ function History() {
 }
 
 type TimelineViewerProps = {
+  timelineData: CardsData | undefined;
+  allPreviews: Preview[];
   playback: TimelinePlayback | undefined;
   isMobile: boolean;
   onClose: () => void;
 };
 
-function TimelineViewer({ playback, isMobile, onClose }: TimelineViewerProps) {
+function TimelineViewer({
+  timelineData,
+  allPreviews,
+  playback,
+  isMobile,
+  onClose,
+}: TimelineViewerProps) {
   if (isMobile) {
     return playback != undefined ? (
       <div className="w-screen absolute left-0 top-20 bottom-0 bg-background z-50">
-        <HistoryTimelineView playback={playback} isMobile={isMobile} />
+        {timelineData && <MobileTimelineView playback={playback} />}
       </div>
     ) : null;
   }
 
   return (
     <Dialog open={playback != undefined} onOpenChange={(_) => onClose()}>
-      <DialogContent className="w-3/5 max-w-full">
+      <DialogContent className="md:max-w-2xl lg:max-w-4xl xl:max-w-6xl 2xl:max-w-7xl 3xl:max-w-[1720px]">
-        {playback && (
+        {timelineData && playback && (
-          <HistoryTimelineView playback={playback} isMobile={isMobile} />
+          <DesktopTimelineView
+            timelineData={timelineData}
+            allPreviews={allPreviews}
+            initialPlayback={playback}
+          />
         )}
       </DialogContent>
     </Dialog>

web/src/types/history.ts

@@ -1,7 +1,7 @@
 type CardsData = {
-  [key: string]: {
+  [day: string]: {
-    [key: string]: {
+    [hour: string]: {
-      [key: string]: Card;
+      [groupKey: string]: Card;
     };
   };
 };
@@ -58,6 +58,7 @@ interface HistoryFilter extends FilterType {
 
 type TimelinePlayback = {
   camera: string;
+  range: { start: number; end: number };
   timelineItems: Timeline[];
   relevantPreview: Preview | undefined;
 };

web/src/utils/dateUtil.ts

@@ -1,5 +1,5 @@
-import strftime from 'strftime';
+import strftime from "strftime";
-import { fromUnixTime, intervalToDuration, formatDuration } from 'date-fns';
+import { fromUnixTime, intervalToDuration, formatDuration } from "date-fns";
 export const longToDate = (long: number): Date => new Date(long * 1000);
 export const epochToLong = (date: number): number => date / 1000;
 export const dateToLong = (date: Date): number => epochToLong(date.getTime());
@@ -276,3 +276,12 @@ const getUTCOffset = (date: Date, timezone: string): number => {
 
   return (target.getTime() - utcDate.getTime()) / 60 / 1000;
 };
+
+export function getRangeForTimestamp(timestamp: number) {
+  const date = new Date(timestamp * 1000);
+  date.setMinutes(0, 0, 0);
+  const start = date.getTime() / 1000;
+  date.setHours(date.getHours() + 1);
+  const end = date.getTime() / 1000;
+  return { start, end };
+}

web/src/utils/historyUtil.ts

@@ -4,7 +4,7 @@ const GROUP_SECONDS = 60;
 export function getHourlyTimelineData(
   timelinePages: HourlyTimeline[],
   detailLevel: string
-) {
+): CardsData {
   const cards: CardsData = {};
   timelinePages.forEach((hourlyTimeline) => {
     Object.keys(hourlyTimeline["hours"])
@@ -101,3 +101,83 @@ export function getHourlyTimelineData(
 
   return cards;
 }
+
+export function getTimelineHoursForDay(
+  camera: string,
+  cards: CardsData,
+  allPreviews: Preview[],
+  timestamp: number
+): TimelinePlayback[] {
+  const now = new Date();
+  const data: TimelinePlayback[] = [];
+  const startDay = new Date(timestamp * 1000);
+  startDay.setHours(23, 59, 59, 999);
+  const dayEnd = startDay.getTime() / 1000;
+  startDay.setHours(0, 0, 0, 0);
+  let start = startDay.getTime() / 1000;
+  let end = 0;
+
+  const relevantPreviews = allPreviews.filter((preview) => {
+    return (
+      preview.camera == camera &&
+      preview.start >= start &&
+      Math.floor(preview.end - 1) <= dayEnd
+    );
+  });
+
+  const dayIdx = Object.keys(cards).find((day) => {
+    if (parseInt(day) > start) {
+      return false;
+    }
+
+    return true;
+  });
+
+  if (dayIdx == undefined) {
+    return [];
+  }
+
+  const day = cards[dayIdx];
+
+  for (let i = 0; i < 24; i++) {
+    startDay.setHours(startDay.getHours() + 1);
+
+    if (startDay > now) {
+      break;
+    }
+
+    end = startDay.getTime() / 1000;
+    const hour = Object.values(day).find((cards) => {
+      if (
+        Object.values(cards)[0].time < start ||
+        Object.values(cards)[0].time > end
+      ) {
+        return false;
+      }
+
+      return true;
+    });
+    const timelineItems: Timeline[] = hour
+      ? Object.values(hour).flatMap((card) => {
+          if (card.camera == camera) {
+            return card.entries;
+          }
+
+          return [];
+        })
+      : [];
+    const relevantPreview = relevantPreviews.find(
+      (preview) =>
+        Math.round(preview.start) >= start && Math.floor(preview.end) <= end
+    );
+    data.push({
+      camera,
+      range: { start, end },
+      timelineItems,
+      relevantPreview,
+    });
+    start = startDay.getTime() / 1000;
+  }
+
+  return data.reverse();
+}

web/src/views/history/DesktopTimelineView.tsx

@@ -0,0 +1,347 @@
+import { useApiHost } from "@/api";
+import TimelineEventOverlay from "@/components/overlay/TimelineDataOverlay";
+import VideoPlayer from "@/components/player/VideoPlayer";
+import ActivityScrubber from "@/components/scrubber/ActivityScrubber";
+import ActivityIndicator from "@/components/ui/activity-indicator";
+import { FrigateConfig } from "@/types/frigateConfig";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import useSWR from "swr";
+import Player from "video.js/dist/types/player";
+import TimelineItemCard from "@/components/card/TimelineItemCard";
+import { getTimelineHoursForDay } from "@/utils/historyUtil";
+
+type DesktopTimelineViewProps = {
+  timelineData: CardsData;
+  allPreviews: Preview[];
+  initialPlayback: TimelinePlayback;
+};
+
+export default function DesktopTimelineView({
+  timelineData,
+  allPreviews,
+  initialPlayback,
+}: DesktopTimelineViewProps) {
+  const apiHost = useApiHost();
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const timezone = useMemo(
+    () =>
+      config?.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
+    [config]
+  );
+
+  const [selectedPlayback, setSelectedPlayback] = useState(initialPlayback);
+
+  const playerRef = useRef<Player | undefined>(undefined);
+  const previewRef = useRef<Player | undefined>(undefined);
+
+  const [scrubbing, setScrubbing] = useState(false);
+  const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
+    undefined
+  );
+
+  const [seeking, setSeeking] = useState(false);
+  const [timeToSeek, setTimeToSeek] = useState<number | undefined>(undefined);
+  const [timelineTime, setTimelineTime] = useState(
+    initialPlayback.timelineItems.length > 0
+      ? initialPlayback.timelineItems[0].timestamp - initialPlayback.range.start
+      : 0
+  );
+
+  const annotationOffset = useMemo(() => {
+    if (!config) {
+      return 0;
+    }
+
+    return (
+      (config.cameras[initialPlayback.camera]?.detect?.annotation_offset || 0) /
+      1000
+    );
+  }, [config]);
+
+  const recordingParams = useMemo(() => {
+    return {
+      before: selectedPlayback.range.end,
+      after: selectedPlayback.range.start,
+    };
+  }, [selectedPlayback]);
+  const { data: recordings } = useSWR<Recording[]>(
+    selectedPlayback
+      ? [`${selectedPlayback.camera}/recordings`, recordingParams]
+      : null,
+    { revalidateOnFocus: false }
+  );
+
+  const playbackUri = useMemo(() => {
+    if (!selectedPlayback) {
+      return "";
+    }
+
+    const date = new Date(selectedPlayback.range.start * 1000);
+    return `${apiHost}vod/${date.getFullYear()}-${
+      date.getMonth() + 1
+    }/${date.getDate()}/${date.getHours()}/${
+      selectedPlayback.camera
+    }/${timezone.replaceAll("/", ",")}/master.m3u8`;
+  }, [selectedPlayback]);
+
+  const onSelectItem = useCallback(
+    (timeline: Timeline | undefined) => {
+      if (timeline) {
+        setFocusedItem(timeline);
+        const selected = timeline.timestamp;
+        playerRef.current?.pause();
+
+        let seekSeconds = 0;
+        (recordings || []).every((segment) => {
+          // if the next segment is past the desired time, stop calculating
+          if (segment.start_time > selected) {
+            return false;
+          }
+
+          if (segment.end_time < selected) {
+            seekSeconds += segment.end_time - segment.start_time;
+            return true;
+          }
+
+          seekSeconds +=
+            segment.end_time -
+            segment.start_time -
+            (segment.end_time - selected);
+          return true;
+        });
+        playerRef.current?.currentTime(seekSeconds);
+      } else {
+        setFocusedItem(undefined);
+      }
+    },
+    [annotationOffset, recordings, playerRef]
+  );
+
+  // handle seeking to next frame when seek is finished
+  useEffect(() => {
+    if (seeking) {
+      return;
+    }
+
+    if (timeToSeek && timeToSeek != previewRef.current?.currentTime()) {
+      setSeeking(true);
+      previewRef.current?.currentTime(timeToSeek);
+    }
+  }, [timeToSeek, seeking]);
+
+  // handle loading main / preview playback when selected hour changes
+  useEffect(() => {
+    if (!playerRef.current || !previewRef.current) {
+      return;
+    }
+
+    setTimelineTime(
+      selectedPlayback.timelineItems.length > 0
+        ? selectedPlayback.timelineItems[0].timestamp
+        : selectedPlayback.range.start
+    );
+
+    playerRef.current.src({
+      src: playbackUri,
+      type: "application/vnd.apple.mpegurl",
+    });
+
+    if (selectedPlayback.relevantPreview) {
+      previewRef.current.src({
+        src: selectedPlayback.relevantPreview.src,
+        type: selectedPlayback.relevantPreview.type,
+      });
+    }
+  }, [playerRef, previewRef, selectedPlayback]);
+
+  const timelineStack = useMemo(
+    () =>
+      getTimelineHoursForDay(
+        selectedPlayback.camera,
+        timelineData,
+        allPreviews,
+        selectedPlayback.range.start + 60
+      ),
+    []
+  );
+
+  if (!config) {
+    return <ActivityIndicator />;
+  }
+
+  return (
+    <div className="w-full">
+      <div className="flex">
+        <>
+          <div className="w-2/3 bg-black flex justify-center items-center">
+            <div
+              className={`w-full relative ${
+                selectedPlayback.relevantPreview != undefined && scrubbing
+                  ? "hidden"
+                  : "visible"
+              }`}
+            >
+              <VideoPlayer
+                options={{
+                  preload: "auto",
+                  autoplay: true,
+                  sources: [
+                    {
+                      src: playbackUri,
+                      type: "application/vnd.apple.mpegurl",
+                    },
+                  ],
+                  controlBar: {
+                    remainingTimeDisplay: false,
+                    progressControl: {
+                      seekBar: false,
+                    },
+                  },
+                }}
+                seekOptions={{ forward: 10, backward: 5 }}
+                onReady={(player) => {
+                  playerRef.current = player;
+
+                  if (selectedPlayback.timelineItems.length > 0) {
+                    player.currentTime(
+                      selectedPlayback.timelineItems[0].timestamp -
+                        selectedPlayback.range.start
+                    );
+                  } else {
+                    player.currentTime(0);
+                  }
+                  player.on("playing", () => onSelectItem(undefined));
+                  player.on("timeupdate", () => {
+                    setTimelineTime(Math.floor(player.currentTime() || 0));
+                  });
+                }}
+                onDispose={() => {
+                  playerRef.current = undefined;
+                }}
+              >
+                {focusedItem && (
+                  <TimelineEventOverlay
+                    timeline={focusedItem}
+                    cameraConfig={config.cameras[selectedPlayback.camera]}
+                  />
+                )}
+              </VideoPlayer>
+            </div>
+            {selectedPlayback.relevantPreview && (
+              <div className={`w-full ${scrubbing ? "visible" : "hidden"}`}>
+                <VideoPlayer
+                  options={{
+                    preload: "auto",
+                    autoplay: false,
+                    controls: false,
+                    muted: true,
+                    loadingSpinner: false,
+                    sources: [
+                      {
+                        src: `${selectedPlayback.relevantPreview?.src}`,
+                        type: "video/mp4",
+                      },
+                    ],
+                  }}
+                  seekOptions={{}}
+                  onReady={(player) => {
+                    previewRef.current = player;
+                    player.on("seeked", () => setSeeking(false));
+                  }}
+                  onDispose={() => {
+                    previewRef.current = undefined;
+                  }}
+                />
+              </div>
+            )}
+          </div>
+        </>
+        <div className="px-2 h-[608px] overflow-auto">
+          {selectedPlayback.timelineItems.map((timeline) => {
+            return (
+              <TimelineItemCard
+                key={timeline.timestamp}
+                timeline={timeline}
+                relevantPreview={selectedPlayback.relevantPreview}
+                onSelect={() => onSelectItem(timeline)}
+              />
+            );
+          })}
+        </div>
+      </div>
+      <div className="m-1 max-h-72 2xl:max-h-80 3xl:max-h-96 overflow-auto">
+        {timelineStack.map((timeline) => {
+          const isSelected =
+            timeline.range.start == selectedPlayback.range.start;
+
+          return (
+            <div
+              key={timeline.range.start}
+              className={`p-2 ${isSelected ? "bg-secondary bg-opacity-30 rounded-md" : ""}`}
+            >
+              <ActivityScrubber
+                items={[]}
+                timeBars={
+                  isSelected && selectedPlayback.relevantPreview
+                    ? [
+                        {
+                          time: new Date(
+                            (timeline.range.start + timelineTime) * 1000
+                          ),
+                          id: "playback",
+                        },
+                      ]
+                    : []
+                }
+                options={{
+                  snap: null,
+                  min: new Date(timeline.range.start * 1000),
+                  max: new Date(timeline.range.end * 1000),
+                  zoomable: false,
+                }}
+                timechangeHandler={(data) => {
+                  if (!timeline.relevantPreview) {
+                    return;
+                  }
+
+                  if (playerRef.current?.paused() == false) {
+                    setScrubbing(true);
+                    playerRef.current?.pause();
+                  }
+
+                  const seekTimestamp = data.time.getTime() / 1000;
+                  const seekTime =
+                    seekTimestamp - timeline.relevantPreview.start;
+                  setTimelineTime(seekTimestamp - timeline.range.start);
+                  setTimeToSeek(Math.round(seekTime));
+                }}
+                timechangedHandler={(data) => {
+                  const playbackTime = data.time.getTime() / 1000;
+                  playerRef.current?.currentTime(
+                    playbackTime - timeline.range.start
+                  );
+                  setScrubbing(false);
+                  playerRef.current?.play();
+                }}
+                doubleClickHandler={() => {
+                  setSelectedPlayback(timeline);
+                }}
+                selectHandler={(data) => {
+                  if (data.items.length > 0) {
+                    const selected = data.items[0];
+                    onSelectItem(
+                      selectedPlayback.timelineItems.find(
+                        (timeline) => timeline.timestamp == selected
+                      )
+                    );
+                  }
+                }}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

web/src/views/history/HistoryCardView.tsx

@@ -2,7 +2,10 @@ import HistoryCard from "@/components/card/HistoryCard";
 import ActivityIndicator from "@/components/ui/activity-indicator";
 import Heading from "@/components/ui/heading";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
+import {
+  formatUnixTimestampToDateTime,
+  getRangeForTimestamp,
+} from "@/utils/dateUtil";
 import { useCallback, useRef } from "react";
 import useSWR from "swr";
 
@@ -117,6 +120,7 @@ export default function HistoryCardView({
                                 onClick={() => {
                                   onItemSelected({
                                     camera: timeline.camera,
+                                    range: getRangeForTimestamp(timeline.time),
                                     timelineItems: Object.values(
                                       timelineHour
                                     ).flatMap((card) =>

web/src/views/history/MobileTimelineView.tsx

@@ -15,15 +15,13 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useSWR from "swr";
 import Player from "video.js/dist/types/player";
 
-type HistoryTimelineViewProps = {
+type MobileTimelineViewProps = {
   playback: TimelinePlayback;
-  isMobile: boolean;
 };
 
-export default function HistoryTimelineView({
+export default function MobileTimelineView({
   playback,
-  isMobile,
+}: MobileTimelineViewProps) {
-}: HistoryTimelineViewProps) {
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
   const timezone = useMemo(
@@ -32,8 +30,6 @@ export default function HistoryTimelineView({
     [config]
   );
 
-  const hasRelevantPreview = playback.relevantPreview != undefined;
-
   const playerRef = useRef<Player | undefined>(undefined);
   const previewRef = useRef<Player | undefined>(undefined);
 
@@ -53,33 +49,20 @@ export default function HistoryTimelineView({
     return (
       (config.cameras[playback.camera]?.detect?.annotation_offset || 0) / 1000
     );
-  }, [config, playback]);
+  }, [config]);
 
-  const timelineTime = useMemo(() => {
+  const [timelineTime, setTimelineTime] = useState(
-    if (!playback) {
+    playback.timelineItems.length > 0
-      return 0;
+      ? playback.timelineItems[0].timestamp
-    }
+      : playback.range.start
-
+  );
-    return playback.timelineItems.at(0)!!.timestamp;
-  }, [playback]);
-  const playbackTimes = useMemo(() => {
-    const date = new Date(timelineTime * 1000);
-    date.setMinutes(0, 0, 0);
-    const startTime = date.getTime() / 1000;
-    date.setHours(date.getHours() + 1);
-    const endTime = date.getTime() / 1000;
-    return {
-      start: parseInt(startTime.toFixed(1)),
-      end: parseInt(endTime.toFixed(1)),
-    };
-  }, [timelineTime]);
 
   const recordingParams = useMemo(() => {
     return {
-      before: playbackTimes.end,
+      before: playback.range.end,
-      after: playbackTimes.start,
+      after: playback.range.start,
     };
-  }, [playbackTimes]);
+  }, [playback]);
   const { data: recordings } = useSWR<Recording[]>(
     playback ? [`${playback.camera}/recordings`, recordingParams] : null,
     { revalidateOnFocus: false }
@@ -90,23 +73,19 @@ export default function HistoryTimelineView({
       return "";
     }
 
-    const date = new Date(playbackTimes.start * 1000);
+    const date = new Date(playback.range.start * 1000);
     return `${apiHost}vod/${date.getFullYear()}-${
       date.getMonth() + 1
     }/${date.getDate()}/${date.getHours()}/${
       playback.camera
     }/${timezone.replaceAll("/", ",")}/master.m3u8`;
-  }, [playbackTimes]);
+  }, [playback]);
 
   const onSelectItem = useCallback(
-    (data: { items: number[] }) => {
+    (timeline: Timeline | undefined) => {
-      if (data.items.length > 0) {
+      if (timeline) {
-        const selected = data.items[0];
+        setFocusedItem(timeline);
-        setFocusedItem(
+        const selected = timeline.timestamp;
-          playback.timelineItems.find(
-            (timeline) => timeline.timestamp == selected
-          )
-        );
         playerRef.current?.pause();
 
         let seekSeconds = 0;
@@ -128,6 +107,8 @@ export default function HistoryTimelineView({
           return true;
         });
         playerRef.current?.currentTime(seekSeconds);
+      } else {
+        setFocusedItem(undefined);
       }
     },
     [annotationOffset, recordings, playerRef]
@@ -135,7 +116,7 @@ export default function HistoryTimelineView({
 
   const onScrubTime = useCallback(
     (data: { time: Date }) => {
-      if (!hasRelevantPreview) {
+      if (!playback.relevantPreview) {
         return;
       }
 
@@ -145,20 +126,21 @@ export default function HistoryTimelineView({
       }
 
       const seekTimestamp = data.time.getTime() / 1000;
-      const seekTime = seekTimestamp - playback.relevantPreview!!.start;
+      const seekTime = seekTimestamp - playback.relevantPreview.start;
+      setTimelineTime(seekTimestamp);
       setTimeToSeek(Math.round(seekTime));
     },
-    [scrubbing, playerRef]
+    [scrubbing, playerRef, playback]
   );
 
   const onStopScrubbing = useCallback(
     (data: { time: Date }) => {
       const playbackTime = data.time.getTime() / 1000;
-      playerRef.current?.currentTime(playbackTime - playbackTimes.start);
+      playerRef.current?.currentTime(playbackTime - playback.range.start);
       setScrubbing(false);
       playerRef.current?.play();
     },
-    [playerRef]
+    [playback, playerRef]
   );
 
   // handle seeking to next frame when seek is finished
@@ -182,7 +164,7 @@ export default function HistoryTimelineView({
       <>
         <div
           className={`relative ${
-            hasRelevantPreview && scrubbing ? "hidden" : "visible"
+            playback.relevantPreview && scrubbing ? "hidden" : "visible"
           }`}
         >
           <VideoPlayer
@@ -199,9 +181,9 @@ export default function HistoryTimelineView({
             seekOptions={{ forward: 10, backward: 5 }}
             onReady={(player) => {
               playerRef.current = player;
-              player.currentTime(timelineTime - playbackTimes.start);
+              player.currentTime(timelineTime - playback.range.start);
               player.on("playing", () => {
-                setFocusedItem(undefined);
+                onSelectItem(undefined);
               });
             }}
             onDispose={() => {
@@ -216,7 +198,7 @@ export default function HistoryTimelineView({
             ) : undefined}
           </VideoPlayer>
         </div>
-        {hasRelevantPreview && (
+        {playback.relevantPreview && (
           <div className={`${scrubbing ? "visible" : "hidden"}`}>
             <VideoPlayer
               options={{
@@ -249,27 +231,34 @@ export default function HistoryTimelineView({
           <ActivityScrubber
             items={timelineItemsToScrubber(playback.timelineItems)}
             timeBars={
-              hasRelevantPreview
+              playback.relevantPreview
                 ? [{ time: new Date(timelineTime * 1000), id: "playback" }]
                 : []
             }
             options={{
-              ...(isMobile && {
+              start: new Date(
-                start: new Date(
+                Math.max(playback.range.start, timelineTime - 300) * 1000
-                  Math.max(playbackTimes.start, timelineTime - 300) * 1000
+              ),
-                ),
+              end: new Date(
-                end: new Date(
+                Math.min(playback.range.end, timelineTime + 300) * 1000
-                  Math.min(playbackTimes.end, timelineTime + 300) * 1000
+              ),
-                ),
-              }),
               snap: null,
-              min: new Date(playbackTimes.start * 1000),
+              min: new Date(playback.range.start * 1000),
-              max: new Date(playbackTimes.end * 1000),
+              max: new Date(playback.range.end * 1000),
-              timeAxis: isMobile ? { scale: "minute", step: 5 } : {},
+              timeAxis: { scale: "minute", step: 5 },
             }}
             timechangeHandler={onScrubTime}
             timechangedHandler={onStopScrubbing}
-            selectHandler={onSelectItem}
+            selectHandler={(data) => {
+              if (data.items.length > 0) {
+                const selected = data.items[0];
+                onSelectItem(
+                  playback.timelineItems.find(
+                    (timeline) => timeline.timestamp == selected
+                  )
+                );
+              }
+            }}
           />
         )}
       </div>