Lovelace: Mini Media Player

Hi there,

I’m using this awesome card with a Volumio player. Everything works great except for the standby button. When pressing this I’m getting the following error…

Translated: Cannot call service media… Entity does not support this service.

Is it posible to connect a script behind this button? With this script I can at least turn of the reciever for example…

Volumio does not seem to support toggle. See here

Yes I already found that out. The question is… can we program that standby button differently. I would like for example Volumio to stop playing and my reciever to go into standby…

You could make a universal media player and use that in the UI. Universal Media Player - Home Assistant

Good one, yes that will do the trick I think. Again another whole evening of coding to do but hey… I’ts a hobby right :sweat_smile:

I am looking at ways to improve my interface and found this thread. I have sliders that show up depending on whether each Sonos media player is grouped. If grouped, the volume slider is there; if not, it just shows some text. See this thread. I’ve posted some sample YAML below:

For the button, conditional based on join state:

type: vertical-stack
cards:
  - type: conditional
    conditions:
      - entity: binary_sensor.sonos_living_room_joined_kitchen
        state: 'on'
    card:
      type: custom:button-card
      aspect_ratio: 2/1
      entity: media_player.sonos_living_room
      name: Living Room
      color_type: card
      show_name: true
      tap_action:
        action: call-service
        service: sonos.unjoin
        service_data:
          entity_id: media_player.sonos_living_room
      show_state: false
      state:
        - value: playing
          icon: mdi:speaker-wireless
          color: rgba(0,128,0,0.7)
        - value: paused
          color: rgba(0, 128, 0, .7)
          icon: mdi:speaker
        - value: idle
          color: rgba(0, 200, 0, .7)
          icon: mdi:speaker
        - value: unavailable
          color: rgba(200, 0, 0, .7)
          icon: mdi:close-circle-outline
      styles:
        grid:
          - grid-template-areas: '"i" "n"'
          - grid-template-rows: 2fr 20%
        icon:
          - color: white
          - height: 35px
          - padding-top: 5px
        card:
          - height: 80px
        name:
          - font-size: 14px
          - color: white
  - type: conditional
    conditions:
      - entity: binary_sensor.sonos_living_room_joined_kitchen
        state: 'off'
    card:
      type: custom:button-card
      aspect_ratio: 2/1
      entity: media_player.sonos_living_room
      name: Living Room
      color_type: card
      show_name: true
      tap_action:
        action: call-service
        service: sonos.join
        service_data:
          entity_id: media_player.sonos_living_room
          master: media_player.sonos_kitchen
      show_state: false
      state:
        - value: idle
          color: rgba(169, 169, 169, .7)
          icon: mdi:speaker
        - value: playing
          icon: mdi:speaker-wireless
          color: rgba(200, 200, 0, .7)
        - value: paused
          color: rgba(169, 169, 169, .7)
          icon: mdi:speaker
        - value: unavailable
          color: rgba(200, 0, 0, .7)
          icon: mdi:close-circle-outline
      styles:
        grid:
          - grid-template-areas: '"i" "n"'
          - grid-template-rows: 2fr 20%
        icon:
          - color: white
          - height: 35px
          - padding-top: 5px
        card:
          - height: 80px
        name:
          - font-size: 14px
          - color: white
view_layout:
  grid-area: button1

For the slider, based on the same conditions:

type: conditional
conditions:
  - entity: binary_sensor.sonos_living_room_joined_kitchen
    state: 'on'
card:
  hide:
    controls: true
    source: true
    icon: true
    power: true
    info: true
    progress: true
    name: true
    mute: true
  group: true
  type: custom:mini-media-player
  hide-if-unavailable: true
  artwork: none
  entity: media_player.sonos_living_room
view_layout:
  grid-area: volume1

When pressed, the buttons run a script that either joins or unjoins based on current join state. That changes the state of the condition and the color of the button/visibility of the slider.

EDIT: I’m coming back to this because I changed the way this worked a long time ago, and I no longer use a script. The purpose of the script was to evaluate the grouped state of the speaker before executing a join or unjoin. But since I’m using a conditional to display the button card… I already know whether it’s joined or unjoined, so the script is no longer necessary. The YAML above is correct.

1 Like

Is there a way to get the url of the cover to apply it to the entire card?

And I will share my setup. 5 Linkplay streamers. Two of them can be used as a master device (the others can be used separately, but this is not necessary). If they are idle, then the cards are collapsed.
The bottom row of buttons is a template switchs (run/stop local music service, on/off multi room for all device) and separate multiroom control buttons (run scripts). You can unify, but I’m lazy

