react-native-nitro-player 0.3.0-alpha.7 → 0.3.0-alpha.8

package/README.md

@@ -171,6 +171,21 @@ Automatically polls for audio device changes every 2 seconds.
 
 - `devices: TAudioDevice[]` - Array of available audio devices
 
+### `useNowPlaying()`
+
+Returns the complete current player state (same as `TrackPlayer.getState()`). This hook provides all player information in a single object and automatically updates when the player state changes.
+
+**Returns:**
+
+- `PlayerState` object containing:
+  - `currentTrack: TrackItem | null` - The current track being played, or `null` if no track is playing
+  - `totalDuration: number` - Total duration of the current track in seconds
+  - `currentState: TrackPlayerState` - Current playback state (`'playing'`, `'paused'`, or `'stopped'`)
+  - `currentPlaylistId: string | null` - ID of the currently loaded playlist, or `null` if no playlist is loaded
+  - `currentIndex: number` - Index of the current track in the playlist (-1 if no track is playing)
+
+**Note:** This hook is equivalent to calling `TrackPlayer.getState()` but provides reactive updates. It listens to track changes and playback state changes to update automatically. Also dont rely on progress from this hook
+
 ## Audio Device APIs
 
 ### `AudioDevices` (Android only)
@@ -347,6 +362,9 @@ function PlayerComponent() {
   // Check Android Auto connection
   const { isConnected } = useAndroidAutoConnection()
 
+  // Get complete player state (alternative to individual hooks)
+  const nowPlaying = useNowPlaying()
+
   return (
     <View>
       {track && (
@@ -354,6 +372,8 @@ function PlayerComponent() {
       )}
       <Text>State: {state}</Text>
       <Text>Progress: {position} / {totalDuration}</Text>
+      {/* Or use useNowPlaying for all state at once */}
+      <Text>Now Playing State: {nowPlaying.currentState}</Text>
     </View>
   )
 }

package/lib/hooks/index.d.ts

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

package/lib/hooks/index.js

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

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 polls getState() periodically and also listens to events
+ * for immediate updates when state changes.
+ *
+ * @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,79 @@
+import { useEffect, useState } from 'react';
+import { TrackPlayer } from '../index';
+/**
+ * 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 polls getState() periodically and also listens to events
+ * for immediate updates when state changes.
+ *
+ * @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(() => {
+        // Get initial state
+        try {
+            return TrackPlayer.getState();
+        }
+        catch (error) {
+            console.error('Error getting initial player state:', error);
+            // Return default state
+            return {
+                currentTrack: null,
+                currentPosition: 0,
+                totalDuration: 0,
+                currentState: 'stopped',
+                currentPlaylistId: null,
+                currentIndex: -1,
+            };
+        }
+    });
+    useEffect(() => {
+        // Update state function
+        const updateState = () => {
+            try {
+                const newState = TrackPlayer.getState();
+                setState(newState);
+            }
+            catch (error) {
+                console.error('Error updating player state:', error);
+            }
+        };
+        // Get initial state
+        updateState();
+        // Listen to track changes
+        TrackPlayer.onChangeTrack(() => {
+            updateState();
+        });
+        // Listen to playback state changes
+        TrackPlayer.onPlaybackStateChange(() => {
+            updateState();
+        });
+    }, []);
+    return state;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-nitro-player",
-  "version": "0.3.0-alpha.7",
+  "version": "0.3.0-alpha.8",
   "description": "react-native-nitro-player",
   "main": "lib/index",
   "module": "lib/index",

package/src/hooks/index.ts

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

package/src/hooks/useNowPlaying.ts

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react'
+import { TrackPlayer } from '../index'
+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 polls getState() periodically and also listens to events
+ * for immediate updates when state changes.
+ *
+ * @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(): PlayerState {
+  const [state, setState] = useState<PlayerState>(() => {
+    // Get initial state
+    try {
+      return TrackPlayer.getState()
+    } catch (error) {
+      console.error('Error getting initial player state:', error)
+      // Return default state
+      return {
+        currentTrack: null,
+        currentPosition: 0,
+        totalDuration: 0,
+        currentState: 'stopped',
+        currentPlaylistId: null,
+        currentIndex: -1,
+      }
+    }
+  })
+
+  useEffect(() => {
+    // Update state function
+    const updateState = () => {
+      try {
+        const newState = TrackPlayer.getState()
+        setState(newState)
+      } catch (error) {
+        console.error('Error updating player state:', error)
+      }
+    }
+
+    // Get initial state
+    updateState()
+
+    // Listen to track changes
+    TrackPlayer.onChangeTrack(() => {
+      updateState()
+    })
+
+    // Listen to playback state changes
+    TrackPlayer.onPlaybackStateChange(() => {
+      updateState()
+    })
+  }, [])
+
+  return state
+}