react-native-nitro-player 0.0.1 → 0.3.0-alpha.10

package/lib/hooks/callbackManager.d.ts

@@ -0,0 +1,28 @@
+import type { TrackItem, TrackPlayerState, Reason } from '../types/PlayerQueue';
+type PlaybackStateCallback = (state: TrackPlayerState, reason?: Reason) => void;
+type TrackChangeCallback = (track: TrackItem, reason?: Reason) => void;
+/**
+ * Internal subscription manager that allows multiple hooks to subscribe
+ * to a single native callback. This solves the problem where registering
+ * a new callback overwrites the previous one.
+ */
+declare class CallbackSubscriptionManager {
+    private playbackStateSubscribers;
+    private trackChangeSubscribers;
+    private isPlaybackStateRegistered;
+    private isTrackChangeRegistered;
+    /**
+     * Subscribe to playback state changes
+     * @returns Unsubscribe function
+     */
+    subscribeToPlaybackState(callback: PlaybackStateCallback): () => void;
+    /**
+     * Subscribe to track changes
+     * @returns Unsubscribe function
+     */
+    subscribeToTrackChange(callback: TrackChangeCallback): () => void;
+    private ensurePlaybackStateRegistered;
+    private ensureTrackChangeRegistered;
+}
+export declare const callbackManager: CallbackSubscriptionManager;
+export {};

package/lib/hooks/callbackManager.js

@@ -0,0 +1,76 @@
+import { TrackPlayer } from '../index';
+/**
+ * Internal subscription manager that allows multiple hooks to subscribe
+ * to a single native callback. This solves the problem where registering
+ * a new callback overwrites the previous one.
+ */
+class CallbackSubscriptionManager {
+    playbackStateSubscribers = new Set();
+    trackChangeSubscribers = new Set();
+    isPlaybackStateRegistered = false;
+    isTrackChangeRegistered = false;
+    /**
+     * Subscribe to playback state changes
+     * @returns Unsubscribe function
+     */
+    subscribeToPlaybackState(callback) {
+        this.playbackStateSubscribers.add(callback);
+        this.ensurePlaybackStateRegistered();
+        return () => {
+            this.playbackStateSubscribers.delete(callback);
+        };
+    }
+    /**
+     * Subscribe to track changes
+     * @returns Unsubscribe function
+     */
+    subscribeToTrackChange(callback) {
+        this.trackChangeSubscribers.add(callback);
+        this.ensureTrackChangeRegistered();
+        return () => {
+            this.trackChangeSubscribers.delete(callback);
+        };
+    }
+    ensurePlaybackStateRegistered() {
+        if (this.isPlaybackStateRegistered)
+            return;
+        try {
+            TrackPlayer.onPlaybackStateChange((state, reason) => {
+                this.playbackStateSubscribers.forEach((subscriber) => {
+                    try {
+                        subscriber(state, reason);
+                    }
+                    catch (error) {
+                        console.error('[CallbackManager] Error in playback state subscriber:', error);
+                    }
+                });
+            });
+            this.isPlaybackStateRegistered = true;
+        }
+        catch (error) {
+            console.error('[CallbackManager] Failed to register playback state callback:', error);
+        }
+    }
+    ensureTrackChangeRegistered() {
+        if (this.isTrackChangeRegistered)
+            return;
+        try {
+            TrackPlayer.onChangeTrack((track, reason) => {
+                this.trackChangeSubscribers.forEach((subscriber) => {
+                    try {
+                        subscriber(track, reason);
+                    }
+                    catch (error) {
+                        console.error('[CallbackManager] Error in track change subscriber:', error);
+                    }
+                });
+            });
+            this.isTrackChangeRegistered = true;
+        }
+        catch (error) {
+            console.error('[CallbackManager] Failed to register track change callback:', error);
+        }
+    }
+}
+// Export singleton instance
+export const callbackManager = new CallbackSubscriptionManager();

package/lib/hooks/index.d.ts

@@ -1,6 +1,13 @@
 export { useOnChangeTrack } from './useOnChangeTrack';
+export type { TrackChangeResult } from './useOnChangeTrack';
 export { useOnPlaybackStateChange } from './useOnPlaybackStateChange';
+export type { PlaybackStateResult } from './useOnPlaybackStateChange';
 export { useOnSeek } from './useOnSeek';
 export { useOnPlaybackProgressChange } from './useOnPlaybackProgressChange';
 export { useAndroidAutoConnection } from './useAndroidAutoConnection';
 export { useAudioDevices } from './useAudioDevices';