type: custom:vertical-stack-in-card
cards:
  - type: entities
    entities:
      - type: custom:state-switch
        entity: template
        template: '{{ is_state_attr(''media_player.soundzal'', ''source'', ''Soundcard'') }}'
        states:
          'true':
            type: custom:mini-media-player
            entity: media_player.soundzal
            group: true
            hide:
              power: true
              icon: true
              shuffle: true
              play_pause: true
              info: true
              play_stop: true
              mute: null
            replace_mute: stop
            speaker_group:
              platform: linkplay
              show_group_count: true
              entities:
                - entity_id: media_player.soundzal
                  name: Zal
                - entity_id: media_player.soundoffice
                  name: Office
                - entity_id: media_player.soundkchn
                  name: Kitchen
                - entity_id: media_player.soundbedroom
                  name: Bedroom
          'false':
            type: custom:mini-media-player
            entity: media_player.soundzal
            group: true
            hide:
              icon: true
              controls: true
              progress: true
              power: true
              shuffle: true
              source: true
            replace_mute: stop
            source: icon
      - type: custom:state-switch
        entity: template
        template: '{{ is_state_attr(''media_player.soundbedroom'', ''source'', ''Spotify'') }}'
        states:
          'true':
            type: custom:mini-media-player
            entity: media_player.soundbedroom
            group: false
            artwork: full-cover
            hide:
              icon: true
              power: true
              shuffle: false
            replace_mute: stop
          'false':
            type: custom:mini-media-player
            entity: media_player.soundbedroom
            group: true
            hide:
              source: true
              icon: true
              controls: true
              progress: true
              power: true
              shuffle: true
            replace_mute: stop
            source: icon
      - type: custom:mini-media-player
        entity: media_player.soundkchn
        group: true
        hide:
          source: true
          icon: true
          info: true
          controls: true
          progress: true
          power: true
          name: false
          mute: false
        replace_mute: stop
      - type: custom:mini-media-player
        entity: media_player.soundoffice
        group: true
        hide:
          source: true
          icon: true
          info: true
          controls: true
          progress: true
          power: true
          name: false
          mute: false
        replace_mute: stop
      - type: custom:mini-media-player
        entity: media_player.soundwm
        group: true
        hide:
          icon: true
          controls: true
          progress: true
          power: true
          name: false
          mute: false
        replace_mute: stop
        sound_mode: icon
        shortcuts:
          column_height: 40
          columns: 6
          buttons:
            - cover: /local/2.jpg
              type: service
              id: linkplay.preset
              data:
                entity_id: media_player.soundbedroom
                preset: 9
            - cover: /local/2022.png
              type: service
              id: linkplay.preset
              data:
                entity_id: media_player.soundbedroom
                preset: 5
            - cover: /local/10yr.png
              type: service
              id: linkplay.preset
              data:
                entity_id: media_player.soundbedroom
                preset: 8
            - cover: /local/sptd.png
              type: service
              id: linkplay.preset
              data:
                entity_id: media_player.soundbedroom
                preset: 4
            - cover: /local/3.jpg
              type: service
              id: linkplay.preset
              data:
                entity_id: media_player.soundbedroom
                preset: 6
  - type: horizontal-stack
    cards:
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: switch.yamusic
        icon_height: 22px
        icon: yandex:music
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: switch.multiroom
        icon: mdi:speaker-multiple
        icon_height: 21px
      - type: custom:button-card
        color_type: icon
        entity: media_player.soundkchn
        show_name: false
        show_icon: true
        styles:
          card:
            - height: 52px
        icon: mdi:faucet-variant
        color: rgb(83, 115, 155)
        state:
          - operator: template
            value: '[[[ return entity.attributes.slave == true ]]]'
            color: rgb(241, 193, 61)
        tap_action:
          action: call-service
          service: script.mr_joinkchn_2
      - type: custom:button-card
        color_type: icon
        entity: media_player.soundoffice
        show_name: false
        show_icon: true
        styles:
          card:
            - height: 50px
        icon: mdi:chair-rolling
        color: rgb(83, 115, 155)
        state:
          - operator: template
            value: '[[[ return entity.attributes.slave == true ]]]'
            color: rgb(241, 193, 61)
        tap_action:
          action: call-service
          service: script.mr_joinkchn
      - type: custom:button-card
        color_type: icon
        entity: media_player.soundbedroom
        show_name: false
        show_icon: true
        styles:
          card:
            - height: 52px
        icon: mdi:bed-queen-outline
        color: rgb(83, 115, 155)
        state:
          - operator: template
            value: >-
              [[[ return (entity.attributes.slave == true) && (entity.state ===
              'playing') ]]]
            color: rgb(241, 193, 61)
          - operator: template
            value: '[[[ return (entity.state === ''playing'') ]]]'
            color: rgb(255, 152, 0)
        tap_action:
          action: call-service
          service: script.mr_joinbedroom
      - type: custom:button-card
        color_type: icon
        entity: media_player.soundzal
        show_name: false
        show_icon: true
        styles:
          card:
            - height: 50px
        icon: mdi:speaker
        color: rgb(83, 115, 155)
        state:
          - operator: template
            value: '[[[ return (entity.attributes.slave == true) ]]]'
            color: rgb(241, 193, 61)
          - operator: template
            value: >-
              [[[ return (entity.state == 'playing') &&
              ((entity.attributes.master == true) || (entity.attributes.source
              != 'Soundcard'))]]]
            color: rgb(255, 152, 0)
        tap_action:
          action: call-service
          service: script.mr_unjoinbtn
      - type: custom:button-card
        color_type: icon
        entity: media_player.soundwm
        show_name: false
        show_icon: true
        styles:
          card:
            - height: 50px
        icon: mdi:motion-play-outline
        color: rgb(83, 115, 155)
        state:
          - operator: template
            value: '[[[ return entity.attributes.slave == ''1'' ]]]'
            color: rgb(241, 193, 61)
        tap_action:
          action: call-service
          service: script.mr_joinwiim
