shaka-player 3.2.2 → 3.3.2

package/ui/less/overflow_menu.less

@@ -141,13 +141,3 @@
   /* TODO(b/116651454): eliminate hard-coded offsets */
   left: 17px;
 }
-
-/* The captions button, when captions are on. */
-.shaka-captions-on {
-  color: black;
-}
-
-/* The captions button, when captions are off. */
-.shaka-captions-off {
-  color: grey;
-}

package/ui/less/tooltip.less

@@ -0,0 +1,97 @@
+/*!
+ * @license
+ * The tooltip is based on https://github.com/felipefialho/css-components/
+ * Local modifications have been performed.
+ *
+ * Copyright (c) 2017 Felipe Fialho
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+@material-icons-width: 32px;
+
+.translateX(@percent) {
+  -webkit-transform: translateX(percentage(@percent));
+  -moz-transform: translateX(percentage(@percent));
+  -ms-transform: translateX(percentage(@percent));
+  -o-transform: translateX(percentage(@percent));
+  transform: translateX(percentage(@percent));
+}
+
+/* .shaka-tooltips-on enables the tooltips and is only added to the
+ * control panel when the 'enableTooltips' option is set to true */
+.shaka-tooltips-on {
+  overflow: visible;
+
+  & > [class*="shaka-tooltip"] {
+    position: relative;
+
+    /* The :after pseudo-element contains the tooltip */
+    &:hover:after, &:focus-visible:after, &:active:after {
+      content: attr(aria-label);
+
+      /* Override .material-icons-round text styling */
+      font-family: Roboto-Regular, Roboto, sans-serif;
+      line-height: @material-icons-width / 2;
+      white-space: nowrap;
+      font-size: 13px;
+
+      /* Styling */
+      background: rgba(35, 35, 35, 0.9);
+      color: white;
+      border-radius: 3px;
+      padding: 5px 10px;
+
+      /* Positioning */
+      position: absolute;
+      bottom: @material-icons-width + 5px;
+
+      /* Left attribute is set to half of the width of the parent button */
+      left: @material-icons-width / 2;
+
+      /* The tooltip is also translated 50% to appear centered */
+      .translateX(-0.5);
+    }
+  }
+
+  /* Adds an additional attribute for the status in .shaka-tooltip-status */
+  & > .shaka-tooltip-status {
+    &:hover:after, &:focus-visible:after, &:active:after {
+      content: attr(aria-label) " (" attr(shaka-status) ")";
+    }
+  }
+
+  /* The first tooltip of the panel is not centered on top of the button
+   * but rather aligned with the left border of the control panel */
+  button:first-child {
+    &:hover:after, &:focus-visible:after, &:active:after {
+      left: 0;
+      .translateX(0);
+    }
+  }
+
+  /* The last tooltip of the panel is not centered on top of the button
+   * but rather aligned with the right border of the control panel */
+  button:last-child {
+    &:hover:after, &:focus-visible:after,&:active:after {
+      left: @material-icons-width;
+      .translateX(-1);
+    }
+  }
+}

package/ui/locales/en.json

@@ -33,6 +33,7 @@
   "SEEK": "Seek",
   "SKIP_AD": "Skip Ad",
   "SKIP_TO_LIVE": "Skip ahead to live",
+  "STATISTICS": "Statistics",
   "SUBTITLE_FORCED": "Forced",
   "UNDETERMINED_LANGUAGE": "Undetermined",
   "UNMUTE": "Unmute",

package/ui/locales/source.json

@@ -138,6 +138,10 @@
     "description": "Label for a button used to skip ahead to the live broadcast.",
     "message": "Skip ahead to live"
   },
+  "STATISTICS": {
+    "description": "Label for a button that displays statistics of the video.",
+    "message": "Statistics"
+  },
   "SUBTITLE_FORCED": {
     "description": "Label used to identify a subtitle track that is forced to be shown.",
     "message": "Forced"

package/ui/localization.js

@@ -23,17 +23,18 @@ goog.require('shaka.util.LanguageUtils');
  * If a string is not available, it will return the localized
  * form in the closest related locale.
  *
- * @implements {EventTarget}
  * @final
  * @export
  */
-shaka.ui.Localization = class {
+shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
   /**
    * @param {string} fallbackLocale
    *    The fallback locale that should be used. It will be assumed that this
    *    locale should have entries for just about every request.
    */
   constructor(fallbackLocale) {
+    super();
+
     /** @private {string} */
     this.fallbackLocale_ = shaka.util.LanguageUtils.normalize(fallbackLocale);
 
@@ -62,41 +63,16 @@ shaka.ui.Localization = class {
      * @private {!Map.<string, !Map.<string, string>>}
      */
     this.localizations_ = new Map();
-
-    /**
-     * The event target that we will wrap so that we can fire events
-     * without having to manage the listeners directly.
-     *
-     * @private {!EventTarget}
-     */
-    this.events_ = new shaka.util.FakeEventTarget();
-  }
-
-  /**
-   * @override
-   * @export
-   */
-  addEventListener(type, listener, options) {
-    this.events_.addEventListener(type, listener, options);
-  }
-
-  /**
-   * @override
-   * @export
-   */
-  removeEventListener(type, listener, options) {
-    // Apparently Closure says we can be passed a null |option|, but we can't
-    // pass a null option, so if we get have a null-like |option|, force it to
-    // be undefined.
-    this.events_.removeEventListener(type, listener, options || undefined);
   }
 
   /**
    * @override
    * @export
    */
-  dispatchEvent(event) {
-    return this.events_.dispatchEvent(event);
+  release() {
+    // Placeholder so that readers know this implements IReleasable (via
+    // FakeEventTarget)
+    super.release();
   }
 
   /**
@@ -130,7 +106,7 @@ shaka.ui.Localization = class {
         (locale) => !this.localizations_.has(locale));
 
     if (missing.length) {
-      this.events_.dispatchEvent(new shaka.util.FakeEvent(
+      this.dispatchEvent(new shaka.util.FakeEvent(
           Class.UNKNOWN_LOCALES,
           (new Map()).set('locales', missing)));
     }
@@ -141,7 +117,7 @@ shaka.ui.Localization = class {
 
     const data = (new Map()).set(
         'locales', found.length ? found : [this.fallbackLocale_]);
-    this.events_.dispatchEvent(new shaka.util.FakeEvent(
+    this.dispatchEvent(new shaka.util.FakeEvent(
         Class.LOCALE_CHANGED,
         data));
   }
@@ -193,7 +169,7 @@ shaka.ui.Localization = class {
     // data from.
     this.updateCurrentMap_();
 
-    this.events_.dispatchEvent(new FakeEvent(Class.LOCALE_UPDATED));
+    this.dispatchEvent(new FakeEvent(Class.LOCALE_UPDATED));
 
     return this;
   }
@@ -249,7 +225,7 @@ shaka.ui.Localization = class {
         // 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));
+    this.dispatchEvent(new FakeEvent(Class.UNKNOWN_LOCALIZATION, data));
 
     return '';
   }
@@ -377,7 +353,7 @@ shaka.ui.Localization = class {
           // an array.
           .set('missing', Array.from(missing));
 
-      this.events_.dispatchEvent(new shaka.util.FakeEvent(
+      this.dispatchEvent(new shaka.util.FakeEvent(
           shaka.ui.Localization.MISSING_LOCALIZATIONS,
           data));
     }

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');
@@ -237,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();