Player: chapter follow-up tweaks

- Make the chapters button appear consistently.
  - Previously, it was only appearing for Original.
  - We still hide it for mobile, as per previous explanation.
- Changed the Chapters button position and popup aesthetics.

static/app-strings.json

@@ -1673,6 +1673,7 @@
   "Exit Fullscreen (f)": "Exit Fullscreen (f)",
   "Theater Mode (t)": "Theater Mode (t)",
   "Default Mode (t)": "Default Mode (t)",
+  "Chapters": "Chapters",
   "Quality": "Quality",
   "Auto": "Auto",
   "Auto --[Video quality. Short form]--": "Auto",

ui/component/viewers/videoViewer/internal/chapters.jsx

@@ -126,7 +126,7 @@ function overrideHoverTooltip(player: any, tsData: TimestampData, duration: numb
 
 function load(player: any, timestampData: TimestampData, duration: number) {
   player.one('loadedmetadata', () => {
-    const textTrack = player.addTextTrack('chapters', 'label', 'en');
+    const textTrack = player.addTextTrack('chapters', __('Chapters'), 'en');
 
     setTimeout(() => {
       const values = Object.values(timestampData);
@@ -144,6 +144,11 @@ function load(player: any, timestampData: TimestampData, duration: number) {
         values.map((v) => v.seconds),
         duration
       );
+
+      const chaptersButton = player?.controlBar?.chaptersButton;
+      if (chaptersButton) {
+        chaptersButton.update();
+      }
     }, REQUIRED_DELAY_FOR_IOS_MS);
   });
 }

ui/scss/component/_file-render.scss

@@ -634,6 +634,18 @@ $control-bar-icon-size: 0.8rem;
       }
     }
 
+    .vjs-chapters-button {
+      .vjs-menu {
+        width: 20em;
+        left: -3em;
+      }
+
+      li {
+        text-align: left;
+        padding: var(--spacing-xxxs) var(--spacing-s);
+      }
+    }
+
     .vjs-chromecast-button,
     .vjs-airplay-button {
       .vjs-icon-placeholder {

ui/scss/component/_videojs.scss

@@ -299,6 +299,9 @@ button.vjs-big-play-button {
 .vjs-custom-control-spacer {
   order: 9 !important;
 }
+.vjs-chapters-button {
+  order: 10 !important;
+}
 .vjs-button--autoplay-next {
   order: 10 !important;
 }