Improve review grid (#8953)

* Use constant aspect ratio for review grid * Add infinite scrolling * Don't have horizontal scrolling * Handle autoplay for mobile * Load more efficiently
2024-11-21 19:07:46 +01:00 · 2023-12-13 20:15:28 -07:00 · 2023-12-13 20:15:28 -07:00 · fbe58652d5
commit fbe58652d5
parent 1961a0afc1
7 changed files with 305 additions and 161 deletions
--- a/web-new/src/components/card/HistoryCard.tsx
+++ b/web-new/src/components/card/HistoryCard.tsx
@ -21,12 +21,14 @@ import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";

 type HistoryCardProps = {
  timeline: Card;
-  allPreviews?: Preview[];
+  relevantPreview?: Preview;
+  shouldAutoPlay: boolean;
 };

 export default function HistoryCard({
-  allPreviews,
+  relevantPreview,
  timeline,
+  shouldAutoPlay,
 }: HistoryCardProps) {
  const { data: config } = useSWR<FrigateConfig>("config");

@ -35,11 +37,13 @@ export default function HistoryCard({
  }

  return (
-    <Card className="my-2 mr-2 bg-secondary">
+    <Card className="my-2 xs:mr-2 bg-secondary w-full xs:w-[48%] sm:w-[284px]">
      <PreviewThumbnailPlayer
        camera={timeline.camera}
-        allPreviews={allPreviews || []}
+        relevantPreview={relevantPreview}
        startTs={Object.values(timeline.entries)[0].timestamp}
+        eventId={Object.values(timeline.entries)[0].source_id}
+        shouldAutoPlay={shouldAutoPlay}
      />
      <div className="p-2">
        <div className="text-sm flex">
--- a/web-new/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web-new/src/components/player/PreviewThumbnailPlayer.tsx
@ -1,36 +1,40 @@
 import { FrigateConfig } from "@/types/frigateConfig";
 import VideoPlayer from "./VideoPlayer";
 import useSWR from "swr";
-import { useCallback, useMemo, useRef } from "react";
+import { useCallback, useRef } from "react";
 import { useApiHost } from "@/api";
 import Player from "video.js/dist/types/player";
+import { AspectRatio } from "../ui/aspect-ratio";

 type PreviewPlayerProps = {
-    camera: string,
-    allPreviews: Preview[],
-    startTs: number,
-}
+  camera: string;
+  relevantPreview?: Preview;
+  startTs: number;
+  eventId: string;
+  shouldAutoPlay: boolean;
+};

 type Preview = {
-    camera: string,
-    src: string,
-    type: string,
-    start: number,
-    end: number,
-}
+  camera: string;
+  src: string;
+  type: string;
+  start: number;
+  end: number;
+};

-export default function PreviewThumbnailPlayer({ camera, allPreviews, startTs }: PreviewPlayerProps) {
-    const { data: config } = useSWR('config');
+export default function PreviewThumbnailPlayer({
+  camera,
+  relevantPreview,
+  startTs,
+  eventId,
+  shouldAutoPlay,
+}: PreviewPlayerProps) {
+  const { data: config } = useSWR("config");
  const playerRef = useRef<Player | null>(null);
  const apiHost = useApiHost();

-    const relevantPreview = useMemo(() => {
-      return Object.values(allPreviews || []).find(
-        (preview) => preview.camera == camera && preview.start < startTs && preview.end > startTs
-      );
-    }, [allPreviews, camera, startTs]);
-
-    const onHover = useCallback((isHovered: Boolean) => {
+  const onPlayback = useCallback(
+    (isHovered: Boolean) => {
      if (!relevantPreview || !playerRef.current) {
        return;
      }
@ -45,21 +49,74 @@ export default function PreviewThumbnailPlayer({ camera, allPreviews, startTs }:
    [relevantPreview, startTs]
  );

+  const observer = useRef<IntersectionObserver | null>();
+  const inViewRef = useCallback(
+    (node: HTMLElement | null) => {
+      if (!shouldAutoPlay || observer.current) {
+        return;
+      }
+
+      try {
+        observer.current = new IntersectionObserver(
+          (entries) => {
+            if (entries[0].isIntersecting) {
+              onPlayback(true);
+            } else {
+              onPlayback(false);
+            }
+          },
+          { threshold: 1.0 }
+        );
+        if (node) observer.current.observe(node);
+      } catch (e) {
+        // no op
+      }
+    },
+    [observer, onPlayback]
+  );
+
  if (!relevantPreview) {
+    if (isCurrentHour(startTs)) {
      return (
-        <img className={getThumbWidth(camera, config)} src={`${apiHost}api/preview/${camera}/${startTs}/thumbnail.jpg`} />
+        <AspectRatio
+          ratio={16 / 9}
+          className="bg-black flex justify-center items-center"
+        >
+          <img
+            className={`${getPreviewWidth(camera, config)}`}
+            loading="lazy"
+            src={`${apiHost}api/preview/${camera}/${startTs}/thumbnail.jpg`}
+          />
+        </AspectRatio>
      );
    }

    return (
-      <div
-        className={getThumbWidth(camera, config)}
-        onMouseEnter={() => onHover(true)}
-        onMouseLeave={() => onHover(false)}
+      <AspectRatio
+        ratio={16 / 9}
+        className="bg-black flex justify-center items-center"
      >
+        <img
+          className="w-[160px]"
+          loading="lazy"
+          src={`${apiHost}api/events/${eventId}/thumbnail.jpg`}
+        />
+      </AspectRatio>
+    );
+  }
+
+  return (
+    <AspectRatio
+      ref={shouldAutoPlay ? inViewRef : null}
+      ratio={16 / 9}
+      className="bg-black flex justify-center items-center"
+      onMouseEnter={() => onPlayback(true)}
+      onMouseLeave={() => onPlayback(false)}
+    >
+      <div className={`${getPreviewWidth(camera, config)}`}>
        <VideoPlayer
          options={{
-            preload: 'auto',
+            preload: "auto",
            autoplay: false,
            controls: false,
            muted: true,
@ -67,7 +124,7 @@ export default function PreviewThumbnailPlayer({ camera, allPreviews, startTs }:
            sources: [
              {
                src: `${relevantPreview.src}`,
-                type: 'video/mp4',
+                type: "video/mp4",
              },
            ],
          }}
@ -82,18 +139,22 @@ export default function PreviewThumbnailPlayer({ camera, allPreviews, startTs }:
          }}
        />
      </div>
+    </AspectRatio>
  );
 }

-function getThumbWidth(camera: string, config: FrigateConfig) {
-const detect = config.cameras[camera].detect;
-if (detect.width / detect.height > 2) {
-    return 'w-[320px]';
+function isCurrentHour(timestamp: number) {
+  const now = new Date();
+  now.setMinutes(0, 0, 0);
+  return timestamp > now.getTime() / 1000;
 }

+function getPreviewWidth(camera: string, config: FrigateConfig) {
+  const detect = config.cameras[camera].detect;
+
  if (detect.width / detect.height < 1.4) {
-    return 'w-[200px]';
+    return "w-[208px]";
  }

-return 'w-[240px]';
+  return "w-full";
 }
--- a/web-new/src/components/player/VideoPlayer.tsx
+++ b/web-new/src/components/player/VideoPlayer.tsx
@ -44,7 +44,7 @@ export default function VideoPlayer({ children, options, seekOptions = {forward:
        videoElement.classList.add('small-player');
        videoElement.classList.add('video-js');
        videoElement.classList.add('vjs-default-skin');
-        videoRef.current.appendChild(videoElement);
+        videoRef.current?.appendChild(videoElement);

        const player = playerRef.current = videojs(videoElement, { ...defaultOptions, ...options }, () => {
          onReady && onReady(player);
--- a/web-new/src/pages/History.tsx
+++ b/web-new/src/pages/History.tsx
@ -1,11 +1,14 @@
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import useSWR from "swr";
+import useSWRInfinite from "swr/infinite";
 import { FrigateConfig } from "@/types/frigateConfig";
 import Heading from "@/components/ui/heading";
 import ActivityIndicator from "@/components/ui/activity-indicator";
 import HistoryCard from "@/components/card/HistoryCard";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
+import axios from "axios";
+
+const API_LIMIT = 100;

 function History() {
  const { data: config } = useSWR<FrigateConfig>("config");
@ -14,13 +17,35 @@ function History() {
      config?.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
    [config]
  );
-  const { data: hourlyTimeline } = useSWR<HourlyTimeline>([
-    "timeline/hourly",
-    { timezone },
-  ]);
+  const timelineFetcher = useCallback((key: any) => {
+    const [path, params] = Array.isArray(key) ? key : [key, undefined];
+    return axios.get(path, { params }).then((res) => res.data);
+  }, []);
+
+  const getKey = useCallback((index: number, prevData: HourlyTimeline) => {
+    if (index > 0) {
+      const lastDate = prevData.end;
+      const pagedParams = { before: lastDate, timezone, limit: API_LIMIT };
+      return ["timeline/hourly", pagedParams];
+    }
+
+    return ["timeline/hourly", { timezone, limit: API_LIMIT }];
+  }, []);
+
+  const shouldAutoPlay = useMemo(() => {
+    return window.innerWidth < 480;
+  }, []);
+
+  const {
+    data: timelinePages,
+    mutate,
+    size,
+    setSize,
+    isValidating,
+  } = useSWRInfinite<HourlyTimeline>(getKey, timelineFetcher);
  const { data: allPreviews } = useSWR<Preview[]>(
-    `preview/all/start/${hourlyTimeline?.start || 0}/end/${
-      hourlyTimeline?.end || 0
+    `preview/all/start/${(timelinePages ?? [])?.at(0)?.start ?? 0}/end/${
+      (timelinePages ?? [])?.at(-1)?.end ?? 0
    }`,
    { revalidateOnFocus: false }
  );
@ -30,11 +55,12 @@ function History() {
  );

  const timelineCards: CardsData | never[] = useMemo(() => {
-    if (!hourlyTimeline) {
+    if (!timelinePages) {
      return [];
    }

    const cards: CardsData = {};
+    timelinePages.forEach((hourlyTimeline) => {
      Object.keys(hourlyTimeline["hours"])
        .reverse()
        .forEach((hour) => {
@ -74,9 +100,13 @@ function History() {
              if (
                source_to_types[`${i.source_id}-${time.getMinutes()}`].length >
                  1 &&
-              ["active", "attribute", "gone", "stationary", "visible"].includes(
-                i.class_type
-              )
+                [
+                  "active",
+                  "attribute",
+                  "gone",
+                  "stationary",
+                  "visible",
+                ].includes(i.class_type)
              ) {
                add = false;
              }
@ -103,11 +133,35 @@ function History() {
            }
          });
        });
+    });

    return cards;
-  }, [detailLevel, hourlyTimeline]);
+  }, [detailLevel, timelinePages]);

-  if (!config || !timelineCards) {
+  const isDone =
+    (timelinePages?.[timelinePages.length - 1]?.count ?? 0) < API_LIMIT;
+
+  // hooks for infinite scroll
+  const observer = useRef<IntersectionObserver | null>();
+  const lastTimelineRef = useCallback(
+    (node: HTMLElement | null) => {
+      if (isValidating) return;
+      if (observer.current) observer.current.disconnect();
+      try {
+        observer.current = new IntersectionObserver((entries) => {
+          if (entries[0].isIntersecting && !isDone) {
+            setSize(size + 1);
+          }
+        });
+        if (node) observer.current.observe(node);
+      } catch (e) {
+        // no op
+      }
+    },
+    [size, setSize, isValidating, isDone]
+  );
+
+  if (!config || !timelineCards ||timelineCards.length == 0) {
    return <ActivityIndicator />;
  }

@ -121,7 +175,7 @@ function History() {
      <div>
        {Object.entries(timelineCards)
          .reverse()
-          .map(([day, timelineDay]) => {
+          .map(([day, timelineDay], dayIdx) => {
            return (
              <div key={day}>
                <Heading as="h3">
@ -129,37 +183,58 @@ function History() {
                    strftime_fmt: "%A %b %d",
                  })}
                </Heading>
-                {Object.entries(timelineDay).map(([hour, timelineHour]) => {
+                {Object.entries(timelineDay).map(
+                  ([hour, timelineHour], hourIdx) => {
                    if (Object.values(timelineHour).length == 0) {
-                    return <></>;
+                      return <div key={hour}></div>;
                    }

+                    const lastRow =
+                      dayIdx == Object.values(timelineCards).length - 1 &&
+                      hourIdx == Object.values(timelineDay).length - 1;
+                    const previewMap: { [key: string]: Preview | undefined } =
+                      {};
+
                    return (
-                    <div key={hour}>
+                      <div key={hour} ref={lastRow ? lastTimelineRef : null}>
                        <Heading as="h4">
                          {formatUnixTimestampToDateTime(parseInt(hour), {
                            strftime_fmt: "%I:00",
                          })}
                        </Heading>
-                      <ScrollArea>
-                        <div className="flex">
+
+                        <div className="flex flex-wrap">
                          {Object.entries(timelineHour).map(
                            ([key, timeline]) => {
+                              const startTs = Object.values(timeline.entries)[0]
+                                .timestamp;
+                              let relevantPreview = previewMap[timeline.camera];
+
+                              if (relevantPreview == undefined) {
+                                relevantPreview = previewMap[timeline.camera] =
+                                  Object.values(allPreviews || []).find(
+                                    (preview) =>
+                                      preview.camera == timeline.camera &&
+                                      preview.start < startTs &&
+                                      preview.end > startTs
+                                  );
+                              }
                              return (
                                <HistoryCard
                                  key={key}
                                  timeline={timeline}
-                                  allPreviews={allPreviews}
+                                  shouldAutoPlay={shouldAutoPlay}
+                                  relevantPreview={relevantPreview}
                                />
                              );
                            }
                          )}
                        </div>
-                        <ScrollBar className="m-2" orientation="horizontal" />
-                      </ScrollArea>
+                        {lastRow && <ActivityIndicator />}
                      </div>
                    );
-                })}
+                  }
+                )}
              </div>
            );
          })}
--- a/web-new/src/utils/dateUtil.ts
+++ b/web-new/src/utils/dateUtil.ts
@ -105,7 +105,7 @@ const getResolvedTimeZone = () => {
 */
 export const formatUnixTimestampToDateTime = (unixTimestamp: number, config: UiConfig): string => {
  const { timezone, time_format, date_style, time_style, strftime_fmt } = config;
-  const locale = window.navigator?.language || 'en-us';
+  const locale = window.navigator?.language || 'en-US';
  if (isNaN(unixTimestamp)) {
    return 'Invalid time';
  }
@ -117,7 +117,7 @@ export const formatUnixTimestampToDateTime = (unixTimestamp: number, config: UiC
    // use strftime_fmt if defined in config
    if (strftime_fmt) {
      const offset = getUTCOffset(date, timezone || resolvedTimeZone);
-      const strftime_locale = strftime.timezone(offset).localizeByIdentifier(locale);
+      const strftime_locale = strftime.timezone(offset);
      return strftime_locale(strftime_fmt, date);
    }

--- a/web-new/tailwind.config.js
+++ b/web-new/tailwind.config.js
@ -70,6 +70,10 @@ module.exports = {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
+      screens: {
+        "xs": "480px",
+        "2xl": "1400px",
+      },
    },
  },
  plugins: [require("tailwindcss-animate")],
--- a/web-new/vite.config.ts
+++ b/web-new/vite.config.ts
@ -12,24 +12,24 @@ export default defineConfig({
  server: {
    proxy: {
      '/api': {
-        target: 'http://localhost:5000',
+        target: 'http://192.168.50.106:5000',
        ws: true,
      },
      '/vod': {
-        target: 'http://localhost:5000'
+        target: 'http://192.168.50.106:5000'
      },
      '/clips': {
-        target: 'http://localhost:5000'
+        target: 'http://192.168.50.106:5000'
      },
      '/exports': {
-        target: 'http://localhost:5000'
+        target: 'http://192.168.50.106:5000'
      },
      '/ws': {
-        target: 'ws://localhost:5000',
+        target: 'ws://192.168.50.106:5000',
        ws: true,
      },
      '/live': {
-        target: 'ws://localhost:5000',
+        target: 'ws://192.168.50.106:5000',
        changeOrigin: true,
        ws: true,
      },