From d260c6926a78f4016e7f081d04289ea7f8a39b16 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sat, 23 Mar 2024 17:47:25 -0600
Subject: [PATCH] Fix safari preview transition (#10638)

---
 web/src/components/player/PreviewPlayer.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx
index 1a58022c4..197986677 100644
--- a/web/src/components/player/PreviewPlayer.tsx
+++ b/web/src/components/player/PreviewPlayer.tsx
@@ -12,7 +12,7 @@ import { Preview } from "@/types/preview";
 import { PreviewPlayback } from "@/types/playback";
 import { isCurrentHour } from "@/utils/dateUtil";
 import { baseUrl } from "@/api/baseUrl";
-import { isAndroid, isChrome, isMobile } from "react-device-detect";
+import { isAndroid, isChrome, isMobile, isSafari } from "react-device-detect";
 import { Skeleton } from "../ui/skeleton";
 
 type PreviewPlayerProps = {
@@ -223,7 +223,11 @@ function PreviewVideoPlayer({
       setHasCanvas(true);
     }
 
-    previewRef.current.load();
+    if (isSafari) {
+      setTimeout(() => previewRef.current?.load(), 100);
+    } else {
+      previewRef.current.load();
+    }
     // we only want this to change when current preview changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentPreview, previewRef]);