shaka-player 3.1.4 → 3.3.0

package/ui/resolution_selection.js

@@ -8,7 +8,7 @@
 goog.provide('shaka.ui.ResolutionSelection');
 
 goog.require('goog.asserts');
-goog.require('shaka.ui.Constants');
+goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
@@ -34,6 +34,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
     super(parent, controls, shaka.ui.Enums.MaterialDesignIcons.RESOLUTION);
 
     this.button.classList.add('shaka-resolution-button');
+    this.button.classList.add('shaka-tooltip-status');
     this.menu.classList.add('shaka-resolutions');
 
     this.eventManager.listen(
@@ -137,7 +138,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
 
       if (!abrEnabled && track == selectedTrack) {
         // If abr is disabled, mark the selected track's resolution.
-        button.setAttribute('aria-selected', 'true');
+        button.ariaSelected = 'true';
         button.appendChild(shaka.ui.Utils.checkmarkIcon());
         span.classList.add('shaka-chosen-item');
         this.currentSelection.textContent = span.textContent;
@@ -163,7 +164,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
 
     // If abr is enabled reflect it by marking 'Auto' as selected.
     if (abrEnabled) {
-      autoButton.setAttribute('aria-selected', 'true');
+      autoButton.ariaSelected = 'true';
       autoButton.appendChild(shaka.ui.Utils.checkmarkIcon());
 
       this.abrOnSpan_.classList.add('shaka-chosen-item');
@@ -172,6 +173,8 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
           this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
     }
 
+    this.button.setAttribute('shaka-status', this.currentSelection.textContent);
+
     this.menu.appendChild(autoButton);
     shaka.ui.Utils.focusOnTheChosenItem(this.menu);
     this.controls.dispatchEvent(
@@ -198,10 +201,8 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
   updateLocalizedStrings_() {
     const LocIds = shaka.ui.Locales.Ids;
 
-    this.button.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.RESOLUTION));
-    this.backButton.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.RESOLUTION));
+    this.button.ariaLabel = this.localization.resolve(LocIds.RESOLUTION);
+    this.backButton.ariaLabel = this.localization.resolve(LocIds.RESOLUTION);
     this.backSpan.textContent =
         this.localization.resolve(LocIds.RESOLUTION);
     this.nameSpan.textContent =
