feat(UI): Add chapter titles and dividers on the seek bar (#5863)

Closes #3597

demo/common/assets.js

@@ -149,6 +149,9 @@ shakaAssets.Feature = {
   // Set if the asset has at least one image stream.
   THUMBNAILS: 'Thumbnails',
 
+  // Set if the asset has at least one chapter stream.
+  CHAPTERS: 'Chapters',
+
   // Set if the asset has LCEVC.
   LCEVC: 'LCEVC',
 
@@ -401,7 +404,13 @@ shakaAssets.testAssets = [
       .addFeature(shakaAssets.Feature.MP4)
       .addFeature(shakaAssets.Feature.SUBTITLES)
       .addFeature(shakaAssets.Feature.WEBM)
-      .addFeature(shakaAssets.Feature.OFFLINE),
+      .addFeature(shakaAssets.Feature.OFFLINE)
+      .addFeature(shakaAssets.Feature.CHAPTERS)
+      .addExtraChapter({
+        uri: 'https://storage.googleapis.com/shaka-demo-assets/sintel-chapters.vtt',
+        language: 'en',
+        mime: 'text/vtt',
+      }),
   new ShakaDemoAssetInfo(
       /* name= */ 'Sintel w/ trick mode (MP4 only, 720p)',
       /* iconUri= */ 'https://storage.googleapis.com/shaka-asset-icons/sintel.png',

demo/search.js

@@ -391,6 +391,8 @@ shakaDemo.Search = class {
         'Filters for assets that do not have video streams.');
     this.makeBooleanInput_(specialContainer, Feature.THUMBNAILS, FEATURE,
         'Filters for assets that have a thumbnail track.');
+    this.makeBooleanInput_(specialContainer, Feature.CHAPTERS, FEATURE,
+        'Filters for assets that have a chapters track.');
     this.makeBooleanInput_(specialContainer, Feature.LCEVC, FEATURE,
         'Filters for assets that have an LCEVC enhancement layer.');
 

docs/tutorials/ui-customization.md

@@ -188,6 +188,19 @@ const config = {
 ui.configure(config);
 ```
 
+If you've chosen to display chapters, you can specify the color for the chapter markers on
+the timeline and the text color of the chapter titles that popup on hover:
+ ```js
+const config = {
+  displayChapters: true,
+  seekBarColors: {
+    chapterMarks: 'rgb(27, 27, 27)',
+    chapterLabels: 'rgb(255, 255, 255)'
+  }
+}
+ui.configure(config);
+```
+
 #### Configuring playback, fast forward and rewind rates
 The rate in which the player can play, fast forward and rewind content can be configured using the `playbackRates`, `fastForwardRates` and `rewindRates` options.
 

lib/player.js

@@ -40,6 +40,7 @@ goog.require('shaka.text.WebVttGenerator');
 goog.require('shaka.util.BufferUtils');
 goog.require('shaka.util.CmcdManager');
 goog.require('shaka.util.ConfigUtils');
+goog.require('shaka.util.Dom');
 goog.require('shaka.util.Error');
 goog.require('shaka.util.EventManager');
 goog.require('shaka.util.FakeEvent');
@@ -1216,6 +1217,11 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
         this.adManager_.onAssetUnload();
       }
 
+      if (this.video_) {
+        // Remove all track nodes
+        shaka.util.Dom.removeAllChildren(this.video_);
+      }
+
       // In order to unload a media element, we need to remove the src attribute
       // and then load again. When we destroy media source engine, this will be
       // done for us, but for src=, we need to do it here.
@@ -1231,10 +1237,6 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
 
         this.video_.removeAttribute('src');
         this.video_.load();
-        // Remove all track nodes
-        while (this.video_.lastChild) {
-          this.video_.removeChild(this.video_.firstChild);
-        }
       }
 
       if (this.drmEngine_) {
@@ -4183,6 +4185,9 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
    * @export
    */
   getChapters(language) {
+    if (!this.video_ || !this.video_.src || !this.video_.textTracks) {
+      return [];
+    }
     const LanguageUtils = shaka.util.LanguageUtils;
     const inputlanguage = LanguageUtils.normalize(language);
     const chaptersTracks = this.getChaptersTracks_();
@@ -4871,6 +4876,8 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
         });
       });
 
+      this.onTracksChanged_();
+
       return chaptersTrack;
     }
 

ui/externs/ui.js

@@ -21,7 +21,9 @@ shaka.extern = {};
  *   base: string,
  *   buffered: string,
  *   played: string,
- *   adBreaks: string
+ *   adBreaks: string,
+ *   chapterMarks: string,
+ *   chapterLabels: string
  * }}
  *
  * @property {string} base
@@ -36,6 +38,13 @@ shaka.extern = {};
  * @property {string} adBreaks
  *   The CSS background color applied to the portion of the seek bar showing
  *   when the ad breaks are scheduled to occur on the timeline.
+ * @property {string} chapterMarks
+ *   The CSS border color applied to sections of the seek bar showing
+ *   when the chapters start and end on the timeline.
+ *   Defaults to dark grey rgb(27, 27, 27).
+ * @property {string} chapterLabels
+ *   The CSS text color applied to the chapter labels that appear above the
+ *   seek bar on hover. Defaults to white rgb(255, 255, 255).
  * @exportDoc
  */
 shaka.extern.UISeekBarColors;

ui/less/range_elements.less

@@ -154,3 +154,36 @@
 .shaka-ad-markers {
   .overlay-child();
 }
+
+#shaka-player-ui-chapters-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  z-index: 0;
+}
+
+.shaka-chapter {
+  height: 100%;
+  position: relative;
+}
+
+.shaka-chapter-label {
+  position: relative;
+  top: -2.5em;
+  width: 100%;
+  text-align: center;
+  text-shadow: 1px 1px gray;
+  line-height: normal;
+}
+
+.shaka-chapter > div:first-child {
+  width: 100%;
+  height: 100%;
+  border-right: 1px solid;
+  position: absolute;
+}
+
+.shaka-chapter:last-child > div:first-child {
+  border-right: none;
+}

ui/localization.js

@@ -230,6 +230,16 @@ shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
     return '';
   }
 
+  /**
+   * The locales currently used. An empty set means "no preference".
+   *
+   * @return {!Set.<string>}
+   * @export
+   */
+  getCurrentLocales() {
+    return this.currentLocales_;
+  }
+
   /**
    * @private
    */