[Bug]: Playing video in incorrect ratio

Rairof commented 1 month ago

Preflight Checklist

[X] I use the latest version of YouTube Music (Application).
[X] I have searched the issue tracker for a bug report that matches the one I want to file, without success.
[X] I understand that th-ch/youtube-music has NO affiliation with Google or YouTube

YouTube Music (Application) Version

3.5.3

Checklists

[X] I use the portable version of the YouTube Music Application.
[ ] I can reproduce this issue in the official version of (WEB) YTM.

What operating system are you using?

Windows

Operating System Version

Win 11 Pro

What CPU architecture are you using?

x64

Last Known Working YouTube Music (Application) version

N/A

Reproduction steps

Play any music video
Toggle to video mode

Expected Behavior

Video plays at correct ratio covering the whole space

Actual Behavior

Video plays at top left in a small ratio

Enabled plugins

Ad Blocker
Album Actions
Album Color Scheme Color mix ratio- 50%
Ambient Mode- Smoothness transition- During 1.5s Quality- 50 pixels Size- 100% Buffer- 30 Opacity- 100% Blur amount- 100 pixels
Blur Navigation Bar
Bypass Age Restrictions
Discord Rich Presence- ✓ Auto reconnect ✓ Clear activity after timeout ✓ Play on YouTube Music ✓ Hide GitHub link Button
Downloader
In-App Menu
Lyrics Genius ✓ Romanized Lyrics
Music Together [Beta]
Navigation
Precise Volume ✓ Local Arrow-keys Controls
Skip Disliked Songs
Synced Lyrics ✓ Make the lyrics perfectly synced Line effect- Scale Default character between lyrics- ♪ ✓ Show lyrics even if inexact
Taskbar Media Control
Video Quality Changer
Video Toggle- Mode- Native toggle Alignment- Left

Additional Information

It's inconsistent and sometimes works and sometimes doesn't work. Not sure why, maybe its something to do with video playback fetching or type of music video?

h-banii commented 1 month ago

On linux (wayland), I managed to reproduce this bug reliably with these steps:

Reduce window size
Toggle it to "song"
Increase window size
Toggle it back to "video"

I ran these lines from the video-toggle plugin in my browser and managed to reproduce the issue in the official web version too. https://github.com/th-ch/youtube-music/blob/4c2cb8dac9b0438def1f6e0efa12ec43ac94f46f/src/plugins/video-toggle/index.ts#L125-L133

Video demo (in the music.youtube web version)

I'm not sure if this behaviour is present when using an actual premium subscription (I don't have one, so I can't test it).

OBS.: as a quick workaround, triggering the window resize event seems to fix it (using the native toggle)

document
  .querySelector('button.video-button.ytmusic-av-toggle')
  .addEventListener('click', () => window.dispatchEvent(new Event('resize')))

JellyBrick commented 3 weeks ago

I'm not sure if this behaviour is present when using an actual premium subscription (I don't have one, so I can't test it).

2024-10-14 UPDATE: reproducible (with premium subscription)

JellyBrick commented 3 weeks ago

fixed at 5ca6653

Thanks to @h-banii!

h-banii commented 2 weeks ago

I found a way to trigger this bug without the song/video toggle. It happens in the official web version too.

Video scale too small:

1) start with the left drawer open	2) close the drawer

Video scale too big:

1) start with the left drawer closed	2) open the drawer

The container's dimensions get updated correctly (outlined in red), but the video doesn't.

Rairof commented 2 weeks ago

I tried with official ytm in site but it didn't triggered for me so I reported. I guess it was a combination of both the mod and ytm bug then?

h-banii commented 14 hours ago

Here's a css workaround for this issue

.html5-video-container, .html5-main-video {
  width: 100% !important;
  height: 100% !important;
}
.html5-main-video {
  top: unset !important;
  left: unset !important;
  object-fit: contain !important;
}

quick explanation

youtube manually calculates the video's `width, height, top, left` anytime the window resizes, so we need to overwrite those. - the container's dimensions (#movie_player) are updated correctly, so `width` and `height` are set to 100% - `top` and `left` need to be unset to fix the position of videos with aspect ratios that are not 16:9 - object-fit needs to be `contain` because youtube uses `cover` by default, which clips wide videos like "Thought Crime" by yorushika https://www.youtube.com/watch?v=ENcnYh79dUY

th-ch / youtube-music