@@ -230,3 +231,6 @@ shaka.ui.ResolutionSelection.Factory = class {
 
 shaka.ui.OverflowMenu.registerElement(
     'quality', new shaka.ui.ResolutionSelection.Factory());
+
+shaka.ui.Controls.registerElement(
+    'quality', new shaka.ui.ResolutionSelection.Factory());

package/ui/rewind_button.js

@@ -7,7 +7,6 @@
 
 goog.provide('shaka.ui.RewindButton');
 
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -33,11 +32,17 @@ shaka.ui.RewindButton = class extends shaka.ui.Element {
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('material-icons-round');
     this.button_.classList.add('shaka-rewind-button');
+    this.button_.classList.add('shaka-tooltip-status');
+    this.button_.setAttribute('shaka-status',
+        this.localization.resolve(shaka.ui.Locales.Ids.OFF));
     this.button_.textContent =
       shaka.ui.Enums.MaterialDesignIcons.REWIND;
     this.parent.appendChild(this.button_);
     this.updateAriaLabel_();
 
+    /** @private {!Array.<number>} */
+    this.rewindRates_ = this.controls.getConfig().rewindRates;
+
     this.eventManager.listen(
         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
           this.updateAriaLabel_();
@@ -57,12 +62,12 @@ shaka.ui.RewindButton = class extends shaka.ui.Element {
    * @private
    */
   updateAriaLabel_() {
-    this.button_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(shaka.ui.Locales.Ids.REWIND));
+    this.button_.ariaLabel =
+        this.localization.resolve(shaka.ui.Locales.Ids.REWIND);
   }
 
   /**
-   * Cycles trick play rate between -1, -2, -4, and -8.
+   * Cycles trick play rate between the selected rewind rates.
    * @private
    */
   rewind_() {
@@ -71,12 +76,15 @@ shaka.ui.RewindButton = class extends shaka.ui.Element {
     }
 
     const trickPlayRate = this.player.getPlaybackRate();
-    // Every time the button is clicked, the rate is multiplied by 2,
-    // unless the rate is at it's slowest (-8), in which case it is
-    // dropped back to 1.
-    const newRate = (trickPlayRate > 0 || trickPlayRate < -4) ?
-        -1 : trickPlayRate * 2;
+    const newRateIndex = this.rewindRates_.indexOf(trickPlayRate) + 1;
+
+    // When the button is clicked, the next rate in this.rewindRates_ is
+    // selected. If no more rates are available, the first one is set.
+    const newRate = (newRateIndex != this.rewindRates_.length) ?
+        this.rewindRates_[newRateIndex] : this.rewindRates_[0];
     this.player.trickPlay(newRate);
+
+    this.button_.setAttribute('shaka-status', newRate + 'x');
   }
 };
 

package/ui/seek_bar.js

@@ -15,7 +15,6 @@ goog.require('shaka.ui.RangeElement');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
 goog.require('shaka.util.Timer');
-goog.requireType('shaka.ads.CuePoint');
 goog.requireType('shaka.ui.Controls');
 
 
@@ -83,7 +82,7 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
      */
     this.wasPlaying_ = false;
 
-    /** @private {!Array.<!shaka.ads.CuePoint>} */
+    /** @private {!Array.<!shaka.extern.AdCuePoint>} */
     this.adCuePoints_ = [];
 
     this.eventManager.listen(this.localization,
@@ -96,7 +95,9 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
 
     this.eventManager.listen(
         this.adManager, shaka.ads.AdManager.AD_STARTED, () => {
-          shaka.ui.Utils.setDisplay(this.container, false);
+          if (!this.shouldBeDisplayed_()) {
+            shaka.ui.Utils.setDisplay(this.container, false);
+          }
         });
 
     this.eventManager.listen(
@@ -367,13 +368,12 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
       return false;
     }
 
-    return this.ad == null;
+    return this.ad == null || !this.ad.isLinear();
   }
 
   /** @private */
   updateAriaLabel_() {
-    this.bar.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(shaka.ui.Locales.Ids.SEEK));
+    this.bar.ariaLabel = this.localization.resolve(shaka.ui.Locales.Ids.SEEK);
   }
 };
 

package/ui/settings_menu.js

@@ -33,6 +33,8 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
 
     this.addMenu_();
 
+    this.inOverflowMenu_();
+
     this.eventManager.listen(this.button, 'click', () => {
       this.onButtonClick_();
     });
@@ -46,6 +48,7 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
   addButton_(iconText) {
     /** @protected {!HTMLButtonElement} */
     this.button = shaka.util.Dom.createButton();
+    this.button.classList.add('shaka-overflow-button');
 
     /** @protected {!HTMLElement}*/
     this.icon = shaka.util.Dom.createHTMLElement('i');
@@ -55,6 +58,7 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
+    label.classList.add('shaka-overflow-menu-only');
 
     /** @protected {!HTMLElement}*/
     this.nameSpan = shaka.util.Dom.createHTMLElement('span');
@@ -83,10 +87,13 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
     this.backButton = shaka.util.Dom.createButton();
     this.backButton.classList.add('shaka-back-to-overflow-button');
     this.menu.appendChild(this.backButton);
+    this.eventManager.listen(this.backButton, 'click', () => {
+      this.controls.hideSettingsMenus();
+    });
 
     const backIcon = shaka.util.Dom.createHTMLElement('i');
     backIcon.classList.add('material-icons-round');
-    backIcon.textContent = shaka.ui.Enums.MaterialDesignIcons.BACK;
+    backIcon.textContent = shaka.ui.Enums.MaterialDesignIcons.CLOSE;
     this.backButton.appendChild(backIcon);
 
     /** @protected {!HTMLElement}*/
@@ -97,11 +104,36 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
     controlsContainer.appendChild(this.menu);
   }
 
