Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button bar disappears #316

Open
twifty opened this issue Apr 5, 2020 · 11 comments
Open

Button bar disappears #316

twifty opened this issue Apr 5, 2020 · 11 comments

Comments

@twifty
Copy link

twifty commented Apr 5, 2020

This is not so much a problem with SB, but the stylesheets used by YT and our manipulation of the DOM.

My own plugin adds 3 buttons to the toolbar (capture, download and mutate). SB in its default form has 2 (open and starts-now ). Clicking start will add the clear, clicking stop will add the submit; giving a total of 4 buttons.

These 7 buttons are too much for the all mighty google's youtube to handle. The whole ".ytp-right-controls" bar will flow to the next row, with parent having overflow hidden, it disappears from view.

No fault of a single extension, but combined...

My mutate button mentioned above offers 4 additional buttons (rotate L/R, flip V/H). Also, since I deem it not very important, I've appended rather then prepended. These 4 buttons are diplayed in a popout when the main button is hovered. I mention this because I think a solution to the disappearing toolbar is to add the rightmost buttons to a dropdown/dropup (with last visible button icon in the bar being a simple triangle which can be hovered).

Thoughts, ideas?

Any extension which adds buttons is going to face the same issue. Adding too many buttons breaks the bar for every extension. We need an extension/developer friendly solution.

I propose both of our extensions add a fix, but to be friendly, a data attribute should be added to the ".ytp-right-controls" element which would signify to a later loading extension that the problem has been fixed.

Update: Just noticed that hovering the volume, produces its slider, which also eats into the button bar real estate.

@ajayyy
Copy link
Owner

ajayyy commented Apr 5, 2020

Maybe there is a way to detect the height in number of lines?

@ajayyy
Copy link
Owner

ajayyy commented Apr 5, 2020

Full screen also grants more space. Embeds can have almost no space.

For SponsorBlock, I think it would be best just to disable extra buttons like the clear and info button as they are not required (and can be disabled in the options)

@Joe-Dowd
Copy link
Contributor

Joe-Dowd commented Apr 5, 2020

I think if this was going to be done, making an npm library to handle the player buttons which both extensions use would be the way to go.

@Joe-Dowd
Copy link
Contributor

Joe-Dowd commented Apr 5, 2020

The issue could already be there for us on embeds anyway as there's no way to know what size the player is going to be in certain conditions.

@ajayyy
Copy link
Owner

ajayyy commented Apr 5, 2020

I have seen it appear on embeds that are too small

@ajayyy
Copy link
Owner

ajayyy commented Apr 5, 2020

Change the width on https://youtubevideoembed.com/ to see the issue. The right controls move down to the next line to an area that is invisible

@ajayyy
Copy link
Owner

ajayyy commented Apr 5, 2020

image

This is what happens when you scroll down

@Joe-Dowd
Copy link
Contributor

Joe-Dowd commented Apr 5, 2020

Yeah, I say we fix it using a library that others can use to solve the problem too in a way that doesn't break compatibility.

@ajayyy
Copy link
Owner

ajayyy commented Apr 5, 2020

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect could be used. If document.querySelector(".ytp-left-controls") and document.querySelector(".ytp-right-controls") have different y values, then there is an issue.

@twifty
Copy link
Author

twifty commented Apr 5, 2020

Why not just attach a IntersectionObserver before adding any buttons.

@ajayyy
Copy link
Owner

ajayyy commented Apr 9, 2020

I'll look into making the library once I have finished my category and voting changes.

And, if you want to talk about specifics @twifty , you can send a message in the Discord

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants