Snapshot: guard against repeated download clicks

web/src/components/player/HlsVideoPlayer.tsx

@@ -231,6 +231,7 @@ export default function HlsVideoPlayer({
   const [mobileCtrlTimeout, setMobileCtrlTimeout] = useState<NodeJS.Timeout>();
   const [controls, setControls] = useState(isMobile);
   const [controlsOpen, setControlsOpen] = useState(false);
+  const [isSnapshotLoading, setIsSnapshotLoading] = useState(false);
   const [zoomScale, setZoomScale] = useState(1.0);
   const [videoDimensions, setVideoDimensions] = useState<{
     width: number;
@@ -277,6 +278,12 @@ export default function HlsVideoPlayer({
   }, [videoRef, inpointOffset]);
 
   const handleSnapshot = useCallback(async () => {
+    if (isSnapshotLoading) {
+      return;
+    }
+
+    setIsSnapshotLoading(true);
+    try {
       const frameTime = getVideoTime();
       const result = await grabVideoSnapshot(videoRef.current);
 
@@ -297,7 +304,18 @@ export default function HlsVideoPlayer({
           position: "top-center",
         });
       }
-  }, [camera, config?.ui?.timezone, currentTime, getVideoTime, t, videoRef]);
+    } finally {
+      setIsSnapshotLoading(false);
+    }
+  }, [
+    camera,
+    config?.ui?.timezone,
+    currentTime,
+    getVideoTime,
+    isSnapshotLoading,
+    t,
+    videoRef,
+  ]);
   const onSnapshot = camera ? handleSnapshot : undefined;
 
   return (
@@ -365,6 +383,7 @@ export default function HlsVideoPlayer({
             }
           }}
           onSnapshot={onSnapshot}
+          snapshotLoading={isSnapshotLoading}
           snapshotTitle={t("snapshot.takeSnapshot", { ns: "views/live" })}
           fullscreen={fullscreen}
           toggleFullscreen={toggleFullscreen}

web/src/components/player/VideoControls.tsx

@@ -75,6 +75,7 @@ type VideoControlsProps = {
   onSetPlaybackRate: (rate: number) => void;
   onUploadFrame?: () => void;
   onSnapshot?: () => void;
+  snapshotLoading?: boolean;
   snapshotTitle?: string;
   toggleFullscreen?: () => void;
   containerRef?: React.MutableRefObject<HTMLDivElement | null>;
@@ -98,6 +99,7 @@ export default function VideoControls({
   onSetPlaybackRate,
   onUploadFrame,
   onSnapshot,
+  snapshotLoading = false,
   snapshotTitle,
   toggleFullscreen,
   containerRef,
@@ -302,10 +304,17 @@ export default function VideoControls({
       {features.snapshot && onSnapshot && (
         <TbCameraDown
           aria-label={snapshotTitle}
-          className="size-5 cursor-pointer"
+          aria-disabled={snapshotLoading}
+          className={cn(
+            "size-5",
+            snapshotLoading ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          )}
           title={snapshotTitle}
           onClick={(e: React.MouseEvent<SVGElement>) => {
             e.stopPropagation();
+            if (snapshotLoading) {
+              return;
+            }
             onSnapshot();
           }}
         />