@5stones/react-native-audio-browser 0.1.3 → 0.1.5

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

package/src/web/browser/FavoriteManager.ts

@@ -53,7 +53,7 @@ export class FavoriteManager {
 
     return {
       ...track,
-      favorited: true,
+      favorited: true
     }
   }
 
@@ -68,10 +68,12 @@ export class FavoriteManager {
     const children = resolvedTrack.children
     if (!children) return resolvedTrack
 
-    const hydratedChildren = children.map(track => this.hydrateFavorite(track))
+    const hydratedChildren = children.map((track) =>
+      this.hydrateFavorite(track)
+    )
     return {
       ...resolvedTrack,
-      children: hydratedChildren,
+      children: hydratedChildren
     }
   }
 }

package/src/web/browser/NavigationErrorManager.ts

@@ -2,7 +2,7 @@ import type {
   NavigationError,
   NavigationErrorType,
   FormattedNavigationError,
-  NavigationErrorEvent,
+  NavigationErrorEvent
 } from '../../features'
 import type { NativeBrowserConfiguration } from '../../types/browser-native'
 
@@ -11,7 +11,7 @@ const ERROR_TITLES: Record<NavigationErrorType, string> = {
   'http-error': 'Server Error',
   'content-not-found': 'Content Not Found',
   'callback-error': 'Error',
-  'unknown-error': 'Error',
+  'unknown-error': 'Error'
 }
 
 /**
@@ -25,12 +25,16 @@ export class NavigationErrorManager {
 
   // Event callbacks
   onNavigationError: (data: NavigationErrorEvent) => void = () => {}
-  onFormattedNavigationError: (formattedError: FormattedNavigationError | undefined) => void = () => {}
+  onFormattedNavigationError: (
+    formattedError: FormattedNavigationError | undefined
+  ) => void = () => {}
 
   /**
    * Sets the custom error formatter callback from configuration.
    */
