Lovelace: Mini Media Player

Thanks…

Hi guys

I am using Mini Media Player since today (v1.4.1) on HassOS 3.5. Everything works fine so far but from time to time the icons disappear on Mini Media Player cards… all other cards work as expected and stable. This only happens for Mini Media Player card. (see attachment).

I cannot see any error on browser console nor on homeassistant logs… any idea why this is happening?

Thx in advance for your help.

Best,
mooonli

08

I had the same issue… i was forced to change theme and the icons reappeared again !

Hey,
Most likely an issue with the CSS fallback variables, are you on the very latest version of the card?
Do you use a theme?
What browser do you have the issue in?

Hi Karl

I have the default lovelace theme active and am on the very latest version of the card… I have the issue on Chrome (mac OS) and Webkit (iOS App)… sometimes it works on both devices, sometimes on none of them… looks like a very strange behaviour to me…

do you have any ideas?

Thanks @mooonli,
Alright, it’s definitely an issue with how we decide the icon color in the card (which is pretty messy).
I’ve not really been able to figure if and in which browsers nesting several CSS variables as fallback are supported, or if it’s even supported at all.

I’ll try to investigate it further this weekend.
If you need a quick solution in the meantime, creating a theme and adding this single line:

your-new-theme:
  mini-media-player-icon-color: var(--paper-item-icon-color, #44739e)

Then select the theme in your frontend (might need to restart for it to show up) and the icons should now appear.

Hi Karl

Thx a lot for your feedback. I tried it with your fix but the issue stays the same. Any other ideas what I could try?

Best,
mooonli

Hmm idk then, was pretty sure that would solve it, if you installed the card through HACS, please check this issue, same applies to this card.

@mooonli I’m really not able to reproduce this issue… I didn’t manage to ever reproduce it when @maurizio53 brought it up some months ago either.

Could you send me a card configuration in which you have the issue? Does it affect all mmp cards or just some?

I’ll make some style changes in the next update and hope that will fix it.

Hi Karl

That seems very strange to me :frowning: I just downloaded the JS file… put it to www folder and added a card to lovelace ui…

here is the card how I use it:


- entity: media_player.dining
                    group: true
                    hide:
                      icon: true
                      power: true
                    speaker_group:
                      entities:
                        - entity_id: media_player.kitchen
                          name: Kochen
                        - entity_id: media_player.living
                          name: Wohnen
                        - entity_id: media_player.sleep
                          name: Schlafen
                      platform: sonos
                      show_group_count: true
                    type: 'custom:mini-media-player'

is there something I did wrong?

Best,
mooonli

Okay, yes very strange indeed, your config looks absolutely fine.

I don’t know why this is happening to you or how to solve it, sorry.
I’ll make some changes to the styles before next version which could fix it if we are lucky.

What if you try setting the following in your theme.

primary-text-color: "#000"
mini-media-player-base-color: "#000"

2 questions…

  1. Is it possible to disable “source select” and only show what source is used?

  2. Trying to use rounded corners with artwork, but artwork is showing ontop of borders in a square format.
    Like this:
    Sk%C3%A4rmklipp

Using this is in lovelace raw editor (latest version I think?):

 - type: module
    url: /local/mini-media-player-bundle.js?v=1.4.1

Hi! I really love the mini-media-player component… One thing that I can’t seem to get working properly is the speaker_group in combination with a Bluesound media player.

To see if it was my configuration, I tried it out on a fresh and minimal HA install. But it seems to still not work as expected. I am using HA 0.100.2 with Mini Media Player 1.4.1 installed through HACS.

Configuration of Bluesound in configuration.yaml:

media_player:
  - platform: bluesound
    hosts:
      - host: 192.168.xx.xx
        name: bluesound_achterkamer
        port: 11000
      - host: 192.168.xx.yy
        name: bluesound_voorkamer

Mini media player section in ui-lovelace.yaml:

...
    cards:
      - type: custom:mini-media-player
        entity: media_player.bluesound_achterkamer
        hide:
          power: true
        speaker_group:
          platform: bluesound
          show_group_count: true
          entities:
            - entity: media_player.bluesound_achterkamer
              name: Achterkamer
            - entity: media_player.bluesound_voorkamer
              name: Voorkamer
...

Given the (Sonos based) example in the documentation, I was expecting the master of the speaker_group to be selected and greyed out. But what I see is that 1) none of the check boxes are selected while the media players are currently grouped and 2) when I select the two speakers and create a group and then collapse/expand the groups section, the state is lost and I get unchecked checkboxes again.

