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

package/src/hooks/useOnChangeTrack.ts

@@ -1,24 +1,88 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { TrackPlayer } from '../index'
+import { callbackManager } from './callbackManager'
 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 function useOnChangeTrack(): {
-  track: TrackItem | undefined
-  reason: Reason | undefined
-} {
-  const [track, setTrack] = useState<TrackItem | undefined>(undefined)
+export function useOnChangeTrack(): TrackChangeResult {
+  const [track, setTrack] = useState<TrackItem | null>(null)
   const [reason, setReason] = useState<Reason | undefined>(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
+    }
+  }, [])
+
+  // Subscribe to track changes
+  useEffect(() => {
+    const handleTrackChange = (newTrack: TrackItem, newReason?: Reason) => {
+      if (isMounted.current) {
+        setTrack(newTrack)
+        setReason(newReason)
+      }
+    }
+
+    const unsubscribe =
+      callbackManager.subscribeToTrackChange(handleTrackChange)
+
+    return () => {
+      unsubscribe()
+    }
   }, [])
 
-  return { track, reason }
+  return { track, reason, isReady }
 }

package/src/hooks/useOnPlaybackStateChange.ts

@@ -1,24 +1,94 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { TrackPlayer } from '../index'
+import { callbackManager } from './callbackManager'
 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 function useOnPlaybackStateChange(): {
-  state: TrackPlayerState | undefined
-  reason: Reason | undefined
-} {
-  const [state, setState] = useState<TrackPlayerState | undefined>(undefined)
+export function useOnPlaybackStateChange(): PlaybackStateResult {
+  const [state, setState] = useState<TrackPlayerState>('stopped')
   const [reason, setReason] = useState<Reason | undefined>(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
+    }
+  }, [])
+
+  // Subscribe to playback state changes
+  useEffect(() => {
+    const handleStateChange = (
+      newState: TrackPlayerState,
+      newReason?: Reason
+    ) => {
+      if (isMounted.current) {
+        setState(newState)
+        setReason(newReason)
+      }
+    }
+
+    const unsubscribe =
+      callbackManager.subscribeToPlaybackState(handleStateChange)
+
+    return () => {
+      unsubscribe()
+    }
   }, [])
 
-  return { state, reason }
+  return { state, reason, isReady }
 }

package/src/hooks/usePlaylist.ts

