Lovelace: Mini Media Player

StefanForslund · April 14, 2021, 9:41am

Hello everyone!

I’m new to the world of HA and it truly is amazing, coming over from a SmartThings and Philips Hue based system. I’m just getting to set everything up and been tinkering with this player and I almost got it to where I want it.

My questions are;

Is it possible to make the artwork go out to the edges on both sides and on the top? I don’t fancy that border.

In order to be able to control my Sonos speakers separate volume I had to group them in the Sonos app, but when I did that it added the ‘+2’ after all the names. How can I get rid of this?

Regarding the info of the song, is it possible to have the artist on top row and title of a second row intead of it all being on one row?

I think that’s all for now. It feels like these things are done in CSS, but I might be wrong?

Thanks in advance!

kongo09 · April 19, 2021, 8:31pm

As @parautenbach explained, you need to use card-mod which can bring a CSS injection option into other cards. Here is a crude example of how I use it to style my own version of mini-media-player in combination with mediacontrol to browse my music. Don’t be confused, it’s overly complicated but illustrates the power of card-mod:

type: 'custom:stack-in-card'
cards:
  - type: 'custom:mini-media-player'
    entity: media_player.wohnzimmer_squeeze
    artwork: none
    icon: 'mdi:music'
    hide:
      volume: true
      power: false
      source: true
      progress: true
      info: true
    card_mod:
      style: |
        ha-card div.mmp-player {
          padding-bottom: 0px;
        }
        ha-card div.mmp-player__adds {
          margin-left: 48px !important;
        }
  - type: media-control
    entity: media_player.wohnzimmer_squeeze
    card_mod:
      style: |
        paper-progress {
          display: none;
        }
        div.media-info {
          display: none;
        }
        div.top-info {
          display: none;
        }
        div.background {
          display: none;
        }
        ha-icon-button {
          display: none;
        }
        mwc-icon-button {
          margin-right: 12px;
        }
        div.title-controls {
          padding: 0 0 0px;
        }
        div.player {
          color: inherit !important;
        }
        div.off {
          display: none;
        }
  - type: 'custom:mini-media-player'
    entity: media_player.wohnzimmer_squeeze
    hide:
      volume: true
      power: true
      source: true
      name: true
      info: false
      controls: true
      progress: false
      icon: true
      state_label: true
    card_mod:
      style: |
        ha-card.--inactive .mmp-player {
          padding: 0px !important;
        }
        ha-card div.mmp-player {
          padding-top: 0px;
        }
        ha-card div.entity__info__media {
          color: var(--mmp-active-color);
          padding-left: 48px;
        }
        mmp-powerstrip {
          display: none;
        }
  - type: 'custom:mini-media-player'
    entity: media_player.wohnzimmer_squeeze
    name: Spotify
    artwork: full-cover-fit
    hide:
      volume: true
      power: true
      source: true
      name: true
      info: true
      controls: true
      progress: true
      icon: true
      state_label: true
    card_mod:
      style: |
        ha-card.--inactive .mmp-player {
          padding: 0px !important;
        }
        ha-card .mmp-player {
          padding: 0px;
        }

results in the following for switched-off state:

and this while playing music:

P.S.: I feel tempted to use the power of button-card to overlay the media browse button with the title and progress display…

HomeTrainee · April 20, 2021, 10:33am

Thank you very much for you post and help! The is for sure the solution.

fair_dinkum · April 22, 2021, 7:18am

In the documentation on github it is stated:
source: Change source select appearance, icon for just an icon, full for the full source name.

Question: how do I define the icon for a source?! (not the entity!)

Second question: is it possible to change the displaying name of a (playing) source? The name of the radio station that I’m playing is very long and occupying too much real estate.

Thank you

nickrout · April 22, 2021, 7:08pm

First of all post your code properly, see here How to help us help you - or How to ask a good question

Thekholm · April 22, 2021, 7:48pm

Sorry Nickrout,

My bad, I will try to post better next time!
People can maby help anyway and be nice?

/T

kongo09 · April 24, 2021, 8:25am

Maybe my configuration can help you to see how it is done. I have configured sources as icon + name:

      type: 'custom:mini-media-player'
      entity: media_player.spotify
      name: Spotify
      artwork: none
      icon: 'mdi:spotify'
      hide:
        volume: true
        power: true
        source: true
        progress: true
        info: true
      shortcuts:
        label: null
        hide_when_off: false
        attribute: source
        list:
          - name: Wohnzimmer
            type: service
            id: spotcast.start
            icon: 'mdi:speaker'
            data:
              device_name: Wohnzimmer
              account: default
          - name: Leo's Zimmer
            type: service
            id: spotcast.start
            icon: 'mdi:speaker'
            data:
              device_name: Leo's Zimmer
              account: default
          - name: Alle Lautsprecher
            type: service
            id: spotcast.start
            icon: 'mdi:speaker-multiple'
            data:
              device_name: Alle Lautsprecher
              account: default

