Disable that blue focus bracket thing on the scrollbar and volume bar that ruins shortcut.

[mzso]

Hi!

I thought I'd throw this in here, before it skips my mind. There's this extremely annoying feature of YT that activates every time you use the the volume bar or the scrollbar. It does nothing useful but it practically steals, ruins the arrow hotkey. When this feature is activated both up/down and left/right will do the same thing. So you'll end up seeking when you want to change the volume or the other way around.

Here are some pictures for clarity (I never found out what's the proper name of this horrible "feature"):

I know it's not the sort of feature that would be on top of the to-do list but. But it's one of the top nuisances of youtube in my opinion.

[0x5c]

Totally agree.

It also captures the space bar.

[YePpHa]

It should be a very simple fix of simply setting the css style outline: none on the elements getting the blue outline.

[mzso]

@0x5c commented on 2017. szept. 18. 01:34 CEST:

Totally agree.

It also captures the space bar.

Oh yeah. I forgot about that. With space bar the other buttons came into play. The play/pause action is overridden by any of the other buttons functions...

@YePpHa commented on 2017. szept. 18. 09:59 CEST:

It should be a very simple fix of simply setting the css style outline: none on the elements getting the blue outline.

Hmm... I imagined via CSS you could only hide the outline but not disable the feature it suggests. Anyway, based on your comment I tried somethinig like this for the meanwhile (brute force approach):

  .ytp-progress-bar, .ytp-progress-bar-padding, .ytp-progress-list, .ytp-progress-bar-container, .ytp-hover-progress, .ytp-hover-progress-light, .ytp-volume-slider, .ytp-volume-panel, .ytp-volume-slider-handle {
    outline: none !important;

  }

I guess I didn't do something right.

[YePpHa]

I forgot to mention you also need to set the tabindex attribute to -1 or remove it completely. I have to test it to figure out which one is the most optimal way to do it.

[YePpHa]

And if you remove the tabindex attribute I think the outline CSS is not even needed.

[0x5c]

And if you remove the tabindex attribute I think the outline CSS is not even needed.

The problem being the items getting focus, and not the outline in itself, that seem like the perfect solution. IIRC, the outline is caused by google chrome to indicate who have the focus, so the css shouldn't work.

[YePpHa]

@0x5c That's true that's why it will be a better fix to either remove or set tabindex to -1.

[mzso]

@YePpHa commented on 2017. szept. 18. 10:32 CEST:

And if you remove the tabindex attribute I think the outline CSS is not even needed.

So that's done in JS? (I give up then. I can only tinker around in CSS :) )

[0x5c]

@mzso Hou do you make these coments with the mention, date and time?

[mzso]

@0x5c commented on 2017. szept. 18. 12:39 CEST:

@mzso Hou do you make these coments with the mention, date and time?

I'll tell you if you tell me how to set tabindex to -1. :) Kidding. Look here: https://github.com/jerone/UserScripts for Github Reply Comments (Github Comment Enhancer is the original script but it seems to be abandoned)

[0x5c]

@mzso thanks :)

If only I knew where tabindex is...

[YePpHa]

@0x5c https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

[YePpHa]

Here's a quick test version that should disable all focus on the player except the player itself to allow for player specific shortcuts.

Please note that this version doesn't work well together with YouTube Center, YouTube Plus, Particle or any other YouTube userscript that touches yt.player.Application.create (it could potentially create an infinite loop - even if I've put some measures into preventing it).

