From b530b1f444f7efabed06b7d13af445d40bfd72f8 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Wed, 3 Apr 2024 21:19:51 +0100
Subject: [PATCH] fix: iOS safari playback issues

---
 .../s/[videoId]/_components/VideoPlayer.tsx   | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/web/app/s/[videoId]/_components/VideoPlayer.tsx b/apps/web/app/s/[videoId]/_components/VideoPlayer.tsx
index e58ce911..beff2417 100644
--- a/apps/web/app/s/[videoId]/_components/VideoPlayer.tsx
+++ b/apps/web/app/s/[videoId]/_components/VideoPlayer.tsx
@@ -18,12 +18,15 @@ export const VideoPlayer = memo(
 
     useImperativeHandle(ref, () => videoRef.current as HTMLVideoElement);
 
+    const isIOS = () =>
+      /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+
     const initializeHls = (
       src: string,
       media: HTMLMediaElement,
       hlsInstance: React.MutableRefObject<Hls | null>
     ) => {
-      if (Hls.isSupported()) {
+      if (Hls.isSupported() && !isIOS()) {
         const hls = new Hls({ progressive: true });
         hls.on(Hls.Events.ERROR, (event, data) => {
           console.error("HLS error:", data);
@@ -36,7 +39,6 @@ export const VideoPlayer = memo(
                 hls.recoverMediaError();
                 break;
               default:
-                initializeFallback(src, media);
                 break;
             }
           }
@@ -46,17 +48,18 @@ export const VideoPlayer = memo(
         hls.loadSource(src);
         hls.attachMedia(media);
       } else {
-        initializeFallback(src, media);
+        media.src = src;
       }
     };
 
-    const initializeFallback = (src: string, media: HTMLMediaElement) => {
-      media.src = src;
-    };
-
     useEffect(() => {
       if (!videoRef.current) return;
-      initializeHls(videoSrc, videoRef.current, videoHlsInstance);
+
+      if (isIOS()) {
+        videoRef.current.src = videoSrc;
+      } else {
+        initializeHls(videoSrc, videoRef.current, videoHlsInstance);
+      }
 
       return () => {
         videoHlsInstance.current?.destroy();