@@ -0,0 +1,161 @@
+import { useEffect, useState, useRef, useCallback } from 'react'
+import { PlayerQueue } from '../index'
+import { callbackManager } from './callbackManager'
+import type { Playlist, TrackItem } from '../types/PlayerQueue'
+
+export interface UsePlaylistResult {
+  /** The currently loaded playlist */
+  currentPlaylist: Playlist | null
+  /** ID of the currently loaded playlist */
+  currentPlaylistId: string | null
+  /** All available playlists */
+  allPlaylists: Playlist[]
+  /** All tracks from all playlists (flattened) */
+  allTracks: TrackItem[]
+  /** Whether the playlists are currently loading */
+  isLoading: boolean
+  /** Manually refresh playlist data */
+  refreshPlaylists: () => void
+}
+
+/**
+ * Hook to manage playlist state
+ *
+ * Provides current playlist, all playlists, and all tracks across playlists.
+ * Automatically refreshes when:
+ * - Component mounts
+ * - Track changes (to update currentPlaylistId)
+ * - Playlists are modified via PlayerQueue methods
+ *
+ * Call `refreshPlaylists()` after creating/deleting playlists to update the state.
+ *
+ * @returns Object containing playlist state and refresh function
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { currentPlaylist, allTracks, refreshPlaylists } = usePlaylist();
+ *
+ *   const handleCreatePlaylist = () => {
+ *     PlayerQueue.createPlaylist('New Playlist');
+ *     refreshPlaylists(); // Refresh to see the new playlist
+ *   };
+ *
+ *   return (
+ *     <View>
+ *       <Text>{currentPlaylist?.name}</Text>
+ *       <Text>Total tracks: {allTracks.length}</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function usePlaylist(): UsePlaylistResult {
+  const [currentPlaylist, setCurrentPlaylist] = useState<Playlist | null>(null)
+  const [currentPlaylistId, setCurrentPlaylistId] = useState<string | null>(
+    null
+  )
+  const [allPlaylists, setAllPlaylists] = useState<Playlist[]>([])
+  const [allTracks, setAllTracks] = useState<TrackItem[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const isMounted = useRef(true)
+  const hasSubscribed = useRef(false)
+
+  const refreshPlaylists = useCallback(() => {
+    if (!isMounted.current) return
+
+    try {
+      // Get current playlist ID
+      const playlistId = PlayerQueue.getCurrentPlaylistId()
+      if (!isMounted.current) return
+      setCurrentPlaylistId(playlistId)
+
+      // Get current playlist details
+      if (playlistId) {
+        const playlist = PlayerQueue.getPlaylist(playlistId)
+        if (isMounted.current) {
+          setCurrentPlaylist(playlist)
+        }
+      } else {
+        if (isMounted.current) {
+          setCurrentPlaylist(null)
+        }
+      }
+
+      // Get all playlists
+      const playlists = PlayerQueue.getAllPlaylists()
+      if (!isMounted.current) return
+      setAllPlaylists(playlists)
+
+      // Get all tracks from all playlists (deduplicated by id)
+      const trackMap = new Map<string, TrackItem>()
+      playlists.forEach((playlist) => {
+        playlist.tracks.forEach((track) => {
+          if (!trackMap.has(track.id)) {
+            trackMap.set(track.id, track)
+          }
+        })
+      })
+      if (isMounted.current) {
+        setAllTracks(Array.from(trackMap.values()))
+        setIsLoading(false)
+      }
+    } catch (error) {
+      console.error('[usePlaylist] Error refreshing playlists:', error)
+      if (isMounted.current) {
+        setIsLoading(false)
+      }
+    }
+  }, [])
+
+  // Initialize and setup mounted ref
+  useEffect(() => {
+    isMounted.current = true
+
+    // Initial load
+    refreshPlaylists()
+
+    return () => {
+      isMounted.current = false
+    }
+  }, [refreshPlaylists])
+
+  // Subscribe to native playlist changes (only once)
+  useEffect(() => {
+    if (hasSubscribed.current) return
+    hasSubscribed.current = true
+
+    try {
+      PlayerQueue.onPlaylistsChanged(() => {
+        if (isMounted.current) {
+          refreshPlaylists()
+        }
+      })
+    } catch (error) {
+      console.error('[usePlaylist] Error setting up playlist listener:', error)
+    }
+  }, [refreshPlaylists])
+
+  // Also refresh when track changes (as it might indicate playlist loaded)
+  useEffect(() => {
+    const unsubscribe = callbackManager.subscribeToTrackChange(() => {
+      // Refresh to update currentPlaylistId when track changes
+      if (isMounted.current) {
+        refreshPlaylists()
+      }
+    })
+
+    return () => {
+      unsubscribe()
+    }
+  }, [refreshPlaylists])
+
+  return {
+    currentPlaylist,
+    currentPlaylistId,
+    allPlaylists,
+    allTracks,
+    isLoading,
+    refreshPlaylists,
+  }
+}

package/src/index.ts

@@ -42,6 +42,6 @@ export * from './hooks'
 export * from './types/PlayerQueue'
 export * from './types/AndroidAutoMediaLibrary'
 export type { TAudioDevice } from './specs/AudioDevices.nitro'
-
+export type { RepeatMode } from './specs/TrackPlayer.nitro'
 // Export utilities
 export { AndroidAutoMediaLibraryHelper } from './utils/androidAutoMediaLibrary'

package/src/specs/TrackPlayer.nitro.ts

@@ -54,6 +54,8 @@ export interface PlayerQueue
   ): void
 }
 
+export type RepeatMode = 'off' | 'Playlist' | 'track'
+
 export interface TrackPlayer
   extends HybridObject<{ android: 'kotlin'; ios: 'swift' }> {
   play(): void
@@ -62,7 +64,11 @@ export interface TrackPlayer
   skipToNext(): void
   skipToPrevious(): void
   seek(position: number): void
+  addToUpNext(trackId: string): void
+  playNext(trackId: string): void
+  getActualQueue(): TrackItem[]
   getState(): PlayerState
+  setRepeatMode(mode: RepeatMode): boolean
   configure(config: PlayerConfig): void
   onChangeTrack(callback: (track: TrackItem, reason?: Reason) => void): void
   onPlaybackStateChange(
@@ -78,4 +84,5 @@ export interface TrackPlayer
   ): void
   onAndroidAutoConnectionChange(callback: (connected: boolean) => void): void
   isAndroidAutoConnected(): boolean
+  setVolume(volume: number): boolean
 }