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/utils/browserUtil.ts

@@ -1,7 +0,0 @@
-import { useMemo } from "react";
-
-export function isSafari() {
-  return useMemo(() => {
-    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-  }, []);
-}

web/src/utils/iconUtil.tsx

@@ -0,0 +1,49 @@
+import { BsPersonWalking } from "react-icons/bs";
+import {
+  FaAmazon,
+  FaCarSide,
+  FaCat,
+  FaDog,
+  FaFedex,
+  FaFire,
+  FaUps,
+} from "react-icons/fa";
+import { LuBox, LuLassoSelect } from "react-icons/lu";
+import { MdRecordVoiceOver } from "react-icons/md";
+
+export function getIconForLabel(label: string, className?: string) {
+  switch (label) {
+    case "car":
+      return <FaCarSide key={label} className={className} />;
+    case "cat":
+      return <FaCat key={label} className={className} />;
+    case "bark":
+    case "dog":
+      return <FaDog key={label} className={className} />;
+    case "fire_alarm":
+      return <FaFire key={label} className={className} />;
+    case "package":
+      return <LuBox key={label} className={className} />;
+    case "person":
+      return <BsPersonWalking key={label} className={className} />;
+    case "crying":
+    case "laughter":
+    case "scream":
+    case "speech":
+    case "yell":
+      return <MdRecordVoiceOver key={label} className={className} />;
+    default:
+      return <LuLassoSelect key={label} className={className} />;
+  }
+}
+
+export function getIconForSubLabel(label: string, className?: string) {
+  switch (label) {
+    case "amazon":
+      return <FaAmazon key={label} className={className} />;
+    case "fedex":
+      return <FaFedex key={label} className={className} />;
+    case "ups":
+      return <FaUps key={label} className={className} />;
+  }
+}