feat(player.css): Fixed max-height constraint (fixes #1710)

[HanzCEO]

Added overwrite to max-height property at #player-wide-container for 'Full Height' sizing.

[PoorChameleon]

Did you test this working with header set to hidden or hidden on video page? It looks like it won't work in that case.

It also might break non-theater mode

[HanzCEO]

Did you test this working with header set to hidden or hidden on video page? It looks like it won't work in that case.

It also might break non-theater mode
@PoorChameleon

I have fixed that navbar issue in the last commit.
However, only in theater mode full_window (Full Height mode) will apply.

[HanzCEO]

Maybe I misunderstood this Full Height sizing option. What should it do exactly @PoorChameleon?

[HanzCEO]

I have tested my solution against all navbar display option from the extension. It works fine when combined with theater mode (both forced from extension or not)

[PoorChameleon]

It does mostly work now. I can still find one use case where it breaks which is enabling forced theater mode and then manually pressing 't' to disable it in the current video the user is on.

You may be able to get away with just using html[data-page-type=video][it-player-size='full_window'] ytd-watch-flexy[theater] #player-wide-container as the selector, but I'm not sure.

[HanzCEO]

@PoorChameleon alright, here it is

[ImprovedTube]

Thank you! @HanzCEO ( are you on Discord too? if not i should start syncing both somehow. @D-Rekk )

[D-Rekk]

@ImprovedTube this is what we had planned to do. The code is the same.
We also checked that the same style worked for "fit-to-window". Could've been added a few lines below.

What I don't understand is the --header-size variable in player.css

html[data-page-type=video]:not([it-header-position]) ytd-app,
html[data-page-type=video][it-header-position=normal] ytd-app,
html[data-page-type=video][it-header-position=static] ytd-app {
	--it-header-size: 56px;
}

html[data-page-type=video]:not([it-header-position]) ytd-watch-flexy:not([theater]),
html[data-page-type=video][it-header-position=normal] ytd-watch-flexy:not([theater]),
html[data-page-type=video][it-header-position=static] ytd-watch-flexy:not([theater]) {
	--it-header-size: 104px;
}

html[data-page-type=video]:not([it-header-position]) div#page,
html[data-page-type=video][it-header-position=normal] div#page,
html[data-page-type=video][it-header-position=static] div#page {
	--it-header-size: 50px;
}

html[data-page-type=video]:not([it-header-position]) div#page:not(.watch-wide),
html[data-page-type=video][it-header-position=normal] div#page:not(.watch-wide),
html[data-page-type=video][it-header-position=static] div#page:not(.watch-wide) {
	--it-header-size: 70px;
}
/* other quadruplets for hidden, full-height, fit-to-window, hover... */

When should we get the other values over the first base one? I was trying to debug why the player it's never reaching the full height of the page. The header never changes its height in fullscreen, theater or in wide-screen, yet the greatest value takes precedence. Perhaps some obsolete code?
The first value of these custom --header-position is always the correct one. Once adjusted, the height CSS to apply should be changed to height: calc(var(--it-player-size) - var(--it-header-size) - 24px )!important;

---

Also, should the full-height remove the padding-top?

With margin (actual)

Without margin

Without margin (hidden header)

Without margin (hidden header & fit-to-window)

[HanzCEO]

Thank you! @HanzCEO ( are you on Discord too? if not i should start syncing both somehow. @D-Rekk )
@ImprovedTube
My discord: hanzceo

[HanzCEO]

Also, should the full-height remove the padding-top?
@D-Rekk

Maybe i don't correctly understood what full-height mode is, would you mind to enlighten me a bit?

[D-Rekk]

@HanzCEO we're referring to the same thing. It's "full-window" in the CSS and "full-height" in the tooltip

[HanzCEO]

we're referring to the same thing. It's "full-window" in the CSS and "full-height" in the tooltip
@D-Rekk

I mean, the expected behavior from this mode. I'm not confused with its naming convention.

[D-Rekk]

I mean, the expected behavior from this mode. I'm not confused with its naming convention.

It's to expand player to fill the viewport height (minus the header size and padding). Currently its not reaching the bottom part because there's a strange overlapping of variables. --it-header-size is greater than what it should be.
"Fit-to-window" would be the same but with transparent background IIRC🤔

[ImprovedTube]

Perhaps some obsolete code?
The first value of these custom --header-position is always the correct one. Once adjusted, the height CSS to apply should be changed to height: calc(var(--it-player-size) - var(--it-header-size) - 24px )!important;

🤩 Pretty old at least (Didnt write it. Always wondered why Github wouldn't show the the original author and date of each line.) Looking foward to the/your next PR 🤫😁

Also, should the full-height remove the padding-top?

agree.

"Fit-to-window" would be the same but with transparent background IIRC🤔

This used to not increase player-height beyond the video height. (title stays visible. description & comments too on vertical screens) . Not sure why no longer.

Same issure with the first option "Max width" (Does this ones correctly stretch the player controls bar though? For me always except when setting itt)

[HanzCEO]

Always wondered why Github wouldn't show the the original author and date of each line.
@ImprovedTube

It's called git blame but in GitHub there's a button called Blame upright the file content display