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