States Not Automatically Updating in UI - Only works on page refresh

[traviscook21]

Checklist:

• [x] I updated to the latest version available
• [x] I cleared the cache of my browser

Release with the issue: 1.3.0 Last working release (if known): Unknown. Trying this for the first time. Browser and Operating System: MacOS Big Sur 11.0.1 Safari: Version 14.0.1 (16610.2.11.51.8) or Chrome: Version 87.0.4280.67 (Official Build) (x86_64)

Description of problem:

Similar to https://github.com/iantrich/config-template-card/issues/21, I'm seeing issue with the card not updating automatically. When I refresh the page manually, the card behavior updates correctly, but not until refresh happens. It's very possible that I'm using the entities: attribute incorrectly. I've tried a couple of different configurations.

I've tried to enter the chrome debugger and I've been able to find references in the shouldUpdate function where the hass and oldHass objects do have true and false for is_volume_muted but changed still comes back as false.

Am I doing something wrong or changes not picked up correctly in state attributes?

Here are the configs I've tried:

Using list vars:

type: 'custom:config-template-card'
variables:
  - 'states[''media_player.living_room_receiver''].attributes.is_volume_muted'
entities:
  - '${vars[0]}'
card:
  type: 'custom:roku-card'
  entity: media_player.roku_ultra
  tv: true
  volume_mute:
    tap_action:
      action: call-service
      service: media_player.volume_mute
      service_data:
        entity_id: media_player.living_room_receiver
        is_volume_muted: '${!vars[0]}'

Using Named Vars:

type: 'custom:config-template-card'
variables:
  MUTE_STATE: 'states[''media_player.living_room_receiver''].attributes.is_volume_muted'
entities:
  - '${MUTE_STATE}'
card:
  type: 'custom:roku-card'
  entity: media_player.roku_ultra
  tv: true
  volume_mute:
    tap_action:
      action: call-service
      service: media_player.volume_mute
      service_data:
        entity_id: media_player.living_room_receiver
        is_volume_muted: '${!MUTE_STATE}'

Explicit reference in entities:

type: 'custom:config-template-card'
variables:
  MUTE_STATE: 'states[''media_player.living_room_receiver''].attributes.is_volume_muted'
entities:
  - media_player.living_room_receiver
card:
  type: 'custom:roku-card'
  entity: media_player.roku_ultra
  tv: true
  volume_mute:
    tap_action:
      action: call-service
      service: media_player.volume_mute
      service_data:
        entity_id: media_player.living_room_receiver
        is_volume_muted: '${!MUTE_STATE}'

Explicit reference in entities to the state attribute

type: 'custom:config-template-card'
variables:
  MUTE_STATE: 'states[''media_player.living_room_receiver''].attributes.is_volume_muted'
entities:
  - 'states['media_player.living_room_receiver'].attributes.is_volume_muted'
card:
  type: 'custom:roku-card'
  entity: media_player.roku_ultra
  tv: true
  volume_mute:
    tap_action:
      action: call-service
      service: media_player.volume_mute
      service_data:
        entity_id: media_player.living_room_receiver
        is_volume_muted: '${!MUTE_STATE}'

[iantrich]

Entities should have an entity in it, not an attribute. It is then the entity that is watched for updates

[traviscook21]

~So the third example that I have there? That still wasn't causing the card to reload. I'll try again.~

Oof. That worked. Thanks for helping :)