Review segment UI (#9945)

* Add ui for events

* Display data for review items

* Use preview thumbnails

* Implement paging

* Show icons for what was detected

* Show progress bar on preview thumbnail

* Hide the overlays on hover and update reviewed status

* Dim previews that have been reviewed

* Show audio icons

* Cleanup preview thumb player

* initial implementation of review timeline

* Use timeout for hover playback

* Break apart mobile and desktop views

* Show icons for sub labels

* autoplay first video on mobile

* Only show the last 24 hours by default

* Rework scrolling to fix nested scrolling

* Final scroll cleanups

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

web/src/pages/Events.tsx

@@ -0,0 +1,11 @@
+import DesktopEventView from "@/views/events/DesktopEventView";
+import MobileEventView from "@/views/events/MobileEventView";
+import { isMobile } from 'react-device-detect';
+
+export default function Events() {
+  if (isMobile) {
+    return <MobileEventView />;
+  }
+
+  return <DesktopEventView />;
+}

web/src/pages/Live.tsx

@@ -5,8 +5,8 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Event as FrigateEvent } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { isSafari } from "@/utils/browserUtil";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { isSafari } from "react-device-detect";
 import useSWR from "swr";
 
 function Live() {
@@ -65,7 +65,6 @@ function Live() {
       .sort((aConf, bConf) => aConf.ui.order - bConf.ui.order);
   }, [config]);
 
-  const safari = isSafari();
   const [windowVisible, setWindowVisible] = useState(true);
   const visibilityListener = useCallback(() => {
     setWindowVisible(document.visibilityState == "visible");
@@ -80,7 +79,7 @@ function Live() {
   }, []);
 
   return (
-    <>
+    <div className="w-full h-full overflow-scroll">
       {events && events.length > 0 && (
         <ScrollArea>
           <TooltipProvider>
@@ -111,12 +110,12 @@ function Live() {
               className={`mb-2 md:mb-0 rounded-2xl bg-black ${grow}`}
               windowVisible={windowVisible}
               cameraConfig={camera}
-              preferredLiveMode={safari ? "webrtc" : "mse"}
+              preferredLiveMode={isSafari ? "webrtc" : "mse"}
             />
           );
         })}
       </div>
-    </>
+    </div>
   );
 }
 

web/src/pages/Logs.tsx

@@ -41,7 +41,7 @@ function Logs() {
   }, [logs]);
 
   return (
-    <>
+    <div className="relative w-full h-full overflow-hidden">
       <div className="flex justify-between items-center">
         <Heading className="first:mt-2" as="h2">
           Logs
@@ -76,10 +76,10 @@ function Logs() {
         </div>
       </div>
 
-      <div className="overflow-auto font-mono text-sm bg-secondary rounded my-2 p-2 whitespace-pre-wrap">
+      <div className="absolute left-0 top-16 bottom-2 right-2 overflow-auto font-mono text-sm bg-secondary rounded p-2 whitespace-pre-wrap">
         {logs}
       </div>
-    </>
+    </div>
   );
 }
 

web/src/pages/site-navigation.ts

@@ -1,34 +1,34 @@
 import {
-    LuConstruction,
-    LuFileUp,
-    LuFilm,
-    LuVideo,
-  } from "react-icons/lu";
+  LuConstruction,
+  LuFileUp,
+  LuFlag,
+  LuVideo,
+} from "react-icons/lu";
 
 export const navbarLinks = [
-    {
-      id: 1,
-      icon: LuVideo,
-      title: "Live",
-      url: "/",
-    },
-    {
-      id: 2,
-      icon: LuFilm,
-      title: "History",
-      url: "/history",
-    },
-    {
-      id: 3,
-      icon: LuFileUp,
-      title: "Export",
-      url: "/export",
-    },
-    {
-      id: 4,
-      icon: LuConstruction,
-      title: "UI Playground",
-      url: "/playground",
-      dev: true,
-    },
-  ];
+  {
+    id: 1,
+    icon: LuVideo,
+    title: "Live",
+    url: "/",
+  },
+  {
+    id: 2,
+    icon: LuFlag,
+    title: "Events",
+    url: "/events",
+  },
+  {
+    id: 3,
+    icon: LuFileUp,
+    title: "Export",
+    url: "/export",
+  },
+  {
+    id: 4,
+    icon: LuConstruction,
+    title: "UI Playground",
+    url: "/playground",
+    dev: true,
+  },
+];