shaka-player 4.9.13 → 4.10.1

package/ui/seek_bar.js

@@ -7,7 +7,7 @@
 
 goog.provide('shaka.ui.SeekBar');
 
-goog.require('shaka.ads.AdManager');
+goog.require('shaka.ads.Utils');
 goog.require('shaka.net.NetworkingEngine');
 goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Locales');
@@ -113,6 +113,10 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
     this.thumbnailContainer_.appendChild(this.thumbnailTime_);
     this.container.appendChild(this.thumbnailContainer_);
 
+    this.timeContainer_ = shaka.util.Dom.createHTMLElement('div');
+    this.timeContainer_.id = 'shaka-player-ui-time-container';
+    this.container.appendChild(this.timeContainer_);
+
     /**
      * @private {?shaka.extern.Thumbnail}
      */
@@ -151,21 +155,21 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
         () => this.updateAriaLabel_());
 
     this.eventManager.listen(
-        this.adManager, shaka.ads.AdManager.AD_STARTED, () => {
+        this.adManager, shaka.ads.Utils.AD_STARTED, () => {
           if (!this.shouldBeDisplayed_()) {
             shaka.ui.Utils.setDisplay(this.container, false);
           }
         });
 
     this.eventManager.listen(
-        this.adManager, shaka.ads.AdManager.AD_STOPPED, () => {
+        this.adManager, shaka.ads.Utils.AD_STOPPED, () => {
           if (this.shouldBeDisplayed_()) {
             shaka.ui.Utils.setDisplay(this.container, true);
           }
         });
 
     this.eventManager.listen(
-        this.adManager, shaka.ads.AdManager.CUEPOINTS_CHANGED, (e) => {
+        this.adManager, shaka.ads.Utils.CUEPOINTS_CHANGED, (e) => {
           this.adCuePoints_ = (e)['cuepoints'];
           this.onAdCuePointsChanged_();
         });
@@ -180,13 +184,10 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
           }
           this.lastThumbnail_ = null;
           this.hideThumbnail_();
+          this.hideTime_();
         });
 
     this.eventManager.listen(this.bar, 'mousemove', (event) => {
-      if (!this.player.getImageTracks().length) {
-        this.hideThumbnail_();
-        return;
-      }
       const rect = this.bar.getBoundingClientRect();
       const min = parseFloat(this.bar.min);
       const max = parseFloat(this.bar.max);
@@ -196,11 +197,17 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
       const scale = (max - min) / rect.width;
       // Mouse position in units, which may be outside the allowed range.
       const value = Math.round(min + scale * mousePosition);
-      // Show Thumbnail
+      if (!this.player.getImageTracks().length) {
+        this.hideThumbnail_();
+        this.showTime_(mousePosition, value);
+        return;
+      }
+      this.hideTime_();
       this.showThumbnail_(mousePosition, value);
     });
 
     this.eventManager.listen(this.container, 'mouseleave', () => {
+      this.hideTime_();
       this.hideThumbnailTimer_.stop();
       this.hideThumbnailTimer_.tickAfter(/* seconds= */ 0.25);
     });
@@ -375,13 +382,14 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
   markAdBreaks_() {
     if (!this.adCuePoints_.length) {
       this.adMarkerContainer_.style.background = 'transparent';
+      this.adBreaksTimer_.stop();
       return;
     }
 
     const seekRange = this.player.seekRange();
     const seekRangeSize = seekRange.end - seekRange.start;
     const gradient = ['to right'];
-    const pointsAsFractions = [];
+    let pointsAsFractions = [];
     const adBreakColor = this.config_.seekBarColors.adBreaks;
     let postRollAd = false;
     for (const point of this.adCuePoints_) {
@@ -413,6 +421,10 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
       }
     }
 
