From 4884a75c6fb1576e3e3a963cd3d448a2af602582 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Sun, 31 Dec 2023 15:32:36 -0700
Subject: [PATCH] Remove seekbar and use timeline as seekbar

---
 web/src/components/card/TimelineItemCard.tsx  |  2 +-
 .../player/PreviewThumbnailPlayer.tsx         |  4 +-
 .../components/scrubber/ActivityScrubber.tsx  |  2 +-
 web/src/views/history/DesktopTimelineView.tsx | 39 ++++++++++++++-----
 web/src/views/history/MobileTimelineView.tsx  | 21 +++-------
 5 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/web/src/components/card/TimelineItemCard.tsx b/web/src/components/card/TimelineItemCard.tsx
index 550cb6e92..9aa13c9e4 100644
--- a/web/src/components/card/TimelineItemCard.tsx
+++ b/web/src/components/card/TimelineItemCard.tsx
@@ -20,7 +20,7 @@ export default function TimelineItemCard({
   const { data: config } = useSWR<FrigateConfig>("config");
 
   return (
-    <Card className="relative m-2 flex h-32 cursor-pointer" onClick={onSelect}>
+    <Card className="relative m-2 flex w-full h-32 cursor-pointer" onClick={onSelect}>
       <div className="w-1/2 p-2">
         {relevantPreview && (
           <VideoPlayer
diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 896beecab..47d232409 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -186,8 +186,8 @@ function PreviewContent({
 
       const touchEnd = new Date().getTime();
 
-      // consider tap less than 500 ms
-      if (touchEnd - touchStart < 500) {
+      // consider tap less than 300 ms
+      if (touchEnd - touchStart < 300) {
         onClick();
       }
     });
diff --git a/web/src/components/scrubber/ActivityScrubber.tsx b/web/src/components/scrubber/ActivityScrubber.tsx
index 22af9b85e..de8098aa7 100644
--- a/web/src/components/scrubber/ActivityScrubber.tsx
+++ b/web/src/components/scrubber/ActivityScrubber.tsx
@@ -94,7 +94,7 @@ function ActivityScrubber({
     timeline: null,
   });
   const [currentTime, setCurrentTime] = useState(Date.now());
-  const [customTimes, setCustomTimes] = useState<
+  const [_, setCustomTimes] = useState<
     { id: IdType; time: DateType }[]
   >([]);
 
diff --git a/web/src/views/history/DesktopTimelineView.tsx b/web/src/views/history/DesktopTimelineView.tsx
index ebb688cdb..1a327d1cb 100644
--- a/web/src/views/history/DesktopTimelineView.tsx
+++ b/web/src/views/history/DesktopTimelineView.tsx
@@ -118,6 +118,24 @@ export default function DesktopTimelineView({
     [annotationOffset, recordings, playerRef]
   );
 
+  const onPlayerProgressUpdate = useCallback(() => {
+    if (!playerRef.current?.currentTime) {
+      return;
+    }
+
+    const playerTime = playerRef.current.currentTime();
+
+    if (!playerTime) {
+      return;
+    }
+
+    const time = timelineTime - selectedPlayback.range.start;
+
+    if (Math.round(playerTime) - time >= 5) {
+      setTimelineTime(selectedPlayback.range.start + playerTime);
+    }
+  }, [selectedPlayback, timelineTime]);
+
   // handle seeking to next frame when seek is finished
   useEffect(() => {
     if (seeking) {
@@ -130,7 +148,7 @@ export default function DesktopTimelineView({
     }
   }, [timeToSeek, seeking]);
 
-  // handle loading main playback when selected hour changes
+  // handle loading main / preview playback when selected hour changes
   useEffect(() => {
     if (!playerRef.current || !previewRef.current) {
       return;
@@ -147,12 +165,10 @@ export default function DesktopTimelineView({
       type: "application/vnd.apple.mpegurl",
     });
 
+    playerRef.current.off("timeupdate", onPlayerProgressUpdate);
+    playerRef.current.on("timeupdate", onPlayerProgressUpdate);
+
     if (selectedPlayback.relevantPreview) {
-      console.log(
-        `found relevant preview with start ${new Date(
-          selectedPlayback.relevantPreview.start * 1000
-        )} for ${new Date(selectedPlayback.range.start * 1000)}`
-      );
       previewRef.current.src({
         src: selectedPlayback.relevantPreview.src,
         type: selectedPlayback.relevantPreview.type,
@@ -197,6 +213,12 @@ export default function DesktopTimelineView({
                       type: "application/vnd.apple.mpegurl",
                     },
                   ],
+                  controlBar: {
+                    remainingTimeDisplay: false,
+                    progressControl: {
+                      seekBar: false,
+                    },
+                  },
                 }}
                 seekOptions={{ forward: 10, backward: 5 }}
                 onReady={(player) => {
@@ -210,9 +232,8 @@ export default function DesktopTimelineView({
                   } else {
                     player.currentTime(0);
                   }
-                  player.on("playing", () => {
-                    onSelectItem(undefined);
-                  });
+                  player.on("playing", () => onSelectItem(undefined));
+                  player.on("timeupdate", onPlayerProgressUpdate);
                 }}
                 onDispose={() => {
                   playerRef.current = undefined;
diff --git a/web/src/views/history/MobileTimelineView.tsx b/web/src/views/history/MobileTimelineView.tsx
index bc37c232c..23001bce8 100644
--- a/web/src/views/history/MobileTimelineView.tsx
+++ b/web/src/views/history/MobileTimelineView.tsx
@@ -51,13 +51,11 @@ export default function MobileTimelineView({
     );
   }, [config]);
 
-  const timelineTime = useMemo(() => {
-    if (!playback || playback.timelineItems.length == 0) {
-      return 0;
-    }
-
-    return playback.timelineItems.at(0)!!.timestamp;
-  }, [playback]);
+  const [timelineTime, setTimelineTime] = useState(
+    playback.timelineItems.length > 0
+      ? playback.timelineItems[0].timestamp
+      : playback.range.start
+  );
 
   const recordingParams = useMemo(() => {
     return {
@@ -129,14 +127,7 @@ export default function MobileTimelineView({
 
       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)
-      );
+      setTimelineTime(seekTimestamp);
       setTimeToSeek(Math.round(seekTime));
     },
     [scrubbing, playerRef, playback]