Add filmstrip video/image toggle to general settings (#12608)

web/src/components/card/AnimatedEventCard.tsx

@@ -11,6 +11,9 @@ import { VideoPreview } from "../player/PreviewThumbnailPlayer";
 import { isCurrentHour } from "@/utils/dateUtil";
 import { useCameraPreviews } from "@/hooks/use-camera-previews";
 import { baseUrl } from "@/api/baseUrl";
+import { useApiHost } from "@/api";
+import { isSafari } from "react-device-detect";
+import { usePersistence } from "@/hooks/use-persistence";
 
 type AnimatedEventCardProps = {
   event: ReviewSegment;
@@ -21,6 +24,7 @@ export function AnimatedEventCard({
   selectedGroup,
 }: AnimatedEventCardProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
+  const apiHost = useApiHost();
 
   const currentHour = useMemo(() => isCurrentHour(event.start_time), [event]);
 
@@ -76,6 +80,8 @@ export function AnimatedEventCard({
 
   // image behavior
 
+  const [alertVideos] = usePersistence("alertVideos", true);
+
   const aspectRatio = useMemo(() => {
     if (!config || !Object.keys(config.cameras).includes(event.camera)) {
       return 16 / 9;
@@ -98,6 +104,14 @@ export function AnimatedEventCard({
             className="size-full cursor-pointer overflow-hidden rounded md:rounded-lg"
             onClick={onOpenReview}
           >
+            {!alertVideos ? (
+              <img
+                className="size-full select-none"
+                src={`${apiHost}${event.thumb_path.replace("/media/frigate/", "")}`}
+                loading={isSafari ? "eager" : "lazy"}
+              />
+            ) : (
+              <>
                 {previews ? (
                   <VideoPreview
                     relevantPreview={previews[previews.length - 1]}
@@ -125,6 +139,8 @@ export function AnimatedEventCard({
                     />
                   </video>
                 )}
+              </>
+            )}
           </div>
           <div className="absolute inset-x-0 bottom-0 h-6 rounded bg-gradient-to-t from-slate-900/50 to-transparent">
             <div className="absolute bottom-0 left-1 w-full text-xs text-white">

web/src/views/settings/GeneralSettingsView.tsx

@@ -55,6 +55,7 @@ export default function GeneralSettingsView() {
   const [autoLive, setAutoLive] = usePersistence("autoLiveView", true);
   const [playbackRate, setPlaybackRate] = usePersistence("playbackRate", 1);
   const [weekStartsOn, setWeekStartsOn] = usePersistence("weekStartsOn", 0);
+  const [alertVideos, setAlertVideos] = usePersistence("alertVideos", true);
 
   return (
     <>
@@ -91,6 +92,25 @@ export default function GeneralSettingsView() {
                 </p>
               </div>
             </div>
+            <div className="space-y-3">
+              <div className="flex flex-row items-center justify-start gap-2">
+                <Switch
+                  id="images-only"
+                  checked={alertVideos}
+                  onCheckedChange={setAlertVideos}
+                />
+                <Label className="cursor-pointer" htmlFor="images-only">
+                  Play Alert Videos
+                </Label>
+              </div>
+              <div className="my-2 text-sm text-muted-foreground">
+                <p>
+                  By default, recent alerts on the Live dashboard play as small
+                  looping videos. Disable this option to only show a static
+                  image of recent alerts on this device/browser.
+                </p>
+              </div>
+            </div>
           </div>
 
           <div className="my-3 flex w-full flex-col space-y-6">