@therealtinhtute/baroiplayer 1.0.5 → 1.0.7

package/src/features/media-session/media-session-manager.js

@@ -1,331 +0,0 @@
-export class MediaSessionManager {
-    callbacks = {};
-    config;
-    positionUpdateInterval = null;
-    isInitialized = false;
-    constructor(config = {}) {
-        this.config = {
-            enableActions: ['play', 'pause', 'seekbackward', 'seekforward', 'seekto'],
-            skipBackwardTime: 10,
-            skipForwardTime: 10,
-            enablePositionTracking: true,
-            ...config
-        };
-        this.initialize();
-    }
-    /**
-     * Initialize Media Session API
-     */
-    initialize() {
-        if (!this.isSupported()) {
-            console.warn('Media Session API is not supported');
-            return;
-        }
-        this.setupActionHandlers();
-        this.isInitialized = true;
-    }
-    /**
-     * Check if Media Session API is supported
-     */
-    isSupported() {
-        return 'mediaSession' in navigator;
-    }
-    /**
-     * Set media metadata
-     */
-    setMetadata(metadata) {
-        if (!this.isInitialized)
-            return;
-        try {
-            const processedArtwork = metadata.artwork?.map(img => ({
-                src: img.src,
-                sizes: img.sizes || '512x512',
-                type: img.type || 'image/png'
-            }));
-            navigator.mediaSession.metadata = new MediaMetadata({
-                title: metadata.title || 'Unknown Title',
-                artist: metadata.artist || 'Unknown Artist',
-                album: metadata.album || 'Unknown Album',
-                artwork: processedArtwork || []
-            });
-        }
-        catch (error) {
-            console.error('Failed to set media metadata:', error);
-        }
-    }
-    /**
-     * Set playback state
-     */
-    setPlaybackState(state) {
-        if (!this.isInitialized)
-            return;
-        try {
-            navigator.mediaSession.playbackState = state;
-        }
-        catch (error) {
-            console.error('Failed to set playback state:', error);
-        }
-    }
-    /**
-     * Set position state
-     */
-    setPositionState(state) {
-        if (!this.isInitialized || !this.config.enablePositionTracking)
-            return;
-        try {
-            navigator.mediaSession.setPositionState(state);
-        }
-        catch (error) {
-            console.error('Failed to set position state:', error);
-        }
-    }
-    /**
-     * Register callbacks for media actions
-     */
-    setCallbacks(callbacks) {
-        this.callbacks = { ...this.callbacks, ...callbacks };
-        if (this.isInitialized) {
-            this.updateActionHandlers();
-        }
-    }
-    /**
-     * Setup action handlers
-     */
-    setupActionHandlers() {
-        const actions = this.config.enableActions || [];
-        actions.forEach(action => {
-            this.setActionHandler(action);
-        });
-    }
-    /**
-     * Update action handlers with current callbacks
-     */
-    updateActionHandlers() {
-        this.setupActionHandlers();
-    }
-    /**
-     * Set individual action handler
-     */
-    setActionHandler(action) {
-        try {
-            navigator.mediaSession.setActionHandler(action, (details) => {
-                this.handleAction(action, details);
-            });
-        }
-        catch (error) {
-            console.warn(`Failed to set handler for action: ${action}`, error);
-        }
-    }
-    /**
-     * Handle media session actions
-     */
-    handleAction(action, details) {
-        switch (action) {
-            case 'play':
-                this.callbacks.onPlay?.();
-                break;
-            case 'pause':
-                this.callbacks.onPause?.();
-                break;
-            case 'seekbackward':
-                const backwardTime = details?.seekOffset || this.config.skipBackwardTime || 10;
-                this.callbacks.onSeekBackward?.(backwardTime);
-                break;
-            case 'seekforward':
-                const forwardTime = details?.seekOffset || this.config.skipForwardTime || 10;
-                this.callbacks.onSeekForward?.(forwardTime);
-                break;
-            case 'seekto':
-                if (details?.seekTime !== undefined) {
-                    this.callbacks.onSeekTo?.(details.seekTime);
-                }
-                break;
-            case 'previoustrack':
-                this.callbacks.onPreviousTrack?.();
-                break;
-            case 'nexttrack':
-                this.callbacks.onNextTrack?.();
-                break;
-            case 'stop':
-                this.callbacks.onStop?.();
-                break;
-            case 'togglemicrophone':
-                this.callbacks.onToggleMicrophone?.();
-                break;
-            case 'togglecamera':
-                this.callbacks.onToggleCamera?.();
-                break;
-            case 'hangup':
-                this.callbacks.onHangup?.();
-                break;
-            default:
-                console.warn(`Unhandled media session action: ${action}`);
-        }
-    }
-    /**
-     * Start automatic position tracking
-     */
-    startPositionTracking(getCurrentTime, getDuration) {
-        if (!this.config.enablePositionTracking || this.positionUpdateInterval) {
-            return;
-        }
-        this.positionUpdateInterval = window.setInterval(() => {
-            try {
-                const currentTime = getCurrentTime();
-                const duration = getDuration();
-                if (!isNaN(currentTime) && !isNaN(duration) && duration > 0) {
-                    this.setPositionState({
-                        duration,
-                        position: currentTime,
-                        playbackRate: 1.0
-                    });
-                }
-            }
-            catch (error) {
-                console.error('Failed to update position state:', error);
-            }
-        }, 1000); // Update every second
-    }
-    /**
-     * Stop automatic position tracking
-     */
-    stopPositionTracking() {
-        if (this.positionUpdateInterval) {
-            clearInterval(this.positionUpdateInterval);
-            this.positionUpdateInterval = null;
-        }
-    }
-    /**
-     * Enable specific actions
-     */
-    enableActions(actions) {
-        this.config.enableActions = [...(this.config.enableActions || []), ...actions];
-        if (this.isInitialized) {
-            actions.forEach(action => {
-                this.setActionHandler(action);
-            });
-        }
-    }
-    /**
-     * Disable specific actions
-     */
-    disableActions(actions) {
-        if (!this.isInitialized)
-            return;
-        actions.forEach(action => {
-            try {
-                navigator.mediaSession.setActionHandler(action, null);
-            }
-            catch (error) {
-                console.warn(`Failed to disable action: ${action}`, error);
-            }
-        });
-        this.config.enableActions = this.config.enableActions?.filter(action => !actions.includes(action));
-    }
-    /**
-     * Create artwork from video thumbnail
-     */
-    createArtworkFromVideo(videoElement) {
-        return new Promise((resolve) => {
-            try {
-                const canvas = document.createElement('canvas');
-                const ctx = canvas.getContext('2d');
-                if (!ctx || videoElement.videoWidth === 0 || videoElement.videoHeight === 0) {
-                    resolve([]);
-                    return;
-                }
-                canvas.width = Math.min(videoElement.videoWidth, 512);
-                canvas.height = Math.min(videoElement.videoHeight, 512);
-                ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
-                canvas.toBlob((blob) => {
-                    if (blob) {
-                        const url = URL.createObjectURL(blob);
-                        resolve([{
-                                src: url,
-                                sizes: `${canvas.width}x${canvas.height}`,
-                                type: blob.type
-                            }]);
-                    }
-                    else {
-                        resolve([]);
-                    }
-                }, 'image/png');
-            }
-            catch (error) {
-                console.error('Failed to create artwork from video:', error);
-                resolve([]);
-            }
-        });
-    }
-    /**
-     * Update metadata from media element
-     */
-    async updateFromMediaElement(mediaElement, additionalInfo) {
-        const metadata = {
-            title: additionalInfo?.title || document.title || 'Media Player',
-            artist: additionalInfo?.artist || 'Unknown Artist',
-            album: additionalInfo?.album || 'Unknown Album',
-            artwork: additionalInfo?.artwork || []
-        };
-        // Try to extract artwork from video element
-        if (mediaElement instanceof HTMLVideoElement && metadata.artwork?.length === 0) {
-            try {
-                const videoArtwork = await this.createArtworkFromVideo(mediaElement);
-                metadata.artwork = videoArtwork;
-            }
-            catch (error) {
-                console.error('Failed to extract video artwork:', error);
-            }
-        }
-        this.setMetadata(metadata);
-    }
-    /**
-     * Get current session info
-     */
-    getSessionInfo() {
-        return {
-            supported: this.isSupported(),
-            initialized: this.isInitialized,
-            metadata: this.isInitialized ? navigator.mediaSession.metadata : null,
-            playbackState: this.isInitialized ? navigator.mediaSession.playbackState : null,
-            enabledActions: this.config.enableActions || []
-        };
-    }
-    /**
-     * Reset session
-     */
-    reset() {
-        if (!this.isInitialized)
-            return;
-        try {
-            navigator.mediaSession.metadata = null;
-            navigator.mediaSession.playbackState = 'none';
-            this.stopPositionTracking();
-            const actions = this.config.enableActions || [];
-            actions.forEach(action => {
-                try {
-                    navigator.mediaSession.setActionHandler(action, null);
-                }
-                catch (error) {
-                    console.warn(`Failed to reset handler for action: ${action}`, error);
-                }
-            });
-            this.callbacks = {};
-        }
-        catch (error) {
-            console.error('Failed to reset media session:', error);
-        }
-    }
-    /**
-     * Cleanup resources
-     */
-    destroy() {
-        this.stopPositionTracking();
-        this.reset();
-        this.isInitialized = false;
-    }
-}
-// Utility function to create a configured media session manager
-export function createMediaSessionManager(config) {
-    return new MediaSessionManager(config);
-}

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

@@ -1,353 +0,0 @@
-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();