2 Likes

Hi all,

is there a way to change the icon and color depending on a state of the device?

I’ve tried power_state: true but it does nothing. On template cards I use the following code but I think it is not integrated inthis card right?

   icon: |-
      {% set state=states('light.all_lights') %}
        {% if state=='on' %}
        mdi:lightbulb-group
        {% else %}
        mdi:lightbulb-group-off-outline
        {% endif %}
    icon_color: |-
      {% set state=states('light.all_lights') %}
        {% if state=='on' %}
        yellow
        {% elif state=='off' %}
        gray
        {% else %}
        {% endif %}

You’ll need to look at the states of your media_player entity to see what you need. Many don’t have on/off, they have states like idle, playing, paused etc.

Yes I know that :slight_smile: Above code was just an exmaple of a different card where this function is working. My point/question is: does this option work or not in mini media player?

Is it possible to have a dropdown for the media shortcuts instead of the buttons?

THANKS!! i came here looking for this.
I wanted to make the background none, because using this in a custom button card.

hey :wave:
i want to use one button to “toggle” my “netflix”.
is it possible to work with an if-else query?

- icon: mdi:netflix
      type: script
      id: |
        [[[
          if states['media_player.fire_tv_192_168_178_168'] == 'on'
            return 'script.stop_netflix';
          else
            return 'script.start_netflix';
        ]]]

i think i found a solution…?!
i changed my script…
I think this is a good approach.

alias: start stop netflix
sequence:
  - service: media_player.select_source
    target:
      entity_id: media_player.fire_tv_192_168_178_168
    data:
      source: |
        {% if is_state("media_player.fire_tv_192_168_178_168", "playing") %}
          !com.netflix.ninja
        {% elif is_state("media_player.fire_tv_192_168_178_168", "idle") %}
          com.netflix.ninja
        {% elif is_state("media_player.fire_tv_192_168_178_168", "paused") %}
          !com.netflix.ninja
        {% elif is_state("media_player.fire_tv_192_168_178_168", "standby") %}
          com.netflix.ninja
        {% elif is_state("media_player.fire_tv_192_168_178_168", "off") %}
          com.netflix.ninja
        {% else %} {% endif %}
mode: single

Hi. im having troubles getting the Source icon showing on my card


image

Hi all!
Is there a way to have all the sonos players in a group be automatically grouped when using a shortcut button?

A shortcut can execute a script, so use the media_player.join service

Thank you, ok I’ll try that.
That would mean one script per shortcut (in my case different sonos favorites), right?

When I play certain radio links, I do NOT get data through about “media_title”.
I don’t know why this is happening and if I can hardcode this info.

If I play
http://live-icy.gslb01.dr.dk/A/A09H.mp3
https://stream.anr.dk/anr
https://webradio.classicfm.dk/classichorsens.aac
Then it’s working fine, I get the Media_title…

But if I use one of these, it plays - but I don’t get any info about the “Media_title”
'http://edge-bauerdk-05-gos2.sharp-stream.com/thevoice_dk_tunein_mp3?’
https://live-bauerdk.sharp-stream.com/thevoice_dk_mp3

I don’t get it, why there is no “media_title”

I have this test button, i get the sound, artist, music number - but I don’t get the “media_title” so I can see that info inside my media_player.bluesound_stue attrributes:

show_name: true
show_icon: true
type: button
tap_action:
  action: call-service
  service: media_player.play_media
  target:
    entity_id: media_player.bluesound_stue
  data:
    media_content_id: https://live-bauerdk.sharp-stream.com/thevoice_dk_mp3
    media_content_type: music
    extra:
      title: The Voice
      thumb: http://homeassistant.local:8123/local/image/radio/nova.jpg
name: The Voice
icon: mdi:speaker
show_state: true
entity: media_player.bluesound_stue

Thanks for this really awesome. Is there any way to swap the volume and seek/progress bars?
Also would be awesome if there was a way to integrate the spotcast selector so the source input could include chromecast devices.