shaka-player 3.1.4 → 3.3.0

package/ui/fast_forward_button.js

@@ -7,7 +7,6 @@
 
 goog.provide('shaka.ui.FastForwardButton');
 
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -33,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_();
@@ -57,12 +61,12 @@ shaka.ui.FastForwardButton = class extends shaka.ui.Element {
    * @private
    */
   updateAriaLabel_() {
-    this.button_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(shaka.ui.Locales.Ids.FAST_FORWARD));
+    this.button_.ariaLabel =
+        this.localization.resolve(shaka.ui.Locales.Ids.FAST_FORWARD);
   }
 
   /**
-   * Cycles trick play rate between 1, 2, 4, and 8.
+   * Cycles trick play rate between the selected fast forward rates.
    * @private
    */
   fastForward_() {
@@ -71,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

@@ -7,7 +7,6 @@
 
 goog.provide('shaka.ui.FullscreenButton');
 
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -33,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) {
@@ -71,8 +71,7 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element {
     const label = document.fullscreenElement ?
         LocIds.EXIT_FULL_SCREEN : LocIds.FULL_SCREEN;
 
-    this.button_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(label));
+    this.button_.ariaLabel = this.localization.resolve(label);
   }
 
   /**

package/ui/language_utils.js

@@ -138,7 +138,7 @@ shaka.ui.LanguageUtils = class {
       if (updateChosen && (combinationName == selectedCombination)) {
         button.appendChild(shaka.ui.Utils.checkmarkIcon());
         span.classList.add('shaka-chosen-item');
-        button.setAttribute('aria-selected', 'true');
+        button.ariaSelected = 'true';
         currentSelectionElement.textContent = span.textContent;
       }
       langMenu.appendChild(button);

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();

package/ui/less/overflow_menu.less

@@ -141,13 +141,3 @@
   /* TODO(b/116651454): eliminate hard-coded offsets */
   left: 17px;
 }
-
-/* The captions button, when captions are on. */
-.shaka-captions-on {
-  color: black;
-}
-
-/* The captions button, when captions are off. */
-.shaka-captions-off {
-  color: grey;
-}

package/ui/less/tooltip.less

@@ -0,0 +1,97 @@
+/*!
+ * @license
+ * The tooltip is based on https://github.com/felipefialho/css-components/
+ * Local modifications have been performed.
+ *
+ * Copyright (c) 2017 Felipe Fialho
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+@material-icons-width: 32px;
+
+.translateX(@percent) {
+  -webkit-transform: translateX(percentage(@percent));
+  -moz-transform: translateX(percentage(@percent));
+  -ms-transform: translateX(percentage(@percent));
+  -o-transform: translateX(percentage(@percent));
+  transform: translateX(percentage(@percent));
+}
+
+/* .shaka-tooltips-on enables the tooltips and is only added to the
+ * control panel when the 'enableTooltips' option is set to true */
+.shaka-tooltips-on {
+  overflow: visible;
+
+  & > [class*="shaka-tooltip"] {
+    position: relative;
+
+    /* The :after pseudo-element contains the tooltip */
+    &:hover:after, &:focus-visible:after, &:active:after {
+      content: attr(aria-label);
+
+      /* Override .material-icons-round text styling */
+      font-family: Roboto-Regular, Roboto, sans-serif;
+      line-height: @material-icons-width / 2;
+      white-space: nowrap;
+      font-size: 13px;
+
+      /* Styling */
+      background: rgba(35, 35, 35, 0.9);
+      color: white;
+      border-radius: 3px;
+      padding: 5px 10px;
+
+      /* Positioning */
+      position: absolute;
+      bottom: @material-icons-width + 5px;
+
+      /* Left attribute is set to half of the width of the parent button */
+      left: @material-icons-width / 2;
+
+      /* The tooltip is also translated 50% to appear centered */
+      .translateX(-0.5);
+    }
+  }
+
+  /* Adds an additional attribute for the status in .shaka-tooltip-status */
+  & > .shaka-tooltip-status {
+    &:hover:after, &:focus-visible:after, &:active:after {
+      content: attr(aria-label) " (" attr(shaka-status) ")";
+    }
+  }
+
+  /* The first tooltip of the panel is not centered on top of the button
+   * but rather aligned with the left border of the control panel */
+  button:first-child {
+    &:hover:after, &:focus-visible:after, &:active:after {
+      left: 0;
+      .translateX(0);
+    }
+  }
+
+  /* The last tooltip of the panel is not centered on top of the button
+   * but rather aligned with the right border of the control panel */
+  button:last-child {
+    &:hover:after, &:focus-visible:after,&:active:after {
+      left: @material-icons-width;
+      .translateX(-1);
+    }
+  }
+}

