Snapshot: simplify control wiring and scope cleanup

web/src/components/player/HlsVideoPlayer.tsx

@@ -63,7 +63,6 @@ type HlsVideoPlayerProps = {
   isDetailMode?: boolean;
   camera?: string;
   currentTimeOverride?: number;
-  supportsSnapshot?: boolean;
   transformedOverlay?: ReactNode;
 };
 
@@ -89,7 +88,6 @@ export default function HlsVideoPlayer({
   isDetailMode = false,
   camera,
   currentTimeOverride,
-  supportsSnapshot = false,
   transformedOverlay,
 }: HlsVideoPlayerProps) {
   const { t } = useTranslation(["components/player", "views/live"]);
@@ -271,7 +269,7 @@ export default function HlsVideoPlayer({
   const getVideoTime = useCallback(() => {
     const currentTime = videoRef.current?.currentTime;
 
-    if (currentTime == undefined) {
+    if (!currentTime) {
       return undefined;
     }
 
@@ -300,6 +298,7 @@ export default function HlsVideoPlayer({
       });
     }
   }, [camera, config?.ui?.timezone, currentTime, getVideoTime, t, videoRef]);
+  const onSnapshot = camera ? handleSnapshot : undefined;
 
   return (
     <TransformWrapper
@@ -324,7 +323,7 @@ export default function HlsVideoPlayer({
             seek: true,
             playbackRate: true,
             plusUpload: isAdmin && config?.plus?.enabled == true,
-            snapshot: supportsSnapshot,
+            snapshot: !!onSnapshot,
             fullscreen: supportsFullscreen,
           }}
           setControlsOpen={setControlsOpen}
@@ -351,7 +350,7 @@ export default function HlsVideoPlayer({
           onUploadFrame={async () => {
             const frameTime = getVideoTime();
 
-            if (frameTime != undefined && onUploadFrame) {
+            if (frameTime && onUploadFrame) {
               const resp = await onUploadFrame(frameTime);
 
               if (resp && resp.status == 200) {
@@ -365,7 +364,7 @@ export default function HlsVideoPlayer({
               }
             }
           }}
-          onSnapshot={supportsSnapshot ? handleSnapshot : undefined}
+          onSnapshot={onSnapshot}
           snapshotTitle={t("snapshot.takeSnapshot", { ns: "views/live" })}
           fullscreen={fullscreen}
           toggleFullscreen={toggleFullscreen}
@@ -498,7 +497,7 @@ export default function HlsVideoPlayer({
 
               const frameTime = getVideoTime();
 
-              if (frameTime != undefined) {
+              if (frameTime) {
                 onTimeUpdate(frameTime);
               }
             }}

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

@@ -47,7 +47,6 @@ type DynamicVideoPlayerProps = {
   setFullResolution: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   toggleFullscreen: () => void;
   containerRef?: React.MutableRefObject<HTMLDivElement | null>;
-  supportsSnapshot?: boolean;
   transformedOverlay?: ReactNode;
 };
 export default function DynamicVideoPlayer({
@@ -67,7 +66,6 @@ export default function DynamicVideoPlayer({
   setFullResolution,
   toggleFullscreen,
   containerRef,
-  supportsSnapshot = false,
   transformedOverlay,
 }: DynamicVideoPlayerProps) {
   const { t } = useTranslation(["components/player"]);
@@ -323,7 +321,6 @@ export default function DynamicVideoPlayer({
           isDetailMode={isDetailMode}
           camera={contextCamera || camera}
           currentTimeOverride={currentTime}
-          supportsSnapshot={supportsSnapshot}
           transformedOverlay={transformedOverlay}
         />
       )}

web/src/utils/snapshotUtil.ts

@@ -103,20 +103,15 @@ export function generateSnapshotFilename(
   timestampSeconds?: number,
   timezone?: string,
 ): string {
-  const seconds = timestampSeconds ?? Date.now() / 1000;
+  const seconds =
+    typeof timestampSeconds === "number" && Number.isFinite(timestampSeconds)
+      ? timestampSeconds
+      : Date.now() / 1000;
   const timestamp = formatUnixTimestampToDateTime(seconds, {
     timezone,
     date_format: "yyyy-MM-dd'T'HH-mm-ss",
   });
-
+  return `${cameraName}_snapshot_${timestamp}.jpg`;
-  const safeTimestamp =
-    timestamp === "Invalid time"
-      ? new Date(seconds * 1000)
-          .toISOString()
-          .replace(/[:.]/g, "-")
-          .slice(0, -5)
-      : timestamp;
-  return `${cameraName}_snapshot_${safeTimestamp}.jpg`;
 }
 
 export async function grabVideoSnapshot(

web/src/views/recording/RecordingView.tsx

@@ -839,7 +839,6 @@ export function RecordingView({
                   setFullResolution={setFullResolution}
                   toggleFullscreen={toggleFullscreen}
                   containerRef={mainLayoutRef}
-                  supportsSnapshot={true}
                 />
               </div>
               {isDesktop && effectiveCameras.length > 1 && (