shaka-player 4.5.0 → 4.6.0

package/ui/seek_bar.js

@@ -8,12 +8,17 @@
 goog.provide('shaka.ui.SeekBar');
 
 goog.require('shaka.ads.AdManager');
+goog.require('shaka.net.NetworkingEngine');
 goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
 goog.require('shaka.ui.RangeElement');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
+goog.require('shaka.util.Error');
+goog.require('shaka.util.EventManager');
+goog.require('shaka.util.Mp4Parser');
+goog.require('shaka.util.Networking');
 goog.require('shaka.util.Timer');
 goog.requireType('shaka.ui.Controls');
 
@@ -79,6 +84,19 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
       this.markAdBreaks_();
     });
 
+    /**
+     * @private {shaka.util.EventManager}
+     */
+    this.chaptersEventManager_ = new shaka.util.EventManager();
+
+
+    /** @private {!HTMLElement} */
+    this.chaptersContainer_ = shaka.util.Dom.createHTMLElement('div');
+    this.chaptersContainer_.id = 'shaka-player-ui-chapters-container';
+    this.container.appendChild(this.chaptersContainer_);
+
+    this.setupChapters_();
+
     /**
      * When user is scrubbing the seek bar - we should pause the video - see
      * https://github.com/google/shaka-player/pull/2898#issuecomment-705229215
@@ -108,6 +126,16 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
     this.thumbnailContainer_.appendChild(this.thumbnailTime_);
     this.container.appendChild(this.thumbnailContainer_);
 
+    /**
+     * @private {?shaka.extern.Thumbnail}
+     */
+    this.lastThumbnail_ = null;
+
+    /**
+     * @private {?shaka.net.NetworkingEngine.PendingRequest}
+     */
+    this.lastThumbnailPendingRequest_ = null;
+
     /**
      * True if the bar is moving due to touchscreen or keyboard events.
      *
@@ -159,6 +187,12 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
         this.player, 'unloading', () => {
           this.adCuePoints_ = [];
           this.onAdCuePointsChanged_();
+          if (this.lastThumbnailPendingRequest_) {
+            this.lastThumbnailPendingRequest_.abort();
+            this.lastThumbnailPendingRequest_ = null;
+          }
+          this.lastThumbnail_ = null;
+          this.hideThumbnail_();
         });
 
     this.eventManager.listen(this.bar, 'mousemove', (event) => {
@@ -204,6 +238,8 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
       this.adBreaksTimer_ = null;
     }
 
+    this.chaptersEventManager_.release();
+
     super.release();
   }
 
@@ -504,8 +540,52 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
         Math.max(0, pixelPosition - (width / 2)));
     this.thumbnailContainer_.style.left = leftPosition + 'px';
     this.thumbnailContainer_.style.visibility = 'visible';
-    const uri = thumbnail.uris[0].split('#xywh=')[0];
-    if (uri !== this.thumbnailImage_.src) {
+    let uri = thumbnail.uris[0].split('#xywh=')[0];
+    if (!this.lastThumbnail_ ||
+        uri !== this.lastThumbnail_.uris[0].split('#xywh=')[0] ||
+        thumbnail.segment.getStartByte() !=
+            this.lastThumbnail_.segment.getStartByte() ||
+        thumbnail.segment.getEndByte() !=
+            this.lastThumbnail_.segment.getEndByte()) {
+      this.lastThumbnail_ = thumbnail;
+      if (this.lastThumbnailPendingRequest_) {
+        this.lastThumbnailPendingRequest_.abort();
+        this.lastThumbnailPendingRequest_ = null;
+      }
+      if (thumbnailTrack.codecs == 'mjpg' || uri.startsWith('offline:')) {
+        this.thumbnailImage_.src = shaka.ui.SeekBar.Transparent_Image_;
+        try {
+          const requestType = shaka.net.NetworkingEngine.RequestType.SEGMENT;
+          const type =
+              shaka.net.NetworkingEngine.AdvancedRequestType.MEDIA_SEGMENT;
+          const request = shaka.util.Networking.createSegmentRequest(
+              thumbnail.segment.getUris(),
+              thumbnail.segment.getStartByte(),
+              thumbnail.segment.getEndByte(),
+              this.player.getConfiguration().streaming.retryParameters);
+          this.lastThumbnailPendingRequest_ = this.player.getNetworkingEngine()
+              .request(requestType, request, {type});
+          const response = await this.lastThumbnailPendingRequest_.promise;
+          this.lastThumbnailPendingRequest_ = null;
+          if (thumbnailTrack.codecs == 'mjpg') {
+            const parser = new shaka.util.Mp4Parser()
+                .box('mdat', shaka.util.Mp4Parser.allData((data) => {
+                  const blob = new Blob([data], {type: 'image/jpeg'});
+                  uri = URL.createObjectURL(blob);
+                }));
+            parser.parse(response.data, /* partialOkay= */ false);
+          } else {
+            const mimeType = thumbnailTrack.mimeType || 'image/jpeg';
+            const blob = new Blob([response.data], {type: mimeType});
+            uri = URL.createObjectURL(blob);
+          }
+        } catch (error) {
+          if (error.code == shaka.util.Error.Code.OPERATION_ABORTED) {
+            return;
+          }
+          throw error;
+        }
+      }
       try {
         this.thumbnailContainer_.removeChild(this.thumbnailImage_);
       } catch (e) {
@@ -516,6 +596,11 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
       this.thumbnailImage_.id = 'shaka-player-ui-thumbnail-image';
       this.thumbnailImage_.draggable = false;
       this.thumbnailImage_.src = uri;
+      this.thumbnailImage_.onload = () => {
+        if (uri.startsWith('blob:')) {
+          URL.revokeObjectURL(uri);
+        }
+      };
       this.thumbnailContainer_.insertBefore(this.thumbnailImage_,
           this.thumbnailContainer_.firstChild);
     }