Does anybody have any idea whether I have misconfigured something or what otherwise could be causing this?

Is there a way to change the master in a sonos group?

I have two sonos and i configured the first as master in this way:

          - entity: media_player.sonos_stereo
            type: custom:mini-media-player
            title: Sonos
            icon: 'mdi:speaker-wireless'
            speaker_group:
              platform: sonos
              show_group_count: true
              entities:
                - entity_id: media_player.sonos_stereo
                  name: Sonos Salotto
                - entity_id: media_player.studio
                  name: Sonos Studio

In this way the sonos_stereo is the master.
Configuring another group with the same devices, how to have the sonos_studio as master?

I tried in this way:

          - entity: media_player.studio
            type: custom:mini-media-player     
            icon: 'mdi:speaker-wireless'
            artwork: full-cover
            icon_state: true
            sound_mode: full
            hide:
              power: true
              mute: false
              source: true
              icon: true
            speaker_group:
              platform: sonos
              show_group_count: true
              entities:
                - entity_id: media_player.studio
                  name: Sonos Salotto
                - entity_id: media_player.sonos_stereo
                  name: Sonos Studio
            group: true

But the master is always sonos_stereo…
Any hints?

The master will always be the entity of the card you made the group from.
If the card entity is already a slave/member of a group and you want to make it the master you could always press the ungroup/leave button and then start adding members again, the card entity will now be the master.

Yes, the issue here is that the bluesound component doesn’t provide any type of group information in its attributes and therefore the card isn’t aware of the group state (e.g. if there’s a group, which entities the group contains, if it’s the master/slave).
Same goes for the Snapcast component, see this issue, someone would have to update the HA bluesound component for it to work as expected.

Thanks for your reply! Hmm… That explains the behavior. I had a look at the bluesound code, and it seems that there are two properties that seem relevant: is_master and is_grouped, I just don’t seem to be able to find those when I look at the Developer Tools/ States, which is a bit strange… But I might have overlooked some things, as I am quite new to HA.

Do you know whether Sonos is also using those two properties? From a quick look at the Sonos code it seems to be done differently, but it is a bit hard for me to read the code… Do you know what the data structure is that Sonos is using?

[/Edit] I seem to be able to extract grouping information and define a property for it in the bluesound integration. Unfortunately I do not understand yet how to make the property available to HA; I cannot see the property that I defined through “Developer Tools/ States”, any ideas would be welcome…

Yes, those are most likely internal variables, not exposed as attributes and all necessary information may or may not be there internally already.

The Sonos component expose one single group attribute that includes all necessary group information needed.

Here’s how the group attribute works in the Sonos implementation, which the group management in this card was originally built around.

  • The group is a list/array.
  • The group contains the entity id’s of all of its members.
  • The group looks the same on master and client/slave.
  • The initial entry is the master.

I know the same implementation is being worked on for the yamaha musiccast and the soundtouch component, both are waiting for upstream libraries to merge changes atm I think.

Thanks for the info. That gives me some more insight. Seems tricky for mini-media-player though that ATTR_SONOS_GROUP is actually represented as sonos_group, and not something more generic like speaker_group or something. What would be the right way for mini-media-player to consume group information from Bluesound, would that be “bluesound_group” (or am I misunderstanding how it works)?

That’s correct, but it’s not a huge deal, it relies on what platform is specified in the speaker_group card config:

So yes, for bluesound it would expect the attribute to be exposed as bluesound_group.
It wouldn’t be a huge deal if it wasn’t exposed with that name though, we could always add an exception or e.g. if bluesound_group doesn’t exists check for the attribute speaker_group etc…

It does however help a lot if the structure and implementation of the group attribute is standardized as per the list I mentioned above, but that could also be generalized by the card, but would make things harder / require more code & logic.