Lovelace: Mini Media Player

Would it be possible to make the shortcuts dropdown look/behave like the speaker group dropdown?
Eg:
When I open a speaker group it extends the card, and artwork cover, and displays well.
When I open a shortcut dropdown it displays on top of(or behind!) the element below, or if the media player is inside a layout card or similar, sometimes gets cutoff or extends inside the parent card in an undesirable way.

@kalkih As a big fan of your great plugins I was helping my son with his ‘remote control’ for his LG TV (webostv) using your Mini Media Player card. I noticed the support of tap_action to start a service. So I created a button to start a service to turn on his tv with a WOL packet (replaced the real mac address with a fake one):

    - icon: 'mdi:power'
      name: ' '
      type: service
      tap_action:
        action: call-service
        service: wake_on_lan.send_magic_packet
        service_data:
          broadcast_address: 192.168.2.27
          mac: 'aa:bb:cc:dd:ee:ff'

But something is (done) wrong, because i get this error:

2020-04-07 14:31:46 ERROR (MainThread) [frontend.js.latest.202003181] https://xxxxxx.duckdns.org:8123/hacsfiles/mini-media-player/mini-media-player-bundle.js:1:73711 Uncaught TypeError: Cannot read property ‘split’ of undefined

Using dev tools to start the service wake_on_lan.send_magic_packet with service data as below works!
broadcast_address: 192.168.2.27
mac: ‘aa:bb:cc:dd:ee:ff’

Someone any clue?

No, try the custom spotify card

No, the shortcut list shouldn’t get cutoff though, there’s an issue open on github regarding this, and while I can try to make it work with most cards it also depends on the card you nest it inside, if it doesn’t allow overflow I can’t really do anything on my end.

Hello,
tap_action is not a valid option for a shortcut object, here are some shortcut examples.

Try this, this should work.

- icon: 'mdi:power'
  type: service
  id: wake_on_lan.send_magic_packet
  data:
    broadcast_address: 192.168.2.27
    mac: 'aa:bb:cc:dd:ee:ff'

@kalkih You’re the best!! Thanks!!

2 Likes

Okay, I have been messing with this for months on my own and can not find a resolution. I even have asked my friend Mr google 1001 different ways and he has not helped


I am not 100% sure what my limitations would be so I have a couple of questions.

Is there a way to make it so if a “Google Speaker Group” is not playing to Hide the associated speakers?

So here the group is ‘Inside House Audio’ lets call it iHA.
I also have one for ‘Whole House Audio’ we will call it wHA.
wHA use all the same speakers but has 1 addon my ‘Shed Tuner’
Now for this card when the iHA is NOT playing it would be nice to hide all the speakers.

In this instance this is what I see when iHA is playing. It would be nice and clean looking if the speakers under wHA would be hidden as it is not being used currently


type: entities
entities:
  - entity: media_player.inside_house_audio
    type: 'custom:mini-media-player'
    group: true
    artwork: null
    source: icon
    info: short
    hide:
      volume: false
      power: false
  - entity: media_player.kitchen_display
    type: 'custom:mini-media-player'
    group: true
    artwork: none
    icon: 'mdi:monitor-speaker'
    hide:
      controls: true
      info: true
      power: true
      progress: true
  - entity: media_player.living_room_speaker
    type: 'custom:mini-media-player'
    group: true
    artwork: none
    icon: 'mdi:cast-audio'
    hide:
      controls: true
      info: true
      power: true
      progress: true
  - entity: media_player.dinning_room_speaker
    type: 'custom:mini-media-player'
    group: true
    artwork: none
    icon: 'mdi:cast-audio'
    hide:
      controls: true
      info: true
      power: true
      progress: true
  - entity: media_player.master_bed_room_mini
    type: 'custom:mini-media-player'
    group: true
    artwork: none
    icon: 'mdi:google-home'
    hide:
      controls: true
      info: true
      power: true
      progress: true
  - entity: media_player.family_room_mini
    type: 'custom:mini-media-player'
    group: true
    artwork: none
    icon: 'mdi:google-home'
    hide:
      controls: true
      info: true
      power: true
      progress: true

