@therealtinhtute/baroiplayer 1.0.0

package/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 }