Don't recreate controls object on configure() calls.

Issue #1948

Backported to v2.5.x

Change-Id: I86a10c61d704688b2830e7f08b894a98faaf68e7

ui/controls.js

@@ -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} */
@@ -145,13 +145,14 @@ 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.updateLocalizedStrings_();
+
   this.addEventListeners_();
 
   /**
@@ -351,6 +352,27 @@ shaka.ui.Controls.prototype.loadComplete = function() {
 };
 
 
+/**
+ * @param {!shaka.extern.UIConfiguration} config
+ * @export
+ */
+shaka.ui.Controls.prototype.configure = function(config) {
+  this.config_ = config;
+
+  if (this.controlsContainer_) {
+    // Deconstruct the old layout if applicable
+    shaka.util.Dom.removeAllChildren(this.controlsContainer_);
+  } else {
+    this.addControlsContainer_();
+  }
+
+  // Create the new layout
+  this.createDOM_();
+
+  this.addEventListeners_();
+};
+
+
 /**
  * Enable or disable the custom controls. Enabling disables native
  * browser controls.
@@ -596,8 +618,6 @@ shaka.ui.Controls.prototype.createDOM_ = function() {
   this.videoContainer_.classList.add('shaka-video-container');
   this.video_.classList.add('shaka-video');
 
-  this.addControlsContainer_();
-
   this.addPlayButton_();
 
   this.addBufferingSpinner_();
@@ -630,6 +650,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.controlsContainer_.addEventListener('touchstart', (e) => {
+    this.onContainerTouch_(e);
+  }, {passive: false});
+
+  this.controlsContainer_.addEventListener('click', (e) => {
+    this.onContainerClick_(e);
+  });
 };
 
 
@@ -645,8 +673,8 @@ shaka.ui.Controls.prototype.addPlayButton_ = function() {
   /** @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_);
+  this.onPlayStateChange_();
 };
 
 
@@ -748,11 +776,6 @@ shaka.ui.Controls.prototype.addEventListeners_ = function() {
         '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');

ui/ui.js

@@ -38,12 +38,6 @@ shaka.ui.Overlay = function(player, videoContainer, video) {
   /** @private {shaka.Player} */
   this.player_ = player;
 
-  /** @private {!HTMLElement} */
-  this.videoContainer_ = videoContainer;
-
-  /** @private {!HTMLMediaElement} */
-  this.video_ = video;
-
   /** @private {!shaka.extern.UIConfiguration} */
   this.config_ = this.defaultConfig_();
 
@@ -57,6 +51,10 @@ shaka.ui.Overlay = function(player, videoContainer, video) {
     videoContainer.classList.add('shaka-mobile');
   }
 
+  /** @private {shaka.ui.Controls} */
+  this.controls_ = new shaka.ui.Controls(
+      player, videoContainer, video, this.config_);
+
   // Run the initial setup so that no configure() call is required for default
   // settings.
   this.configure({});
@@ -120,28 +118,6 @@ shaka.ui.Overlay.prototype.configure = function(config, value) {
 
   goog.asserts.assert(typeof(config) == 'object', 'Should be an object!');
 
-  const DomUtils = shaka.util.Dom;
-  // Deconstruct the old layout.
-
-  // Save the text container, so subtitles can be displayed with
-  // the new layout.
-  const textContainer =
-    this.videoContainer_.querySelector('.shaka-text-container');
-
-  // Remember whether the controls were shown
-  let shown = false;
-  let controlsContainer =
-      this.videoContainer_.querySelector('.shaka-controls-container');
-  if (controlsContainer != null) {
-    shown = controlsContainer.getAttribute('shown');
-  }
-
-  // Destroy the old layout.
-  shaka.util.Dom.removeAllChildren(this.videoContainer_);
-
-  // Add the video back in
-  this.videoContainer_.appendChild(this.video_);
-
   shaka.util.ConfigUtils.mergeConfigObjects(
         this.config_, config, this.defaultConfig_(),
         /* overrides (only used for player config)*/ {}, /* path */ '');
@@ -154,18 +130,7 @@ shaka.ui.Overlay.prototype.configure = function(config, value) {
 
   goog.asserts.assert(this.player_ != null, 'Should have a player!');
 
-  /** @private {shaka.ui.Controls} */
-  this.controls_ = new shaka.ui.Controls(
-      this.player_, this.videoContainer_, this.video_, this.config_);
-
-  controlsContainer = DomUtils.getElementByClassName(
-      'shaka-controls-container', this.videoContainer_);
-  controlsContainer.setAttribute('shown', shown);
-
-  // Add the text container back.
-  if (textContainer) {
-    this.videoContainer_.appendChild(textContainer);
-  }
+  this.controls_.configure(this.config_);
 
   this.controls_.dispatchEvent(new shaka.util.FakeEvent('uiupdated'));
 };