diff --git a/web/src/components/card/MiniEventCard.tsx b/web/src/components/card/MiniEventCard.tsx index 675255991..2794255eb 100644 --- a/web/src/components/card/MiniEventCard.tsx +++ b/web/src/components/card/MiniEventCard.tsx @@ -70,7 +70,7 @@ export default function MiniEventCard({ event, onUpdate }: MiniEventCardProps) { {event.camera.replaceAll("_", " ")} {event.zones.length ? ( -
+
{event.zones.join(", ").replaceAll("_", " ")}
diff --git a/web/src/components/card/TimelineCardPlayer.tsx b/web/src/components/card/TimelinePlayerCard.tsx similarity index 100% rename from web/src/components/card/TimelineCardPlayer.tsx rename to web/src/components/card/TimelinePlayerCard.tsx diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx index 12145232d..64693370a 100644 --- a/web/src/components/player/PreviewThumbnailPlayer.tsx +++ b/web/src/components/player/PreviewThumbnailPlayer.tsx @@ -1,7 +1,7 @@ import { FrigateConfig } from "@/types/frigateConfig"; import VideoPlayer from "./VideoPlayer"; import useSWR from "swr"; -import { useCallback, useRef, useState } from "react"; +import { useCallback, useMemo, useRef, useState } from "react"; import { useApiHost } from "@/api"; import Player from "video.js/dist/types/player"; import { AspectRatio } from "../ui/aspect-ratio"; @@ -32,6 +32,9 @@ export default function PreviewThumbnailPlayer({ const { data: config } = useSWR("config"); const playerRef = useRef(null); const apiHost = useApiHost(); + const isSafari = useMemo(() => { + return /^((?!chrome|android).)*safari/i.test(navigator.userAgent); + }, []); const [visible, setVisible] = useState(false); @@ -133,7 +136,7 @@ export default function PreviewThumbnailPlayer({ seekOptions={{}} onReady={(player) => { playerRef.current = player; - player.playbackRate(8); + player.playbackRate(isSafari ? 2 : 8); player.currentTime(startTs - relevantPreview.start); }} onDispose={() => { diff --git a/web/src/pages/History.tsx b/web/src/pages/History.tsx index eaf908dc9..d2a0ab631 100644 --- a/web/src/pages/History.tsx +++ b/web/src/pages/History.tsx @@ -7,7 +7,7 @@ import ActivityIndicator from "@/components/ui/activity-indicator"; import HistoryCard from "@/components/card/HistoryCard"; import { formatUnixTimestampToDateTime } from "@/utils/dateUtil"; import axios from "axios"; -import TimelinePlayerCard from "@/components/card/TimelineCardPlayer"; +import TimelinePlayerCard from "@/components/card/TimelinePlayerCard"; const API_LIMIT = 120;