search

iv-org / invidious

Invidious is an alternative front-end to YouTube
https://invidious.io
GNU Affero General Public License v3.0
16k stars 1.75k forks source link

Thumbnail cut from top and buttom in video page #2237

Open rezad1393 opened 3 years ago

rezad1393 commented 3 years ago

Describe the bug the thumbnail in the video page has top and bottom of it cut compared to video thumbnail in search and also in youtube page.

link https://www.youtube.com/watch?v=SDqGpKpTnUg

Screenshots Screenshot 2021-07-03 at 03-59-35 CBDC Will Control The Way You Spend Money

Screenshot 2021-07-03 at 03-59-40 CBDC Will Control The Way You Spend Money

SamantazFox commented 3 years ago

This feature is working as intended :)

In order to be compatible with many browsers and to run without Javascript, Invidious relies on native browser features. For instance, to display the video thumbnail we use the poster attribute of the <video> HTML element).

Youtube, on the other hand, relies on lots of javascript code and HTML workarounds, without caring about compatibility nor standards (they want you to install Chrome, after all) in order to provide their own "shiny" player.

rezad1393 commented 3 years ago

so firefox implementation or html standard? I tested in brave and it is the same as firefox tested in edge on windows too. on edge it is cropped too but more than firefox and brave.

it this a bug( bad number used for size of picture) of html standard or any browser uses its own definition? can I ask firefox to change this or it is futile??

SamantazFox commented 3 years ago

Wait, this only happens when Javascript is enabled!

without JS, there is the behavior that I explained (standard HTML features): image

And with JS enabled, here is your bug: image

SamantazFox commented 3 years ago

after further investigation: VideoJS adds its own "poster" image above the player, similar to what youtube does. And as the player doesn't have a 16:9 ratio (black bars on the javascript-less version) the miniature on top is cropped to fit in this space.

rezad1393 commented 3 years ago

so the firefox/html one (without javascript) would show the correct (complete) poster like youtube and with javascript then invidious javascript player cuts it? that would be a invidious bug. right?

SamantazFox commented 3 years ago

so the firefox/html one (without javascript) would show the correct (complete) poster like youtube and with javascript then invidious javascript player cuts it? that would be a invidious bug. right?

I'm not sure about that. The native player dimensions being forced (with black bars on the side) is the reason why the javacript player image is cropped. I don't know what were the original intentions in this design. Maybe @syeopite knows more.

There is also that issue that may be related: #1880

rezad1393 commented 3 years ago

I dont think it is the native fault if the invidious javascript player shows the thumbnail wrong. isnt the javascript one written by invidious team? so they can make the poster whatever they want.

btw I am not familiar with native player capabilities. does it support dash or does dash require JS?

SamantazFox commented 3 years ago

isnt the javascript one written by invidious team? so they can make the poster whatever they want.

The javascript player is called VideoJS, and it's developped by another team, not related to the invidious project.

btw I am not familiar with native player capabilities. does it support dash or does dash require JS?

As far as I know, DASH requires a javascript player.

syeopite commented 3 years ago

so the firefox/html one (without javascript) would show the correct (complete) poster like youtube and with javascript then invidious javascript player cuts it? that would be a invidious bug. right?

I'm not sure about that. The native player dimensions being forced (with black bars on the side) is the reason why the javacript player image is cropped. I don't know what were the original intentions in this design. Maybe @syeopite knows more.

There is also that issue that may be related: #1880

Sorry for the late reply. But afaik the only reason why the player is like that is due to the upstream bug — which is outsourced to the end users — regarding container size.

Invidious has a few CSS that attempts to resolve the issue but they really don't do much.

rezad1393 commented 3 years ago

isnt the javascript one written by invidious team? so they can make the poster whatever they want.

The javascript player is called VideoJS, and it's developped by another team, not related to the invidious project.

cant a issue be opened in that project page?

syeopite commented 3 years ago

Unfortunately not. Although the bug is an upstream one, they're outsourcing the actual "fixing" to the end user; the progress of which is tracked here: #1880

rezad1393 commented 3 years ago

does that mean this project need to apply a hack over the videojs source for it to work? it is too complicated?

syeopite commented 3 years ago

Nope. A CSS or configuration fix should theoretically resolve it. This is currently one of my goals for the eventual UI rewrite I'm doing.

rezad1393 commented 3 years ago

Nope. A CSS or configuration fix should theoretically resolve it. This is currently one of my goals for the eventual UI rewrite I'm doing.

thank you. any roadmap for this issue? or is it to dependent on other issues that it is not worth fixing it right now and we should wait for other issues related to UI to be decided first?