@5stones/react-native-audio-browser 0.1.0

package/src/web/SimpleRouter.ts

@@ -0,0 +1,177 @@
+/**
+ * Simple route matcher for path patterns with parameter extraction.
+ *
+ * Supports patterns like:
+ * - /artists - exact match
+ * - /artists/{id} - parameter extraction
+ * - /artists/{id}/albums - multiple segments with parameters
+ * - /artists/* - wildcard match (matches any single segment)
+ * - /files/** - tail wildcard (matches remaining path segments)
+ *
+ * Route specificity rules:
+ * - More path segments = higher specificity
+ * - Constant segments > parameter segments > wildcards > tail wildcards
+ * - Most specific route wins
+ */
+
+export interface RouteMatch {
+  params: Record<string, string>
+  specificity: number
+}
+
+export class SimpleRouter {
+  /**
+   * Finds the best matching route for the given path.
+   *
+   * @param path The incoming path to match (e.g., "/artists/123")
+   * @param routes Map of route patterns to match against
+   * @return Tuple of [route pattern, match result] or null if no match
+   */
+  findBestMatch<T>(
+    path: string,
+    routes: Record<string, T>
+  ): [string, RouteMatch] | null {
+    const matches: Array<[string, RouteMatch]> = []
+
+    for (const pattern of Object.keys(routes)) {
+      const match = this.matchPattern(pattern, path)
+      if (match) {
+        matches.push([pattern, match])
+      }
+    }
+
+    if (matches.length === 0) {
+      return null
+    }
+
+    // Find the match with highest specificity
+    return matches.reduce((best, current) =>
+      current[1].specificity > best[1].specificity ? current : best
+    )
+  }
+
+  /**
+   * Attempts to match a single pattern against a path.
+   *
+   * @param pattern Route pattern (e.g., "/artists/{id}", "/files/*", "/api/**")
+   * @param path Incoming path (e.g., "/artists/123")
+   * @return RouteMatch if successful, null otherwise
+   */
+  private matchPattern(pattern: string, path: string): RouteMatch | null {
+    const patternSegments = pattern.split('/').filter((s) => s.length > 0)
+    const pathSegments = path.split('/').filter((s) => s.length > 0)
+
+    const params: Record<string, string> = {}
+    let constantSegments = 0
+    let parameterSegments = 0
+    let wildcardSegments = 0
+    let hasTailWildcard = false
+
+    // Check for tail wildcard at end
+    if (
+      patternSegments.length > 0 &&
+      patternSegments[patternSegments.length - 1] === '**'
+    ) {
+      hasTailWildcard = true
+
+      // For tail wildcard, pattern must have <= path segments
+      if (patternSegments.length - 1 > pathSegments.length) {
+        return null
+      }
+
+      // Match all segments except the tail wildcard
+      for (let i = 0; i < patternSegments.length - 1; i++) {
+        if (!this.matchSingleSegment(patternSegments[i]!, pathSegments[i]!, params)) {
+          return null
+        }
+        // Note: The Kotlin implementation doesn't update counts here (appears to be a bug)
+        // but we'll match it exactly for consistency
+        this.updateSegmentCounts(
+          patternSegments[i]!,
+          constantSegments,
+          parameterSegments,
+          wildcardSegments
+        )
+      }
+
+      // Capture remaining path segments as "tail" parameter
+      if (pathSegments.length > patternSegments.length - 1) {
+        const remainingSegments = pathSegments.slice(patternSegments.length - 1)
+        params['tail'] = remainingSegments.join('/')
+      }
+    } else {
+      // Normal matching - must have same number of segments
+      if (patternSegments.length !== pathSegments.length) {
+        return null
+      }
+
+      for (let i = 0; i < patternSegments.length; i++) {
+        if (!this.matchSingleSegment(patternSegments[i]!, pathSegments[i]!, params)) {
+          return null
+        }
+        const [constCount, paramCount, wildcardCount] = this.updateSegmentCounts(
+          patternSegments[i]!,
+          constantSegments,
+          parameterSegments,
+          wildcardSegments
+        )
+        constantSegments = constCount
+        parameterSegments = paramCount
+        wildcardSegments = wildcardCount
+      }
+    }
+
+    // Specificity calculation (higher = more specific):
+    // - Constants: 1000 points each
+    // - Parameters: 100 points each
+    // - Single wildcards: 10 points each
+    // - Tail wildcard: 1 point
+    // - Base path length: segments count
+    const specificity =
+      constantSegments * 1000 +
+      parameterSegments * 100 +
+      wildcardSegments * 10 +
+      (hasTailWildcard ? 1 : 0) +
+      patternSegments.length
+
+    return { params, specificity }
+  }
+
+  private matchSingleSegment(
+    patternSegment: string,
+    pathSegment: string,
+    params: Record<string, string>
+  ): boolean {
+    // Parameter segment: {paramName}
+    if (patternSegment.startsWith('{') && patternSegment.endsWith('}')) {
+      const paramName = patternSegment.substring(1, patternSegment.length - 1)
+      params[paramName] = pathSegment
+      return true
+    }
+    // Single wildcard: *
+    if (patternSegment === '*') {
+      return true
+    }
+    // Constant segment: must match exactly
+    if (patternSegment === pathSegment) {
+      return true
+    }
+    // Mismatch
+    return false
+  }
+
+  private updateSegmentCounts(
+    patternSegment: string,
+    constantSegments: number,
+    parameterSegments: number,
+    wildcardSegments: number
+  ): [number, number, number] {
+    if (patternSegment.startsWith('{') && patternSegment.endsWith('}')) {
+      return [constantSegments, parameterSegments + 1, wildcardSegments]
+    } else if (patternSegment === '*') {
+      return [constantSegments, parameterSegments, wildcardSegments + 1]
+    } else {
+      return [constantSegments + 1, parameterSegments, wildcardSegments]
+    }
+  }
+}