Wrap the individual speakers speakers in a vertical-stack inside a conditional card and base the condition on the speaker group entity state.

1 Like

Thank you, I was trying to do conditions but as I am pretty new to this I was not able to get them to work. Would you be able to show me how it would work? I know
 Its kinda like asking you to do my homework for me but its driving me CRAZY!

I would propose something like this

- type: custom:mini-media-player
  entity: media_player.speaker_group
- type: conditional
  conditions:
    - entity: media_player.speaker_group
      state_not: 'off'
    - entity: media_player.speaker_group
      state_not: 'unavailable'
  card:
    type: entities
    entities:
      - type: custom:mini-media-player
        entity: media_player.group_speaker_1
        group: true
      - type: custom:mini-media-player
        entity: media_player.group_speaker_2
        group: true
      - type: custom:mini-media-player
        entity: media_player.group_speaker_3
        group: true
      ...

If you want everything inside “the same card” you could wrap everything inside a vertical-stack-in-card or similar and then use a vertical-stack inside the conditional card instead of the entities card.

1 Like

Thank you very much! I am so new to code and does not help that all my code is MUTCode.

1 Like

Great work, (as for many) my favorite card now !
I am using 2 Bose Soundtouch devices, and "cloned"the 6 preset buttons. User friendliness for the wife to convince her to use HASS

My 3rd player is an obnoxious LG Music Flow H5, integrated as a Chromecast device. The LG app sucks big time, and with mini-media-player I managed to create the same look/feel in HASS as for my Bose devices, although using mp3 streams. Now much more reliable and uninterrupted play !

My question:
The streams I send to my Chromecast device (mp3) apparently do not contain artwork. Can I force some kind of artwork or a picture as a background when I am streaming to the device? Or the same picture for each different stream ?

The view on my Bose when playing:
Bose2

And the view on my LG in Chromecast mode:
LG

My card code for the LG Chromecast player:

artwork: cover
entity: media_player.lg_garage_2
hide:
  controls: true
  icon: false
  info: false
  mute: true
  play_pause: true
  play_stop: true
  power_state: false
  progress: true
  shuffle: false
  source: true
  volume: false
idle_view: when_idle
info: scroll
max_volume: 40
shortcuts:
  align_text: center
  buttons:
    - id: 'https://icecast.omroep.nl/radio2-bb-mp3'
      image: /local/radio2.png
      type: channel
    - id: 'https://icecast.omroep.nl/3fm-bb-mp3'
      image: /local/radio3.png
      type: channel
    - id: 'https://18973.live.streamtheworld.com/RADIO538.mp3'
      image: /local/538.png
      type: channel
    - id: 'https://icecast-qmusicnl-cdp.triple-it.nl/Qmusic_nl_live_96.mp3'
      image: /local/qmusic.png
      type: channel
    - id: 'https://19993.live.streamtheworld.com/SKYRADIO.mp3'
      image: /local/skyradio.png
      type: channel
    - id: 'http://icepool.silvacast.com/COUNTRY108.mp3'
      image: /local/country108.png
      type: channel
  columns: 3
type: 'custom:mini-media-player'

Tnx,
John

1 Like

Hi i installed

Im trying to put the custom option on my card:

type: custom:mini-media-player
entity: media_player.fire_tv

And i get that error : Error: Custom element not found: mini-media-player

I already paste the mini-media-player-bundle.js on home assistant\homeassistant\www directory
and paste the

resources:

  • url: /local/mini-media-player-bundle.js?v=1.7.0
    type: module

on the ui-lovelace.yaml must do something else to recognize the custom media ?

Resources should be added in your configuration.yaml now instead of in ui-lovelace.yaml.
And if you’re using the GUI go to Configuration, then Lovelace dashboard, and there should be add resources or something similar I believe.

