react-native-nitro-player 1.5.0 → 1.6.0-alpha.0

package/src/components/CastButton.tsx

@@ -176,8 +176,20 @@ function CastGlyph({
         }}
       />
       {/* Two concentric broadcast arcs radiating from the corner dot */}
-      <RippleArc cx={cx} cy={cy} radius={size * 0.2} stroke={stroke} color={color} />
-      <RippleArc cx={cx} cy={cy} radius={size * 0.34} stroke={stroke} color={color} />
+      <RippleArc
+        cx={cx}
+        cy={cy}
+        radius={size * 0.2}
+        stroke={stroke}
+        color={color}
+      />
+      <RippleArc
+        cx={cx}
+        cy={cy}
+        radius={size * 0.34}
+        stroke={stroke}
+        color={color}
+      />
       {/* Broadcast dot */}
       <View
         style={{

package/src/hooks/callbackManager.ts

@@ -1,5 +1,10 @@
-import { TrackPlayer } from '../index'
-import type { TrackItem, TrackPlayerState, Reason } from '../types/PlayerQueue'
+import { PlayerQueue, TrackPlayer } from '../index'
+import type {
+  TrackItem,
+  TrackPlayerState,
+  Reason,
+  TimedMetadata,
+} from '../types/PlayerQueue'
 
 type PlaybackStateCallback = (state: TrackPlayerState, reason?: Reason) => void
 type TrackChangeCallback = (track: TrackItem, reason?: Reason) => void
@@ -9,6 +14,11 @@ type PlaybackProgressCallback = (
   isManuallySeeked?: boolean
 ) => void
 type SeekCallback = (position: number, totalDuration: number) => void
+type TimedMetadataCallback = (metadata: TimedMetadata) => void
+type TemporaryQueueCallback = (
+  playNextQueue: TrackItem[],
+  upNextQueue: TrackItem[]
+) => void
 
 /**
  * Internal subscription manager that allows multiple hooks to subscribe
@@ -20,10 +30,16 @@ class CallbackSubscriptionManager {
   private trackChangeSubscribers = new Set<TrackChangeCallback>()
   private playbackProgressSubscribers = new Set<PlaybackProgressCallback>()
   private seekSubscribers = new Set<SeekCallback>()
+  private timedMetadataSubscribers = new Set<TimedMetadataCallback>()
+  private temporaryQueueSubscribers = new Set<TemporaryQueueCallback>()
+  private playlistsChangedSubscribers = new Set<() => void>()
+  private isPlaylistsChangedRegistered = false
   private isPlaybackStateRegistered = false
   private isTrackChangeRegistered = false
   private isPlaybackProgressRegistered = false
   private isSeekRegistered = false
+  private isTimedMetadataRegistered = false
+  private isTemporaryQueueRegistered = false
 
   /**
    * Subscribe to playback state changes
@@ -156,6 +172,84 @@ class CallbackSubscriptionManager {
     }
   }
 
+  /**
+   * Subscribe to playNext / upNext changes
+   * @returns Unsubscribe function
+   */
+  subscribeToTemporaryQueueChange(
+    callback: TemporaryQueueCallback
+  ): () => void {
+    this.temporaryQueueSubscribers.add(callback)
+    this.ensureTemporaryQueueRegistered()
+
+    return () => {
+      this.temporaryQueueSubscribers.delete(callback)
+    }
+  }
+
+  /**
+   * Subscribe to playlist mutations (tracks added/removed/reordered).
+   * @returns Unsubscribe function
+   */
+  subscribeToPlaylistsChanged(callback: () => void): () => void {
+    this.playlistsChangedSubscribers.add(callback)
+    this.ensurePlaylistsChangedRegistered()
+
+    return () => {
+      this.playlistsChangedSubscribers.delete(callback)
+    }
+  }
+
+  private ensurePlaylistsChangedRegistered(): void {
+    if (this.isPlaylistsChangedRegistered) return
+
+    try {
+      PlayerQueue.onPlaylistsChanged(() => {
+        this.playlistsChangedSubscribers.forEach((subscriber) => {
+          try {
+            subscriber()
+          } catch (error) {
+            console.error(
+              '[CallbackManager] Error in playlists changed subscriber:',
+              error
+            )
+          }
+        })
+      })
+      this.isPlaylistsChangedRegistered = true
+    } catch (error) {
+      console.error(
+        '[CallbackManager] Failed to register playlists changed callback:',
+        error
+      )
+    }
+  }
+
+  private ensureTemporaryQueueRegistered(): void {
+    if (this.isTemporaryQueueRegistered) return
+
+    try {
+      TrackPlayer.onTemporaryQueueChange((playNextQueue, upNextQueue) => {
+        this.temporaryQueueSubscribers.forEach((subscriber) => {
+          try {
+            subscriber(playNextQueue, upNextQueue)
+          } catch (error) {
+            console.error(
+              '[CallbackManager] Error in temporary queue subscriber:',
+              error
+            )
+          }
+        })
+      })
+      this.isTemporaryQueueRegistered = true
+    } catch (error) {
+      console.error(
+        '[CallbackManager] Failed to register temporary queue callback:',
+        error
+      )
+    }
+  }
+
   private ensureSeekRegistered(): void {
     if (this.isSeekRegistered) return
 
@@ -177,6 +271,44 @@ class CallbackSubscriptionManager {
       )
     }
   }
+
+  /**
+   * Subscribe to in-stream (timed) metadata events
+   * @returns Unsubscribe function
+   */
+  subscribeToTimedMetadata(callback: TimedMetadataCallback): () => void {
+    this.timedMetadataSubscribers.add(callback)
+    this.ensureTimedMetadataRegistered()
+
+    return () => {
+      this.timedMetadataSubscribers.delete(callback)
+    }
+  }
+
+  private ensureTimedMetadataRegistered(): void {
+    if (this.isTimedMetadataRegistered) return
+
+    try {
+      TrackPlayer.onTimedMetadata((metadata) => {
+        this.timedMetadataSubscribers.forEach((subscriber) => {
+          try {
+            subscriber(metadata)
+          } catch (error) {
+            console.error(
+              '[CallbackManager] Error in timed metadata subscriber:',
+              error
+            )
+          }
+        })
+      })
+      this.isTimedMetadataRegistered = true
+    } catch (error) {
+      console.error(
+        '[CallbackManager] Failed to register timed metadata callback:',
+        error
+      )
+    }
+  }
 }
 
 // Export singleton instance