package/src/web/TrackPlayer/Event.ts

@@ -0,0 +1,11 @@
+// Web-specific event constants
+export enum Event {
+  PlaybackState = 'playback-state',
+  PlaybackProgressUpdated = 'playback-progress-updated',
+  PlaybackQueueEnded = 'playback-queue-ended',
+  PlaybackPlayWhenReadyChanged = 'playback-play-when-ready-changed',
+  PlaybackActiveTrackChanged = 'playback-active-track-changed',
+  PlaybackError = 'playback-error',
+  PlaybackRepeatModeChanged = 'playback-repeat-mode-changed',
+  PlaybackOptionsChanged = 'playback-options-changed'
+}

package/src/web/TrackPlayer/Player.ts

@@ -0,0 +1,323 @@
+import { State } from './State'
+import type { State as StateType } from './State'
+import type {
+  Progress,
+  PartialSetupPlayerOptions,
+  Playback,
+  PlaybackError,
+} from '../../features'
+import type { Track } from '../../types'
+import { SetupNotCalledError } from './SetupNotCalledError'
+import type shaka from 'shaka-player/dist/shaka-player.ui'
+
+// 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 }
+
+  // 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 {
+    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)
+  }
+
+  /**
+   * NOTE: this method is sync despite the actual load being async. This
+   * behavior is intentional as it mirrors what happens in Android. State
+   * changes should be captured by event listeners.
+   */
+  public load(track: Track, onComplete?: (track: Track) => void): void {
+    const player = this.requirePlayer()
+
+    if (!track.src) {
+      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.current = track
+        onComplete?.(track)
+
+        // Auto-play if playWhenReady is true
+        if (this.playWhenReady) {
+          this.play()
+        }
+      })
+      .catch((err: unknown) => {
+        this.onError(this.toNormalizedError(err))
+      })
+  }
+
+  /**
+   * NOTE: this method is sync despite the actual load being async. This
+   * behavior is intentional as it mirrors what happens in Android. State
+   * changes should be captured by event listeners.
+   */
+  public stop(onComplete?: () => void): void {
+    const player = this.requirePlayer()
+
+    this.current = undefined
+    player
+      .unload()
+      .then(() => onComplete?.())
+      .catch((err: unknown) => {
+        console.error('Error unloading player:', err)
+        onComplete?.() // Still call onComplete so callers aren't left hanging
+      })
+  }
+
+  /**
+   * NOTE: this method is sync despite the actual load being async. This
+   * behavior is intentional as it mirrors what happens in Android. State
+   * changes should be captured by event listeners.
+   */
+  public play(): void {
+    const element = this.requireElement()
+    this.playWhenReady = true
+
+    if (this.state.state === State.Error && 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 {
+    const element = this.requireElement()
+    element.currentTime += offset
+  }
+
+  public seekTo(seconds: number): void {
+    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()
+    return {
+      position: element.currentTime,
+      duration: element.duration || 0,
+      buffered: 0, // TODO: element.buffered.end,
+    }
+  }
+}