Implement seeking limiter

web/package-lock.json

@@ -46,6 +46,7 @@
         "swr": "^2.2.4",
         "tailwind-merge": "^2.1.0",
         "tailwindcss-animate": "^1.0.7",
+        "vaul": "^0.8.0",
         "video.js": "^8.6.1",
         "videojs-playlist": "^5.1.0",
         "vis-timeline": "^7.7.3",
@@ -7758,6 +7759,18 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/vaul": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-0.8.0.tgz",
+      "integrity": "sha512-9nUU2jIObJvJZxeQU1oVr/syKo5XqbRoOMoTEt0hHlWify4QZFlqTh6QSN/yxoKzNrMeEQzxbc3XC/vkPLOIqw==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.0.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/video.js": {
       "version": "8.6.1",
       "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.6.1.tgz",

web/package.json

@@ -51,6 +51,7 @@
     "swr": "^2.2.4",
     "tailwind-merge": "^2.1.0",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.8.0",
     "video.js": "^8.6.1",
     "videojs-playlist": "^5.1.0",
     "vis-timeline": "^7.7.3",

web/src/components/scrubber/ActivityScrubber.tsx

@@ -74,7 +74,7 @@ const domEvents: TimelineEventsWithMissing[] = [
 ];
 
 type ActivityScrubberProps = {
-  items: TimelineItem[];
+  items?: TimelineItem[];
   timeBars?: { time: DateType; id?: IdType | undefined }[];
   groups?: TimelineGroup[];
   options?: TimelineOptions;

web/src/components/ui/drawer.tsx

@@ -0,0 +1,116 @@
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

web/src/pages/History.tsx

@@ -5,7 +5,6 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import Heading from "@/components/ui/heading";
 import ActivityIndicator from "@/components/ui/activity-indicator";
 import axios from "axios";
-import TimelinePlayerCard from "@/components/card/TimelinePlayerCard";
 import { getHourlyTimelineData } from "@/utils/historyUtil";
 import {
   AlertDialog,
@@ -187,12 +186,6 @@ function History() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-
-      <TimelinePlayerCard
-        timeline={undefined}
-        onDismiss={() => setPlayback(undefined)}
-      />
-
       <>
         {playback == undefined && (
           <HistoryCardView

web/src/utils/timelineUtil.tsx

@@ -1,7 +1,11 @@
 import {
   LuCircle,
   LuCircleDot,
+  LuDog,
   LuEar,
+  LuFocus,
+  LuPackage,
+  LuPersonStanding,
   LuPlay,
   LuPlayCircle,
   LuTruck,
@@ -50,6 +54,24 @@ export function getTimelineIcon(timelineItem: Timeline) {
   }
 }
 
+/**
+ * Get icon representing detection, either label specific or generic detection icon
+ * @param timelineItem timeline item
+ * @returns icon for label
+ */
+export function getTimelineDetectionIcon(timelineItem: Timeline) {
+  switch (timelineItem.data.label) {
+    case "person":
+      return <LuPersonStanding className="w-4 mr-1" />;
+    case "dog":
+      return <LuDog className="w-4 mr-1" />;
+    case "package":
+      return <LuPackage className="w-4 mr-1" />;
+    default:
+      return <LuFocus className="w-4 mr-1" />;
+  }
+}
+
 export function getTimelineItemDescription(timelineItem: Timeline) {
   const label = (
     (Array.isArray(timelineItem.data.sub_label)

web/src/views/history/HistoryCardView.tsx

@@ -9,7 +9,7 @@ import useSWR from "swr";
 type HistoryCardViewProps = {
   timelineCards: CardsData | never[];
   allPreviews: Preview[] | undefined;
-  isMobileView: boolean;
+  isMobile: boolean;
   isValidating: boolean;
   isDone: boolean;
   onNextPage: () => void;
@@ -20,7 +20,7 @@ type HistoryCardViewProps = {
 export default function HistoryCardView({
   timelineCards,
   allPreviews,
-  isMobileView,
+  isMobile,
   isValidating,
   isDone,
   onNextPage,
@@ -112,7 +112,7 @@ export default function HistoryCardView({
                               <HistoryCard
                                 key={key}
                                 timeline={timeline}
-                                shouldAutoPlay={isMobileView}
+                                shouldAutoPlay={isMobile}
                                 relevantPreview={relevantPreview}
                                 onClick={() => {
                                   onItemSelected({

web/src/views/history/HistoryTimelineView.tsx

@@ -1,10 +1,16 @@
 import { useApiHost } from "@/api";
 import TimelineEventOverlay from "@/components/overlay/TimelineDataOverlay";
 import VideoPlayer from "@/components/player/VideoPlayer";
-import ActivityScrubber from "@/components/scrubber/ActivityScrubber";
+import ActivityScrubber, {
+  ScrubberItem,
+} from "@/components/scrubber/ActivityScrubber";
 import ActivityIndicator from "@/components/ui/activity-indicator";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { getTimelineItemDescription } from "@/utils/timelineUtil";
+import {
+  getTimelineDetectionIcon,
+  getTimelineIcon,
+} from "@/utils/timelineUtil";
+import { renderToStaticMarkup } from "react-dom/server";
 import { useCallback, useMemo, useRef, useState } from "react";
 import useSWR from "swr";
 import Player from "video.js/dist/types/player";
@@ -26,6 +32,8 @@ export default function HistoryTimelineView({
     [config]
   );
 
+  const hasRelevantPreview = playback.relevantPreview != undefined;
+
   const playerRef = useRef<Player | undefined>(undefined);
   const previewRef = useRef<Player | undefined>(undefined);
 
@@ -33,6 +41,7 @@ export default function HistoryTimelineView({
   const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
     undefined
   );
+  const [timeToSeek, setTimeToSeek] = useState<number | undefined>(undefined);
 
   const annotationOffset = useMemo(() => {
     if (!config) {
@@ -120,52 +129,78 @@ export default function HistoryTimelineView({
     [annotationOffset, recordings, playerRef]
   );
 
+  const onScrubTime = (data: { time: Date }) => {
+    if (!hasRelevantPreview) {
+      return;
+    }
+
+    if (!scrubbing) {
+      playerRef.current?.pause();
+      setScrubbing(true);
+    }
+
+    const seekTimestamp = data.time.getTime() / 1000;
+    const seekTime = seekTimestamp - playback.relevantPreview!!.start;
+    if (timeToSeek != undefined) {
+      setTimeToSeek(seekTime);
+    } else {
+      setTimeToSeek(seekTime);
+      previewRef.current?.currentTime(seekTime);
+    }
+  };
+
+  const onSeeked = () => {
+    if (timeToSeek && playerRef.current?.currentTime() != timeToSeek) {
+      playerRef.current?.currentTime(timeToSeek);
+    }
+
+    setTimeToSeek(undefined);
+  };
+
   if (!config || !recordings) {
     return <ActivityIndicator />;
   }
 
   return (
     <>
-      <div
+      <div>
-        className={
+        <div
-          isMobile ? "" : "absolute left-1/2 -translate-x-1/2 -mr-[640px]"
+          className={`relative ${
-        }
+            hasRelevantPreview && scrubbing ? "hidden" : "visible"
-      >
+          }`}
-        <div className={`w-screen 2xl:w-[1280px]`}>
+        >
-          <div className={`relative ${scrubbing ? "hidden" : "visible"}`}>
+          <VideoPlayer
-            <VideoPlayer
+            options={{
-              options={{
+              preload: "auto",
-                preload: "auto",
+              autoplay: true,
-                autoplay: true,
+              sources: [
-                sources: [
+                {
-                  {
+                  src: playbackUri,
-                    src: playbackUri,
+                  type: "application/vnd.apple.mpegurl",
-                    type: "application/vnd.apple.mpegurl",
+                },
-                  },
+              ],
-                ],
+            }}
-              }}
+            seekOptions={{ forward: 10, backward: 5 }}
-              seekOptions={{ forward: 10, backward: 5 }}
+            onReady={(player) => {
-              onReady={(player) => {
+              playerRef.current = player;
-                playerRef.current = player;
+              player.currentTime(timelineTime - parseInt(playbackTimes.start));
-                player.currentTime(
+              player.on("playing", () => {
-                  timelineTime - parseInt(playbackTimes.start)
+                setFocusedItem(undefined);
-                );
+              });
-                player.on("playing", () => {
+            }}
-                  setFocusedItem(undefined);
+            onDispose={() => {
-                });
+              playerRef.current = undefined;
-              }}
+            }}
-              onDispose={() => {
+          >
-                playerRef.current = undefined;
+            {config && focusedItem ? (
-              }}
+              <TimelineEventOverlay
-            >
+                timeline={focusedItem}
-              {config && focusedItem ? (
+                cameraConfig={config.cameras[playback.camera]}
-                <TimelineEventOverlay
+              />
-                  timeline={focusedItem}
+            ) : undefined}
-                  cameraConfig={config.cameras[playback.camera]}
+          </VideoPlayer>
-                />
+        </div>
-              ) : undefined}
+        {hasRelevantPreview && (
-            </VideoPlayer>
-          </div>
           <div className={`${scrubbing ? "visible" : "hidden"}`}>
             <VideoPlayer
               options={{
@@ -176,7 +211,7 @@ export default function HistoryTimelineView({
                 loadingSpinner: false,
                 sources: [
                   {
-                    src: `${playback.relevantPreview!!.src}`,
+                    src: `${playback.relevantPreview?.src}`,
                     type: "video/mp4",
                   },
                 ],
@@ -184,32 +219,31 @@ export default function HistoryTimelineView({
               seekOptions={{}}
               onReady={(player) => {
                 previewRef.current = player;
+                player.on("seeked", onSeeked);
               }}
               onDispose={() => {
                 previewRef.current = undefined;
               }}
             />
           </div>
+        )}
+      </div>
+      <div className="m-1">
+        {playback != undefined && (
           <ActivityScrubber
-            // @ts-ignore
             items={timelineItemsToScrubber(playback.timelineItems)}
             timeBars={[{ time: new Date(timelineTime * 1000), id: "playback" }]}
             options={{
+              ...(isMobile && {
+                start: new Date((timelineTime - 300) * 1000),
+                end: new Date((timelineTime + 300) * 1000),
+              }),
+              snap: null,
               min: new Date(parseInt(playbackTimes.start) * 1000),
               max: new Date(parseInt(playbackTimes.end) * 1000),
-              snap: null,
+              timeAxis: isMobile ? { scale: "minute" } : {},
-            }}
-            timechangeHandler={(data) => {
-              if (!scrubbing) {
-                playerRef.current?.pause();
-                setScrubbing(true);
-              }
-
-              const seekTimestamp = data.time.getTime() / 1000;
-              previewRef.current?.currentTime(
-                seekTimestamp - playback.relevantPreview!!.start
-              );
             }}
+            timechangeHandler={onScrubTime}
             timechangedHandler={(data) => {
               const playbackTime = data.time.getTime() / 1000;
               playerRef.current?.currentTime(
@@ -220,22 +254,30 @@ export default function HistoryTimelineView({
             }}
             selectHandler={onSelectItem}
           />
-        </div>
+        )}
       </div>
     </>
   );
 }
 
-function timelineItemsToScrubber(items: Timeline[]) {
+function timelineItemsToScrubber(items: Timeline[]): ScrubberItem[] {
   return items.map((item) => {
     return {
       id: item.timestamp,
-      content: `<div class="flex"><span>${getTimelineItemDescription(
+      content: getTimelineContentElement(item),
-        item
-      )}</span></div>`,
       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/tailwind.config.js

@@ -72,7 +72,8 @@ module.exports = {
       },
       screens: {
         "xs": "480px",
-        "2xl": "1400px",
+        "2xl": "1440px",
+        "3xl": "1920px",
       },
     },
   },