Lovelace: Mini Media Player

scstraus · January 5, 2020, 11:19pm

Hi, I recently upgraded and moved over to HACS, but the group:true option is no longer working for me. Has something changed in the syntax expectations or is this a bug?

Here’s how it used to look:

Here’s how it looks now:

The spacing is much bigger than my normal entities, whereas it used to be the same:

vs

here’s my config:

  - type: entities
    title: First Floor
    show_header_toggle: false
    entities:
    - entity: media_player.living_room_airtunes_speaker
      type: custom:mini-media-player
      name: Living Rm
      hide:
        controls: true
        mute: true
      group: true
    - entity: media_player.kitchen_airtunes_speaker
      type: custom:mini-media-player
      name: Kitchen Speakers
      hide:
        controls: true
        mute: true
      group: true
    - entity: media_player.bathroom_1st_floor_airtunes_speaker
      type: custom:mini-media-player
      name: Bathroom Speakers
      hide:
        controls: true
        mute: true
      group: true
    - entity: media_player.apple_tv_airtunes_speaker
      type: custom:mini-media-player
      name: Apple TV
      hide:
        controls: true
        mute: true
      group: true
    - entity: media_player.chromecast
      type: custom:mini-media-player
      name: Chromecast
      hide:
        controls: true
        mute: true
      group: true
    - climate.entrance
    - climate.living_room
    - climate.dining_room

Any idea why this is happening?

kalkih · January 6, 2020, 12:42am

The top and bottom card paddings when used with the group options were changed a few months back in v1.4.0

Increased top/bottom card padding with group option to 10px

Was 2px before, changed because the progress bar will otherwise overlap potential artwork & media information.

I guess the extra padding isn’t really needed when/if progress isn’t supported or visible, I’ll change this because it looks…bad

scstraus · January 6, 2020, 5:23am

Great, thanks for an awesome card, with 12 zones of AirPlay, I couldn’t live without it!

Cadish · January 9, 2020, 7:57am

Is it possible to hide a card on lovelace if it’s already included in a group? I would like to show the card if it’s ungrouped, and hide it if it’s grouped. At the moment I have 4 devices, which all have a card on my frontend. If I group them all, I still see 4 cards with all of them playing the same thing. I would like to only view 1 card if all are grouped. If none are grouped, I want to see 4 cards again…

Is that possible in a way?
Thanks

heartkingz · January 9, 2020, 11:40am

I’m absolutely digging this media player! Right now i’m playing with the style of the card. And alltho i’m pretty happy with it, i hope someone is able to tell me how i can style the grey buttons as you can see in the screenshot below. I’d like to give them the same opacity as the rest of the card. I think i only need to know which variables these are. Thanks! Knipsel

kalkih · January 9, 2020, 4:30pm

Interesting idea, would be practical.
The conditional card does only support conditions based on states unfortunately.

I don’t own any Sonos myself so I’ve not been able test if the code below actually works but I think it should. In the example we got two sonos speakers with entity ids media_player.sonos_1 & media_player.sonos_2.

First we need to set up a binary sensor for each sonos speaker which we’ll later use in our conditional cards. The binary sensor should flip to on if our condition is fulfilled, the condition being:

The entity isn’t the master speaker (the master is the first entry in the sonos_group attribute)

and

The entity is in a group (sonos_group includes more than 1 entity)

binary_sensor:
  - platform: template
    sensors:
      sonos_1_grouped_not_master:
        value_template: >
          {{ state_attr('media_player.sonos_1', 'sonos_group')[0] | string != 'media_player.sonos_1'
            and state_attr('media_player.sonos_1', 'sonos_group') | length > 1 }}
      sonos_2_grouped_not_master:
        value_template: >
          {{ state_attr('media_player.sonos_2', 'sonos_group')[0] | string != 'media_player.sonos_2'
            and state_attr('media_player.sonos_2', 'sonos_group') | length > 1 }}

Then we have the actual lovelace setup, one conditional card for each Sonos, here we use the binary sensors we created earlier.

- type: conditional
  conditions:
    - entity: binary_sensor.sonos_1_grouped_not_master
      state_not: 'on'
  card:
    - type: custom:mini-media-player
      entity: media_player.sonos_1
- type: conditional
  conditions:
    - entity: binary_sensor.sonos_2_grouped_not_master
      state_not: 'on'
  card:
    - type: custom:mini-media-player
      entity: media_player.sonos_2

Change the entity names and repeat for each Sonos speaker you got.

I don’t remember the variables used but I’ll look into it when I get home and get back to you.

Cadish · January 9, 2020, 6:55pm

hey @kalkih, thanks a lot for your help! It works great, except that there seems to be something wrong with the template of the binary sensors:

binary_sensor:
  - platform: template
    sensors:
      sonos_1_grouped_not_master:
        value_template: >
          {{ state_attr('media_player.sonos_1', 'sonos_group')[0] | string != 'media_player.sonos_1'
            and state_attr('media_player.sonos_1', 'sonos_group') | length > 1 }}
      sonos_2_grouped_not_master:
        value_template: >
          {{ state_attr('media_player.sonos_2', 'sonos_group')[0] | string != 'media_player.sonos_2'
            and state_attr('media_player.sonos_2', 'sonos_group') | length > 1 }}

It changes to ‘on’ when I group them, but doesn’t switch back to ‘off’ when I ungroup them… Any idea on how to solve this?

Thanks a lot for your help! Really appreciate it!
Cadish

