Help converting sensor into JavaScript for custom button card

Configuration Frontend
1

I am looking for help converting jinja template into javascript template for custom button-card.

It’s for the timer information in a media player card. I had previously used template sensors and used them as entities in the card:

{% set mp = state_attr('media_player.bedroom_hifi', 'media_position') %}
{% if mp == none %}
  00:00
{% elif (mp | int) < 3600 %}
  {{ (mp | int) | timestamp_custom('%M:%S') }}
{% elif (mp | int) > 3600 %}
  {{ (mp | int) | timestamp_custom('%-H:%M:%S', false) }}
{% else %}
  00:00
{% endif %}

Here is the template in custom button card that Google Gemini helped me to covert the template sensor into:

name: |
  [[[
    const mp = states['media_player.bedroom_hifi'].attributes.media_position;    
    if (mp === undefined) {
      return '00:00';
    } else if (mp < 3600) {
      return new Date(mp * 1000).toISOString().substr(14, 5);
    } else {
      return new Date(mp * 1000).toLocaleTimeString([], { hour12: false, hour: 'numeric', minute: '2-digit', second: '2-digit' });
    }
  ]]]

This is all great. And I now have a media player with timers for progress, duration and remaining all working. All I need extra is an automation to update the media player entities every second:

alias: Update Media Players
description: ""
trigger:
  - platform: time_pattern
    seconds: /1
condition:
  - condition: or
    conditions:
      - condition: state
        entity_id: media_player.bedroom
        state: playing
action:
  - service: homeassistant.update_entity
    data: {}
    target:
      entity_id:
        - media_player.bedroom

The problem is my Nvidia Shield. The media_position attribute does not update. I did successfully create a template sensor for the shield incorporating the media_position_updated_at entity:

{% set mp = state_attr('media_player.shield', 'media_position') %}
{% set mpua = state_attr('media_player.shield', 'media_position_updated_at') %}
{% if mp == none %}
  00:00
{% elif (mp | int) < 3600 %}
  {{ ( as_timestamp(now()) - as_timestamp(mpua) + mp ) | int | timestamp_custom('%M:%S') }}
{% elif (mp | int) > 3600 %}
  {{ ( as_timestamp(now()) - as_timestamp(mpua) + mp ) | int | timestamp_custom('%-H:%M:%S', false) }}
  {% else %}
  00:00
{% endif %}

For this sensor I had to update the sensor itself every second with the automation.

When I convert this sensor into JavaScript there is nothing left to add to the automation to update every second. Here is the template:

name: |
  [[[
    const mp = states['media_player.shield'].attributes.media_position;
    const mpua = states['media_player.shield'].attributes.media_position_updated_at;

    if (mp === undefined) {
      return '00:00';
    } else if (mp < 3600) {
      return new Date(mp * 1000).toLocaleTimeString([], { minute: '2-digit', second: '2-digit' });
    } else {
      return new Date(mp * 1000).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', second: '2-digit' });
    }
  ]]]

I hope this all makes sense. In short, I am looking for a way to template media position in a custom button card that updates every second, for an annoying media player that doesn’t like to update

Thank you for taking to the time to read this :hugs:

Here’s a video of the media player card