Lovelace: Mini Media Player

QbaF · November 10, 2019, 11:10pm

This picture is not a photoshop product. It is working and it is done, in fact by multiple mini-media-players. The biggest issue for me is the dynamic background picture. But thanks for the idea/direction.

DaveUK83 · November 11, 2019, 11:37am

Hi, loving the look of this! Just wondered if you would be able to share your code for it please!

DaveUK83 · November 11, 2019, 12:24pm

Wondering if anyone can help.

On a different card, i’m using these lines of code to turn on my various media (all connected through harmony)

 - entity: switch.chromecast
      - entity: switch.xboxone
      - entity: switch.playstation_2
      - entity: switch.xbox360

Is there a way of getting the switches to work whilst using buttons? I’ve been playing around but struggling.

kalkih · November 11, 2019, 2:13pm

Yes, here’s an example with two shortcut buttons.

...
buttons:
  - type: service
    name: switch 1
    id: switch.toggle
    data:
      entity_id: switch.name1
  - type: service
    name: switch 2
    id: switch.toggle
    data:
      entity_id: switch.name2

DaveUK83 · November 11, 2019, 5:35pm

**Solved! Please see post below - Lovelace: Mini Media Player"

Thank you for that, seems i’m heading in the right direction now! Although, are you able to see what i’ve got wrong here, as it’s throwing up errror “duplicated mapping key at line 12, column 5: type: service ^”

entity: media_player.pioneer
type: 'custom:mini-media-player'
hide_when_off: false
shortcuts:
  columns: 4
  buttons:
  - icon: mdi:cast
    type: service
    name: Chromecast
    id: switch.toggle
    entity: switch.chromecast
    type: service
    name: Xbox One
    id: switch.toggle
    data:
      entity_id: switch.xboxone

If I remove the below, then the chromecast toggle shows up and works fine.

    type: service
    name: Xbox One
    id: switch.toggle
    data:
      entity_id: switch.xboxone

I’ve tried playing around and going over the code, but i’m guessing it’s something really obvious i’m missing!

DaveUK83 · November 11, 2019, 6:49pm

Managed to get it working after much playing around! Seems like missing out the ‘-’ before type was my issue! Here is my revised code incase anyone else stumbles across this with the same problem.

entity: media_player.pioneer
type: 'custom:mini-media-player'
hide_when_off: false
shortcuts:
  columns: 2
  buttons:
    - type: service
      icon: 'mdi:cast'
      name: Chromecast
      id: switch.toggle
      data:
        entity_id: switch.chromecast
    - type: service
      icon: 'mdi:xbox'
      name: Xbox One
      id: switch.toggle
      data:
        entity_id: switch.xboxone
    - type: service
      name: Playstation 3
      icon: 'mdi:playstation'
      id: switch.toggle
      data:
        entity_id: switch.playstation_2
    - type: service
      icon: 'mdi:xbox'
      name: Xbox 360
      id: switch.toggle
      data:
        entity_id: switch.xbox360

One more question - I’m hoping it’s possible! How would I go about having the button highlighted, or change colour when that activity is in use?

So if Chromecast is being use, it would look different to the other three buttons?

tormagj · November 11, 2019, 9:16pm

Hi @kalkih! I’ve made a custom component out of the Heos integration which I’m using with your great media player card. I managed to add services for grouping of HEOS-speakers that seems to be working fine (still testing though…). Also added turn_off feature that simply does the same as stop and this allows me to use your power button.

I’m successfully joining and unjoining players to/from groups using your card, but I can see something is missing in my humble “hack” since the group status is not read and updated. As a result the card only shows correct status when the commands are successful, and they’re also not updated next time I open the card. I was trying to poke around in your code to see how it’s updated, but couldn’t really find how this the group status et.c. is read. Would you be so kind to give me some hints on my way there?

Thanks in advance, and thanks a lot for a great card!

kalkih · November 11, 2019, 9:21pm

Not possible in shortcuts with service/script calls, if the source changed would be within the same entity as the card entity this would have been possible. See the attribute option in the shortcuts object.
The reason behind this is because we don’t watch or keep track of state changes happening outside of the card entity.

If you need more advanced buttons I recommend checking out the custom button-card. Combining a mini-media-player card (with the group option set to true) with a couple of button-cards inside a vertical-stack-in-card would be an option.

kalkih · November 11, 2019, 9:35pm

