UI Tweaks (#11459)

* refresh dashboard activity on visibility change

* Make video controls more consistent

* Use const

web/src/api/ws.tsx

@@ -221,7 +221,7 @@ export function useFrigateStats(): { payload: FrigateStats } {
 
 export function useInitialCameraState(
   camera: string,
-  refreshOnStart: boolean,
+  revalidateOnFocus: boolean,
 ): {
   payload: FrigateCameraState;
 } {
@@ -232,12 +232,25 @@ export function useInitialCameraState(
   const data = JSON.parse(payload as string);
 
   useEffect(() => {
-    if (refreshOnStart) {
+    let listener = undefined;
+    if (revalidateOnFocus) {
+      sendCommand("onConnect");
+      listener = () => {
+        if (document.visibilityState == "visible") {
           sendCommand("onConnect");
         }
+      };
+      addEventListener("visibilitychange", listener);
+    }
+
+    return () => {
+      if (listener) {
+        removeEventListener("visibilitychange", listener);
+      }
+    };
     // only refresh when onRefresh value changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [refreshOnStart]);
+  }, [revalidateOnFocus]);
 
   return { payload: data ? data[camera] : undefined };
 }

web/src/components/player/HlsVideoPlayer.tsx

@@ -16,6 +16,8 @@ import { AxiosResponse } from "axios";
 import { toast } from "sonner";
 import { useOverlayState } from "@/hooks/use-overlay-state";
 import { usePersistence } from "@/hooks/use-persistence";
+import { cn } from "@/lib/utils";
+import { ASPECT_VERTICAL_LAYOUT } from "@/types/record";
 
 // Android native hls does not seek correctly
 const USE_NATIVE_HLS = !isAndroid;
@@ -70,6 +72,11 @@ export default function HlsVideoPlayer({
           height: videoRef.current.videoHeight,
         });
       }
+
+      setTallCamera(
+        videoRef.current.videoWidth / videoRef.current.videoHeight <
+          ASPECT_VERTICAL_LAYOUT,
+      );
     }
   }, [videoRef, setFullResolution]);
 
@@ -109,6 +116,7 @@ export default function HlsVideoPlayer({
 
   // controls
 
+  const [tallCamera, setTallCamera] = useState(false);
   const [isPlaying, setIsPlaying] = useState(true);
   const [muted, setMuted] = useOverlayState("playerMuted", true);
   const [volume, setVolume] = useOverlayState("playerVolume", 1.0);
@@ -153,7 +161,10 @@ export default function HlsVideoPlayer({
   return (
     <TransformWrapper minScale={1.0}>
       <VideoControls
-        className="absolute bottom-5 left-1/2 z-50 -translate-x-1/2"
+        className={cn(
+          "absolute left-1/2 z-50 -translate-x-1/2",
+          tallCamera ? "bottom-12" : "bottom-5",
+        )}
         video={videoRef.current}
         isPlaying={isPlaying}
         show={visible && (controls || controlsOpen)}

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

@@ -19,7 +19,7 @@ type useCameraActivityReturn = {
 
 export function useCameraActivity(
   camera: CameraConfig,
-  refreshOnStart: boolean = true,
+  revalidateOnFocus: boolean = true,
 ): useCameraActivityReturn {
   const [objects, setObjects] = useState<ObjectType[]>([]);
 
@@ -27,7 +27,7 @@ export function useCameraActivity(
 
   const { payload: initialCameraState } = useInitialCameraState(
     camera.name,
-    refreshOnStart,
+    revalidateOnFocus,
   );
 
   const updatedCameraState = useDeepMemo(initialCameraState);