From 7798237c914be94605d48bc7b56828b05f8353af Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Sat, 16 Dec 2023 10:36:08 -0700
Subject: [PATCH] Reduce preview playback rate for safari browser

---
 web/src/components/card/MiniEventCard.tsx                  | 2 +-
 .../{TimelineCardPlayer.tsx => TimelinePlayerCard.tsx}     | 0
 web/src/components/player/PreviewThumbnailPlayer.tsx       | 7 +++++--
 web/src/pages/History.tsx                                  | 2 +-
 4 files changed, 7 insertions(+), 4 deletions(-)
 rename web/src/components/card/{TimelineCardPlayer.tsx => TimelinePlayerCard.tsx} (100%)

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("_", " ")}
             </div>
             {event.zones.length ? (
-              <div className="capitalize  text-sm flex align-center">
+              <div className="capitalize whitespace-nowrap text-sm flex align-center">
                 <MdOutlineLocationOn className="w-4 h-4 mr-2 inline" />
                 {event.zones.join(", ").replaceAll("_", " ")}
               </div>
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<Player | null>(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;