@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/features/picture-in-picture/pip-manager.js

@@ -0,0 +1,353 @@
+export class EnhancedPiPManager {
+    videoElement = null;
+    pipWindow = null;
+    eventListeners = new Map();
+    isCurrentlyActive = false;
+    constructor() {
+        this.setupEventListeners();
+    }
+    /**
+     * Check if Picture-in-Picture is supported
+     */
+    isSupported() {
+        const capabilities = this.getCapabilities();
+        return capabilities.supported;
+    }
+    /**
+     * Get detailed PiP capabilities
+     */
+    getCapabilities() {
+        const capabilities = {
+            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() {
+        return this.isCurrentlyActive;
+    }
+    /**
+     * Enter Picture-in-Picture mode
+     */
+    async enter(element, options = {}) {
+        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() {
+        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, options = {}) {
+        if (this.isCurrentlyActive) {
+            await this.exit();
+        }
+        else {
+            await this.enter(element, options);
+        }
+    }
+    /**
+     * Add event listener
+     */
+    addEventListener(event, callback) {
+        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
+     */
+    async enterVideoPiP(element, options) {
+        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
+     */
+    async enterDocumentPiP(options) {
+        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
+     */
+    setupEventListeners() {
+        // 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) => {
+                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
+     */
+    handleDocumentPiPClose() {
+        this.isCurrentlyActive = false;
+        this.pipWindow = null;
+        this.emit('exit', { type: 'document' });
+    }
+    /**
+     * Emit events to listeners
+     */
+    emit(event, data) {
+        const listeners = this.eventListeners.get(event);
+        if (listeners) {
+            listeners.forEach(callback => callback(data));
+        }
+    }
+    /**
+     * Create custom controls for PiP window
+     */
+    createCustomControls(options = {}) {
+        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, aspectRatio = 16 / 9) {
+        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() {
+        this.exit().catch(() => { });
+        this.eventListeners.clear();
+        this.videoElement = null;
+        this.pipWindow = null;
+        this.isCurrentlyActive = false;
+    }
+}
+// Singleton instance
+export const pipManager = new EnhancedPiPManager();