shaka-player 3.1.4 → 3.3.0

package/test/util/stream_utils_unit.js

@@ -652,8 +652,7 @@ describe('StreamUtils', () => {
       });
 
       await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, /* currentVariant= */ null, manifest,
-          /* useMediaCapabilities= */ true);
+          fakeDrmEngine, /* currentVariant= */ null, manifest);
 
       // Covers a regression in which we would remove streams with codecs.
       // The last two streams should be removed because their full MIME types
@@ -680,8 +679,7 @@ describe('StreamUtils', () => {
       });
 
       await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, /* currentVariant= */ null, manifest,
-          /* useMediaCapabilities= */ true);
+          fakeDrmEngine, /* currentVariant= */ null, manifest);
       expect(manifest.variants.length).toBe(1);
     });
 
@@ -698,8 +696,7 @@ describe('StreamUtils', () => {
       });
 
       await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, /* currentVariant= */ null, manifest,
-          /* useMediaCapabilities= */ true);
+          fakeDrmEngine, /* currentVariant= */ null, manifest);
 
       expect(manifest.variants.length).toBe(1);
     });
@@ -714,6 +711,7 @@ describe('StreamUtils', () => {
         variant.bandwidth = 5058558;
         variant.addAudio(1, (stream) => {
           stream.bandwidth = 129998;
+          stream.codecs = 'opus';
         });
         variant.addVideo(2, (stream) => {
           stream.bandwidth = 4928560;
@@ -728,6 +726,7 @@ describe('StreamUtils', () => {
         variant.bandwidth = 4911000;
         variant.addAudio(4, (stream) => {
           stream.bandwidth = 129998;
+          stream.codecs = 'vorbis';
         });
         variant.addVideo(5, (stream) => {
           stream.bandwidth = 4781002;
@@ -742,6 +741,7 @@ describe('StreamUtils', () => {
         variant.bandwidth = 10850316;
         variant.addAudio(7, (stream) => {
           stream.bandwidth = 129998;
+          stream.codecs = 'opus';
         });
         variant.addVideo(8, (stream) => {
           stream.bandwidth = 10784324;
@@ -751,6 +751,62 @@ describe('StreamUtils', () => {
       });
     };
 
+    it('chooses preferred audio and video codecs', () => {
+      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
+        addVariant1080Avc1(manifest);
+        addVariant1080Vp9(manifest);
+        addVariant2160Vp9(manifest);
+      });
+      const variants =
+          shaka.util.StreamUtils.choosePreferredCodecs(manifest.variants,
+              /* preferredVideoCodecs= */['vp09'],
+              /* preferredAudioCodecs= */['opus']);
+
+      expect(variants.length).toBe(1);
+      expect(variants[0].video.codecs).toBe(vp09Codecs);
+      expect(variants[0].audio.codecs).toBe('opus');
+    });
+
+    it('chooses preferred video codecs', () => {
+      // If no preferred audio codecs is specified or can be found, choose the
+      // variants with preferred video codecs.
+      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
+        addVariant1080Avc1(manifest);
+        addVariant1080Vp9(manifest);
+        addVariant2160Vp9(manifest);
+      });
+      const variants =
+          shaka.util.StreamUtils.choosePreferredCodecs(manifest.variants,
+              /* preferredVideoCodecs= */['vp09'],
+              /* preferredAudioCodecs= */[]);
+
+      expect(variants.length).toBe(2);
+      expect(variants[0].video.codecs).toBe(vp09Codecs);
+      expect(variants[0].audio.codecs).toBe('vorbis');
+      expect(variants[1].video.codecs).toBe(vp09Codecs);
+      expect(variants[1].audio.codecs).toBe('opus');
+    });
+
+    it('chooses preferred audio codecs', () => {
+      // If no preferred video codecs is specified or can be found, choose the
+      // variants with preferred audio codecs.
+      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
+        addVariant1080Avc1(manifest);
+        addVariant1080Vp9(manifest);
+        addVariant2160Vp9(manifest);
+      });
+      const variants =
+          shaka.util.StreamUtils.choosePreferredCodecs(manifest.variants,
+              /* preferredVideoCodecs= */['foo'],
+              /* preferredAudioCodecs= */['opus']);
+
+      expect(variants.length).toBe(2);
+      expect(variants[0].video.codecs).toBe(avc1Codecs);
+      expect(variants[0].audio.codecs).toBe('opus');
+      expect(variants[1].video.codecs).toBe(vp09Codecs);
+      expect(variants[1].audio.codecs).toBe('opus');
+    });
+
     it('chooses variants with different sizes (density) by codecs', () => {
       manifest = shaka.test.ManifestGenerator.generate((manifest) => {
         addVariant1080Avc1(manifest);
@@ -758,11 +814,14 @@ describe('StreamUtils', () => {
         addVariant2160Vp9(manifest);
       });
 
-      shaka.util.StreamUtils.chooseCodecsAndFilterManifest(manifest, 2);
+      shaka.util.StreamUtils.chooseCodecsAndFilterManifest(manifest,
+          /* preferredVideoCodecs= */[],
+          /* preferredAudioCodecs= */[],
+          /* preferredAudioChannelCount= */2,
+          /* preferredDecodingAttributes= */[]);
 
-      expect(manifest.variants.length).toBe(2);
+      expect(manifest.variants.length).toBe(1);
       expect(manifest.variants[0].video.codecs).toBe(vp09Codecs);
-      expect(manifest.variants[1].video.codecs).toBe(vp09Codecs);
     });
 
     it('chooses variants with same sizes (density) by codecs', () => {
@@ -771,10 +830,59 @@ describe('StreamUtils', () => {
         addVariant1080Vp9(manifest);
       });
 
-      shaka.util.StreamUtils.chooseCodecsAndFilterManifest(manifest, 2);
+      shaka.util.StreamUtils.chooseCodecsAndFilterManifest(manifest,
+          /* preferredVideoCodecs= */[],
+          /* preferredAudioCodecs= */[],
+          /* preferredAudioChannelCount= */2,
+          /* preferredDecodingAttributes= */[]);
 
       expect(manifest.variants.length).toBe(1);
       expect(manifest.variants[0].video.codecs).toBe(vp09Codecs);
     });
+
+    it('chooses variants by decoding attributes', async () => {
+      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
+        manifest.addVariant(0, (variant) => {
+          variant.bandwidth = 4058558;
+          variant.addVideo(1, (stream) => {
+            stream.mime('video', 'notsmooth');
+          });
+        });
+        manifest.addVariant(1, (variant) => {
+          variant.bandwidth = 4781002;
+          variant.addVideo(2, (stream) => {
+            stream.mime('video', 'smooth');
+          });
+        });
+        manifest.addVariant(3, (variant) => {
+          variant.addVideo(4, (stream) => {
+            variant.bandwidth = 5058558;
+            stream.mime('video', 'smooth-2');
+          });
+        });
+      });
+      window.shakaMediaCapabilities.decodingInfo =
+          shaka.test.Util.spyFunc(decodingInfoSpy);
+      decodingInfoSpy.and.callFake((config) => {
+        const res = config.video.contentType.includes('notsmooth') ?
+           {supported: true, smooth: false} :
+           {supported: true, smooth: true};
+        return Promise.resolve(res);
+      });
+
+      await StreamUtils.getDecodingInfosForVariants(manifest.variants,
+          /* usePersistentLicenses= */false, /* srcEquals= */ false);
+
+      shaka.util.StreamUtils.chooseCodecsAndFilterManifest(manifest,
+          /* preferredVideoCodecs= */[],
+          /* preferredAudioCodecs= */[],
+          /* preferredAudioChannelCount= */2,
+          /* preferredDecodingAttributes= */
+          [shaka.util.StreamUtils.DecodingAttributes.SMOOTH]);
+      // 2 video codecs are smooth. Choose the one with the lowest bandwidth.
+      expect(manifest.variants.length).toBe(1);
+      expect(manifest.variants[0].id).toBe(1);
+      expect(manifest.variants[0].video.id).toBe(2);
+    });
   });
 });

package/ui/airplay_button.js

@@ -36,7 +36,8 @@ 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_.setAttribute('aria-pressed', 'false');
+    this.airplayButton_.classList.add('shaka-tooltip');
+    this.airplayButton_.ariaPressed = 'false';
 
     /** @private {!HTMLElement} */
     this.airplayIcon_ = shaka.util.Dom.createHTMLElement('i');

package/ui/audio_language_selection.js

@@ -7,7 +7,7 @@
 
 goog.provide('shaka.ui.AudioLanguageSelection');
 
-goog.require('shaka.ui.Constants');
+goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.LanguageUtils');
 goog.require('shaka.ui.Locales');
@@ -32,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(
@@ -72,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 */
@@ -96,10 +99,8 @@ shaka.ui.AudioLanguageSelection = class extends shaka.ui.SettingsMenu {
   updateLocalizedStrings_() {
     const LocIds = shaka.ui.Locales.Ids;
 
-    this.backButton.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.BACK));
-    this.button.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.LANGUAGE));
+    this.backButton.ariaLabel = this.localization.resolve(LocIds.BACK);
+    this.button.ariaLabel = this.localization.resolve(LocIds.LANGUAGE);
     this.nameSpan.textContent =
         this.localization.resolve(LocIds.LANGUAGE);
     this.backSpan.textContent =