-  setFormatCallback(callback: NativeBrowserConfiguration['formatNavigationError']): void {
+  setFormatCallback(
+    callback: NativeBrowserConfiguration['formatNavigationError']
+  ): void {
     this.formatCallback = callback
   }
 
@@ -38,7 +42,10 @@ export class NavigationErrorManager {
    * Clears the current navigation error and emits clear events.
    */
   clearNavigationError(): void {
-    if (this._navigationError !== undefined || this._formattedNavigationError !== undefined) {
+    if (
+      this._navigationError !== undefined ||
+      this._formattedNavigationError !== undefined
+    ) {
       this._navigationError = undefined
       this._formattedNavigationError = undefined
       this.onNavigationError({ error: undefined })
@@ -65,7 +72,7 @@ export class NavigationErrorManager {
       code,
       message,
       statusCode,
-      statusCodeSuccess: undefined,
+      statusCodeSuccess: undefined
     }
     this._navigationError = navError
     this.onNavigationError({ error: navError })
@@ -73,7 +80,7 @@ export class NavigationErrorManager {
     // Default formatted error
     const defaultFormatted: FormattedNavigationError = {
       title: ERROR_TITLES[code],
-      message,
+      message
     }
 
     // Call custom formatter if available
@@ -82,7 +89,7 @@ export class NavigationErrorManager {
         const customFormatted = this.formatCallback({
           error: navError,
           defaultFormatted,
-          path,
+          path
         })
         this._formattedNavigationError = customFormatted || defaultFormatted
       } catch (error) {

package/src/web/browser/SearchManager.ts

@@ -1,6 +1,6 @@
 import type { Track, SearchParams } from '../../types'
-import type { BrowserManager } from './BrowserManager'
 import type { HttpClient } from '../http/HttpClient'
+import type { BrowserManager } from './BrowserManager'
 import { RequestConfigBuilder } from '../http/RequestConfigBuilder'
 
 /**
@@ -23,7 +23,9 @@ export class SearchManager {
    */
   async search(params: SearchParams): Promise<Track[]> {
     // Find __search__ route entry
-    const searchRoute = this.browserManager.configuration.routes?.find(r => r.path === '__search__')
+    const searchRoute = this.browserManager.configuration.routes?.find(
+      (r) => r.path === '__search__'
+    )
     if (!searchRoute) {
       return []
     }
@@ -38,7 +40,7 @@ export class SearchManager {
     else if (searchRoute.searchConfig) {
       // Build query parameters from SearchParams (matches Android's executeSearchApiRequest)
       const searchQueryParams: Record<string, string> = {
-        q: params.query,
+        q: params.query
       }
       if (params.mode) searchQueryParams.mode = params.mode
       if (params.genre) searchQueryParams.genre = params.genre
@@ -47,9 +49,12 @@ export class SearchManager {
       if (params.title) searchQueryParams.title = params.title
       if (params.playlist) searchQueryParams.playlist = params.playlist
 
-      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)
@@ -64,11 +69,12 @@ export class SearchManager {
     const artworkConfig = this.browserManager.configuration.artwork
     if (artworkConfig) {
       results = await Promise.all(
-        results.map(async track => {
-          const artworkSource = await RequestConfigBuilder.resolveArtworkSourceAsync(
-            track,
-            artworkConfig
-          )
+        results.map(async (track) => {
+          const artworkSource =
+            await RequestConfigBuilder.resolveArtworkSourceAsync(
+              track,
+              artworkConfig
+            )
           if (artworkSource && !track.artworkSource) {
             return { ...track, artworkSource }
           }

package/src/web/http/HttpClient.ts

@@ -1,8 +1,5 @@
-import type {
-  RequestConfig,
-  TransformableRequestConfig,
-} from '../../types'
 import type { NavigationErrorType } from '../../features'
+import type { RequestConfig, TransformableRequestConfig } from '../../types'
 import { RequestConfigBuilder } from './RequestConfigBuilder'
 
 type HttpError = Error & {
@@ -21,6 +18,8 @@ function isHttpError(error: unknown): error is HttpError {
   )
 }
 
+const TIMEOUT_MS = 30_000
+
 /**
  * HTTP client for making browser API requests.
  * Mirrors Android's HttpClient.kt
@@ -54,7 +53,10 @@ export class HttpClient {
       base as RequestConfig
     )
     // Then merge with overrides
-    return RequestConfigBuilder.mergeConfig(withBase, overrides as RequestConfig)
+    return RequestConfigBuilder.mergeConfig(
+      withBase,
+      overrides as RequestConfig
+    )
   }
 
   /**
@@ -67,22 +69,36 @@ export class HttpClient {
     const headers = config.headers ?? {}
     const method = config.method ?? 'GET'
 
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), TIMEOUT_MS)
+
     try {
       const response = await fetch(url, {
         method,
         headers,
+        signal: controller.signal
       })
 
       if (!response.ok) {
-        const error = new Error(`HTTP ${response.status}: ${response.statusText}`) as HttpError
+        const error = new Error(
+          `HTTP ${response.status}: ${response.statusText}`
+        ) as HttpError
         error.isHttpError = true
         error.status = response.status
         error.statusText = response.statusText
         throw error
       }
 
-      return response.json()
+      // await so JSON parse errors are caught by the surrounding try/catch
+      return await response.json()
     } catch (error: unknown) {
+      if (error instanceof DOMException && error.name === 'AbortError') {
+        const navError = new Error(
+          `Request timed out after ${TIMEOUT_MS}ms`
+        ) as Error & { code: NavigationErrorType }
+        navError.code = 'network-error'
+        throw navError
+      }
       // Distinguish between network errors and HTTP errors
       if (isHttpError(error)) {
         const navError = new Error(error.message) as Error & {
@@ -102,6 +118,8 @@ export class HttpClient {
       }
       navError.code = 'network-error'
       throw navError
+    } finally {
+      clearTimeout(timeoutId)
     }
   }
 }