The sources drop-down then looks like this:

fair_dinkum · April 24, 2021, 11:34am

Thanks.
I think there’s a misunderstanding from my side. I wanted a custom icon for the radio station being played at the moment (thats my music source), but I think that is not possible…

kongo09 · April 24, 2021, 1:27pm

Is that information available in Home Assistant?

fair_dinkum · April 25, 2021, 5:33pm

yes it is. From my HEOS player, its available under the attribute:
source: radio_station_name
media_station: radio_station_name

actually I would like to rename the radio stadion in the frontend, but I’m not sure if this is possible, so the alternative would be to use a different icon for each radio station…

kongo09 · April 25, 2021, 7:42pm

I had a similar challenge with a different media player, my Onkyo AV receiver. Using icons for the sources and only making a limited number of sources available (I never listen radio for example), I used the shortcuts feature like this:

type: 'custom:mini-media-player'
volume_stateless: false
hide:
  controls: true
  mute: true
  source: true
  power_state: false
shortcuts:
  hide_when_off: true
  attribute: source
  columns: 6
  buttons:
    - icon: 'mdi:disc-player'
      type: source
      id: CD
    - icon: 'mdi:monitor'
      type: source
      id: TV
    - icon: 'mdi:sony-playstation'
      type: source
      id: PS3
    - icon: 'mdi:cast'
      type: source
      id: Chromecast
    - icon: 'mdi:amazon'
      type: source
      id: Amazon
    - icon: 'mdi:dlna'
      type: source
      id: Net
artwork: material
toggle_power: true
entity: media_player.verstarker

The actual source selection is hidden and the list of shortcut items with type source reflects my choice with my individual icons. The id field lists the internal name that is matched with the entry of the source field to highlight which source is selected. In practice, this looks like this for my case:

You see my Chromecast source being active.

I have opted for buttons but this could as well be a dropdown list as shown in my last examples with the speakers. Same principle.

fair_dinkum · April 26, 2021, 5:45am

I had the buttons in place already, but thanks very much for sharing, because I was missing the attribute: source in my button config, so the icons had always the same colour - added the attribute and voila, the selected source has a coloured icon - thanks @kongo09 !

problem solved - in a different way though, but even better than I was expecting!

parautenbach · April 26, 2021, 7:40am

I tried searching here to see if it’s already been mentioned but couldn’t find anything. The toggle_power option solved my problem.

I have a media player that doesn’t have an on/off remote control so I control it with a smart plug (basically a RPi that’s always on and connected to a retro audio player that only has manual buttons). I combined these two devices into a universal media player.

The problem was then that MMP would correctly show the on/off state but the power button wouldn’t do anything. I started at the bottom of the stack by calling the various power services directly and discovered that the on/off service calls worked as expected but not the toggle. After checking the code for the universal media player it looks like one of the internal functions will return early based on the fact that there’s no active children (in my case, only one child). The normal turn on/off works because there is an override set.

That’s when I learnt about MMP’s option to force whether to use the toggle service or not: Setting toggle_power: false solved the issue.

fair_dinkum · April 26, 2021, 9:42am

How could I change the color of the buttons?

I tried it using card-mod and a style, but I can’t figure out how it is set.
Your code here for the padding for example works, but as soon as I change the padding to mini-media-player-button-color, (which is a theme-variable),nothing happens.

type: 'custom:mini-media-player'
entity: media_player.kitchen
card_mod:
  style: |
    ha-card div.mmp-player {
      mini-media-player-button-color: rgba(120,120,120,0.25)
    }

Any ideas?

CDRX2 · April 26, 2021, 9:57am

I think if you want to call that variable, you call it without card-mod:

style:
  '--mini-media-player-button-color': 'rgba(120, 120, 120, 0.25)'

fair_dinkum · April 26, 2021, 10:02am

I thought that too, but at least on my end, it does not work

CDRX2 · April 26, 2021, 10:19am

Sorry it didn’t work out, I thought that’d do it.

kongo09 · April 26, 2021, 10:30am

You should indeed set the variable. Try this:

card_mod:
  style: |
    :host {
      --mini-media-player-button-color: red;
    }

which - for me - leads to this:

fair_dinkum · April 26, 2021, 10:56am

Thanks, champion. That worked out of the box.

fair_dinkum · April 27, 2021, 9:52am

@kongo09 do you happen to know how to change the color of the button-text?

I’m struggling after several attempts, nothing of whatever I tried works, unless I change it directly in the inspector:

card_mod:
  style: |
    .ellipsis {
      color: black !important;
    }

or

card_mod:
  style: |
    span.ellipsis {
      color: black !important;
    }

or

card_mod:
  style: |
    .mmp-shortcuts__button {
      color: black !important;
    }

or

card_mod:
  style: |
    .mmp-shortcuts__button {
      --mini-media-player-overlay-base-color: black;
    }

I wonder what I’m doing wrong with the inspector…