raingart / Nova-YouTube-extension

Apache License 2.0
216 stars 11 forks source link

How is your autoplay/pause so snappy?? I'm trying to make one for hianime.to but it feels much more janky. #193

Closed zkisaboss closed 1 month ago

zkisaboss commented 1 month ago
// ==UserScript==
// @name         HiAnime AutoPlay
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  play on focus, pause on unfocus
// @icon         https://hianime.to/images/icons-192.png
// @author       Zach
// @match        https://megacloud.tv/*
// @grant        none
// ==/UserScript==

document.addEventListener("visibilitychange", () =>
    document.visibilityState === "visible" ? jwplayer().play(1) : jwplayer().pause(1)
);

I hope you're doing well!

zkisaboss commented 1 month ago

I tried this and it's much snappier, gonna read some docs and see why.

window.addEventListener("focus", () => jwplayer().play());
window.addEventListener("blur", () => jwplayer().pause());

I always thought more eventlisteners was worse.

raingart commented 1 month ago

hianime.to blocks access to the dev console. Try something like this

document.addEventListener('canplay', fn)
document.addEventListener('play', fn)
document.addEventListener('playing', fn)

document.addEventListener('visibilitychange', () => {
   console.log(document.hidden)
   switch (document.visibilityState) {
      case 'hidden':
         jwplayer().pause();
         break;
      case 'visible':
         jwplayer().play()
         break;
   }
});
raingart commented 1 month ago

there are different approaches. Perhaps the problem is in iframe + CORS

// Auto selects highest quality (requires CORS)
        setTimeout(function() {
            let iframe = document.querySelector("#iframe-embed");
            let command = "jwplayer().setCurrentQuality(1)";

            if (iframe) {
                iframe.contentWindow.eval(command);
            }
        }, 3000);
raingart commented 1 month ago

Note! document.visibilityState update after window.blur event

raingart commented 1 month ago

I always thought more eventlisteners was worse.

it doesn’t matter, the problem is inheritance. But he will try to catch before others

document.addEventListener('play', fn, { capture: true, once: true }) // only once optional (doesn't work without capture) document.addEventListener('play', fn, { capture: true }) // before others

zkisaboss commented 1 month ago

Also the event listeners for "blur" and "focus" apply to the iframe but not the tab focus, was there a different one for that? because right now it's just seeing if the iframe is focused and not the entire tab with:

document.addEventListener("focus", fn); document.addEventListener("blur", fn);

zkisaboss commented 1 month ago

if i use 'blur' and 'focus' its way snappier and actually pauses instantly but also pauses if i click anything outside the iframe window.addEventListener('blur', ...); window.addEventListener('focus', ...);

if i use visibilitychange i get the intended functionality but with half a second of lag which completely breaks the seamlessness document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') { ... } else { ... } });

But for enabling the highest quality i can use the event listener with 'load' and that seems to work for my use case.

raingart commented 1 month ago

I'm not sure but try both methods just change this one

window.addEventListener("focus", () =>document.hidden || jwplayer().play());
window.addEventListener("blur", () => document.hidden && jwplayer().pause());