shaka-player 2.5.1 → 2.5.5

package/ui/controls.js

@@ -19,12 +19,12 @@
 goog.provide('shaka.ui.Controls');
 goog.provide('shaka.ui.ControlsPanel');
 
-goog.require('goog.asserts');
 goog.require('shaka.log');
 goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.SeekBar');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
 goog.require('shaka.util.EventManager');
@@ -54,7 +54,7 @@ shaka.ui.Controls = function(player, videoContainer, video, config) {
   /** @private {boolean} */
   this.overrideCssShowControls_ = false;
 
-  /** shaka.extern.UIConfiguration */
+  /** @private {shaka.extern.UIConfiguration} */
   this.config_ = config;
 
   /** @private {shaka.cast.CastProxy} */
@@ -79,19 +79,14 @@ shaka.ui.Controls = function(player, videoContainer, video, config) {
   /** @private {!HTMLElement} */
   this.videoContainer_ = videoContainer;
 
+  /** @private {shaka.ui.SeekBar} */
+  this.seekBar_ = null;
+
   /** @private {boolean} */
   this.isSeeking_ = false;
 
-  /**
-   * This timer is used to introduce a delay between the user scrubbing across
-   * the seek bar and the seek being sent to the player.
-   *
-   * @private {shaka.util.Timer}
-   */
-  this.seekTimer_ = new shaka.util.Timer(() => {
-    goog.asserts.assert(this.seekBar_ != null, 'Seekbar should not be null!');
-    this.video_.currentTime = parseFloat(this.seekBar_.value);
-  });
+  /** @private {!Array.<!Element>} */
+  this.settingsMenus_ = [];
 
   /**
    * This timer is used to detect when the user has stopped moving the mouse
@@ -133,7 +128,10 @@ shaka.ui.Controls = function(player, videoContainer, video, config) {
    * @private {shaka.util.Timer}
    */
   this.timeAndSeekRangeTimer_ = new shaka.util.Timer(() => {
-    this.updateTimeAndSeekRange_();
+    // Suppress timer-based updates if the controls are hidden.
+    if (this.isOpaque_()) {
+      this.updateTimeAndSeekRange_();
+    }
   });
 
   /** @private {?number} */
@@ -145,13 +143,12 @@ shaka.ui.Controls = function(player, videoContainer, video, config) {
   /** @private {shaka.ui.Localization} */
   this.localization_ = shaka.ui.Controls.createLocalization_();
 
-  this.createDOM_();
-
-  this.updateLocalizedStrings_();
-
   /** @private {shaka.util.EventManager} */
   this.eventManager_ = new shaka.util.EventManager();
 
+  // Configure and create the layout of the controls
+  this.configure(this.config_);
+
   this.addEventListeners_();
 
   /**
@@ -188,11 +185,6 @@ shaka.ui.Controls.prototype.destroy = async function() {
     this.eventManager_ = null;
   }
 
-  if (this.seekTimer_) {
-    this.seekTimer_.stop();
-    this.seekTimer_ = null;
-  }
-
   if (this.mouseStillTimer_) {
     this.mouseStillTimer_.stop();
     this.mouseStillTimer_ = null;
@@ -229,6 +221,10 @@ shaka.ui.Controls.prototype.destroy = async function() {
 
   await Promise.all(this.elements_.map((element) => element.destroy()));
   this.elements_ = [];
+
+  if (this.seekBar_) {
+    await this.seekBar_.destroy();
+  }
 };
 
 
@@ -351,6 +347,62 @@ shaka.ui.Controls.prototype.loadComplete = function() {
 };
 
 
+/**
+ * @param {!shaka.extern.UIConfiguration} config
+ * @export
+ */
+shaka.ui.Controls.prototype.configure = function(config) {
+  this.config_ = config;
+
+  this.castProxy_.changeReceiverId(config.castReceiverAppId);
+
+  // Deconstruct the old layout if applicable
+  if (this.seekBar_) {
+    this.seekBar_.destroy();
+    this.seekBar_ = null;
+  }
+
+  if (this.playButton_) {
+    this.playButton_.destroy();
+    this.playButton_ = null;
+  }
+
+  if (this.controlsContainer_) {
+    shaka.util.Dom.removeAllChildren(this.controlsContainer_);
+    this.videoContainer_.removeChild(this.spinnerContainer_);
+  } else {
+    this.addControlsContainer_();
+  }
+
+  // Create the new layout
+  this.createDOM_();
+
+  // Init the play state
+  this.onPlayStateChange_();
+
+  // Elements that should not propagate clicks (controls panel, menus)
+  const noPropagationElements = this.videoContainer_.getElementsByClassName(
+      'shaka-no-propagation');
+  for (const element of noPropagationElements) {
+    const cb = (event) => event.stopPropagation();
+    this.eventManager_.listen(element, 'click', cb);
+    this.eventManager_.listen(element, 'dblclick', cb);
+  }
+
+  // Keep showing controls if one of those elements is hovered
+  const showControlsElements = this.videoContainer_.getElementsByClassName(
+      'shaka-show-controls-on-mouse-over');
+  for (const element of showControlsElements) {
+    this.eventManager_.listen(element, 'mouseover', () => {
+      this.overrideCssShowControls_ = true;
+    });
+
+    this.eventManager_.listen(element, 'mouseleave', () => {
+      this.overrideCssShowControls_ = false;
+    });
+  }
+};
+
 /**
  * Enable or disable the custom controls. Enabling disables native
  * browser controls.
@@ -361,16 +413,20 @@ shaka.ui.Controls.prototype.loadComplete = function() {
 shaka.ui.Controls.prototype.setEnabledShakaControls = function(enabled) {
   this.enabled_ = enabled;
   if (enabled) {
+    shaka.ui.Utils.setDisplay(this.controlsContainer_, true);
+
+    // Spinner lives outside of the main controls div
     shaka.ui.Utils.setDisplay(
-      this.controlsButtonPanel_.parentElement, true);
+      this.spinnerContainer_, this.player_.isBuffering());
 
     // If we're hiding native controls, make sure the video element itself is
     // not tab-navigable.  Our custom controls will still be tab-navigable.
     this.video_.tabIndex = -1;
     this.video_.controls = false;
   } else {
-    shaka.ui.Utils.setDisplay(
-      this.controlsButtonPanel_.parentElement, false);
+    shaka.ui.Utils.setDisplay(this.controlsContainer_, false);
+    // Spinner lives outside of the main controls div
+    shaka.ui.Utils.setDisplay(this.spinnerContainer_, false);
   }
 
   // The effects of play state changes are inhibited while showing native
@@ -379,6 +435,15 @@ shaka.ui.Controls.prototype.setEnabledShakaControls = function(enabled) {
 };
 
 
+/**
+ * @param {boolean} seeking
+ * @export
+ */
+shaka.ui.Controls.prototype.setSeeking = function(seeking) {
+  this.isSeeking_ = seeking;
+};
+
+
 /**
  * Enable or disable native browser controls. Enabling disables shaka
  * controls.
@@ -417,6 +482,24 @@ shaka.ui.Controls.prototype.getLocalization = function() {
   return this.localization_;
 };
 
+/** @export */
+shaka.ui.Controls.prototype.toggleFullScreen = async function() {
+  if (document.fullscreenElement) {
+    document.exitFullscreen();
+  } else {
+    // If we are in PiP mode, leave PiP mode first.
+    try {
+      if (document.pictureInPictureElement) {
+        await document.exitPictureInPicture();
+      }
+    } catch (error) {
+      this.dispatchEvent(new shaka.util.FakeEvent('error', {
+        detail: error,
+      }));
+    }
+    await this.videoContainer_.requestFullscreen();
+  }
+};
 
 /**
  * @return {!HTMLElement}
@@ -504,11 +587,7 @@ shaka.ui.Controls.prototype.isCastAllowed = function() {
  * @export
  */
 shaka.ui.Controls.prototype.getDisplayTime = function() {
-  const displayTime = this.isSeeking_ ?
-        Number(this.seekBar_.value) :
-        Number(this.video_.currentTime);
-
-  return displayTime;
+  return this.seekBar_ ? this.seekBar_.getValue() : this.video_.currentTime;
 };
 
 
@@ -554,67 +633,28 @@ shaka.ui.Controls.prototype.hideSettingsMenus = function() {
 };
 
 
-/**
- * @private
- */
-shaka.ui.Controls.prototype.updateLocalizedStrings_ = function() {
-  const LocIds = shaka.ui.Locales.Ids;
-
-  if (this.seekBar_) {
-    this.seekBar_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-          this.localization_.resolve(LocIds.SEEK));
-  }
-
-  // Localize state-dependant labels
-  const makePlayNotPause = this.video_.paused && !this.isSeeking_;
-  const playButtonAriaLabelId = makePlayNotPause ? LocIds.PLAY : LocIds.PAUSE;
-  this.playButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-      this.localization_.resolve(playButtonAriaLabelId));
-};
-
-
-/**
- * @private
- */
-shaka.ui.Controls.prototype.initOptionalElementsToNull_ = function() {
-  // TODO: encapsulate/abstract range inputs and their containers
-
-  /** @private {HTMLElement} */
-  this.seekBarContainer_ = null;
-
-  /** @private {HTMLInputElement} */
-  this.seekBar_ = null;
-};
-
-
 /**
  * @private
  */
 shaka.ui.Controls.prototype.createDOM_ = function() {
-  this.initOptionalElementsToNull_();
-
   this.videoContainer_.classList.add('shaka-video-container');
   this.video_.classList.add('shaka-video');
 
-  this.addControlsContainer_();
-
-  this.addPlayButton_();
+  if (this.config_.addBigPlayButton) {
+    this.addPlayButton_();
+  }
 
   this.addBufferingSpinner_();
 
   this.addControlsButtonPanel_();
 
-  // Seek bar
-  if (this.config_.addSeekBar) {
-    this.addSeekBar_();
-  }
-
-  /** @private {!Array.<!Element>} */
   this.settingsMenus_ = Array.from(
     this.videoContainer_.getElementsByClassName('shaka-settings-menu'));
 
-  // Settings menus need to be positioned lower, if the seekbar is absent.
-  if (!this.seekBar_) {
+  if (this.config_.addSeekBar) {
+    this.seekBar_ = new shaka.ui.SeekBar(this.bottomControls_, this);
+  } else {
+    // Settings menus need to be positioned lower, if the seekbar is absent.
     for (let menu of this.settingsMenus_) {
       menu.classList.add('shaka-low-position');
     }
@@ -630,6 +670,14 @@ shaka.ui.Controls.prototype.addControlsContainer_ = function() {
   this.controlsContainer_ = shaka.util.Dom.createHTMLElement('div');
   this.controlsContainer_.classList.add('shaka-controls-container');
   this.videoContainer_.appendChild(this.controlsContainer_);
+
+  this.eventManager_.listen(this.controlsContainer_, 'touchstart', (e) => {
+    this.onContainerTouch_(e);
+  }, {passive: false});
+
+  this.eventManager_.listen(this.controlsContainer_, 'click', (e) => {
+    this.onContainerClick_(e);
+  });
 };
 
 
@@ -637,16 +685,13 @@ shaka.ui.Controls.prototype.addControlsContainer_ = function() {
  * @private
  */
 shaka.ui.Controls.prototype.addPlayButton_ = function() {
-  /** @private {!HTMLElement} */
-  this.playButtonContainer_ = shaka.util.Dom.createHTMLElement('div');
-  this.playButtonContainer_.classList.add('shaka-play-button-container');
-  this.controlsContainer_.appendChild(this.playButtonContainer_);
+  const playButtonContainer = shaka.util.Dom.createHTMLElement('div');
+  playButtonContainer.classList.add('shaka-play-button-container');
+  this.controlsContainer_.appendChild(playButtonContainer);
 
-  /** @private {!HTMLElement} */
-  this.playButton_ = shaka.util.Dom.createHTMLElement('button');
-  this.playButton_.classList.add('shaka-play-button');
-  this.playButton_.setAttribute('icon', 'play');
-  this.playButtonContainer_.appendChild(this.playButton_);
+  /** @private {shaka.ui.BigPlayButton} */
+  this.playButton_ =
+      new shaka.ui.BigPlayButton(playButtonContainer, this);
 };
 
 
@@ -654,19 +699,23 @@ shaka.ui.Controls.prototype.addPlayButton_ = function() {
  * @private
  */
 shaka.ui.Controls.prototype.addBufferingSpinner_ = function() {
-  goog.asserts.assert(this.playButtonContainer_,
-                      'Must have play button container before spinner!');
+  /** @private {!HTMLElement} */
+  this.spinnerContainer_ = shaka.util.Dom.createHTMLElement('div');
+  this.spinnerContainer_.classList.add('shaka-spinner-container');
+  this.videoContainer_.appendChild(this.spinnerContainer_);
+
+  const spinner = shaka.util.Dom.createHTMLElement('div');
+  spinner.classList.add('shaka-spinner');
+  this.spinnerContainer_.appendChild(spinner);
 
   // Svg elements have to be created with the svg xml namespace.
   const xmlns = 'http://www.w3.org/2000/svg';
 
-  /** @private {!HTMLElement} */
-  this.bufferingSpinner_ =
+  const svg =
       /** @type {!HTMLElement} */(document.createElementNS(xmlns, 'svg'));
-  // NOTE: SVG elements do not have a classList on IE, so use setAttribute.
-  this.bufferingSpinner_.setAttribute('class', 'shaka-spinner-svg');
-  this.bufferingSpinner_.setAttribute('viewBox', '0 0 30 30');
-  this.playButton_.appendChild(this.bufferingSpinner_);
+  svg.setAttribute('class', 'shaka-spinner-svg');
+  svg.setAttribute('viewBox', '0 0 30 30');
+  spinner.appendChild(svg);
 
   // These coordinates are relative to the SVG viewBox above.  This is distinct
   // from the actual display size in the page, since the "S" is for "Scalable."
@@ -680,7 +729,7 @@ shaka.ui.Controls.prototype.addBufferingSpinner_ = function() {
   spinnerCircle.setAttribute('fill', 'none');
   spinnerCircle.setAttribute('stroke-width', '1');
   spinnerCircle.setAttribute('stroke-miterlimit', '10');
-  this.bufferingSpinner_.appendChild(spinnerCircle);
+  svg.appendChild(spinnerCircle);
 };
 
 
@@ -688,12 +737,25 @@ shaka.ui.Controls.prototype.addBufferingSpinner_ = function() {
  * @private
  */
 shaka.ui.Controls.prototype.addControlsButtonPanel_ = function() {
+  /** @private {!HTMLElement} */
+  this.bottomControls_ = shaka.util.Dom.createHTMLElement('div');
+  this.bottomControls_.classList.add('shaka-bottom-controls');
+  this.controlsContainer_.appendChild(this.bottomControls_);
+
   /** @private {!HTMLElement} */
   this.controlsButtonPanel_ = shaka.util.Dom.createHTMLElement('div');
   this.controlsButtonPanel_.classList.add('shaka-controls-button-panel');
   this.controlsButtonPanel_.classList.add('shaka-no-propagation');
   this.controlsButtonPanel_.classList.add('shaka-show-controls-on-mouse-over');
-  this.controlsContainer_.appendChild(this.controlsButtonPanel_);
+  this.bottomControls_.appendChild(this.controlsButtonPanel_);
+
+  // Overflow menus are supposed to hide once you click elsewhere
+  // on the video element. The code in onContainerClick_ ensures that.
+  // However, clicks on controls panel don't propagate to the container,
+  // so we have to explicitly hide the menus onclick here.
+  this.eventManager_.listen(this.controlsButtonPanel_, 'click', () => {
+    this.hideSettingsMenus();
+  });
 
   // Create the elements specified by controlPanelElements
   for (let i = 0; i < this.config_.controlPanelElements.length; i++) {
@@ -710,12 +772,36 @@ shaka.ui.Controls.prototype.addControlsButtonPanel_ = function() {
 
 
 /**
+ * When a mobile device is rotated to landscape layout, and the video is
+ * loaded, make the demo app go into fullscreen.
+ * Similarly, exit fullscreen when the device is rotated to portrait layout.
+ * @private
+ */
+shaka.ui.Controls.prototype.onScreenRotation_ = function() {
+  if (!this.video_ ||
+      this.video_.readyState == 0 ||
+      this.castProxy_.isCasting()) { return; }
+
+  if (screen.orientation.type.includes('landscape') &&
+      !document.fullscreenElement) {
+    this.videoContainer_.requestFullscreen();
+  } else if (screen.orientation.type.includes('portrait') &&
+      document.fullscreenElement) {
+    document.exitFullscreen();
+  }
+};
+
+
+/**
+ * Adds static event listeners.  This should only add event listeners to
+ * things that don't change (e.g. Player).  Dynamic elements (e.g. controls)
+ * should have their event listeners added when they are created.
  * @private
  */
 shaka.ui.Controls.prototype.addEventListeners_ = function() {
   // TODO: Convert adding event listers to the "() =>" form.
 
-  this.player_.addEventListener('buffering', () => {
+  this.eventManager_.listen(this.player_, 'buffering', () => {
     this.onBufferingStateChange_();
   });
   // Set the initial state, as well.
@@ -725,117 +811,41 @@ shaka.ui.Controls.prototype.addEventListeners_ = function() {
   // for focused elements.
   this.eventManager_.listen(window, 'keydown', this.onKeyDown_.bind(this));
 
-  this.video_.addEventListener(
+  this.eventManager_.listen(
+      this.controlsContainer_, 'dblclick', () => this.toggleFullScreen());
+
+  this.eventManager_.listen(this.video_,
       'play', this.onPlayStateChange_.bind(this));
-  this.video_.addEventListener(
+  this.eventManager_.listen(this.video_,
       'pause', this.onPlayStateChange_.bind(this));
 
   // Since videos go into a paused state at the end, Chrome and Edge both fire
   // the 'pause' event when a video ends.  IE 11 only fires the 'ended' event.
-  this.video_.addEventListener(
+  this.eventManager_.listen(this.video_,
       'ended', this.onPlayStateChange_.bind(this));
 
-  if (this.seekBar_) {
-    this.seekBar_.addEventListener(
-        'mousedown', this.onSeekStart_.bind(this));
-    this.seekBar_.addEventListener(
-        'touchstart', this.onSeekStart_.bind(this), {passive: true});
-    this.seekBar_.addEventListener(
-        'input', this.onSeekInput_.bind(this));
-    this.seekBar_.addEventListener(
-        'touchend', this.onSeekEnd_.bind(this));
-    this.seekBar_.addEventListener(
-        'mouseup', this.onSeekEnd_.bind(this));
-  }
-
-  this.controlsContainer_.addEventListener(
-      'touchstart', this.onContainerTouch_.bind(this), {passive: false});
-  this.controlsContainer_.addEventListener(
-      'click', this.onContainerClick_.bind(this));
-
-  // Elements that should not propagate clicks (controls panel, menus)
-  const noPropagationElements = this.videoContainer_.getElementsByClassName(
-      'shaka-no-propagation');
-  for (let i = 0; i < noPropagationElements.length; i++) {
-    let element = noPropagationElements[i];
-    element.addEventListener(
-      'click', function(event) { event.stopPropagation(); });
-  }
-
-  // Keep showing controls if one of those elements is hovered
-  let showControlsElements = this.videoContainer_.getElementsByClassName(
-      'shaka-show-controls-on-mouse-over');
-  for (let i = 0; i < showControlsElements.length; i++) {
-    let element = showControlsElements[i];
-    element.addEventListener(
-      'mouseover', () => {
-        this.overrideCssShowControls_ = true;
-      });
-
-    element.addEventListener(
-      'mouseleave', () => {
-       this.overrideCssShowControls_ = false;
-      });
-  }
-
-  this.videoContainer_.addEventListener(
+  this.eventManager_.listen(this.videoContainer_,
       'mousemove', this.onMouseMove_.bind(this));
-  this.videoContainer_.addEventListener(
+  this.eventManager_.listen(this.videoContainer_,
       'touchmove', this.onMouseMove_.bind(this), {passive: true});
-  this.videoContainer_.addEventListener(
+  this.eventManager_.listen(this.videoContainer_,
       'touchend', this.onMouseMove_.bind(this), {passive: true});
-  this.videoContainer_.addEventListener(
+  this.eventManager_.listen(this.videoContainer_,
       'mouseleave', this.onMouseLeave_.bind(this));
 
-  // Overflow menus are supposed to hide once you click elsewhere
-  // on the video element. The code in onContainerClick_ ensures that.
-  // However, clicks on controls panel don't propagate to the container,
-  // so we have to explicitly hide the menus onclick here.
-  this.controlsButtonPanel_.addEventListener('click', () => {
-    this.hideSettingsMenusTimer_.tickNow();
-  });
-
-  this.castProxy_.addEventListener(
+  this.eventManager_.listen(this.castProxy_,
       'caststatuschanged', (e) => {
         this.onCastStatusChange_(e);
       });
 
-  this.videoContainer_.addEventListener('keyup', this.onKeyUp_.bind(this));
-
-  this.localization_.addEventListener(
-      shaka.ui.Localization.LOCALE_UPDATED,
-      (e) => this.updateLocalizedStrings_());
-
-  this.localization_.addEventListener(
-      shaka.ui.Localization.LOCALE_CHANGED,
-      (e) => this.updateLocalizedStrings_());
-};
-
+  this.eventManager_.listen(this.videoContainer_,
+      'keyup', this.onKeyUp_.bind(this));
 
-/**
- * @private
- */
-shaka.ui.Controls.prototype.addSeekBar_ = function() {
-  // This container is to support IE 11.  See detailed notes in
-  // less/range_elements.less for a complete explanation.
-  // TODO: Factor this into a range-element component.
-  this.seekBarContainer_ = shaka.util.Dom.createHTMLElement('div');
-  this.seekBarContainer_.classList.add('shaka-seek-bar-container');
-
-  this.seekBar_ =
-    /** @type {!HTMLInputElement} */ (document.createElement('input'));
-  this.seekBar_.classList.add('shaka-seek-bar');
-  this.seekBar_.type = 'range';
-  // NOTE: step=any causes keyboard nav problems on IE 11.
-  this.seekBar_.setAttribute('step', 'any');
-  this.seekBar_.setAttribute('min', '0');
-  this.seekBar_.setAttribute('max', '1');
-  this.seekBar_.value = '0';
-  this.seekBar_.classList.add('shaka-no-propagation');
-  this.seekBar_.classList.add('shaka-show-controls-on-mouse-over');
-
-  this.seekBarContainer_.appendChild(this.seekBar_);
-  this.controlsContainer_.appendChild(this.seekBarContainer_);
+  if (screen.orientation) {
+    this.eventManager_.listen(screen.orientation, 'change', () => {
+      this.onScreenRotation_();
+    });
+  }
 };
 
 
@@ -873,8 +883,15 @@ shaka.ui.Controls.prototype.onMouseMove_ = function(event) {
   // Make sure we are not about to hide the settings menus and then force them
   // open.
   this.hideSettingsMenusTimer_.stop();
-  this.setControlsOpacity_(shaka.ui.Enums.Opacity.OPAQUE);
-  this.updateTimeAndSeekRange_();
+
+  if (!this.isOpaque_()) {
+    // Only update the time and seek range on mouse movement if it's the very
+    // first movement and we're about to show the controls.  Otherwise the
+    // seek bar will be updated mich more rapidly during mouse movement.  Do
+    // this right before making it visible.
+    this.updateTimeAndSeekRange_();
+    this.setControlsOpacity_(shaka.ui.Enums.Opacity.OPAQUE);
+  }
 
   // Hide the cursor when the mouse stops moving.
   // Only applies while the cursor is over the video container.
@@ -1007,63 +1024,6 @@ shaka.ui.Controls.prototype.onPlayStateChange_ = function() {
   if (this.video_.ended && !this.video_.paused) {
     this.video_.pause();
   }
-
-  // Video is paused during seek, so don't show the play arrow while seeking:
-  if (this.enabled_ && this.video_.paused && !this.isSeeking_) {
-    this.playButton_.setAttribute('icon', 'play');
-    this.playButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-      this.localization_.resolve(shaka.ui.Locales.Ids.PLAY));
-  } else {
-    this.playButton_.setAttribute('icon', 'pause');
-    this.playButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
-      this.localization_.resolve(shaka.ui.Locales.Ids.PAUSE));
-  }
-};
-
-
-/** @private */
-shaka.ui.Controls.prototype.onSeekStart_ = function() {
-  if (!this.enabled_) return;
-
-  this.isSeeking_ = true;
-  this.video_.pause();
-};
-
-
-/** @private */
-shaka.ui.Controls.prototype.onSeekInput_ = function() {
-  if (!this.enabled_) return;
-
-  if (!this.video_.duration) {
-    // Can't seek yet.  Ignore.
-    return;
-  }
-
-  // Update the UI right away.
-  this.updateTimeAndSeekRange_();
-
-  // We want to wait until the user has stopped moving the seek bar for a
-  // little bit to avoid the number of times we ask the player to seek.
-  //
-  // To do this, we will start a timer that will fire in a little bit, but if
-  // we see another seek bar change, we will cancel that timer and re-start it.
-  //
-  // Calling |start| on an already pending timer will cancel the old request
-  // and start the new one.
-  this.seekTimer_.tickAfter(/* seconds= */ 0.125);
-};
-
-
-/** @private */
-shaka.ui.Controls.prototype.onSeekEnd_ = function() {
-  if (!this.enabled_) return;
-
-  // They just let go of the seek bar, so cancel the timer and manually
-  // call the event so that we can respond immediately.
-  this.seekTimer_.tickNow();
-
-  this.isSeeking_ = false;
-  this.video_.play();
 };
 
 
@@ -1128,15 +1088,12 @@ shaka.ui.Controls.prototype.onKeyUp_ = function(event) {
  * @private
  */
 shaka.ui.Controls.prototype.onBufferingStateChange_ = function() {
-  // Don't use setDisplay_ here, since the SVG spinner doesn't have classList
-  // on IE.
-  if (this.player_.isBuffering()) {
-    this.bufferingSpinner_.setAttribute(
-        'class', 'shaka-spinner-svg');
-  } else {
-    this.bufferingSpinner_.setAttribute(
-        'class', 'shaka-spinner-svg shaka-hidden');
+  if (!this.enabled_) {
+    return;
   }
+
+  shaka.ui.Utils.setDisplay(
+      this.spinnerContainer_, this.player_.isBuffering());
 };
 
 
@@ -1163,7 +1120,10 @@ shaka.ui.Controls.prototype.isOpaque_ = function() {
  */
 shaka.ui.Controls.prototype.seek_ = function(currentTime, event) {
   this.video_.currentTime = currentTime;
-  this.updateTimeAndSeekRange_();
+  if (this.isOpaque_()) {
+    // Only update the time and esek range if it's visible.
+    this.updateTimeAndSeekRange_();
+  }
 };
 
 
@@ -1172,87 +1132,17 @@ shaka.ui.Controls.prototype.seek_ = function(currentTime, event) {
  * @private
  */
 shaka.ui.Controls.prototype.updateTimeAndSeekRange_ = function() {
-  // Suppress updates if the controls are hidden.
-  if (!this.isOpaque_()) {
-    return;
-  }
-
-    const Constants = shaka.ui.Constants;
-  let displayTime = this.isSeeking_ ?
-      Number(this.seekBar_.value) :
-      Number(this.video_.currentTime);
-  let bufferedLength = this.video_.buffered.length;
-  let bufferedStart = bufferedLength ? this.video_.buffered.start(0) : 0;
-  let bufferedEnd =
-      bufferedLength ? this.video_.buffered.end(bufferedLength - 1) : 0;
-  let seekRange = this.player_.seekRange();
-  let seekRangeSize = seekRange.end - seekRange.start;
-
   if (this.seekBar_) {
-    this.seekBar_.min = seekRange.start;
-    this.seekBar_.max = seekRange.end;
-  }
-
-  if (this.player_.isLive()) {
-    // The amount of time we are behind the live edge.
-    let behindLive = Math.floor(seekRange.end - displayTime);
-    displayTime = Math.max(0, behindLive);
-
-    if (!this.isSeeking_ && this.seekBar_) {
-      this.seekBar_.value = seekRange.end - displayTime;
-    }
-  } else {
-    if (!this.isSeeking_ && this.seekBar_) {
-      this.seekBar_.value = displayTime;
-    }
-  }
-
-  if (this.seekBar_) {
-    // Hide seekbar seek window is very small.
-    const seekRange = this.player_.seekRange();
-    const seekWindow = seekRange.end - seekRange.start;
-    if (seekWindow < Constants.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR) {
-      shaka.ui.Utils.setDisplay(this.seekBarContainer_, false);
+    this.seekBar_.setValue(this.video_.currentTime);
+    this.seekBar_.update();
+    if (this.seekBar_.isShowing()) {
       for (let menu of this.settingsMenus_) {
-        menu.classList.add('shaka-low-position');
+        menu.classList.remove('shaka-low-position');
       }
     } else {
-      shaka.ui.Utils.setDisplay(this.seekBarContainer_, true);
       for (let menu of this.settingsMenus_) {
-        menu.classList.remove('shaka-low-position');
-      }
-
-      let gradient = ['to right'];
-      if (bufferedLength == 0) {
-        gradient.push('#000 0%');
-      } else {
-        const clampedBufferStart = Math.max(bufferedStart, seekRange.start);
-        const clampedBufferEnd = Math.min(bufferedEnd, seekRange.end);
-
-        const bufferStartDistance = clampedBufferStart - seekRange.start;
-        const bufferEndDistance = clampedBufferEnd - seekRange.start;
-        const playheadDistance = displayTime - seekRange.start;
-
-        // NOTE: the fallback to zero eliminates NaN.
-        const bufferStartFraction = (bufferStartDistance / seekRangeSize) || 0;
-        const bufferEndFraction = (bufferEndDistance / seekRangeSize) || 0;
-        const playheadFraction = (playheadDistance / seekRangeSize) || 0;
-
-        gradient.push(Constants.SEEK_BAR_BASE_COLOR + ' ' +
-                     (bufferStartFraction * 100) + '%');
-        gradient.push(Constants.SEEK_BAR_PLAYED_COLOR + ' ' +
-                     (bufferStartFraction * 100) + '%');
-        gradient.push(Constants.SEEK_BAR_PLAYED_COLOR + ' ' +
-                     (playheadFraction * 100) + '%');
-        gradient.push(Constants.SEEK_BAR_BUFFERED_COLOR + ' ' +
-                     (playheadFraction * 100) + '%');
-        gradient.push(Constants.SEEK_BAR_BUFFERED_COLOR + ' ' +
-                     (bufferEndFraction * 100) + '%');
-        gradient.push(Constants.SEEK_BAR_BASE_COLOR + ' ' +
-                     (bufferEndFraction * 100) + '%');
+        menu.classList.add('shaka-low-position');
       }
-      this.seekBarContainer_.style.background =
-          'linear-gradient(' + gradient.join(',') + ')';
     }
   }
 
@@ -1353,8 +1243,9 @@ shaka.ui.Controls.prototype.keepFocusInMenu_ = function(event) {
 
 
 /**
- * Removes class for keyboard navigation if mouse navigation
- * is active.
+ * For keyboard navigation, we use blue borders to highlight the active
+ * element. If we detect that a mouse is being used, remove the blue border
+ * from the active element.
  * @private
  */
 shaka.ui.Controls.prototype.onMouseDown_ = function() {