feat: auto play video

src/components/VideoPlayer/index.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@/lib/utils'
+import { cn, isInViewport } from '@/lib/utils'
 import videoManager from '@/services/video-manager.service'
 import { useEffect, useRef } from 'react'
 import NsfwOverlay from '../NsfwOverlay'
@@ -25,11 +25,17 @@ export default function VideoPlayer({
 
     const observer = new IntersectionObserver(
       ([entry]) => {
-        if (!entry.isIntersecting && !video.paused) {
+        if (entry.isIntersecting) {
-          videoManager.enterPiP(video)
+          setTimeout(() => {
+            if (isInViewport(container)) {
+              videoManager.autoPlay(video)
+            }
+          }, 200)
+        } else {
+          videoManager.pause(video)
         }
       },
-      { threshold: 0.5 }
+      { threshold: 1 }
     )
 
     observer.observe(container)
@@ -39,13 +45,6 @@ export default function VideoPlayer({
     }
   }, [])
 
-  const handlePlay = async () => {
-    const video = videoRef.current
-    if (!video) return
-
-    await videoManager.playVideo(video)
-  }
-
   return (
     <div ref={containerRef} className="relative">
       <video
@@ -55,7 +54,10 @@ export default function VideoPlayer({
         className={cn('rounded-lg', size === 'small' ? 'max-h-[30vh]' : 'max-h-[50vh]', className)}
         src={src}
         onClick={(e) => e.stopPropagation()}
-        onPlay={handlePlay}
+        onPlay={(event) => {
+          videoManager.play(event.currentTarget)
+        }}
+        muted
       />
       {isNsfw && <NsfwOverlay className="rounded-lg" />}
     </div>

src/lib/utils.ts

@@ -11,3 +11,13 @@ export function isSafari() {
   const vendor = window.navigator.vendor
   return /Safari/.test(ua) && /Apple Computer/.test(vendor) && !/Chrome/.test(ua)
 }
+
+export function isInViewport(el: HTMLElement) {
+  const rect = el.getBoundingClientRect()
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}

src/services/video-manager.service.ts

@@ -6,59 +6,59 @@ class VideoManagerService {
   constructor() {
     if (!VideoManagerService.instance) {
       VideoManagerService.instance = this
-      document.addEventListener('leavepictureinpicture', (e) => {
-        ;(e.target as HTMLVideoElement).pause()
-      })
     }
     return VideoManagerService.instance
   }
 
-  enterPiP(video: HTMLVideoElement) {
+  pause(video: HTMLVideoElement) {
-    if (this.currentVideo && this.currentVideo !== video) {
+    if (isPipElement(video)) {
-      this.exitPiP(this.currentVideo)
+      return
     }
-
+    if (this.currentVideo === video) {
-    if (
+      this.currentVideo = null
-      (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()
-      })
     }
+    video.pause()
   }
 
-  private exitPiP(video: HTMLVideoElement) {
+  autoPlay(video: HTMLVideoElement) {
-    video.pause()
     if (
-      (video as any).webkitSupportsPresentationMode &&
+      document.pictureInPictureElement &&
-      typeof (video as any).webkitSetPresentationMode === 'function'
+      isVideoPlaying(document.pictureInPictureElement as HTMLVideoElement)
     ) {
-      ;(video as any).webkitSetPresentationMode('inline')
+      return
-    } else {
-      document.exitPictureInPicture()
-    }
-
-    if (this.currentVideo === video) {
-      this.currentVideo = null
     }
+    this.play(video)
   }
 
-  async playVideo(video: HTMLVideoElement) {
+  play(video: HTMLVideoElement) {
+    if (document.pictureInPictureElement && document.pictureInPictureElement !== video) {
+      ;(document.pictureInPictureElement as HTMLVideoElement).pause()
+    }
     if (this.currentVideo && this.currentVideo !== video) {
-      this.exitPiP(this.currentVideo)
+      this.currentVideo.pause()
     }
     this.currentVideo = video
-    video.play()
+    if (isVideoPlaying(video)) {
+      return
+    }
+
+    this.currentVideo.play().catch((error) => {
+      console.error('Error playing video:', error)
+      this.currentVideo = null
+    })
   }
 }
 
 const instance = new VideoManagerService()
 export default instance
+
+function isVideoPlaying(video: HTMLVideoElement) {
+  return video.currentTime > 0 && !video.paused && !video.ended && video.readyState >= 2
+}
+
+function isPipElement(video: HTMLVideoElement) {
+  if (document.pictureInPictureElement === video) {
+    return true
+  }
+  return (video as any).webkitPresentationMode === 'picture-in-picture'
+}