How does Spotify keep the player component running on route changes?
No matter where you navigate in the app, the music keeps playing.
In my own app, which so far was able to handle vidoes - I route to /video/... where I have a player component that uses the the Plyr package (https://github.com/chintan9/plyr-react)
I can use it to play audio files as well, but when it comes to audio - I have a BottomPlayer component that should keep playing in many different routes while floating at the bottom.
The way my React-Router is implemented, each route has it's own Layout component.
I could put the BottomPlayer there.
Or I could put it in my ViewContext, which is one level above and handles modals.
But I bet that wouldn't be enough to make sure the audio keeps playing seemlessly.
How would you approach this problem?
In my own app, which so far was able to handle vidoes - I route to /video/... where I have a player component that uses the the Plyr package (https://github.com/chintan9/plyr-react)
I can use it to play audio files as well, but when it comes to audio - I have a BottomPlayer component that should keep playing in many different routes while floating at the bottom.
The way my React-Router is implemented, each route has it's own Layout component.
I could put the BottomPlayer there.
Or I could put it in my ViewContext, which is one level above and handles modals.
But I bet that wouldn't be enough to make sure the audio keeps playing seemlessly.
How would you approach this problem?
GitHub
A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo - GitHub - chintan9/plyr-react: A simple, accessible and customisable react media player for Video, Audi...
Was this page helpful?
