Custom-mini-media-player highlight button that was selected

[uncapped_shady]

Hi All,

I am wondering if it would be possible to highlight a button in the custom-mini-media-player that was selected so that I know what radio station is currently playing?

[uncapped_shady]

No one have any idea how to achieve this?

[parautenbach (Pieter Rautenbach)]

A few things:

What have you tried or read?

Be patient on the forums — most people uses their free time to help.

Have you searched the main post for this card?
https://community.home-assistant.io/search?context=topic&context_id=68459&q=Highlight%20&skip_context=false

For example:

Lovelace: Mini Media Player

Not possible in shortcuts with service/script calls, if the source changed would be within the same entity as the card entity this would have been possible. See the attribute option in the shortcuts object. The reason behind this is because we don’t watch or keep track of state changes happening outside of the card entity. If you need more advanced buttons I recommend checking out the custom button-card. Combining a mini-media-player card (with the group option set to true) with a couple of b…

And:

Lovelace: Mini Media Player

Hiding either volume and/or controls will collapse the card into a more “compact mode”, this does by default hide the source & only displays the icon, use the option source: full to override this and display the full source name. To highlight the active shortcut, see the below link (examples inside). Did you try the background option?

[EdwardTFN (Edward Firmo)]

If you can share the yaml used to create your card we might be able to play from that…

Have you tried to change the background color of a specific button? If not supported by the card you are using then card-mod could be a way:

GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any...

[uncapped_shady]

Hi there,

Here is the YAML I used

type: custom:mini-media-player
entity: media_player.googlehome0005
shortcuts:
  buttons:
    - id: https://live.jacarandafm.com/jacarandahigh.mp3
      image: http://cdn-profiles.tunein.com/s6410/images/logod.jpg
      name: Jacaranda FM
      type: music
    - id: >-
        https://playerservices.streamtheworld.com/api/livestream-redirect/FM947.mp3
      image: https://cdn-radiotime-logos.tunein.com/s6400d.png
      name: 94.7 FM
      type: music
    - id: >-
        https://playerservices.streamtheworld.com/api/livestream-redirect/5FMAAC.aac
      image: https://cdn.webrad.io/images/logos/radiosa-org/5fm.png
      name: 5FM
      type: music
    - id: https://edge.iono.fm/xice/57_medium.aac
      image: http://cdn-profiles.tunein.com/s151818/images/logod.png
      name: HOT FM
      type: music
  columns: 4

I tried to use show_state: and show_state_color: but that did nothing to the button.

Appreciate the assistance guys.

[uncapped_shady]

Not to worry, I have found a different solution using templates rather.

[uncapped_shady]

I have added additional template info for incase I cast Spotify through my speaker in my room to also show the name of the song and artist. My code is very sloppy as I am no good at this but I will post it here in case there are any other people who would like to make use of it or even alter the code to look and possibly perform better.

