Enable event snapshot API to honour query params after event ends (#22375)

* Enable event snapshot API to honour query params

* fix unused imports

* Fixes

* Run ruff check --fix

* Web changes

* Further config and web fixes

* Further docs tweak

* Fix missing quality default in MediaEventsSnapshotQueryParams

* Manual events: don't save annotated jpeg; store frame time

* Remove unnecessary grayscale helper

* Add caveat to docs on snapshot_frame_time pre-0.18

* JPG snapshot should not be treated as clean

* Ensure tracked details uses uncropped, bbox'd snapshot

* Ensure all UI pages / menu actions use uncropped, bbox'd

* web lint

* Add missed config helper text

* Expect  SnapshotsConfig not Any

* docs: Remove pre-0.18 note

* Specify timestamp=0 in the UI

* Move tests out of http media

* Correct missed settings.json wording

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Revert to default None for quality

* Correct camera snapshot config wording

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Fix quality=0 handling

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Fix quality=0 handling #2

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* ReRun generate_config_translations

---------

Co-authored-by: leccelecce <example@example.com>
Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

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

@@ -85,7 +85,7 @@ export default function DetailActionsMenu({
             <DropdownMenuItem>
               <a
                 className="w-full"
-                href={`${baseUrl}api/events/${search.id}/snapshot.jpg?bbox=1`}
+                href={`${baseUrl}api/events/${search.id}/snapshot.jpg?crop=0&bbox=1&timestamp=0`}
                 download={`${search.camera}_${search.label}.jpg`}
               >
                 <div className="flex cursor-pointer items-center gap-2">
@@ -94,20 +94,19 @@ export default function DetailActionsMenu({
               </a>
             </DropdownMenuItem>
           )}
-          {search.has_snapshot &&
-            config?.cameras[search.camera].snapshots.clean_copy && (
-              <DropdownMenuItem>
-                <a
-                  className="w-full"
-                  href={`${baseUrl}api/events/${search.id}/snapshot-clean.webp`}
-                  download={`${search.camera}_${search.label}-clean.webp`}
-                >
-                  <div className="flex cursor-pointer items-center gap-2">
-                    <span>{t("itemMenu.downloadCleanSnapshot.label")}</span>
-                  </div>
-                </a>
-              </DropdownMenuItem>
-            )}
+          {search.has_snapshot && (
+            <DropdownMenuItem>
+              <a
+                className="w-full"
+                href={`${baseUrl}api/events/${search.id}/snapshot-clean.webp`}
+                download={`${search.camera}_${search.label}-clean.webp`}
+              >
+                <div className="flex cursor-pointer items-center gap-2">
+                  <span>{t("itemMenu.downloadCleanSnapshot.label")}</span>
+                </div>
+              </a>
+            </DropdownMenuItem>
+          )}
           {search.has_clip && (
             <DropdownMenuItem>
               <a

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

@@ -1839,7 +1839,7 @@ export function ObjectSnapshotTab({
                   <img
                     ref={imgRef}
                     className="mx-auto max-h-[60dvh] rounded-lg bg-background object-contain"
-                    src={`${baseUrl}api/events/${search?.id}/snapshot.jpg`}
+                    src={`${baseUrl}api/events/${search?.id}/snapshot.jpg?crop=0&bbox=1&timestamp=0`}
                     alt={`${search?.label}`}
                     loading={isSafari ? "eager" : "lazy"}
                     onLoad={() => {

web/src/components/overlay/dialog/FrigatePlusDialog.tsx

@@ -107,7 +107,7 @@ export function FrigatePlusDialog({
                       <img
                         ref={imgRef}
                         className="mx-auto max-h-[60dvh] rounded-lg bg-black object-contain"
-                        src={`${baseUrl}api/events/${upload.id}/snapshot.jpg`}
+                        src={`${baseUrl}api/events/${upload.id}/snapshot.jpg?crop=0&bbox=1&timestamp=0`}
                         alt={`${upload.label}`}
                         loading={isSafari ? "eager" : "lazy"}
                         onLoad={onImgLoad}