+  /** @private */
+  inOverflowMenu_() {
+    // Initially, submenus are created with a "Close" option. When present
+    // inside of the overflow menu, that option must be replaced with a
+    // "Back" arrow that returns the user to the main menu.
+    if (this.parent.classList.contains('shaka-overflow-menu')) {
+      this.backButton.firstChild.textContent =
+            shaka.ui.Enums.MaterialDesignIcons.BACK;
+
+      this.eventManager.listen(this.backButton, 'click', () => {
+        shaka.ui.Utils.setDisplay(this.parent, true);
+
+        /** @type {!HTMLElement} */
+        (this.parent.childNodes[0]).focus();
+
+        // Make sure controls are displayed
+        this.controls.computeOpacity();
+      });
+    }
+  }
+
 
   /** @private */
   onButtonClick_() {
-    this.controls.dispatchEvent(new shaka.util.FakeEvent('submenuopen'));
-    shaka.ui.Utils.setDisplay(this.menu, true);
-    shaka.ui.Utils.focusOnTheChosenItem(this.menu);
+    if (this.menu.classList.contains('shaka-hidden')) {
+      this.controls.dispatchEvent(new shaka.util.FakeEvent('submenuopen'));
+      shaka.ui.Utils.setDisplay(this.menu, true);
+      shaka.ui.Utils.focusOnTheChosenItem(this.menu);
+    } else {
+      shaka.ui.Utils.setDisplay(this.menu, false);
+    }
   }
 };

package/ui/small_play_button.js

@@ -28,6 +28,7 @@ shaka.ui.SmallPlayButton = class extends shaka.ui.PlayButton {
 
     this.button.classList.add('shaka-small-play-button');
     this.button.classList.add('material-icons-round');
+    this.button.classList.add('shaka-tooltip');
 
     this.updateIcon();
     this.updateAriaLabel();

package/ui/spacer.js

@@ -29,7 +29,7 @@ shaka.ui.Spacer = class extends shaka.ui.Element {
     const div = shaka.util.Dom.createHTMLElement('div');
     div.classList.add('shaka-spacer');
     // Make screen readers ignore the spacer
-    div.setAttribute('aria-hidden', true);
+    div.ariaHidden = 'true';
     this.parent.appendChild(div);
   }
 };

package/ui/statistics_button.js

