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,32 +104,42 @@ export function AnimatedEventCard({
             className="size-full cursor-pointer overflow-hidden rounded md:rounded-lg"
             onClick={onOpenReview}
           >
-            {previews ? (
+            {!alertVideos ? (
-              <VideoPreview
+              <img
-                relevantPreview={previews[previews.length - 1]}
+                className="size-full select-none"
-                startTime={event.start_time}
+                src={`${apiHost}${event.thumb_path.replace("/media/frigate/", "")}`}
-                endTime={event.end_time}
+                loading={isSafari ? "eager" : "lazy"}
-                loop
-                showProgress={false}
-                setReviewed={() => {}}
-                setIgnoreClick={() => {}}
-                isPlayingBack={() => {}}
-                windowVisible={windowVisible}
               />
             ) : (
-              <video
+              <>
-                preload="auto"
+                {previews ? (
-                autoPlay
+                  <VideoPreview
-                playsInline
+                    relevantPreview={previews[previews.length - 1]}
-                muted
+                    startTime={event.start_time}
-                disableRemotePlayback
+                    endTime={event.end_time}
-                loop
+                    loop
-              >
+                    showProgress={false}
-                <source
+                    setReviewed={() => {}}
-                  src={`${baseUrl}api/review/${event.id}/preview?format=mp4`}
+                    setIgnoreClick={() => {}}
-                  type="video/mp4"
+                    isPlayingBack={() => {}}
-                />
+                    windowVisible={windowVisible}
-              </video>
+                  />
+                ) : (
+                  <video
+                    preload="auto"
+                    autoPlay
+                    playsInline
+                    muted
+                    disableRemotePlayback
+                    loop
+                  >
+                    <source
+                      src={`${baseUrl}api/review/${event.id}/preview?format=mp4`}
+                      type="video/mp4"
+                    />
+                  </video>
+                )}
+              </>
             )}
           </div>
           <div className="absolute inset-x-0 bottom-0 h-6 rounded bg-gradient-to-t from-slate-900/50 to-transparent">

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">