Further improve event loading (#10949)

* Further improve loading * Add document titles to pages * Cleanup
2024-11-21 19:07:46 +01:00 · 2024-04-12 06:31:30 -06:00 · 2024-04-12 06:31:30 -06:00 · 11dc407b36
commit 11dc407b36
parent 13cac082d5
9 changed files with 108 additions and 48 deletions
--- a/web/src/pages/ConfigEditor.tsx
+++ b/web/src/pages/ConfigEditor.tsx
@ -17,6 +17,10 @@ type SaveOptions = "saveonly" | "restart";
 function ConfigEditor() {
  const apiHost = useApiHost();

+  useEffect(() => {
+    document.title = "Config Editor - Frigate";
+  }, []);
+
  const { data: config } = useSWR<string>("config/raw");

  const { theme, systemTheme } = useTheme();
--- a/web/src/pages/Events.tsx
+++ b/web/src/pages/Events.tsx
@ -29,10 +29,20 @@ export default function Events() {
    "severity",
    "alert",
  );
+
  const [recording, setRecording] =
    useOverlayState<RecordingStartingPoint>("recording");
+
  const [startTime, setStartTime] = useState<number>();

+  useEffect(() => {
+    if (recording) {
+      document.title = "Recordings - Frigate";
+    } else {
+      document.title = `Review - Frigate`;
+    }
+  }, [recording, severity]);
+
  // review filter

  const [reviewFilter, setReviewFilter, reviewSearchParams] =
--- a/web/src/pages/Export.tsx
+++ b/web/src/pages/Export.tsx
@ -12,7 +12,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import axios from "axios";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import useSWR from "swr";

 type ExportItem = {
@ -25,6 +25,10 @@ function Export() {
    (url: string) => axios({ baseURL: baseUrl, url }).then((res) => res.data),
  );

+  useEffect(() => {
+    document.title = "Export - Frigate";
+  }, []);
+
  // Search

  const [search, setSearch] = useState("");
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@ -6,18 +6,37 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import LiveBirdseyeView from "@/views/live/LiveBirdseyeView";
 import LiveCameraView from "@/views/live/LiveCameraView";
 import LiveDashboardView from "@/views/live/LiveDashboardView";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import useSWR from "swr";

 function Live() {
  const { data: config } = useSWR<FrigateConfig>("config");

+  // selection
+
  const [selectedCameraName, setSelectedCameraName] = useHashState();
  const [cameraGroup] = usePersistedOverlayState(
    "cameraGroup",
    "default" as string,
  );

+  // document title
+
+  useEffect(() => {
+    if (selectedCameraName) {
+      const capitalized = selectedCameraName
+        .split("_")
+        .map((text) => text[0].toUpperCase() + text.substring(1));
+      document.title = `${capitalized.join(" ")} - Live - Frigate`;
+    } else if (cameraGroup && cameraGroup != "default") {
+      document.title = `${cameraGroup[0].toUpperCase()}${cameraGroup.substring(1)} - Live - Frigate`;
+    } else {
+      document.title = "Live - Frigate";
+    }
+  }, [cameraGroup, selectedCameraName]);
+
+  // settings
+
  const includesBirdseye = useMemo(() => {
    if (config && cameraGroup && cameraGroup != "default") {
      return config.camera_groups[cameraGroup].cameras.includes("birdseye");
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@ -29,6 +29,10 @@ const ngSeverity = /(GET)|(POST)|(PUT)|(PATCH)|(DELETE)/;
 function Logs() {
  const [logService, setLogService] = useState<LogType>("frigate");

+  useEffect(() => {
+    document.title = `${logService[0].toUpperCase()}${logService.substring(1)} Stats - Frigate`;
+  }, [logService]);
+
  // log data handling

  const [logRange, setLogRange] = useState<LogRange>({ start: 0, end: 0 });
--- a/web/src/pages/NoMatch.tsx
+++ b/web/src/pages/NoMatch.tsx
@ -1,6 +1,11 @@
 import Heading from "@/components/ui/heading";
+import { useEffect } from "react";

 function NoMatch() {
+  useEffect(() => {
+    document.title = "Not Found - Frigate";
+  }, []);
+
  return (
    <>
      <Heading as="h2">404</Heading>
--- a/web/src/pages/SubmitPlus.tsx
+++ b/web/src/pages/SubmitPlus.tsx
@ -20,7 +20,7 @@ import {
 import { Event } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
 import axios from "axios";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { isMobile } from "react-device-detect";
 import { FaList, FaVideo } from "react-icons/fa";
 import useSWR from "swr";
@ -28,6 +28,10 @@ import useSWR from "swr";
 export default function SubmitPlus() {
  const { data: config } = useSWR<FrigateConfig>("config");

+  useEffect(() => {
+    document.title = "Plus - Frigate";
+  }, []);
+
  // filters

  const [selectedCameras, setSelectedCameras] = useState<string[]>();
--- a/web/src/pages/System.tsx
+++ b/web/src/pages/System.tsx
@ -1,6 +1,6 @@
 import useSWR from "swr";
 import { FrigateStats } from "@/types/stats";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import TimeAgo from "@/components/dynamic/TimeAgo";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { isDesktop, isMobile } from "react-device-detect";
@ -22,6 +22,10 @@ function System() {
  const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
  const [lastUpdated, setLastUpdated] = useState<number>(Date.now() / 1000);

+  useEffect(() => {
+    document.title = `${pageToggle[0].toUpperCase()}${pageToggle.substring(1)} Stats - Frigate`;
+  }, [pageToggle]);
+
  // stats collection

  const { data: statsSnapshot } = useSWR<FrigateStats>("stats", {
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@ -290,7 +290,7 @@ export default function EventView({
            reviewItems={reviewItems}
            relevantPreviews={relevantPreviews}
            selectedReviews={selectedReviews}
-            itemsToReview={reviewCounts[severity]}
+            itemsToReview={reviewCounts[severityToggle]}
            severity={severity}
            filter={filter}
            timeRange={timeRange}
@ -533,7 +533,7 @@ function DetectionReview({
            className="absolute left-1/2 -translate-x-1/2 z-50 pointer-events-none"
            contentRef={contentRef}
            reviewItems={currentItems}
-            itemsToReview={itemsToReview}
+            itemsToReview={loading ? 0 : itemsToReview}
            pullLatestData={pullLatestData}
          />
        )}
@ -544,7 +544,7 @@ function DetectionReview({
          </div>
        )}

-        {currentItems?.length === 0 && (
+        {!loading && currentItems?.length === 0 && (
          <div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 flex flex-col justify-center items-center text-center">
            <LuFolderCheck className="size-16" />
            There are no {severity.replace(/_/g, " ")}s to review
@ -555,50 +555,56 @@ function DetectionReview({
          className="w-full mx-2 px-1 grid sm:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4"
          ref={contentRef}
        >
-          {currentItems &&
-            currentItems.map((value) => {
-              const selected = selectedReviews.includes(value.id);
+          {!loading && currentItems
+            ? currentItems.map((value) => {
+                const selected = selectedReviews.includes(value.id);

-              return (
-                <div
-                  key={value.id}
-                  ref={minimapRef}
-                  data-start={value.start_time}
-                  data-segment-start={
-                    alignStartDateToTimeline(value.start_time) - segmentDuration
-                  }
-                  className="review-item relative rounded-lg"
-                >
-                  <div className="aspect-video rounded-lg overflow-hidden">
-                    <PreviewThumbnailPlayer
-                      review={value}
-                      allPreviews={relevantPreviews}
-                      timeRange={timeRange}
-                      setReviewed={markItemAsReviewed}
-                      scrollLock={scrollLock}
-                      onTimeUpdate={onPreviewTimeUpdate}
-                      onClick={onSelectReview}
+                return (
+                  <div
+                    key={value.id}
+                    ref={minimapRef}
+                    data-start={value.start_time}
+                    data-segment-start={
+                      alignStartDateToTimeline(value.start_time) -
+                      segmentDuration
+                    }
+                    className="review-item relative rounded-lg"
+                  >
+                    <div className="aspect-video rounded-lg overflow-hidden">
+                      <PreviewThumbnailPlayer
+                        review={value}
+                        allPreviews={relevantPreviews}
+                        timeRange={timeRange}
+                        setReviewed={markItemAsReviewed}
+                        scrollLock={scrollLock}
+                        onTimeUpdate={onPreviewTimeUpdate}
+                        onClick={onSelectReview}
+                      />
+                    </div>
+                    <div
+                      className={`review-item-ring pointer-events-none z-10 absolute rounded-lg inset-0 size-full -outline-offset-[2.8px] outline outline-[3px] ${selected ? `outline-severity_${value.severity} shadow-severity_${value.severity}` : "outline-transparent duration-500"}`}
                    />
                  </div>
-                  <div
-                    className={`review-item-ring pointer-events-none z-10 absolute rounded-lg inset-0 size-full -outline-offset-[2.8px] outline outline-[3px] ${selected ? `outline-severity_${value.severity} shadow-severity_${value.severity}` : "outline-transparent duration-500"}`}
-                  />
-                </div>
-              );
-            })}
-          {(currentItems?.length ?? 0) > 0 && (itemsToReview ?? 0) > 0 && (
-            <div className="col-span-full flex justify-center items-center">
-              <Button
-                className="text-white"
-                variant="select"
-                onClick={() => {
-                  markAllItemsAsReviewed(currentItems ?? []);
-                }}
-              >
-                Mark these items as reviewed
-              </Button>
-            </div>
-          )}
+                );
+              })
+            : Array(itemsToReview)
+                .fill(0)
+                .map(() => <Skeleton className="size-full aspect-video" />)}
+          {!loading &&
+            (currentItems?.length ?? 0) > 0 &&
+            (itemsToReview ?? 0) > 0 && (
+              <div className="col-span-full flex justify-center items-center">
+                <Button
+                  className="text-white"
+                  variant="select"
+                  onClick={() => {
+                    markAllItemsAsReviewed(currentItems ?? []);
+                  }}
+                >
+                  Mark these items as reviewed
+                </Button>
+              </div>
+            )}
        </div>
      </div>
      <div className="w-[65px] md:w-[110px] flex flex-row">