@@ -571,7 +656,10 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
         return bestOptions[0];
       }
     }
-    return imageTracks[0];
+    const mjpgTrack = imageTracks.find((track) => {
+      return track.mimeType == 'application/mp4' && track.codecs == 'mjpg';
+    });
+    return mjpgTrack || imageTracks[0];
   }
 
 
@@ -605,9 +693,214 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
       return minutes + ':' + seconds;
     }
   }
+
+  /**
+   * Sets up the chapter element creator and change handling.
+   * @private
+   */
+  setupChapters_() {
+    let language = 'und';
+    /** @type {!Array<shaka.extern.Chapter>} */
+    let chapters = [];
+
+    /**
+    * Does a value compare on chapters.
+    * @param {shaka.extern.Chapter} a
+    * @param {shaka.extern.Chapter} b
+    * @return {boolean}
+    */
+    const chaptersEqual = (a, b) => {
+      return (!a && !b) || (a.id === b.id && a.title === b.title &&
+          a.startTime === b.startTime && a.endTime === b.endTime);
+    };
+
+    /** @type {function(): void} */
+    const handleChapterTrackChange = () => {
+      let nextLanguage = 'und';
+      /** @type {!Array<shaka.extern.Chapter>} */
+      let nextChapters = [];
+
+      const currentLocales = this.localization.getCurrentLocales();
+      for (const locale of Array.from(currentLocales)) {
+        nextLanguage = locale;
+        nextChapters = this.player.getChapters(nextLanguage);
+        if (nextChapters.length) {
+          break;
+        }
+      }
+      if (!nextChapters.length) {
+        nextLanguage = 'und';
+        nextChapters = this.player.getChapters(nextLanguage);
+      }
+
+      const languageChanged = nextLanguage !== language;
+      const chaptersChanged = chapters.length !== nextChapters.length ||
+        !chapters.some((c, idx) => {
+          const n = nextChapters.at(idx);
+          return chaptersEqual(c, n) ||
+            nextChapters.some((n) => chaptersEqual(c, n));
+        });
+
+      language = nextLanguage;
+      chapters = nextChapters;
+      if (!nextChapters.length) {
+        this.deletePreviousChapters_();
+      } else if (languageChanged || chaptersChanged) {
+        this.createChapterElements_(this.container, chapters);
+      }
+    };
+
+    handleChapterTrackChange();
+
+    this.eventManager.listen(
+        this.player, 'unloading', () => {
+          this.deletePreviousChapters_();
+          language = 'und';
+          chapters = [];
+        });
+
+    this.eventManager.listen(
+        this.player, 'trackschanged', handleChapterTrackChange);
+
+    this.eventManager.listen(
+        this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
+          handleChapterTrackChange();
+        });
+
+    this.eventManager.listen(
+        this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
+          handleChapterTrackChange();
+        });
+  }
+
+  /**
+   * Builds and inserts ChaptersElement into dom container.
+   * @param {!HTMLElement} container
+   * @param {!Array<shaka.extern.Chapter>} chapterTracks
+   * @private
+   */
+  createChapterElements_(container, chapterTracks) {
+    this.deletePreviousChapters_();
+
+    const hiddenClass = 'shaka-hidden';
+
+    /** @type {{start: number, end: number}} */
+    const seekRange = this.player.seekRange();
+
+    /**
+     * @type {!Array<{
+     *  start: number,
+     *  end: number,
+     *  size: number,
+     *  title: string,
+     *  id: string
+     * }>}
+     * */
+    const chapters = [];
+
+    for (const c of chapterTracks) {
+      if (c.startTime >= seekRange.end) {
+        continue;
+      }
+      const start = c.startTime > seekRange.start ?
+        c.startTime : seekRange.start;
+      const end = c.endTime < seekRange.end ?
+        c.endTime : seekRange.end;
+      const size = (end-start);
+      chapters.push({start, end, size, title: c.title, id: c.id});
+    }
+
+    if (chapters.length < 2) {
+      return;
+    }
+
+    const totalSize = chapters.reduce((t, c) => {
+      t += c.size;
+      return t;
+    }, 0);
+
+    /**
+     * @type {!Array<{
+     *  start: number,
+     *  end: number,
+     *  el: HTMLElement
+     * }>}
+     * */
+    const chapterElMap = [];
+
+    for (const c of chapters) {
+      /** @type {!HTMLElement} */
+      const chapterEl = shaka.util.Dom.createHTMLElement('div');
+      chapterEl.classList.add('shaka-chapter');
+      chapterEl.style.width = `${c.size * 100 / totalSize}%`;
+
+      this.chaptersContainer_.appendChild(chapterEl);
+
+      /** @type {!HTMLElement} */
+      const chapterMarker = shaka.util.Dom.createHTMLElement('div');
+      chapterMarker.style.borderColor =
+        this.config_.seekBarColors.chapterMarks;
+      chapterEl.appendChild(chapterMarker);
+
+      /** @type {!HTMLElement} */
+      const chapterLabel = shaka.util.Dom.createHTMLElement('p');
+      chapterLabel.classList.add('shaka-chapter-label', hiddenClass);
+      chapterLabel.style.color =
+        this.config_.seekBarColors.chapterLabels;
+      chapterLabel.innerText = c.title;
+      chapterEl.appendChild(chapterLabel);
+
+      chapterElMap.push(
+          {start: c.start, end: c.end, el: chapterLabel});
+    }
+
+    // Add chapter event listeners
+    this.chaptersEventManager_.listen(this.bar, 'pointermove', (e) => {
+      if (!e.target) {
+        return;
+      }
+      const target = /** @type {HTMLElement} */(e.target);
+
+      const screenXDiff = e.offsetX / target.clientWidth;
+      const rangeMax = parseInt(target.getAttribute('max'), 10);
+      const hoverVal = screenXDiff * rangeMax;
+
+      for (const c of chapterElMap) {
+        const hidden = c.el.classList.contains(hiddenClass);
+        const inChapter = c.start <= hoverVal && hoverVal < c.end;
+        if (inChapter === hidden) {
+          c.el.classList.toggle(hiddenClass);
+        }
+      }
+    }, {passive: true});
+
+    this.chaptersEventManager_.listen(this.bar, 'pointerout', () => {
+      for (const c of chapterElMap) {
+        if (!c.el.classList.contains(hiddenClass)) {
+          c.el.classList.add(hiddenClass);
+        }
+      }
+    }, {passive: true});
+  }
+
+  /**
+   * @private
+   */
+  deletePreviousChapters_() {
+    this.chaptersEventManager_.removeAll();
+    shaka.util.Dom.removeAllChildren(this.chaptersContainer_);
+  }
 };
 
 
