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.

Aeolotropic

From my understanding, Twitch is a SPA so couldn't the video be loaded separate from everything else, and then when you select different streams it just changes the source of the video feed? Just a thought. – Overside

I have no idea how twitch works, but if I had to code it myself, I would use a single page-like solution where on navigation only parts of the body content change instead of loading a full new page. – Incontrollable

@Incontrollable Basically nailed it. Like YouTube generally doesn't actually load new pages, but rather replaced the content with the newly loaded page. Twitch almost certainly does something similar. – Belford

I think that when you navigate through Twitch you are not changing page but just the current "view" .... so the skeleton of the application its always the same. They created an isolated view in front of the main one. – Craw

I've been wondering whether they use a single page application and just change the URL in the address bar with Javascript as well, but I believe this would break when using the back button in your browser, which actually works on their site. Please correct my if I'm wrong, as I've never used that functionality. – Aeolotropic

You can keep back-button compatibility by using the URL hash to stay on the same page, but still have an entry into the history and an event (onhashchange) to track the requested view. Eg: myapp.com --> myapp.com/#!/video1 --> myapp.com/#!/video2 Then if needed, you can use url rewriting to remove the hash again from the URL if needed. The alternative is use the replaceState() API from the history module, but in my limited experience, that was more complex than using hash fragments. – Incontrollable

FYI, this question is discuted on meta : meta.#340662 – Paluas

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.

Valence

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.

Investigate

Thank you tiagohngl, that explains a lot. – Aeolotropic

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.

Overside