Theo's Typesafe Cult•3y ago

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?

GitHub

GitHub - chintan9/plyr-react: A simple, accessible and customisable...

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...

16 Replies

.j0hannesOP•3y ago

While writing this,I was thinking of nested routing. I could do that since I'm using React Router v6. Though I'm not sure if this will keep the player playing.

yaviscoke•3y ago

I've built similiar website and this is what I did

    <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/*" element={<Auth />} />
          <Route path="/Dashboard" element={<Dashboard />} />
          <Route path="/Orders/*" element={<Orders />} />
          <Route path="/Tracking" element={<Tracking />} />
        </Routes>
        <Player />
    </BrowserRouter>

    <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/*" element={<Auth />} />
          <Route path="/Dashboard" element={<Dashboard />} />
          <Route path="/Orders/*" element={<Orders />} />
          <Route path="/Tracking" element={<Tracking />} />
        </Routes>
        <Player />
    </BrowserRouter>

where ever you go player doesn't go anywhere I stays on every route change

.j0hannesOP•3y ago

oh that actually looks easy

yaviscoke•3y ago

yeah

.j0hannesOP•3y ago

no nested routing needed

yaviscoke•3y ago

yeap

.j0hannesOP•3y ago

my routing implementation looks like this:

.j0hannesOP•3y ago

so I funnel the route in fom a bunch of route objects

yaviscoke•3y ago

put your player between Routes and BrowserRouter

.j0hannesOP•3y ago

and I was scratching my head how to fit a route for the player in there 😄

yaviscoke•3y ago

put it here, so it won't go anywhere

.j0hannesOP•3y ago

I think I'll put it

yaviscoke•3y ago

btw idk how good practice is mapping <Route /> components I wouldn't do that

.j0hannesOP•3y ago

the benefit is that you have a nice overview of routes in a routes folder

.j0hannesOP•3y ago

but this was created before nested routes were a thing I might throw it overboard should it make problems maybe I'll even use Tanstack Router

yaviscoke•3y ago

If u will put it there on 404 page player will disappear if u want that it will work no wait on every route change player will re-render and playing sound will restart

Gaming

Programming

How does Spotify keep the player component running on route changes?