@therealtinhtute/baroiplayer 1.0.0

package/src/features/picture-in-picture/pip-manager.ts

@@ -0,0 +1,429 @@
+export interface PiPCapabilities {
+  supported: boolean
+  documentPiP?: boolean
+  videoPiP?: boolean
+}
+
+export interface PiPOptions {
+  width?: number
+  height?: number
+  disallowReturnToOpener?: boolean
+}
+
+export interface PiPManager {
+  isSupported: () => boolean
+  isActive: () => boolean
+  enter: (element?: HTMLVideoElement, options?: PiPOptions) => Promise<void>
+  exit: () => Promise<void>
+  toggle: (element?: HTMLVideoElement, options?: PiPOptions) => Promise<void>
+  addEventListener: (event: string, callback: Function) => () => void
+  getCapabilities: () => PiPCapabilities
+}
+
+export class EnhancedPiPManager implements PiPManager {
+  private videoElement: HTMLVideoElement | null = null
+  private pipWindow: Window | null = null
+  private eventListeners: Map<string, Set<Function>> = new Map()
+  private isCurrentlyActive: boolean = false
+
+  constructor() {
+    this.setupEventListeners()
+  }
+
+  /**
+   * Check if Picture-in-Picture is supported
+   */
+  isSupported(): boolean {
+    const capabilities = this.getCapabilities()
+    return capabilities.supported
+  }
+
+  /**
+   * Get detailed PiP capabilities
+   */
+  getCapabilities(): PiPCapabilities {
+    const capabilities: PiPCapabilities = {
+      supported: false,
+      documentPiP: false,
+      videoPiP: false
+    }
+
+    // Check for video Picture-in-Picture support
+    if ('pictureInPictureEnabled' in document && document.pictureInPictureEnabled) {
+      capabilities.videoPiP = true
+      capabilities.supported = true
+    }
+
+    // Check for Document Picture-in-Picture support (Chrome 111+)
+    if ('documentPictureInPicture' in window) {
+      capabilities.documentPiP = true
+      capabilities.supported = true
+    }
+
+    return capabilities
+  }
+
+  /**
+   * Check if Picture-in-Picture is currently active
+   */
+  isActive(): boolean {
+    return this.isCurrentlyActive
+  }
+
+  /**
+   * Enter Picture-in-Picture mode
+   */
+  async enter(element?: HTMLVideoElement, options: PiPOptions = {}): Promise<void> {
+    if (!this.isSupported()) {
+      throw new Error('Picture-in-Picture is not supported')
+    }
+
+    if (this.isCurrentlyActive) {
+      return
+    }
+
+    const capabilities = this.getCapabilities()
+    
+    // Try video PiP first if we have a video element
+    if (element && capabilities.videoPiP) {
+      await this.enterVideoPiP(element, options)
+    }
+    // Fallback to document PiP if available
+    else if (capabilities.documentPiP) {
+      await this.enterDocumentPiP(options)
+    }
+    else {
+      throw new Error('No suitable Picture-in-Picture method available')
+    }
+  }
+
+  /**
+   * Exit Picture-in-Picture mode
+   */
+  async exit(): Promise<void> {
+    if (!this.isCurrentlyActive) {
+      return
+    }
+
+    try {
+      if (document.pictureInPictureElement) {
+        await document.exitPictureInPicture()
+      }
+
+      if (this.pipWindow) {
+        this.pipWindow.close()
+        this.pipWindow = null
+      }
+    } catch (error) {
+      console.error('Failed to exit Picture-in-Picture:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Toggle Picture-in-Picture mode
+   */
+  async toggle(element?: HTMLVideoElement, options: PiPOptions = {}): Promise<void> {
+    if (this.isCurrentlyActive) {
+      await this.exit()
+    } else {
+      await this.enter(element, options)
+    }
+  }
+
+  /**
+   * Add event listener
+   */
+  addEventListener(event: string, callback: Function): () => void {
+    if (!this.eventListeners.has(event)) {
+      this.eventListeners.set(event, new Set())
+    }
+
+    this.eventListeners.get(event)!.add(callback)
+
+    return () => {
+      const listeners = this.eventListeners.get(event)
+      if (listeners) {
+        listeners.delete(callback)
+      }
+    }
+  }
+
+  /**
+   * Enter video Picture-in-Picture mode
+   */
+  private async enterVideoPiP(element: HTMLVideoElement, options: PiPOptions): Promise<void> {
+    try {
+      this.videoElement = element
+
+      // Request video Picture-in-Picture
+      await element.requestPictureInPicture()
+      
+      this.isCurrentlyActive = true
+      this.emit('enter', { type: 'video' })
+
+    } catch (error) {
+      console.error('Failed to enter video Picture-in-Picture:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Enter document Picture-in-Picture mode
+   */
+  private async enterDocumentPiP(options: PiPOptions): Promise<void> {
+    if (!('documentPictureInPicture' in window)) {
+      throw new Error('Document Picture-in-Picture is not supported')
+    }
+
+    try {
+      const { width = 640, height = 360, disallowReturnToOpener = false } = options
+
+      // @ts-ignore - documentPictureInPicture is experimental
+      this.pipWindow = await window.documentPictureInPicture.requestWindow({
+        width,
+        height,
+        disallowReturnToOpener
+      })
+
+      this.isCurrentlyActive = true
+      this.emit('enter', { type: 'document', window: this.pipWindow })
+
+      // Set up window event listeners
+      this.pipWindow.addEventListener('unload', () => {
+        this.handleDocumentPiPClose()
+      })
+
+      this.pipWindow.addEventListener('pagehide', () => {
+        this.handleDocumentPiPClose()
+      })
+
+    } catch (error) {
+      console.error('Failed to enter document Picture-in-Picture:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Setup global event listeners
+   */
+  private setupEventListeners(): void {
+    // Video PiP events
+    document.addEventListener('enterpictureinpicture', (event) => {
+      this.isCurrentlyActive = true
+      this.emit('enter', { type: 'video', element: event.target })
+    })
+
+    document.addEventListener('leavepictureinpicture', (event) => {
+      this.isCurrentlyActive = false
+      this.videoElement = null
+      this.emit('exit', { type: 'video', element: event.target })
+    })
+
+    // Document PiP events (if supported)
+    if ('documentPictureInPicture' in window) {
+      // @ts-ignore - documentPictureInPicture is experimental
+      window.documentPictureInPicture.addEventListener('enter', (event: any) => {
+        this.isCurrentlyActive = true
+        this.pipWindow = event.window
+        this.emit('enter', { type: 'document', window: event.window })
+      })
+    }
+
+    // Handle visibility change (when user switches tabs)
+    document.addEventListener('visibilitychange', () => {
+      if (document.hidden && this.isCurrentlyActive) {
+        this.emit('backgrounded')
+      } else if (!document.hidden && this.isCurrentlyActive) {
+        this.emit('foregrounded')
+      }
+    })
+  }
+
+  /**
+   * Handle document PiP window close
+   */
+  private handleDocumentPiPClose(): void {
+    this.isCurrentlyActive = false
+    this.pipWindow = null
+    this.emit('exit', { type: 'document' })
+  }
+
+  /**
+   * Emit events to listeners
+   */
+  private emit(event: string, data?: any): void {
+    const listeners = this.eventListeners.get(event)
+    if (listeners) {
+      listeners.forEach(callback => callback(data))
+    }
+  }
+
+  /**
+   * Create custom controls for PiP window
+   */
+  createCustomControls(options: {
+    onPlay?: () => void
+    onPause?: () => void
+    onSeek?: (time: number) => void
+    onVolumeChange?: (volume: number) => void
+    onClose?: () => void
+  } = {}): HTMLElement {
+    const controlsContainer = document.createElement('div')
+    controlsContainer.className = 'pip-controls'
+    controlsContainer.style.cssText = `
+      position: fixed;
+      bottom: 10px;
+      left: 10px;
+      right: 10px;
+      background: rgba(0, 0, 0, 0.8);
+      border-radius: 8px;
+      padding: 10px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      z-index: 1000;
+    `
+
+    // Play/Pause button
+    const playPauseBtn = document.createElement('button')
+    playPauseBtn.innerHTML = '▶️'
+    playPauseBtn.style.cssText = `
+      background: none;
+      border: none;
+      color: white;
+      font-size: 16px;
+      cursor: pointer;
+      padding: 5px;
+    `
+    playPauseBtn.onclick = () => {
+      const isPlaying = playPauseBtn.innerHTML === '⏸️'
+      if (isPlaying) {
+        options.onPause?.()
+        playPauseBtn.innerHTML = '▶️'
+      } else {
+        options.onPlay?.()
+        playPauseBtn.innerHTML = '⏸️'
+      }
+    }
+
+    // Progress bar
+    const progressContainer = document.createElement('div')
+    progressContainer.style.cssText = `
+      flex: 1;
+      height: 4px;
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 2px;
+      cursor: pointer;
+    `
+    
+    const progressBar = document.createElement('div')
+    progressBar.style.cssText = `
+      height: 100%;
+      background: #3b82f6;
+      border-radius: 2px;
+      width: 0%;
+    `
+    progressContainer.appendChild(progressBar)
+
+    // Volume control
+    const volumeContainer = document.createElement('div')
+    volumeContainer.style.cssText = `
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    `
+
+    const volumeIcon = document.createElement('span')
+    volumeIcon.innerHTML = '🔊'
+    volumeIcon.style.cssText = `
+      font-size: 14px;
+      cursor: pointer;
+    `
+
+    const volumeSlider = document.createElement('input')
+    volumeSlider.type = 'range'
+    volumeSlider.min = '0'
+    volumeSlider.max = '100'
+    volumeSlider.value = '100'
+    volumeSlider.style.cssText = `
+      width: 60px;
+      height: 4px;
+    `
+    volumeSlider.oninput = () => {
+      const volume = parseInt(volumeSlider.value) / 100
+      options.onVolumeChange?.(volume)
+    }
+
+    volumeContainer.appendChild(volumeIcon)
+    volumeContainer.appendChild(volumeSlider)
+
+    // Close button
+    const closeBtn = document.createElement('button')
+    closeBtn.innerHTML = '✕'
+    closeBtn.style.cssText = `
+      background: none;
+      border: none;
+      color: white;
+      font-size: 16px;
+      cursor: pointer;
+      padding: 5px;
+    `
+    closeBtn.onclick = () => {
+      options.onClose?.()
+      this.exit()
+    }
+
+    // Assemble controls
+    controlsContainer.appendChild(playPauseBtn)
+    controlsContainer.appendChild(progressContainer)
+    controlsContainer.appendChild(volumeContainer)
+    controlsContainer.appendChild(closeBtn)
+
+    return controlsContainer
+  }
+
+  /**
+   * Setup responsive sizing for PiP window
+   */
+  setupResponsiveSizing(window: Window, aspectRatio: number = 16/9): void {
+    if (!window) return
+
+    const resizeWindow = () => {
+      const maxWidth = screen.width * 0.3 // 30% of screen width
+      const maxHeight = screen.height * 0.3 // 30% of screen height
+      
+      let width = maxWidth
+      let height = width / aspectRatio
+      
+      if (height > maxHeight) {
+        height = maxHeight
+        width = height * aspectRatio
+      }
+      
+      window.resizeTo(Math.round(width), Math.round(height))
+    }
+
+    // Initial resize
+    resizeWindow()
+
+    // Handle screen orientation changes
+    if (screen.orientation) {
+      screen.orientation.addEventListener('change', resizeWindow)
+    }
+  }
+
+  /**
+   * Cleanup resources
+   */
+  destroy(): void {
+    this.exit().catch(() => {})
+    this.eventListeners.clear()
+    this.videoElement = null
+    this.pipWindow = null
+    this.isCurrentlyActive = false
+  }
+}
+
+// Singleton instance
+export const pipManager = new EnhancedPiPManager()