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,65 +1,122 @@
 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');
-    const playerRef = useRef<Player | null>(null);
-    const apiHost = useApiHost();
+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 onPlayback = useCallback(
+    (isHovered: Boolean) => {
+      if (!relevantPreview || !playerRef.current) {
+        return;
+      }

-    const onHover = useCallback((isHovered: Boolean) => {
-        if (!relevantPreview || !playerRef.current) {
-            return;
-        }
+      if (isHovered) {
+        playerRef.current.play();
+      } else {
+        playerRef.current.pause();
+        playerRef.current.currentTime(startTs - relevantPreview.start);
+      }
+    },
+    [relevantPreview, startTs]
+  );

-        if (isHovered) {
-          playerRef.current.play();
-        } else {
-          playerRef.current.pause();
-          playerRef.current.currentTime(startTs - relevantPreview.start);
-        }
-      },
-      [relevantPreview, startTs]
-    );
+  const observer = useRef<IntersectionObserver | null>();
+  const inViewRef = useCallback(
+    (node: HTMLElement | null) => {
+      if (!shouldAutoPlay || observer.current) {
+        return;
+      }

-    if (!relevantPreview) {
+      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 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-[208px]";
  }

-function getThumbWidth(camera: string, config: FrigateConfig) {
-const detect = config.cameras[camera].detect;
-if (detect.width / detect.height > 2) {
-    return 'w-[320px]';
+  return "w-full";
 }
-
-if (detect.width / detect.height < 1.4) {
-    return 'w-[200px]';
-}
-
-return 'w-[240px]';
-}
--- 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,84 +55,113 @@ function History() {
  );

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

    const cards: CardsData = {};
-    Object.keys(hourlyTimeline["hours"])
-      .reverse()
-      .forEach((hour) => {
-        const day = new Date(parseInt(hour) * 1000);
-        day.setHours(0, 0, 0, 0);
-        const dayKey = (day.getTime() / 1000).toString();
-        const source_to_types: { [key: string]: string[] } = {};
-        Object.values(hourlyTimeline["hours"][hour]).forEach((i) => {
-          const time = new Date(i.timestamp * 1000);
-          time.setSeconds(0);
-          time.setMilliseconds(0);
-          const key = `${i.source_id}-${time.getMinutes()}`;
-          if (key in source_to_types) {
-            source_to_types[key].push(i.class_type);
-          } else {
-            source_to_types[key] = [i.class_type];
-          }
-        });
-
-        if (!Object.keys(cards).includes(dayKey)) {
-          cards[dayKey] = {};
-        }
-        cards[dayKey][hour] = {};
-        Object.values(hourlyTimeline["hours"][hour]).forEach((i) => {
-          const time = new Date(i.timestamp * 1000);
-          const key = `${i.camera}-${time.getMinutes()}`;
-
-          // detail level for saving items
-          // detail level determines which timeline items for each moment is returned
-          // values can be normal, extra, or full
-          // normal: return all items except active / attribute / gone / stationary / visible unless that is the only item.
-          // extra: return all items except attribute / gone / visible unless that is the only item
-          // full: return all items
-
-          let add = true;
-          if (detailLevel == "normal") {
-            if (
-              source_to_types[`${i.source_id}-${time.getMinutes()}`].length >
-                1 &&
-              ["active", "attribute", "gone", "stationary", "visible"].includes(
-                i.class_type
-              )
-            ) {
-              add = false;
-            }
-          } else if (detailLevel == "extra") {
-            if (
-              source_to_types[`${i.source_id}-${time.getMinutes()}`].length >
-                1 &&
-              i.class_type in ["attribute", "gone", "visible"]
-            ) {
-              add = false;
-            }
-          }
-
-          if (add) {
-            if (key in cards[dayKey][hour]) {
-              cards[dayKey][hour][key].entries.push(i);
+    timelinePages.forEach((hourlyTimeline) => {
+      Object.keys(hourlyTimeline["hours"])
+        .reverse()
+        .forEach((hour) => {
+          const day = new Date(parseInt(hour) * 1000);
+          day.setHours(0, 0, 0, 0);
+          const dayKey = (day.getTime() / 1000).toString();
+          const source_to_types: { [key: string]: string[] } = {};
+          Object.values(hourlyTimeline["hours"][hour]).forEach((i) => {
+            const time = new Date(i.timestamp * 1000);
+            time.setSeconds(0);
+            time.setMilliseconds(0);
+            const key = `${i.source_id}-${time.getMinutes()}`;
+            if (key in source_to_types) {
+              source_to_types[key].push(i.class_type);
            } else {
-              cards[dayKey][hour][key] = {
-                camera: i.camera,
-                time: time.getTime() / 1000,
-                entries: [i],
-              };
+              source_to_types[key] = [i.class_type];
            }
+          });
+
+          if (!Object.keys(cards).includes(dayKey)) {
+            cards[dayKey] = {};
          }
+          cards[dayKey][hour] = {};
+          Object.values(hourlyTimeline["hours"][hour]).forEach((i) => {
+            const time = new Date(i.timestamp * 1000);
+            const key = `${i.camera}-${time.getMinutes()}`;
+
+            // detail level for saving items
+            // detail level determines which timeline items for each moment is returned
+            // values can be normal, extra, or full
+            // normal: return all items except active / attribute / gone / stationary / visible unless that is the only item.
+            // extra: return all items except attribute / gone / visible unless that is the only item
+            // full: return all items
+
+            let add = true;
+            if (detailLevel == "normal") {
+              if (
+                source_to_types[`${i.source_id}-${time.getMinutes()}`].length >
+                  1 &&
+                [
+                  "active",
+                  "attribute",
+                  "gone",
+                  "stationary",
+                  "visible",
+                ].includes(i.class_type)
+              ) {
+                add = false;
+              }
+            } else if (detailLevel == "extra") {
+              if (
+                source_to_types[`${i.source_id}-${time.getMinutes()}`].length >
+                  1 &&
+                i.class_type in ["attribute", "gone", "visible"]
+              ) {
+                add = false;
+              }
+            }
+
+            if (add) {
+              if (key in cards[dayKey][hour]) {
+                cards[dayKey][hour][key].entries.push(i);
+              } else {
+                cards[dayKey][hour][key] = {
+                  camera: i.camera,
+                  time: time.getTime() / 1000,
+                  entries: [i],
+                };
+              }
+            }
+          });
        });
-      });
+    });

    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]) => {
-                  if (Object.values(timelineHour).length == 0) {
-                    return <></>;
-                  }
+                {Object.entries(timelineDay).map(
+                  ([hour, timelineHour], hourIdx) => {
+                    if (Object.values(timelineHour).length == 0) {
+                      return <div key={hour}></div>;
+                    }

-                  return (
-                    <div key={hour}>
-                      <Heading as="h4">
-                        {formatUnixTimestampToDateTime(parseInt(hour), {
-                          strftime_fmt: "%I:00",
-                        })}
-                      </Heading>
-                      <ScrollArea>
-                        <div className="flex">
+                    const lastRow =
+                      dayIdx == Object.values(timelineCards).length - 1 &&
+                      hourIdx == Object.values(timelineDay).length - 1;
+                    const previewMap: { [key: string]: Preview | undefined } =
+                      {};
+
+                    return (
+                      <div key={hour} ref={lastRow ? lastTimelineRef : null}>
+                        <Heading as="h4">
+                          {formatUnixTimestampToDateTime(parseInt(hour), {
+                            strftime_fmt: "%I:00",
+                          })}
+                        </Heading>
+
+                        <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>
-                    </div>
-                  );
-                })}
+                        {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,
      },