Progress hooks for react-native-track-player. This hooks updates when player is playing or seeking.

progress-hooks.ts

import { useEffect, useState } from 'react';
import TrackPlayer, { TrackPlayerEvents } from 'react-native-track-player';

type Delay = number | null;
type TimerHandler = () => void;

/**
 * Provides a declarative useInterval
 * @param callback - Function that will be called every `delay` ms.
 * @param delay - Number representing the delay in ms. Set to `null` to "pause" the interval.
 */
const useInterval = (callback: TimerHandler, delay: Delay) => {
  useEffect(() => {
    if (delay !== null) {
      const intervalId = setInterval(callback, delay);
      return () => clearInterval(intervalId);
    }
  }, [delay]);
};

/**
 * Poll for track progress for the given interval (in milliseconds)
 * @param {number} interval - ms interval
 * @returns { progress: number, duration: number }
 */
export const useTrackPlayerProgress = (interval = 1000) => {
  const [playbackState, setPlaybackState] = useState(TrackPlayer.STATE_NONE);
  const [state, setState] = useState({ position: 0, duration: 0 });

  const getProgress = async () => {
    const [position, duration] = await Promise.all([TrackPlayer.getPosition(), TrackPlayer.getDuration()]);
    setState({ position, duration });
  };

  useEffect(() => {
    TrackPlayer.getState().then((currentPlaybackState) => {
      // Update progress if the player is paused
      if (currentPlaybackState === TrackPlayer.STATE_PAUSED) {
        getProgress();
      }
      setPlaybackState(currentPlaybackState);
    });

    const sub = TrackPlayer.addEventListener(TrackPlayerEvents.PLAYBACK_STATE, (data) => {
      setPlaybackState(data.state);
      if (data.state === TrackPlayer.STATE_READY) {
        getProgress();
      }
    });

    return () => sub.remove();
  }, []);

  useInterval(getProgress, playbackState === TrackPlayer.STATE_PLAYING ? interval : null);
  return state;
};