+/**
+ * @const {string}
+ * @private
+ */
+shaka.ui.SeekBar.Transparent_Image_ =
+    'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>';
+
+
 /**
  * @implements {shaka.extern.IUISeekBar.Factory}
  * @export

package/ui/text_selection.js

@@ -135,7 +135,8 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu {
         this.player.isTextTrackVisible(),
         this.currentSelection,
         this.localization,
-        this.controls.getConfig().trackLabelFormat);
+        this.controls.getConfig().trackLabelFormat,
+        this.controls.getConfig().showAudioChannelCountVariants);
 
     // Add the Off button
     const offButton = shaka.util.Dom.createButton();

package/ui/ui.js

@@ -229,6 +229,8 @@ shaka.ui.Overlay = class {
         buffered: 'rgba(255, 255, 255, 0.54)',
         played: 'rgb(255, 255, 255)',
         adBreaks: 'rgb(255, 204, 0)',
+        chapterMarks: 'rgb(27, 27, 27)',
+        chapterLabels: 'rgb(255, 255, 255)',
       },
       volumeBarColors: {
         base: 'rgba(255, 255, 255, 0.54)',
@@ -246,6 +248,7 @@ shaka.ui.Overlay = class {
       keyboardLargeSeekDistance: 60,
       fullScreenElement: this.videoContainer_,
       preferDocumentPictureInPicture: true,
+      showAudioChannelCountVariants: true,
     };
 
     // eslint-disable-next-line no-restricted-syntax
@@ -425,8 +428,7 @@ shaka.ui.Overlay = class {
    */
   static async setupUIandAutoLoad_(container, video, canvas) {
     // Create the UI
-    const player = new shaka.Player(
-        shaka.util.Dom.asHTMLMediaElement(video));
+    const player = new shaka.Player();
     const ui = new shaka.ui.Overlay(player,
         shaka.util.Dom.asHTMLElement(container),
         shaka.util.Dom.asHTMLMediaElement(video));
@@ -489,6 +491,8 @@ shaka.ui.Overlay = class {
         shaka.log.error('Error auto-loading asset', e);
       }
     }
