@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

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

@@ -1,277 +1,276 @@
 export interface PiPCapabilities {
-  supported: boolean
-  documentPiP?: boolean
-  videoPiP?: boolean
+	supported: boolean
+	documentPiP?: boolean
+	videoPiP?: boolean
 }
 
 export interface PiPOptions {
-  width?: number
-  height?: number
-  disallowReturnToOpener?: boolean
+	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
+	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 = `
+	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;
@@ -285,10 +284,10 @@ export class EnhancedPiPManager implements PiPManager {
       z-index: 1000;
     `
 
-    // Play/Pause button
-    const playPauseBtn = document.createElement('button')
-    playPauseBtn.innerHTML = '▶️'
-    playPauseBtn.style.cssText = `
+		// Play/Pause button
+		const playPauseBtn = document.createElement("button")
+		playPauseBtn.innerHTML = "▶️"
+		playPauseBtn.style.cssText = `
       background: none;
       border: none;
       color: white;
@@ -296,72 +295,72 @@ export class EnhancedPiPManager implements PiPManager {
       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 = `
+		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 = `
+
+		const progressBar = document.createElement("div")
+		progressBar.style.cssText = `
       height: 100%;
       background: #3b82f6;
       border-radius: 2px;
       width: 0%;
     `
-    progressContainer.appendChild(progressBar)
+		progressContainer.appendChild(progressBar)
 
-    // Volume control
-    const volumeContainer = document.createElement('div')
-    volumeContainer.style.cssText = `
+		// 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 = `
+		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 = `
+		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 = `
+		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;
@@ -369,61 +368,61 @@ export class EnhancedPiPManager implements PiPManager {
       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
-  }
+		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()
+export const pipManager = new EnhancedPiPManager()