package/ui/locales/en.json

@@ -33,6 +33,7 @@
   "SEEK": "Seek",
   "SKIP_AD": "Skip Ad",
   "SKIP_TO_LIVE": "Skip ahead to live",
+  "STATISTICS": "Statistics",
   "SUBTITLE_FORCED": "Forced",
   "UNDETERMINED_LANGUAGE": "Undetermined",
   "UNMUTE": "Unmute",

package/ui/locales/source.json

@@ -138,6 +138,10 @@
     "description": "Label for a button used to skip ahead to the live broadcast.",
     "message": "Skip ahead to live"
   },
+  "STATISTICS": {
+    "description": "Label for a button that displays statistics of the video.",
+    "message": "Statistics"
+  },
   "SUBTITLE_FORCED": {
     "description": "Label used to identify a subtitle track that is forced to be shown.",
     "message": "Forced"

package/ui/loop_button.js

@@ -7,7 +7,7 @@
 
 goog.provide('shaka.ui.LoopButton');
 
-goog.require('shaka.ui.Constants');
+goog.require('shaka.ui.ContextMenu');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -36,6 +36,7 @@ shaka.ui.LoopButton = class extends shaka.ui.Element {
     /** @private {!HTMLButtonElement} */
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('shaka-loop-button');
+    this.button_.classList.add('shaka-tooltip');
 
     /** @private {!HTMLElement} */
     this.icon_ = shaka.util.Dom.createHTMLElement('i');
@@ -151,8 +152,7 @@ shaka.ui.LoopButton = class extends shaka.ui.Element {
     const ariaText = this.video.loop ?
         LocIds.EXIT_LOOP_MODE : LocIds.ENTER_LOOP_MODE;
 
-    this.button_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(ariaText));
+    this.button_.ariaLabel = this.localization.resolve(ariaText);
   }
 };
 