package/src/hooks/index.ts

@@ -4,6 +4,7 @@ export { useOnPlaybackStateChange } from './useOnPlaybackStateChange'
 export type { PlaybackStateResult } from './useOnPlaybackStateChange'
 export { useOnSeek } from './useOnSeek'
 export { useOnPlaybackProgressChange } from './useOnPlaybackProgressChange'
+export { useTimedMetadata } from './useTimedMetadata'
 export { useAndroidAutoConnection } from './useAndroidAutoConnection'
 export { useAudioDevices } from './useAudioDevices'
 export { useNowPlaying } from './useNowPlaying'

package/src/hooks/useActualQueue.ts

@@ -89,27 +89,32 @@ export function useActualQueue(): UseActualQueueResult {
     }
   }, [updateQueue])
 
-  // Update queue on track changes (with slight delay to ensure native side has updated)
+  // Update queue on track changes.
+  //
+  // Deliberately NOT subscribed to playback-state changes: those fire several times
+  // per second while buffering or seeking, and each one used to pull the entire queue
+  // across the bridge. A playback state change never alters queue membership — only
+  // track changes and temporary-queue edits do.
   useEffect(() => {
-    const unsubscribe = callbackManager.subscribeToTrackChange(() => {
-      // Small delay to ensure native queue is updated
-      setTimeout(updateQueue, 50)
+    return callbackManager.subscribeToTrackChange(() => {
+      updateQueue()
     })
-
-    return () => {
-      unsubscribe()
-    }
   }, [updateQueue])
 
-  // Update queue on playback state changes
+  // Update queue when playNext / upNext change (native pushes the new lists).
   useEffect(() => {
-    const unsubscribe = callbackManager.subscribeToPlaybackState(() => {
+    return callbackManager.subscribeToTemporaryQueueChange(() => {
       updateQueue()
     })
+  }, [updateQueue])
 
-    return () => {
-      unsubscribe()
-    }
+  // Update queue when the playlist itself is edited (track added / removed / reordered).
+  // Without this, a playlist mutation while paused would leave the queue stale until the
+  // next track change — playback-state changes used to paper over it.
+  useEffect(() => {
+    return callbackManager.subscribeToPlaylistsChanged(() => {
+      updateQueue()
+    })
   }, [updateQueue])
 
   return { queue, refreshQueue, isLoading }

package/src/hooks/useNowPlaying.ts

@@ -88,12 +88,22 @@ export function useNowPlaying(): PlayerState {
     })
   }, [fetchFullState])
 
-  // Subscribe to progress changes — lightweight position/duration update
+  // Subscribe to progress changes — lightweight position/duration update.
+  // Bail out when neither value changed at whole-second resolution: the native tick
+  // is sub-second, and a new state object on every tick re-renders every consumer.
   useEffect(() => {
     return callbackManager.subscribeToPlaybackProgressChange(
       (currentPosition, totalDuration) => {
         if (!isMounted.current) return
-        setState((prev) => ({ ...prev, currentPosition, totalDuration }))
+        setState((prev) => {
+          if (
+            Math.floor(prev.currentPosition) === Math.floor(currentPosition) &&
+            prev.totalDuration === totalDuration
+          ) {
+            return prev
+          }
+          return { ...prev, currentPosition, totalDuration }
+        })
       }
     )
   }, [])

package/src/hooks/useTimedMetadata.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react'
+import { callbackManager } from './callbackManager'
+import type { TimedMetadata } from '../types/PlayerQueue'
+
+/**
+ * Hook to subscribe to in-stream (timed) metadata — ICY/Shoutcast StreamTitle
+ * updates and ID3 frames emitted while a live stream plays.
+ *
+ * @returns The most recent metadata, or undefined until the first event arrives
+ *
+ * @example
+ * ```tsx
+ * function NowPlayingFromStream() {
+ *   const metadata = useTimedMetadata()
+ *   return <Text>{metadata?.title ?? 'Live'}</Text>
+ * }
+ * ```
+ */
+export function useTimedMetadata(): TimedMetadata | undefined {
+  const [metadata, setMetadata] = useState<TimedMetadata | undefined>(undefined)
+
+  useEffect(() => callbackManager.subscribeToTimedMetadata(setMetadata), [])
+
+  return metadata
+}

package/src/specs/TrackPlayer.nitro.ts

@@ -7,6 +7,7 @@ import type {
   PlayerState,
   PlayerConfig,
   Playlist,
+  TimedMetadata,
 } from '../types/PlayerQueue'
 
 export interface PlayerQueue extends HybridObject<{
@@ -96,6 +97,11 @@ export interface TrackPlayer extends HybridObject<{
       isManuallySeeked?: boolean
     ) => void
   ): void
+  /**
+   * Register callback for in-stream (timed) metadata — ICY/Shoutcast StreamTitle
+   * updates and ID3 frames emitted while a live stream plays.
+   */
+  onTimedMetadata(callback: (metadata: TimedMetadata) => void): void
   onAndroidAutoConnectionChange(callback: (connected: boolean) => void): void
   isAndroidAutoConnected(): boolean
   setVolume(volume: number): Promise<void>

package/src/types/PlayerQueue.ts

@@ -40,6 +40,14 @@ export interface PlayerState {
   currentPlayingType: CurrentPlayingType
 }
 
+/** In-stream metadata emitted while a stream plays (ICY/Shoutcast StreamTitle, ID3 frames) */
+export interface TimedMetadata {
+  title?: string
+  artist?: string
+  album?: string
+  artworkUrl?: string
+}
+
 export interface PlayerConfig {
   androidAutoEnabled?: boolean
   carPlayEnabled?: boolean