From 015932a19887f86207e9ced79e147f1e3edc76b1 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Sun, 13 Apr 2025 12:10:58 +0800
Subject: [PATCH] fix: add compatibility for video on Safari

---
 src/components/VideoPlayer/index.tsx  |  7 +++---
 src/services/video-manager.service.ts | 33 +++++++++++++++++++--------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/components/VideoPlayer/index.tsx b/src/components/VideoPlayer/index.tsx
index e1f4d28..8b7c1c3 100644
--- a/src/components/VideoPlayer/index.tsx
+++ b/src/components/VideoPlayer/index.tsx
@@ -24,9 +24,9 @@ export default function VideoPlayer({
     if (!video || !container) return
 
     const observer = new IntersectionObserver(
-      async ([entry]) => {
+      ([entry]) => {
         if (!entry.isIntersecting && !video.paused) {
-          await videoManager.enterPiP(video)
+          videoManager.enterPiP(video)
         }
       },
       { threshold: 0.5 }
@@ -51,7 +51,8 @@ export default function VideoPlayer({
       <video
         ref={videoRef}
         controls
-        className={cn('rounded-lg', size === 'small' ? 'h-[15vh]' : 'h-[30vh]', className)}
+        playsInline
+        className={cn('rounded-lg', size === 'small' ? 'max-h-[30vh]' : 'max-h-[50vh]', className)}
         src={src}
         onClick={(e) => e.stopPropagation()}
         onPlay={handlePlay}
diff --git a/src/services/video-manager.service.ts b/src/services/video-manager.service.ts
index 132fcf5..4c3ab8d 100644
--- a/src/services/video-manager.service.ts
+++ b/src/services/video-manager.service.ts
@@ -10,24 +10,37 @@ class VideoManagerService {
     return VideoManagerService.instance
   }
 
-  async enterPiP(video: HTMLVideoElement) {
+  enterPiP(video: HTMLVideoElement) {
     if (this.currentVideo && this.currentVideo !== video) {
-      await this.exitPiP(this.currentVideo)
+      this.exitPiP(this.currentVideo)
     }
 
-    if ('requestPictureInPicture' in video) {
-      await video.requestPictureInPicture()
-    } else if ('webkitSetPresentationMode' in video) {
+    if (
+      (video as any).webkitSupportsPresentationMode &&
+      typeof (video as any).webkitSetPresentationMode === 'function'
+    ) {
       ;(video as any).webkitSetPresentationMode('picture-in-picture')
+      setTimeout(() => {
+        if ((video as any).webkitPresentationMode !== 'picture-in-picture') {
+          video.pause()
+        }
+      }, 10)
+    } else {
+      video.requestPictureInPicture().catch(() => {
+        video.pause()
+      })
     }
   }
 
-  async exitPiP(video: HTMLVideoElement) {
+  private exitPiP(video: HTMLVideoElement) {
     video.pause()
-    if (document.pictureInPictureElement === video) {
-      await document.exitPictureInPicture()
-    } else if ('webkitSetPresentationMode' in video) {
+    if (
+      (video as any).webkitSupportsPresentationMode &&
+      typeof (video as any).webkitSetPresentationMode === 'function'
+    ) {
       ;(video as any).webkitSetPresentationMode('inline')
+    } else {
+      document.exitPictureInPicture()
     }
 
     if (this.currentVideo === video) {
@@ -37,7 +50,7 @@ class VideoManagerService {
 
   async playVideo(video: HTMLVideoElement) {
     if (this.currentVideo && this.currentVideo !== video) {
-      await this.exitPiP(this.currentVideo)
+      this.exitPiP(this.currentVideo)
     }
     this.currentVideo = video
     video.play()