kalkih · January 9, 2020, 7:06pm

Hmm…okay.
I see there’s an option where you can specify entity id´s which the sensor should react to, if automatic updates doesn’t work.
See entity_id, but I’m not sure if it reacts to attribute changes, but might be worth a try!

So the config would be something like this.

binary_sensor:
  - platform: template
    sensors:
      sonos_1_grouped_not_master:
        entity_id:
          - media_player.sonos_1
        value_template: >
          {{ state_attr('media_player.sonos_1', 'sonos_group')[0] | string != 'media_player.sonos_1'
            and state_attr('media_player.sonos_1', 'sonos_group') | length > 1 }}
      sonos_2_grouped_not_master:
        entity_id:
          - media_player.sonos_2
        value_template: >
          {{ state_attr('media_player.sonos_2', 'sonos_group')[0] | string != 'media_player.sonos_2'
            and state_attr('media_player.sonos_2', 'sonos_group') | length > 1 }}

Edit: after reading this I’m pretty sure adding the above should solve it!

Cadish · January 9, 2020, 7:57pm

No, didn’t work either.

However, I’ve found that this works for me:

        entity_id:
          - media_player.living_room
        value_template: >
          {{ state_attr('media_player.living_room', 'groupName') | length > 1 }}

Really don’t know why your code is not working… (maybe because I don’t have Sonos, but Heos?)

Regards,
Cadish

kalkih · January 9, 2020, 8:35pm

Oh sorry, yes that’s probably it then haha, I took for granted you were using Sonos so the attributes and the way they function are probably different for you with HEOS.
Glad you got it working!

So HEOS exposes an attribute called groupName? Is that the only group rrelated attribute exposed?

tormagj · January 9, 2020, 8:56pm

I guess @Cadish is still running the custom_component for HEOS with grouping, am I right? That may be why something is different?? To my knowledge there is no official support for grouping in the HEOS integration, but it seems to be working quite well with the custom integration here

I’m going to try the same as Cadish did for hiding grouped ones, think it sounds like a nice idea!

Cadish · January 9, 2020, 9:14pm

Yes correct I’m using your custom component for it… If you need help in testing, let me know. Anyway, my code as above works now, so I’m happy!

Thanks a lot!

tormagj · January 9, 2020, 9:24pm

That’s great! The HEOS “hack” currently populates the group attribute like this:

heos_group: media_player.heos5_office,media_player.heos1_kitchen

Is the Sonos doing it differently? Should it be inside [] as an array or something to working similarly as the Sonos? Or could it be a space missing after the comma? Guess it would be wise for the HEOS-integration to do it similar to Sonos since it seems to be more commonly integrated with other stuff.

kalkih · January 9, 2020, 10:16pm

Nice, it’s possible that it’s an array, just displayed as a comma separated in the dev-state view if it’s there you’re looking.

If it’s in fact an array, then that’s how the Sonos component does it, additionally Sonos has the master speaker listed as the first entry in that list. Idk if HEOS works the same where you have a master/slaves.

Is there support for group management service calls in that custom component as well?

tormagj · January 9, 2020, 10:41pm

Yes, you’re right. It is an array already, I was fooled by the presentation in the dev-state view. Heos also has a master, and it is also listed as the first one in the array. So it should be the same then. Service calls are also implemented. I’ll test a bit with the suggestions above, then let’s see

kalkih · January 9, 2020, 10:51pm

Neat!
Would you mind testing this cards built-in group management if you haven’t already. If the implementation is the same as Sonos it should work, make sure to specify the platform as heos.

- type: custom:mini-media-player
  entity: media_player.heos_office
  speaker_group:
    platform: heos
    show_group_count: true
    entities:
      - entity_id: media_player.heos_office
        name: Office
      - entity_id: media_player.heos_livingroom
        name: Livingroom
      - entity_id: media_player.heos_kitchen
        name: Kitchen
      - entity_id: media_player.heos_bathroom
        name: Bathroom
      - entity_id: media_player.heos_bedroom
        name: Bedroom

tormagj · January 9, 2020, 10:58pm

It’s working perfectly, or rather the other way around, it was designed to work with the card Although I think I just found some kind of bug in my code this evening with the “leave” button, but it’s not a big thing. Will look into it tho…

kalkih · January 9, 2020, 11:06pm

Nice, did you code the custom component? Mind linking it?

Edit: nvm I saw your link above and the other thread, nice work!

kalkih · January 9, 2020, 11:28pm

@heartkingz, The color is currently hard coded as rgba(255,255,255,0.25) unfortunately.

github.com

kalkih/mini-media-player/blob/9a88a775a1cb3e0893ef692fce799c6f49bca666/src/components/button.js#L26


return css`
  :host {
    position: relative;
    box-sizing: border-box;
    margin: 4px;
    min-width: 0;
    overflow: hidden;
    transition: background .5s;
  }
  :host([raised]) {
    background: rgba(255,255,255,0.25);
    min-height: calc(var(--mmp-unit) * .8);
    box-shadow:
      0px 3px 1px -2px rgba(0, 0, 0, 0.2),
      0px 2px 2px 0px rgba(0, 0, 0, 0.14),
      0px 1px 5px 0px rgba(0,0,0,.12);
  }
  :host([color]) {
    background: var(--mmp-active-color);
    transition: background .25s;
    opacity: 1;

But I will change it to a variable in the next release.

heartkingz · January 10, 2020, 6:07am

Thank you! That would be great.