UI: Using thumbnails and chapters at the same time, results in them overlapping with the chapters displayed behind the thumbnails

[absidue]

Have you read the FAQ and checked for duplicate open issues?
Yes

If the problem is related to FairPlay, have you read the tutorial?

Not applicable

What version of Shaka Player are you using?

4.7.6

Can you reproduce the issue with our latest release version?
Yes

Can you reproduce the issue with the latest code from main?
Yes

Are you using the demo app or your own custom app?
Both

If custom app, can you reproduce the issue using our demo app?
Yes (in the nightly one too)

What browser and OS are you using?
Firefox on Windows 10

For embedded devices (smart TVs, etc.), what model and firmware version are you using?
Not applicable

What are the manifest and license server URIs?
Dash Manifest:
https://dash.akamaized.net/akamai/bbb_30fps/bbb_with_tiled_thumbnails_2.mpd

Chapters:
data:text/vtt;charset=UTF-8,WEBVTT%0A%0A00%3A00%3A00.000%20--%3E%2000%3A03%3A30.000%0AThis%20is%20the%20first%20chapter%0A%0A00%3A03%3A30.000%20--%3E%2000%3A07%3A00.000%0AThis%20is%20the%20second%20chapter%0A%0A00%3A07%3A00.000%20--%3E%2000%3A10%3A34.566%0AThis%20is%20the%20third%20chapter%0A%0A

WEBVTT

00:00:00.000 --> 00:03:30.000
This is the first chapter

00:03:30.000 --> 00:07:00.000
This is the second chapter

00:07:00.000 --> 00:10:34.566
This is the third chapter

What configuration are you using? What is the output of player.getConfiguration()?
Default

What did you do?

1. On the demo page in the custom content section, add the DASH manifest in the MAIN tab and the chapters to the EXTRA TRACKS tab.
2. Hover over the seek bar in various places and notice that you can only see part of the chapter title.

What did you expect to happen?
The chapters and thumbnails to not overlap. This could be achieved by moving the thumbnails up when thumbnails and chapters are used at the same time.

What actually happened?
The chapters were displayed behind the thumbnails, so you can only see the text that sticks out behind the thumbnail on the left and right sides.

[avelad]

I think the best thing is to make a new chapter implementation that is a new button with the chapters. Because the current implementation of the chapters is not the best and it also does not work on SmartTVs.

[avelad]

Since its a breaking change, this will be appear in 5.0 (I hope)

[absidue]

I think there are two different use cases. One with the menu so that you can jump to a chapter, the second one is having the chapters on the seek bar, in the same way that the thumbnails are displayed, so that you know what part of the video it is.

I do agree with you though, that the current implementation isn't great, as the labels are statically positioned and have a fixed width (long labels for short duration chapters, wrap so much that they overflow beyond the bottom edge of the player), it would probably be better to have it follow the cursor like the thumbnails do.

[absidue]

Just to make it clear, this bug report is for bugs in the existing implementation, which would be nice to see fixed, as that is the use case that we have and what the original requestor in #3597 wanted. Removing the current implementation and replacing it with a menu, is a different use case and would warrant reopening the original feature request.

[avelad]

In that case I won't be able to work on this issue anymore, so I'll leave it open in case someone from the community wants to work on it.

[avelad]

Since the functionality has been reopened #3597, this issue is now meaningless, but I leave it linked to the original issue so that information is not lost.