diff --git a/web/src/components/card/AnimatedEventCard.tsx b/web/src/components/card/AnimatedEventCard.tsx index bb502ef06..0531f3d87 100644 --- a/web/src/components/card/AnimatedEventCard.tsx +++ b/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("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 ? ( - {}} - setIgnoreClick={() => {}} - isPlayingBack={() => {}} - windowVisible={windowVisible} + {!alertVideos ? ( + ) : ( - + <> + {previews ? ( + {}} + setIgnoreClick={() => {}} + isPlayingBack={() => {}} + windowVisible={windowVisible} + /> + ) : ( + + )} + )}
diff --git a/web/src/views/settings/GeneralSettingsView.tsx b/web/src/views/settings/GeneralSettingsView.tsx index 64636bc2a..0cb7689f6 100644 --- a/web/src/views/settings/GeneralSettingsView.tsx +++ b/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() {

+
+
+ + +
+
+

+ 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. +

+
+