Use Shaka chapter tracks for seek bar chapter preview

[aditya0155]

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

Description

Continuation of PR #8312.

This PR adds chapter names to Shaka's seek bar preview when hovering over the timeline.

FreeTube already extracts video chapters from YouTube and passes them into the player component. Previously (in #8312), those chapters were used by FreeTube itself, and the player wrapper manually added small chapter marker elements into Shaka's seek bar.

That worked for showing the visual chapter markers, but it did not let Shaka show the current chapter name in the hover preview which made it very fragile.

Since shaka-project/shaka-player#9413 is already implemented, this PR now uses Shaka's native chapter track support for the preview text. FreeTube takes its existing chapter data, converts it into a WebVTT format, and adds it to Shaka with player.addChaptersTrack(...) after the player loads.

After Shaka gets the chapter track, it can display the right chapter name in the seek preview.

But there's still one thing FreeTube handles on purpose, the small chapter marker ticks on the seek bar. Shaka’s built-in chapter markers use a CSS gradient, which ends up making the seek bar look kind of blurry when chapters are shown. To keep those markers nice and sharp, this PR turns off Shaka’s gradient for chapter markers and sticks with FreeTube’s current DOM-based overlay for the ticks.

Screenshots

Before:

BEFORE.mp4

After:

When hovering over the seek bar on a video with chapters, the preview shows the timestamp and chapter title.

After.2.1.mp4

Test on simple video (after)

Test.Simple.Video.After.mp4

Testing

1. Open a YouTube video that has chapters.
2. Hover over different parts of the seek bar.
3. Check that the seek bar preview shows the timestamp and the matching chapter title.
4. Check that chapter markers still appear on the seek bar and remain sharp.
5. Open a video without chapters and check that the seek bar preview still works normally.
6. Switch between normal, fullscreen, and full window mode and check that the behavior is still correct.

Desktop

• OS: Windows
• OS Version: 11
• FreeTube version: 0.24.0

Additional context

The upstream Shaka Player support for showing chapter names in the seek bar preview was added in shaka-project/shaka-player#9413. FreeTube is already using shaka-player 5.1.2, which includes that upstream behavior.

The new flow is:

FreeTube gets chapter data from YouTube
        ↓
FreeTube converts the chapters into WebVTT text
        ↓
FreeTube adds that WebVTT file as a Shaka chapter track
        ↓
Shaka reads the chapter track through its own API
        ↓
Shaka displays the chapter name in the seek preview
        ↓
FreeTube keep its own visual chapter ticks so they stay crisp 

[aditya0155]

Here's a video showing the blurry seek bar when using Shaka's native chapter marker gradient and why I still kept FreeTube's existing DOM-based chapter marker overlay for the visual ticks

Shaka_Blurry_seekbar.mp4

and I dont think making a PR in shaka will help for this issue either because It's Chromium rendering limitation

[absidue]

Closing in favour of the more complete #9134 (I started work on it before this pull request, so it seemed better to finish mine than ask you to rewrite yours from scratch).