Next.js Discord

Discord Forum

How can I do a YouTube-style persistant player?

Unanswered
Chilean jack mackerel posted this in #help-forum
Open in Discord
Chilean jack mackerelOP
I have a watch page with a custom component wrapping Shaka Player around Media-Chrome. My goal is to be able to go to the homepage and still have the player on the bottom right corner, just like YouTube. I'm not asking for PiP where the browser puts the player in a new OS window that you can drag outside of the browser over other apps.

Im wondering how I can keep the player state persistant, without needing to reload, rebuffer, etc. It just acts like nothing happened except its now a new page with the player continuing as if nothing happened.

The only way I can think of implementing this is to have one player component rendered in the root layout that is hidden unless used. Then when you go to the watch page, it will use absolute positioning to be placed in a way similar to YouTube. Then when your on the homepage, absolute position it to a corner of the browser page. However, this absolute positioning doesn't seem very efficient. Is there any other way?

0 Replies