+    pointsAsFractions = pointsAsFractions.sort((a, b) => {
+      return a.start - b.start;
+    });
+
     for (const point of pointsAsFractions) {
       gradient.push(this.makeColor_('transparent', point.start));
       gradient.push(this.makeColor_(adBreakColor, point.start));
@@ -445,16 +457,24 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
    */
   onAdCuePointsChanged_() {
     this.markAdBreaks_();
-    const seekRange = this.player.seekRange();
-    const seekRangeSize = seekRange.end - seekRange.start;
-    const minSeekBarWindow = shaka.ui.Constants.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR;
-    // Seek range keeps changing for live content and some of the known
-    // ad breaks might not be in the seek range now, but get into
-    // it later.
-    // If we have a LIVE seekable content, keep checking for ad breaks
-    // every second.
-    if (this.player.isLive() && seekRangeSize > minSeekBarWindow) {
-      this.adBreaksTimer_.tickEvery(1);
+    const action = () => {
+      const seekRange = this.player.seekRange();
+      const seekRangeSize = seekRange.end - seekRange.start;
+      const minSeekBarWindow =
+          shaka.ui.Constants.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR;
+      // Seek range keeps changing for live content and some of the known
+      // ad breaks might not be in the seek range now, but get into
+      // it later.
+      // If we have a LIVE seekable content, keep checking for ad breaks
+      // every second.
+      if (this.player.isLive() && seekRangeSize > minSeekBarWindow) {
+        this.adBreaksTimer_.tickEvery(/* seconds= */ 0.25);
+      }
+    };
+    if (this.player.isFullyLoaded()) {
+      action();
+    } else {
+      this.eventManager.listenOnce(this.player, 'loaded', action);
     }
   }
 
@@ -482,6 +502,33 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
     this.bar.ariaLabel = this.localization.resolve(shaka.ui.Locales.Ids.SEEK);
   }
 
+  /** @private */
+  showTime_(pixelPosition, value) {
+    const offsetTop = -10;
+    const width = this.timeContainer_.clientWidth;
+    const height = 20;
+    this.timeContainer_.style.width = 'auto';
+    this.timeContainer_.style.height = height + 'px';
+    this.timeContainer_.style.top = -(height - offsetTop) + 'px';
+    const leftPosition = Math.min(this.bar.offsetWidth - width,
+        Math.max(0, pixelPosition - (width / 2)));
+    this.timeContainer_.style.left = leftPosition + 'px';
+    this.timeContainer_.style.visibility = 'visible';
+    if (this.player.isLive()) {
+      const seekRange = this.player.seekRange();
+      const totalSeconds = seekRange.end - value;
+      if (totalSeconds < 1) {
+        this.timeContainer_.textContent =
+            this.localization.resolve(shaka.ui.Locales.Ids.LIVE);
+      } else {
+        this.timeContainer_.textContent =
+            '-' + this.timeFormatter_(totalSeconds);
+      }
+    } else {
+      this.timeContainer_.textContent = this.timeFormatter_(value);
+    }
+  }
+
 
   /**
    * @private
@@ -657,6 +704,14 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
   }
 
 
+  /**
+   * @private
+   */
+  hideTime_() {
+    this.timeContainer_.style.visibility = 'hidden';
+  }
+
+
   /**
    * @param {number} totalSeconds
    * @private

package/ui/skip_ad_button.js

@@ -8,7 +8,7 @@
 goog.provide('shaka.ui.SkipAdButton');
 
 goog.require('goog.asserts');
-goog.require('shaka.ads.AdManager');
+goog.require('shaka.ads.Utils');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
@@ -74,17 +74,17 @@ shaka.ui.SkipAdButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(
-        this.adManager, shaka.ads.AdManager.AD_STARTED, () => {
+        this.adManager, shaka.ads.Utils.AD_STARTED, () => {
           this.onAdStarted_();
         });
 
     this.eventManager.listen(
-        this.adManager, shaka.ads.AdManager.AD_SKIP_STATE_CHANGED, () => {
+        this.adManager, shaka.ads.Utils.AD_SKIP_STATE_CHANGED, () => {
           this.onSkipStateChanged_();
         });
 
     this.eventManager.listen(
-        this.adManager, shaka.ads.AdManager.AD_STOPPED, () => {
+        this.adManager, shaka.ads.Utils.AD_STOPPED, () => {
           this.reset_();
         });
 

package/ui/statistics_button.js

@@ -117,7 +117,15 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element {
       return this.currentStats_[name] + ' (stalls)';
     };
 
-    const parseBytesDownloaded = (name) => {
+    const parseErrors = (name) => {
+      return this.currentStats_[name] + ' (errors)';
+    };
+
+    const parsePeriods = (name) => {
+      return this.currentStats_[name] + ' (periods)';
+    };
+
+    const parseBytes = (name) => {
       const bytes = parseInt(this.currentStats_[name], 10);
       if (bytes > 1e6) {
         return (bytes / 1e6).toFixed(2) + 'MB';
@@ -149,7 +157,11 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element {
       'droppedFrames': parseFrames,
       'stallsDetected': parseStalls,
       'gapsJumped': parseGaps,
-      'bytesDownloaded': parseBytesDownloaded,
+      'manifestSizeBytes': parseBytes,
+      'bytesDownloaded': parseBytes,
+      'nonFatalErrorCount': parseErrors,
+      'manifestPeriodCount': parsePeriods,
+      'manifestGapCount': parseGaps,
     };
 
     /** @private {shaka.util.Timer} */

package/ui/ui.js

@@ -192,6 +192,7 @@ shaka.ui.Overlay = class {
         'playback_rate',
         'recenter_vr',
         'toggle_stereoscopic',
+        'save_video_frame',
       ],
       statisticsList: [
         'width',
@@ -211,12 +212,26 @@ shaka.ui.Overlay = class {
         'pauseTime',
         'playTime',
         'completionPercent',
+        'manifestSizeBytes',
         'bytesDownloaded',
+        'nonFatalErrorCount',
+        'manifestPeriodCount',
+        'manifestGapCount',
+      ],
+      adStatisticsList: [
+        'loadTimes',
+        'averageLoadTime',
+        'started',
+        'playedCompletely',
+        'skipped',
+        'errors',
       ],
       contextMenuElements: [
         'loop',
         'picture_in_picture',
+        'save_video_frame',
         'statistics',
+        'ad_statistics',
       ],
       playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
       fastForwardRates: [2, 4, 8, 1],

package/ui/volume_bar.js

@@ -8,7 +8,7 @@
 goog.provide('shaka.ui.VolumeBar');
 
 goog.require('goog.asserts');
-goog.require('shaka.ads.AdManager');
+goog.require('shaka.ads.Utils');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
@@ -41,15 +41,15 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
         () => this.onPresentationVolumeChange_());
 
     this.eventManager.listen(this.adManager,
-        shaka.ads.AdManager.AD_VOLUME_CHANGED,
+        shaka.ads.Utils.AD_VOLUME_CHANGED,
         () => this.onAdVolumeChange_());
 
     this.eventManager.listen(this.adManager,
-        shaka.ads.AdManager.AD_MUTED,
+        shaka.ads.Utils.AD_MUTED,
         () => this.onAdVolumeChange_());
 
     this.eventManager.listen(this.adManager,
-        shaka.ads.AdManager.AD_STOPPED,
+        shaka.ads.Utils.AD_STOPPED,
         () => this.onPresentationVolumeChange_());
 
     this.eventManager.listen(this.localization,