WebUI Fixes (#10481)

* Update previews on the hour

* Allow tap to toggle controls so zooming still works

* Use hash location insteaad of state for live camera view

* Add typing

web/src/components/player/LivePlayer.tsx

@@ -21,6 +21,7 @@ type LivePlayerProps = {
   windowVisible?: boolean;
   playAudio?: boolean;
   micEnabled?: boolean; // only webrtc supports mic
+  iOSCompatFullScreen?: boolean;
   onClick?: () => void;
 };
 
@@ -32,6 +33,7 @@ export default function LivePlayer({
   windowVisible = true,
   playAudio = false,
   micEnabled = false,
+  iOSCompatFullScreen = false,
   onClick,
 }: LivePlayerProps) {
   // camera activity
@@ -100,6 +102,7 @@ export default function LivePlayer({
         playbackEnabled={cameraActive}
         audioEnabled={playAudio}
         microphoneEnabled={micEnabled}
+        iOSCompatFullScreen={iOSCompatFullScreen}
         onPlaying={() => setLiveReady(true)}
       />
     );

web/src/components/player/WebRTCPlayer.tsx

@@ -1,5 +1,5 @@
 import { baseUrl } from "@/api/baseUrl";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 type WebRtcPlayerProps = {
   className?: string;
@@ -7,6 +7,7 @@ type WebRtcPlayerProps = {
   playbackEnabled?: boolean;
   audioEnabled?: boolean;
   microphoneEnabled?: boolean;
+  iOSCompatFullScreen?: boolean; // ios doesn't support fullscreen divs so we must support the video element
   onPlaying?: () => void;
 };
 
@@ -16,6 +17,7 @@ export default function WebRtcPlayer({
   playbackEnabled = true,
   audioEnabled = false,
   microphoneEnabled = false,
+  iOSCompatFullScreen = false,
   onPlaying,
 }: WebRtcPlayerProps) {
   // metadata
@@ -170,14 +172,23 @@ export default function WebRtcPlayer({
     microphoneEnabled,
   ]);
 
+  // ios compat
+  const [iOSCompatControls, setiOSCompatControls] = useState(false);
+
   return (
     <video
       ref={videoRef}
       className={className}
+      controls={iOSCompatControls}
       autoPlay
       playsInline
       muted={!audioEnabled}
       onLoadedData={onPlaying}
+      onClick={
+        iOSCompatFullScreen
+          ? () => setiOSCompatControls(!iOSCompatControls)
+          : undefined
+      }
     />
   );
 }

web/src/hooks/use-overlay-state.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { usePersistence } from "./use-persistence";
 
-export default function useOverlayState<S extends string>(
+export function useOverlayState<S extends string>(
   key: string,
   defaultValue: S | undefined = undefined,
 ): [S | undefined, (value: S, replace?: boolean) => void] {
@@ -63,3 +63,31 @@ export function usePersistedOverlayState<S extends string>(
     setOverlayStateValue,
   ];
 }
+
+export function useHashState<S extends string>(): [
+  S | undefined,
+  (value: S) => void,
+] {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const setHash = useCallback(
+    (value: S | undefined) => {
+      if (!value) {
+        navigate(location.pathname);
+      } else {
+        navigate(`${location.pathname}#${value}`);
+      }
+    },
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [location, navigate],
+  );
+
+  const hash = useMemo(
+    () => location.hash.substring(1) as unknown as S,
+    [location.hash],
+  );
+
+  return [hash, setHash];
+}

web/src/pages/Events.tsx

@@ -1,7 +1,7 @@
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import useApiFilter from "@/hooks/use-api-filter";
 import { useTimezone } from "@/hooks/use-date-utils";
-import useOverlayState from "@/hooks/use-overlay-state";
+import { useOverlayState } from "@/hooks/use-overlay-state";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
 import {
@@ -16,7 +16,7 @@ import {
   MobileRecordingView,
 } from "@/views/events/RecordingView";
 import axios from "axios";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { isMobile } from "react-device-detect";
 import useSWR from "swr";
 
@@ -103,7 +103,7 @@ export default function Events() {
   }, [updateSummary]);
 
   // preview videos
-
+  const [previewKey, setPreviewKey] = useState(0);
   const previewTimes = useMemo(() => {
     if (!reviews || reviews.length == 0) {
       return undefined;
@@ -112,13 +112,19 @@ export default function Events() {
     const startDate = new Date();
     startDate.setMinutes(0, 0, 0);
 
-    const endDate = new Date(reviews.at(-1)?.end_time || 0);
+    let endDate;
+    if (previewKey == 0) {
+      endDate = new Date(reviews.at(-1)?.end_time || 0);
       endDate.setHours(0, 0, 0, 0);
+    } else {
+      endDate = new Date();
+    }
+
     return {
       start: startDate.getTime() / 1000,
       end: endDate.getTime() / 1000,
     };
-  }, [reviews]);
+  }, [reviews, previewKey]);
   const { data: allPreviews } = useSWR<Preview[]>(
     previewTimes
       ? `preview/all/start/${previewTimes.start}/end/${previewTimes.end}`
@@ -126,6 +132,20 @@ export default function Events() {
     { revalidateOnFocus: false },
   );
 
+  // Set a timeout to update previews on the hour
+  useEffect(() => {
+    const future = new Date();
+    future.setHours(future.getHours() + 1, 0, 30, 0);
+    const timeoutId = setTimeout(
+      () => setPreviewKey(10 * Math.random()),
+      future.getTime() - Date.now(),
+    );
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, []);
+
   // review status
 
   const markAllItemsAsReviewed = useCallback(

web/src/pages/Live.tsx

@@ -1,4 +1,5 @@
-import useOverlayState, {
+import {
+  useHashState,
   usePersistedOverlayState,
 } from "@/hooks/use-overlay-state";
 import { FrigateConfig } from "@/types/frigateConfig";
@@ -10,7 +11,7 @@ import useSWR from "swr";
 function Live() {
   const { data: config } = useSWR<FrigateConfig>("config");
 
-  const [selectedCameraName, setSelectedCameraName] = useOverlayState("camera");
+  const [selectedCameraName, setSelectedCameraName] = useHashState();
   const [cameraGroup] = usePersistedOverlayState(
     "cameraGroup",
     "default" as string,

web/src/views/live/LiveCameraView.tsx

@@ -28,6 +28,7 @@ import React, {
 } from "react";
 import {
   isDesktop,
+  isIOS,
   isMobile,
   isSafari,
   useMobileOrientation,
@@ -189,6 +190,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
             <div
               className={`flex flex-row items-center gap-2 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
             >
+              {!isIOS && (
                 <CameraFeatureToggle
                   className="p-2 md:p-0"
                   variant={fullscreen ? "overlay" : "primary"}
@@ -203,6 +205,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
                     }
                   }}
                 />
+              )}
               {window.isSecureContext && (
                 <CameraFeatureToggle
                   className="p-2 md:p-0"
@@ -286,6 +289,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
               cameraConfig={camera}
               playAudio={audio}
               micEnabled={mic}
+              iOSCompatFullScreen={isIOS}
               preferredLiveMode={preferredLiveMode}
             />
           </div>