refactor: 💨

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">
-      <div ref={containerRef} className="relative">
+      <video
-        <video
+        ref={videoRef}
-          ref={videoRef}
+        controls
-          controls
+        className={cn('rounded-lg', size === 'small' ? 'h-[15vh]' : 'h-[30vh]', className)}
-          className={cn('rounded-lg', size === 'small' ? 'h-[15vh]' : 'h-[30vh]', className)}
+        src={src}
-          src={src}
+        onClick={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
+        onPlay={handlePlay}
-          onPlay={handlePlay}
+      />
-        />
+      {isNsfw && <NsfwOverlay className="rounded-lg" />}
-        {isNsfw && <NsfwOverlay className="rounded-lg" />}
+    </div>
-      </div>
-    </>
   )
 }

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

src/services/videomanager.ts

@@ -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