@@ -173,3 +173,6 @@ shaka.ui.OverflowMenu.registerElement(
 
 shaka.ui.Controls.registerElement(
     'loop', new shaka.ui.LoopButton.Factory());
+
+shaka.ui.ContextMenu.registerElement(
+    'loop', new shaka.ui.LoopButton.Factory());

package/ui/mute_button.js

@@ -8,7 +8,6 @@
 goog.provide('shaka.ui.MuteButton');
 
 goog.require('shaka.ads.AdManager');
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -34,6 +33,7 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('shaka-mute-button');
     this.button_.classList.add('material-icons-round');
+    this.button_.classList.add('shaka-tooltip');
     this.parent.appendChild(this.button_);
     this.updateAriaLabel_();
     this.updateIcon_();
@@ -49,7 +49,7 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.button_, 'click', () => {
-      if (this.ad) {
+      if (this.ad && this.ad.isLinear()) {
         this.ad.setMuted(!this.ad.isMuted());
       } else {
         this.video.muted = !this.video.muted;
@@ -97,8 +97,7 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
       label = this.video.muted ? LocIds.UNMUTE : LocIds.MUTE;
     }
 
-    this.button_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(label));
+    this.button_.ariaLabel = this.localization.resolve(label);
   }
 
   /**

package/ui/overflow_menu.js

@@ -10,7 +10,6 @@ goog.provide('shaka.ui.OverflowMenu');
 goog.require('goog.asserts');
 goog.require('shaka.ads.AdManager');
 goog.require('shaka.log');
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -49,29 +48,6 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
 
     this.createChildren_();
 
-
-    const backToOverflowMenuButtons =
-        this.controls.getVideoContainer().getElementsByClassName(
-            'shaka-back-to-overflow-button');
-
-    for (const button of backToOverflowMenuButtons) {
-      this.eventManager.listen(button, 'click', () => {
-        // Hide the submenus, display the overflow menu
-        this.controls.hideSettingsMenus();
-        shaka.ui.Utils.setDisplay(this.overflowMenu_, true);
-
-        // If there are back to overflow menu buttons, there must be
-        // overflow menu buttons, but oh well
-        if (this.overflowMenu_.childNodes.length) {
-          /** @type {!HTMLElement} */ (this.overflowMenu_.childNodes[0])
-              .focus();
-        }
-
-        // Make sure controls are displayed
-        this.controls.computeOpacity();
-      });
-    }
-
     this.eventManager.listen(
         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
           this.updateAriaLabel_();
@@ -84,7 +60,9 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
 
     this.eventManager.listen(
         this.adManager, shaka.ads.AdManager.AD_STARTED, () => {
-          shaka.ui.Utils.setDisplay(this.overflowMenuButton_, false);
+          if (this.ad && this.ad.isLinear()) {
+            shaka.ui.Utils.setDisplay(this.overflowMenuButton_, false);
+          }
         });
 
     this.eventManager.listen(
@@ -113,7 +91,7 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
 
     this.updateAriaLabel_();
 
-    if (this.ad) {
+    if (this.ad && this.ad.isLinear()) {
       // There was already an ad.
       shaka.ui.Utils.setDisplay(this.overflowMenuButton_, false);
     }
@@ -164,6 +142,7 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
     this.overflowMenuButton_.classList.add('shaka-overflow-menu-button');
     this.overflowMenuButton_.classList.add('shaka-no-propagation');
     this.overflowMenuButton_.classList.add('material-icons-round');
+    this.overflowMenuButton_.classList.add('shaka-tooltip');
     this.overflowMenuButton_.textContent =
       shaka.ui.Enums.MaterialDesignIcons.OPEN_OVERFLOW;
     this.parent.appendChild(this.overflowMenuButton_);
@@ -217,8 +196,8 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
    */
   updateAriaLabel_() {
     const LocIds = shaka.ui.Locales.Ids;
-    this.overflowMenuButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.MORE_SETTINGS));
+    this.overflowMenuButton_.ariaLabel =
+        this.localization.resolve(LocIds.MORE_SETTINGS);
   }
 };
 

package/ui/pip_button.js

@@ -7,7 +7,7 @@
 
 goog.provide('shaka.ui.PipButton');
 
-goog.require('shaka.ui.Constants');
+goog.require('shaka.ui.ContextMenu');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
@@ -40,6 +40,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
     /** @private {!HTMLButtonElement} */
     this.pipButton_ = shaka.util.Dom.createButton();
     this.pipButton_.classList.add('shaka-pip-button');
+    this.pipButton_.classList.add('shaka-tooltip');
 
     /** @private {!HTMLElement} */
     this.pipIcon_ = shaka.util.Dom.createHTMLElement('i');
@@ -141,8 +142,8 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
   onEnterPictureInPicture_() {
     const LocIds = shaka.ui.Locales.Ids;
     this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.EXIT_PIP;
-    this.pipButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.EXIT_PICTURE_IN_PICTURE));
+    this.pipButton_.ariaLabel =
+        this.localization.resolve(LocIds.EXIT_PICTURE_IN_PICTURE);
     this.currentPipState_.textContent =
         this.localization.resolve(LocIds.ON);
   }
@@ -152,8 +153,8 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
   onLeavePictureInPicture_() {
     const LocIds = shaka.ui.Locales.Ids;
     this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.PIP;
-    this.pipButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(LocIds.ENTER_PICTURE_IN_PICTURE));
+    this.pipButton_.ariaLabel =
+        this.localization.resolve(LocIds.ENTER_PICTURE_IN_PICTURE);
     this.currentPipState_.textContent =
         this.localization.resolve(LocIds.OFF);
   }
@@ -171,8 +172,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
     const ariaLabel = document.pictureInPictureElement ?
         LocIds.EXIT_PICTURE_IN_PICTURE :
         LocIds.ENTER_PICTURE_IN_PICTURE;