1. Install maia.user.js.zip (if you don't trust this file build it yourself from the source code)
2. Go to https://www.youtube.com/settings/maia to enable Prevent player elements focus.
3. Go to a YouTube video and it should work (hopefully).

[MAGICCC]

I would test it myself, but I have no idea how I can reproduce this blue frame...

[TroudhuK]

Classic use for me:

• launch a video
• new YouTube, no YouTube Center, I have to select the best quality because it's "Auto"
• watching, need to pause, space bar and... the focus is on the cogwheel, fffffffuuuu, using the mouse.

[YePpHa]

@TroudhuK Seems like it doesn't work for buttons yet (cog wheel). I will need to add tabindex=-1 to the buttons then.

[mzso]

@TroudhuK commented on 2017. szept. 18. 20:35 CEST:

Classic use for me:

• launch a video
• new YouTube, no YouTube Center, I have to select the best quality because it's "Auto"
• watching, need to pause, space bar and... the focus is on the cogwheel, fffffffuuuu, using the mouse.

Why don't you set your preferred resolution?

@YePpHa commented on 2017. szept. 18. 21:34 CEST:

@TroudhuK Seems like it doesn't work for buttons yet (cog wheel). I will need to add tabindex=-1 to the buttons then.

Cool. It works. (If I disable youtube center) I tried "Disable autoplay" too but that doesn't work.

(PS: This makes me realize that I don't use YTC for much anymore. The quality preview and the thumbnail image animation seems to be the most unique features that still work)

[YePpHa]

@mzso The auto-play feature doesn't really work as intended yet. It's still work in progress.

[TroudhuK]

@mzso

Why don't you set your preferred resolution?

Where? In YTC and old YT, I did that in YTC settings (1080p), but without YTC, it always launches videos with "Auto".

@YePpHa Ok thanks, I don't do tests but I'm following and waiting for maia-yt so I just give you a test case from my daily life. Very nice if you can fix it, it is one of the points which makes me miss the Flash video player (with the fullscreen in a separated window).

[mzso]

@TroudhuK commented on 2017. szept. 18. 23:40 CEST:

@mzso

Why don't you set your preferred resolution?

Where? In YTC and old YT, I did that in YTC settings (1080p), but without YTC, it always launches videos with "Auto".

In YTC, or if you don't use it then there are countless youtube addons/scripts that have this feature.

[TroudhuK]

@mzso Ok ok, but we discuss here because YTC doesn't work anymore. Except for embedded videos, or for the old version of YT (but I always go back to the new version, maybe because of the auto-deletion of some cookies).

[YePpHa]

I fixed the issue with the buttons still being able to be focused (getting the blue outline). I simply focused the player element every time a button inside the player got focused.

Updated version: maia.user.js.zip

[mzso]

@YePpHa commented on 2017. szept. 19. 18:03 CEST:

I fixed the issue with the buttons still being able to be focused (getting the blue outline). I simply focused the player element every time a button inside the player got focused.

Updated version: maia.user.js.zip

Thanks!

By the way. Will you be making regular dev builds (and update channel) at some point as you did with YTC?

[mzso]

@YePpHa commented on 2017. szept. 19. 18:03 CEST:

I fixed the issue with the buttons still being able to be focused (getting the blue outline). I simply focused the player element every time a button inside the player got focused.

Updated version: maia.user.js.zip

Update: it seems to be bugged a bit. The hotkeys unexpectedly stop to work. (I was watching a video in full screen for a few minutes when it happened, and once before.) I need to click on the player to get them back.

[YePpHa]

@mzso I've not yet decided whether to make regular dev builds yet, but it might be likely I will do so later when I've done more work on Maia. As for the player not having focus is probably because some other element got the focus and that element is probably not inside the player (not sure, but likely - I will need to test this a bit).

[YePpHa]

@mzso I've decided to make Travis make a prerelease on Github with the userscript build everytime I create a tag. The releases will automatically appear at https://github.com/YePpHa/maia-yt/releases when Travis is done building. I might change it at some other time, but this will work for now.

[mzso]

@YePpHa commented on 2017. szept. 22. 23:24 CEST:

@mzso I've decided to make Travis make a prerelease on Github with the userscript build everytime I create a tag. The releases will automatically appear at https://github.com/YePpHa/maia-yt/releases when Travis is done building. I might change it at some other time, but this will work for now.

Great! Although the script doesn't automatically update. Isn't it supposed to?

[alindt]

Although the script doesn't automatically update. Isn't it supposed to?

That would be great!

[YePpHa]

@mzso No, it doesn't automatically check for updates yet. I will need to consider the best option for that.

[mzso]

Okay so I think I figured out one circumstance when the hotkeys stop working. (Not sure if it'll be considered a bug though)

1. go the urlbar to do something.
2. go back to content by clicking somewhere on the page.
3. Now most hotkeys don't work, but "f" for fullscreen still does, which I habitually use.
4. So I often end up in full screen YT with most hotkeys not working.

Note: Something Stay-Open Menu aggravates the situation, because it doesn't give back the focus to the context, when opening tabs, so I have to do it manually.

[YePpHa]

@mzso that's because the player loses its focus and instead the focus is on the page. The player needs to have focus before the player shortcuts can be used. The f key is a global shortcut on YouTube and space is not.

Perhaps I should add an option to register all player shortcuts as global shortcuts. YouTube has a handler for global shortcuts (handleGlobalKeyDown) that I actually intercept and I will be able to pass all calls of handleGlobalKeyDown to the player instead.

[YePpHa]

@mzso I've implemented the option to make player shortcuts global instead.

[mzso]

@YePpHa commented on 2017. okt. 1. 20:44 CEST:

@mzso I've implemented the option to make player shortcuts global instead.

Hi! I don't think this idea work well. It ruins commenting. Eg: Can't type "f" or space. It also breaks scrolling via arrow keys.

(The quality settings changed right? I don't understand how it works. It seems to always load the selected quality from the dropdown menu no matter what the state of the checkboxes. What is "prefer higher quality" supposed to mean?)

[YePpHa]

@mzso It should not prevent the commeting, but I've only tested this on Chrome so it might not work on Firefox.

The prefer higher quality means that if the quality is not available it will look for a higher quality first before looking for a lower quality (the reverse would happen if you unchecked it).

[mzso]

Well, I only tested on FF (56). :)

[mzso]

Maybe something less aggressive could be done. Such as giving back the focus to the player on entering full screen. This seems intuitive in all circumstances, so I don't think it even needs an option to turn off.

[mzso]

Hi!

I noticed that the hotkey-screwing brackets still appear on embedded videos.

[mzso]

It's a sad thing when you search for a solution on an annoying issue and the first thing google brings up is you asking about it years ago...

[pavloomelchenko]

@mzso , somehow this maia-yt feature stopped working for me a while ago. I managed to create script myself (looking on @YePpHa 's commit ) 1.install tampermonkey 2.add script for url: youtube 3.put in the script:

function removeTabFeature () {
    var tabIndexes = document.querySelectorAll("*[tabindex]");
    for (let i = 0; i < tabIndexes.length; i++) {
      let tabIndex = tabIndexes[i].getAttribute("tabindex");
      if (tabIndex === "-1") continue;

      tabIndexes[i].removeAttribute("tabindex");
    }
}

removeTabFeature();

It works for me (Chrome browser).

[mzso]

@pavloomelchenko commented on 2020. máj. 17. 23:19 CEST:

@mzso , somehow this maia-yt feature stopped working for me a while ago. I managed to create script myself (looking on @YePpHa 's commit )
1.install tampermonkey
2.add script for url: youtube
3.put in the script:

function removeTabFeature () {
    var tabIndexes = document.querySelectorAll("*[tabindex]");
    for (let i = 0; i < tabIndexes.length; i++) {
      let tabIndex = tabIndexes[i].getAttribute("tabindex");
      if (tabIndex === "-1") continue;

      tabIndexes[i].removeAttribute("tabindex");
    }
}

removeTabFeature();

It works for me (Chrome browser).

Thanks. I tried it. There's one case it doesn't work apparently. When you clicked on the play/pause button. The stupid player still registers it twice when you press space. And the blue bracket appears.

[mzso]

@pavloomelchenko This is good stuff. I think you could release it on greasyfork or openuserjs. BTW, did you change much? My impression (since it stopped working completely so abruptly) is that maia fails to load because of some pointless change on youtube's side, otherwise most of its features would still work.

I wonder why this script bypasses the pause button. If I interpret it correctly it goes through all elements and removes "tabindex" which is the name of this noxious feature.

[egertapps]

If you use an adblock (AdGuard in this case) you can add this line to user rules, which will remove tabindex attribute from progressbar and volume seekbar, so that arrows up/down always change volume and left/right always seek video.

youtube.com#%#AG_onLoad(function() { Array.from(document.querySelectorAll('.ytp-progress-bar[tabindex="0"]')) .forEach(link => link.removeAttribute('tabindex')); Array.from(document.querySelectorAll('.ytp-volume-panel[tabindex="0"]')) .forEach(link => link.removeAttribute('tabindex')); });

[mzso]

@egertapps commented on 2021. jan. 26. 02:50 CET:

If you use an adblock (AdGuard in this case) you can add this line to user rules, which will remove tabindex attribute from progressbar and volume seekbar, so that arrows up/down always change volume and left/right always seek video.

youtube.com#%#AG_onLoad(function() { Array.from(document.querySelectorAll('.ytp-progress-bar[tabindex="0"]')) .forEach(link => link.removeAttribute('tabindex')); Array.from(document.querySelectorAll('.ytp-volume-panel[tabindex="0"]')) .forEach(link => link.removeAttribute('tabindex')); });

I have uBlock, does it work with that as it is?

I guess it can't work on embedded youtube videos?

[PeterPedro]

2022... I'm using tampermonkey and the script doesn't work, does it work for you guys? Please any help?

[mzso]

You mean @pavloomelchenko's script from https://github.com/YePpHa/maia-yt/issues/20#issuecomment-629862434? I think it partially fails nowadays. I guess you'd need to ask him if he can fix it.

Such a stupid feature of youtube to be carried around for years...

[mzso]

@egertapps commented on Jan 26, 2021, 2:50 AM GMT+1:

If you use an adblock (AdGuard in this case) you can add this line to user rules, which will remove tabindex attribute from progressbar and volume seekbar, so that arrows up/down always change volume and left/right always seek video.

youtube.com#%#AG_onLoad(function() { Array.from(document.querySelectorAll('.ytp-progress-bar[tabindex="0"]')) .forEach(link => link.removeAttribute('tabindex')); Array.from(document.querySelectorAll('.ytp-volume-panel[tabindex="0"]')) .forEach(link => link.removeAttribute('tabindex')); });

Originally posted by @egertapps in https://github.com/YePpHa/maia-yt/issues/20#issuecomment-767229269

Hi! Are you around? Does this work nowadays? I don't have adguard, I have Ublock Origin, so I guess I at least need to replace the #AG_onload function with something else, but what?

[egertapps]

This won't work with uBlock, they have their own syntax for rules, which I'm not familiar with. You can read the manual for more info. The idea is the same - remove 'tabindex' attributes from progress bar and volume panel.

However, this method didn't properly work even when I first posted it. The script will run once, when you first open a page with a video, but if you go to another video (for example, click on one of the recommended videos), the contents of the page will partially refresh, bringing back 'tabindex' attributes, but the page itself won't reload and the script will not run again. I haven't figured out what to do about that.

[mzso]

@egertapps commented on Mar 24, 2023, 9:50 AM GMT+1:

This won't work with uBlock, they have their own syntax for rules, which I'm not familiar with. You can read the manual for more info. The idea is the same - remove 'tabindex' attributes from progress bar and volume panel.

However, this method didn't properly work even when I first posted it. The script will run once, when you first open a page with a video, but if you go to another video (for example, click on one of the recommended videos), the contents of the page will partially refresh, bringing back 'tabindex' attributes, but the page itself won't reload and the script will not run again. I haven't figured out what to do about that.

I guess we're back to needing a userscript then.

[tealshift]

Hey guys. I just started a public collection of YT annoyance fixes. I only have two annoyance fixes right now but this is one of them and they still seem to work. https://github.com/tealshift/TealTube

[mzso]

@tealshift Cool. I will check it out. It's still a constant annoyance, even today I ran into it. It's insane that they decided to handle focus like this...