useAudioPlayer: Maximum update depth exceeded when using React-Router

Using the Provider and audio hooks under React-Router produces a Maximum update depth exceeded error loop

const routes = {
  '/': () => <Provider station='clouds' />,
  '/:station': ({ station }) => <Provider station={station} />
}

function Provider ({ station }) {
  return (
    <AudioPlayerProvider>
      <Radio station={station} />
    </AudioPlayerProvider>
  )
}

function Radio (props) {
  const [song, setSong] = useState({
    album: 'Press the Play button to start the radio',
    title: placeholders[Math.floor(Math.random() * placeholders.length)]
  })

  const { togglePlayPause, ready, loading, playing, volume, mute } = useAudioPlayer({
    src: `https://play.squid-radio.net/${props.station}?cache_ts=${new Date().getTime()}`,
    onend: () => console.log('sound has ended!')
  })

  return (
    <div />
)
}

const App = () => {
  const routeResult = useRoutes(routes)
  return routeResult || (
    <script>{(
      window.location.href = '/404.html'
    )}
    </script>
  )
}

Environment (please complete the following information):

  • Browser/ browser version: Firefox 81.0.2 64-bit
  • Library version: 1.2.2
  • React version: 16.13.1
  • Node version: 14.x

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 16 (8 by maintainers)

Most upvoted comments

hey @jorgev259 I think I’m on to something. I should hopefully have a release out by the weekend with a fix or work-around for the issue you are having with streaming audio