Lovelace: Mini Media Player

Share your Projects! Dashboards & Frontend
1162

@mitchell The progress bar enhancements is now available in the latest release v1.4.1, let me know how it works.

Regarding the new theme variable for progress bar height

# Two ways of doing it

# in your theme (applies to all mini-media-player cards)
mini-media-player-progress-height: 24px

# or with card-mod (applies to single card)
style: |
  :host {
    --mini-media-player-progress-height: 24px;
  }
1 Like
1163

It’s beautiful thank you.

The below works perfectly. I haven’t tried theme setting yet.

style: |
:host {
–mini-media-player-progress-height: 24px;
}

1 Like
1164

Is it possible to hide controls and volume slider when player is idle?

1165

You can make an conditional Lovelace card, that’s how I do it

1166

Sounds nice, can you give me an example? :slight_smile:

1167

Here you go :wink:

1168

Thanks, but I need more help. Not that good in this coding, but trying to learn
 :wink:

This is my code, but its not working.

type: conditional
conditions:
  - entity: media_player.spotify
    state: playing
card:
  - artwork: full-cover
    entity: media_player.spotify
    group: true
    idle_view: true
    mini-media-player-accent-color: var(--primary-text-color)
    mini-media-player-overlay-color: 'rgba(255, 255, 255, .75)'
    mini-media-player-artwork-opacity: 0.25
    hide:
      controls: false
      info: false
      source: true
      icon: true
      volume: true
      power: true
      name: true
      progress: false
    icon: 'mdi:speaker-wireless'
    info: scroll
    name: KÖKET
    type: 'custom:mini-media-player'
  - artwork: none
    entity: media_player.spotify
    group: true
    idle_view: when_idle
    mini-media-player-progress-height: 20
    mini-media-player-artwork-opacity: 0
    hide:
      controls: true
      info: true
      source: true
      icon: true
      volume: false
      power: true
      name: true
      progress: false
    icon: 'mdi:speaker-wireless'
    info: scroll
    name: KÖKET
    type: 'custom:mini-media-player'
1169

here is how i use it , i have a seperate sensor for my harmony, thats “on” or “off”


          - type: conditional
            conditions:
              - entity: sensor.harmony_state_off
                state: "off"
            card:          
              type: 'custom:mini-media-player'
              style: |
                ha-card {
                  border-radius: var(--border-radius);
                  background: var(--card-color-off);
                  --label-badge-text-color: var(--label-color-off);
                  color: var(--name-color-on);
                  opacity: 0.8;
                }
              entity: media_player.denon_avrx4000
              hide:
                icon: true
                power: false
              artwork: cover 
              name: Denon Volume
1170

It sure is, and it’s built in.
Check the idle_view option, which will render a simpler more compact view if the player is considered idle, based on the options specified in the idle_view option object.

Example config would be

# ... rest of card config
  idle_view:
    when_idle: true # Consider idle when entity state equals idle
    # if your card doesn't have an "idle" state use `when_paused`.
    # Edit: And you can of course use a combination of the two options above and any of the other available options.
1171

Ow, well, I hide the complete card :wink:

1 Like
1172

That could also be useful depending on use-case, I use both solutions throughout my HA setup. :smiley:

1173

Indeed , I don’t use this card to turn my receiver on, I do that with Google assistant, or Spotify
 So if it’s playing this card will be visible

1174

Is there any way/feature/option to set a different font-family for this card? I see font_size and font_header, but not a way to set a different font


1175

This card has no font options, I recommend using card-mod.

1176

HI - I have exactly same problem - wasted hours with it. Tried everything, type : js instead of module with and without ?v=1.4.1 on the resource url. I even installed a fresh hassio/docker on a VM Ubuntu 18.04 and installed HACS and mini-media-player
Same - “Custom element doesn’t exist: mini-media-player”
Everything is latest/current version and like you Lovelace/ .storage version
The js files opens fine clicking on “open plugin” (localhost:8123/community_plugin/mini-media-player/mini-media-player-bundle.js). Tried on 7 browsers on 3 OS ( BTW Edge on Win10 doesn’t show the front end - either on states or Lovelace just a spinning wheel)
I don’t get any errors in Console - Browser Inspect
Please let me know if you figured it out . Thanks!
mimi-media-player

1177

Not sure what the issue could be then, try reinstalling it through HACS, you can check the Network tab in chrome devtools and look for the entry that says mini-media-player..., if you can’t find it or if it’s red double check so you have entered the resource reference correctly, and at the correct place.

Edit: you might wanna refresh your ha frontend page while you’re on the network tab for items to show up

1178

I rarely use Chrome but here it is - mini-media-player shows up only once and seems ok - no errors
Installed HACS 2x already on this instance and 1 more on a new fresh install hassio - same
I’ll try again tomorrow or over the weekend - very frustrating

ntwk-mmp
ntwk-mmp1312×448 52.5 KB

1179

Solved - I uninstalled it and delete everything related to it
I installed 1st another plugin - just to see if that works - Monster card - worked without any problems from the 1st try. So i reinstalled and added on top of the Lovelace raw config
resources:

  • type: js
    url: /community_plugin/monster-card/monster-card.js
  • type: js
    url: /community_plugin/mini-media-player/mini-media-player-bundle.js
    Now it works.
1 Like
1180

Is it possible in any way to stylish with CSS code also the buttons of shortcuts?

1181

You could try the shadow / deep selector but it’s deprecated so I’m not sure you’ll have any luck.

So, no, not really, unless you modify the source code.