@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -1,429 +1,411 @@
-export interface MediaMetadata {
-  title?: string
-  artist?: string
-  album?: string
-  artwork?: MediaImage[]
+export interface CustomMediaMetadata {
+	title?: string
+	artist?: string
+	album?: string
+	artwork?: MediaImage[]
 }
 
 export interface MediaImage {
-  src: string
-  sizes?: string
-  type?: string
+	src: string
+	sizes?: string
+	type?: string
 }
 
 export interface MediaPositionState {
-  duration?: number
-  playbackRate?: number
-  position?: number
+	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
+	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
+	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
-  }
+	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: CustomMediaMetadata): 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
+
+			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<CustomMediaMetadata>
+	): Promise<void> {
+		const metadata: CustomMediaMetadata = {
+			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)
+	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 }