Use yt-navigate-start and yt-navigate-finish window events

[Zren]

While checking out the competition / other youtube scripts on GreasyFork, I came across the Youtube TheaterMode script.

https://greasyfork.org/en/scripts/434075-youtube-theatermode/code

It binds to window.addEventListener('yt-navigate-finish') and window.addEventListener('load'). I didn't realize YouTube had a nicely exposed event for the page transitions.

I've been testing:

    ytwp.registerMaterialListeners = function() {
        // For Material UI
        // HistoryEvent.listeners.push(ytwp.materialPageTransition);
        // HistoryEvent.startTimer();
        // HistoryEvent.inject();
        // HistoryEvent.listeners.push(console.log.bind(console));
        window.addEventListener('yt-navigate-start', function(e) {
            console.log('yt-navigate-start', e)
            console.log('window.location.href', window.location.href)
            ytwp.materialPageTransition()
        })
        window.addEventListener('yt-navigate-finish', function(e) {
            console.log('yt-navigate-finish', e)
            console.log('window.location.href', window.location.href)
        })
    };

and noticed that this code makes much smoother transitions. We currently wait up to 500ms before noticing the page change, which causes the layout to resize + reflow which slows things down on old computers.

Gonna test this a few weeks to make sure this event is long lasting.

• 2022-04-19: the load event was bound too: https://greasyfork.org/en/scripts/434075-youtube-theatermode/diff?v1=1041542&v2=1032135
• 2021-10-18: the script was first uploaded binding yt-navigate-finish: https://greasyfork.org/en/scripts/434075-youtube-theatermode/code?version=980215

So it's been around at least 6 months.

I'm debating keeping the 500ms timer as a fallback. Should I allow the script to noticeably break if YouTube's website changes? If I keep the timer and don't let it noticeably break, then I won't notice when the yt-navigate-finish goes away. Also, the timer might try to activate the script before yt-navigate-finish and cause a slowdown?

[Zren]

I decided to bind to yt-page-data-fetched which also seems to fire every time. It is also bound to yt-navigate-finish too just in case though.

As I've documented in YTDocs.md, there's a bunch of youtube specific events. The related ones are probably these though.

document.addEventListener('yt-navigate-start', function(){ console.log('document.yt-navigate-start', arguments)})
document.addEventListener('yt-navigate-finish', function(){ console.log('document.yt-navigate-finish', arguments)})
document.addEventListener('yt-navigate-error', function(){ console.log('document.yt-navigate-error', arguments)})
document.addEventListener('yt-navigate-redirect', function(){ console.log('document.yt-navigate-redirect', arguments)})
document.addEventListener('yt-navigate-cache', function(){ console.log('document.yt-navigate-cache', arguments)})
document.addEventListener('yt-navigate-action', function(){ console.log('document.yt-navigate-action', arguments)})
document.addEventListener('yt-navigate-home-action', function(){ console.log('document.yt-navigate-home-action', arguments)})
document.addEventListener('yt-page-data-fetched', function(){ console.log('document.yt-page-data-fetched', arguments)})