Lovelace: Mini Media Player

Hi:
I have a questions that I have not found a way to solve, I hope someone can help me.

When one of the shortcuts is active I would like the color to be orange. For some reason it changes to orange for less than a second and turns white quickly. It may be something in the theme but I don’t know what the variable is.

        type: custom:mini-media-player
        volume_stateless: false
        hide:
          power: false
          source: true
          icon: true
          name: true
          play_pause: true
          prev: true
          next: true
        shortcuts:
          hide_when_off: false
          attribute: source
          columns: 6
          buttons:
            - icon: si:netflix
              type: source
              id: Netflix
            - icon: si:youtube
              type: source
              id: YouTube
            - icon: mdi:movie
              type: source
              id: Disney+
            - icon: si:hbo
              type: source
              id: HBO Max
            - icon: si:primevideo
              type: source
              id: Prime Video
            - icon: si:hulu
              type: source
              id: Hulu
        artwork: material
        toggle_power: true
        entity: media_player.living_room_tv
        name: Living Room TV

my card:

Thanks!!!

Card-Mod is your way to go if you ask me.
I don’t know what the correct condition would be in your case, but this works for me.

card_mod:
  style:
    mmp-shortcuts $: |
      mmp-button:nth-of-type(1) {
        {{ iif(<whatever condition>),"background-color: var(--accent-color)") }} ;
      }
      mmp-button:nth-of-type(2) {
        {{ iif(<whatever condition>),"background-color: var(--accent-color)") }} ;
      }
      ... repeat for every button ...
      mmp-button:nth-of-type(6) {
        {{ iif(<whatever condition>),"background-color: var(--accent-color)") }} ;
      }

Edit:
I think a condition/if-then like

iif(is_state_attr("media_player.living_room_tv", "source", "Netflix"),"background-color: var(--accent-color)")

Thanks for the help. Unfortunately it’s still the same. Apparently it has something to do with the artwork using the parameters. If I use “artwork: none” everything works correctly, if I use “artwork: material” the background color of the buttons is affected and only the hdmi that does not have automatic artwork worked. For example the Mac button is the only one that turns orange when active.

type: custom:mini-media-player
entity: media_player.living_room_tv
name: Living Room TV
volume_stateless: false
hide:
  power: false
  source: true
  icon: true
  name: false
  controls: true
  volume: false
shortcuts:
  hide_when_off: false
  columns: 6
  attribute: source
  buttons:
    - cover: /local/logos/netflix.png
      type: source
      id: Netflix
    - cover: /local/logos/youtube.png
      type: source
      id: YouTube
    - image: /local/logos/disney.png
      type: source
      id: Disney+
    - cover: /local/logos/hbo.png
      type: source
      id: HBO Max
    - image: /local/logos/prime_video.png
      type: source
      id: Prime Video
    - image: /local/logos/apple_color.png
      type: source
      id: Mac
artwork: none
toggle_power: true
card_mod:
  style: |
    mmp-shortcuts $: |
      mmp-button:nth-of-type(1) {
        {{ iif(is_state_attr("media_player.living_room_tv", "source", "Netflix"),"background-color: var(--accent-color)") }}
      }

Netflix Selected with “artwork: material”

Netflix Selected with “artwork: none”

Mac Selected with “artwork: material”

1 Like

Has anyone found a way to keep the grouping options open all the time?

I want individual controls on one side for each player then easy access to grouping without having to tap the little group button.

Thanks!

Hi all.

Its been a while since i ran my home assistant vm. Since spinning it back up ive noticed i no longer get artwork on my 2 smart tvs when using apps like netflix and hulu. Is anyone else experiencing this?

trying to setup radio fm button for Alexa Echo device.
when using this code then Alexa would say
" TTS can only be called notify.alexa_media service " any idea how to create a button to play FM radio stream on Alexa device?

type: custom:mini-media-player
entity: media_player.echo
artwork: cover
info: short
shortcuts:
  buttons:
    - name: FunRadio
      icon: mdi:radio
      type: music
      id: https://stream.funradio.sk:18000/fun128.mp3
1 Like

Is it possible to use template in entity value?
I know there is another custom component, config-template-card, that I can use to manage template but I’m looking for a “native” use of data template.
With config-template-card I have some issues about update of the mini-media-player card.
Thank you

I do it wiz lovelace_gen https://github.com/thomasloven/hass-lovelace_gen

Here my example

I’m using mini-media-player with synchronized squeezelite players but there is a number added to the name of player as you can see below (+1 after Laptop)

Immagine 2022-07-19 184437
What is it?
How can I remove it?

I think the +1 is because it is synced to one other player. Why do you want to remove it?

Ok, thank you.
Just to have a clean name but it’s not so relevant. I suppose this is a feature related to Logitech Media Server integration since there was no indication when I used snapcast integration for synchronized multi-room audio system.

There is an option to show the number of the speakers

show_group_count

Would you mind sharing this code?

Great card you got there. I copied it :smiley:
But I can’t seem to get the cover images to load in the card. I have the logos stored in /local/logos.
How did you manage to get this working?

Can you please help me with spotify icon.

I have two entities within mini media player:
Media_player.spotify and media_player.denon

Spotify icon is green when idle and white when playing.

Denon icon is white when idle and green when on

When i keep subcodes still but only swap entities nothing changes

It is like type of the spotify icon is different. I am going crazy

I would love some help triggering a scene from a shortcut button. Here is my config but its not calling the scene:

shortcuts:
      columns: 4
      buttons:
        - name: Top 50
          type: playlist
          id: spotify:user:[redacted]:playlist:37i9dQZEVXbLRQDuF5jeBp
          data:
            - action:
                service: scene.turn_on
                target:
                  entity_id: scene.turnondenon

image

I just cant make it to work. Im so new at this.

Installed via HACS

image

Can anybody help me pls.

When you install via HACS you don’t need to manually add the resource. Those instructions are under ‘manual install’. Remove that and refresh your browser (HACS would have asked you to do that after adding the card to your HACS library).

There are some fairly straightforward fixes needed for your code, but actually it’s not 100% clear what your code is trying to achieve - do you want your button to play a Spotify playlist and set a scene?

You will either have to create 2 separate buttons, one for each task, or create a script that plays the playlist and sets the scene, then call that script from your button.

yes thanks @reste_narquois I am trying to play a spotify playlist and call a scene. The scene just turns on my denon receiver and sets it to the correct input. Still new to all of this but I am reading a script may be the best option here. Will do so more digging.