shaka-player 2.5.4 → 2.5.5

package/ui/less/overflow_menu.less

@@ -29,7 +29,7 @@
 
   /* Styles for the menu itself. */
   background: white;
-  box-shadow: 0 1px 9px 0 rgba(0,0,0,0.40);
+  box-shadow: 0 1px 9px 0 rgba(0, 0, 0, 0.4);
   border-radius: 2px;
   max-height: 250px;
   min-width: 180px;
@@ -64,20 +64,21 @@
     &:hover {
       background: rgb(224, 224, 224);
     }
+
     .shaka-keyboard-navigation &:focus {
       background: rgb(224, 224, 224);
     }
   }
 
-  /* These are the elements which contain the material design icons. */
-  /* TODO: Pull MD icon details out of JS. */
+  /* These are the elements which contain the material design icons.
+   * TODO: Pull MD icon details out of JS. */
   i {
     /* TODO(b/116651454): eliminate hard-coded offsets */
     padding-left: 10px;
   }
 
-  /* If the seekbar is missing, this is positioned lower. */
-  /* TODO: Solve with flex layout instead? */
+  /* If the seekbar is missing, this is positioned lower.
+   * TODO: Solve with flex layout instead? */
   &.shaka-low-position {
     /* TODO(b/116651454): eliminate hard-coded offsets */
     bottom: 15px;
@@ -93,6 +94,7 @@
 .shaka-overflow-menu span {
   text-align: left;
   position: relative;
+
   /* TODO(b/116651454): eliminate hard-coded offsets */
   left: 13px;
 }
@@ -101,6 +103,7 @@
  * right of MD icons. */
 .shaka-overflow-button-label {
   position: relative;
+
   /* This is a flex container, whose children flow vertically. */
   display: flex;
   flex-direction: column;
@@ -114,12 +117,10 @@
   color: rgba(0, 0, 0, 0.54);
 }
 
-/* These three submenus have somewhat different margins inside them. */
-/* TODO: This is all submenus, but not the top-level menu.  Is there a better
+/* These three submenus have somewhat different margins inside them.
+ * TODO: This is all submenus, but not the top-level menu.  Is there a better
  * way to express this? */
-.shaka-resolutions,
-.shaka-audio-languages,
-.shaka-text-languages {
+.shaka-resolutions, .shaka-audio-languages, .shaka-text-languages {
   span {
     /* TODO(b/116651454): eliminate hard-coded offsets */
     margin-left: 54px;

package/ui/less/range_elements.less

@@ -51,8 +51,10 @@
 
   /* Vertical margins to occupy the same space as the thumb. */
   margin: (@thumb-size - @track-height)/2 6px;
+
   /* Smaller height to contain the background for the virtual track. */
   height: @track-height;
+
   /* Rounded ends on the virtual track. */
   border-radius: @track-height;
 
@@ -123,6 +125,7 @@
   &::-webkit-slider-runnable-track {
     .track();
   }
+
   &::-webkit-slider-thumb {
     .thumb();
   }
@@ -131,6 +134,7 @@
   &::-moz-range-track {
     .track();
   }
+
   &::-moz-range-thumb {
     .thumb();
   }
@@ -139,6 +143,7 @@
   &::-ms-track {
     .track();
   }
+
   &::-ms-thumb {
     .thumb();
   }
@@ -152,6 +157,7 @@
   &::-ms-fill-lower {
     .hidden();
   }
+
   &::-ms-fill-upper {
     .hidden();
   }

package/ui/less/spinner.less

@@ -71,10 +71,12 @@
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
   }
+
   50% {
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -35px;
   }
+
   100% {
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;

package/ui/pip_button.js

@@ -100,7 +100,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
       this.onLeavePictureInPicture_();
     });
 
-    this.eventManager.listen(this.controls, 'caststatuschange', (e) => {
+    this.eventManager.listen(this.controls, 'caststatuschanged', (e) => {
       this.onCastStatusChange_(e);
     });
 

package/ui/{play_pause_button.js → play_button.js}

@@ -16,10 +16,9 @@
  */
 
 
-goog.provide('shaka.ui.PlayPauseButton');
+goog.provide('shaka.ui.PlayButton');
 
 goog.require('shaka.ui.Element');
-goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
 goog.require('shaka.util.Dom');
@@ -27,10 +26,9 @@ goog.require('shaka.util.Dom');
 
 /**
  * @extends {shaka.ui.Element}
- * @final
  * @export
  */
-shaka.ui.PlayPauseButton = class extends shaka.ui.Element {
+shaka.ui.PlayButton = class extends shaka.ui.Element {
   /**
    * @param {!HTMLElement} parent
    * @param {!shaka.ui.Controls} controls
@@ -38,37 +36,30 @@ shaka.ui.PlayPauseButton = class extends shaka.ui.Element {
   constructor(parent, controls) {
     super(parent, controls);
 
-    /** @private {!HTMLElement} */
-    this.button_ = shaka.util.Dom.createHTMLElement('button');
-    this.button_.classList.add('shaka-play-pause-button');
-    this.button_.classList.add('material-icons');
-    this.parent.appendChild(this.button_);
-
-    this.updateIcon_();
-    this.updateAriaLabel_();
+    /** @protected {!HTMLElement} */
+    this.button = shaka.util.Dom.createHTMLElement('button');
+    this.parent.appendChild(this.button);
 
     const LOCALE_UPDATED = shaka.ui.Localization.LOCALE_UPDATED;
     this.eventManager.listen(this.localization, LOCALE_UPDATED, () => {
-      this.updateAriaLabel_();
+      this.updateAriaLabel();
     });
 
     const LOCALE_CHANGED = shaka.ui.Localization.LOCALE_CHANGED;
     this.eventManager.listen(this.localization, LOCALE_CHANGED, () => {
-      this.updateAriaLabel_();
+      this.updateAriaLabel();
     });
 
     this.eventManager.listen(this.video, 'play', () => {
-      this.updateAriaLabel_();
-      this.updateIcon_();
+      this.updateAriaLabel();
     });
 
     this.eventManager.listen(this.video, 'pause', () => {
-      this.updateAriaLabel_();
-      this.updateIcon_();
+      this.updateAriaLabel();
     });
 
-    this.eventManager.listen(this.button_, 'click', () => {
-      if (this.isPaused_()) {
+    this.eventManager.listen(this.button, 'click', () => {
+      if (this.isPaused()) {
         this.video.play();
       } else {
         this.video.pause();
@@ -78,41 +69,20 @@ shaka.ui.PlayPauseButton = class extends shaka.ui.Element {
 
   /**
    * @return {boolean}
-   * @private
+   * @protected
    */
-  isPaused_() {
+  isPaused() {
     // The video element is in a paused state while seeking, but we don't count
     // that.
     return this.video.paused && !this.controls.isSeeking();
   }
 
-  /** @private */
-  updateAriaLabel_() {
+  /** @protected */
+  updateAriaLabel() {
     const LocIds = shaka.ui.Locales.Ids;
-    const label = this.isPaused_() ? LocIds.PLAY : LocIds.PAUSE;
+    const label = this.isPaused() ? LocIds.PLAY : LocIds.PAUSE;
 
-    this.button_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
+    this.button.setAttribute(shaka.ui.Constants.ARIA_LABEL,
         this.localization.resolve(label));
   }
-
-  /** @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.PlayPauseButton.Factory = class {
-  /** @override */
-  create(rootElement, controls) {
-    return new shaka.ui.PlayPauseButton(rootElement, controls);
-  }
 };
-
-shaka.ui.Controls.registerElement(
-    'play_pause', new shaka.ui.PlayPauseButton.Factory());

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;
 
@@ -197,9 +141,9 @@ 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
@@ -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

@@ -86,6 +86,7 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
    * @override
    */
   onChangeStart() {
+    this.controls.setSeeking(true);
     this.video.pause();
   }
 
@@ -126,7 +127,7 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
     // 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();
   }
 
@@ -161,9 +162,8 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
     } else {
       shaka.ui.Utils.setDisplay(this.container, true);
 
-      const gradient = ['to right'];
       if (bufferedLength == 0) {
-        gradient.push('#000 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);
@@ -180,21 +180,19 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
         const bufferEndFraction = (bufferEndDistance / seekRangeSize) || 0;
         const playheadFraction = (playheadDistance / seekRangeSize) || 0;
 
-        gradient.push(Constants.SEEK_BAR_BASE_COLOR + ' ' +
-                     (bufferStartFraction * 100) + '%');
-        gradient.push(Constants.SEEK_BAR_PLAYED_COLOR + ' ' +
-                     (bufferStartFraction * 100) + '%');
-        gradient.push(Constants.SEEK_BAR_PLAYED_COLOR + ' ' +
-                     (playheadFraction * 100) + '%');
-        gradient.push(Constants.SEEK_BAR_BUFFERED_COLOR + ' ' +
-                     (playheadFraction * 100) + '%');
-        gradient.push(Constants.SEEK_BAR_BUFFERED_COLOR + ' ' +
-                     (bufferEndFraction * 100) + '%');
-        gradient.push(Constants.SEEK_BAR_BASE_COLOR + ' ' +
-                     (bufferEndFraction * 100) + '%');
+        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(',') + ')';
       }
-      this.container.style.background =
-          'linear-gradient(' + gradient.join(',') + ')';
     }
   }
 

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);
+  }
+};