Git Product home page Git Product logo

zimbix / youtube-fast-fullscreen-toggle Goto Github PK

View Code? Open in Web Editor NEW
24.0 4.0 3.0 11 MB

A Chrome extension to avoid the lag when toggling fullscreen on a YouTube video - by hiding the heavy fluff while transitioning

Home Page: https://chrome.google.com/webstore/detail/dggbkbndbcaknaeobfieifmdcncmpaba

License: GNU General Public License v3.0

JavaScript 68.24% Shell 31.76%
youtube chrome-extension optimisation

youtube-fast-fullscreen-toggle's Introduction

YouTube Fast Fullscreen Toggle

Avoids the ~3 second lag when entering/exiting fullscreen on a YouTube video - by hiding the heavy fluff while transitioning

Contents

Install

Options:

Description

There's an annoying lag period when entering/exiting fullscreen on a YouTube video. On my machine, it's normally ~2 seconds; but with a large playlist expanded, it gets up to ~3 seconds. This extension reduces the transition time to almost nothing.

Supported fullscreen transitions:

  • Clicking the fullscreen button
  • Pressing the F key
  • Double-clicking the video

Unsupported fullscreen transitions (still slow):

  • Escape
  • F11

Note that Firefox doesn't seem to have the same issue as Chrome; so in Firefox the improvement is barely noticeable.

In Vivaldi, there is unfortunately an intermediate step in the fullscreen transition, which I can't seem to do anything to avoid. It appears to be due to the toolbars being hidden/shown at a different moment to when the browser actually enters/leaves fullscreen.

Technical detail:

This bug's been present for years now, and I got so sick of it that I spent one night experimenting to find a way to avoid it - and I found one! The extra HTML content on the page (playlist, recommendations, comments, description, likes, etc.) is pretty heavy, and when you toggle fullscreen, YouTube moves it around in the DOM, which ends up incuring a fair bit of processing. I've worked out that it's significantly faster to hide that extra content before transitioning, then display it again afterwards once it's reached its new position.

Before:

before

After:

after

Changelog

For the changelog, see Releases

Development

To publish a new release:

./scripts/publish <version>

youtube-fast-fullscreen-toggle's People

Contributors

leadwolf avatar zimbix avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

youtube-fast-fullscreen-toggle's Issues

Tampermonkey script won't trigger unless page is reloaded (in Vivaldi)

Hi, I've been using this as a Tampermonkey script for a while now, but an issue is that it won't trigger unless the YT page is reloaded. I've tried changing some of the Settings parameters like "Run at" but it doesn't help.

If I watch the Tampermonkey icon I can see the overlay "1" only appears after a page load.

Other than that it seem to work really well but it would be nice if this could be figured out.

This is using Vivaldi 3.8.

v2.3.1 CRX is slow to leave fullscreen

Damn, I should have tested this more thoroughly before submitting it to the Chrome Web Store.

I didn't realise there'd be a difference between running it through Tampermonkey vs as an extension, but here we are! It works fine in Tampermonkey, but when run as an extension (using the CRX file), it mistakenly detects the leaving fullscreen transition as the entering fullscreen one, thus when leaving fullscreen, it logs:

[YT-FFT] Entering fullscreen; fluff has been hidden
[YT-FFT] Finished entering fullscreen transition; showing fluff again

So it immediately shows the fluff again, nullifying the performance improvement of having hidden it.

Perhaps the addEventListeners run at a different time, and so we end up with a different order of event handlers firing (mine and YouTube's)...

I'm detecting whether we're fullscreen (and so what the direction of the transition is) by the presence of the fullscreen attribute on ytd-watch-flexy. I guess by the time the extension checks that, it's too late, as it's already been removed?

Handle leaving fullscreen with Escape and toggling with F11

Similar to #3, I realised that pressing Escape to leave fullscreen is still slow. I'd forgotten to handle that.

I had a bit of a go, and it seems like neither detecting Escape keydown nor the fullscreenchange event happen soon enough (or at all?). If this is even possible to fix, it's going to be difficult. I'd rather not dive deep into how YouTube's fullscreen toggling works to delay the actual transition.

Handling F11 is related. I haven't tried to do that yet, but I suspect it'll require the same mechanism.

F key does not trigger fast transition

My YouTube transition lag situation seems to have improved. I've just updated to Chrome 109.0.5414.74, so maybe it's that. Or maybe from recently installing hardware acceleration packages on Arch Linux that I didn't realise were necessary: libva-utils, mesa-vdpau, and libva-mesa-driver... Anyway, I can now barely notice a difference with and without this extension when viewing a single video; and the delay for a video playing from a massive playlist is much reduced (~1 second on my ~5000 video Watch Later list). However, the F key is no longer triggering this extension's fast transition, unfortunately. Clicking the fullscreen button and double-clicking the video still work though.

Bug: F key interrupts typing search/comment

image

I think I need to change it so the key's listened to when only the video or any of its controls have focus - maybe this can be done by instead adding the event listener to a parent element of the video? I want to make sure it's on anything that the F key normally works with.

Not working on Vivaldi

It would appear that Vivaldi needs a longer delay before revealing the fluff again when entering fullscreen. It looks like it might be doing an extra repaint, with the toolbars introducing another step in the transition. I'll have to make the code smarter to somehow poll until it's finished transitioning. Users, in the meantime, you could use the script with Tampermonkey and try adjusting the delays in the code yourself - on my new Linux laptop, it looks like the setTimeout(showFluff, DELAY) needs to have the delay be at least 150 (ms). Too high a delay though, and leaving fullscreen will take longer unnecessarily. Hence I'll need to again separate the codepaths for entering and exiting fullscreen to use different delays.

Handle double-clicking video

I just discovered tonight that I'd forgotten about double-click xP I tend not to do that since it takes slightly longer to register.

I'm not sure yet how to reliably hook into this; investigation required.

Scrollbar appears for a few seconds after entering fullscreen

Upon entering fullscreen, there is now about 20 pixels of space you can scroll down to below the video. Due to this, there is a scrollbar overlaid. This extra space is causing the extension to be unable to detect that that video size has become fullscreen; so the detection is timing out and so unnecessarily waiting a few seconds before revealing the fluff again. At this point, the scrollbar goes away.

YouTube must have changed something to cause this - looks like I need to keep up with their changes.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.