Template in shortcuts causes constant update of the shortcut elements

[d3relict]

when using templates for shortcuts (like the light switch example), the shortcuts keep constantly updating, even though the state did not change. this can be easily seen in chrome dev tools, the elements blink constantly as they are being replaced.

this causes the button clicks to be lost, and i have to press several times for my intention to register, and the lamp to toggle.

the config i use for the card:

type: custom:webrtc-camera
streams:
  - url: living_room_2
    name: SD
    mode: webrtc, mse
  - url: living_room_1
    name: HD
    mode: webrtc, mse
muted: true
ui: true
intersection: 0.1
shortcuts:
  - name: Reset
    icon: mdi:lock-reset
    service: button.press
    service_data:
      entity_id: button.living_room_camera_guard_go_to
  - name: Store
    icon: mdi:lock
    service: button.press
    service_data:
      entity_id: button.living_room_camera_guard_set_current_position
  - name: LRCeiling
    icon: >-
      ${ states['light.living_room_ceiling'].state === 'on' ?
      'mdi:lightbulb':'mdi:lightbulb-outline' }
    service: light.toggle
    service_data:
      entity_id: light.living_room_ceiling
  - name: KSpot
    icon: >-
      ${ states['light.kitchen_spot'].state === 'on' ?
      'mdi:lightbulb':'mdi:lightbulb-outline' }
    service: light.toggle
    service_data:
      entity_id: light.kitchen_spot
style: |
  .shortcuts {
    -webkit-filter: drop-shadow(0px 2px 5px #222);
    filter: drop-shadow(0px 2px 5px #222);
  }

[AlexxIT]

Probably needs a strong JavaScript expert. I don't have those skills.

[d3relict]

Probably needs a strong JavaScript expert. I don't have those skills.

based on a quick read of the js, it might be sufficient to check for equality in https://github.com/AlexxIT/WebRTC/blob/master/custom_components/webrtc/www/webrtc-camera.js#L631 before setting the value, so the contents are not erased on write.

[d3relict]

yeah, i just edited the js file in chrome devtools, and this simple check fixed the issue:

        this.renderTemplate('shortcuts', () => {
            const temp = this.config.shortcuts.map((value, index) => `
                <ha-icon data-index="${index}" icon="${value.icon}" title="${value.name}"></ha-icon>
            `).join('');
            if (shortcuts.innerHTML != temp) {
                shortcuts.innerHTML = temp;
            }
        });

[AlexxIT]

It's good suggestion.