shaka-player 2.5.1 → 2.5.5

package/ui/resolution_selection.js

@@ -18,30 +18,29 @@
 
 goog.provide('shaka.ui.ResolutionSelection');
 
-goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
 goog.require('shaka.ui.OverflowMenu');
+goog.require('shaka.ui.SettingsMenu');
 goog.require('shaka.util.Dom');
 
 
 /**
- * @extends {shaka.ui.Element}
+ * @extends {shaka.ui.SettingsMenu}
  * @final
  * @export
  */
-shaka.ui.ResolutionSelection = class extends shaka.ui.Element {
+shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
   /**
    * @param {!HTMLElement} parent
    * @param {!shaka.ui.Controls} controls
    */
   constructor(parent, controls) {
-    super(parent, controls);
+    super(parent, controls, shaka.ui.Enums.MaterialDesignIcons.RESOLUTION);
 
-    this.addResolutionButton_();
-
-    this.addResolutionMenu_();
+    this.button.classList.add('shaka-resolution-button');
+    this.menu.classList.add('shaka-resolutions');
 
     this.eventManager.listen(
       this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
@@ -53,9 +52,6 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.Element {
         this.updateLocalizedStrings_();
       });
 
-    this.eventManager.listen(this.resolutionButton_, 'click', () => {
-          this.onResolutionClick_();
-      });
 
     this.eventManager.listen(this.player, 'variantchanged', () => {
         this.updateResolutionSelection_();
@@ -76,108 +72,56 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.Element {
   }
 
 
-  /**
-   * @private
-   */
-  addResolutionButton_() {
-    /** @private {!HTMLElement}*/
-    this.resolutionButton_ = shaka.util.Dom.createHTMLElement('button');
-
-    this.resolutionButton_.classList.add('shaka-resolution-button');
-
-    const icon = shaka.util.Dom.createHTMLElement('i');
-    icon.classList.add('material-icons');
-    icon.textContent = shaka.ui.Enums.MaterialDesignIcons.RESOLUTION;
-    this.resolutionButton_.appendChild(icon);
-
-    const label = shaka.util.Dom.createHTMLElement('label');
-    label.classList.add('shaka-overflow-button-label');
-
-    /** @private {!HTMLElement}*/
-    this.resolutionNameSpan_ = shaka.util.Dom.createHTMLElement('span');
-    label.appendChild(this.resolutionNameSpan_);
-
-    /** @private {!HTMLElement}*/
-    this.currentResolution_ = shaka.util.Dom.createHTMLElement('span');
-    this.currentResolution_.classList.add('shaka-current-selection-span');
-    label.appendChild(this.currentResolution_);
-    this.resolutionButton_.appendChild(label);
-
-    this.parent.appendChild(this.resolutionButton_);
-  }
-
-
-  /**
-   * @private
-   */
-   addResolutionMenu_() {
-    /** @private {!HTMLElement}*/
-    this.resolutionMenu_ = shaka.util.Dom.createHTMLElement('div');
-    this.resolutionMenu_.classList.add('shaka-resolutions');
-    this.resolutionMenu_.classList.add('shaka-no-propagation');
-    this.resolutionMenu_.classList.add('shaka-show-controls-on-mouse-over');
-    this.resolutionMenu_.classList.add('shaka-settings-menu');
-
-    /** @private {!HTMLElement}*/
-    this.backFromResolutionButton_ =
-      shaka.util.Dom.createHTMLElement('button');
-    this.backFromResolutionButton_.classList.add(
-      'shaka-back-to-overflow-button');
-    this.resolutionMenu_.appendChild(this.backFromResolutionButton_);
-
-    const backIcon = shaka.util.Dom.createHTMLElement('i');
-    backIcon.classList.add('material-icons');
-    backIcon.textContent = shaka.ui.Enums.MaterialDesignIcons.BACK;
-    this.backFromResolutionButton_.appendChild(backIcon);
-
-    /** @private {!HTMLElement}*/
-    this.backFromResolutionSpan_ = shaka.util.Dom.createHTMLElement('span');
-    this.backFromResolutionButton_.appendChild(this.backFromResolutionSpan_);
-
-    const controlsContainer = this.controls.getControlsContainer();
-    controlsContainer.appendChild(this.resolutionMenu_);
-  }
-
-
   /** @private */
   updateResolutionSelection_() {
+    /** @type {!Array.<shaka.extern.Track>} */
     let tracks = this.player.getVariantTracks();
 
     // Hide resolution menu and button for audio-only content and src= content
     // without resolution information.
+    // TODO: for audio-only content, this should be a bitrate selection menu
+    // instead.
     if (tracks.length && !tracks[0].height) {
-      shaka.ui.Utils.setDisplay(this.resolutionMenu_, false);
-      shaka.ui.Utils.setDisplay(this.resolutionButton_, false);
+      shaka.ui.Utils.setDisplay(this.menu, false);
+      shaka.ui.Utils.setDisplay(this.button, false);
       return;
     }
     // Otherwise, restore it.
-    shaka.ui.Utils.setDisplay(this.resolutionButton_, true);
+    shaka.ui.Utils.setDisplay(this.button, true);
 
-    tracks.sort(function(t1, t2) {
-      return t1.height - t2.height;
+    tracks.sort((t1, t2) => {
+      return t2.height - t1.height;
     });
-    tracks.reverse();
 
     // If there is a selected variant track, then we filter out any tracks in
     // a different language.  Then we use those remaining tracks to display the
     // available resolutions.
     const selectedTrack = tracks.find((track) => track.active);
     if (selectedTrack) {
-      const language = selectedTrack.language;
-      // Filter by current audio language.
-      tracks = tracks.filter((track) => track.language == language);
+      // Filter by current audio language and channel count.
+      tracks = tracks.filter(
+          (track) => track.language == selectedTrack.language &&
+              track.channelsCount == selectedTrack.channelsCount);
     }
 
+    // Remove duplicate entries with the same height.  This can happen if
+    // we have multiple resolutions of audio.  Pick an arbitrary one.
+    tracks = tracks.filter((track, idx) => {
+      // Keep the first one with the same height.
+      const otherIdx = tracks.findIndex((t) => t.height == track.height);
+      return otherIdx == idx;
+    });
+
     // Remove old shaka-resolutions
     // 1. Save the back to menu button
     const backButton = shaka.ui.Utils.getFirstDescendantWithClassName(
-        this.resolutionMenu_, 'shaka-back-to-overflow-button');
+        this.menu, 'shaka-back-to-overflow-button');
 
     // 2. Remove everything
-    shaka.ui.Utils.removeAllChildren(this.resolutionMenu_);
+    shaka.ui.Utils.removeAllChildren(this.menu);
 
     // 3. Add the backTo Menu button back
-    this.resolutionMenu_.appendChild(backButton);
+    this.menu.appendChild(backButton);
 
     const abrEnabled = this.player.getConfiguration().abr.enabled;
 
@@ -185,7 +129,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.Element {
     tracks.forEach((track) => {
       const button = shaka.util.Dom.createHTMLElement('button');
       button.classList.add('explicit-resolution');
-      button.addEventListener('click',
+      this.eventManager.listen(button, 'click',
           this.onTrackSelected_.bind(this, track));
 
       const span = shaka.util.Dom.createHTMLElement('span');
@@ -197,15 +141,15 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.Element {
         button.setAttribute('aria-selected', 'true');
         button.appendChild(shaka.ui.Utils.checkmarkIcon());
         span.classList.add('shaka-chosen-item');
-        this.currentResolution_.textContent = span.textContent;
+        this.currentSelection.textContent = span.textContent;
       }
-      this.resolutionMenu_.appendChild(button);
+      this.menu.appendChild(button);
     });
 
     // Add the Auto button
     const autoButton = shaka.util.Dom.createHTMLElement('button');
     autoButton.classList.add('shaka-enable-abr-button');
-    autoButton.addEventListener('click', function() {
+    this.eventManager.listen(autoButton, 'click', function() {
       const config = {abr: {enabled: true}};
       this.player.configure(config);
       this.updateResolutionSelection_();
@@ -225,24 +169,17 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.Element {
 
       this.abrOnSpan_.classList.add('shaka-chosen-item');
 
-      this.currentResolution_.textContent =
+      this.currentSelection.textContent =
           this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
     }
 
-    this.resolutionMenu_.appendChild(autoButton);
-    shaka.ui.Utils.focusOnTheChosenItem(this.resolutionMenu_);
+    this.menu.appendChild(autoButton);
+    shaka.ui.Utils.focusOnTheChosenItem(this.menu);
     this.controls.dispatchEvent(
         new shaka.util.FakeEvent('resolutionselectionupdated'));
   }
 
 
-  /** @private */
-  onResolutionClick_() {
-    this.controls.dispatchEvent(new shaka.util.FakeEvent('submenuopen'));
-    shaka.ui.Utils.setDisplay(this.resolutionMenu_, true);
-    shaka.ui.Utils.focusOnTheChosenItem(this.resolutionMenu_);
-  }
-
   /**
    * @param {!shaka.extern.Track} track
    * @private
@@ -251,8 +188,8 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.Element {
     // Disable abr manager before changing tracks.
     let config = {abr: {enabled: false}};
     this.player.configure(config);
-
-    this.player.selectVariantTrack(track, /* clearBuffer */ true);
+    const clearBuffer = this.controls.getConfig().clearBufferOnQualityChange;
+    this.player.selectVariantTrack(track, clearBuffer);
   }
 
 
@@ -262,19 +199,19 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.Element {
   updateLocalizedStrings_() {
     const LocIds = shaka.ui.Locales.Ids;
 
-    this.resolutionButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
+    this.button.setAttribute(shaka.ui.Constants.ARIA_LABEL,
         this.localization.resolve(LocIds.RESOLUTION));
-    this.backFromResolutionButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
+    this.backButton.setAttribute(shaka.ui.Constants.ARIA_LABEL,
         this.localization.resolve(LocIds.RESOLUTION));
-    this.backFromResolutionSpan_.textContent =
+    this.backSpan.textContent =
         this.localization.resolve(LocIds.RESOLUTION);
-    this.resolutionNameSpan_.textContent =
+    this.nameSpan.textContent =
         this.localization.resolve(LocIds.RESOLUTION);
     this.abrOnSpan_.textContent =
         this.localization.resolve(LocIds.AUTO_QUALITY);
 
     if (this.player.getConfiguration().abr.enabled) {
-      this.currentResolution_.textContent =
+      this.currentSelection.textContent =
           this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
     }
   }

package/ui/seek_bar.js

@@ -0,0 +1,204 @@
+/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+goog.provide('shaka.ui.SeekBar');
+
+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.Timer');
+
+
+/**
+ * @extends {shaka.ui.RangeElement}
+ * @final
+ * @export
+ */
+shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   */
+  constructor(parent, controls) {
+    super(parent, controls,
+        ['shaka-seek-bar-container'],
+        [
+          'shaka-seek-bar',
+          'shaka-no-propagation',
+          'shaka-show-controls-on-mouse-over',
+        ]);
+
+    /**
+     * This timer is used to introduce a delay between the user scrubbing across
+     * the seek bar and the seek being sent to the player.
+     *
+     * @private {shaka.util.Timer}
+     */
+    this.seekTimer_ = new shaka.util.Timer(() => {
+      this.video.currentTime = this.getValue();
+    });
+
+    this.eventManager.listen(this.localization,
+        shaka.ui.Localization.LOCALE_UPDATED,
+        () => this.updateAriaLabel_());
+
+    this.eventManager.listen(this.localization,
+        shaka.ui.Localization.LOCALE_CHANGED,
+        () => this.updateAriaLabel_());
+
+    // Initialize seek state and label.
+    this.setValue(this.video.currentTime);
+    this.update();
+    this.updateAriaLabel_();
+  }
+
+  /** @override */
+  async destroy() {
+    if (this.seekTimer_) {
+      this.seekTimer_.stop();
+      this.seekTimer_ = null;
+    }
+
+    await super.destroy();
+  }
+
+  /**
+   * Called by the base class when user interaction with the input element
+   * begins.
+   *
+   * @override
+   */
+  onChangeStart() {
+    this.controls.setSeeking(true);
+    this.video.pause();
+  }
+
+  /**
+   * Update the video element's state to match the input element's state.
+   * Called by the base class when the input element changes.
+   *
+   * @override
+   */
+  onChange() {
+    if (!this.video.duration) {
+      // Can't seek yet.  Ignore.
+      return;
+    }
+
+    // Update the UI right away.
+    this.update();
+
+    // We want to wait until the user has stopped moving the seek bar for a
+    // little bit to reduce the number of times we ask the player to seek.
+    //
+    // To do this, we will start a timer that will fire in a little bit, but if
+    // we see another seek bar change, we will cancel that timer and re-start
+    // it.
+    //
+    // Calling |start| on an already pending timer will cancel the old request
+    // and start the new one.
+    this.seekTimer_.tickAfter(/* seconds= */ 0.125);
+  }
+
+  /**
+   * Called by the base class when user interaction with the input element
+   * ends.
+   *
+   * @override
+   */
+  onChangeEnd() {
+    // They just let go of the seek bar, so cancel the timer and manually
+    // call the event so that we can respond immediately.
+    this.seekTimer_.tickNow();
+    this.controls.setSeeking(false);
+    this.video.play();
+  }
+
+  /** @return {boolean} */
+  isShowing() {
+    // It is showing by default, so it is hidden if shaka-hidden is in the list.
+    return !this.container.classList.contains('shaka-hidden');
+  }
+
+  /**
+   * Called by Controls on a timer to update the state of the seek bar.
+   * Also called internally when the user interacts with the input element.
+   */
+  update() {
+    const Constants = shaka.ui.Constants;
+
+    const currentTime = this.getValue();
+    const bufferedLength = this.video.buffered.length;
+    const bufferedStart = bufferedLength ? this.video.buffered.start(0) : 0;
+    const bufferedEnd =
+        bufferedLength ? this.video.buffered.end(bufferedLength - 1) : 0;
+
+    const seekRange = this.player.seekRange();
+    const seekRangeSize = seekRange.end - seekRange.start;
+
+    this.setRange(seekRange.start, seekRange.end);
+
+    // Hide seekbar if the seek window is very small.
+    if (this.player.isLive() &&
+        seekRangeSize < Constants.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR) {
+      shaka.ui.Utils.setDisplay(this.container, false);
+    } else {
+      shaka.ui.Utils.setDisplay(this.container, true);
+
+      if (bufferedLength == 0) {
+        this.container.style.background = Constants.SEEK_BAR_BASE_COLOR;
+      } else {
+        const clampedBufferStart = Math.max(bufferedStart, seekRange.start);
+        const clampedBufferEnd = Math.min(bufferedEnd, seekRange.end);
+        const clampedCurrentTime = Math.min(
+            Math.max(currentTime, seekRange.start),
+            seekRange.end);
+
+        const bufferStartDistance = clampedBufferStart - seekRange.start;
+        const bufferEndDistance = clampedBufferEnd - seekRange.start;
+        const playheadDistance = clampedCurrentTime - seekRange.start;
+
+        // NOTE: the fallback to zero eliminates NaN.
+        const bufferStartFraction = (bufferStartDistance / seekRangeSize) || 0;
+        const bufferEndFraction = (bufferEndDistance / seekRangeSize) || 0;
+        const playheadFraction = (playheadDistance / seekRangeSize) || 0;
+
+        const makeColor = (color, fract) => color + ' ' + (fract * 100) + '%';
+        const gradient = [
+          'to right',
+          makeColor(Constants.SEEK_BAR_BASE_COLOR, bufferStartFraction),
+          makeColor(Constants.SEEK_BAR_PLAYED_COLOR, bufferStartFraction),
+          makeColor(Constants.SEEK_BAR_PLAYED_COLOR, playheadFraction),
+          makeColor(Constants.SEEK_BAR_BUFFERED_COLOR, playheadFraction),
+          makeColor(Constants.SEEK_BAR_BUFFERED_COLOR, bufferEndFraction),
+          makeColor(Constants.SEEK_BAR_BASE_COLOR, bufferEndFraction),
+        ];
+        this.container.style.background =
+            'linear-gradient(' + gradient.join(',') + ')';
+      }
+    }
+  }
+
+  /** @private */
+  updateAriaLabel_() {
+    this.bar.setAttribute(shaka.ui.Constants.ARIA_LABEL,
+        this.localization.resolve(shaka.ui.Locales.Ids.SEEK));
+  }
+};

package/ui/settings_menu.js

@@ -0,0 +1,113 @@
+/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+goog.provide('shaka.ui.SettingsMenu');
+
+goog.require('shaka.ui.Element');
+goog.require('shaka.ui.Enums');
+goog.require('shaka.util.Dom');
+
+
+/**
+ * @extends {shaka.ui.Element}
+ * @export
+ */
+shaka.ui.SettingsMenu = class extends shaka.ui.Element {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   * @param {string} iconText
+   */
+  constructor(parent, controls, iconText) {
+    super(parent, controls);
+
+    this.addButton_(iconText);
+
+    this.addMenu_();
+
+    this.eventManager.listen(this.button, 'click', () => {
+      this.onButtonClick_();
+    });
+  }
+
+
+  /**
+   * @param {string} iconText
+   * @private
+   */
+  addButton_(iconText) {
+    /** @protected {!HTMLElement}*/
+    this.button = shaka.util.Dom.createHTMLElement('button');
+
+    /** @protected {!HTMLElement}*/
+    this.icon = shaka.util.Dom.createHTMLElement('i');
+    this.icon.classList.add('material-icons');
+    this.icon.textContent = iconText;
+    this.button.appendChild(this.icon);
+
+    const label = shaka.util.Dom.createHTMLElement('label');
+    label.classList.add('shaka-overflow-button-label');
+
+    /** @protected {!HTMLElement}*/
+    this.nameSpan = shaka.util.Dom.createHTMLElement('span');
+    label.appendChild(this.nameSpan);
+
+    /** @protected {!HTMLElement}*/
+    this.currentSelection = shaka.util.Dom.createHTMLElement('span');
+    this.currentSelection.classList.add('shaka-current-selection-span');
+    label.appendChild(this.currentSelection);
+    this.button.appendChild(label);
+
+    this.parent.appendChild(this.button);
+  }
+
+
+  /** @private */
+  addMenu_() {
+    /** @protected {!HTMLElement}*/
+    this.menu = shaka.util.Dom.createHTMLElement('div');
+    this.menu.classList.add('shaka-no-propagation');
+    this.menu.classList.add('shaka-show-controls-on-mouse-over');
+    this.menu.classList.add('shaka-settings-menu');
+
+    /** @protected {!HTMLElement}*/
+    this.backButton = shaka.util.Dom.createHTMLElement('button');
+    this.backButton.classList.add('shaka-back-to-overflow-button');
+    this.menu.appendChild(this.backButton);
+
+    const backIcon = shaka.util.Dom.createHTMLElement('i');
+    backIcon.classList.add('material-icons');
+    backIcon.textContent = shaka.ui.Enums.MaterialDesignIcons.BACK;
+    this.backButton.appendChild(backIcon);
+
+    /** @protected {!HTMLElement}*/
+    this.backSpan = shaka.util.Dom.createHTMLElement('span');
+    this.backButton.appendChild(this.backSpan);
+
+    const controlsContainer = this.controls.getControlsContainer();
+    controlsContainer.appendChild(this.menu);
+  }
+
+
+  /** @private */
+  onButtonClick_() {
+    this.controls.dispatchEvent(new shaka.util.FakeEvent('submenuopen'));
+    shaka.ui.Utils.setDisplay(this.menu, true);
+    shaka.ui.Utils.focusOnTheChosenItem(this.menu);
+  }
+};

package/ui/small_play_button.js

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+goog.provide('shaka.ui.SmallPlayButton');
+
+goog.require('shaka.ui.PlayButton');
+
+
+/**
+ * @extends {shaka.ui.PlayButton}
+ * @final
+ * @export
+ */
+shaka.ui.SmallPlayButton = class extends shaka.ui.PlayButton {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   */
+  constructor(parent, controls) {
+    super(parent, controls);
+
+    this.button.classList.add('shaka-small-play-button');
+    this.button.classList.add('material-icons');
+
+    this.updateIcon_();
+    this.updateAriaLabel();
+
+    this.eventManager.listen(this.video, 'play', () => {
+      this.updateIcon_();
+    });
+
+    this.eventManager.listen(this.video, 'pause', () => {
+      this.updateIcon_();
+    });
+  }
+
+
+  /** @private */
+  updateIcon_() {
+    const Icons = shaka.ui.Enums.MaterialDesignIcons;
+    this.button.textContent = this.isPaused() ? Icons.PLAY : Icons.PAUSE;
+  }
+};
+
+
+/**
+ * @implements {shaka.extern.IUIElement.Factory}
+ * @final
+ */
+shaka.ui.SmallPlayButton.Factory = class {
+  /** @override */
+  create(rootElement, controls) {
+    return new shaka.ui.SmallPlayButton(rootElement, controls);
+  }
+};
+
+shaka.ui.Controls.registerElement(
+    'play_pause', new shaka.ui.SmallPlayButton.Factory());