+
+    await player.attach(shaka.util.Dom.asHTMLMediaElement(video));
   }
 };
 

package/lib/routing/node.js

@@ -1,23 +0,0 @@
-/*! @license
- * Shaka Player
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-goog.provide('shaka.routing.Node');
-
-
-/**
- * @typedef {{
- *   name: string
- * }}
- *
- * @description
- *   A node is the one of the two fundamental units used to build graphs. It
- *   represents the position within a graph.
- *
- * @property {string} name
- *   A human-readable name for this node. While this should not be used in
- *   production, the name helps identify nodes when debugging.
- */
-shaka.routing.Node;

package/lib/routing/payload.js

@@ -1,47 +0,0 @@
-/*! @license
- * Shaka Player
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-goog.provide('shaka.routing.Payload');
-
-
-/**
- * @typedef {{
- *   mediaElement: HTMLMediaElement,
- *   mimeType: ?string,
- *   startTime: ?number,
- *   startTimeOfLoad: number,
- *   uri: ?string,
- *   keepAdManager: boolean
- * }}
- *
- * @description
- *   The payload is the information to "deliver" to our destination. When
- *   moving from node-to-node, the payload may be modified.
- *
- * @property {HTMLMediaElement} mediaElement
- *   The media element that we are or will be using.
- *
- * @property {?string} mimeType
- *   The mime type of the content that we will parse. This will be used when
- *   picking which parser to use.
- *
- * @property {?number} startTime
- *   The time (in seconds) where playback should start. When |null| we will
- *   use the content's default start time (0 for VOD and live edge for LIVE).
- *
- * @property {number} startTimeOfLoad
- *    The time (in seconds) of when a load request is created. This is used to
- *    track the latency between when the call to |Player.load| and the start
- *    of playback. When the payload is not for a load request, this should be
- *    NaN.
- *
- * @property  {?string} uri
- *   The address of the content that will be loaded.
- *
- * @property  {boolean} keepAdManager
- *   Indicates if the adManager shouldn't destroyed.
- */
-shaka.routing.Payload;