Lovelace: Mini Media Player

[nibblerrick (Nico)]

I like the card really much and most times the compact mode is what I like. However in one place I want it a little bigger and thankfully there are options for this, too, and most I want I could achieve.

With this part

  style: |
    :host {
      --mini-media-player-scale: 1.2;
      --mini-media-player-progress-height: 10px;
    }
    ha-card {
    height: 180px;
    }

things are getting startet. However I wanted the layout a bit less condensed and this

    .mmp-player__core.flex {
      flex-flow: wrap;
    }

helped.
However, I like to have the powerstrip to the left.
I tried to play around with variations of

    mmp-powerstrip:
      $: |
         {
          margin-left: 0px;
        }

But I cannot get it to work. I can get things to work in the devtools of the browser, but addressing the custom HTML-element is my problem, I think I haven’t understood fully how that works.
So any help how to address the mmp-powerstrip-element is addressed is much appreciated.
Card-mod is enabled and putting the right css isn’t the big problem… But how to apply them to the element.

[tanderson1992]

Is it possible to replace automatic elements of the player with other sensor data? For example, I’m using my Chromecast Audio named “Basement speaker” to stream radio stations. When I stream a station, the default player looks like this:

Separately, I’ve created scrape sensors to obtain the current song and artist of a radio station. I can display that information in a separate entities card:

What I’d like to do is to combine the two, so that the mini media card displays sensor.kgbi_songname instead of Basement speaker and sensor.kgbi_artist instead of Default Media Receiver. Is this possible? I’m looking through the many options of the card but not seeing a way to accomplish this.

[mat44150 (mat)]

Hi @kalkih, in the latest version (V1.12), the card does not fetch the defined media player icon. It shows the default ‘cast’ icon for all media players.

[henry8866 (henry)]

I have echo dot integrated as media player, is there any example how to setup the shortcut to play amazon music or playlist?

[scstraus]

Sorry I’ve never tried it. Are you using Alexa Media Player? You’d need to check if it supports playing playlists. I suspect it doesn’t.

[heladic]

I can also confirm this…

[tanderson1992]

I’ve partially solved this myself using the Lovelace card-templater card (Jinja2 card templating in Lovelace!). I replaced the name with a template and hid the “Default Media Receiver.” I’d still prefer to be able to replace that element as well. Anyway, my new card’s code is:

type: 'custom:card-templater'
card:
  type: 'custom:mini-media-player'
  entity: media_player.office_speaker
  artwork: material
  hide:
    info: true
  tts:
    platform: google_translate
    entity_id: media_player.office_speaker
  name_template: '{{ states.sensor.kgbi_artist.state }} - {{states.sensor.kgbi_song.state }}'
entities:
  - sensor.kgbi_artist
  - sensor.kgbi_song

Which gets me this:

I’m about 90% satisfied with this setup. All that’s left is to nest this inside a conditional that displays this card if I’m actually listening to KGBI, otherwise it will display a basic card. Then if I can capture the album art as I’ve written about here: Scrape Help Needed for Radio Station, I’d like to template the background to be the result of that scrape.

[hans80]

nice song brother;)

[hans80]

Hello,

First of all what a beautiful card!

im missing one small thing. When i use the default original media player card there’s a button (when using spotify) that give me direct access to the media browser.

is that also possible with Mini Media Player?

[deluxestyle]

I do have a strange behavior with mini-media-player since a few weeks
Every time when I open home assistant on my phone or even on my computer it takes a while till mini-media-player is loaded. First it shows me that the custom component cannot be found. but after a few moments it is loaded (see attached gif)

[RomRider]

@hans80

is that also possible with Mini Media Player?

That would be possible if the frontend allowed it, currently it doesn’t. See: Ability to fire the media browser from any card as an action · Issue #7145 · home-assistant/frontend · GitHub

[hans80]

ok thanks!

[nickrout]

If you click the mini-media-player card the media browser button appears in the popup window.

[tom_l]

Overnight I have lost the icons on all my mini-media players.

Cache refresh did not help. Happening on all my browsers, Firefox, Chrome, Safari.

type: 'custom:mini-media-player'
entity: media_player.lounge_av_rx
group: true
icon: 'mdi:audio-video'
min_volume: '20'
name: Lounge Amp
toggle_power: false
hide:
  power_state: true

Anyone else seeing this?

[DavidFW1960 (David)]

Same here… just noticed.

[tom_l]

There’s an issue open. Though it has little detail.

icons is vanish and how to get a media content to be played on media player

[gillman99 (Mark A Gillman)]

I’m trying to use the group configuration to obtain a setup like the docs (see below):

My audio setup is I have 2 Sonos AMPS that connect to either living_room or outside so I have:

media_player.living_room
media_player.outside

I used the following YAML:

type: entities
entities:
  - type: 'custom:mini-media-player'
    entity: media_player.multiroom_player
    group: true
    source: icon
    info: short
    hide:
      volume: true
      power: true
  - type: 'custom:mini-media-player'
    entity: media_player.living_room
    group: true
    hide:
      controls: true
  - type: 'custom:mini-media-player'
    entity: media_player.outside
    group: true
    hide:
      controls: true

and get this result:

Ideally I think I’m supposed to have the media_player.multiroom_player control the source, play, pause, next and then the power buttons for media_player.living_room and media_player.outside are controlled by the power buttons.

I have looked and can’t figure out how to setup the media_player.multiroom_player which would control the stations from my sonos system. Hopefully someone has this working with Sonos and it’s easy. Any guidance is greatly appreciated.

[nickrout]

This card does not create a media_player.

[Jarne_Roussard]

hello you made a very nice card could you share the configuration? thanks in advance

[gillman99 (Mark A Gillman)]

I have a question and a response to Jarne_Roussard:

Question: So it appears like I need to setup a media player to act as the source. I have Sonos which I thought was a media player but it doesn’t appear to be working if I put in in the yaml in the place of media_player.multiroom_player. Does everyone setup a separate media player on their machines?

The card first shown in my request above is developed by Kalkih and can be found here:

kalkih/mini-media-player