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;