Lovelace: Mini Media Player

Ok I tried the new resource reference and that dont work for me. I need to use local reference for it to work right now… :confused:

If you’re still on an older version of HACS the “old” resource url might still point to the correct location.
You can easily figure this out by navigating to the card in HACS and check what resource reference is stated there.
Otherwise try reinstalling the card in HACS and if that doesn’t help consider opening an issue in the HACS repo.

I will check this out!

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/

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

2 Likes

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! :wink:

2 Likes

@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! :slight_smile:

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.

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 !!!

3 Likes

Thanks, that did the trick! :ok_hand:

1 Like

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

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

In fact

while true
   repeat what @Dansker said
1 Like

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

image

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.

1 Like

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.

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

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.

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
1 Like

**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!

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

image

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?

2 Likes