Lovelace: Mini Media Player

kongo09 · April 27, 2021, 10:37am

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.

fair_dinkum · April 27, 2021, 12:48pm

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

Viking · April 28, 2021, 7:15pm

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

nickrout · April 28, 2021, 9:03pm

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

Viking · April 28, 2021, 9:18pm

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

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

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

maxshcherbina · April 28, 2021, 9:20pm

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?

nickrout · April 28, 2021, 9:22pm

Docs say

full-cover-fit for full cover without cropping.

nickrout · April 28, 2021, 9:23pm

Yes that is the way

maxshcherbina · April 28, 2021, 11:00pm

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.

Viking · April 29, 2021, 8:25am

Opps, that option does not exist in the list:

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

parautenbach · April 29, 2021, 5:13pm

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

TMidi · April 29, 2021, 7:38pm

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.

pjn77 · April 29, 2021, 7:44pm

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?

nickrout · April 29, 2021, 10:20pm

Of those options did you try cover-fit?

ff12 · April 29, 2021, 11:36pm

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

Viking · April 30, 2021, 5:53am

Yes, I tried cover-fit but that gives a picture with vertical only cropping while the horisontal size is correct. (?)

nickrout · April 30, 2021, 6:31am

It is weird that the docs provide 5 options for artwork -

cover to display current artwork in the card background, full-cover to display full artwork, material for alternate artwork display with dynamic colors, none to hide artwork, full-cover-fit for full cover without cropping.

But the options in the ui are named slightly different -

const OptionsArtwork = [
  'cover',
  'full-cover',
  'material',
  'cover-fit',
  'none',

TMidi · May 4, 2021, 12:39pm

kalkih:

skip:
  alias: skip
  sequence:
    - service: media_player.media_seek
      data_template:
        entity_id: "{{ entity }}"
        seek_position: "{{ state_attr(entity, 'media_position') | float + interval

Hey Kalkih, I am trying to create a skip back and skip forward for my media players and came across your efforts to make something similar. I have tried to test it out in templates "{{ state_attr(media_player.sonos_connect, 'media_position') | float + interval }}"but am only getting thisUndefinedError: 'media_player' is undefine. Is this still the best approach? What am I missing?

spacekiek · May 7, 2021, 10:02am

Hello,

I got the mini player working with “group Sonos speakers” functionality.
However, I expected that sliding the main volume, the volume of the grouped speakers would follow ?
Can this be done ? mini player1

Code:

type: 'custom:mini-media-player'
entity: media_player.veranda
hide:
  power: true
speaker_group:
  platform: sonos
  show_group_count: true
  entities:
    - entity_id: media_player.keuken
      name: Sonos Keuken
    - entity_id: media_player.eetkamer
      name: Sonos Living
    - entity_id: media_player.tv_kamer
      name: Sonos TV
    - entity_id: media_player.veranda
      name: Sonos Veranda
entities:
  - type: 'custom:mini-media-player'
    entity: media_player.multiroom_player
    group: true
    source: icon
    artwork: cover
    info: short
    hide:
      volume: true
      power: true
  - type: 'custom:mini-media-player'
    entity: media_player.keuken
    group: true
    hide:
      controls: true
  - type: 'custom:mini-media-player'
    entity: media_player.eetkamer
    group: true
    hide:
      controls: true
  - type: 'custom:mini-media-player'
    entity: media_player.tv_kamer
    group: true
    hide:
      controls: true
  - type: 'custom:mini-media-player'
    entity: media_player.veranda
    group: true
    hide:
      controls: true

nickrout · May 7, 2021, 8:05pm

Look at the docs for sync_volume