@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

@@ -1,428 +0,0 @@
-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
-			if (this.pipWindow) this.pipWindow.addEventListener("unload", () => {
-				this.handleDocumentPiPClose()
-			})
-
-			if (this.pipWindow) 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()