Excessive number of pending callbacks

[rajivtiwary-cm]

Describe the bug
Please report: Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: {"1951":{"module":"TrackPlayerModule","method":"getPosition"},"1952":{"module":"TrackPlayerModule","method":"getDuration"},"1953":{"module":"TrackPlayerModule","method":"getBufferedPosition"},"1954":{"module":"TrackPlayerModule","method":"getPosition"},"1955":{"module":"TrackPlayerModule","method":"getDuration"},"1956":{"module":"TrackPlayerModule","method":"getBufferedPosition"},"1957":{"module":"TrackPlayerModule","method":"getPosition"},"1958":{"module":"TrackPlayerModule","method":"getDuration"},"1959":{"module":"TrackPlayerModule","method":"getBufferedPosition"},"1960":{"module":"TrackPlayerModule","method":"getPosition"},"1961":{"module":"TrackPlayerModule","method":"getDuration"},"1962":{"module":"TrackPlayerModule","method":"getBufferedPosition"},"1963":{"module":"TrackPlayerModule","method":"getPosition"},"1964":{"module":"TrackPlayerModule","method":"getDuration"},"1965":{"module":"TrackPlayerModule","method":"getBufferedPosition"},"1966":{"module":"TrackPlayerModule","method":"getPosition"},"1967":{"module":"TrackPlayerModule","method":"getDuration"},"1968":{"module":"TrackPlayerModule","method":"getBufferedPosition"},"1969":{"module":"TrackPlayerModule","method":"getPosition"},"1970":{"module":"TrackPlayerModule","method":"getDuration"},"1971":{"module":"TrackPlayerModule","method":"getBufferedPosition"},"1972":{"module":"TrackPlayerModule","method":"getPosition"},"1973":{"module":"TrackPlayerModule","method":"getDuration"},"1974":{},"2006":{},"2009":{},"2010":{},"2011":{},"2012":{},"2013":{},"2014":{},"2015":{},"2016":{},"2017":{},"2018":{},"2019":{},"2020":{},"2021":{},"2022":{},"2023":{},"2024":{},"2025":{},"2026":{},"2027":{},"2028":{},"2029":{},"...(truncated keys)...":451}

To Reproduce

Call useProgress hook in two screens

const { position, duration } = useProgress(1000);

Environment (please complete the following information):

"react-native": "^0.66.4",
"react-native-track-player": "^2.1.2",

[GuillaumeRZ]

Same issue here, setting useProgress(5000) doesn't change anything.

Thanks.

[puckey]

@rajivtiwary-cm What do you mean by 'Call useProgress hook in two screens'? Does this also happen when you use the example app?

[puckey]

Could you try this version of the useProgress hook instead? It uses an async while loop, which makes sure it doesn't start running behind when one of the callbacks is slower than the interval:

import { useEffect, useRef, useState } from 'react'
import TrackPlayer, {
  ProgressState,
  State,
  usePlaybackState
} from 'react-native-track-player'

function useProgress(updateInterval = 1000) {
  const [state, setState] = useState<ProgressState>({
    position: 0,
    duration: 0,
    buffered: 0
  })
  const playerState = usePlaybackState()
  const stateRef = useRef(state)

  const isNoneState = playerState === State.None
  useEffect(() => {
    let mounted = true
    if (isNoneState) {
      setState({ position: 0, duration: 0, buffered: 0 })
      return
    }

    (async () => {
      while (mounted) {
        try {
          let start = Date.now()
          const [position, duration, buffered] = await Promise.all([
            TrackPlayer.getPosition(),
            TrackPlayer.getDuration(),
            TrackPlayer.getBufferedPosition()
          ])

          // If the component has been unmounted, exit
          if (!mounted) return

          // If there is no change in properties, continue
          if (
            position === stateRef.current.position &&
            duration === stateRef.current.duration &&
            buffered === stateRef.current.buffered
          )
            continue

          const state = { position, duration, buffered }
          stateRef.current = state
          setState(state)
          let waitFor = updateInterval - (Date.now() - start)
          if (waitFor > 0) {
            await new Promise(resolve => setTimeout(resolve, waitFor))
          }
        } catch {} // these method only throw while you haven't yet setup, ignore failure.
      }
    })()

    return () => {
      mounted = false
    }
  }, [isNoneState, updateInterval])

  return state
}

[jspizziri]

Closing this issue due to inactivity. Please let me know if it needs to be reopened. If that's the case please also submit a minimum reproducible sample project to help us diagnose and fix the issue.

Thanks!