react-native-audio-browser 0.0.1 → 0.1.0-next.1

package/src/web/TrackPlayer/Player.ts

@@ -0,0 +1,351 @@
+import type shaka from 'shaka-player/dist/shaka-player.ui'
+import type {
+  Progress,
+  PartialSetupPlayerOptions,
+  Playback,
+  PlaybackError
+} from '../../features'
+import type { Track } from '../../types'
+import type { State as StateType } from './State'
+import { SetupNotCalledError } from './SetupNotCalledError'
+import { State } from './State'
+
+// Extend Window interface for debug purposes
+declare global {
+  interface Window {
+    rnab?: shaka.Player
+  }
+}
+
+// Shaka event type definitions
+interface ShakaErrorEvent extends CustomEvent {
+  detail: {
+    code: number
+    message: string
+  }
+}
+
+interface ShakaBufferingEvent extends CustomEvent {
+  detail: {
+    buffering: boolean
+  }
+}
+
+export class Player {
+  protected hasInitialized = false
+  protected element?: HTMLMediaElement
+  protected player?: shaka.Player
+  protected _current?: Track = undefined
+  protected _playWhenReady = false
+  protected _state: Playback = { state: State.None }
+  protected _isStopped = false
+  protected _loadInProgress = false
+  protected _pendingSeek: number | undefined
+
+  // current getter/setter
+  public get current(): Track | undefined {
+    return this._current
+  }
+  public set current(cur: Track | undefined) {
+    this._current = cur
+  }
+
+  // state getter/setter
+  protected get state(): Playback {
+    return this._state
+  }
+  protected set state(newState: Playback) {
+    this._state = newState
+  }
+
+  // playWhenReady getter/setter
+  public get playWhenReady(): boolean {
+    return this._playWhenReady
+  }
+  public set playWhenReady(pwr: boolean) {
+    this._playWhenReady = pwr
+  }
+
+  /**
+   * Returns the HTML media element, throwing if setup hasn't been called.
+   */
+  protected requireElement(): HTMLMediaElement {
+    if (!this.element) throw new SetupNotCalledError()
+    return this.element
+  }
+
+  /**
+   * Returns the Shaka player instance, throwing if setup hasn't been called.
+   */
+  protected requirePlayer(): shaka.Player {
+    if (!this.player) throw new SetupNotCalledError()
+    return this.player
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async setupPlayer(_options: PartialSetupPlayerOptions = {}): Promise<void> {
+    // shaka only runs in a browser
+    if (typeof window === 'undefined') return
+    if (this.hasInitialized === true) {
+      const error: PlaybackError = {
+        code: 'player_already_initialized',
+        message: 'The player has already been initialized via setupPlayer.'
+      }
+      // eslint-disable-next-line @typescript-eslint/only-throw-error
+      throw error
+    }
+
+    const shaka = (await import('shaka-player/dist/shaka-player.ui')).default
+    // Install built-in polyfills to patch browser incompatibilities.
+    shaka.polyfill.installAll()
+    // Check to see if the browser supports the basic APIs Shaka needs.
+    if (!shaka.Player.isBrowserSupported()) {
+      // This browser does not have the minimum set of APIs we need.
+      this.state = {
+        state: State.Error,
+        error: {
+          code: 'not_supported',
+          message: 'Browser not supported...'
+        }
+      }
+      throw new Error('Browser not supported.')
+    }
+
+    // build dom element and attach shaka-player
+    const element = document.createElement('audio')
+    element.setAttribute('id', 'react-native-audio-browser')
+    document.body.appendChild(element)
+    this.element = element
+
+    const player = new shaka.Player()
+    await player.attach(element)
+    this.player = player
+
+    // Listen for relevant events
+    player.addEventListener('error', (event: Event) => {
+      const errorEvent = event as ShakaErrorEvent
+      this.onError(errorEvent.detail)
+    })
+
+    element.addEventListener('ended', () => this.onStateUpdate(State.Ended))
+    element.addEventListener('playing', () => this.onStateUpdate(State.Playing))
+    element.addEventListener('pause', () => this.onStateUpdate(State.Paused))
+
+    player.addEventListener('loading', () => this.onStateUpdate(State.Loading))
+    player.addEventListener('loaded', () => this.onStateUpdate(State.Ready))
+
+    player.addEventListener('buffering', (event: Event) => {
+      const bufferingEvent = event as ShakaBufferingEvent
+      if (bufferingEvent.detail.buffering === true) {
+        this.onStateUpdate(State.Buffering)
+      } else {
+        this.onStateUpdate(State.Ready)
+      }
+    })
+
+    // Attach player to the window to make it easy to access in the JS console.
+    if (__DEV__) {
+      window.rnab = this.player
+    }
+
+    this.hasInitialized = true
+  }
+
+  /**
+   * event handlers
+   */
+  protected onStateUpdate(state: Exclude<StateType, typeof State.Error>): void {
+    // Ignore Shaka/element events while stopped (e.g., from unload)
+    if (this._isStopped) return
+    this.state = { state }
+  }
+
+  private toNormalizedError(err: unknown): { code: number; message: string } {
+    if (
+      typeof err === 'object' &&
+      err !== null &&
+      'code' in err &&
+      typeof (err as Record<string, unknown>).code === 'number'
+    ) {
+      const e = err as { code: number; message?: string }
+      return { code: e.code, message: e.message ?? 'Unknown error' }
+    }
+
+    const message = err instanceof Error ? err.message : String(err)
+    return { code: -1, message }
+  }
+
+  protected onError(shakaError: { code: number; message: string }): void {
+    // unload the current track to allow for clean playback on other
+    this.player?.unload().catch((err) => {
+      console.error(`Error unloading player on 'onError'`, err)
+    })
+
+    const error: PlaybackError = {
+      code: shakaError.code.toString(),
+      message: shakaError.message
+    }
+
+    this.state = {
+      state: State.Error,
+      error
+    }
+
+    // Log the error.
+    console.debug('Error code', shakaError.code, 'object', shakaError)
+  }
+
+  public load(track: Track, onLoaded?: (track: Track) => void): void {
+    const player = this.requirePlayer()
+    this._isStopped = false
+    this._loadInProgress = true
+
+    if (!track.src) {
+      this._loadInProgress = false
+      this._pendingSeek = undefined
+      const error: PlaybackError = {
+        code: 'invalid_track',
+        message: 'Track does not have a valid src URL'
+      }
+      this.state = {
+        state: State.Error,
+        error
+      }
+      return
+    }
+
+    player
+      .load(track.src)
+      .then(() => {
+        this._loadInProgress = false
+        this.current = track
+        onLoaded?.(track)
+
+        // Execute any pending seek that arrived during loading
+        if (this._pendingSeek !== undefined) {
+          this.requireElement().currentTime = this._pendingSeek
+          this._pendingSeek = undefined
+        }
+
+        // Auto-play if playWhenReady is true
+        if (this.playWhenReady) {
+          this.play()
+        }
+      })
+      .catch((err: unknown) => {
+        this._loadInProgress = false
+        this._pendingSeek = undefined
+        this.onError(this.toNormalizedError(err))
+      })
+  }
+
+  public stop(onComplete?: () => void): void {
+    const player = this.requirePlayer()
+
+    // Match Android: stop sets playWhenReady=false and state=stopped,
+    // but keeps the current track so play() can resume.
+    this._isStopped = true
+    this._loadInProgress = false
+    this._pendingSeek = undefined
+    this.playWhenReady = false
+    this.state = { state: State.Stopped }
+
+    player
+      .unload()
+      .then(() => onComplete?.())
+      .catch((err: unknown) => {
+        console.error('Error unloading player:', err)
+        onComplete?.() // Still call onComplete so callers aren't left hanging
+      })
+  }
+
+  public play(): void {
+    const element = this.requireElement()
+    this.playWhenReady = true
+
+    if (this.state.state === State.Error && this.current) {
+      this.load(this.current)
+      return
+    }
+
+    // Match Android: play() after stop() re-prepares the current track
+    if (this._isStopped && this.current) {
+      this.load(this.current)
+      return
+    }
+
+    element.play().catch((err: unknown) => console.error(err))
+  }
+
+  public retry(): void {
+    const player = this.requirePlayer()
+    player.retryStreaming()
+  }
+
+  public pause(): void {
+    const element = this.requireElement()
+    this.playWhenReady = false
+    element.pause()
+  }
+
+  public togglePlayback(): void {
+    this.requireElement()
+    if (this.playWhenReady) {
+      this.pause()
+    } else {
+      this.play()
+    }
+  }
+
+  public setRate(rate: number): void {
+    const element = this.requireElement()
+    element.defaultPlaybackRate = rate
+    element.playbackRate = rate
+  }
+
+  public getRate(): number {
+    const element = this.requireElement()
+    return element.playbackRate
+  }
+
+  public seekBy(offset: number): void {
+    if (this._loadInProgress) {
+      this._pendingSeek = (this._pendingSeek ?? 0) + offset
+      return
+    }
+    const element = this.requireElement()
+    element.currentTime += offset
+  }
+
+  public seekTo(seconds: number): void {
+    if (this._loadInProgress) {
+      this._pendingSeek = seconds
+      return
+    }
+    const element = this.requireElement()
+    element.currentTime = seconds
+  }
+
+  public setVolume(volume: number): void {
+    const element = this.requireElement()
+    element.volume = volume
+  }
+
+  public getVolume(): number {
+    const element = this.requireElement()
+    return element.volume
+  }
+
+  public getProgress(): Progress {
+    const element = this.requireElement()
+    let buffered = 0
+    if (element.buffered.length > 0) {
+      buffered = element.buffered.end(element.buffered.length - 1)
+    }
+    return {
+      position: element.currentTime,
+      duration: element.duration || 0,
+      buffered
+    }
+  }
+}

package/src/web/TrackPlayer/PlaylistPlayer.ts

@@ -0,0 +1,346 @@
+import type { RepeatMode as RepeatModeType } from '../../features'
+import type { Track } from '../../types'
+import type { State as StateType } from './State'
+import { assertedNotNullish } from '../../utils/validation'
+import { fisherYatesShuffle } from '../util/shuffle'
+import { Player } from './Player'
+import { RepeatMode } from './RepeatMode'
+import { State } from './State'
+
+export class PlaylistPlayer extends Player {
+  // TODO: use immer to make the `playlist` immutable
+  protected playlist: Track[] = []
+  protected lastIndex?: number
+  protected _currentIndex?: number
+  protected repeatMode: RepeatModeType = RepeatMode.Off
+  protected shuffleEnabled: boolean = false
+  protected shuffleOrder: number[] = []
+
+  protected onStateUpdate(state: Exclude<StateType, typeof State.Error>) {
+    super.onStateUpdate(state)
+
+    if (this._isStopped) return
+
+    if (state === State.Ended) {
+      this.onTrackEnded()
+    }
+  }
+
+  protected onTrackEnded() {
+    switch (this.repeatMode) {
+      case RepeatMode.Track:
+        if (this.currentIndex !== undefined) {
+          this.goToIndex(this.currentIndex)
+        }
+        break
+      case RepeatMode.Playlist:
+        this.skipToNext()
+        break
+      default:
+        if (this.getNextIndex() !== undefined) {
+          this.skipToNext()
+        } else {
+          this.onPlaylistEnded()
+        }
+        break
+    }
+  }
+
+  protected onPlaylistEnded() {
+    console.warn('`onPlaylistEnded` is currently unimplemented')
+  }
+
+  protected get currentIndex() {
+    return this._currentIndex
+  }
+
+  protected set currentIndex(current: number | undefined) {
+    this.lastIndex = this.currentIndex
+    this._currentIndex = current
+  }
+
+  protected goToIndex(index: number, initialPosition?: number) {
+    const track = this.playlist[index]
+
+    if (!track) return
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const onLoaded = (_track: Track) => {
+      if (initialPosition !== undefined) {
+        this.seekTo(initialPosition)
+      }
+    }
+
+    if (this.currentIndex !== index) {
+      this.currentIndex = index
+      this.load(track, onLoaded)
+    } else {
+      // Replay the same track - seek to start (or initialPosition if specified)
+      this.seekTo(initialPosition ?? 0)
+      if (this.playWhenReady) {
+        this.play()
+      }
+    }
+  }
+
+  public add(tracks: Track[], insertBeforeIndex?: number): void {
+    if (insertBeforeIndex !== -1 && insertBeforeIndex !== undefined) {
+      this.playlist.splice(insertBeforeIndex, 0, ...tracks)
+    } else {
+      this.playlist.push(...tracks)
+    }
+
+    if (this.currentIndex === undefined) {
+      this.goToIndex(0)
+    }
+
+    // Regenerate shuffle order when tracks are added
+    if (this.shuffleEnabled) {
+      this.generateShuffleOrder()
+    }
+  }
+
+  public skip(index: number, initialPosition?: number): void {
+    const track = this.playlist[index]
+
+    if (track === undefined) {
+      throw new Error('index out of bounds')
+    }
+
+    this.goToIndex(index, initialPosition)
+  }
+
+  public skipToNext(initialPosition?: number): void {
+    if (this.currentIndex === undefined) return
+
+    const nextIndex = this.getNextIndex() ?? this.getWrapAroundFirstIndex()
+    if (nextIndex === undefined) return
+
+    this.goToIndex(nextIndex, initialPosition)
+  }
+
+  public skipToPrevious(initialPosition?: number): void {
+    if (this.currentIndex === undefined) return
+
+    const previousIndex =
+      this.getPreviousIndex() ?? this.getWrapAroundLastIndex()
+    if (previousIndex === undefined) return
+
+    this.goToIndex(previousIndex, initialPosition)
+  }
+
+  protected getNextIndex(): number | undefined {
+    if (this.currentIndex === undefined) return undefined
+
+    if (!this.shuffleEnabled) {
+      // Normal sequential order
+      const nextIndex = this.currentIndex + 1
+      if (nextIndex >= this.playlist.length) return undefined
+      return nextIndex
+    }
+
+    // Find current position in shuffle order
+    const currentShufflePos = this.shuffleOrder.indexOf(this.currentIndex)
+    if (currentShufflePos === -1) return undefined
+
+    // Get next position in shuffle order
+    const nextShufflePos = currentShufflePos + 1
+    if (nextShufflePos >= this.shuffleOrder.length) {
+      return undefined
+    }
+
+    return this.shuffleOrder[nextShufflePos]
+  }
+
+  protected getPreviousIndex(): number | undefined {
+    if (this.currentIndex === undefined) return undefined
+
+    if (!this.shuffleEnabled) {
+      // Normal sequential order
+      const prevIndex = this.currentIndex - 1
+      if (prevIndex < 0) return undefined
+      return prevIndex
+    }
+
+    // Find current position in shuffle order
+    const currentShufflePos = this.shuffleOrder.indexOf(this.currentIndex)
+    if (currentShufflePos === -1) return undefined
+
+    // Get previous position in shuffle order
+    const previousShufflePos = currentShufflePos - 1
+    if (previousShufflePos < 0) {
+      return undefined
+    }
+
+    return this.shuffleOrder[previousShufflePos]
+  }
+
+  protected getWrapAroundFirstIndex(): number | undefined {
+    if (this.repeatMode !== RepeatMode.Playlist) return undefined
+    if (this.shuffleEnabled) return this.shuffleOrder[0]
+    return 0
+  }
+
+  protected getWrapAroundLastIndex(): number | undefined {
+    if (this.repeatMode !== RepeatMode.Playlist) return undefined
+    if (this.shuffleEnabled)
+      return this.shuffleOrder[this.shuffleOrder.length - 1]
+    return this.playlist.length - 1
+  }
+
+  protected generateShuffleOrder(): void {
+    // Create array of indices [0, 1, 2, ..., n-1]
+    this.shuffleOrder = Array.from(
+      { length: this.playlist.length },
+      (_, i) => i
+    )
+
+    // Shuffle the indices
+    fisherYatesShuffle(this.shuffleOrder)
+
+    // If there is NOT a current track, exit
+    if (this.currentIndex === undefined) {
+      return
+    }
+
+    // If there is a current track, move it to the beginning of the shuffle order
+    const currentPos = this.shuffleOrder.indexOf(this.currentIndex)
+    if (currentPos > 0) {
+      const temp = assertedNotNullish(this.shuffleOrder[0])
+      this.shuffleOrder[0] = assertedNotNullish(this.shuffleOrder[currentPos])
+      this.shuffleOrder[currentPos] = temp
+    }
+  }
+
+  public setShuffleEnabled(enabled: boolean): void {
+    this.shuffleEnabled = enabled
+
+    if (enabled) {
+      // Generate new shuffle order when enabling shuffle
+      this.generateShuffleOrder()
+    }
+  }
+
+  public getShuffleEnabled(): boolean {
+    return this.shuffleEnabled
+  }
+
+  public getTrack(index: number): Track | undefined {
+    const track = this.playlist[index]
+    return track
+  }
+
+  public setRepeatMode(mode: RepeatModeType): void {
+    this.repeatMode = mode
+  }
+
+  public getRepeatMode(): RepeatModeType {
+    return this.repeatMode
+  }
+
+  public remove(indexes: number[]): void {
+    const idxSet = new Set(indexes)
+    let isCurrentRemoved = false
+    let removedBeforeCurrent = 0
+
+    this.playlist = this.playlist.filter((_track, idx) => {
+      const keep = !idxSet.has(idx)
+
+      if (!keep) {
+        if (idx === this.currentIndex) {
+          isCurrentRemoved = true
+        } else if (this.currentIndex !== undefined && idx < this.currentIndex) {
+          removedBeforeCurrent++
+        }
+      }
+
+      return keep
+    })
+
+    if (this.currentIndex === undefined) {
+      return
+    }
+
+    if (isCurrentRemoved) {
+      const hasItems = this.playlist.length > 0
+      if (hasItems) {
+        // Adjust for removed items before current, then clamp to valid range
+        const adjustedIndex = this.currentIndex - removedBeforeCurrent
+        // Reset so goToIndex always loads the new track at this position
+        this._currentIndex = undefined
+        this.goToIndex(Math.min(adjustedIndex, this.playlist.length - 1))
+      } else {
+        this.current = undefined
+        this._currentIndex = undefined
+        this.stop()
+      }
+    } else {
+      // Adjust currentIndex to account for removed items before it
+      this._currentIndex = this.currentIndex - removedBeforeCurrent
+    }
+
+    // Regenerate shuffle order when tracks are removed
+    if (this.shuffleEnabled) {
+      this.generateShuffleOrder()
+    }
+  }
+
+  public stop(onComplete?: () => void): void {
+    super.stop(onComplete)
+  }
+
+  public reset(): void {
+    // Clear queue state synchronously so subsequent add()/load() calls
+    // see a clean slate. The async player.unload() in stop() can finish
+    // in the background — it only releases the Shaka source.
+    this.playlist = []
+    this.current = undefined
+    this._currentIndex = undefined
+    this.stop()
+  }
+
+  public removeUpcomingTracks(): void {
+    if (this.currentIndex === undefined) return
+    this.playlist = this.playlist.slice(0, this.currentIndex + 1)
+
+    // Regenerate shuffle order when tracks are removed
+    if (this.shuffleEnabled) {
+      this.generateShuffleOrder()
+    }
+  }
+
+  public move(fromIndex: number, toIndex: number): void {
+    if (!this.playlist[fromIndex]) {
+      throw new Error('index out of bounds')
+    }
+
+    // Move the track in the playlist
+    const fromItem = this.playlist[fromIndex]
+    this.playlist.splice(fromIndex, 1)
+    this.playlist.splice(toIndex, 0, fromItem)
+
+    // Update currentIndex to track the currently playing item's new position.
+    // Matches Android's exoPlayer.moveMediaItem() which has no restrictions.
+    if (this.currentIndex !== undefined) {
+      if (fromIndex === this.currentIndex) {
+        // Moving the current track — follow it to its new position
+        this._currentIndex = toIndex
+      } else if (
+        fromIndex < this.currentIndex &&
+        toIndex >= this.currentIndex
+      ) {
+        this._currentIndex = this.currentIndex - 1
+      } else if (
+        fromIndex > this.currentIndex &&
+        toIndex <= this.currentIndex
+      ) {
+        this._currentIndex = this.currentIndex + 1
+      }
+    }
+
+    // Regenerate shuffle order when tracks are moved
+    if (this.shuffleEnabled) {
+      this.generateShuffleOrder()
+    }
+  }
+}

package/src/web/TrackPlayer/RepeatMode.ts

@@ -0,0 +1,7 @@
+import type { RepeatMode as RepeatModeType } from '../../features'
+
+export const RepeatMode = {
+  Off: 'off' as const,
+  Track: 'track' as const,
+  Playlist: 'queue' as const
+} satisfies Record<string, RepeatModeType>

package/src/web/TrackPlayer/SetupNotCalledError.ts

@@ -0,0 +1,5 @@
+export class SetupNotCalledError extends Error {
+  constructor() {
+    super('You must call `setupPlayer` prior to interacting with the player.')
+  }
+}