@5stones/react-native-audio-browser 0.1.4 → 0.1.6

package/src/web/TrackPlayer/PlaylistPlayer.ts

@@ -1,11 +1,11 @@
-import { Player } from './Player'
-import { State } from './State'
-import type { State as StateType } from './State'
-
-import type { Track } from '../../types'
 import type { RepeatMode as RepeatModeType } from '../../features'
-import { RepeatMode } from './RepeatMode'
+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
@@ -19,6 +19,8 @@ export class PlaylistPlayer extends Player {
   protected onStateUpdate(state: Exclude<StateType, typeof State.Error>) {
     super.onStateUpdate(state)
 
+    if (this._isStopped) return
+
     if (state === State.Ended) {
       this.onTrackEnded()
     }
@@ -63,19 +65,15 @@ export class PlaylistPlayer extends Player {
     if (!track) return
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const onCompletedLoading = (_track: Track) => {
+    const onLoaded = (_track: Track) => {
       if (initialPosition !== undefined) {
         this.seekTo(initialPosition)
       }
-
-      if (this.playWhenReady) {
-        this.play()
-      }
     }
 
     if (this.currentIndex !== index) {
       this.currentIndex = index
-      this.load(track, onCompletedLoading)
+      this.load(track, onLoaded)
     } else {
       // Replay the same track - seek to start (or initialPosition if specified)
       this.seekTo(initialPosition ?? 0)
@@ -124,7 +122,8 @@ export class PlaylistPlayer extends Player {
   public skipToPrevious(initialPosition?: number): void {
     if (this.currentIndex === undefined) return
 
-    const previousIndex = this.getPreviousIndex() ?? this.getWrapAroundLastIndex()
+    const previousIndex =
+      this.getPreviousIndex() ?? this.getWrapAroundLastIndex()
     if (previousIndex === undefined) return
 
     this.goToIndex(previousIndex, initialPosition)
@@ -184,13 +183,17 @@ export class PlaylistPlayer extends Player {
 
   protected getWrapAroundLastIndex(): number | undefined {
     if (this.repeatMode !== RepeatMode.Playlist) return undefined
-    if (this.shuffleEnabled) return this.shuffleOrder[this.shuffleOrder.length - 1]
+    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)
+    this.shuffleOrder = Array.from(
+      { length: this.playlist.length },
+      (_, i) => i
+    )
 
     // Shuffle the indices
     fisherYatesShuffle(this.shuffleOrder)
@@ -203,8 +206,8 @@ export class PlaylistPlayer extends Player {
     // 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 = this.shuffleOrder[0]!
-      this.shuffleOrder[0] = this.shuffleOrder[currentPos]!
+      const temp = assertedNotNullish(this.shuffleOrder[0])
+      this.shuffleOrder[0] = assertedNotNullish(this.shuffleOrder[currentPos])
       this.shuffleOrder[currentPos] = temp
     }
   }
@@ -236,16 +239,19 @@ export class PlaylistPlayer extends Player {
   }
 
   public remove(indexes: number[]): void {
-    const idxMap = indexes.reduce<Record<number, boolean>>((acc, elem) => {
-      acc[elem] = true
-      return acc
-    }, {})
+    const idxSet = new Set(indexes)
     let isCurrentRemoved = false
+    let removedBeforeCurrent = 0
+
     this.playlist = this.playlist.filter((_track, idx) => {
-      const keep = !idxMap[idx]
+      const keep = !idxSet.has(idx)
 
-      if (!keep && idx === this.currentIndex) {
-        isCurrentRemoved = true
+      if (!keep) {
+        if (idx === this.currentIndex) {
+          isCurrentRemoved = true
+        } else if (this.currentIndex !== undefined && idx < this.currentIndex) {
+          removedBeforeCurrent++
+        }
       }
 
       return keep
@@ -255,11 +261,22 @@ export class PlaylistPlayer extends Player {
       return
     }
 
-    const hasItems = this.playlist.length > 0
-    if (isCurrentRemoved && hasItems) {
-      this.goToIndex(this.currentIndex % this.playlist.length)
-    } else if (isCurrentRemoved) {
-      this.stop()
+    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
@@ -269,16 +286,17 @@ export class PlaylistPlayer extends Player {
   }
 
   public stop(onComplete?: () => void): void {
-    super.stop(() => {
-      this.currentIndex = undefined
-      onComplete?.()
-    })
+    super.stop(onComplete)
   }
 
   public reset(): void {
-    this.stop(() => {
-      this.playlist = []
-    })
+    // 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 {
@@ -296,37 +314,28 @@ export class PlaylistPlayer extends Player {
       throw new Error('index out of bounds')
     }
 
-    if (this.currentIndex === fromIndex) {
-      throw new Error('you cannot move the currently playing track')
-    }
-
-    if (this.currentIndex === toIndex) {
-      throw new Error('you cannot replace the currently playing track')
-    }
-
-    // calculate `currentIndex` after move
-    let shift: number | undefined
-    if (
-      this.currentIndex !== undefined &&
-      fromIndex < this.currentIndex &&
-      toIndex > this.currentIndex
-    ) {
-      shift = -1
-    } else if (
-      this.currentIndex !== undefined &&
-      fromIndex > this.currentIndex &&
-      toIndex < this.currentIndex
-    ) {
-      shift = 1
-    }
-
-    // move the track
+    // Move the track in the playlist
     const fromItem = this.playlist[fromIndex]
     this.playlist.splice(fromIndex, 1)
     this.playlist.splice(toIndex, 0, fromItem)
 
-    if (this.currentIndex !== undefined && shift) {
-      this.currentIndex = this.currentIndex + shift
+    // 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

package/src/web/TrackPlayer/RepeatMode.ts

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

package/src/web/TrackPlayer/State.ts

@@ -1,15 +1,15 @@
 import type { PlaybackState } from '../../features'
 
 export const State = {
-  None: 'none' as const,
-  Ready: 'ready' as const,
-  Playing: 'playing' as const,
-  Paused: 'paused' as const,
-  Stopped: 'stopped' as const,
-  Loading: 'loading' as const,
-  Buffering: 'buffering' as const,
-  Error: 'error' as const,
-  Ended: 'ended' as const
+  None: 'none',
+  Ready: 'ready',
+  Playing: 'playing',
+  Paused: 'paused',
+  Stopped: 'stopped',
+  Loading: 'loading',
+  Buffering: 'buffering',
+  Error: 'error',
+  Ended: 'ended'
 } satisfies Record<string, PlaybackState>
 
 export type State = (typeof State)[keyof typeof State]

package/src/web/browser/BrowserManager.ts

@@ -1,11 +1,12 @@
+import type { NavigationErrorType } from '../../features'
 import type { Track, ResolvedTrack } from '../../types'
 import type { NativeBrowserConfiguration } from '../../types/browser-native'
-import type { NavigationErrorType } from '../../features'
-import { SimpleRouter } from '../SimpleRouter'
 import type { HttpClient } from '../http/HttpClient'
 import type { FavoriteManager } from './FavoriteManager'
 import type { NavigationErrorManager } from './NavigationErrorManager'
+import { assertedNotNullish } from '../../utils/validation'
 import { RequestConfigBuilder } from '../http/RequestConfigBuilder'
+import { SimpleRouter } from '../SimpleRouter'
 import { BrowserPathHelper } from '../util/BrowserPathHelper'
 
 /**
@@ -49,10 +50,23 @@ export class BrowserManager {
       'message' in error &&
       typeof error.message === 'string'
     ) {
-      const navError = error as { code: NavigationErrorType; message: string; statusCode?: number }
-      this.navigationErrorManager.setNavigationError(navError.code, navError.message, path, navError.statusCode)
+      const navError = error as {
+        code: NavigationErrorType
+        message: string
+        statusCode?: number
+      }
+      this.navigationErrorManager.setNavigationError(
+        navError.code,
+        navError.message,
+        path,
+        navError.statusCode
+      )
     } else {
-      this.navigationErrorManager.setNavigationError('network-error', 'Failed to load content', path)
+      this.navigationErrorManager.setNavigationError(
+        'network-error',
+        'Failed to load content',
+        path
+      )
     }
   }
 
@@ -69,7 +83,8 @@ export class BrowserManager {
   set path(value: string | undefined) {
     if (this.hasValidConfiguration()) {
       this.navigationErrorManager.clearNavigationError()
-      const pathToNavigate = value ?? this._configuration.path ?? this.getDefaultPath()
+      const pathToNavigate =
+        value ?? this._configuration.path ?? this.getDefaultPath()
       if (pathToNavigate) {
         void this.navigate(pathToNavigate)
       }
@@ -130,7 +145,7 @@ export class BrowserManager {
 
     // If no path specified, try to get first tab URL
     if (!initialPath) {
-      const tabsRoute = value.routes?.find(r => r.path === '__tabs__')
+      const tabsRoute = value.routes?.find((r) => r.path === '__tabs__')
       if (tabsRoute?.browseStatic?.children?.[0]?.url) {
         initialPath = tabsRoute.browseStatic.children[0].url
       } else {
@@ -205,19 +220,14 @@ export class BrowserManager {
         return
       }
 
-      // Transform tracks with src to add contextual URLs (matches Android behavior)
-      // Android ALWAYS regenerates contextual URLs for tracks with src to reflect
-      // current browsing context, enabling proper queue expansion.
-      // Note: Search content is resolved via resolveSearchContent() which doesn't
-      // reach this block because it returns directly above. This matches Android's
-      // architecture where search() bypasses the resolve() contextual URL logic.
-      // IMPORTANT: Create a shallow copy to avoid mutating the original config object
-      // (e.g., browseStatic from routes). Without this, static route children would
-      // accumulate contextual URLs, breaking search which reads from the same source.
+      // Add contextual URLs to non-search content (matches Android behavior where
+      // search() bypasses the resolve() contextual URL logic).
+      // Shallow copy to avoid mutating the original config object (e.g., browseStatic
+      // from routes), which would break search that reads from the same source.
       if (content?.children && !isSearchPath) {
         content = {
           ...content,
-          children: content.children.map(track => {
+          children: content.children.map((track) => {
             // If track has src, always add/update contextual URL with current path context
             // This matches Android's BrowserManager.kt:436-441
             if (track.src) {
@@ -249,7 +259,9 @@ export class BrowserManager {
       this.onContentChanged(content)
 
       // Query and update tabs if configuration has __tabs__ route
-      const tabsRoute = this._configuration.routes?.find(r => r.path === '__tabs__')
+      const tabsRoute = this._configuration.routes?.find(
+        (r) => r.path === '__tabs__'
+      )
       if (tabsRoute) {
         const tabs = await this.queryTabs()
 
@@ -271,9 +283,7 @@ export class BrowserManager {
       this._content = undefined
       this.onContentChanged(undefined)
 
-      // Set navigation error using helper
-      const message = error instanceof Error ? error.message : 'Unknown error'
-      this.navigationErrorManager.setNavigationError('unknown-error', message)
+      this.handleNavigationError(error, path)
     }
   }
 
@@ -285,7 +295,9 @@ export class BrowserManager {
    * @param searchPath The search path (format: /__search?q=query)
    * @returns ResolvedTrack containing search results as children
    */
-  private async resolveSearchContent(searchPath: string): Promise<ResolvedTrack | undefined> {
+  private async resolveSearchContent(
+    searchPath: string
+  ): Promise<ResolvedTrack | undefined> {
     // Extract query from search path
     const queryMatch = searchPath.match(/[?&]q=([^&]*)/)
     if (!queryMatch) {
@@ -295,7 +307,9 @@ export class BrowserManager {
     const query = decodeURIComponent(queryMatch[1] ?? '')
 
     // Find __search__ route entry
-    const searchRoute = this._configuration.routes?.find(r => r.path === '__search__')
+    const searchRoute = this._configuration.routes?.find(
+      (r) => r.path === '__search__'
+    )
     if (!searchRoute) {
       console.warn('No __search__ route configured')
       return undefined
@@ -310,9 +324,12 @@ export class BrowserManager {
     // Handle request config-based search
     else if (searchRoute.searchConfig) {
       const searchQueryParams: Record<string, string> = { q: query }
-      const requestConfig = this.httpClient.mergeRequestConfig(searchRoute.searchConfig, {
-        query: searchQueryParams
-      })
+      const requestConfig = this.httpClient.mergeRequestConfig(
+        searchRoute.searchConfig,
+        {
+          query: searchQueryParams
+        }
+      )
 
       try {
         const response = await this.httpClient.executeRequest(requestConfig)
@@ -328,7 +345,7 @@ export class BrowserManager {
     return {
       url: searchPath,
       title: `Search: ${query}`,
-      children: searchResults,
+      children: searchResults
     }
   }
 
@@ -337,27 +354,31 @@ export class BrowserManager {
    * Supports both static config and resolve/transform callbacks.
    * Matches Android's artwork URL transformation with full Track access.
    */
-  private async transformArtworkForContent(content: ResolvedTrack): Promise<ResolvedTrack> {
+  private async transformArtworkForContent(
+    content: ResolvedTrack
+  ): Promise<ResolvedTrack> {
     const artworkConfig = this._configuration.artwork
     if (!artworkConfig) {
       return content
     }
 
     // Transform parent artwork
-    const parentArtworkSource = await RequestConfigBuilder.resolveArtworkSourceAsync(
-      content,
-      artworkConfig
-    )
+    const parentArtworkSource =
+      await RequestConfigBuilder.resolveArtworkSourceAsync(
+        content,
+        artworkConfig
+      )
 
     // Transform children artwork
     let transformedChildren: Track[] | undefined
     if (content.children) {
       transformedChildren = await Promise.all(
-        content.children.map(async track => {
-          const artworkSource = await RequestConfigBuilder.resolveArtworkSourceAsync(
-            track,
-            artworkConfig
-          )
+        content.children.map(async (track) => {
+          const artworkSource =
+            await RequestConfigBuilder.resolveArtworkSourceAsync(
+              track,
+              artworkConfig
+            )
           if (artworkSource && !track.artworkSource) {
             return { ...track, artworkSource }
           }
@@ -369,7 +390,7 @@ export class BrowserManager {
     return {
       ...content,
       artworkSource: parentArtworkSource ?? content.artworkSource,
-      children: transformedChildren ?? content.children,
+      children: transformedChildren ?? content.children
     }
   }
 
@@ -385,12 +406,20 @@ export class BrowserManager {
    */
   private async resolveRouteContent(
     route: {
-      browseCallback?: NativeBrowserConfiguration['routes'] extends (infer R)[] | undefined
-        ? R extends { browseCallback?: infer C } ? C : never
+      browseCallback?: NativeBrowserConfiguration['routes'] extends
+        | (infer R)[]
+        | undefined
+        ? R extends { browseCallback?: infer C }
+          ? C
+          : never
         : never
       browseStatic?: ResolvedTrack
-      browseConfig?: NativeBrowserConfiguration['routes'] extends (infer R)[] | undefined
-        ? R extends { browseConfig?: infer C } ? C : never
+      browseConfig?: NativeBrowserConfiguration['routes'] extends
+        | (infer R)[]
+        | undefined
+        ? R extends { browseConfig?: infer C }
+          ? C
+          : never
         : never
     },
     path: string,
@@ -419,7 +448,10 @@ export class BrowserManager {
 
     // Handle request config-based route
     if (route.browseConfig) {
-      const requestConfig = this.httpClient.mergeRequestConfig(route.browseConfig, { path })
+      const requestConfig = this.httpClient.mergeRequestConfig(
+        route.browseConfig,
+        { path }
+      )
       try {
         const response = await this.httpClient.executeRequest(requestConfig)
         return response as ResolvedTrack
@@ -436,18 +468,23 @@ export class BrowserManager {
   /**
    * Resolves content for a specific path using configured routes.
    */
-  private async resolveContent(path: string): Promise<ResolvedTrack | undefined> {
+  private async resolveContent(
+    path: string
+  ): Promise<ResolvedTrack | undefined> {
     const routes = this._configuration.routes
     if (!routes || routes.length === 0) {
       return undefined
     }
 
     // Convert routes array to record for SimpleRouter
-    const routePatterns: Record<string, {
-      browseCallback?: typeof routes[0]['browseCallback']
-      browseConfig?: typeof routes[0]['browseConfig']
-      browseStatic?: typeof routes[0]['browseStatic']
-    }> = {}
+    const routePatterns: Record<
+      string,
+      {
+        browseCallback?: (typeof routes)[0]['browseCallback']
+        browseConfig?: (typeof routes)[0]['browseConfig']
+        browseStatic?: (typeof routes)[0]['browseStatic']
+      }
+    > = {}
 
     for (const route of routes) {
       // Skip special routes
@@ -456,7 +493,7 @@ export class BrowserManager {
       routePatterns[route.path] = {
         browseCallback: route.browseCallback,
         browseConfig: route.browseConfig,
-        browseStatic: route.browseStatic,
+        browseStatic: route.browseStatic
       }
     }
 
@@ -464,14 +501,19 @@ export class BrowserManager {
     const match = this.router.findBestMatch(path, routePatterns)
     if (match) {
       const [matchedPattern, routeMatch] = match
-      const matchedRoute = routes.find(r => r.path === matchedPattern)
+      const matchedRoute = routes.find((r) => r.path === matchedPattern)
       if (matchedRoute) {
-        return this.resolveRouteContent(matchedRoute, path, routeMatch.params, 'Route')
+        return this.resolveRouteContent(
+          matchedRoute,
+          path,
+          routeMatch.params,
+          'Route'
+        )
       }
     }
 
     // Fall back to __default__ route
-    const defaultRoute = routes.find(r => r.path === '__default__')
+    const defaultRoute = routes.find((r) => r.path === '__default__')
     if (defaultRoute) {
       return this.resolveRouteContent(defaultRoute, path, {}, 'Default route')
     }
@@ -483,7 +525,9 @@ export class BrowserManager {
    * Queries tabs from the __tabs__ route.
    */
   private async queryTabs(): Promise<Track[]> {
-    const tabsRoute = this._configuration.routes?.find(r => r.path === '__tabs__')
+    const tabsRoute = this._configuration.routes?.find(
+      (r) => r.path === '__tabs__'
+    )
     if (!tabsRoute) {
       return []
     }
@@ -492,14 +536,20 @@ export class BrowserManager {
     const tabs = result?.children ?? []
 
     // Transform artwork URLs on tabs
-    return RequestConfigBuilder.transformTracksArtwork(tabs, this._configuration.artwork)
+    return RequestConfigBuilder.transformTracksArtwork(
+      tabs,
+      this._configuration.artwork
+    )
   }
 
   /**
    * Checks if the configuration has valid routes.
    */
   private hasValidConfiguration(): boolean {
-    return this._configuration.routes !== undefined && this._configuration.routes.length > 0
+    return (
+      this._configuration.routes !== undefined &&
+      this._configuration.routes.length > 0
+    )
   }
 
   /**
@@ -528,7 +578,7 @@ export class BrowserManager {
       }
 
       // Filter to only playable tracks (tracks with src)
-      const playableTracks = children.filter(track => track.src != null)
+      const playableTracks = children.filter((track) => track.src != null)
 
       if (playableTracks.length === 0) {
         console.warn('Parent has no playable tracks, cannot expand queue')
@@ -536,23 +586,30 @@ export class BrowserManager {
       }
 
       // Find the index of the selected track in the playable tracks array
-      const selectedIndex = playableTracks.findIndex(track => track.src === trackId)
+      const selectedIndex = playableTracks.findIndex(
+        (track) => track.src === trackId
+      )
 
       if (selectedIndex < 0) {
-        console.warn(`Track with src='${trackId}' not found in playable children`)
+        console.warn(
+          `Track with src='${trackId}' not found in playable children`
+        )
         return undefined
       }
 
       // Check singleTrack setting - if true, return only the selected track
       if (this._configuration.singleTrack) {
         return {
-          tracks: [playableTracks[selectedIndex]!],
-          selectedIndex: 0,
+          tracks: [assertedNotNullish(playableTracks[selectedIndex])],
+          selectedIndex: 0
         }
       }
       return { tracks: playableTracks, selectedIndex }
     } catch (error) {
-      console.error(`Error expanding queue from contextual URL: ${contextualUrl}`, error)
+      console.error(
+        `Error expanding queue from contextual URL: ${contextualUrl}`,
+        error
+      )
       return undefined
     }
   }
@@ -576,13 +633,13 @@ export class BrowserManager {
   ): Promise<{ tracks: Track[]; startIndex: number; startPositionMs: number }> {
     // Single track: check for search context or contextual URL
     if (tracks.length === 1) {
-      const track = tracks[0]!
+      const track = assertedNotNullish(tracks[0])
       const trackUrl = track.url
 
       // If search query present, expand search results
       if (searchQuery) {
         // Execute search (will hit cache if already performed)
-        const searchResults = await this.resolveContent(
+        const searchResults = await this.resolveSearchContent(
           BrowserPathHelper.createSearchPath(searchQuery)
         )
         const searchTracks = searchResults?.children
@@ -590,14 +647,14 @@ export class BrowserManager {
         if (searchTracks && searchTracks.length > 0) {
           // Find the selected track in search results
           const selectedIdx = searchTracks.findIndex(
-            t => t.url === trackUrl || t.src === track.src
+            (t) => t.url === trackUrl || t.src === track.src
           )
 
           if (selectedIdx >= 0) {
             return {
               tracks: searchTracks,
               startIndex: selectedIdx,
-              startPositionMs,
+              startPositionMs
             }
           }
         }
@@ -618,7 +675,7 @@ export class BrowserManager {
           return {
             tracks: expanded.tracks,
             startIndex: expanded.selectedIndex,
-            startPositionMs,
+            startPositionMs
           }
         }
       }