Added chapter preview over timeline

[aditya0155]

Pull Request Type

• Feature Implementation

Related issue

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

Description

This PR implements a chapter preview feature that displays the chapter title when hovering over the video timeline. When users move their cursor along the seekbar, a text (chapter label) appears above the timeline showing the title of the chapter at that position.

Screenshots

• Before:

Before.mp4

• After:

Updated.mp4

Testing

1. Visiting Youtube videos having chapters: example:

• https://www.youtube.com/watch?v=TiMoSDztAhw
• https://www.youtube.com/watch?v=V_xro1bcAuA&t=7102s

2. move their cursor along the seekbar and see if the text appears above the video frame

3. Go full screen and test for the same.

Desktop

• OS: Windows 11
• OS Version: Windows 11 24H2 (OS Build 26100.7171)
• FreeTube version: 0.23.12

Additional context

1. Important Edge case fixed:

EDGE_CASE_Fixed.mp4

• As you can see from the video, the chapter label text does not break when the seekbar is at the extreme ends.

[absidue]

@aditya0155 Please integrate these changes into shaka-player itself by submitting a pull request to their repository (you'll obviously need to pull the chapter information from the player directly), instead of implementing a fragile implementation on top of it in FreeTube (this will break if shaka-player makes any changes to their progress bar or thumbnail preview and they have already redesigned them multiple times, so it is definitely possible that it could change again).

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

Hi @aditya0155, could you change the placement of it when/if you're going to PR it upstream

Make placement same as YT's placement. Below the thumbnail/timestamp

firefox_rPSmDFkYvk.mp4

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

@aditya0155 its already been implemented shaka-project/shaka-player#9413. Thanks for looking into this though!