shaka-player 3.2.2 → 3.3.0

package/test/util/cmcd_manager_unit.js

@@ -0,0 +1,277 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+goog.require('shaka.util.CmcdManager');
+goog.require('shaka.util.ObjectUtils');
+
+describe('CmcdManager', () => {
+  const CmcdManager = shaka.util.CmcdManager;
+  const uuidRegex =
+    '[A-F\\d]{8}-[A-F\\d]{4}-4[A-F\\d]{3}-[89AB][A-F\\d]{3}-[A-F\\d]{12}';
+  const data = {
+    'sid': 'c936730c-031e-4a73-976f-92bc34039c60',
+    'cid': 'xyz',
+    'su': false,
+    'nor': '../testing/3.m4v',
+    'nrr': '0-99',
+    'd': 6066.66,
+    'mtp': 10049,
+    'bs': true,
+    'br': 52317,
+    'v': 1,
+    'pr': 1,
+    'com.test-hello': 'world',
+    'com.test-testing': 1234,
+    'com.test-exists': true,
+    'com.test-notExists': false,
+    'com.test-token': Symbol('s'),
+  };
+
+  describe('Query serialization', () => {
+    it('produces correctly serialized data', () => {
+      const query = CmcdManager.toQuery(data);
+      const result = 'CMCD=br%3D52317%2Cbs%2Ccid%3D%22xyz%22%2C' +
+                     'com.test-exists%2Ccom.test-hello%3D%22world%22%2C' +
+                     'com.test-testing%3D1234%2Ccom.test-token%3Ds%2C' +
+                     'd%3D6067%2Cmtp%3D10000%2C' +
+                     'nor%3D%22..%252Ftesting%252F3.m4v%22%2C' +
+                     'nrr%3D%220-99%22%2C' +
+                     'sid%3D%22c936730c-031e-4a73-976f-92bc34039c60%22';
+      expect(query).toBe(result);
+    });
+  });
+
+  describe('Header serialization', () => {
+    it('produces all header shards', () => {
+      const header = CmcdManager.toHeaders(data);
+      expect(header).toEqual({
+        'CMCD-Object': 'br=52317,d=6067',
+        'CMCD-Request': 'com.test-exists,com.test-hello="world",' +
+                        'com.test-testing=1234,com.test-token=s,mtp=10000,' +
+                        'nor="..%2Ftesting%2F3.m4v",nrr="0-99"',
+        'CMCD-Session': 'cid="xyz",sid="c936730c-031e-4a73-976f-92bc34039c60"',
+        'CMCD-Status': 'bs',
+      });
+    });
+
+    it('ignores empty shards', () => {
+      expect(CmcdManager.toHeaders({br: 200})).toEqual({
+        'CMCD-Object': 'br=200',
+      });
+    });
+  });
+
+  describe('CmcdManager instance', () => {
+    const ObjectUtils = shaka.util.ObjectUtils;
+
+    const playerInterface = {
+      isLive: () => false,
+      getBandwidthEstimate: () => 10000000,
+      getBufferedInfo: () => ({
+        video: [
+          {start: 0, end: 5},
+          {start: 6, end: 31.234},
+          {start: 35, end: 40},
+        ],
+      }),
+      getManifest: () => /** @type {shaka.extern.Manifest} */({
+        variants: [
+          {video: {bandwidth: 50000}},
+          {video: {bandwidth: 5000000}},
+        ],
+      }),
+      getPlaybackRate: () => 1,
+      getCurrentTime: () => 10,
+    };
+
+    const sid = '2ed2d1cd-970b-48f2-bfb3-50a79e87cfa3';
+    const config = {
+      enabled: false,
+      sessionId: '',
+      contentId: 'testing',
+      useHeaders: false,
+    };
+
+    /** @type shaka.util.CmcdManager */
+    let cmcdManager = new CmcdManager(playerInterface, config);
+
+    const request = {
+      uris: ['https://test.com/test.mpd'],
+      method: 'GET',
+      body: null,
+      headers: {
+        testing: '1234',
+      },
+      allowCrossSiteCredentials: false,
+      retryParameters: /** @type {shaka.extern.RetryParameters} */({}),
+      licenseRequestType: null,
+      sessionId: null,
+      streamDataCallback: null,
+    };
+
+    const manifestInfo = {
+      format: shaka.util.CmcdManager.StreamingFormat.DASH,
+    };
+
+    const segmentInfo = {
+      type: 'video',
+      init: false,
+      duration: 3.33,
+      mimeType: 'application/mp4',
+      codecs: 'avc1.42001e',
+      bandwidth: 5234167,
+    };
+
+    describe('configuration', () => {
+      it('does not modify requests when disabled', () => {
+        const r = ObjectUtils.cloneObject(request);
+
+        cmcdManager.applyManifestData(r, manifestInfo);
+        expect(r.uris[0]).toBe(request.uris[0]);
+
+        cmcdManager.applySegmentData(r, segmentInfo);
+        expect(r.uris[0]).toBe(request.uris[0]);
+      });
+
+      it('generates a session id if not provided', () => {
+        config.enabled = true;
+        cmcdManager = new CmcdManager(playerInterface, config);
+
+        const r = ObjectUtils.cloneObject(request);
+
+        cmcdManager.applyManifestData(r, manifestInfo);
+        const regex = new RegExp(`sid%3D%22${uuidRegex}%22`, 'i');
+        expect(regex.test(r.uris[0])).toBe(true);
+      });
+    });
+
+    describe('query mode', () => {
+      beforeAll(() => {
+        config.sessionId = sid;
+        cmcdManager = new CmcdManager(playerInterface, config);
+      });
+
+      it('modifies manifest request uris', () => {
+        const r = ObjectUtils.cloneObject(request);
+        cmcdManager.applyManifestData(r, manifestInfo);
+        const uri = 'https://test.com/test.mpd?CMCD=cid%3D%22testing%22%2C' +
+          'mtp%3D10000%2Cot%3Dm%2Csf%3Dd%2C' +
+          'sid%3D%222ed2d1cd-970b-48f2-bfb3-50a79e87cfa3%22%2Csu';
+        expect(r.uris[0]).toBe(uri);
+      });
+
+      it('modifies segment request uris', () => {
+        const r = ObjectUtils.cloneObject(request);
+        cmcdManager.applySegmentData(r, segmentInfo);
+        const uri = 'https://test.com/test.mpd?CMCD=bl%3D21200%2Cbr%3D5234%2Ccid%3D%22' +
+          'testing%22%2Cd%3D3330%2Cmtp%3D10000%2Cot%3Dv%2Csf%3Dd%2C' +
+          'sid%3D%222ed2d1cd-970b-48f2-bfb3-50a79e87cfa3%22%2Cst%3Dv%2Csu%2C' +
+          'tb%3D5000';
+        expect(r.uris[0]).toBe(uri);
+      });
+
+      it('modifies text request uris', () => {
+        const r = ObjectUtils.cloneObject(request);
+        cmcdManager.applyTextData(r);
+        const uri = 'https://test.com/test.mpd?CMCD=cid%3D%22' +
+          'testing%22%2Cmtp%3D10000%2Cot%3Dc%2Csf%3Dd%2C' +
+          'sid%3D%222ed2d1cd-970b-48f2-bfb3-50a79e87cfa3%22%2Csu';
+        expect(r.uris[0]).toBe(uri);
+      });
+    });
+
+    describe('header mode', () => {
+      beforeAll(() => {
+        config.useHeaders = true;
+        cmcdManager = new CmcdManager(playerInterface, config);
+      });
+
+      it('modifies manifest request headers', () => {
+        const r = ObjectUtils.cloneObject(request);
+        cmcdManager.applyManifestData(r, manifestInfo);
+        expect(r.headers).toEqual({
+          'testing': '1234',
+          'CMCD-Object': 'ot=m',
+          'CMCD-Request': 'mtp=10000,su',
+          'CMCD-Session': 'cid="testing",sf=d,' +
+                          'sid="2ed2d1cd-970b-48f2-bfb3-50a79e87cfa3"',
+        });
+      });
+
+      it('modifies segment request headers', () => {
+        const r = ObjectUtils.cloneObject(request);
+        cmcdManager.applySegmentData(r, segmentInfo);
+        expect(r.headers).toEqual({
+          'testing': '1234',
+          'CMCD-Object': 'br=5234,d=3330,ot=v,tb=5000',
+          'CMCD-Request': 'bl=21200,mtp=10000,su',
+          'CMCD-Session': 'cid="testing",sf=d,' +
+                          'sid="2ed2d1cd-970b-48f2-bfb3-50a79e87cfa3",st=v',
+        });
+      });
+    });
+
+    describe('src= mode', () => {
+      it('modifies media stream uris', () => {
+        const r = cmcdManager
+            .appendSrcData('https://test.com/test.mp4', 'video/mp4');
+        const uri = 'https://test.com/test.mp4?CMCD=cid%3D%22testing%22%2C' +
+                    'mtp%3D10000%2Cot%3Dav%2Csf%3Dd%2C' +
+                    'sid%3D%222ed2d1cd-970b-48f2-bfb3-50a79e87cfa3%22%2Csu';
+        expect(r).toBe(uri);
+      });
+
+      it('modifies manifest stream uris', () => {
+        const r = cmcdManager
+            .appendSrcData('https://test.com/test.m3u8', 'application/x-mpegurl');
+        const uri = 'https://test.com/test.m3u8?CMCD=cid%3D%22testing%22%2C' +
+                    'mtp%3D10000%2Cot%3Dm%2Csf%3Dd%2C' +
+                    'sid%3D%222ed2d1cd-970b-48f2-bfb3-50a79e87cfa3%22%2Csu';
+        expect(r).toBe(uri);
+      });
+
+      it('modifies text track uris', () => {
+        const r = cmcdManager.appendTextTrackData('https://test.com/test.vtt');
+        const uri = 'https://test.com/test.vtt?CMCD=cid%3D%22testing%22%2C' +
+                    'mtp%3D10000%2Cot%3Dc%2Csf%3Dd%2C' +
+                    'sid%3D%222ed2d1cd-970b-48f2-bfb3-50a79e87cfa3%22%2Csu';
+        expect(r).toBe(uri);
+      });
+    });
+
+    describe('adheres to the spec', () => {
+      beforeAll(() => {
+        cmcdManager.setBuffering(false);
+        cmcdManager.setBuffering(true);
+      });
+
+      it('sends bs only once', () => {
+        let r = ObjectUtils.cloneObject(request);
+        cmcdManager.applySegmentData(r, segmentInfo);
+        expect(r.headers['CMCD-Status']).toContain('bs');
+
+        r = ObjectUtils.cloneObject(request);
+        cmcdManager.applySegmentData(r, segmentInfo);
+        expect(r.headers['CMCD-Status']).not.toContain('bs');
+      });
+
+      it('sends su until buffering is complete', () => {
+        let r = ObjectUtils.cloneObject(request);
+        cmcdManager.applySegmentData(r, segmentInfo);
+        expect(r.headers['CMCD-Request']).toContain(',su');
+
+        r = ObjectUtils.cloneObject(request);
+        cmcdManager.applySegmentData(r, segmentInfo);
+        expect(r.headers['CMCD-Request']).toContain(',su');
+
+        cmcdManager.setBuffering(false);
+        r = ObjectUtils.cloneObject(request);
+        cmcdManager.applySegmentData(r, segmentInfo);
+        expect(r.headers['CMCD-Request']).not.toContain(',su');
+      });
+    });
+  });
+});

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