type: vertical-stack
cards:
  - type: markdown
    content: >-
      <font color=cyan><font size=5>{% if
      state_attr('media_player.googlehome0005', 'media_content_id') ==
      "https://live.jacarandafm.com/jacarandahigh.mp3" %}

      Jackaranda FM is Playing

      {% elif state_attr('media_player.googlehome0005', 'media_content_id') ==
      "https://playerservices.streamtheworld.com/api/livestream-redirect/FM947.mp3"
      %}

      94.7 Highveld Stereo is playing

      {% elif state_attr('media_player.googlehome0005', 'media_content_id') ==
      "https://playerservices.streamtheworld.com/api/livestream-redirect/5FMAAC.aac"
      %}

      5FM is playing

      {% elif state_attr('media_player.googlehome0005', 'media_content_id') ==
      "https://edge.iono.fm/xice/57_high.aac" %}

      HOT FM is playing

      {% elif state_attr('media_player.googlehome0005','app_name') ==
      'Spotify'%}

      Spotify: {{state_attr('media_player.googlehome0005','media_title',)}} -
      {{state_attr('media_player.googlehome0005','media_artist')}}

      {% else %} <font color=orange>Nothing is currently playing</font>

      {% endif %}</font>
    title: Stefbedroom Speaker Status
  - type: custom:mini-media-player
    entity: media_player.googlehome0005
    shortcuts:
      buttons:
        - id: https://live.jacarandafm.com/jacarandahigh.mp3
          image: http://cdn-profiles.tunein.com/s6410/images/logod.jpg
          name: Jacaranda FM
          type: music
        - id: >-
            https://playerservices.streamtheworld.com/api/livestream-redirect/FM947.mp3
          image: https://cdn-radiotime-logos.tunein.com/s6400d.png
          name: 94.7 FM
          type: music
        - id: >-
            https://playerservices.streamtheworld.com/api/livestream-redirect/5FMAAC.aac
          image: https://cdn.webrad.io/images/logos/radiosa-org/5fm.png
          name: 5FM
          type: music
        - id: https://edge.iono.fm/xice/57_high.aac
          image: http://cdn-profiles.tunein.com/s151818/images/logod.png
          name: HOT FM
          type: music
      columns: 4
    artwork: Default
    source: Default
    info: Default
  - type: markdown
    content: >-
      <font color=cyan><font size=5>{% if
      state_attr('media_player.googlehome0339', 'media_content_id') ==
      "https://live.jacarandafm.com/jacarandahigh.mp3" %}

      Jackaranda FM is Playing

      {% elif state_attr('media_player.googlehome0339', 'media_content_id') ==
      "https://playerservices.streamtheworld.com/api/livestream-redirect/FM947.mp3"
      %}

      94.7 Highveld Stereo is playing

      {% elif state_attr('media_player.googlehome0339', 'media_content_id') ==
      "https://playerservices.streamtheworld.com/api/livestream-redirect/5FMAAC.aac"
      %}

      5FM is playing

      {% elif state_attr('media_player.googlehome0339', 'media_content_id') ==
      "https://edge.iono.fm/xice/57_high.aac" %}

      HOT FM is playing

      {% else %} <font color=orange>Nothing is currently playing</font>

      {% endif %}</font>
    title: Office Speaker Status
  - type: custom:mini-media-player
    entity: media_player.googlehome0339
    shortcuts:
      buttons:
        - id: https://live.jacarandafm.com/jacarandahigh.mp3
          image: http://cdn-profiles.tunein.com/s6410/images/logod.jpg
          name: Jacaranda FM
          type: music
        - id: >-
            https://playerservices.streamtheworld.com/api/livestream-redirect/FM947.mp3
          image: https://cdn-radiotime-logos.tunein.com/s6400d.png
          name: 94.7 FM
          type: music
        - id: >-
            https://playerservices.streamtheworld.com/api/livestream-redirect/5FMAAC.aac
          image: https://cdn.webrad.io/images/logos/radiosa-org/5fm.png
          name: 5FM
          type: music
        - id: https://edge.iono.fm/xice/57_high.aac
          image: http://cdn-profiles.tunein.com/s151818/images/logod.png
          name: HOT FM
          type: music
      columns: 4
    artwork: Default
    source: Default
    info: Default
  - type: markdown
    content: >-
      <font color=cyan><font size=5>{% if
      state_attr('media_player.googlehome2248', 'media_content_id') ==
      "https://live.jacarandafm.com/jacarandahigh.mp3" %}

      Jackaranda FM is Playing

      {% elif state_attr('media_player.googlehome2248', 'media_content_id') ==
      "https://playerservices.streamtheworld.com/api/livestream-redirect/FM947.mp3"
      %}

      94.7 Highveld Stereo is playing

      {% elif state_attr('media_player.googlehome2248', 'media_content_id') ==
      "https://playerservices.streamtheworld.com/api/livestream-redirect/5FMAAC.aac"
      %}

      5FM is playing

      {% elif state_attr('media_player.googlehome2248', 'media_content_id') ==
      "https://edge.iono.fm/xice/57_high.aac" %}

      HOT FM is playing

      {% else %} <font color=orange>Nothing is currently playing</font>

      {% endif %}</font>
    title: Lapa Speaker Status
  - type: custom:mini-media-player
    entity: media_player.googlehome2248
    shortcuts:
      buttons:
        - id: https://live.jacarandafm.com/jacarandahigh.mp3
          image: http://cdn-profiles.tunein.com/s6410/images/logod.jpg
          name: Jacaranda FM
          type: music
        - id: >-
            https://playerservices.streamtheworld.com/api/livestream-redirect/FM947.mp3
          image: https://cdn-radiotime-logos.tunein.com/s6400d.png
          name: 94.7 FM
          type: music
        - id: >-
            https://playerservices.streamtheworld.com/api/livestream-redirect/5FMAAC.aac
          image: https://cdn.webrad.io/images/logos/radiosa-org/5fm.png
          name: 5FM
          type: music
        - id: https://edge.iono.fm/xice/57_high.aac
          image: http://cdn-profiles.tunein.com/s151818/images/logod.png
          name: HOT FM
          type: music
      columns: 4
    artwork: Default
    source: Default
    info: Default