+export { useNowPlaying } from './useNowPlaying';
+export { usePlaylist } from './usePlaylist';
+export type { UsePlaylistResult } from './usePlaylist';
+export { useActualQueue } from './useActualQueue';
+export type { UseActualQueueResult } from './useActualQueue';

package/lib/hooks/index.js

@@ -4,3 +4,6 @@ export { useOnSeek } from './useOnSeek';
 export { useOnPlaybackProgressChange } from './useOnPlaybackProgressChange';
 export { useAndroidAutoConnection } from './useAndroidAutoConnection';
 export { useAudioDevices } from './useAudioDevices';
+export { useNowPlaying } from './useNowPlaying';
+export { usePlaylist } from './usePlaylist';
+export { useActualQueue } from './useActualQueue';

package/lib/hooks/useActualQueue.d.ts

@@ -0,0 +1,48 @@
+import type { TrackItem } from '../types/PlayerQueue';
+export interface UseActualQueueResult {
+    /** The current queue in playback order */
+    queue: TrackItem[];
+    /** Manually refresh the queue */
+    refreshQueue: () => void;
+    /** Whether the queue is currently loading */
+    isLoading: boolean;
+}
+/**
+ * Hook to get the actual playback queue including temporary tracks
+ *
+ * Returns the complete queue in playback order:
+ * [tracks_before_current] + [current] + [playNext_stack] + [upNext_queue] + [remaining_tracks]
+ *
+ * Auto-updates when:
+ * - Track changes
+ * - Playback state changes
+ *
+ * Call `refreshQueue()` after adding tracks via `playNext()` or `addToUpNext()`
+ * to immediately see the updated queue.
+ *
+ * @returns Object containing queue array, refresh function, and loading state
+ *
+ * @example
+ * ```tsx
+ * function QueueView() {
+ *   const { queue, refreshQueue, isLoading } = useActualQueue();
+ *
+ *   const handleAddToUpNext = (trackId: string) => {
+ *     TrackPlayer.addToUpNext(trackId);
+ *     // Refresh queue after adding track
+ *     setTimeout(refreshQueue, 100);
+ *   };
+ *
+ *   return (
+ *     <ScrollView>
+ *       {queue.map((track, index) => (
+ *         <Text key={track.id}>
+ *           {index + 1}. {track.title}
+ *         </Text>
+ *       ))}
+ *     </ScrollView>
+ *   );
+ * }
+ * ```
+ */
+export declare function useActualQueue(): UseActualQueueResult;

package/lib/hooks/useActualQueue.js

