shaka-player 3.2.1 → 3.3.1

package/ui/localization.js

@@ -130,28 +130,20 @@ shaka.ui.Localization = class {
         (locale) => !this.localizations_.has(locale));
 
     if (missing.length) {
-      /** @type {shaka.ui.Localization.UnknownLocalesEvent} */
-      const eMissing = {
-        'locales': missing,
-      };
-
       this.events_.dispatchEvent(new shaka.util.FakeEvent(
           Class.UNKNOWN_LOCALES,
-          eMissing));
+          (new Map()).set('locales', missing)));
     }
 
     const found = shaka.util.Iterables.filter(
         this.currentLocales_,
         (locale) => this.localizations_.has(locale));
 
-    /** @type {shaka.ui.Localization.LocaleChangedEvent} */
-    const eFound = {
-      'locales': found.length ? found : [this.fallbackLocale_],
-    };
-
+    const data = (new Map()).set(
+        'locales', found.length ? found : [this.fallbackLocale_]);
     this.events_.dispatchEvent(new shaka.util.FakeEvent(
         Class.LOCALE_CHANGED,
-        eFound));
+        data));
   }
 
   /**
@@ -253,14 +245,11 @@ shaka.ui.Localization = class {
     // number of locales. Since we don't know which ones we actually checked,
     // just tell them the preferred locale.
 
-    /** @type {shaka.ui.Localization.UnknownLocalizationEvent} */
-    const e = {
-      // Make a copy to avoid leaking references.
-      'locales': Array.from(this.currentLocales_),
-      'missing': id,
-    };
-
-    this.events_.dispatchEvent(new FakeEvent(Class.UNKNOWN_LOCALIZATION, e));
+    const data = new Map()
+        // Make a copy to avoid leaking references.
+        .set('locales', Array.from(this.currentLocales_))
+        .set('missing', id);
+    this.events_.dispatchEvent(new FakeEvent(Class.UNKNOWN_LOCALIZATION, data));
 
     return '';
   }
@@ -381,18 +370,16 @@ shaka.ui.Localization = class {
     }
 
     if (missing.size > 0) {
-      /** @type {shaka.ui.Localization.MissingLocalizationsEvent} */
-      const e = {
-        // Make a copy of the preferred locales to avoid leaking references.
-        'locales': Array.from(preferredLocales),
-        // Because most people like arrays more than sets, convert the set to
-        // an array.
-        'missing': Array.from(missing),
-      };
+      const data = new Map()
+          // Make a copy of the preferred locales to avoid leaking references.
+          .set('locales', Array.from(preferredLocales))
+          // Because more people like arrays more than sets, convert the set to
+          // an array.
+          .set('missing', Array.from(missing));
 
       this.events_.dispatchEvent(new shaka.util.FakeEvent(
           shaka.ui.Localization.MISSING_LOCALIZATIONS,
-          e));
+          data));
     }
   }
 
@@ -478,52 +465,42 @@ shaka.ui.Localization.LOCALE_CHANGED = 'locale-changed';
 shaka.ui.Localization.LOCALE_UPDATED = 'locale-updated';
 
 /**
- * @typedef {{
- *   'locales': !Array.<string>
- * }}
- *
+ * @event shaka.ui.Localization.UnknownLocalesEvent
+ * @property {string} type
+ *   'unknown-locales'
  * @property {!Array.<string>} locales
  *    The locales that the user wanted but could not be found.
  * @exportDoc
  */
-shaka.ui.Localization.UnknownLocalesEvent;
 
 /**
- * @typedef {{
- *   'locales': !Array.<string>,
- *   'missing': string
- * }}
- *
+ * @event shaka.ui.Localization.MissingLocalizationsEvent
+ * @property {string} type
+ *   'unknown-localization'
  * @property {!Array.<string>} locales
  *    The locales that the user wanted.
  * @property {string} missing
  *    The id of the unknown entry.
  * @exportDoc
  */
