How does Twitch keep a persistent video window over several pages?

Question

Twitch has introduced a functionality that, when you've opened a stream page and navigate to a different part of the site, allows the video to keep playing in the bottom left corner without any interruption. This even works when pressing the back button in the browser and only breaks when closing the tab or manually typing in the URL you want to go to (e.g. https://www.twitch.tv/directory/discover).

I've been trying to figure out how this is being done. The video is embedded into a div with the class "js-player-persistent", so I assume it has something to do with a JavaScript and getting data from the session storage, but I'm unsure how much effort this requires specifically.

Answer 1

Twitch is built on EmberJS on the front end making it a Single Page Application (SPA). This allows them to not have to reload the page as you navigate, they simply utilize AJAX to load in the data needed to show the next page in a prescribed window. This is accomplished by the browser's pushState API or the hashbang implementation for browsers that don't utilize pushState.

Looking at their implementation of it, they likely have a hook that looks for navigation changes, before it happens, off the video player and at that time create a DOM element in that corner and put the video in it, then they proceed with changing the main page to wherever you are going.

This is fairly easily done in most SPA front ends like Angular, React, Ember, Vue, etc. and is a major bonus to them.

Answer 2

Twitch is an Ember app, which means it is a Single Page Application. It does not reload the whole page when you navigates between "pages". Regarding the use of the browser's navigation buttons, JavaScript routers take advantage of the browser history API to simulate a normal navigation.

Answer 3

After my original comment got as much popularity as it did, I figured I'd explain my presumption a bit better.

Twitch is a SPA, or Single Page Application. This means that when you go to a new "page" on the Twitch website you aren't actually going to a new webpage, you are loading a new view. Each of these views are basically sections of content that seem like pages but don't reload the entire page. This is commonly used with cross platform mobile apps.

The pros of Twitch doing this is that they communicate with their back-end constantly and the site handles that well with the streams. (They recently switched from a Flash to HTML5 video player.) This as well as having your current stream constantly playing even though you are exploring different sections of the website is a major plus for them.

The cons of all this is that your browser has to do more rendering meaning it is more intensive for your computer. And it is worth mentioning SEO can be harder with SPAs.