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

package/ios/core/TrackPlayerQueue.swift

@@ -20,11 +20,7 @@ extension TrackPlayerCore {
 
   func skipToIndex(index: Int) async -> Bool {
     if isCasting {
-      return await withPlayerQueueNoThrow {
-        guard index >= 0 && index < self.getActualQueueInternal().count else { return false }
-        self.castManager?.jump(toQueueIndex: index)
-        return true
-      }
+      return await withPlayerQueueNoThrow { self.skipToIndexCastInternal(index: index) }
     }
     return await withPlayerQueueNoThrow { self.skipToIndexInternal(index: index) }
   }
@@ -40,6 +36,29 @@ extension TrackPlayerCore {
   // MARK: - Internal (run on playerQueue)
 
   func getStateInternal() -> PlayerState {
+    // While casting, report the receiver's cached state — the local AVQueuePlayer is paused/stale.
+    if isCasting, let cast = castManager {
+      let currentTrack = getCurrentTrack()
+      let playingType: CurrentPlayingType
+      if currentTrack == nil { playingType = .notPlaying }
+      else {
+        switch currentTemporaryType {
+        case .none: playingType = .playlist
+        case .playNext: playingType = .playNext
+        case .upNext: playingType = .upNext
+        }
+      }
+      return PlayerState(
+        currentTrack: currentTrack.map { Variant_NullType_TrackItem.second($0) },
+        currentPosition: cast.lastKnownRemotePosition,
+        totalDuration: cast.lastKnownRemoteDuration,
+        currentState: cast.cachedPlaybackState,
+        currentPlaylistId: currentPlaylistId.map { Variant_NullType_String.second($0) },
+        currentIndex: currentTrackIndex >= 0 ? Double(currentTrackIndex) : -1.0,
+        currentPlayingType: playingType
+      )
+    }
+
     guard let player else {
       return PlayerState(
         currentTrack: nil, currentPosition: 0.0, totalDuration: 0.0,
@@ -96,7 +115,7 @@ extension TrackPlayerCore {
     if let current = getCurrentTrack() { queue.append(current) }
 
     // Add playNext stack — skip the currently playing track by ID (already added as current)
-    let currentId = player?.currentItem?.trackId
+    let currentId = activeCurrentTrackId
     if currentTemporaryType == .playNext, let currentId = currentId {
       var skipped = false
       for track in playNextStack {
@@ -126,10 +145,7 @@ extension TrackPlayerCore {
   }
 
   func getCurrentTrack() -> TrackItem? {
-    if currentTemporaryType != .none,
-      let currentItem = player?.currentItem,
-      let trackId = currentItem.trackId
-    {
+    if currentTemporaryType != .none, let trackId = activeCurrentTrackId {
       if currentTemporaryType == .playNext { return playNextStack.first(where: { $0.id == trackId }) }
       if currentTemporaryType == .upNext { return upNextQueue.first(where: { $0.id == trackId }) }
     }
@@ -222,7 +238,7 @@ extension TrackPlayerCore {
   }
 
   func determineCurrentTemporaryType() -> TemporaryType {
-    guard let trackId = player?.currentItem?.trackId else { return .none }
+    guard let trackId = activeCurrentTrackId else { return .none }
     if playNextStack.contains(where: { $0.id == trackId }) { return .playNext }
     if upNextQueue.contains(where: { $0.id == trackId }) { return .upNext }
     return .none

package/ios/core/TrackPlayerQueueBuild.swift

@@ -240,6 +240,12 @@ extension TrackPlayerCore {
   /// - Parameter changedTrackIds: When non-nil, performs a surgical update:
   ///   only AVPlayerItems whose track ID is in this set are removed and re-created.
   func rebuildAVQueueFromCurrentPosition(changedTrackIds: Set<String>? = nil) {
+    // While casting, queue changes are applied to the receiver — the local AVQueuePlayer is dormant.
+    if isCasting {
+      syncCastQueueAfterCurrent()
+      return
+    }
+
     guard let player = self.player else { return }
 
     let currentItem = player.currentItem

package/ios/core/TrackPlayerUrlLoader.swift

@@ -78,8 +78,8 @@ extension TrackPlayerCore {
     // Update in PlaylistManager
     let affectedPlaylists = self.playlistManager.updateTracks(tracks: safeTracks)
 
-    // If the current track had no URL and now has one, replace the current AVPlayerItem
-    if let update = currentTrack, currentTrackIsEmpty, !update.url.isEmpty {
+    // Replace the current AVPlayerItem when its URL just resolved (local only — cast reloads below instead).
+    if !self.isCasting, let update = currentTrack, currentTrackIsEmpty, !update.url.isEmpty {
       NitroPlayerLogger.log("TrackPlayerCore",
         "🔄 Replacing current AVPlayerItem for track with resolved URL: \(update.id)")
       if let newItem = self.createGaplessPlayerItem(for: update, isPreload: false) {
@@ -101,6 +101,30 @@ extension TrackPlayerCore {
           "📥 Synced currentTracks from PlaylistManager (\(self.currentTracks.count) tracks)")
       }
 
+      if self.isCasting {
+        // Resolved URLs are applied by (re)loading/extending the remote queue — never by touching the silent local player.
+        let currentResolvedNow = currentTrackIsEmpty
+          && currentTrackId.map { id in updatedTrackIds.contains(id) } ?? false
+        let staleOnReceiver = !updatedTrackIds
+          .isDisjoint(with: Set(self.castManager?.loadedTrackIds ?? []))
+
+        if currentResolvedNow || !(self.castManager?.hasLoadedMedia ?? false) {
+          // Parked track just became castable (or nothing loaded) — atomic load from current.
+          self.loadCastQueue(autoplay: self.intendedToPlay, position: 0)
+        } else if staleOnReceiver {
+          // URLs changed for items already on the receiver — reload at position before stale ones fail.
+          self.loadCastQueue(
+            autoplay: self.intendedToPlay,
+            position: self.castManager?.lastKnownRemotePosition ?? 0
+          )
+        } else {
+          // Newly castable tracks extend the receiver queue without interrupting playback.
+          self.syncCastQueueAfterCurrent()
+        }
+        NitroPlayerLogger.log("TrackPlayerCore", "✅ Cast queue synced after track updates")
+        return
+      }
+
       if self.player?.currentItem == nil, let player = self.player {
         // No AVPlayerItem exists yet — lazy-load mode: URLs were empty when the queue first loaded.
         NitroPlayerLogger.log("TrackPlayerCore",

package/lib/components/CastButton.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Pressable, StyleSheet, View, } from 'react-native';
+import { Pressable, View, } from 'react-native';
 import { Cast } from '../index';
 import { useCastState } from '../hooks/useCastState';
 /**
@@ -40,61 +40,86 @@ export function CastButton({ size = 24, color = '#000000', activeColor = '#1E88E
 }
 /**
  * Dependency-free rendition of the standard Cast glyph: a rounded "screen"
- * rectangle with a broadcast signal (dot + two arcs) in the bottom-left corner.
- * Drawn purely with `View`s so the library stays dependency-free.
+ * rectangle (with its bottom-left corner open) and a broadcast signal — a dot
+ * and two concentric arcs — radiating from the bottom-left. Drawn purely with
+ * `View`s so the library stays dependency-free.
  */
 function CastGlyph({ size, color, }) {
-    const stroke = Math.max(1.5, Math.round(size * 0.083));
-    const inset = stroke;
-    const dotSize = stroke * 1.7;
-    const r1 = size * 0.28; // inner arc radius
-    const r2 = size * 0.46; // outer arc radius
+    const stroke = Math.max(1.5, Math.round(size / 13));
+    const inset = Math.round(size * 0.14);
+    const dotSize = stroke * 1.5;
+    // Origin of the broadcast signal — the screen's bottom-left corner.
+    const cx = inset + stroke / 2;
+    const cy = size - inset - stroke / 2;
+    // Leave the screen's bottom-left corner open so the signal reads clearly.
+    const gap = size * 0.46;
     return (React.createElement(View, { style: { width: size, height: size } },
-        React.createElement(View, { style: [
-                StyleSheet.absoluteFill,
-                {
-                    borderWidth: stroke,
-                    borderColor: color,
-                    borderRadius: Math.max(2, size * 0.12),
-                },
-            ] }),
         React.createElement(View, { style: {
                 position: 'absolute',
                 left: inset,
+                top: inset,
+                right: inset,
+                height: stroke,
+                backgroundColor: color,
+                borderRadius: stroke,
+            } }),
+        React.createElement(View, { style: {
+                position: 'absolute',
+                top: inset,
+                bottom: inset,
+                right: inset,
+                width: stroke,
+                backgroundColor: color,
+                borderRadius: stroke,
+            } }),
+        React.createElement(View, { style: {
+                position: 'absolute',
+                left: inset + gap,
                 bottom: inset,
+                right: inset,
+                height: stroke,
+                backgroundColor: color,
+                borderRadius: stroke,
+            } }),
+        React.createElement(View, { style: {
+                position: 'absolute',
+                left: inset,
+                top: inset,
+                height: size - 2 * inset - gap,
+                width: stroke,
+                backgroundColor: color,
+                borderRadius: stroke,
+            } }),
+        React.createElement(RippleArc, { cx: cx, cy: cy, radius: size * 0.2, stroke: stroke, color: color }),
+        React.createElement(RippleArc, { cx: cx, cy: cy, radius: size * 0.34, stroke: stroke, color: color }),
+        React.createElement(View, { style: {
+                position: 'absolute',
+                left: cx - dotSize / 2,
+                top: cy - dotSize / 2,
                 width: dotSize,
                 height: dotSize,
                 borderRadius: dotSize / 2,
                 backgroundColor: color,
-            } }),
-        React.createElement(Arc, { origin: inset + dotSize / 2, radius: r1, stroke: stroke, color: color }),
-        React.createElement(Arc, { origin: inset + dotSize / 2, radius: r2, stroke: stroke, color: color })));
+            } })));
 }
 /**
- * A quarter-circle arc (the top-right quadrant) centered at the bottom-left
- * `origin` point. Produced by clipping a full bordered circle to one quadrant.
+ * A quarter-circle arc (the up-right quadrant) centered at (cx, cy). Rendered as
+ * a circle with only its top border colored, rotated 45° so the visible cap
+ * faces up-and-to-the-right — i.e. radiating from the bottom-left dot.
  */
-function Arc({ origin, radius, stroke, color, }) {
-    return (React.createElement(View
-    // Clip box reveals only the quadrant facing up-and-right from the origin.
-    , { 
-        // Clip box reveals only the quadrant facing up-and-right from the origin.
-        style: {
+function RippleArc({ cx, cy, radius, stroke, color, }) {
+    return (React.createElement(View, { style: {
             position: 'absolute',
-            left: origin,
-            bottom: origin - radius,
-            width: radius,
-            height: radius,
-            overflow: 'hidden',
-        } },
-        React.createElement(View, { style: {
-                position: 'absolute',
-                left: -radius,
-                top: 0,
-                width: radius * 2,
-                height: radius * 2,
-                borderRadius: radius,
-                borderWidth: stroke,
-                borderColor: color,
-            } })));
+            left: cx - radius,
+            top: cy - radius,
+            width: radius * 2,
+            height: radius * 2,
+            borderRadius: radius,
+            borderWidth: stroke,
+            borderTopColor: color,
+            borderRightColor: 'transparent',
+            borderBottomColor: 'transparent',
+            borderLeftColor: 'transparent',
+            transform: [{ rotate: '45deg' }],
+        } }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-nitro-player",
-  "version": "1.5.0-alpha.0",
+  "version": "1.5.0-alpha.3",
   "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

@@ -1,7 +1,6 @@
 import React from 'react'
 import {
   Pressable,
-  StyleSheet,
   View,
   type PressableProps,
   type StyleProp,
@@ -104,8 +103,9 @@ export function CastButton({
 
 /**
  * Dependency-free rendition of the standard Cast glyph: a rounded "screen"
- * rectangle with a broadcast signal (dot + two arcs) in the bottom-left corner.
- * Drawn purely with `View`s so the library stays dependency-free.
+ * rectangle (with its bottom-left corner open) and a broadcast signal — a dot
+ * and two concentric arcs — radiating from the bottom-left. Drawn purely with
+ * `View`s so the library stays dependency-free.
  */
 function CastGlyph({
   size,
@@ -114,83 +114,120 @@ function CastGlyph({
   size: number
   color: string
 }): React.ReactElement {
-  const stroke = Math.max(1.5, Math.round(size * 0.083))
-  const inset = stroke
-  const dotSize = stroke * 1.7
-  const r1 = size * 0.28 // inner arc radius
-  const r2 = size * 0.46 // outer arc radius
+  const stroke = Math.max(1.5, Math.round(size / 13))
+  const inset = Math.round(size * 0.14)
+  const dotSize = stroke * 1.5
+  // Origin of the broadcast signal — the screen's bottom-left corner.
+  const cx = inset + stroke / 2
+  const cy = size - inset - stroke / 2
+  // Leave the screen's bottom-left corner open so the signal reads clearly.
+  const gap = size * 0.46
 
   return (
     <View style={{ width: size, height: size }}>
-      {/* Screen outline */}
+      {/* Screen: top + right + most of bottom + most of left, leaving the
+          bottom-left corner open (composed from edges for a clean cast look). */}
+      {/* Top edge */}
       <View
-        style={[
-          StyleSheet.absoluteFill,
-          {
-            borderWidth: stroke,
-            borderColor: color,
-            borderRadius: Math.max(2, size * 0.12),
-          },
-        ]}
+        style={{
+          position: 'absolute',
+          left: inset,
+          top: inset,
+          right: inset,
+          height: stroke,
+          backgroundColor: color,
+          borderRadius: stroke,
+        }}
       />
-      {/* Broadcast dot */}
+      {/* Right edge */}
       <View
         style={{
           position: 'absolute',
-          left: inset,
+          top: inset,
+          bottom: inset,
+          right: inset,
+          width: stroke,
+          backgroundColor: color,
+          borderRadius: stroke,
+        }}
+      />
+      {/* Bottom edge (stops short of the bottom-left corner) */}
+      <View
+        style={{
+          position: 'absolute',
+          left: inset + gap,
           bottom: inset,
+          right: inset,
+          height: stroke,
+          backgroundColor: color,
+          borderRadius: stroke,
+        }}
+      />
+      {/* Left edge (stops short of the bottom-left corner) */}
+      <View
+        style={{
+          position: 'absolute',
+          left: inset,
+          top: inset,
+          height: size - 2 * inset - gap,
+          width: stroke,
+          backgroundColor: color,
+          borderRadius: stroke,
+        }}
+      />
+      {/* 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} />
+      {/* Broadcast dot */}
+      <View
+        style={{
+          position: 'absolute',
+          left: cx - dotSize / 2,
+          top: cy - dotSize / 2,
           width: dotSize,
           height: dotSize,
           borderRadius: dotSize / 2,
           backgroundColor: color,
         }}
       />
-      {/* Two concentric quarter arcs radiating from the dot */}
-      <Arc origin={inset + dotSize / 2} radius={r1} stroke={stroke} color={color} />
-      <Arc origin={inset + dotSize / 2} radius={r2} stroke={stroke} color={color} />
     </View>
   )
 }
 
 /**
- * A quarter-circle arc (the top-right quadrant) centered at the bottom-left
- * `origin` point. Produced by clipping a full bordered circle to one quadrant.
+ * A quarter-circle arc (the up-right quadrant) centered at (cx, cy). Rendered as
+ * a circle with only its top border colored, rotated 45° so the visible cap
+ * faces up-and-to-the-right — i.e. radiating from the bottom-left dot.
  */
-function Arc({
-  origin,
+function RippleArc({
+  cx,
+  cy,
   radius,
   stroke,
   color,
 }: {
-  origin: number
+  cx: number
+  cy: number
   radius: number
   stroke: number
   color: string
 }): React.ReactElement {
   return (
     <View
-      // Clip box reveals only the quadrant facing up-and-right from the origin.
       style={{
         position: 'absolute',
-        left: origin,
-        bottom: origin - radius,
-        width: radius,
-        height: radius,
-        overflow: 'hidden',
+        left: cx - radius,
+        top: cy - radius,
+        width: radius * 2,
+        height: radius * 2,
+        borderRadius: radius,
+        borderWidth: stroke,
+        borderTopColor: color,
+        borderRightColor: 'transparent',
+        borderBottomColor: 'transparent',
+        borderLeftColor: 'transparent',
+        transform: [{ rotate: '45deg' }],
       }}
-    >
-      <View
-        style={{
-          position: 'absolute',
-          left: -radius,
-          top: 0,
-          width: radius * 2,
-          height: radius * 2,
-          borderRadius: radius,
-          borderWidth: stroke,
-          borderColor: color,
-        }}
-      />
-    </View>
+    />
   )
 }