Further improve event loading (#10949)

* Further improve loading

* Add document titles to pages

* Cleanup

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();

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] =

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("");

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");

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 });

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>

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[]>();

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", {