Separate mobile and desktop views and don't rerender

web/src/pages/History.tsx

@@ -25,6 +25,8 @@ 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;
 
@@ -245,14 +247,7 @@ function TimelineViewer({
   if (isMobile) {
     return playback != undefined ? (
       <div className="w-screen absolute left-0 top-20 bottom-0 bg-background z-50">
-        {timelineData && (
-          <HistoryTimelineView
-            timelineData={timelineData}
-            allPreviews={allPreviews}
-            initialPlayback={playback}
-            isMobile={isMobile}
-          />
-        )}
+        {timelineData && <MobileTimelineView playback={playback} />}
       </div>
     ) : null;
   }
@@ -261,11 +256,10 @@ function TimelineViewer({
     <Dialog open={playback != undefined} onOpenChange={(_) => onClose()}>
       <DialogContent className="md:max-w-2xl lg:max-w-4xl xl:max-w-6xl 2xl:max-w-7xl 3xl:max-w-[1720px]">
         {timelineData && playback && (
-          <HistoryTimelineView
+          <DesktopTimelineView
             timelineData={timelineData}
             allPreviews={allPreviews}
             initialPlayback={playback}
-            isMobile={isMobile}
           />
         )}
       </DialogContent>

web/src/views/history/DesktopTimelineView.tsx

@@ -1,41 +1,27 @@
 import { useApiHost } from "@/api";
 import TimelineEventOverlay from "@/components/overlay/TimelineDataOverlay";
 import VideoPlayer from "@/components/player/VideoPlayer";
-import ActivityScrubber, {
-  ScrubberItem,
-} from "@/components/scrubber/ActivityScrubber";
+import ActivityScrubber from "@/components/scrubber/ActivityScrubber";
 import ActivityIndicator from "@/components/ui/activity-indicator";
 import { FrigateConfig } from "@/types/frigateConfig";
-import {
-  getTimelineDetectionIcon,
-  getTimelineIcon,
-} from "@/utils/timelineUtil";
-import { renderToStaticMarkup } from "react-dom/server";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+
+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 HistoryTimelineViewProps = {
+type DesktopTimelineViewProps = {
   timelineData: CardsData;
   allPreviews: Preview[];
   initialPlayback: TimelinePlayback;
-  isMobile: boolean;
 };
 
-export default function HistoryTimelineView({
+export default function DesktopTimelineView({
   timelineData,
   allPreviews,
   initialPlayback,
-  isMobile,
-}: HistoryTimelineViewProps) {
+}: DesktopTimelineViewProps) {
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
   const timezone = useMemo(
@@ -185,84 +171,18 @@ export default function HistoryTimelineView({
     }
   }, [timeToSeek, seeking]);
 
-  if (!config || !recordings) {
-    return <ActivityIndicator />;
-  }
+  // handle loading main playback when selected hour changes
+  useEffect(() => {
+    if (!playerRef.current) {
+      return;
+    }
 
-  if (isMobile) {
-    return (
-      <MobileView
-        config={config}
-        playerRef={playerRef}
-        previewRef={previewRef}
-        playback={selectedPlayback}
-        playbackUri={playbackUri}
-        timelineTime={timelineTime}
-        scrubbing={scrubbing}
-        focusedItem={focusedItem}
-        setSeeking={setSeeking}
-        onSelectItem={onSelectItem}
-        onScrubTime={onScrubTime}
-        onStopScrubbing={onStopScrubbing}
-      />
-    );
-  }
+    playerRef.current.src({
+      src: playbackUri,
+      type: "application/vnd.apple.mpegurl",
+    });
+  }, [playerRef, selectedPlayback]);
 
-  return (
-    <DesktopView
-      config={config}
-      playerRef={playerRef}
-      previewRef={previewRef}
-      timelineData={timelineData}
-      allPreviews={allPreviews}
-      selectedPlayback={selectedPlayback}
-      setSelectedPlayback={setSelectedPlayback}
-      playbackUri={playbackUri}
-      timelineTime={timelineTime}
-      scrubbing={scrubbing}
-      focusedItem={focusedItem}
-      setSeeking={setSeeking}
-      onSelectItem={onSelectItem}
-      onScrubTime={onScrubTime}
-      onStopScrubbing={onStopScrubbing}
-    />
-  );
-}
-
-type DesktopViewProps = {
-  config: FrigateConfig;
-  playerRef: React.MutableRefObject<Player | undefined>;
-  previewRef: React.MutableRefObject<Player | undefined>;
-  timelineData: CardsData;
-  allPreviews: Preview[];
-  selectedPlayback: TimelinePlayback;
-  setSelectedPlayback: (timeline: TimelinePlayback) => void;
-  playbackUri: string;
-  timelineTime: number;
-  scrubbing: boolean;
-  focusedItem: Timeline | undefined;
-  setSeeking: (seeking: boolean) => void;
-  onSelectItem: (timeline: Timeline | undefined) => void;
-  onScrubTime: ({ time }: { time: Date }) => void;
-  onStopScrubbing: ({ time }: { time: Date }) => void;
-};
-function DesktopView({
-  config,
-  playerRef,
-  previewRef,
-  timelineData,
-  allPreviews,
-  selectedPlayback,
-  setSelectedPlayback,
-  playbackUri,
-  timelineTime,
-  scrubbing,
-  focusedItem,
-  setSeeking,
-  onSelectItem,
-  onScrubTime,
-  onStopScrubbing,
-}: DesktopViewProps) {
   const timelineStack = useMemo(
     () =>
       getTimelineHoursForDay(
@@ -274,6 +194,10 @@ function DesktopView({
     []
   );
 
+  if (!config) {
+    return <ActivityIndicator />;
+  }
+
   return (
     <div className="w-full">
       <div className="flex">
@@ -290,12 +214,6 @@ function DesktopView({
                 options={{
                   preload: "auto",
                   autoplay: true,
-                  sources: [
-                    {
-                      src: playbackUri,
-                      type: "application/vnd.apple.mpegurl",
-                    },
-                  ],
                 }}
                 seekOptions={{ forward: 10, backward: 5 }}
                 onReady={(player) => {
@@ -311,12 +229,12 @@ function DesktopView({
                   playerRef.current = undefined;
                 }}
               >
-                {config && focusedItem ? (
+                {focusedItem && (
                   <TimelineEventOverlay
                     timeline={focusedItem}
                     cameraConfig={config.cameras[selectedPlayback.camera]}
                   />
-                ) : undefined}
+                )}
               </VideoPlayer>
             </div>
             {selectedPlayback.relevantPreview && (
@@ -367,9 +285,11 @@ function DesktopView({
             timeline.range.start == selectedPlayback.range.start;
 
           return (
-            <div className={`${isSelected ? "border border-primary" : ""}`}>
+            <div
+              key={timeline.range.start}
+              className={`${isSelected ? "border border-primary" : ""}`}
+            >
               <ActivityScrubber
-                key={timeline.range.start}
                 items={[]}
                 timeBars={
                   isSelected && selectedPlayback.relevantPreview
@@ -405,160 +325,3 @@ function DesktopView({
     </div>
   );
 }
-
-type MobileViewProps = {
-  config: FrigateConfig;
-  playerRef: React.MutableRefObject<Player | undefined>;
-  previewRef: React.MutableRefObject<Player | undefined>;
-  playback: TimelinePlayback;
-  playbackUri: string;
-  timelineTime: number;
-  scrubbing: boolean;
-  focusedItem: Timeline | undefined;
-  setSeeking: (seeking: boolean) => void;
-  onSelectItem: (timeline: Timeline | undefined) => void;
-  onScrubTime: ({ time }: { time: Date }) => void;
-  onStopScrubbing: ({ time }: { time: Date }) => void;
-};
-function MobileView({
-  config,
-  playerRef,
-  previewRef,
-  playback,
-  playbackUri,
-  timelineTime,
-  scrubbing,
-  focusedItem,
-  setSeeking,
-  onSelectItem,
-  onScrubTime,
-  onStopScrubbing,
-}: MobileViewProps) {
-  return (
-    <div className="w-full">
-      <>
-        <div
-          className={`relative ${
-            playback.relevantPreview && scrubbing ? "hidden" : "visible"
-          }`}
-        >
-          <VideoPlayer
-            options={{
-              preload: "auto",
-              autoplay: true,
-              sources: [
-                {
-                  src: playbackUri,
-                  type: "application/vnd.apple.mpegurl",
-                },
-              ],
-            }}
-            seekOptions={{ forward: 10, backward: 5 }}
-            onReady={(player) => {
-              playerRef.current = player;
-              player.currentTime(timelineTime - playback.range.start);
-              player.on("playing", () => {
-                onSelectItem(undefined);
-              });
-            }}
-            onDispose={() => {
-              playerRef.current = undefined;
-            }}
-          >
-            {config && focusedItem ? (
-              <TimelineEventOverlay
-                timeline={focusedItem}
-                cameraConfig={config.cameras[playback.camera]}
-              />
-            ) : undefined}
-          </VideoPlayer>
-        </div>
-        {playback.relevantPreview && (
-          <div className={`${scrubbing ? "visible" : "hidden"}`}>
-            <VideoPlayer
-              options={{
-                preload: "auto",
-                autoplay: false,
-                controls: false,
-                muted: true,
-                loadingSpinner: false,
-                sources: [
-                  {
-                    src: `${playback.relevantPreview?.src}`,
-                    type: "video/mp4",
-                  },
-                ],
-              }}
-              seekOptions={{}}
-              onReady={(player) => {
-                previewRef.current = player;
-                player.on("seeked", () => setSeeking(false));
-              }}
-              onDispose={() => {
-                previewRef.current = undefined;
-              }}
-            />
-          </div>
-        )}
-      </>
-      <div className="m-1">
-        {playback != undefined && (
-          <ActivityScrubber
-            items={timelineItemsToScrubber(playback.timelineItems)}
-            timeBars={
-              playback.relevantPreview
-                ? [{ time: new Date(timelineTime * 1000), id: "playback" }]
-                : []
-            }
-            options={{
-              start: new Date(
-                Math.max(playback.range.start, timelineTime - 300) * 1000
-              ),
-              end: new Date(
-                Math.min(playback.range.end, timelineTime + 300) * 1000
-              ),
-              snap: null,
-              min: new Date(playback.range.start * 1000),
-              max: new Date(playback.range.end * 1000),
-              timeAxis: { scale: "minute", step: 5 },
-            }}
-            timechangeHandler={onScrubTime}
-            timechangedHandler={onStopScrubbing}
-            selectHandler={(data) => {
-              if (data.items.length > 0) {
-                const selected = data.items[0];
-                onSelectItem(
-                  playback.timelineItems.find(
-                    (timeline) => timeline.timestamp == selected
-                  )
-                );
-              }
-            }}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
-
-function timelineItemsToScrubber(items: Timeline[]): ScrubberItem[] {
-  return items.map((item) => {
-    return {
-      id: item.timestamp,
-      content: getTimelineContentElement(item),
-      start: new Date(item.timestamp * 1000),
-      end: new Date(item.timestamp * 1000),
-      type: "box",
-    };
-  });
-}
-
-function getTimelineContentElement(item: Timeline): HTMLElement {
-  const output = document.createElement(`div-${item.timestamp}`);
-  output.innerHTML = renderToStaticMarkup(
-    <div className="flex items-center">
-      {getTimelineDetectionIcon(item)} : {getTimelineIcon(item)}
-    </div>
-  );
-  return output;
-}

web/src/views/history/MobileTimelineView.tsx

@@ -0,0 +1,298 @@
+import { useApiHost } from "@/api";
+import TimelineEventOverlay from "@/components/overlay/TimelineDataOverlay";
+import VideoPlayer from "@/components/player/VideoPlayer";
+import ActivityScrubber, {
+  ScrubberItem,
+} from "@/components/scrubber/ActivityScrubber";
+import ActivityIndicator from "@/components/ui/activity-indicator";
+import { FrigateConfig } from "@/types/frigateConfig";
+import {
+  getTimelineDetectionIcon,
+  getTimelineIcon,
+} from "@/utils/timelineUtil";
+import { renderToStaticMarkup } from "react-dom/server";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import useSWR from "swr";
+import Player from "video.js/dist/types/player";
+
+type MobileTimelineViewProps = {
+  playback: TimelinePlayback;
+};
+
+export default function MobileTimelineView({
+  playback,
+}: MobileTimelineViewProps) {
+  const apiHost = useApiHost();
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const timezone = useMemo(
+    () =>
+      config?.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
+    [config]
+  );
+
+  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 annotationOffset = useMemo(() => {
+    if (!config) {
+      return 0;
+    }
+
+    return (
+      (config.cameras[playback.camera]?.detect?.annotation_offset || 0) / 1000
+    );
+  }, [config]);
+
+  const timelineTime = useMemo(() => {
+    if (!playback || playback.timelineItems.length == 0) {
+      return 0;
+    }
+
+    return playback.timelineItems.at(0)!!.timestamp;
+  }, [playback]);
+
+  const recordingParams = useMemo(() => {
+    return {
+      before: playback.range.end,
+      after: playback.range.start,
+    };
+  }, [playback]);
+  const { data: recordings } = useSWR<Recording[]>(
+    playback ? [`${playback.camera}/recordings`, recordingParams] : null,
+    { revalidateOnFocus: false }
+  );
+
+  const playbackUri = useMemo(() => {
+    if (!playback) {
+      return "";
+    }
+
+    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`;
+  }, [playback]);
+
+  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]
+  );
+
+  const onScrubTime = useCallback(
+    (data: { time: Date }) => {
+      if (!playback.relevantPreview) {
+        return;
+      }
+
+      if (playerRef.current?.paused() == false) {
+        setScrubbing(true);
+        playerRef.current?.pause();
+      }
+
+      const seekTimestamp = data.time.getTime() / 1000;
+      const seekTime = seekTimestamp - playback.relevantPreview.start;
+      console.log(
+        "seeking to " +
+          seekTime +
+          " comparing " +
+          new Date(seekTimestamp * 1000) +
+          " - " +
+          new Date(playback.relevantPreview.start * 1000)
+      );
+      setTimeToSeek(Math.round(seekTime));
+    },
+    [scrubbing, playerRef, playback]
+  );
+
+  const onStopScrubbing = useCallback(
+    (data: { time: Date }) => {
+      const playbackTime = data.time.getTime() / 1000;
+      playerRef.current?.currentTime(playbackTime - playback.range.start);
+      setScrubbing(false);
+      playerRef.current?.play();
+    },
+    [playback, 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]);
+
+  if (!config || !recordings) {
+    return <ActivityIndicator />;
+  }
+
+  return (
+    <div className="w-full">
+      <>
+        <div
+          className={`relative ${
+            playback.relevantPreview && scrubbing ? "hidden" : "visible"
+          }`}
+        >
+          <VideoPlayer
+            options={{
+              preload: "auto",
+              autoplay: true,
+              sources: [
+                {
+                  src: playbackUri,
+                  type: "application/vnd.apple.mpegurl",
+                },
+              ],
+            }}
+            seekOptions={{ forward: 10, backward: 5 }}
+            onReady={(player) => {
+              playerRef.current = player;
+              player.currentTime(timelineTime - playback.range.start);
+              player.on("playing", () => {
+                onSelectItem(undefined);
+              });
+            }}
+            onDispose={() => {
+              playerRef.current = undefined;
+            }}
+          >
+            {config && focusedItem ? (
+              <TimelineEventOverlay
+                timeline={focusedItem}
+                cameraConfig={config.cameras[playback.camera]}
+              />
+            ) : undefined}
+          </VideoPlayer>
+        </div>
+        {playback.relevantPreview && (
+          <div className={`${scrubbing ? "visible" : "hidden"}`}>
+            <VideoPlayer
+              options={{
+                preload: "auto",
+                autoplay: false,
+                controls: false,
+                muted: true,
+                loadingSpinner: false,
+                sources: [
+                  {
+                    src: `${playback.relevantPreview?.src}`,
+                    type: "video/mp4",
+                  },
+                ],
+              }}
+              seekOptions={{}}
+              onReady={(player) => {
+                previewRef.current = player;
+                player.on("seeked", () => setSeeking(false));
+              }}
+              onDispose={() => {
+                previewRef.current = undefined;
+              }}
+            />
+          </div>
+        )}
+      </>
+      <div className="m-1">
+        {playback != undefined && (
+          <ActivityScrubber
+            items={timelineItemsToScrubber(playback.timelineItems)}
+            timeBars={
+              playback.relevantPreview
+                ? [{ time: new Date(timelineTime * 1000), id: "playback" }]
+                : []
+            }
+            options={{
+              start: new Date(
+                Math.max(playback.range.start, timelineTime - 300) * 1000
+              ),
+              end: new Date(
+                Math.min(playback.range.end, timelineTime + 300) * 1000
+              ),
+              snap: null,
+              min: new Date(playback.range.start * 1000),
+              max: new Date(playback.range.end * 1000),
+              timeAxis: { scale: "minute", step: 5 },
+            }}
+            timechangeHandler={onScrubTime}
+            timechangedHandler={onStopScrubbing}
+            selectHandler={(data) => {
+              if (data.items.length > 0) {
+                const selected = data.items[0];
+                onSelectItem(
+                  playback.timelineItems.find(
+                    (timeline) => timeline.timestamp == selected
+                  )
+                );
+              }
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function timelineItemsToScrubber(items: Timeline[]): ScrubberItem[] {
+  return items.map((item) => {
+    return {
+      id: item.timestamp,
+      content: getTimelineContentElement(item),
+      start: new Date(item.timestamp * 1000),
+      end: new Date(item.timestamp * 1000),
+      type: "box",
+    };
+  });
+}
+
+function getTimelineContentElement(item: Timeline): HTMLElement {
+  const output = document.createElement(`div-${item.timestamp}`);
+  output.innerHTML = renderToStaticMarkup(
+    <div className="flex items-center">
+      {getTimelineDetectionIcon(item)} : {getTimelineIcon(item)}
+    </div>
+  );
+  return output;
+}