Lovelace: Mini Media Player

Share your Projects! Dashboards & Frontend
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.

2261

Looking for some help with a Volume Slider script and 4 input_select.media_players. Let me try to explain what I am trying to accomplish.

I am trying to change the volume of what ever media player that my input select is set to. I have chosen to hid all the controls for the card and decided create stand alone controls. I have create a input_number for the volume slider

  • List item
input_number:
  media_player:
    name: Volume Control
    min: 10
    max: 80
    step: 1```                                                                                                                                                           

* List item
this is my script that i have been trying to work on. The basic premise is that it would recognized the input selected media player and only change that one's levels
```  media_volume:
    alias: "Set Media Player Volume"
    sequence:
      - service: media_player.volume_set
        data_template:
          entity_id: >
            {% if is_state("input_select.media_player", "Office Sonos") %} media_player.sonos_connect
            {% elif is_state("input_select.media_player", "Kitchen/Dining Sonos") %} media_player.kitchen_dining
            {% elif is_state("input_select.media_player", "Patio Sonos") %} media_player.patio
            {% elif is_state("input_select.media_player", "Denon AVR-X4500H") %} media_player.denon_avr_x4500h
            {% elif is_state("input_select.media_player", "Jeffery") %} media_player.googlehome1790
            {% endif %}
          volume_level: {{ states.input_number.media_player.state }}``` 
Now I am not apposed to taking a different path that what I have tried , just is just what I thought would be the best option.
2262

I use mini media player with my Sonos where Spotify playlists you mark as a favourite in the Sonos app, show up as a selectable source.

Is there an easy way of presenting all these media player sources in a more attractive format, without manually creating a load of button entries that i have to modify as i change my favourite playlists? Ideally i’d like a grid of shortcut buttons, or even a list. Can I do that with mini media player? Or is there another card I can use?

2263

Of those options did you try cover-fit?

2264

I have the same problem for some time with a couple of Alexa devices, have you found a solution?