-shaka.ui.Localization.UnknownLocalizationEvent;
 
 /**
- * @typedef {{
- *   'locales': !Array.<string>,
- *   'missing': !Array.<string>
- * }}
- *
+ * @event shaka.ui.Localization.MissingLocalizationsEvent
+ * @property {string} type
+ *   'missing-localizations'
  * @property {string} locale
  *    The locale that the user wanted.
  * @property {!Array.<string>} missing
  *    The ids of the missing entries.
  * @exportDoc
  */
-shaka.ui.Localization.MissingLocalizationsEvent;
 
 /**
- * @typedef {{
- *   'locales': !Array.<string>
- * }}
- *
+ * @event shaka.ui.Localization.LocaleChangedEvent
+ * @property {string} type
+ *   'locale-changed'
  * @property {!Array.<string>} locales
  *    The new set of locales that user wanted,
  *    and that were successfully found.
  * @exportDoc
  */
-shaka.ui.Localization.LocaleChangedEvent;

package/ui/loop_button.js

@@ -7,6 +7,7 @@
 
 goog.provide('shaka.ui.LoopButton');
 
+goog.require('shaka.ui.ContextMenu');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -35,6 +36,7 @@ shaka.ui.LoopButton = class extends shaka.ui.Element {
     /** @private {!HTMLButtonElement} */
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('shaka-loop-button');
+    this.button_.classList.add('shaka-tooltip');
 
     /** @private {!HTMLElement} */
     this.icon_ = shaka.util.Dom.createHTMLElement('i');
@@ -171,3 +173,6 @@ shaka.ui.OverflowMenu.registerElement(
 
 shaka.ui.Controls.registerElement(
     'loop', new shaka.ui.LoopButton.Factory());
+
+shaka.ui.ContextMenu.registerElement(
+    'loop', new shaka.ui.LoopButton.Factory());

package/ui/mute_button.js

@@ -33,6 +33,7 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('shaka-mute-button');
     this.button_.classList.add('material-icons-round');
+    this.button_.classList.add('shaka-tooltip');
     this.parent.appendChild(this.button_);
     this.updateAriaLabel_();
     this.updateIcon_();
@@ -48,7 +49,7 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.button_, 'click', () => {
-      if (this.ad) {
+      if (this.ad && this.ad.isLinear()) {
         this.ad.setMuted(!this.ad.isMuted());
       } else {
         this.video.muted = !this.video.muted;

package/ui/overflow_menu.js

@@ -48,29 +48,6 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
 
     this.createChildren_();
 
-
-    const backToOverflowMenuButtons =
-        this.controls.getVideoContainer().getElementsByClassName(
-            'shaka-back-to-overflow-button');
-
-    for (const button of backToOverflowMenuButtons) {
-      this.eventManager.listen(button, 'click', () => {
-        // Hide the submenus, display the overflow menu
-        this.controls.hideSettingsMenus();
-        shaka.ui.Utils.setDisplay(this.overflowMenu_, true);
-
-        // If there are back to overflow menu buttons, there must be
-        // overflow menu buttons, but oh well
-        if (this.overflowMenu_.childNodes.length) {
-          /** @type {!HTMLElement} */ (this.overflowMenu_.childNodes[0])
-              .focus();
-        }
-
-        // Make sure controls are displayed
-        this.controls.computeOpacity();
-      });
-    }
-
     this.eventManager.listen(
         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
           this.updateAriaLabel_();
@@ -83,7 +60,9 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
 
     this.eventManager.listen(
         this.adManager, shaka.ads.AdManager.AD_STARTED, () => {
-          shaka.ui.Utils.setDisplay(this.overflowMenuButton_, false);
+          if (this.ad && this.ad.isLinear()) {
+            shaka.ui.Utils.setDisplay(this.overflowMenuButton_, false);
+          }
         });
 
     this.eventManager.listen(
@@ -112,7 +91,7 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
 
     this.updateAriaLabel_();
 
-    if (this.ad) {
+    if (this.ad && this.ad.isLinear()) {
       // There was already an ad.
       shaka.ui.Utils.setDisplay(this.overflowMenuButton_, false);
     }
@@ -163,6 +142,7 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
     this.overflowMenuButton_.classList.add('shaka-overflow-menu-button');
     this.overflowMenuButton_.classList.add('shaka-no-propagation');
     this.overflowMenuButton_.classList.add('material-icons-round');
+    this.overflowMenuButton_.classList.add('shaka-tooltip');
     this.overflowMenuButton_.textContent =
       shaka.ui.Enums.MaterialDesignIcons.OPEN_OVERFLOW;
     this.parent.appendChild(this.overflowMenuButton_);

package/ui/pip_button.js

@@ -7,6 +7,7 @@
 
 goog.provide('shaka.ui.PipButton');
 
+goog.require('shaka.ui.ContextMenu');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -39,6 +40,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
     /** @private {!HTMLButtonElement} */
     this.pipButton_ = shaka.util.Dom.createButton();
     this.pipButton_.classList.add('shaka-pip-button');
+    this.pipButton_.classList.add('shaka-tooltip');
 
     /** @private {!HTMLElement} */
     this.pipIcon_ = shaka.util.Dom.createHTMLElement('i');
@@ -130,9 +132,8 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
         await document.exitPictureInPicture();
       }
     } catch (error) {
-      this.controls.dispatchEvent(new shaka.util.FakeEvent('error', {
-        detail: error,
-      }));
+      this.controls.dispatchEvent(new shaka.util.FakeEvent(
+          'error', (new Map()).set('detail', error)));
     }
   }
 
@@ -238,3 +239,6 @@ shaka.ui.OverflowMenu.registerElement(
 
 shaka.ui.Controls.registerElement(
     'picture_in_picture', new shaka.ui.PipButton.Factory());
+
+shaka.ui.ContextMenu.registerElement(
+    'picture_in_picture', new shaka.ui.PipButton.Factory());

package/ui/play_button.js

@@ -73,7 +73,7 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
     });
 
     this.eventManager.listen(this.button, 'click', () => {
-      if (this.ad) {
+      if (this.ad && this.ad.isLinear()) {
         this.controls.playPauseAd();
       } else {
         this.controls.playPausePresentation();
@@ -92,7 +92,7 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
    * @protected
    */
   isPaused() {
-    if (this.ad) {
+    if (this.ad && this.ad.isLinear()) {
       return this.ad.isPaused();
     }
 

package/ui/playback_rate_selection.js

@@ -7,6 +7,7 @@
 
 goog.provide('shaka.ui.PlaybackRateSelection');
 
+goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
@@ -31,6 +32,7 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
 
     this.button.classList.add('shaka-playbackrate-button');
     this.menu.classList.add('shaka-playback-rates');
+    this.button.classList.add('shaka-tooltip-status');
 
     this.eventManager.listen(
         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
@@ -47,15 +49,8 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
     });
 
     /** @type {!Map.<string, number>} */
-    this.playbackRates_ = new Map([
-      ['0.5x', 0.5],
-      ['0.75x', 0.75],
-      ['1x', 1],
-      ['1.25x', 1.25],
-      ['1.5x', 1.5],
-      ['1.75x', 1.75],
-      ['2x', 2],
-    ]);
+    this.playbackRates_ = new Map(this.controls.getConfig().playbackRates
+        .map((rate) => [rate + 'x', rate]));
 
     // Set up all the strings in the user's preferred language.
     this.updateLocalizedStrings_();
@@ -109,6 +104,7 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
     // Set the label to display the current playback rate in the overflow menu,
     // in the format of '1x', '1.5x', etc.
     this.currentSelection.textContent = rate + 'x';
+    this.button.setAttribute('shaka-status', rate + 'x');
   }
 
   /** @private */
@@ -143,3 +139,6 @@ shaka.ui.PlaybackRateSelection.Factory = class {
 
 shaka.ui.OverflowMenu.registerElement(
     'playback_rate', new shaka.ui.PlaybackRateSelection.Factory());
+
+shaka.ui.Controls.registerElement(
+    'playback_rate', new shaka.ui.PlaybackRateSelection.Factory());

package/ui/resolution_selection.js

@@ -8,6 +8,7 @@
 goog.provide('shaka.ui.ResolutionSelection');
 
 goog.require('goog.asserts');
+goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
@@ -33,6 +34,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
     super(parent, controls, shaka.ui.Enums.MaterialDesignIcons.RESOLUTION);
 
     this.button.classList.add('shaka-resolution-button');
+    this.button.classList.add('shaka-tooltip-status');
     this.menu.classList.add('shaka-resolutions');
 
     this.eventManager.listen(
@@ -171,6 +173,8 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
           this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
     }
 
+    this.button.setAttribute('shaka-status', this.currentSelection.textContent);
+
     this.menu.appendChild(autoButton);
     shaka.ui.Utils.focusOnTheChosenItem(this.menu);
     this.controls.dispatchEvent(
@@ -227,3 +231,6 @@ shaka.ui.ResolutionSelection.Factory = class {
 
 shaka.ui.OverflowMenu.registerElement(
     'quality', new shaka.ui.ResolutionSelection.Factory());
+
+shaka.ui.Controls.registerElement(
+    'quality', new shaka.ui.ResolutionSelection.Factory());

package/ui/rewind_button.js

@@ -32,11 +32,17 @@ shaka.ui.RewindButton = class extends shaka.ui.Element {
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('material-icons-round');
     this.button_.classList.add('shaka-rewind-button');
+    this.button_.classList.add('shaka-tooltip-status');
+    this.button_.setAttribute('shaka-status',
+        this.localization.resolve(shaka.ui.Locales.Ids.OFF));
     this.button_.textContent =
       shaka.ui.Enums.MaterialDesignIcons.REWIND;
     this.parent.appendChild(this.button_);
     this.updateAriaLabel_();
 
+    /** @private {!Array.<number>} */
+    this.rewindRates_ = this.controls.getConfig().rewindRates;
+
     this.eventManager.listen(
         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
           this.updateAriaLabel_();
@@ -61,7 +67,7 @@ shaka.ui.RewindButton = class extends shaka.ui.Element {
   }
 
   /**
-   * Cycles trick play rate between -1, -2, -4, and -8.
+   * Cycles trick play rate between the selected rewind rates.
    * @private
    */
   rewind_() {
@@ -70,12 +76,15 @@ shaka.ui.RewindButton = class extends shaka.ui.Element {
     }
 
     const trickPlayRate = this.player.getPlaybackRate();
-    // Every time the button is clicked, the rate is multiplied by 2,
-    // unless the rate is at it's slowest (-8), in which case it is
-    // dropped back to 1.
-    const newRate = (trickPlayRate > 0 || trickPlayRate < -4) ?
-        -1 : trickPlayRate * 2;
+    const newRateIndex = this.rewindRates_.indexOf(trickPlayRate) + 1;
+
+    // When the button is clicked, the next rate in this.rewindRates_ is
+    // selected. If no more rates are available, the first one is set.
+    const newRate = (newRateIndex != this.rewindRates_.length) ?
+        this.rewindRates_[newRateIndex] : this.rewindRates_[0];
     this.player.trickPlay(newRate);
+
+    this.button_.setAttribute('shaka-status', newRate + 'x');
   }
 };
 

package/ui/seek_bar.js

@@ -95,7 +95,9 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
 
     this.eventManager.listen(
         this.adManager, shaka.ads.AdManager.AD_STARTED, () => {
-          shaka.ui.Utils.setDisplay(this.container, false);
+          if (!this.shouldBeDisplayed_()) {
+            shaka.ui.Utils.setDisplay(this.container, false);
+          }
         });
 
     this.eventManager.listen(
@@ -366,7 +368,7 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
       return false;
     }
 
-    return this.ad == null;
+    return this.ad == null || !this.ad.isLinear();
   }
 
   /** @private */

package/ui/settings_menu.js

@@ -33,6 +33,8 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
 
     this.addMenu_();
 
+    this.inOverflowMenu_();
+
     this.eventManager.listen(this.button, 'click', () => {
       this.onButtonClick_();
     });
@@ -46,6 +48,7 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
   addButton_(iconText) {
     /** @protected {!HTMLButtonElement} */
     this.button = shaka.util.Dom.createButton();
+    this.button.classList.add('shaka-overflow-button');
 
     /** @protected {!HTMLElement}*/
     this.icon = shaka.util.Dom.createHTMLElement('i');
@@ -55,6 +58,7 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
+    label.classList.add('shaka-overflow-menu-only');
 
     /** @protected {!HTMLElement}*/
     this.nameSpan = shaka.util.Dom.createHTMLElement('span');
@@ -83,10 +87,13 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
     this.backButton = shaka.util.Dom.createButton();
     this.backButton.classList.add('shaka-back-to-overflow-button');
     this.menu.appendChild(this.backButton);
+    this.eventManager.listen(this.backButton, 'click', () => {
+      this.controls.hideSettingsMenus();
+    });
 
     const backIcon = shaka.util.Dom.createHTMLElement('i');
     backIcon.classList.add('material-icons-round');
-    backIcon.textContent = shaka.ui.Enums.MaterialDesignIcons.BACK;
+    backIcon.textContent = shaka.ui.Enums.MaterialDesignIcons.CLOSE;
     this.backButton.appendChild(backIcon);
 
     /** @protected {!HTMLElement}*/
@@ -97,11 +104,36 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
     controlsContainer.appendChild(this.menu);
   }
 
+  /** @private */
+  inOverflowMenu_() {
+    // Initially, submenus are created with a "Close" option. When present
+    // inside of the overflow menu, that option must be replaced with a
+    // "Back" arrow that returns the user to the main menu.
+    if (this.parent.classList.contains('shaka-overflow-menu')) {
+      this.backButton.firstChild.textContent =
+            shaka.ui.Enums.MaterialDesignIcons.BACK;
+
+      this.eventManager.listen(this.backButton, 'click', () => {
+        shaka.ui.Utils.setDisplay(this.parent, true);
+
+        /** @type {!HTMLElement} */
+        (this.parent.childNodes[0]).focus();
+
+        // Make sure controls are displayed
+        this.controls.computeOpacity();
+      });
+    }
+  }
+
 
   /** @private */
   onButtonClick_() {
-    this.controls.dispatchEvent(new shaka.util.FakeEvent('submenuopen'));
-    shaka.ui.Utils.setDisplay(this.menu, true);
-    shaka.ui.Utils.focusOnTheChosenItem(this.menu);
+    if (this.menu.classList.contains('shaka-hidden')) {
+      this.controls.dispatchEvent(new shaka.util.FakeEvent('submenuopen'));
+      shaka.ui.Utils.setDisplay(this.menu, true);
+      shaka.ui.Utils.focusOnTheChosenItem(this.menu);
+    } else {
+      shaka.ui.Utils.setDisplay(this.menu, false);
+    }
   }
 };

package/ui/small_play_button.js

@@ -28,6 +28,7 @@ shaka.ui.SmallPlayButton = class extends shaka.ui.PlayButton {
 
     this.button.classList.add('shaka-small-play-button');
     this.button.classList.add('material-icons-round');
+    this.button.classList.add('shaka-tooltip');
 
     this.updateIcon();
     this.updateAriaLabel();