Real-Time media player progress bar

[damianeickhoff]

The progress bar for the media player, for ex. music, isn't real-time. It takes the duration and the progress from the Spotify intergration, but it updates around every 5 to 10 seconds.

What we need is that it takes the duration of the song and just counts from 0 until that duration is reached as long as the song is playing

Current code:

var num = states[entity.entity_id].attributes.media_position;
var den = states[entity.entity_id].attributes.media_duration;
var state = (num / den * 100).toFixed(2)

return `
<div>
<div style="background:var(--color-gold); height: 12px; width:${state}%"
</div>
</div
`

[ngocjohn]

https://community.home-assistant.io/t/hacasa-a-new-modern-dashboard/744334/19

[damianeickhoff]

@ngocjohn maybe you can help me out with this one. I implemented your code and looks to be working just fine. One thing I would like to change is the width of the bar. So I tried that and it's working perfectly. The one issue I got is that the bar itself will exceed the card.

The left one is how it now is, the right one is how it should be (is just static for visual).

I used your code, but made a style change so the bar is smaller.

    progress:
      - background-color: 'rgba(0,0,0,0.1)'
      - position: absolute
      - top: unset
      - bottom: 0px
      - height: 0.5rem
      - width: 100%
    bar:
      - background-color: '#00acc1'
      - position: absolute
      - bottom: 0px
      - left: 0%
      - top: unset
      - height: 0.5rem
      - z-index: 1
      - transition: 1s ease-out  

Hope you can help me out with this one 🙏

[damianeickhoff]

Seems like not a really stable solution. Maybe look into it another time.