UI fixes (#12490)

* Improve export handling when errors occur

* Fix mobile zooming

* Handle recordings buffering

* Cleanup

* Url encode export name

* Start with actual name in input

* Fix buffering

web/src/components/player/HlsVideoPlayer.tsx

@@ -17,7 +17,7 @@ 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";
+import { ASPECT_VERTICAL_LAYOUT, RecordingPlayerError } from "@/types/record";
 
 // Android native hls does not seek correctly
 const USE_NATIVE_HLS = !isAndroid;
@@ -29,6 +29,7 @@ const unsupportedErrorCodes = [
 
 type HlsVideoPlayerProps = {
   videoRef: MutableRefObject<HTMLVideoElement | null>;
+  containerRef?: React.MutableRefObject<HTMLDivElement | null>;
   visible: boolean;
   currentSource: string;
   hotKeys: boolean;
@@ -40,10 +41,11 @@ type HlsVideoPlayerProps = {
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onUploadFrame?: (playTime: number) => Promise<AxiosResponse> | undefined;
   toggleFullscreen?: () => void;
-  containerRef?: React.MutableRefObject<HTMLDivElement | null>;
+  onError?: (error: RecordingPlayerError) => void;
 };
 export default function HlsVideoPlayer({
   videoRef,
+  containerRef,
   visible,
   currentSource,
   hotKeys,
@@ -55,7 +57,7 @@ export default function HlsVideoPlayer({
   setFullResolution,
   onUploadFrame,
   toggleFullscreen,
-  containerRef,
+  onError,
 }: HlsVideoPlayerProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
@@ -64,6 +66,7 @@ export default function HlsVideoPlayer({
   const hlsRef = useRef<Hls>();
   const [useHlsCompat, setUseHlsCompat] = useState(false);
   const [loadedMetadata, setLoadedMetadata] = useState(false);
+  const [bufferTimeout, setBufferTimeout] = useState<NodeJS.Timeout>();
 
   const handleLoadedMetadata = useCallback(() => {
     setLoadedMetadata(true);
@@ -265,11 +268,42 @@ export default function HlsVideoPlayer({
           onPlaying={onPlaying}
           onPause={() => {
             setIsPlaying(false);
+            clearTimeout(bufferTimeout);
 
             if (isMobile && mobileCtrlTimeout) {
               clearTimeout(mobileCtrlTimeout);
             }
           }}
+          onWaiting={() => {
+            if (onError != undefined) {
+              if (videoRef.current?.paused) {
+                return;
+              }
+
+              setBufferTimeout(
+                setTimeout(() => {
+                  if (
+                    document.visibilityState === "visible" &&
+                    videoRef.current
+                  ) {
+                    onError("stalled");
+                  }
+                }, 3000),
+              );
+            }
+          }}
+          onProgress={() => {
+            if (onError != undefined) {
+              if (videoRef.current?.paused) {
+                return;
+              }
+
+              if (bufferTimeout) {
+                clearTimeout(bufferTimeout);
+                setBufferTimeout(undefined);
+              }
+            }
+          }}
           onTimeUpdate={() =>
             onTimeUpdate && videoRef.current
               ? onTimeUpdate(videoRef.current.currentTime)

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

@@ -91,6 +91,7 @@ export default function DynamicVideoPlayer({
   // initial state
 
   const [isLoading, setIsLoading] = useState(false);
+  const [isBuffering, setIsBuffering] = useState(false);
   const [loadingTimeout, setLoadingTimeout] = useState<NodeJS.Timeout>();
   const [source, setSource] = useState(
     `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`,
@@ -130,9 +131,13 @@ export default function DynamicVideoPlayer({
         setIsLoading(false);
       }
 
+      if (isBuffering) {
+        setIsBuffering(false);
+      }
+
       onTimestampUpdate(controller.getProgress(time));
     },
-    [controller, onTimestampUpdate, isScrubbing, isLoading],
+    [controller, onTimestampUpdate, isBuffering, isLoading, isScrubbing],
   );
 
   const onUploadFrameToPlus = useCallback(
@@ -188,6 +193,7 @@ export default function DynamicVideoPlayer({
     <>
       <HlsVideoPlayer
         videoRef={playerRef}
+        containerRef={containerRef}
         visible={!(isScrubbing || isLoading)}
         currentSource={source}
         hotKeys={hotKeys}
@@ -209,7 +215,11 @@ export default function DynamicVideoPlayer({
         setFullResolution={setFullResolution}
         onUploadFrame={onUploadFrameToPlus}
         toggleFullscreen={toggleFullscreen}
-        containerRef={containerRef}
+        onError={(error) => {
+          if (error == "stalled" && !isScrubbing) {
+            setIsBuffering(true);
+          }
+        }}
       />
       <PreviewPlayer
         className={cn(
@@ -221,11 +231,11 @@ export default function DynamicVideoPlayer({
         cameraPreviews={cameraPreviews}
         startTime={startTimestamp}
         isScrubbing={isScrubbing}
-        onControllerReady={(previewController) => {
-          setPreviewController(previewController);
-        }}
+        onControllerReady={(previewController) =>
+          setPreviewController(previewController)
+        }
       />
-      {!isScrubbing && isLoading && !noRecording && (
+      {!isScrubbing && (isLoading || isBuffering) && !noRecording && (
         <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
       )}
       {!isScrubbing && noRecording && (