-    this.pipButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-        this.localization.resolve(ariaLabel));
+    this.pipButton_.ariaLabel = this.localization.resolve(ariaLabel);
 
     const currentPipState = document.pictureInPictureElement ?
         LocIds.ON : LocIds.OFF;
@@ -239,3 +239,6 @@ shaka.ui.OverflowMenu.registerElement(
 
 shaka.ui.Controls.registerElement(
     'picture_in_picture', new shaka.ui.PipButton.Factory());
+
+shaka.ui.ContextMenu.registerElement(
+    'picture_in_picture', new shaka.ui.PipButton.Factory());

package/ui/play_button.js

@@ -73,7 +73,7 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
     });
 
     this.eventManager.listen(this.button, 'click', () => {
-      if (this.ad) {
+      if (this.ad && this.ad.isLinear()) {
         this.controls.playPauseAd();
       } else {
         this.controls.playPausePresentation();
@@ -92,7 +92,7 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
    * @protected
    */
   isPaused() {
-    if (this.ad) {
+    if (this.ad && this.ad.isLinear()) {
       return this.ad.isPaused();
     }
 

package/ui/playback_rate_selection.js

@@ -7,7 +7,7 @@
 
 goog.provide('shaka.ui.PlaybackRateSelection');
 
-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');
@@ -32,6 +32,7 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
 
     this.button.classList.add('shaka-playbackrate-button');
     this.menu.classList.add('shaka-playback-rates');
+    this.button.classList.add('shaka-tooltip-status');
 
     this.eventManager.listen(
         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
@@ -48,15 +49,8 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
     });
 
     /** @type {!Map.<string, number>} */
-    this.playbackRates_ = new Map([
-      ['0.5x', 0.5],
-      ['0.75x', 0.75],
-      ['1x', 1],
-      ['1.25x', 1.25],
-      ['1.5x', 1.5],
-      ['1.75x', 1.75],
-      ['2x', 2],
-    ]);
+    this.playbackRates_ = new Map(this.controls.getConfig().playbackRates
+        .map((rate) => [rate + 'x', rate]));
 
     // Set up all the strings in the user's preferred language.
     this.updateLocalizedStrings_();
@@ -70,10 +64,8 @@ shaka.ui.PlaybackRateSelection = 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.PLAYBACK_RATE));
+    this.backButton.ariaLabel = this.localization.resolve(LocIds.BACK);
+    this.button.ariaLabel = this.localization.resolve(LocIds.PLAYBACK_RATE);
     this.nameSpan.textContent = this.localization.resolve(LocIds.PLAYBACK_RATE);
     this.backSpan.textContent = this.localization.resolve(LocIds.PLAYBACK_RATE);
   }
@@ -105,13 +97,14 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
     if (span) {
       const button = span.parentElement;
       button.appendChild(shaka.ui.Utils.checkmarkIcon());
-      button.setAttribute('aria-selected', 'true');
+      button.ariaSelected = 'true';
       span.classList.add('shaka-chosen-item');
     }
 
     // Set the label to display the current playback rate in the overflow menu,
     // in the format of '1x', '1.5x', etc.
     this.currentSelection.textContent = rate + 'x';
+    this.button.setAttribute('shaka-status', rate + 'x');
   }
 
   /** @private */
@@ -146,3 +139,6 @@ shaka.ui.PlaybackRateSelection.Factory = class {
 
 shaka.ui.OverflowMenu.registerElement(
     'playback_rate', new shaka.ui.PlaybackRateSelection.Factory());
+
+shaka.ui.Controls.registerElement(
+    'playback_rate', new shaka.ui.PlaybackRateSelection.Factory());

package/ui/presentation_time.js

@@ -7,7 +7,6 @@
 
 goog.provide('shaka.ui.PresentationTimeTracker');
 
-goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Locales');
@@ -108,8 +107,7 @@ shaka.ui.PresentationTimeTracker = class extends shaka.ui.Element {
   onTracksChanged_() {
     if (this.player.isLive()) {
       const ariaLabel = shaka.ui.Locales.Ids.SKIP_TO_LIVE;
-      this.currentTime_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-          this.localization.resolve(ariaLabel));
+      this.currentTime_.ariaLabel = this.localization.resolve(ariaLabel);
     }
   }
 };