From f7087517e4eab992fea3453c5ad45695f64cc5c8 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Sun, 13 Apr 2025 10:30:34 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/VideoPlayer/index.tsx  | 35 ++++++++++---------
 src/services/video-manager.service.ts | 48 +++++++++++++++++++++++++++
 src/services/videomanager.ts          | 38 ---------------------
 3 files changed, 65 insertions(+), 56 deletions(-)
 create mode 100644 src/services/video-manager.service.ts
 delete mode 100644 src/services/videomanager.ts

diff --git a/src/components/VideoPlayer/index.tsx b/src/components/VideoPlayer/index.tsx
index 4a0277c5..e0cb0f05 100644
--- a/src/components/VideoPlayer/index.tsx
+++ b/src/components/VideoPlayer/index.tsx
@@ -1,7 +1,7 @@
 import { cn } from '@/lib/utils'
-import NsfwOverlay from '../NsfwOverlay'
+import videoManager from '@/services/video-manager.service'
 import { useEffect, useRef } from 'react'
-import VideoManager from '@/services/videomanager'
+import NsfwOverlay from '../NsfwOverlay'
 
 export default function VideoPlayer({
   src,
@@ -28,7 +28,7 @@ export default function VideoPlayer({
         const isVisible = entry.isIntersecting
 
         if (!isVisible && !video.paused) {
-          await VideoManager.enterPiP(video)
+          await videoManager.enterPiP(video)
         }
 
         if (isVisible) {
@@ -36,7 +36,7 @@ export default function VideoPlayer({
             document.pictureInPictureElement === video ||
             (video as any).webkitPresentationMode === 'picture-in-picture'
           ) {
-            await VideoManager.exitPiP(video)
+            await videoManager.exitPiP(video)
           }
         }
       },
@@ -56,21 +56,20 @@ export default function VideoPlayer({
     const video = videoRef.current
     if (!video) return
 
-    await VideoManager.playVideo(video)
+    await videoManager.playVideo(video)
   }
+
   return (
-    <>
-      <div ref={containerRef} className="relative">
-        <video
-          ref={videoRef}
-          controls
-          className={cn('rounded-lg', size === 'small' ? 'h-[15vh]' : 'h-[30vh]', className)}
-          src={src}
-          onClick={(e) => e.stopPropagation()}
-          onPlay={handlePlay}
-        />
-        {isNsfw && <NsfwOverlay className="rounded-lg" />}
-      </div>
-    </>
+    <div ref={containerRef} className="relative">
+      <video
+        ref={videoRef}
+        controls
+        className={cn('rounded-lg', size === 'small' ? 'h-[15vh]' : 'h-[30vh]', className)}
+        src={src}
+        onClick={(e) => e.stopPropagation()}
+        onPlay={handlePlay}
+      />
+      {isNsfw && <NsfwOverlay className="rounded-lg" />}
+    </div>
   )
 }
diff --git a/src/services/video-manager.service.ts b/src/services/video-manager.service.ts
new file mode 100644
index 00000000..132fcf57
--- /dev/null
+++ b/src/services/video-manager.service.ts
@@ -0,0 +1,48 @@
+class VideoManagerService {
+  static instance: VideoManagerService
+
+  private currentVideo: HTMLVideoElement | null = null
+
+  constructor() {
+    if (!VideoManagerService.instance) {
+      VideoManagerService.instance = this
+    }
+    return VideoManagerService.instance
+  }
+
+  async enterPiP(video: HTMLVideoElement) {
+    if (this.currentVideo && this.currentVideo !== video) {
+      await this.exitPiP(this.currentVideo)
+    }
+
+    if ('requestPictureInPicture' in video) {
+      await video.requestPictureInPicture()
+    } else if ('webkitSetPresentationMode' in video) {
+      ;(video as any).webkitSetPresentationMode('picture-in-picture')
+    }
+  }
+
+  async exitPiP(video: HTMLVideoElement) {
+    video.pause()
+    if (document.pictureInPictureElement === video) {
+      await document.exitPictureInPicture()
+    } else if ('webkitSetPresentationMode' in video) {
+      ;(video as any).webkitSetPresentationMode('inline')
+    }
+
+    if (this.currentVideo === video) {
+      this.currentVideo = null
+    }
+  }
+
+  async playVideo(video: HTMLVideoElement) {
+    if (this.currentVideo && this.currentVideo !== video) {
+      await this.exitPiP(this.currentVideo)
+    }
+    this.currentVideo = video
+    video.play()
+  }
+}
+
+const instance = new VideoManagerService()
+export default instance
diff --git a/src/services/videomanager.ts b/src/services/videomanager.ts
deleted file mode 100644
index 5f20efe4..00000000
--- a/src/services/videomanager.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-class VideoManager {
-  private static currentVideo: HTMLVideoElement | null = null
-
-  static async enterPiP(video: HTMLVideoElement) {
-    if (VideoManager.currentVideo && VideoManager.currentVideo !== video) {
-      await VideoManager.exitPiP(VideoManager.currentVideo)
-    }
-
-    if ('requestPictureInPicture' in video) {
-      await video.requestPictureInPicture()
-    } else if ('webkitSetPresentationMode' in video) {
-      ;(video as any).webkitSetPresentationMode('picture-in-picture')
-    }
-  }
-
-  static async exitPiP(video: HTMLVideoElement) {
-    video.pause()
-    if (document.pictureInPictureElement === video) {
-      await document.exitPictureInPicture()
-    } else if ('webkitSetPresentationMode' in video) {
-      ;(video as any).webkitSetPresentationMode('inline')
-    }
-
-    if (VideoManager.currentVideo === video) {
-      VideoManager.currentVideo = null
-    }
-  }
-
-  static async playVideo(video: HTMLVideoElement) {
-    if (VideoManager.currentVideo && VideoManager.currentVideo !== video) {
-      await VideoManager.exitPiP(VideoManager.currentVideo)
-    }
-    VideoManager.currentVideo = video
-    video.play()
-  }
-}
-
-export default VideoManager