use recording snapshot for frigate+ frame submission from VideoControls

rather than a canvas grab/paint, which may not always align with an ffmpeg snapshot due to keyframes

web/public/locales/en/components/player.json

@@ -4,7 +4,8 @@
   "noPreviewFoundFor": "No Preview Found for {{cameraName}}",
   "submitFrigatePlus": {
     "title": "Submit this frame to Frigate+?",
-    "submit": "Submit"
+    "submit": "Submit",
+    "previewError": "Could not load snapshot preview. The recording may not be available at this time."
   },
   "livePlayerRequiredIOSVersion": "iOS 17.1 or greater is required for this live stream type.",
   "streamOffline": {

web/src/components/overlay/detail/TrackingDetails.tsx

@@ -636,6 +636,13 @@ export function TrackingDetails({
     return axios.post(`/${event.camera}/plus/${currentTime}`);
   }, [event.camera, currentTime]);
 
+  const getSnapshotUrlForPlus = useCallback(() => {
+    if (!currentTime) {
+      return undefined;
+    }
+    return `${apiHost}api/${event.camera}/recordings/${currentTime}/snapshot.jpg?height=500`;
+  }, [apiHost, event.camera, currentTime]);
+
   if (!config) {
     return <ActivityIndicator />;
   }
@@ -683,6 +690,7 @@ export function TrackingDetails({
                 onTimeUpdate={handleTimeUpdate}
                 onSeekToTime={handleSeekToTime}
                 onUploadFrame={onUploadFrameToPlus}
+                getSnapshotUrl={getSnapshotUrlForPlus}
                 onPlaying={() => setIsVideoLoading(false)}
                 setFullResolution={setFullResolution}
                 toggleFullscreen={toggleFullscreen}

web/src/components/player/HlsVideoPlayer.tsx

@@ -53,6 +53,7 @@ type HlsVideoPlayerProps = {
   onSeekToTime?: (timestamp: number, play?: boolean) => void;
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onUploadFrame?: (playTime: number) => Promise<AxiosResponse> | undefined;
+  getSnapshotUrl?: (playTime: number) => string | undefined;
   toggleFullscreen?: () => void;
   onError?: (error: RecordingPlayerError) => void;
   isDetailMode?: boolean;
@@ -78,6 +79,7 @@ export default function HlsVideoPlayer({
   onSeekToTime,
   setFullResolution,
   onUploadFrame,
+  getSnapshotUrl,
   toggleFullscreen,
   onError,
   isDetailMode = false,
@@ -317,6 +319,13 @@ export default function HlsVideoPlayer({
               videoRef.current.playbackRate = rate;
             }
           }}
+          getSnapshotUrl={() => {
+            const frameTime = getVideoTime();
+            if (!frameTime || !getSnapshotUrl) {
+              return undefined;
+            }
+            return getSnapshotUrl(frameTime);
+          }}
           onUploadFrame={async () => {
             const frameTime = getVideoTime();
 

web/src/components/player/VideoControls.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo, useRef, useState } from "react";
+import { LuFolderX } from "react-icons/lu";
 import { isDesktop, isMobileOnly, isSafari } from "react-device-detect";
 import { LuPause, LuPlay } from "react-icons/lu";
 import {
@@ -71,6 +72,7 @@ type VideoControlsProps = {
   onSeek: (diff: number) => void;
   onSetPlaybackRate: (rate: number) => void;
   onUploadFrame?: () => void;
+  getSnapshotUrl?: () => string | undefined;
   toggleFullscreen?: () => void;
   containerRef?: React.MutableRefObject<HTMLDivElement | null>;
 };
@@ -92,6 +94,7 @@ export default function VideoControls({
   onSeek,
   onSetPlaybackRate,
   onUploadFrame,
+  getSnapshotUrl,
   toggleFullscreen,
   containerRef,
 }: VideoControlsProps) {
@@ -288,6 +291,7 @@ export default function VideoControls({
             }
           }}
           onUploadFrame={onUploadFrame}
+          getSnapshotUrl={getSnapshotUrl}
           containerRef={containerRef}
           fullscreen={fullscreen}
         />
@@ -306,6 +310,7 @@ type FrigatePlusUploadButtonProps = {
   onOpen: () => void;
   onClose: () => void;
   onUploadFrame: () => void;
+  getSnapshotUrl?: () => string | undefined;
   containerRef?: React.MutableRefObject<HTMLDivElement | null>;
   fullscreen?: boolean;
 };
@@ -314,12 +319,14 @@ function FrigatePlusUploadButton({
   onOpen,
   onClose,
   onUploadFrame,
+  getSnapshotUrl,
   containerRef,
   fullscreen,
 }: FrigatePlusUploadButtonProps) {
   const { t } = useTranslation(["components/player"]);
 
-  const [videoImg, setVideoImg] = useState<string>();
+  const [previewUrl, setPreviewUrl] = useState<string>();
+  const [previewError, setPreviewError] = useState(false);
 
   return (
     <AlertDialog
@@ -334,6 +341,13 @@ function FrigatePlusUploadButton({
           className="size-5 cursor-pointer"
           onClick={() => {
             onOpen();
+            setPreviewError(false);
+
+            const snapshotUrl = getSnapshotUrl?.();
+            if (snapshotUrl) {
+              setPreviewUrl(snapshotUrl);
+              return;
+            }
 
             if (video) {
               const videoSize = [video.clientWidth, video.clientHeight];
@@ -345,7 +359,7 @@ function FrigatePlusUploadButton({
 
               if (context) {
                 context.drawImage(video, 0, 0, videoSize[0], videoSize[1]);
-                setVideoImg(canvas.toDataURL("image/webp"));
+                setPreviewUrl(canvas.toDataURL("image/webp"));
               }
             }
           }}
@@ -362,14 +376,29 @@ function FrigatePlusUploadButton({
         <AlertDialogHeader>
           <AlertDialogTitle>{t("submitFrigatePlus.title")}</AlertDialogTitle>
         </AlertDialogHeader>
-        <img className="aspect-video w-full object-contain" src={videoImg} />
+        {previewError ? (
+          <div className="flex aspect-video w-full flex-col items-center justify-center gap-2 text-center text-muted-foreground">
+            <LuFolderX className="size-12" />
+            <span>{t("submitFrigatePlus.previewError")}</span>
+          </div>
+        ) : (
+          <img
+            className="aspect-video w-full object-contain"
+            src={previewUrl}
+            onError={() => setPreviewError(true)}
+          />
+        )}
         <AlertDialogFooter>
-          <AlertDialogAction className="bg-selected" onClick={onUploadFrame}>
-            {t("submitFrigatePlus.submit")}
-          </AlertDialogAction>
           <AlertDialogCancel>
             {t("button.cancel", { ns: "common" })}
           </AlertDialogCancel>
+          <AlertDialogAction
+            className="bg-selected text-white"
+            onClick={onUploadFrame}
+            disabled={previewError}
+          >
+            {t("submitFrigatePlus.submit")}
+          </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>

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

@@ -181,6 +181,21 @@ export default function DynamicVideoPlayer({
     [camera, controller],
   );
 
+  const getSnapshotUrlForPlus = useCallback(
+    (playTime: number) => {
+      if (!controller) {
+        return undefined;
+      }
+
+      const time = controller.getProgress(playTime);
+      if (!time) {
+        return undefined;
+      }
+      return `${apiHost}api/${camera}/recordings/${time}/snapshot.jpg?height=500`;
+    },
+    [apiHost, camera, controller],
+  );
+
   // state of playback player
 
   const recordingParams = useMemo(
@@ -312,6 +327,7 @@ export default function DynamicVideoPlayer({
           }}
           setFullResolution={setFullResolution}
           onUploadFrame={onUploadFrameToPlus}
+          getSnapshotUrl={getSnapshotUrlForPlus}
           toggleFullscreen={toggleFullscreen}
           onError={(error) => {
             if (error == "stalled" && !isScrubbing) {