Implement seeking limiter

2026-02-07 03:35:26 +03:00 · 2023-12-21 16:11:30 -07:00 · 2023-12-21 16:11:30 -07:00 · 6850637343
commit 6850637343
parent 25f37eea34
9 changed files with 261 additions and 73 deletions
--- a/web/package-lock.json
+++ b/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",
--- a/web/package.json
+++ b/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",
--- a/web/src/components/scrubber/ActivityScrubber.tsx
+++ b/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;
--- a/web/src/components/ui/drawer.tsx
+++ b/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,
+}
--- a/web/src/pages/History.tsx
+++ b/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
--- a/web/src/utils/timelineUtil.tsx
+++ b/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)
--- a/web/src/views/history/HistoryCardView.tsx
+++ b/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({
--- a/web/src/views/history/HistoryTimelineView.tsx
+++ b/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
-        className={
-          isMobile ? "" : "absolute left-1/2 -translate-x-1/2 -mr-[640px]"
-        }
-      >
-        <div className={`w-screen 2xl:w-[1280px]`}>
-          <div className={`relative ${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 - parseInt(playbackTimes.start)
-                );
-                player.on("playing", () => {
-                  setFocusedItem(undefined);
-                });
-              }}
-              onDispose={() => {
-                playerRef.current = undefined;
-              }}
-            >
-              {config && focusedItem ? (
-                <TimelineEventOverlay
-                  timeline={focusedItem}
-                  cameraConfig={config.cameras[playback.camera]}
-                />
-              ) : undefined}
-            </VideoPlayer>
-          </div>
+      <div>
+        <div
+          className={`relative ${
+            hasRelevantPreview && 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 - parseInt(playbackTimes.start));
+              player.on("playing", () => {
+                setFocusedItem(undefined);
+              });
+            }}
+            onDispose={() => {
+              playerRef.current = undefined;
+            }}
+          >
+            {config && focusedItem ? (
+              <TimelineEventOverlay
+                timeline={focusedItem}
+                cameraConfig={config.cameras[playback.camera]}
+              />
+            ) : undefined}
+          </VideoPlayer>
+        </div>
+        {hasRelevantPreview && (
          <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,
-            }}
-            timechangeHandler={(data) => {
-              if (!scrubbing) {
-                playerRef.current?.pause();
-                setScrubbing(true);
-              }
-
-              const seekTimestamp = data.time.getTime() / 1000;
-              previewRef.current?.currentTime(
-                seekTimestamp - playback.relevantPreview!!.start
-              );
+              timeAxis: isMobile ? { scale: "minute" } : {},
            }}
+            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(
-        item
-      )}</span></div>`,
+      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;
+}
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@ -72,7 +72,8 @@ module.exports = {
      },
      screens: {
        "xs": "480px",
-        "2xl": "1400px",
+        "2xl": "1440px",
+        "3xl": "1920px",
      },
    },
  },