Lovelace: Mini Media Player

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.

tormagj · January 10, 2020, 11:26pm

Yeah, well, I did the grouping thing, but it’s all thanks to @andrewsayre’s great work on both Pyheos as well as the home assistant integration of HEOS. Without the working features of the Pyheos, I would be completely lost, but I managed to hack together something that seems to be working well. Hopefully, someone with better skills than me will be able to implement the group support to the official integration.

For anyone who has an interest: https://github.com/tmjo/custom_components/tree/master/heos

G3GhostTech · January 12, 2020, 4:17am

Could someone kindly point this humble noob in the right direction?

So I got my '‘custom:mini-media-player’ to work. umm, after fumbling around with it for 4 hours. Mostly my issue was I feel that I could have shortened the code but EVERY rendition I tried would not work. So I gave up on ~~my dreams~~ making the code shorter. Anyways…

My actual question if possible could someone please show me a way to HIDE a ‘media-player’ device if it is not currently playing/powered on??

type: entities
entities:
  - type: 'custom:mini-media-player'
    name: Whole House Audio Group
    icon: null
    entity: media_player.group_whole_house_audio
    group: true
    controls: play_pause
    hide: null
    artwork: cover
    tts:
      platform: google_translate
    info: scroll
    source: icon
  - type: 'custom:mini-media-player'
    name: Inside House Audio Group
    icon: null
    entity: media_player.group_inside_house_audio
    group: true
    controls: play_pause
    hide:
      power_state: false
    artwork: cover
    tts:
      platform: google_translate
    info: scroll
    source: icon
  - type: 'custom:mini-media-player'
    entity: media_player.kitchen_display
    name: null
    icon: 'mdi:monitor-speaker'
    artwork: none
    group: true
    show_group_count: false
    hide:
      controls: true
      power: true
      info: true
      progress: true
  - type: 'custom:mini-media-player'
    entity: media_player.g3_living_room_speaker
    name: null
    icon: 'mdi:cast-audio'
    artwork: none
    group: true
    show_group_count: false
    hide:
      controls: true
      power: true
      info: true
      progress: true
  - type: 'custom:mini-media-player'
    entity: media_player.g3_dinning_room_speaker
    name: null
    icon: 'mdi:cast-audio'
    artwork: none
    group: true
    show_group_count: false
    hide:
      controls: true
      power: true
      info: true
      progress: true
  - type: 'custom:mini-media-player'
    entity: media_player.g3_google_mini_01
    name: null
    icon: 'mdi:google-home'
    artwork: none
    group: true
    show_group_count: false
    hide:
      controls: true
      power: true
      info: true
      progress: true
  - type: 'custom:mini-media-player'
    entity: media_player.g3_google_mini_02
    name: null
    icon: 'mdi:google-home'
    artwork: none
    group: true
    show_group_count: false
    hide:
      controls: true
      power: true
      info: true
      progress: true
  - type: 'custom:mini-media-player'
    entity: media_player.g3_shed_tuner_speaker
    name: null
    icon: 'mdi:cast-audio'
    artwork: none
    group: true
    show_group_count: false
    hide:
      controls: true
      power: true
      info: true
      progress: true

mat44150 · January 12, 2020, 11:40am

I suggest to have a look at the conditional cards :

You will have to create one card per media player entity.

Morgane · January 12, 2020, 12:26pm

Can someone explain me how icon_state is supposed to work ?
I added it to my config, but the result is the same as if it wasn’t present: the media player icon is changing to white when it’s playing, while an active icon is supposed to be blue based on my theme.
Is there any modification to bring to the theme so that it works ?

- entity: media_player.xyz
  type: custom:mini-media-player
  artwork: full-cover
  show_source: true
  show_progress: true
  hide:
    icon_state: false

Thanks!

kalkih · January 12, 2020, 2:16pm

Hello,
Yes as suggested, check out the conditional-card.

Some of your configs have invalid options or options specified in the wrong place of the config.

  - type: 'custom:mini-media-player'
    name: Whole House Audio Group
    icon: null # you don't need to set this if you don't want to override the default icon.
    entity: media_player.group_whole_house_audio
    group: true
    controls: play_pause # this is not a valid option
    hide: null # same here, you don't need to set this if you don't want to override the default.
    artwork: cover
    tts:
      platform: google_translate
    info: scroll
    source: icon

  - type: 'custom:mini-media-player'
    entity: media_player.kitchen_display
    name: null # same as before
    icon: 'mdi:monitor-speaker'
    artwork: none
    group: true
    show_group_count: false # not a valid option here
    hide:
      controls: true
      power: true
      info: true
      progress: true

Hello,
This isn’t available in a release yet, I must have pushed it to the master branch by mistake which is why you see it in the documentation.
It should work as you described in the next release, sorry for the confusion!