Update shaka-player to 4.16.x

[absidue]

Pull Request Type

• Feature Implementation
• Other

Related issue

• closes Display time in days if video is longer then a 24hrs #1471
• closes Volume slider should be minimized when not hovering #6405
• closes [Feature Request]: New Video Player UI/UX Issues #6216

Description

shaka-player 4.15 includes a redesigned player UI, which required a few changes to our custom player components as well as the CSS. As the UI changes increase the spacing between the player buttons, I also thought this was a good momement to address Move player controls to the overflow menu which we have been planning to do for a while now. Additionally I switched our audio track selector over to the new getAudioTracks() and selectAudioTrack() API.

shaka-player 4.16 changed from using the Material Icons font in the CSS file to using SVGs created via JavaScript, this does mean that the JavaScript file is larger but we no longer need to download the Material Icons font and patch the CSS file to reference the downloaded version.

Screenshots

Testing

Try playing some videos and test that the various UI components work correctly.

Desktop

• OS: Windows
• OS Version: 10

[PikachuEXE]

All scroll over player functions not working (I tried all

[PikachuEXE]

Adding classList.contains('shaka-controls-container') to handleControlsContainerWheel seems to work

[efb4f5ff-1298-471a-8973-3d47447115dc]

i change the volume with the slider but the color wont adjust

Freetube.8Hbapf9cpa.mp4

[efb4f5ff-1298-471a-8973-3d47447115dc]

FYI: v4.16.0 just released

[absidue]

I'll change this PR to jump straight to 4.16.0 then, no point doing two separate PRs right after each other (4.16 will also require more changes than just bumping the version).

[absidue]

@efb4f5ff-1298-471a-8973-3d47447115dc That issue is caused by touch interactions triggering the mouse wheel event that we add to the volume slider, so you can adjust it by hovering over it and scrolling. I don't know why touch interactions trigger touch events and wheel events at the same time but that's what is causing the problem here.

[PikachuEXE]

Not review for this PR but SABR implementation seems broken (renderer process taking 100% CPU) after merging this (no code conflict) and I have no idea why...
(Note: only SABR, current DASH implementation is fine

A request stuck in pending?

Update 1: even non SABR request can be stuck

Update 2: Also got stuck in 4.5.12, not sure if the cause is the same though

Update 3: After using local shaka-player repo to checkout tags (long process), it seems to be shaka-project/shaka-player#8782 causing the issue

Update 4: Issue with our custom URL triggering a bug in https://github.com/shaka-project/shaka-player/blob/v4.16.0/lib/util/cmcd_manager.js#L1348, adding a fake host seems to workaround it

Update 5: Submitted issue shaka-project/shaka-player#9050

[PikachuEXE]

Testing SABR with this PR: https://github.com/PikachuEXE/FreeTube/actions/runs/17323879326
Will approve after testing for ~ 1 week (no issues so far last few days

[absidue]

@efb4f5ff-1298-471a-8973-3d47447115dc That error message is not from us, that's coming from webpack's dev server intercepting errors to show in that popup, in this case it's a warning from Electron that an event handler is too slow and may cause performance problems during the resize but as there is nothing in the console I'm pretty sure it is happening inside shaka-player. (reminder that we need to turn off that webpack dev server overlay, as this is not the first time that it has shown irrelevant errors)

The only icon of concern is the theatre mode one, all others are different because shaka-player changed Material Icons to Material Symbols to in 0.16.x.

[avelad]

@absidue Would it make sense to include this directly in Shaka's CSS?

[absidue]

Sure, I'll open a pull request for it.