Lovelace: Mini Media Player

Share your Projects! Dashboards & Frontend
2241

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! :slight_smile:

2242

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.

2243

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?

2244

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)'
2245

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

2246

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

2247

You should indeed set the variable. Try this:

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

which - for me - leads to this:

image

1 Like
2248

Thanks, champion. That worked out of the box.

2249

@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…

2250

I don’t use button-text, but maybe you can get some idea by looking at how to change the color of the button-icon:

card_mod:
  style:
    mmp-shortcuts$:
      ha-icon$: 
        ha-svg-icon$: |
          :host {
            fill: red !important;
          }

The example illustrates how to move down the DOM tree into the shadow-root elements. I don’t see that in your examples and maybe this is the same challenge.

2251

Thanks for your input, I managed to solve it - great help.

Here is the code to modify the button-text color as well as button color:

card_mod:
  style: |
    :host {
      --mini-media-player-button-color: white;
    }
    mmp-shortcuts {
        color: black;
    }

PS: I noticed in my tests that on your example, the icons in my test player still changed to red when removing ha-icon and ha-svg-icon, just leaving mmp-shortcuts and :host

2252

Hi, I’m replying to a 2 year old post - because still today I can’t seem to find your custom card in HACS.

2253

What steps are you taking to find the card? Be precise :slight_smile:

2254

Sorry, I found it under “Explore & add repositories”.

This is the default built-in Media Player Card in HA:
image

While this your Mini Media Player card with Artwork setting = full-cover, but why then is the cover not full, but cropped?
image

2255

I am using a “Google Chromecast with Google TV” attached to my TV. I wanted to use this media player card to control the chromecast almost exclusively (TTS and so on) - but I want the volume slider to control the TV volume instead. (Its not possible to sync them with my current setup)

TL;DR Is it possible to set up the mini media player to control the volume of another device? Do I need to create a universal media_player/remote that combines both of these devices instead?

2256

Docs say

full-cover-fit for full cover without cropping.

2257

Yes that is the way

1 Like
2258

Fair enough. Do you have any experience with doing that? I will play around with it tonight, but I’m wondering if I can pass on features like the artwork and the text to speech to the universal media player.

2259

Opps, that option does not exist in the list:
image

If I try to type full-cover-fit manually (YAML), I just get an error:

Configuration errors detected:
* No type provided.

[Edit] I think perhaps I’ve stumbled across a bug in Lovelace/HA. No matter how and what I tried, I could not successfully enter artwork: full-cover-fit
But when I entered the Raw Configuration Editor i managed to enter it, and it works :+1:

2260

The universal media player will use the artwork from one of the children players. I’m not sure about TTS though.