Lovelace: Mini Media Player

Hi team.
Is there any way I can get volume sliders beside each speaker zone? Perhaps only if that zone is ‘on’.
Here is my code.

Thanks.


1 Like

I have 2 sonos speakers that no matter what I try they will not show up on the card as they should…

Here’s my config… I’m sure it’s something I’m overlooking that’s simple but would appreciate some help! [I’ve changed platform that currently says media_player to sonos and nothing changes]

- type: 'custom:mini-media-player'
        entity: media_player.sonos_pair
        name: John's House Jams
        icon: mdi:speaker        
        volume_step: 1
        sync_volume: true
        artwork: cover
        hide:
          power: true
          volume: false
          progress: false
          icon_state: false
          state_label: false
          prev: true
          next: true
        speaker_group:
          platform: media_player
          show_group_count: true
          source: full
          sound_mode: full
          info: scroll
          entities:
            - entity_id: media_player.sonos_five
              name: Front Speaker
            - entity_id: media_player.unnamed_room
              name: Rear Speaker

Thank you to @Louis1 for posting your config… the above issue was an indention issue!!! Fixed!! :slight_smile: PS [EDITED the above config it’s now correct]

Hello all,

Could I possibly get some help on one the below issues. I really don’t know what is going on or causing it. Below is a screenshot of the UI when I attempt to use the mini media player custom card which was installed through HACS. There are no input abilities on the GUI and the input area where you put the entity you would like is completely missing (In my instance, there is a list of all media player entities in its place that). Essentially, I can interact with virtually no input areas. Thank you all for any guidance that you can give.

You’ve got to choose one, click on the media player you want to use!

So on this one, those things at the top aren’t clickable for some reason.

Yeah, they should be.

Hmm, let me look at this again.

Make sure you refresh your browser, ctrl-f5.

is it possible that the gui portion may be broke, i’ve read alot of the custom lovelaces don’t have a fully built out gui. I’m messing with this as we speak.

Its just not acting right. I am clearing cache/ refreshing now

Is it possible, that I have so many media players that it is flipping it out? Refresh seems to have done nothing for me on this one.

Maybe. Use the code editor.

Would anyone else have any ideas as to what could be causing these issues? @kalkih I’m honestly at a loss and don’t know what else to look into/ check

Use the code editor.

So, something ended up being weird with this. I ended up deleting every lovelace custom downloaded from HACS (luckily, I really wasn’t using any of them). Rebooted HA and then when I went back in, downloaded only mini media player from HACS and the GUI looked proper. I don’t know if it’s possible but I almost wander if one of the custom lovelace cards I had was interfering with that one. Anyways, it’s corrected now so I guess that’s all that matters. Thank you again for the help you have given me on the couple of things I had going on. Very helpful!!

There has also been an update for this card in the last day or so, so you may have got a newer and better version in the process. Glad you got it working anyway.

Hi,

Have problem with my image the first “full-cover” artwork got bright bacground image. If change it to “cover” get pallid image. Need bright image in “cover” too. Please help.


Is it possible to have more than one label in the shortcuts?

After lots of trial and error I was able to get the sensor.sonos_favorites into the custom:mini-media-player shortcuts:

type: custom:auto-entities
card:
  type: entities
filter:
  template: |

    {
      'entity': 'media_player.kitchen',
      'type': 'custom:mini-media-player',
      'name': 'Sonos',
      'group': 'true',
      'source': 'icon',
      'hide': {
          'volume': True
        },
      'shortcuts':{
        'columns': 3,
        'buttons':
          [
            {%- for media_id, station in state_attr("sensor.sonos_favorites", "items").items()  -%}
              {{ {
                'name': station,
                
                'type': 'service',
                'id': 'media_player.play_media',
                'data':
                  
                    {
                      'entity_id': 'media_player.kitchen',
                      'media_content_id': media_id,
                      'media_content_type': 'favorite_item_id'
                    }
                  
              } }},
            {%- endfor -%}
        ],

        }
      

    },

If anyone knows how to get the image from the media browser it would be great to put that on the shortcut button too!

Hope this helps.

6 Likes

Have you tried scripts? Seems a little easier and shortcuts work with images. Hopefully this will help as well.

Script example:

sequence:
  - service: media_player.play_media
    target:
      entity_id: media_player.gym
    data:
      media_content_id: FV:2/26
      media_content_type: favorite_item_id
    metadata:
      title: 90s90s Hiphop
      thumbnail: >-
        https://sonos_generated_url
      media_class: genre
      children_media_class: null
      navigateIds:
        - {}
        - media_content_type: favorites
          media_content_id: ''
        - media_content_type: favorites_folder
          media_content_id: object.item.audioItem.audioBroadcast
mode: single
icon: mdi:radio-tower

Cards example:

type: vertical-stack
cards:
  - type: custom:mini-media-player
    entity: media_player.gym
    group: true
    hide:
      volume: true
      name: true
      next: true
      prev: true
      play_pause: true
      info: true
      power: true
      shuffle: true
      icon: true
      progress: true
    shortcuts:
      columns: 3
      buttons:
        - icon: mdi:radio-tower
          type: script
          id: script.classicrock
          name: Classic Rock
        - icon: mdi:radio-tower
          type: script
          name: 90sHipHop
          id: script.90shiphop
        - icon: mdi:radio-tower
          name: Greatest Hits
          type: script
          id: script.greatesthits
      name: Gym
    artwork: material
  - type: custom:mini-media-player
    entity: media_player.gym
    source: icon
    artwork: full-cover
    replace_mute: stop
    info: short
    hide:
      power: true
    group: true

Screenshot of cards: