feat: add YouTube embedded player (#460)

Co-authored-by: Daniel  Vergara <daniel.omar.vergara@gmail.com>

src/services/media-manager.service.ts

@@ -1,7 +1,11 @@
+import { YouTubePlayer } from '@/types/youtube'
+
+type Media = HTMLMediaElement | YouTubePlayer
+
 class MediaManagerService {
   static instance: MediaManagerService
 
-  private currentMedia: HTMLMediaElement | null = null
+  private currentMedia: Media | null = null
 
   constructor() {
     if (!MediaManagerService.instance) {
@@ -10,17 +14,20 @@ class MediaManagerService {
     return MediaManagerService.instance
   }
 
-  pause(media: HTMLMediaElement) {
+  pause(media: Media | null) {
+    if (!media) {
+      return
+    }
     if (isPipElement(media)) {
       return
     }
     if (this.currentMedia === media) {
       this.currentMedia = null
     }
-    media.pause()
+    pause(media)
   }
 
-  autoPlay(media: HTMLMediaElement) {
+  autoPlay(media: Media) {
     if (
       document.pictureInPictureElement &&
       isMediaPlaying(document.pictureInPictureElement as HTMLMediaElement)
@@ -30,19 +37,22 @@ class MediaManagerService {
     this.play(media)
   }
 
-  play(media: HTMLMediaElement) {
+  play(media: Media | null) {
+    if (!media) {
+      return
+    }
     if (document.pictureInPictureElement && document.pictureInPictureElement !== media) {
       ;(document.pictureInPictureElement as HTMLMediaElement).pause()
     }
     if (this.currentMedia && this.currentMedia !== media) {
-      this.currentMedia.pause()
+      pause(this.currentMedia)
     }
     this.currentMedia = media
     if (isMediaPlaying(media)) {
       return
     }
 
-    this.currentMedia.play().catch((error) => {
+    play(this.currentMedia).catch((error) => {
       console.error('Error playing media:', error)
       this.currentMedia = null
     })
@@ -52,13 +62,37 @@ class MediaManagerService {
 const instance = new MediaManagerService()
 export default instance
 
-function isMediaPlaying(media: HTMLMediaElement) {
+function isYouTubePlayer(media: Media): media is YouTubePlayer {
+  return (media as YouTubePlayer).pauseVideo !== undefined
+}
+
+function isMediaPlaying(media: Media) {
+  if (isYouTubePlayer(media)) {
+    return media.getPlayerState() === window.YT.PlayerState.PLAYING
+  }
   return media.currentTime > 0 && !media.paused && !media.ended && media.readyState >= 2
 }
 
-function isPipElement(media: HTMLMediaElement) {
+function isPipElement(media: Media) {
+  if (isYouTubePlayer(media)) {
+    return false // YouTube players do not support Picture-in-Picture
+  }
   if (document.pictureInPictureElement === media) {
     return true
   }
   return (media as any).webkitPresentationMode === 'picture-in-picture'
 }
+
+function pause(media: Media) {
+  if (isYouTubePlayer(media)) {
+    return media.pauseVideo()
+  }
+  return media.pause()
+}
+
+async function play(media: Media) {
+  if (isYouTubePlayer(media)) {
+    return media.playVideo()
+  }
+  return media.play()
+}