Unable to create chapter track dynamically

[sgavali]

Description

Filing bug based observation mentioned in #2124

I'm using VJS 4.x version, and when I create captions and chapters in JS it works fine in PC Chrome. On Android chrome I'm not able to see chapters menu.

Using VJS 5.x I can see chapters menu but it has not effect / data in it.

Sample code:

`var player = videojs('example-video');
player.nativeTextTracks = false;
player.ready(function(){
var oldTracks = player.remoteTextTracks();
var i = oldTracks.length;
while (i--) {
player.removeRemoteTextTrack(oldTracks[i]);
}
var track1 = {
kind: 'captions',
src: 'subtitles.vtt',
srclang: 'en',
label: 'English',
default: 'default'
};
player.addRemoteTextTrack(track1);

    var track2 = {
     kind: 'chapters',
     src: 'chapters.vtt',
     srclang: 'en',
     label: 'English',
     default: 'default'
    };
    player.addRemoteTextTrack(track2);
});`

[gkatsev]

Hey, do you happen to have a live reduced test case?
I just tried it locally on my android device in chrome and it's working great with both the track element and also using the addRemoteTextTrack api call.

Also, can you include some of the information requested in the issue template? Like the specific versions of videojs and browsers and OSes you're using, as well as whether you're using any plugins.

[sgavali]

1. Dynamically created Chapters not seen in Android
   VideoJS version 4.12.11
   Android version : 6.x
   Android Chrome version: 49.0.2623.105
2. I can see Dynamically created chapter menu but it has not effect / data in it.
   VideoJS version: 5.8.0
   Chrome version Windows PC: 49.0.2623.110
   Android version : 6.x
   Android Chrome version: 49.0.2623.105

I'm using MP4 as well as HLS (with HLS plugin). Issue is seen in both.

[sgavali]

Any suggestion/comments on making this work.

[gkatsev]

I can't really offer any more help without a reduced test case.

[cervengoc]

Hello guys, I had the same problem.
I don't have time for the PR, but here are the steps to fix (at least for me).

1. ChaptersButton listens to load event only when cues == null. In latest Chrome I have an empty cues property, so it seems like several browsers handle it differently. IMO the best would be to always subscribe to the load event and issues an update. Also, it would be needed to unsubscribe from it when player is disposed; when track is removed; etc. As a quick fix I refined the related if condition to !chaptersTrack.cuesl || !chaptersTrack.cues.length.
2. ChaptersMenuItem should be set to selectable, otherwise it won't update it's selected style on cuechange.
3. Chapters menu should take the chapters track's label as menu title and fall back to "Chapters" if not provided.
4. This is just a refactoring: it seems like ChaptersButton's createItems is incorretct, and not even called (createMenu is used instead), so it should be removed.
5. There are several styling isssues with chapters: font is not Arial because it inherits VideoJS font, so menu items and title look ugly; menu items have strange padding, the text is not aligned to the middle vertically.

Please someone handle these in the next release.

[gkatsev]

I believe that this has been addressed, at least @cervengoc's concerns should've (#3472).