react-native-nitro-player 1.5.0-alpha.3 → 1.5.1-alpha.0

package/lib/hooks/callbackManager.js

@@ -1,4 +1,4 @@
-import { TrackPlayer } from '../index';
+import { PlayerQueue, TrackPlayer } from '../index';
 /**
  * Internal subscription manager that allows multiple hooks to subscribe
  * to a single native callback. This solves the problem where registering
@@ -9,10 +9,14 @@ class CallbackSubscriptionManager {
     trackChangeSubscribers = new Set();
     playbackProgressSubscribers = new Set();
     seekSubscribers = new Set();
+    temporaryQueueSubscribers = new Set();
+    playlistsChangedSubscribers = new Set();
+    isPlaylistsChangedRegistered = false;
     isPlaybackStateRegistered = false;
     isTrackChangeRegistered = false;
     isPlaybackProgressRegistered = false;
     isSeekRegistered = false;
+    isTemporaryQueueRegistered = false;
     /**
      * Subscribe to playback state changes
      * @returns Unsubscribe function
@@ -117,6 +121,68 @@ class CallbackSubscriptionManager {
             console.error('[CallbackManager] Failed to register playback progress callback:', error);
         }
     }
+    /**
+     * Subscribe to playNext / upNext changes
+     * @returns Unsubscribe function
+     */
+    subscribeToTemporaryQueueChange(callback) {
+        this.temporaryQueueSubscribers.add(callback);
+        this.ensureTemporaryQueueRegistered();
+        return () => {
+            this.temporaryQueueSubscribers.delete(callback);
+        };
+    }
+    /**
+     * Subscribe to playlist mutations (tracks added/removed/reordered).
+     * @returns Unsubscribe function
+     */
+    subscribeToPlaylistsChanged(callback) {
+        this.playlistsChangedSubscribers.add(callback);
+        this.ensurePlaylistsChangedRegistered();
+        return () => {
+            this.playlistsChangedSubscribers.delete(callback);
+        };
+    }
+    ensurePlaylistsChangedRegistered() {
+        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);
+        }
+    }
+    ensureTemporaryQueueRegistered() {
+        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);
+        }
+    }
     ensureSeekRegistered() {
         if (this.isSeekRegistered)
             return;

package/lib/hooks/useActualQueue.js

@@ -75,24 +75,30 @@ export function useActualQueue() {
             isMounted.current = false;
         };
     }, [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]);
+    // 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();
         });
-        return () => {
-            unsubscribe();
-        };
     }, [updateQueue]);
     return { queue, refreshQueue, isLoading };
 }

package/lib/hooks/useNowPlaying.js

@@ -80,12 +80,20 @@ export function useNowPlaying() {
             fetchFullState();
         });
     }, [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 };
+            });
         });
     }, []);
     // Subscribe to seek events — lightweight position/duration update

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-nitro-player",
-  "version": "1.5.0-alpha.3",
+  "version": "1.5.1-alpha.0",
   "description": "A powerful audio player library for React Native with playlist management, playback controls, and support for Android Auto and CarPlay",
   "main": "lib/index",
   "module": "lib/index",

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,4 +1,4 @@
-import { TrackPlayer } from '../index'
+import { PlayerQueue, TrackPlayer } from '../index'
 import type { TrackItem, TrackPlayerState, Reason } from '../types/PlayerQueue'
 
 type PlaybackStateCallback = (state: TrackPlayerState, reason?: Reason) => void
@@ -9,6 +9,10 @@ type PlaybackProgressCallback = (
   isManuallySeeked?: boolean
 ) => void
 type SeekCallback = (position: number, totalDuration: number) => void
+type TemporaryQueueCallback = (
+  playNextQueue: TrackItem[],
+  upNextQueue: TrackItem[]
+) => void
 
 /**
  * Internal subscription manager that allows multiple hooks to subscribe
@@ -20,10 +24,14 @@ class CallbackSubscriptionManager {
   private trackChangeSubscribers = new Set<TrackChangeCallback>()
   private playbackProgressSubscribers = new Set<PlaybackProgressCallback>()
   private seekSubscribers = new Set<SeekCallback>()
+  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 isTemporaryQueueRegistered = false
 
   /**
    * Subscribe to playback state changes
@@ -156,6 +164,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
 

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 }
+        })
       }
     )
   }, [])