I tried to paste that on the UI config and now i get that error(see the picture)

Do as it says in the popup and you should be fine.

hey guys, trying to get buttons for my TVs to start youtube, netflix and amazon prime video.

basicly just like this:

when i understood it correctly i can use something like this:

  shortcuts:
    columns: 3 # Max buttons per row
    buttons:
      # Youtube
      - icon: mdi:cat
        type: source
        id: youtube
      # NEtflix
      - icon: mdi:dog
        type: source
        id: netflix

looks like there is something wrong tho, could someone help me with that?

Hey all,

Is there a possiblity to use this player, and the source “select” from the spotcast sensor?

Im testing this card with Kodi and noticed that artwork for TV shows doesnt show. I just get a black artwork where as with movies i get the proper artwork.

Any ideas on where to start looking?

Hey man,

Your card is amazing!

I am having a few issues though, my player is extremely transparent and the ‘mini-media-player-artwork-opacity’ doesn’t work/allow me to change the opacity.

I cannot hide the ‘power_state’ either

EDIT: I got the power sorted it was meant to be ‘power not power_state’

I believe I’m using the most updated version, i installed it through HACS

Thanks for your help

I figured in the spirit of community, I would share my config. I am sure there are many like it, but this one is mine


Shortfalls:

  • Unable to enable ‘back’ and ‘skip’ controls
  • Can not directly start casting from youtube music from Hassio

Please let me know if you have any suggestions that would correct, optimize or add functionality I am very new to .yaml and Hassio.

Stream Service:

  • youtube music

Hardware:

  • google display
  • google mini x 2
  • google audio casts x 3. (Awesome devices, that seem to be EOL as they were very under-appreciated)
    • Dining / Living Room, each paired with an ‘Anker Soundcore 2’
    • Shed, is paired with a Sony AV tuner

While nothing is playing:

After saying, 'hey google, play music whole house audio":

My working code:

(I do not understand why HA screws up all YAML code formatting after a reboot
)

cards:
  - artwork: cover
    entity: media_player.whole_house_audio
    group: true
    hide:
      power: false
      volume: false
    info: scroll
    source: icon
    type: 'custom:mini-media-player'
  - card:
      entities:
        - artwork: none
          entity: media_player.kitchen_display
          group: true
          hide:
            controls: true
            info: true
            power: true
            progress: true
          icon: 'mdi:monitor-speaker'
          type: 'custom:mini-media-player'
        - artwork: none
          entity: media_player.living_room_speaker
          group: true
          hide:
            controls: true
            info: true
            power: true
            progress: true
          icon: 'mdi:mdi:cast-audio'
          type: 'custom:mini-media-player'
        - artwork: none
          entity: media_player.dinning_room_speaker
          group: true
          hide:
            controls: true
            info: true
            power: true
            progress: true
          icon: 'mdi:mdi:cast-audio'
          type: 'custom:mini-media-player'
        - artwork: none
          entity: media_player.master_bed_room_mini
          group: true
          hide:
            controls: true
            info: true
            power: true
            progress: true
          icon: 'mdi:mdi:cast-audio'
          type: 'custom:mini-media-player'
        - artwork: none
          entity: media_player.family_room_mini
          group: true
          hide:
            controls: true
            info: true
            power: true
            progress: true
          icon: 'mdi:mdi:cast-audio'
          type: 'custom:mini-media-player'
        - artwork: none
          entity: media_player.shed_tuner
          group: true
          hide:
            controls: true
            info: true
            power: true
            progress: true
          icon: 'mdi:mdi:cast-audio'
          type: 'custom:mini-media-player'
      show_header_toggle: false
      type: entities
    conditions:
      - entity: media_player.whole_house_audio
        state_not: 'off'
      - entity: media_player.whole_house_audio
        state_not: unavailable
    type: conditional
type: 'custom:vertical-stack-in-card'

3 Likes

A man of culture I see.

2 Likes