@@ -0,0 +1,253 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+goog.provide('shaka.ui.StatisticsButton');
+
+goog.require('shaka.log');
+goog.require('shaka.ui.ContextMenu');
+goog.require('shaka.ui.Controls');
+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.Utils');
+goog.require('shaka.util.Dom');
+goog.require('shaka.util.Timer');
+goog.requireType('shaka.ui.Controls');
+
+
+/**
+ * @extends {shaka.ui.Element}
+ * @final
+ * @export
+ */
+shaka.ui.StatisticsButton = class extends shaka.ui.Element {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   */
+  constructor(parent, controls) {
+    super(parent, controls);
+
+    /** @private {!HTMLButtonElement} */
+    this.button_ = shaka.util.Dom.createButton();
+    this.button_.classList.add('shaka-statistics-button');
+
+    /** @private {!HTMLElement} */
+    this.icon_ = shaka.util.Dom.createHTMLElement('i');
+    this.icon_.classList.add('material-icons-round');
+    this.icon_.textContent =
+      shaka.ui.Enums.MaterialDesignIcons.STATISTICS_ON;
+    this.button_.appendChild(this.icon_);
+
+    const label = shaka.util.Dom.createHTMLElement('label');
+    label.classList.add('shaka-overflow-button-label');
+
+    /** @private {!HTMLElement} */
+    this.nameSpan_ = shaka.util.Dom.createHTMLElement('span');
+    label.appendChild(this.nameSpan_);
+
+    /** @private {!HTMLElement} */
+    this.stateSpan_ = shaka.util.Dom.createHTMLElement('span');
+    this.stateSpan_.classList.add('shaka-current-selection-span');
+    label.appendChild(this.stateSpan_);
+
+    this.button_.appendChild(label);
+
+    this.parent.appendChild(this.button_);
+
+    /** @private {!HTMLElement} */
+    this.container_ = shaka.util.Dom.createHTMLElement('div');
+    this.container_.classList.add('shaka-no-propagation');
+    this.container_.classList.add('shaka-show-controls-on-mouse-over');
+    this.container_.classList.add('shaka-statistics-container');
+    this.container_.classList.add('shaka-hidden');
+
+    const controlsContainer = this.controls.getControlsContainer();
+    controlsContainer.appendChild(this.container_);
+
+    /** @private {!Array} */
+    this.statisticsList_ = [];
+
+    /** @private {!Array} */
+    this.skippedStats_ = ['stateHistory', 'switchHistory'];
+
+    /** @private {!Object.<string, number>} */
+    this.currentStats_ = this.player.getStats();
+
+    /** @private {!Object.<string, HTMLElement>} */
+    this.displayedElements_ = {};
+
+
+    const parsePx = (name) => {
+      return this.currentStats_[name] + ' (px)';
+    };
+
+    const parsePercent = (name) => {
+      return this.currentStats_[name] + ' (%)';
+    };
+
+    const parseFrames = (name) => {
+      return this.currentStats_[name] + ' (frames)';
+    };
+
+    const parseSeconds = (name) => {
+      return this.currentStats_[name].toFixed(2) + ' (s)';
+    };
+
+    const parseBits = (name) => {
+      return Math.round(this.currentStats_[name] / 1000) + ' (kbits/s)';
+    };
+
+    const parseTime = (name) => {
+      return shaka.ui.Utils.buildTimeString(
+          this.currentStats_[name], false) + ' (m)';
+    };
+
+    /** @private {!Object.<string, function(string):string>} */
+    this.parseFrom_ = {
+      'width': parsePx,
+      'height': parsePx,
+      'completionPercent': parsePercent,
+      'bufferingTime': parseSeconds,
+      'drmTimeSeconds': parseSeconds,
+      'licenseTime': parseSeconds,
+      'liveLatency': parseSeconds,
+      'loadLatency': parseSeconds,
+      'manifestTimeSeconds': parseSeconds,
+      'estimatedBandwidth': parseBits,
+      'streamBandwidth': parseBits,
+      'maxSegmentDuration': parseTime,
+      'pauseTime': parseTime,
+      'playTime': parseTime,
+      'corruptedFrames': parseFrames,
+      'decodedFrames': parseFrames,
+      'droppedFrames': parseFrames,
+    };
+
+    /** @private {shaka.util.Timer} */
+    this.timer_ = new shaka.util.Timer(() => {
+      this.onTimerTick_();
+    });
+
+    this.updateLocalizedStrings_();
+
+    this.loadContainer_();
+
+    this.eventManager.listen(
+        this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
+          this.updateLocalizedStrings_();
+        });
+
+    this.eventManager.listen(
+        this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
+          this.updateLocalizedStrings_();
+        });
+
+    this.eventManager.listen(this.button_, 'click', () => {
+      this.onClick_();
+      this.updateLocalizedStrings_();
+    });
+  }
+
+  /** @private */
+  onClick_() {
+    shaka.ui.Utils.setDisplay(this.parent, false);
+
+    if (this.container_.classList.contains('shaka-hidden')) {
+      this.icon_.textContent =
+          shaka.ui.Enums.MaterialDesignIcons.STATISTICS_OFF;
+      this.timer_.tickEvery(0.1);
+      shaka.ui.Utils.setDisplay(this.container_, true);
+    } else {
+      this.icon_.textContent =
+          shaka.ui.Enums.MaterialDesignIcons.STATISTICS_ON;
+      this.timer_.stop();
+      shaka.ui.Utils.setDisplay(this.container_, false);
+    }
+  }
+
+  /** @private */
+  updateLocalizedStrings_() {
+    const LocIds = shaka.ui.Locales.Ids;
+
+    this.nameSpan_.textContent =
+        this.localization.resolve(LocIds.STATISTICS);
+
+    this.button_.ariaLabel = this.localization.resolve(LocIds.STATISTICS);
+
+    const labelText = this.container_.classList.contains('shaka-hidden') ?
+        LocIds.OFF : LocIds.ON;
+    this.stateSpan_.textContent = this.localization.resolve(labelText);
+  }
+
+  /** @private */
+  generateComponent_(name) {
+    const section = shaka.util.Dom.createHTMLElement('div');
+
+    const label = shaka.util.Dom.createHTMLElement('label');
+    label.textContent = name + ':';
+    section.appendChild(label);
+
+    const value = shaka.util.Dom.createHTMLElement('span');
+    value.textContent = this.parseFrom_[name](name);
+    section.appendChild(value);
+
+    this.displayedElements_[name] = value;
+
+    return section;
+  }
+
+  /** @private */
+  loadContainer_() {
+    for (const name of this.controls.getConfig().statisticsList) {
+      if (name in this.currentStats_ && !this.skippedStats_.includes(name)) {
+        this.container_.appendChild(this.generateComponent_(name));
+        this.statisticsList_.push(name);
+      } else {
+        shaka.log.alwaysWarn('Unrecognized statistic element:', name);
+      }
+    }
+  }
+
+  /** @private */
+  onTimerTick_() {
+    this.currentStats_ = this.player.getStats();
+
+    for (const name of this.statisticsList_) {
+      this.displayedElements_[name].textContent =
+          this.parseFrom_[name](name);
+    }
+  }
+
+  /** @override */
+  release() {
+    this.timer_.stop();
+    this.timer_ = null;
+    super.release();
+  }
+};
+
+
+/**
+ * @implements {shaka.extern.IUIElement.Factory}
+ * @final
+ */
+shaka.ui.StatisticsButton.Factory = class {
+  /** @override */
+  create(rootElement, controls) {
+    return new shaka.ui.StatisticsButton(rootElement, controls);
+  }
+};
+
+
+shaka.ui.OverflowMenu.registerElement(
+    'statistics', new shaka.ui.StatisticsButton.Factory());
+
+shaka.ui.ContextMenu.registerElement(
+    'statistics', new shaka.ui.StatisticsButton.Factory());

