shaka-player 3.2.2 → 3.3.2

package/test/util/stream_utils_unit.js

@@ -16,14 +16,14 @@ describe('StreamUtils', () => {
   /** @type {!jasmine.Spy} */
   let decodingInfoSpy;
 
-  const originalDecodingInfo = window.shakaMediaCapabilities.decodingInfo;
+  const originalDecodingInfo = navigator.mediaCapabilities.decodingInfo;
 
   beforeEach(() => {
     decodingInfoSpy = jasmine.createSpy('decodingInfo');
   });
 
   afterEach(() => {
-    window.shakaMediaCapabilities.decodingInfo = originalDecodingInfo;
+    navigator.mediaCapabilities.decodingInfo = originalDecodingInfo;
   });
 
   describe('filterStreamsByLanguageAndRole', () => {
@@ -511,7 +511,7 @@ describe('StreamUtils', () => {
     });
 
     it('handles decodingInfo exception', async () => {
-      window.shakaMediaCapabilities.decodingInfo =
+      navigator.mediaCapabilities.decodingInfo =
           shaka.test.Util.spyFunc(decodingInfoSpy);
       // If decodingInfo() fails, setDecodingInfo should finish without throwing
       // an exception, and the variant should have no decodingInfo result.
@@ -539,38 +539,44 @@ describe('StreamUtils', () => {
     });
 
     it('includes transferFunction in config when hdr', async () => {
-      window.shakaMediaCapabilities.decodingInfo =
-          shaka.test.Util.spyFunc(decodingInfoSpy);
+      const originalDecodingInfo = navigator.mediaCapabilities.decodingInfo;
 
-      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
-        manifest.addVariant(0, (variant) => {
-          variant.addVideo(0, (stream) => {
-            stream.mime('video/mp4', 'avc1.640028');
-            stream.hdr = 'SDR';
+      try {
+        navigator.mediaCapabilities.decodingInfo =
+            shaka.test.Util.spyFunc(decodingInfoSpy);
+
+        manifest = shaka.test.ManifestGenerator.generate((manifest) => {
+          manifest.addVariant(0, (variant) => {
+            variant.addVideo(0, (stream) => {
+              stream.mime('video/mp4', 'avc1.640028');
+              stream.hdr = 'SDR';
+            });
           });
-        });
-        manifest.addVariant(1, (variant) => {
-          variant.addVideo(1, (stream) => {
-            stream.mime('video/mp4', 'hvc1.2.4.L150.90');
-            stream.hdr = 'PQ';
+          manifest.addVariant(1, (variant) => {
+            variant.addVideo(1, (stream) => {
+              stream.mime('video/mp4', 'hvc1.2.4.L150.90');
+              stream.hdr = 'PQ';
+            });
           });
-        });
-        manifest.addVariant(2, (variant) => {
-          variant.addVideo(2, (stream) => {
-            stream.mime('video/mp4', 'hvc1.2.4.L153.B0');
-            stream.hdr = 'HLG';
+          manifest.addVariant(2, (variant) => {
+            variant.addVideo(2, (stream) => {
+              stream.mime('video/mp4', 'hvc1.2.4.L153.B0');
+              stream.hdr = 'HLG';
+            });
           });
         });
-      });
 
-      await StreamUtils.getDecodingInfosForVariants(manifest.variants,
-          /* usePersistentLicenses= */ false, /* srcEquals= */ false);
-      expect(decodingInfoSpy.calls.argsFor(0)[0].video.transferFunction)
-          .toBe('srgb');
-      expect(decodingInfoSpy.calls.argsFor(1)[0].video.transferFunction)
-          .toBe('pq');
-      expect(decodingInfoSpy.calls.argsFor(2)[0].video.transferFunction)
-          .toBe('hlg');
+        await StreamUtils.getDecodingInfosForVariants(manifest.variants,
+            /* usePersistentLicenses= */ false, /* srcEquals= */ false);
+        expect(decodingInfoSpy.calls.argsFor(0)[0].video.transferFunction)
+            .toBe('srgb');
+        expect(decodingInfoSpy.calls.argsFor(1)[0].video.transferFunction)
+            .toBe('pq');
+        expect(decodingInfoSpy.calls.argsFor(2)[0].video.transferFunction)
+            .toBe('hlg');
+      } finally {
+        navigator.mediaCapabilities.decodingInfo = originalDecodingInfo;
+      }
     });
   });
 
@@ -861,7 +867,7 @@ describe('StreamUtils', () => {
           });
         });
       });
-      window.shakaMediaCapabilities.decodingInfo =
+      navigator.mediaCapabilities.decodingInfo =
           shaka.test.Util.spyFunc(decodingInfoSpy);
       decodingInfoSpy.and.callFake((config) => {
         const res = config.video.contentType.includes('notsmooth') ?

package/third_party/closure-uri/uri.js

@@ -808,6 +808,27 @@ goog.Uri.QueryData.prototype.add = function(key, value) {
   return this;
 };
 
+/**
+ * Sets a key value pair and removes all other keys with the same value.
+ *
+ * @param {string} key Name.
+ * @param {string} value Value.
+ * @return {!goog.Uri.QueryData} Instance of this object.
+ */
+ goog.Uri.QueryData.prototype.set = function(key, value) {
+  this.ensureKeyMapInitialized_();
+  // Invalidate the cache.
+  this.encodedQuery_ = null;
+
+  if (!this.keyMap_.hasOwnProperty(key)) {
+    this.add(key, value);
+  } else {
+    this.keyMap_[key] = [value];
+  }
+
+  return this;
+};
+
 
 /**
  * @return {string} Encoded query string.

package/ui/airplay_button.js

@@ -36,6 +36,7 @@ shaka.ui.AirPlayButton = class extends shaka.ui.Element {
     /** @private {!HTMLButtonElement} */
     this.airplayButton_ = shaka.util.Dom.createButton();
     this.airplayButton_.classList.add('shaka-airplay-button');
+    this.airplayButton_.classList.add('shaka-tooltip');
     this.airplayButton_.ariaPressed = 'false';
 
     /** @private {!HTMLElement} */

package/ui/audio_language_selection.js

@@ -7,6 +7,7 @@
 
 goog.provide('shaka.ui.AudioLanguageSelection');
 
+goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.LanguageUtils');
 goog.require('shaka.ui.Locales');
@@ -31,6 +32,7 @@ shaka.ui.AudioLanguageSelection = class extends shaka.ui.SettingsMenu {
     super(parent, controls, shaka.ui.Enums.MaterialDesignIcons.LANGUAGE);
 
     this.button.classList.add('shaka-language-button');
+    this.button.classList.add('shaka-tooltip-status');
     this.menu.classList.add('shaka-audio-languages');
 
     this.eventManager.listen(
@@ -71,6 +73,8 @@ shaka.ui.AudioLanguageSelection = class extends shaka.ui.SettingsMenu {
 
     this.controls.dispatchEvent(
         new shaka.util.FakeEvent('languageselectionupdated'));
+
+    this.button.setAttribute('shaka-status', this.currentSelection.innerText);
   }
 
   /** @private */
@@ -118,3 +122,6 @@ shaka.ui.AudioLanguageSelection.Factory = class {
 
 shaka.ui.OverflowMenu.registerElement(
     'language', new shaka.ui.AudioLanguageSelection.Factory());
+
+shaka.ui.Controls.registerElement(
+    'language', new shaka.ui.AudioLanguageSelection.Factory());

package/ui/cast_button.js

@@ -41,6 +41,7 @@ shaka.ui.CastButton = class extends shaka.ui.Element {
     /** @private {!HTMLButtonElement} */
     this.castButton_ = shaka.util.Dom.createButton();
     this.castButton_.classList.add('shaka-cast-button');
+    this.castButton_.classList.add('shaka-tooltip');
     this.castButton_.ariaPressed = 'false';
 
     /** @private {!HTMLElement} */

package/ui/context_menu.js

@@ -0,0 +1,109 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+goog.provide('shaka.ui.ContextMenu');
+
+goog.require('goog.asserts');
+goog.require('shaka.log');
+goog.require('shaka.ui.Element');
+goog.require('shaka.ui.Utils');
+goog.require('shaka.util.Dom');
+goog.requireType('shaka.ui.Controls');
+
+
+/**
+ * @extends {shaka.ui.Element}
+ * @final
+ * @export
+ */
+shaka.ui.ContextMenu = class extends shaka.ui.Element {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   */
+  constructor(parent, controls) {
+    super(parent, controls);
+
+    /** @private {!shaka.extern.UIConfiguration} */
+    this.config_ = this.controls.getConfig();
+
+    /** @private {HTMLElement} */
+    this.controlsContainer_ = this.controls.getControlsContainer();
+
+    /** @private {!Array.<shaka.extern.IUIElement>} */
+    this.children_ = [];
+
+    /** @private {!HTMLElement} */
+    this.contextMenu_ = shaka.util.Dom.createHTMLElement('div');
+    this.contextMenu_.classList.add('shaka-no-propagation');
+    this.contextMenu_.classList.add('shaka-context-menu');
+    this.contextMenu_.classList.add('shaka-hidden');
+
+    this.controlsContainer_.appendChild(this.contextMenu_);
+
+    this.eventManager.listen(this.controlsContainer_, 'contextmenu', (e) => {
+      if (this.contextMenu_.classList.contains('shaka-hidden')) {
+        e.preventDefault();
+
+        const controlsLocation =
+            this.controlsContainer_.getBoundingClientRect();
+        this.contextMenu_.style.left = `${e.clientX - controlsLocation.left}px`;
+        this.contextMenu_.style.top = `${e.clientY - controlsLocation.top}px`;
+
+        shaka.ui.Utils.setDisplay(this.contextMenu_, true);
+      } else {
+        shaka.ui.Utils.setDisplay(this.contextMenu_, false);
+      }
+    });
+
+    this.eventManager.listen(window, 'click', () => {
+      shaka.ui.Utils.setDisplay(this.contextMenu_, false);
+    });
+
+    this.createChildren_();
+  }
+
+  /** @override */
+  release() {
+    this.controlsContainer_ = null;
+
+    for (const element of this.children_) {
+      element.release();
+    }
+
+    this.children_ = [];
+    super.release();
+  }
+
+  /**
+   * @param {string} name
+   * @param {!shaka.extern.IUIElement.Factory} factory
+   * @export
+   */
+  static registerElement(name, factory) {
+    shaka.ui.ContextMenu.elementNamesToFactories_.set(name, factory);
+  }
+
+  /**
+   * @private
+   */
+  createChildren_() {
+    for (const name of this.config_.contextMenuElements) {
+      const factory =
+          shaka.ui.ContextMenu.elementNamesToFactories_.get(name);
+      if (factory) {
+        goog.asserts.assert(this.controls, 'Controls should not be null!');
+        this.children_.push(factory.create(this.contextMenu_, this.controls));
+      } else {
+        shaka.log.alwaysWarn('Unrecognized context menu element:', name);
+      }
+    }
+  }
+};
+
+/** @private {!Map.<string, !shaka.extern.IUIElement.Factory>} */
+shaka.ui.ContextMenu.elementNamesToFactories_ = new Map();

package/ui/controls.js

@@ -16,6 +16,7 @@ goog.require('shaka.log');
 goog.require('shaka.ui.AdCounter');
 goog.require('shaka.ui.AdPosition');
 goog.require('shaka.ui.BigPlayButton');
+goog.require('shaka.ui.ContextMenu');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
 goog.require('shaka.ui.SeekBar');
@@ -253,6 +254,9 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
 
     this.localization_ = null;
     this.pressedKeys_.clear();
+
+    // FakeEventTarget implements IReleasable
+    super.release();
   }
 
 
@@ -323,6 +327,10 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       this.playButton_ = null;
     }
 
+    if (this.contextMenu_) {
+      this.contextMenu_ = null;
+    }
+
     if (this.controlsContainer_) {
       shaka.util.Dom.removeAllChildren(this.controlsContainer_);
       this.releaseChildElements_();
@@ -650,6 +658,10 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       this.addPlayButton_();
     }
 
+    if (this.config_.customContextMenu) {
+      this.addContextMenu_();
+    }
+
     if (!this.spinnerContainer_) {
       this.addBufferingSpinner_();
     }
@@ -708,6 +720,14 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     this.elements_.push(this.playButton_);
   }
 
+  /** @private */
+  addContextMenu_() {
+    /** @private {shaka.ui.ContextMenu} */
+    this.contextMenu_ =
+        new shaka.ui.ContextMenu(this.controlsButtonPanel_, this);
+    this.elements_.push(this.contextMenu_);
+  }
+
   /** @private */
   addScrimContainer_() {
     // This is the container that gets styled by CSS to have the
@@ -722,7 +742,8 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     /** @private {!HTMLElement} */
     this.adPanel_ = shaka.util.Dom.createHTMLElement('div');
     this.adPanel_.classList.add('shaka-ad-controls');
-    shaka.ui.Utils.setDisplay(this.adPanel_, this.ad_ != null);
+    const showAdPanel = this.ad_ != null && this.ad_.isLinear();
+    shaka.ui.Utils.setDisplay(this.adPanel_, showAdPanel);
     this.bottomControls_.appendChild(this.adPanel_);
 
     const adPosition = new shaka.ui.AdPosition(this.adPanel_, this);
@@ -779,8 +800,12 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     // on the page. The click event listener on window ensures that.
     // However, clicks on the bottom controls don't propagate to the container,
     // so we have to explicitly hide the menus onclick here.
-    this.eventManager_.listen(this.bottomControls_, 'click', () => {
-      this.hideSettingsMenus();
+    this.eventManager_.listen(this.bottomControls_, 'click', (e) => {
+      // We explicitly deny this measure when clicking on buttons that
+      // open submenus in the control panel.
+      if (!e.target['closest']('.shaka-overflow-button')) {
+        this.hideSettingsMenus();
+      }
     });
 
     this.addAdControls_();
@@ -790,6 +815,9 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     this.controlsButtonPanel_.classList.add('shaka-controls-button-panel');
     this.controlsButtonPanel_.classList.add(
         'shaka-show-controls-on-mouse-over');
+    if (this.config_.enableTooltips) {
+      this.controlsButtonPanel_.classList.add('shaka-tooltips-on');
+    }
     this.bottomControls_.appendChild(this.controlsButtonPanel_);
 
     // Create the elements specified by controlPanelElements
@@ -859,7 +887,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
 
 
   /**
-   * Adds a container for server side ad UI with IMA SDK.
+   * Adds a container for client side ad UI with IMA SDK.
    *
    * @private
    */
@@ -868,6 +896,9 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     this.clientAdContainer_ = shaka.util.Dom.createHTMLElement('div');
     this.clientAdContainer_.classList.add('shaka-client-side-ad-container');
     shaka.ui.Utils.setDisplay(this.clientAdContainer_, false);
+    this.eventManager_.listen(this.clientAdContainer_, 'click', () => {
+      this.onContainerClick_();
+    });
     this.videoContainer_.appendChild(this.clientAdContainer_);
   }
 
@@ -894,6 +925,12 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     // Listen for click events to dismiss the settings menus.
     this.eventManager_.listen(window, 'click', () => this.hideSettingsMenus());
 
+    // Avoid having multiple submenus open at the same time.
+    this.eventManager_.listen(
+        this, 'submenuopen', () => {
+          this.hideSettingsMenus();
+        });
+
     this.eventManager_.listen(this.video_, 'play', () => {
       this.onPlayStateChange_();
     });
@@ -1100,7 +1137,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     // recent mouse movement, we're in keyboard navigation, or one of a special
     // class of elements is hovered.
     if (adIsPaused ||
-        (!this.ad_ && videoIsPaused) ||
+        ((!this.ad_ || !this.ad_.isLinear()) && videoIsPaused) ||
         this.recentMouseMovement_ ||
         keyboardNavigationMode ||
         this.isHovered_()) {
@@ -1144,14 +1181,14 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
 
     if (this.anySettingsMenusAreOpen()) {
       this.hideSettingsMenusTimer_.tickNow();
-    } else {
+    } else if (this.config_.singleClickForPlayAndPause) {
       this.onPlayPauseClick_();
     }
   }
 
   /** @private */
   onPlayPauseClick_() {
-    if (this.ad_) {
+    if (this.ad_ && this.ad_.isLinear()) {
       this.playPauseAd();
     } else {
       this.playPausePresentation();

package/ui/controls.less

@@ -12,6 +12,7 @@
 @import "less/other_elements.less";
 @import "less/overflow_menu.less";
 @import "less/ad_controls.less";
+@import "less/tooltip.less";
 @import (css, inline) "https://fonts.googleapis.com/css?family=Roboto";
 // NOTE: Working around google/material-design-icons#958
 @import (css, inline) "https://fonts.googleapis.com/icon?family=Material+Icons+Round";

package/ui/enums.js

@@ -16,7 +16,9 @@ goog.provide('shaka.ui.Enums');
 shaka.ui.Enums.MaterialDesignIcons = {
   'FULLSCREEN': 'fullscreen',
   'EXIT_FULLSCREEN': 'fullscreen_exit',
+  'CLOSE': 'close',
   'CLOSED_CAPTIONS': 'closed_caption',
+  'CLOSED_CAPTIONS_OFF': 'closed_caption_disabled',
   'CHECKMARK': 'done',
   'LANGUAGE': 'language',
   'PIP': 'picture_in_picture_alt',
@@ -40,4 +42,6 @@ shaka.ui.Enums.MaterialDesignIcons = {
   'UNLOOP': 'repeat_on',
   'AIRPLAY': 'airplay',
   'REPLAY': 'replay',
+  'STATISTICS_ON': 'insert_chart_outlined',
+  'STATISTICS_OFF': 'insert_chart',
 };

package/ui/externs/ui.js

@@ -63,8 +63,14 @@ shaka.extern.UIVolumeBarColors;
  * @typedef {{
  *   controlPanelElements: !Array.<string>,
  *   overflowMenuButtons: !Array.<string>,
+ *   contextMenuElements: !Array.<string>,
+ *   statisticsList: !Array.<string>,
+ *   playbackRates: !Array.<number>,
+ *   fastForwardRates: !Array.<number>,
+ *   rewindRates: !Array.<number>,
  *   addSeekBar: boolean,
  *   addBigPlayButton: boolean,
+ *   customContextMenu: boolean,
  *   castReceiverAppId: string,
  *   clearBufferOnQualityChange: boolean,
  *   showUnbufferedStart: boolean,
@@ -73,20 +79,34 @@ shaka.extern.UIVolumeBarColors;
  *   trackLabelFormat: shaka.ui.Overlay.TrackLabelFormat,
  *   fadeDelay: number,
  *   doubleClickForFullscreen: boolean,
+ *   singleClickForPlayAndPause: boolean,
  *   enableKeyboardPlaybackControls: boolean,
  *   enableFullscreenOnRotation: boolean,
- *   forceLandscapeOnFullscreen: boolean
+ *   forceLandscapeOnFullscreen: boolean,
+ *   enableTooltips: boolean
  * }}
  *
  * @property {!Array.<string>} controlPanelElements
  *   The ordered list of control panel elements of the UI.
  * @property {!Array.<string>} overflowMenuButtons
  *   The ordered list of the overflow menu buttons.
+ * @property {!Array.<string>} contextMenuElements
+ *   The ordered list of buttons in the context menu.
+ * @property {!Array.<string>} statisticsList
+ *   The ordered list of statistics present in the statistics container.
+ * @property {!Array.<number>} playbackRates
+ *   The ordered list of rates for playback selection.
+  * @property {!Array.<number>} fastForwardRates
+ *   The ordered list of rates for fast forward selection.
+ * @property {!Array.<number>} rewindRates
+ *   The ordered list of rates for rewind selection.
  * @property {boolean} addSeekBar
  *   Whether or not a seek bar should be part of the UI.
  * @property {boolean} addBigPlayButton
  *   Whether or not a big play button in the center of the video
  *   should be part of the UI.
+ * @property {boolean} customContextMenu
+ *   Whether or not a custom context menu replaces the default.
  * @property {string} castReceiverAppId
  *   Receiver app id to use for the Chromecast support.
  * @property {boolean} clearBufferOnQualityChange
@@ -135,6 +155,9 @@ shaka.extern.UIVolumeBarColors;
  *   Whether or not double-clicking on the UI should cause it to enter
  *   fullscreen.
  *   Defaults to true.
+ * @property {boolean} singleClickForPlayAndPause
+ *   Whether or not clicking on the video should cause it to play or pause.
+ *   Defaults to true.
  * @property {boolean} enableKeyboardPlaybackControls
  *   Whether or not playback controls via keyboard is enabled, such as seek
  *   forward, seek backward, jump to the beginning/end of the video.
@@ -147,6 +170,10 @@ shaka.extern.UIVolumeBarColors;
  *   enters fullscreen.  Note that this behavior is based on an experimental
  *   browser API, and may not work on all platforms.
  *   Defaults to true.
+ * @property {boolean} enableTooltips
+ *   Whether or not buttons in the control panel display tooltips that contain
+ *   information about their function.
+ *   Defaults to false.
  * @exportDoc
  */
 shaka.extern.UIConfiguration;

package/ui/fast_forward_button.js

@@ -32,11 +32,16 @@ shaka.ui.FastForwardButton = class extends shaka.ui.Element {
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('material-icons-round');
     this.button_.classList.add('shaka-fast-forward-button');
+    this.button_.classList.add('shaka-tooltip-status');
+    this.button_.setAttribute('shaka-status', '1x');
     this.button_.textContent =
       shaka.ui.Enums.MaterialDesignIcons.FAST_FORWARD;
     this.parent.appendChild(this.button_);
     this.updateAriaLabel_();
 
+    /** @private {!Array.<number>} */
+    this.fastForwardRates_ = this.controls.getConfig().fastForwardRates;
+
     this.eventManager.listen(
         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
           this.updateAriaLabel_();
@@ -61,7 +66,7 @@ shaka.ui.FastForwardButton = class extends shaka.ui.Element {
   }
 
   /**
-   * Cycles trick play rate between 1, 2, 4, and 8.
+   * Cycles trick play rate between the selected fast forward rates.
    * @private
    */
   fastForward_() {
@@ -70,11 +75,15 @@ shaka.ui.FastForwardButton = 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 max (8), in which case it is dropped back to 1.
-    const newRate = (trickPlayRate < 0 || trickPlayRate > 4) ?
-        1 : trickPlayRate * 2;
+    const newRateIndex = this.fastForwardRates_.indexOf(trickPlayRate) + 1;
+
+    // When the button is clicked, the next rate in this.fastForwardRates_ is
+    // selected. If no more rates are available, the first one is set.
+    const newRate = (newRateIndex != this.fastForwardRates_.length) ?
+        this.fastForwardRates_[newRateIndex] : this.fastForwardRates_[0];
     this.player.trickPlay(newRate);
+
+    this.button_.setAttribute('shaka-status', newRate + 'x');
   }
 };
 

package/ui/fullscreen_button.js

@@ -32,6 +32,7 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element {
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('shaka-fullscreen-button');
     this.button_.classList.add('material-icons-round');
+    this.button_.classList.add('shaka-tooltip');
 
     // Don't show the button if fullscreen is not supported
     if (!document.fullscreenEnabled) {

package/ui/less/buttons.less

@@ -75,10 +75,6 @@
 .shaka-current-time {
   font-size: 14px;
   color: rgb(255, 255, 255);
-
-  /* Make the time element the right size for the text, instead of defaulting
-   * to the same size as the rest of the controls. */
-  height: auto;
   cursor: pointer;
 
   &[disabled] {

package/ui/less/containers.less

@@ -195,6 +195,80 @@
   align-items: center;
 }
 
+.shaka-statistics-container {
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  min-width: 300px;
+
+  color: white;
+  background-color: rgba(35, 35, 35, 0.9);
+
+  font-size: 14px;
+
+  padding: 5px 10px;
+  border-radius: 2px;
+
+  position: absolute;
+  z-index: 2;
+  left: 15px;
+  top: 15px;
+
+  /* Fades out with the other controls. */
+  .show-when-controls-shown();
+
+  div {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  span {
+    color: rgb(150, 150, 150);
+  }
+}
+
+.shaka-context-menu {
+  background-color: rgba(35, 35, 35, 0.9);
+
+  border-radius: 2px;
+
+  position: absolute;
+  z-index: 3;
+
+  button {
+    padding: 5px 10px;
+
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    color: white;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+
+    &:hover {
+      background-color: rgba(50, 50, 50, 0.9);
+    }
+  }
+
+  label {
+    padding: 0 20px;
+
+    align-items: flex-start;
+
+    color: white;
+    cursor: pointer;
+  }
+
+  .shaka-current-selection-span {
+    align-items: flex-start;
+
+    color: white;
+    cursor: pointer;
+  }
+}
+
 .shaka-scrim-container {
   margin: 0;
   .fill-container();