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

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