Pass chapters to shaka-player

[absidue]

Pull Request Type

• Feature Implementation

Related issue

• closes [Feature Request]: Show chapter title on seek bar #2829

Description

As mentioned in #8772 shaka-player v5 added better support for chapters. This pull request passes the chapters to shaka-player so that chapter name appears when you hover over the seekbar and making it possible to use their in-player chapters menu (not a replacement for the main chapters menu, it just lets you easily change chapters in full screen and full window modes).

Unfortunately I ran into some issues while trying to use shaka-player markers, on short videos with few chapters such as Me at the Zoo, they displayed fine, but on longer videos with lots of chapters such as the WAN show they were a blurry mess, so this pull request still uses FreeTube's own chapter markers on the seek bar. As far as I could tell from my experimentation it seems like CSS linear-gradients were designed to either be used with only percentages or absolute pixel values, trying to combine both with calc like shaka-player does causes the blurring issues.

Screenshots

Testing

Open a video with chapters and check that the chapters show up on the seek bar as markers, in the tooltip when you hover over the seek bar and as a menu option in the player overflow menu. Check that all 3 things happen for audio, dash and legacy formats.

Desktop

• OS: Windows
• OS Version: 11

[PikachuEXE]

Switching to audio format now has no thumbnail = height shortened too much to access menu items

Edit 1: Seems dev has same issue but not my recent custom build, checking for commit that does this

Edit 2: Found this in console

[PikachuEXE]

Works fine in dev with #9136 applied

[avelad]

Unfortunately I ran into some issues while trying to use shaka-player markers, on short videos with few chapters such as Me at the Zoo, they displayed fine, but on longer videos with lots of chapters such as the WAN show they were a blurry mess, so this pull request still uses FreeTube's own chapter markers on the seek bar. As far as I could tell from my experimentation it seems like CSS linear-gradients were designed to either be used with only percentages or absolute pixel values, trying to combine both with calc like shaka-player does causes the blurring issues.

Do you want fix it in Shaka? I'm happy to review your PR.

[absidue]

Do you want fix it in Shaka? I'm happy to review your PR.

Sure, I'll give it a go.