@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/features/media-session/media-session-manager.ts

@@ -0,0 +1,429 @@
+export interface MediaMetadata {
+  title?: string
+  artist?: string
+  album?: string
+  artwork?: MediaImage[]
+}
+
+export interface MediaImage {
+  src: string
+  sizes?: string
+  type?: string
+}
+
+export interface MediaPositionState {
+  duration?: number
+  playbackRate?: number
+  position?: number
+}
+
+export interface MediaSessionCallbacks {
+  onPlay?: () => void
+  onPause?: () => void
+  onSeekBackward?: (skipTime?: number) => void
+  onSeekForward?: (skipTime?: number) => void
+  onSeekTo?: (seekTime: number) => void
+  onPreviousTrack?: () => void
+  onNextTrack?: () => void
+  onStop?: () => void
+  onToggleMicrophone?: () => void
+  onToggleCamera?: () => void
+  onHangup?: () => void
+}
+
+export interface MediaSessionConfig {
+  enableActions?: string[]
+  skipBackwardTime?: number
+  skipForwardTime?: number
+  enablePositionTracking?: boolean
+}
+
+export class MediaSessionManager {
+  private callbacks: MediaSessionCallbacks = {}
+  private config: MediaSessionConfig
+  private positionUpdateInterval: number | null = null
+  private isInitialized = false
+
+  constructor(config: MediaSessionConfig = {}) {
+    this.config = {
+      enableActions: ['play', 'pause', 'seekbackward', 'seekforward', 'seekto'],
+      skipBackwardTime: 10,
+      skipForwardTime: 10,
+      enablePositionTracking: true,
+      ...config
+    }
+
+    this.initialize()
+  }
+
+  /**
+   * Initialize Media Session API
+   */
+  private initialize(): void {
+    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(): boolean {
+    return 'mediaSession' in navigator
+  }
+
+  /**
+   * Set media metadata
+   */
+  setMetadata(metadata: MediaMetadata): void {
+    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: MediaSessionPlaybackState): void {
+    if (!this.isInitialized) return
+
+    try {
+      navigator.mediaSession.playbackState = state
+    } catch (error) {
+      console.error('Failed to set playback state:', error)
+    }
+  }
+
+  /**
+   * Set position state
+   */
+  setPositionState(state: MediaPositionState): void {
+    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: MediaSessionCallbacks): void {
+    this.callbacks = { ...this.callbacks, ...callbacks }
+    
+    if (this.isInitialized) {
+      this.updateActionHandlers()
+    }
+  }
+
+  /**
+   * Setup action handlers
+   */
+  private setupActionHandlers(): void {
+    const actions = this.config.enableActions || []
+
+    actions.forEach(action => {
+      this.setActionHandler(action as MediaSessionAction)
+    })
+  }
+
+  /**
+   * Update action handlers with current callbacks
+   */
+  private updateActionHandlers(): void {
+    this.setupActionHandlers()
+  }
+
+  /**
+   * Set individual action handler
+   */
+  private setActionHandler(action: MediaSessionAction): void {
+    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
+   */
+  private handleAction(action: MediaSessionAction, details?: MediaSessionActionDetails): void {
+    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: () => number, getDuration: () => number): void {
+    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(): void {
+    if (this.positionUpdateInterval) {
+      clearInterval(this.positionUpdateInterval)
+      this.positionUpdateInterval = null
+    }
+  }
+
+  /**
+   * Enable specific actions
+   */
+  enableActions(actions: MediaSessionAction[]): void {
+    this.config.enableActions = [...(this.config.enableActions || []), ...actions]
+    
+    if (this.isInitialized) {
+      actions.forEach(action => {
+        this.setActionHandler(action)
+      })
+    }
+  }
+
+  /**
+   * Disable specific actions
+   */
+  disableActions(actions: MediaSessionAction[]): void {
+    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 as MediaSessionAction)
+    )
+  }
+
+  /**
+   * Create artwork from video thumbnail
+   */
+  createArtworkFromVideo(videoElement: HTMLVideoElement): Promise<MediaImage[]> {
+    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: HTMLMediaElement, additionalInfo?: Partial<MediaMetadata>): Promise<void> {
+    const metadata: MediaMetadata = {
+      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(): {
+    supported: boolean
+    initialized: boolean
+    metadata: MediaMetadata | null
+    playbackState: MediaSessionPlaybackState | null
+    enabledActions: string[]
+  } {
+    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(): void {
+    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 as MediaSessionAction, 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(): void {
+    this.stopPositionTracking()
+    this.reset()
+    this.isInitialized = false
+  }
+}
+
+// Utility function to create a configured media session manager
+export function createMediaSessionManager(config?: MediaSessionConfig): MediaSessionManager {
+  return new MediaSessionManager(config)
+}
+
+// Type definitions for better TypeScript support
+declare global {
+  interface Navigator {
+    mediaSession: MediaSession
+  }
+}
+
+// Export types for use in other modules
+export type { MediaSessionAction, MediaSessionActionDetails, MediaSessionPlaybackState }

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

@@ -0,0 +1,94 @@
+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 declare class EnhancedPiPManager implements PiPManager {
+    private videoElement;
+    private pipWindow;
+    private eventListeners;
+    private isCurrentlyActive;
+    constructor();
+    /**
+     * Check if Picture-in-Picture is supported
+     */
+    isSupported(): boolean;
+    /**
+     * Get detailed PiP capabilities
+     */
+    getCapabilities(): PiPCapabilities;
+    /**
+     * Check if Picture-in-Picture is currently active
+     */
+    isActive(): boolean;
+    /**
+     * Enter Picture-in-Picture mode
+     */
+    enter(element?: HTMLVideoElement, options?: PiPOptions): Promise<void>;
+    /**
+     * Exit Picture-in-Picture mode
+     */
+    exit(): Promise<void>;
+    /**
+     * Toggle Picture-in-Picture mode
+     */
+    toggle(element?: HTMLVideoElement, options?: PiPOptions): Promise<void>;
+    /**
+     * Add event listener
+     */
+    addEventListener(event: string, callback: Function): () => void;
+    /**
+     * Enter video Picture-in-Picture mode
+     */
+    private enterVideoPiP;
+    /**
+     * Enter document Picture-in-Picture mode
+     */
+    private enterDocumentPiP;
+    /**
+     * Setup global event listeners
+     */
+    private setupEventListeners;
+    /**
+     * Handle document PiP window close
+     */
+    private handleDocumentPiPClose;
+    /**
+     * Emit events to listeners
+     */
+    private emit;
+    /**
+     * Create custom controls for PiP window
+     */
+    createCustomControls(options?: {
+        onPlay?: () => void;
+        onPause?: () => void;
+        onSeek?: (time: number) => void;
+        onVolumeChange?: (volume: number) => void;
+        onClose?: () => void;
+    }): HTMLElement;
+    /**
+     * Setup responsive sizing for PiP window
+     */
+    setupResponsiveSizing(window: Window, aspectRatio?: number): void;
+    /**
+     * Cleanup resources
+     */
+    destroy(): void;
+}
+export declare const pipManager: EnhancedPiPManager;
+//# sourceMappingURL=pip-manager.d.ts.map

package/dist/src/features/picture-in-picture/pip-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pip-manager.d.ts","sourceRoot":"","sources":["pip-manager.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;AAED,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,MAAM,OAAO,CAAA;IAC1B,QAAQ,EAAE,MAAM,OAAO,CAAA;IACvB,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,UAAU,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC1E,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IACzB,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,UAAU,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC3E,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,KAAK,MAAM,IAAI,CAAA;IACnE,eAAe,EAAE,MAAM,eAAe,CAAA;CACvC;AAED,qBAAa,kBAAmB,YAAW,UAAU;IACnD,OAAO,CAAC,YAAY,CAAgC;IACpD,OAAO,CAAC,SAAS,CAAsB;IACvC,OAAO,CAAC,cAAc,CAAwC;IAC9D,OAAO,CAAC,iBAAiB,CAAiB;;IAM1C;;OAEG;IACH,WAAW,IAAI,OAAO;IAKtB;;OAEG;IACH,eAAe,IAAI,eAAe;IAsBlC;;OAEG;IACH,QAAQ,IAAI,OAAO;IAInB;;OAEG;IACG,KAAK,CAAC,OAAO,CAAC,EAAE,gBAAgB,EAAE,OAAO,GAAE,UAAe,GAAG,OAAO,CAAC,IAAI,CAAC;IAwBhF;;OAEG;IACG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAoB3B;;OAEG;IACG,MAAM,CAAC,OAAO,CAAC,EAAE,gBAAgB,EAAE,OAAO,GAAE,UAAe,GAAG,OAAO,CAAC,IAAI,CAAC;IAQjF;;OAEG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,MAAM,IAAI;IAe/D;;OAEG;YACW,aAAa;IAgB3B;;OAEG;YACW,gBAAgB;IAiC9B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAiC3B;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAM9B;;OAEG;IACH,OAAO,CAAC,IAAI;IAOZ;;OAEG;IACH,oBAAoB,CAAC,OAAO,GAAE;QAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;QACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;QACpB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;QAC/B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;QACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;KAChB,GAAG,WAAW;IAmHpB;;OAEG;IACH,qBAAqB,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,GAAE,MAAa,GAAG,IAAI;IA2BvE;;OAEG;IACH,OAAO,IAAI,IAAI;CAOhB;AAGD,eAAO,MAAM,UAAU,oBAA2B,CAAA"}