fix(webrtc-camera.js): only change shortcuts.innerHTML on difference

Author: d3relict

custom_components/webrtc/www/webrtc-camera.js

@@ -1,6 +1,6 @@
 /** Chrome 63+, Safari 11.1+ */
-import {VideoRTC} from './video-rtc.js?v=1.9.11';
-import {DigitalPTZ} from './digital-ptz.js?v=3.3.0';
+import { VideoRTC } from './video-rtc.js?v=1.9.11';
+import { DigitalPTZ } from './digital-ptz.js?v=3.3.0';
 
 class WebRTCCamera extends VideoRTC {
     /**
@@ -64,7 +64,7 @@ class WebRTCCamera extends VideoRTC {
         this.config = Object.assign({
             mode: config.mse === false ? 'webrtc' : config.webrtc === false ? 'mse' : this.mode,
             media: this.media,
-            streams: [{url: config.url, entity: config.entity}],
+            streams: [{ url: config.url, entity: config.entity }],
             poster_remote: config.poster && (config.poster.indexOf('://') > 0 || config.poster.charAt(0) === '/'),
         }, config);
 
@@ -97,7 +97,7 @@ class WebRTCCamera extends VideoRTC {
      * @return {{url: string}}
      */
     static getStubConfig() {
-        return {'url': ''};
+        return { 'url': '' };
     }
 
     setStatus(mode, status) {
@@ -209,7 +209,7 @@ class WebRTCCamera extends VideoRTC {
     }
 
     renderMain() {
-        const shadow = this.attachShadow({mode: 'open'});
+        const shadow = this.attachShadow({ mode: 'open' });
         shadow.innerHTML = `
         <style>
             ha-card {
@@ -277,7 +277,7 @@ class WebRTCCamera extends VideoRTC {
             this.querySelector('.player'),
             this.querySelector('.player .ptz-transform'),
             this.video,
-            Object.assign({}, this.config.digital_ptz, {persist_key: this.config.url})
+            Object.assign({}, this.config.digital_ptz, { persist_key: this.config.url })
         );
     }
 
@@ -414,7 +414,7 @@ class WebRTCCamera extends VideoRTC {
         const ptz = this.querySelector('.ptz');
         for (const [start, end] of [['touchstart', 'touchend'], ['mousedown', 'mouseup']]) {
             ptz.addEventListener(start, startEvt => {
-                const {className} = startEvt.target;
+                const { className } = startEvt.target;
                 startEvt.preventDefault();
                 handle('start_' + className);
                 window.addEventListener(end, endEvt => {
@@ -425,7 +425,7 @@ class WebRTCCamera extends VideoRTC {
                     } else {
                         handle(className);
                     }
-                }, {once: true});
+                }, { once: true });
             });
         }
     }
@@ -619,7 +619,7 @@ class WebRTCCamera extends VideoRTC {
                     cancelable: true,
                     composed: true,
                 });
-                event.detail = {entityId: value.more_info};
+                event.detail = { entityId: value.more_info };
                 ev.target.dispatchEvent(event);
             }
             if (value.service !== undefined) {
@@ -629,9 +629,13 @@ class WebRTCCamera extends VideoRTC {
         });
 
         this.renderTemplate('shortcuts', () => {
-            shortcuts.innerHTML = this.config.shortcuts.map((value, index) => `
+            const innerHTML = this.config.shortcuts.map((value, index) => `
                 <ha-icon data-index="${index}" icon="${value.icon}" title="${value.name}"></ha-icon>
             `).join('');
+
+            if (shortcuts.innerHTML !== innerHTML) {
+                shortcuts.innerHTML = innerHTML;
+            }
         });
     }