package/ui/text_selection.js

@@ -7,7 +7,7 @@
 
 goog.provide('shaka.ui.TextSelection');
 
-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');
@@ -35,12 +35,13 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu {
         controls, shaka.ui.Enums.MaterialDesignIcons.CLOSED_CAPTIONS);
 
     this.button.classList.add('shaka-caption-button');
+    this.button.classList.add('shaka-tooltip-status');
     this.menu.classList.add('shaka-text-languages');
 
     if (this.player && this.player.isTextTrackVisible()) {
-      this.button.setAttribute('aria-pressed', 'true');
+      this.button.ariaPressed = 'true';
     } else {
-      this.button.setAttribute('aria-pressed', 'false');
+      this.button.ariaPressed = 'false';
     }
 
     this.addOffOption_();
@@ -92,7 +93,7 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu {
    */
   addOffOption_() {
     const off = shaka.util.Dom.createButton();
-    off.setAttribute('aria-selected', 'true');
+    off.ariaSelected = 'true';
     this.menu.appendChild(off);
 
     off.appendChild(shaka.ui.Utils.checkmarkIcon());
@@ -108,13 +109,13 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu {
   /** @private */
   onCaptionStateChange_() {
     if (this.player.isTextTrackVisible()) {
-      this.icon.classList.add('shaka-captions-on');
-      this.icon.classList.remove('shaka-captions-off');
-      this.button.setAttribute('aria-pressed', 'true');
+      this.icon.textContent =
+          shaka.ui.Enums.MaterialDesignIcons.CLOSED_CAPTIONS_OFF;
+      this.button.ariaPressed = 'true';
     } else {
-      this.icon.classList.add('shaka-captions-off');
-      this.icon.classList.remove('shaka-captions-on');
-      this.button.setAttribute('aria-pressed', 'false');
+      this.icon.textContent =
+          shaka.ui.Enums.MaterialDesignIcons.CLOSED_CAPTIONS;
+      this.button.ariaPressed = 'false';
     }
 
     this.controls.dispatchEvent(
@@ -148,13 +149,15 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu {
     this.menu.appendChild(offButton);
 
     if (!this.player.isTextTrackVisible()) {
-      offButton.setAttribute('aria-selected', 'true');
+      offButton.ariaSelected = 'true';
       offButton.appendChild(shaka.ui.Utils.checkmarkIcon());
       this.captionsOffSpan_.classList.add('shaka-chosen-item');
       this.currentSelection.textContent =
           this.localization.resolve(shaka.ui.Locales.Ids.OFF);
     }
 
+    this.button.setAttribute('shaka-status', this.currentSelection.textContent);
+
     shaka.ui.Utils.focusOnTheChosenItem(this.menu);
 
     this.controls.dispatchEvent(
@@ -184,10 +187,8 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu {
   updateLocalizedStrings_() {
     const LocIds = shaka.ui.Locales.Ids;
 
-    this.button.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.CAPTIONS));
-    this.backButton.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.BACK));
+    this.button.ariaLabel = this.localization.resolve(LocIds.CAPTIONS);
+    this.backButton.ariaLabel = this.localization.resolve(LocIds.BACK);
     this.nameSpan.textContent =
         this.localization.resolve(LocIds.CAPTIONS);
     this.backSpan.textContent =
@@ -219,3 +220,6 @@ shaka.ui.TextSelection.Factory = class {
 
 shaka.ui.OverflowMenu.registerElement(
     'captions', new shaka.ui.TextSelection.Factory());
+
+shaka.ui.Controls.registerElement(
+    'captions', new shaka.ui.TextSelection.Factory());

package/ui/ui.js

@@ -187,8 +187,36 @@ shaka.ui.Overlay = class {
         'cast',
         'playback_rate',
       ],
+      statisticsList: [
+        'width',
+        'height',
+        'corruptedFrames',
+        'decodedFrames',
+        'droppedFrames',
+        'drmTimeSeconds',
+        'licenseTime',
+        'liveLatency',
+        'loadLatency',
+        'bufferingTime',
+        'manifestTimeSeconds',
+        'estimatedBandwidth',
+        'streamBandwidth',
+        'maxSegmentDuration',
+        'pauseTime',
+        'playTime',
+        'completionPercent',
+      ],
+      contextMenuElements: [
+        'loop',
+        'picture_in_picture',
+        'statistics',
+      ],
+      playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
+      fastForwardRates: [2, 4, 8, 1],
+      rewindRates: [-1, -2, -4, -8],
       addSeekBar: true,
       addBigPlayButton: false,
+      customContextMenu: false,
       castReceiverAppId: '',
       clearBufferOnQualityChange: true,
       showUnbufferedStart: false,
@@ -205,9 +233,11 @@ shaka.ui.Overlay = class {
       trackLabelFormat: shaka.ui.Overlay.TrackLabelFormat.LANGUAGE,
       fadeDelay: 0,
       doubleClickForFullscreen: true,
+      singleClickForPlayAndPause: true,
       enableKeyboardPlaybackControls: true,
       enableFullscreenOnRotation: true,
       forceLandscapeOnFullscreen: true,
+      enableTooltips: false,
     };
 
     // Check AirPlay support

package/ui/ui_utils.js

@@ -70,7 +70,7 @@ shaka.ui.Utils = class {
     icon.classList.add('shaka-chosen-item');
     icon.textContent = shaka.ui.Enums.MaterialDesignIcons.CHECKMARK;
     // Screen reader should ignore icon text.
-    icon.setAttribute('aria-hidden', 'true');
+    icon.ariaHidden = 'true';
     return icon;
   }