@@ -0,0 +1,98 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { TrackPlayer } from '../index';
+import { callbackManager } from './callbackManager';
+/**
+ * Hook to get the actual playback queue including temporary tracks
+ *
+ * Returns the complete queue in playback order:
+ * [tracks_before_current] + [current] + [playNext_stack] + [upNext_queue] + [remaining_tracks]
+ *
+ * Auto-updates when:
+ * - Track changes
+ * - Playback state changes
+ *
+ * Call `refreshQueue()` after adding tracks via `playNext()` or `addToUpNext()`
+ * to immediately see the updated queue.
+ *
+ * @returns Object containing queue array, refresh function, and loading state
+ *
+ * @example
+ * ```tsx
+ * function QueueView() {
+ *   const { queue, refreshQueue, isLoading } = useActualQueue();
+ *
+ *   const handleAddToUpNext = (trackId: string) => {
+ *     TrackPlayer.addToUpNext(trackId);
+ *     // Refresh queue after adding track
+ *     setTimeout(refreshQueue, 100);
+ *   };
+ *
+ *   return (
+ *     <ScrollView>
+ *       {queue.map((track, index) => (
+ *         <Text key={track.id}>
+ *           {index + 1}. {track.title}
+ *         </Text>
+ *       ))}
+ *     </ScrollView>
+ *   );
+ * }
+ * ```
+ */
+export function useActualQueue() {
+    const [queue, setQueue] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const isMounted = useRef(true);
+    const updateQueue = useCallback(() => {
+        if (!isMounted.current)
+            return;
+        try {
+            const actualQueue = TrackPlayer.getActualQueue();
+            if (isMounted.current) {
+                setQueue(actualQueue);
+                setIsLoading(false);
+            }
+        }
+        catch (error) {
+            console.error('[useActualQueue] Error getting queue:', error);
+            if (isMounted.current) {
+                setQueue([]);
+                setIsLoading(false);
+            }
+        }
+    }, []);
+    const refreshQueue = useCallback(() => {
+        if (!isMounted.current)
+            return;
+        setIsLoading(true);
+        updateQueue();
+    }, [updateQueue]);
+    // Initialize queue
+    useEffect(() => {
+        isMounted.current = true;
+        updateQueue();
+        return () => {
+            isMounted.current = false;
+        };
+    }, [updateQueue]);
+    // Update queue on track changes (with slight delay to ensure native side has updated)
+    useEffect(() => {
+        const unsubscribe = callbackManager.subscribeToTrackChange(() => {
+            // Small delay to ensure native queue is updated
+            setTimeout(updateQueue, 50);
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [updateQueue]);
+    // Update queue on playback state changes
+    useEffect(() => {
+        const unsubscribe = callbackManager.subscribeToPlaybackState(() => {
+            updateQueue();
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [updateQueue]);
+    return { queue, refreshQueue, isLoading };
+}

package/lib/hooks/useNowPlaying.d.ts

@@ -0,0 +1,36 @@
+import type { PlayerState } from '../types/PlayerQueue';
+/**
+ * Hook to get the current player state (same as TrackPlayer.getState())
+ *
+ * This hook provides all player state information including:
+ * - Current track
+ * - Current position and duration
+ * - Playback state (playing, paused, stopped)
+ * - Current playlist ID
+ * - Current track index
+ *
+ * The hook uses native callbacks for immediate updates when state changes.
+ * Multiple components can use this hook simultaneously.
+ *
+ * @returns PlayerState object with all current player information
+ *
+ * @example
+ * ```tsx
+ * function PlayerComponent() {
+ *   const state = useNowPlaying()
+ *
+ *   return (
+ *     <View>
+ *       {state.currentTrack && (
+ *         <Text>Now Playing: {state.currentTrack.title}</Text>
+ *       )}
+ *       <Text>Position: {state.currentPosition} / {state.totalDuration}</Text>
+ *       <Text>State: {state.currentState}</Text>
+ *       <Text>Playlist: {state.currentPlaylistId || 'None'}</Text>
+ *       <Text>Index: {state.currentIndex}</Text>
+ *     </View>
+ *   )
+ * }
+ * ```
+ */
+export declare function useNowPlaying(): PlayerState;

package/lib/hooks/useNowPlaying.js

@@ -0,0 +1,87 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { TrackPlayer } from '../index';
+import { callbackManager } from './callbackManager';
+const DEFAULT_STATE = {
+    currentTrack: null,
+    currentPosition: 0,
+    totalDuration: 0,
+    currentState: 'stopped',
+    currentPlaylistId: null,
+    currentIndex: -1,
+};
+/**
+ * Hook to get the current player state (same as TrackPlayer.getState())
+ *
+ * This hook provides all player state information including:
+ * - Current track
+ * - Current position and duration
+ * - Playback state (playing, paused, stopped)
+ * - Current playlist ID
+ * - Current track index
+ *
+ * The hook uses native callbacks for immediate updates when state changes.
+ * Multiple components can use this hook simultaneously.
+ *
+ * @returns PlayerState object with all current player information
+ *
+ * @example
+ * ```tsx
+ * function PlayerComponent() {
+ *   const state = useNowPlaying()
+ *
+ *   return (
+ *     <View>
+ *       {state.currentTrack && (
+ *         <Text>Now Playing: {state.currentTrack.title}</Text>
+ *       )}
+ *       <Text>Position: {state.currentPosition} / {state.totalDuration}</Text>
+ *       <Text>State: {state.currentState}</Text>
+ *       <Text>Playlist: {state.currentPlaylistId || 'None'}</Text>
+ *       <Text>Index: {state.currentIndex}</Text>
+ *     </View>
+ *   )
+ * }
+ * ```
+ */
+export function useNowPlaying() {
+    const [state, setState] = useState(DEFAULT_STATE);
+    const isMounted = useRef(true);
+    const updateState = useCallback(() => {
+        if (!isMounted.current)
+            return;
+        try {
+            const newState = TrackPlayer.getState();
+            setState(newState);
+        }
+        catch (error) {
+            console.error('[useNowPlaying] Error updating player state:', error);
+        }
+    }, []);
+    // Initialize with current state
+    useEffect(() => {
+        isMounted.current = true;
+        updateState();
+        return () => {
+            isMounted.current = false;
+        };
+    }, [updateState]);
+    // Subscribe to track changes
+    useEffect(() => {
+        const unsubscribe = callbackManager.subscribeToTrackChange(() => {
+            updateState();
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [updateState]);
+    // Subscribe to playback state changes
+    useEffect(() => {
+        const unsubscribe = callbackManager.subscribeToPlaybackState(() => {
+            updateState();
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [updateState]);
+    return state;
+}

package/lib/hooks/useOnChangeTrack.d.ts

@@ -1,9 +1,36 @@
 import type { TrackItem, Reason } from '../types/PlayerQueue';
+export interface TrackChangeResult {
+    track: TrackItem | null;
+    reason: Reason | undefined;
+    isReady: boolean;
+}
 /**
- * Hook to get the current track and track change reason
- * @returns Object with current track and reason, or undefined if no track is playing
+ * Hook to subscribe to track changes.
+ *
+ * This hook provides real-time track change updates using native callbacks.
+ * Multiple components can use this hook simultaneously without interfering
+ * with each other.
+ *
+ * @returns Object with:
+ *   - track: Current track or null if no track is playing
+ *   - reason: Reason for the last track change
+ *   - isReady: Whether the initial state has been loaded
+ *
+ * @example
+ * ```tsx
+ * function NowPlaying() {
+ *   const { track, reason, isReady } = useOnChangeTrack()
+ *
+ *   if (!isReady) return <Text>Loading...</Text>
+ *   if (!track) return <Text>No track playing</Text>
+ *
+ *   return (
+ *     <View>
+ *       <Text>{track.title}</Text>
+ *       <Text>{track.artist}</Text>
+ *     </View>
+ *   )
+ * }
+ * ```
  */
-export declare function useOnChangeTrack(): {
-    track: TrackItem | undefined;
-    reason: Reason | undefined;
-};
+export declare function useOnChangeTrack(): TrackChangeResult;

package/lib/hooks/useOnChangeTrack.js

@@ -1,17 +1,73 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { TrackPlayer } from '../index';
+import { callbackManager } from './callbackManager';
 /**
- * Hook to get the current track and track change reason
- * @returns Object with current track and reason, or undefined if no track is playing
+ * Hook to subscribe to track changes.
+ *
+ * This hook provides real-time track change updates using native callbacks.
+ * Multiple components can use this hook simultaneously without interfering
+ * with each other.
+ *
+ * @returns Object with:
+ *   - track: Current track or null if no track is playing
+ *   - reason: Reason for the last track change
+ *   - isReady: Whether the initial state has been loaded
+ *
+ * @example
+ * ```tsx
+ * function NowPlaying() {
+ *   const { track, reason, isReady } = useOnChangeTrack()
+ *
+ *   if (!isReady) return <Text>Loading...</Text>
+ *   if (!track) return <Text>No track playing</Text>
+ *
+ *   return (
+ *     <View>
+ *       <Text>{track.title}</Text>
+ *       <Text>{track.artist}</Text>
+ *     </View>
+ *   )
+ * }
+ * ```
  */
 export function useOnChangeTrack() {
-    const [track, setTrack] = useState(undefined);
+    const [track, setTrack] = useState(null);
     const [reason, setReason] = useState(undefined);
+    const [isReady, setIsReady] = useState(false);
+    const isMounted = useRef(true);
+    // Initialize with current track from the player
     useEffect(() => {
-        TrackPlayer.onChangeTrack((newTrack, newReason) => {
-            setTrack(newTrack);
-            setReason(newReason);
-        });
+        isMounted.current = true;
+        try {
+            const playerState = TrackPlayer.getState();
+            if (isMounted.current) {
+                setTrack(playerState.currentTrack);
+                setIsReady(true);
+            }
+        }
+        catch (error) {
+            console.error('[useOnChangeTrack] Failed to get initial state:', error);
+            if (isMounted.current) {
+                setTrack(null);
+                setIsReady(true);
+            }
+        }
+        return () => {
+            isMounted.current = false;
+        };
     }, []);
-    return { track, reason };
+    // Subscribe to track changes
+    useEffect(() => {
+        const handleTrackChange = (newTrack, newReason) => {
+            if (isMounted.current) {
+                setTrack(newTrack);
+                setReason(newReason);
+            }
+        };
+        const unsubscribe = callbackManager.subscribeToTrackChange(handleTrackChange);
+        return () => {
+            unsubscribe();
+        };
+    }, []);
+    return { track, reason, isReady };
 }

package/lib/hooks/useOnPlaybackStateChange.d.ts

@@ -1,9 +1,35 @@
 import type { TrackPlayerState, Reason } from '../types/PlayerQueue';
+export interface PlaybackStateResult {
+    state: TrackPlayerState;
+    reason: Reason | undefined;
+    isReady: boolean;
+}
 /**
- * Hook to get the current playback state and reason
- * @returns Object with current playback state and reason
+ * Hook to subscribe to playback state changes.
+ *
+ * This hook provides real-time playback state updates using native callbacks.
+ * Multiple components can use this hook simultaneously without interfering
+ * with each other.
+ *
+ * @returns Object with:
+ *   - state: Current playback state ('playing' | 'paused' | 'stopped')
+ *   - reason: Reason for the last state change
+ *   - isReady: Whether the initial state has been loaded
+ *
+ * @example
+ * ```tsx
+ * function PlaybackIndicator() {
+ *   const { state, reason, isReady } = useOnPlaybackStateChange()
+ *
+ *   if (!isReady) return <Text>Loading...</Text>
+ *
+ *   return (
+ *     <View>
+ *       <Text>State: {state}</Text>
+ *       {reason && <Text>Reason: {reason}</Text>}
+ *     </View>
+ *   )
+ * }
+ * ```
  */
-export declare function useOnPlaybackStateChange(): {
-    state: TrackPlayerState | undefined;
-    reason: Reason | undefined;
-};
+export declare function useOnPlaybackStateChange(): PlaybackStateResult;

package/lib/hooks/useOnPlaybackStateChange.js

@@ -1,17 +1,73 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { TrackPlayer } from '../index';
+import { callbackManager } from './callbackManager';
 /**
- * Hook to get the current playback state and reason
- * @returns Object with current playback state and reason
+ * Hook to subscribe to playback state changes.
+ *
+ * This hook provides real-time playback state updates using native callbacks.
+ * Multiple components can use this hook simultaneously without interfering
+ * with each other.
+ *
+ * @returns Object with:
+ *   - state: Current playback state ('playing' | 'paused' | 'stopped')
+ *   - reason: Reason for the last state change
+ *   - isReady: Whether the initial state has been loaded
+ *
+ * @example
+ * ```tsx
+ * function PlaybackIndicator() {
+ *   const { state, reason, isReady } = useOnPlaybackStateChange()
+ *
+ *   if (!isReady) return <Text>Loading...</Text>
+ *
+ *   return (
+ *     <View>
+ *       <Text>State: {state}</Text>
+ *       {reason && <Text>Reason: {reason}</Text>}
+ *     </View>
+ *   )
+ * }
+ * ```
  */
 export function useOnPlaybackStateChange() {
-    const [state, setState] = useState(undefined);
+    const [state, setState] = useState('stopped');
     const [reason, setReason] = useState(undefined);
+    const [isReady, setIsReady] = useState(false);
+    const isMounted = useRef(true);
+    // Initialize with current state from the player
     useEffect(() => {
-        TrackPlayer.onPlaybackStateChange((newState, newReason) => {
-            setState(newState);
-            setReason(newReason);
-        });
+        isMounted.current = true;
+        // Get initial state synchronously
+        try {
+            const playerState = TrackPlayer.getState();
+            if (isMounted.current) {
+                setState(playerState.currentState);
+                setIsReady(true);
+            }
+        }
+        catch (error) {
+            console.error('[useOnPlaybackStateChange] Failed to get initial state:', error);
+            if (isMounted.current) {
+                setState('stopped');
+                setIsReady(true);
+            }
+        }
+        return () => {
+            isMounted.current = false;
+        };
     }, []);
-    return { state, reason };
+    // Subscribe to playback state changes
+    useEffect(() => {
+        const handleStateChange = (newState, newReason) => {
+            if (isMounted.current) {
+                setState(newState);
+                setReason(newReason);
+            }
+        };
+        const unsubscribe = callbackManager.subscribeToPlaybackState(handleStateChange);
+        return () => {
+            unsubscribe();
+        };
+    }, []);
+    return { state, reason, isReady };
 }