Ui Tweaks (#10920)

* Cleanup live activity indicators for cameras

* Rename to reviews and redirect events to reviews

* Use reviews

* Remove plural

* Simplify recordings view

* Adjust icon

web/src/App.tsx

@@ -7,6 +7,7 @@ import { isDesktop, isMobile } from "react-device-detect";
 import Statusbar from "./components/Statusbar";
 import Bottombar from "./components/navigation/Bottombar";
 import { Suspense, lazy } from "react";
+import { Redirect } from "./components/navigation/Redirect";
 
 const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
@@ -35,7 +36,8 @@ function App() {
               <Suspense>
                 <Routes>
                   <Route path="/" element={<Live />} />
-                  <Route path="/events" element={<Events />} />
+                  <Route path="/events" element={<Redirect to="/review" />} />
+                  <Route path="/review" element={<Events />} />
                   <Route path="/export" element={<Export />} />
                   <Route path="/plus" element={<SubmitPlus />} />
                   <Route path="/system" element={<System />} />

web/src/components/card/AnimatedEventCard.tsx

@@ -20,7 +20,7 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
 
   const navigate = useNavigate();
   const onOpenReview = useCallback(() => {
-    navigate("events", {
+    navigate("review", {
       state: {
         severity: event.severity,
         recording: {

web/src/components/navigation/Redirect.tsx

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+type RedirectProps = {
+  to: string;
+};
+export function Redirect({ to }: RedirectProps) {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    navigate(to);
+  }, [to, navigate]);
+  return <div />;
+}

web/src/components/player/HlsVideoPlayer.tsx

@@ -19,7 +19,6 @@ const unsupportedErrorCodes = [
 ];
 
 type HlsVideoPlayerProps = {
-  className: string;
   children?: ReactNode;
   videoRef: MutableRefObject<HTMLVideoElement | null>;
   visible: boolean;
@@ -31,7 +30,6 @@ type HlsVideoPlayerProps = {
   onPlaying?: () => void;
 };
 export default function HlsVideoPlayer({
-  className,
   children,
   videoRef,
   visible,
@@ -91,26 +89,10 @@ export default function HlsVideoPlayer({
 
   return (
     <TransformWrapper minScale={1.0}>
-      <div
-        className={`relative ${className ?? ""} ${visible ? "visible" : "hidden"}`}
-        onMouseOver={
-          isDesktop
-            ? () => {
-                setControls(true);
-              }
-            : undefined
-        }
-        onMouseOut={
-          isDesktop
-            ? () => {
-                setControls(controlsOpen);
-              }
-            : undefined
-        }
-        onClick={isDesktop ? undefined : () => setControls(!controls)}
-      >
       <TransformComponent
         wrapperStyle={{
+          position: "relative",
+          display: visible ? undefined : "none",
           width: "100%",
           height: "100%",
         }}
@@ -132,9 +114,7 @@ export default function HlsVideoPlayer({
 
             if (isMobile) {
               setControls(true);
-                setMobileCtrlTimeout(
+              setMobileCtrlTimeout(setTimeout(() => setControls(false), 4000));
-                  setTimeout(() => setControls(false), 4000),
-                );
             }
           }}
           onPlaying={onPlaying}
@@ -165,7 +145,25 @@ export default function HlsVideoPlayer({
             }
           }}
         />
-        </TransformComponent>
+        <div
+          className="absolute inset-0"
+          onMouseOver={
+            isDesktop
+              ? () => {
+                  setControls(true);
+                }
+              : undefined
+          }
+          onMouseOut={
+            isDesktop
+              ? () => {
+                  setControls(controlsOpen);
+                }
+              : undefined
+          }
+          onClick={isDesktop ? undefined : () => setControls(!controls)}
+        >
+          <div className={`size-full relative ${visible ? "" : "hidden"}`}>
             <VideoControls
               className="absolute bottom-5 left-1/2 -translate-x-1/2"
               video={videoRef.current}
@@ -201,6 +199,8 @@ export default function HlsVideoPlayer({
             />
             {children}
           </div>
+        </div>
+      </TransformComponent>
     </TransformWrapper>
   );
 }

web/src/components/player/LivePlayer.tsx

@@ -7,10 +7,8 @@ import MSEPlayer from "./MsePlayer";
 import JSMpegPlayer from "./JSMpegPlayer";
 import { MdCircle } from "react-icons/md";
 import { useCameraActivity } from "@/hooks/use-camera-activity";
-import { useRecordingsState } from "@/api/ws";
 import { LivePlayerMode } from "@/types/live";
 import useCameraLiveMode from "@/hooks/use-camera-live-mode";
-import CameraActivityIndicator from "../indicators/CameraActivityIndicator";
 
 type LivePlayerProps = {
   cameraRef?: (ref: HTMLDivElement | null) => void;
@@ -41,8 +39,7 @@ export default function LivePlayer({
 }: LivePlayerProps) {
   // camera activity
 
-  const { activeMotion, activeAudio, activeTracking } =
+  const { activeMotion, activeTracking } = useCameraActivity(cameraConfig);
-    useCameraActivity(cameraConfig);
 
   const cameraActive = useMemo(
     () =>
@@ -72,8 +69,6 @@ export default function LivePlayer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [cameraActive, liveReady]);
 
-  const { payload: recording } = useRecordingsState(cameraConfig.name);
-
   // camera still state
 
   const stillReloadInterval = useMemo(() => {
@@ -171,15 +166,8 @@ export default function LivePlayer({
         />
       </div>
 
-      <div className="absolute right-2 bottom-2 w-[40px]">
-        {(activeMotion ||
-          (cameraConfig.audio.enabled_in_config && activeAudio)) && (
-          <CameraActivityIndicator />
-        )}
-      </div>
-
       <div className="absolute right-2 top-2 size-4">
-        {recording == "ON" && (
+        {activeMotion && (
           <MdCircle className="size-2 drop-shadow-md shadow-danger text-danger animate-pulse" />
         )}
       </div>

web/src/components/player/VideoControls.tsx

@@ -145,7 +145,7 @@ export default function VideoControls({
       className={`px-4 py-2 flex justify-between items-center gap-8 text-primary z-50 bg-background/60 rounded-lg ${className ?? ""}`}
     >
       {video && features.volume && (
-        <div className="flex justify-normal items-center gap-2">
+        <div className="flex justify-normal items-center gap-2 cursor-pointer">
           <VolumeIcon
             className="size-5"
             onClick={(e: React.MouseEvent) => {

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -150,7 +150,6 @@ export default function DynamicVideoPlayer({
   return (
     <>
       <HlsVideoPlayer
-        className={className ?? ""}
         videoRef={playerRef}
         visible={!(isScrubbing || isLoading)}
         currentSource={source}

web/src/hooks/use-camera-activity.ts

@@ -1,8 +1,4 @@
-import {
+import { useFrigateEvents, useMotionActivity } from "@/api/ws";
-  useAudioActivity,
-  useFrigateEvents,
-  useMotionActivity,
-} from "@/api/ws";
 import { CameraConfig } from "@/types/frigateConfig";
 import { MotionData, ReviewSegment } from "@/types/review";
 import { useEffect, useMemo, useState } from "react";
@@ -11,7 +7,6 @@ import { useTimelineUtils } from "./use-timeline-utils";
 type useCameraActivityReturn = {
   activeTracking: boolean;
   activeMotion: boolean;
-  activeAudio: boolean;
 };
 
 export function useCameraActivity(
@@ -25,7 +20,6 @@ export function useCameraActivity(
 
   const { payload: detectingMotion } = useMotionActivity(camera.name);
   const { payload: event } = useFrigateEvents();
-  const { payload: audioRms } = useAudioActivity(camera.name);
 
   useEffect(() => {
     if (!event) {
@@ -63,9 +57,6 @@ export function useCameraActivity(
   return {
     activeTracking: hasActiveObjects,
     activeMotion: detectingMotion == "ON",
-    activeAudio: camera.audio.enabled_in_config
-      ? audioRms >= camera.audio.min_volume
-      : false,
   };
 }
 

web/src/pages/site-navigation.ts

@@ -1,6 +1,7 @@
 import Logo from "@/components/Logo";
-import { FaCompactDisc, FaFlag, FaVideo } from "react-icons/fa";
+import { FaCompactDisc, FaVideo } from "react-icons/fa";
 import { LuConstruction } from "react-icons/lu";
+import { MdVideoLibrary } from "react-icons/md";
 
 export const navbarLinks = [
   {
@@ -11,9 +12,9 @@ export const navbarLinks = [
   },
   {
     id: 2,
-    icon: FaFlag,
+    icon: MdVideoLibrary,
-    title: "Events",
+    title: "Review",
-    url: "/events",
+    url: "/review",
   },
   {
     id: 3,

web/src/views/live/LiveCameraView.tsx

@@ -235,7 +235,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
                 className="flex items-center gap-2.5 rounded-lg"
                 size="sm"
                 onClick={() => {
-                  navigate("events", {
+                  navigate("review", {
                     state: {
                       severity: "alert",
                       recording: {