Lovelace: Mini Media Player

crazytok · November 8, 2019, 11:43am

One more thing, is it possible to make the full artwork image clickable to move to a specific url in lovelace?

Something like:

tap_action: 
                  action: navigate
                  navigation_path: /lovelace/3/

kalkih · November 8, 2019, 1:48pm

Currently no, but could add the tap_action option in the future, it’s been requested before and can be tracked here:

crazytok · November 8, 2019, 2:47pm

Ok, would be a really nice feature!

Im using this mini media player on my Main screen, so it would have been nice to just Tap the artwork and be redirected to another more advanced music tab with more options, volume control and more!

I would also like this feature on the mini graph card!

mcg · November 8, 2019, 7:19pm

@kalkih, thanks for this amazin’ card!
I’m just getting into it a little more, tryin’ around and meanwhile really like it!
In my setup, there’s a WiFi switch controling the media player’s power, leaving it ‘unavailable’ when powered down.
Is there any possiblity to link the power button to a switch entity instead of the media player itself? Ofc during the unavailibility of the media player the power button ought stay available instead of showing the unavailablity state as plain text.
Or is something like this maybe achievable with the idle_view option?
–> idle_view when_unavailable: show just the the icon, name and power button?

Thanks!

kalkih · November 8, 2019, 10:25pm

Thanks, glad you like it!

You should be able to do this with a Universal Media Player by mapping the turn_on / turn_off services & possibly the state attribute to the switch. Then use this universal media player as the card entity.

Dansker · November 9, 2019, 3:04am

Here is a simple as it gets example of this:

Karl, been using your player for nearly a year, daily. 3 sites, 12 receivers, house amps, TV’s and projectors. Keep up the great work, and all your most pleasant helpfulness at every turn.

Thank you !!!

mcg · November 9, 2019, 12:01pm

Thanks, that did the trick!

kalkih · November 9, 2019, 1:24pm

Thank you for your support and kind words @Dansker made me happy

nickrout · November 9, 2019, 10:48pm

@Dansker only said what we all think, so consider this a repeat

In fact

while true
   repeat what @Dansker said

QbaF · November 10, 2019, 9:14pm

Is there a chance to have UI as this withous CSS’s?

kalkih · November 10, 2019, 9:48pm

Should be mostly possible yes, by having multiple mini-media-player cards with the group options set to true and by utilizing the various hide options. As an example, for the last card you’d hide everything except for the progress and runtime.

Not sure about the artwork though, you could probably use card-mod and with templating extract the entity_picture attribute and use that as the background for the card (vertical-stack-in-card) wrapping the mini-media-player cards.

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