perf(UI): Avoid unnecessary calls to controls configure (#8116)

Author: avelad

lib/util/config_utils.js

@@ -8,6 +8,7 @@ goog.provide('shaka.util.ConfigUtils');
 
 goog.require('goog.asserts');
 goog.require('shaka.log');
+goog.require('shaka.util.ArrayUtils');
 goog.require('shaka.util.ObjectUtils');
 
 
@@ -189,13 +190,20 @@ shaka.util.ConfigUtils = class {
         // eslint-disable-next-line no-prototype-builtins
         if (!base.hasOwnProperty(key)) {
           acc[key] = value;
+        } else if (value instanceof HTMLElement &&
+          base[key] instanceof HTMLElement) {
+          if (!value.isEqualNode(base[key])) {
+            acc[key] = value;
+          }
         } else if (isObject(value) && isObject(base[key])) {
           const diff = changes(value, base[key]);
           if (Object.keys(diff).length > 0 || !isObject(diff)) {
             acc[key] = diff;
           }
-        } else if (isArrayEmpty(value) && isArrayEmpty(base[key])) {
-          // Do nothing if both are empty arrays
+        } else if (Array.isArray(value) && Array.isArray(base[key])) {
+          if (!shaka.util.ArrayUtils.hasSameElements(value, base[key])) {
+            acc[key] = value;
+          }
         } else if (Number.isNaN(value) && Number.isNaN(base[key])) {
           // Do nothing if both are NaN
         } else if (value !== base[key]) {
@@ -209,7 +217,9 @@ shaka.util.ConfigUtils = class {
 
     const removeEmpty = (obj) => {
       for (const key of Object.keys(obj)) {
-        if (isObject(obj[key]) && Object.keys(obj[key]).length === 0) {
+        if (obj[key] instanceof HTMLElement) {
+          // Do nothing if it's a HTMLElement
+        } else if (isObject(obj[key]) && Object.keys(obj[key]).length === 0) {
           delete obj[key];
         } else if (isArrayEmpty(obj[key])) {
           delete obj[key];

test/text/text_displayer_layout_unit.js

@@ -46,10 +46,12 @@ filterDescribe('Cue layout', shaka.test.TextLayoutTests.supported, () => {
         // Turn off every part of the UI that we can, so that the screenshot is
         // less likely to change because of something unrelated to text
         // rendering.
-        ui.configure('controlPanelElements', []);
-        ui.configure('addSeekBar', false);
-        ui.configure('addBigPlayButton', false);
-        ui.configure('enableFullscreenOnRotation', false);
+        ui.configure({
+          controlPanelElements: [],
+          addSeekBar: false,
+          addBigPlayButton: false,
+          enableFullscreenOnRotation: false,
+        });
 
         // Recreate the text displayer so that the text container comes after
         // the controls (as it does in production).  This is important for the

ui/ui.js

@@ -85,10 +85,6 @@ shaka.ui.Overlay = class {
     this.controls_ = new shaka.ui.Controls(
         player, videoContainer, video, vrCanvas, this.config_);
 
-    // Run the initial setup so that no configure() call is required for default
-    // settings.
-    this.configure({});
-
     // If the browser's native controls are disabled, use UI TextDisplayer.
     if (!video.controls) {
       player.setVideoContainer(videoContainer);
@@ -166,18 +162,29 @@ shaka.ui.Overlay = class {
 
     goog.asserts.assert(typeof(config) == 'object', 'Should be an object!');
 
+    const newConfig = /** @type {!shaka.extern.UIConfiguration} */(
+      Object.assign({}, this.config_));
     shaka.util.ConfigUtils.mergeConfigObjects(
-        this.config_, config, this.defaultConfig_(),
+        newConfig, config, this.defaultConfig_(),
         /* overrides= */ {}, /* path= */ '');
 
     // If a cast receiver app id has been given, add a cast button to the UI
-    if (this.config_.castReceiverAppId &&
-        !this.config_.overflowMenuButtons.includes('cast')) {
-      this.config_.overflowMenuButtons.push('cast');
+    if (newConfig.castReceiverAppId &&
+        !newConfig.overflowMenuButtons.includes('cast')) {
+      newConfig.overflowMenuButtons.push('cast');
     }
 
     goog.asserts.assert(this.player_ != null, 'Should have a player!');
 
+    const diff = shaka.util.ConfigUtils.getDifferenceFromConfigObjects(
+        newConfig, this.config_);
+    if (!Object.keys(diff).length) {
+      // No changes
+      return;
+    }
+
+    this.config_ = newConfig;
+
     this.controls_.configure(this.config_);
 
     this.controls_.dispatchEvent(new shaka.util.FakeEvent('uiupdated'));