That’s awesome, it’s great seeing more and more media player platforms getting support for multiroom management within HA.

Please check this issue and the discussion there, as I think this might be related.

Basically what I think your implementation is missing is an attribute that expose the group composition.

I’ll quote myself from another post:

The main thing that keeps the speaker group management card feature from not working with the official soundtouch component is the lack of an exposed group attribute, we need this to keep track of groups and group members/master etc.

In order to function without any modifications to this card the group attribute should look something like this (this is also how the Sonos component does it):

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.

The attribute is exposed as [platform]_group ( soundtouch_group in this case).

Here’s a PR that adds just this to the bluesound component, and here’s one for the soundtouch component.

Feel free to open an issue on github if you want to discuss this further

tormagj · November 11, 2019, 9:42pm

Great, thanks! I think I get the point, I’ll try to implement it. My luck is that the pyheos library already contains the grouping functionality, also including a class for groups. So I believe it should be a minor thing to get it working. I tried to read up on the Sonos code, but didn’t quite figure it out. I’ll study the thread you suggested and do some testing.

Basically it would be something like
heos_group = [‘media_player.themaster’, ‘media_player.themember’,…]
right?

kalkih · November 11, 2019, 9:47pm

Exactly! Yes, the Sonos implementation and the two PR’s I linked are great examples. Check the “Files changed” tab on the PRs, there you can easily see the code added to implement the group attribute

Matt_Barnes · November 13, 2019, 4:38pm

Hello.

Do the custom shortcut buttons support images instead of icons? I was hoping to use icons from flaticon.com as they offer a bit more clarity but this does not work:

      - type: custom:mini-media-player
        entity: media_player.skyq
        name: SkyQ
        icon: mdi:blank     
        artwork: cover
        background: "https://wi-images.condecdn.net/image/m9qkOnPpZnz/crop/1620/f/screen-shot-2015-11-18-at-100440.jpg"
        hide:
          volume: true
          source: true
          power_state: false       
        shortcuts:
          columns: 6 # Max buttons per row
          buttons:
      # Channel Up
            - image: "/local/images/remote/remote_icons/001-sort-up.png"
             # name: 'Ch+'
              type: source
              id: 'CHup'

kalkih · November 13, 2019, 6:25pm

Hey,
There’s an open feature request for just this over on github #146, it’s currently not possible but could definitely be implemented in the future.

tormagj · November 13, 2019, 7:46pm

Hi Karl! Just to let you know I got it working with HEOS grouping. Probably rough and dirty, but hey, it’s working Thanks for your inputs, it really helped. Hopefully this feature will be part of the official integration soon, I know Andrew is working on it and will for sure make it more “fluent” than I have.

kalkih · November 13, 2019, 11:52pm

Nice, great job!
If/when it comes to the official component, please ping me and I’ll add information about it in the mini-media-player docs (or if you wanna create a PR)
Thanks!

QbaF · November 14, 2019, 12:22pm

No success with that entity_picture extracting. Any chance for a piece of code for taking that picture and putting in the background of verical-stack-in-card?

kalkih · November 14, 2019, 2:57pm

It seems like card-mod styles doesn’t stick to verical-stack-in-card, here’s an example with an entities-card instead:

- type: entities
  style: |
    ha-card {
      position: relative;
      background: url('{{ state_attr('media_player.example', 'entity_picture') }}') center / cover; # this is really the only line you need to set the background
    }
    # everything below is optional styling
    ha-card::before {
      content: '';
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      background: rgba(0,0,0,.5);
    }
    .card-content {
      padding: 8px;
    }
    .card-content > div {
      margin: 0 !important;
    }
  entities:
    ...cards

QbaF · November 14, 2019, 4:55pm

Perfect! Thanks a lot @kalkih
Is there a chance for background: url... opacity?

kalkih · November 14, 2019, 6:37pm

You’re most welcome!
You could move the background image from ha-card to ha-card::before, and specify the opacity.

ha-card::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: url('{{ state_attr('media_player.example', 'entity_picture') }}') center / cover;
  opacity: .25; # 25% visible
}

QbaF · November 14, 2019, 7:17pm

I thought that entity_picture disappeared after that change. But deleting comment between style and ha-card::before { helped. Unfortunately now opacity: does not work.

And another magic: it works only with # this is... comment at the end of line background: url.... Without that comment it disappeare.

another EDIT: this magic works only if there is other (in any vew) duplicated this card.

With one even opacity does work.