@@ -121,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

@@ -8,7 +8,6 @@
 goog.provide('shaka.ui.CastButton');
 
 goog.require('shaka.cast.CastProxy');
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -42,7 +41,8 @@ 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_.setAttribute('aria-pressed', 'false');
+    this.castButton_.classList.add('shaka-tooltip');
+    this.castButton_.ariaPressed = 'false';
 
     /** @private {!HTMLElement} */
     this.castIcon_ = shaka.util.Dom.createHTMLElement('i');
@@ -125,9 +125,9 @@ shaka.ui.CastButton = class extends shaka.ui.Element {
     // Aria-pressed set to true when casting, set to false otherwise.
     if (canCast) {
       if (isCasting) {
-        this.castButton_.setAttribute('aria-pressed', 'true');
+        this.castButton_.ariaPressed = 'true';
       } else {
-        this.castButton_.setAttribute('aria-pressed', 'false');
+        this.castButton_.ariaPressed = 'false';
       }
     }
 
@@ -155,8 +155,7 @@ shaka.ui.CastButton = class extends shaka.ui.Element {
   updateLocalizedStrings_() {
     const LocIds = shaka.ui.Locales.Ids;
 
-    this.castButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.CAST));
+    this.castButton_.ariaLabel = this.localization.resolve(LocIds.CAST);
     this.castNameSpan_.textContent =
         this.localization.resolve(LocIds.CAST);
 

package/ui/constants.js

@@ -7,8 +7,5 @@
 
 goog.provide('shaka.ui.Constants');
 
-/** @const {string} */
-shaka.ui.Constants.ARIA_LABEL = 'aria-label';
-
 /** @const {number} */
 shaka.ui.Constants.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR = 5; // seconds

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');
@@ -323,6 +324,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 +655,10 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       this.addPlayButton_();
     }
 
+    if (this.config_.customContextMenu) {
+      this.addContextMenu_();
+    }
+
     if (!this.spinnerContainer_) {
       this.addBufferingSpinner_();
     }
@@ -708,6 +717,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 +739,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 +797,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 +812,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 +884,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 +893,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 +922,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 +1134,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 +1178,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;