Lovelace: Mini Media Player

Share your Projects! Dashboards & Frontend
2779

Just adding this for future tinkerers looking for a complete script. I adapted this to work while playing or paused (at least on an Apple TV):

- seek_interval:
    alias: Seek Interval
    fields:
      media_player:
        description: Media Player to be positioned.
        example: media_player.apple_tv_theater
      interval:
        description: Time in seconds from current position to be seeked. (+) Fast Forward. (-) Rewind.
        example: -10
    sequence:
      service: media_player.media_seek
      target:
        entity_id: "{{ media_player }}"
      data:
        seek_position:  >-
                        {% if (states('media_player.apple_tv_living_room') == 'playing')%}
                        {{(as_timestamp(now())-as_timestamp(state_attr(media_player, 'media_position_updated_at'))+state_attr(media_player, 'media_position'))|float+interval}}
                        {% else %}
                        {{state_attr(media_player, 'media_position')|float+interval}}
                        {% endif %}

Thanks for the running start!

2780

Hi,

i think that’s quite easy.
I Did it like that:

SCR-20221227-eg8

    shortcuts:
      label: Radiosender
      list:
        - type: source
          name: 1LIVE
          id: 1LIVE
          icon: mdi:radio

Kind regards

2781

Hey! Thanks for the great card!!! Its possible to show the speaker group everytime without push on the speaker icon? thank you :smile:

2782

Wow thanks so much! why did I knot think the use label:

2784

Hi there,
is there a way to present both volume change methods? i mean - the slider and the buttons?
Sometimes there is a need to change a value 1 and with slider it is difficult to do.

2785

hi Guys,

can you help me change the size of the player? I would like the mini media player to be the same size as the media control card.
what is the best way to go about it?

2786

Hi there,

A question, I made a web radio with 6 buttons to select/play the radio station,
Is it possible to set the text of the “Info”, it says ow “Streaming with…” but I would like to set the inf to the name of the radio station. Any help appreciated

image

2787

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…

2023-01-17 00_07_32-Dwains Dashboard – Home Assistant
2023-01-17 00_07_32-Dwains Dashboard – Home Assistant1276×337 274 KB

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…

2788

Volumio does not seem to support toggle. See here

2789

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…

2790

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

2791

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:

2792

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
2793

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

2023-01-17 225837
2023-01-17 225837756×1326 134 KB 

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
1 Like
2794

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 %}
2795

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.

2796

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?

2797

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

mini media player
mini media player1249×333 187 KB

2798

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

2799

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';
        ]]]