Lovelace: Mini Media Player

danielphan1910 · December 20, 2018, 2:40pm

I’m using HA version 0.84.2 running on Windows 10. I installed some custom cards before & all works. However, now facing the error below when installing custom mini-meddia-player:
Custom element doesn’t exist: mini-media-player.
{
“entity”: “media_player.living_room_tv”,
“type”: “custom:mini-media-player”
}
Following the instruction, I did exactly the same every steps to install but eventually all end-up with the error Custom element doesn’t exist: mini-media-player. Anybody have same issue like me?

kalkih · December 20, 2018, 5:34pm

That’s cool!
I don’t know how a potential integration would work, but you could certainly borrow some of the code when building your card.

Hey, what does your resource reference look like?

danielphan1910 · December 21, 2018, 4:36am

Hi, this is my resources looks like. I also did trying change type from ‘module’ to ‘js’ but no luck

> resources:
>   - type: module
>     url: /local/button-card.js
>   - type: js
>     url: /local/slider-entity-row.js
>   - type: css
>     url: /local/my-webfont.css
>   - type: module
>     url: /local/mini-media-player-bundle.js?v=0.9.7

It’s really strange since I applied successfully custom plug-ins like slider-endity-row but failed for mini-media-player & button-card.
Thanks for your response!

kalkih · December 21, 2018, 9:01pm

That looks fine, except the “>” symbols, they shouldn’t be there? But maybe that’s just a format error when you posted it here.

Hmmm… Did you place the mini-media-player-bundle.js file directly inside your www folder or did you put it somewhere else?

Or are you possibly running a really old browser?

Marius82 · December 22, 2018, 11:36am

Can I use this card if I use the Lovelace GUI mode? There is no ui-lovelace.yaml file. Have I to create this file? Even if I use the storage lovelace mode?

rsachoc · December 22, 2018, 5:14pm

I’m running it just fine using storage mode for the lovelace YAML file.

vjmindlab · December 22, 2018, 5:34pm

same problem all was working fine untill i updated hassio to 0.84.6 and configured my lovelace to use yaml file. all my other custom cards still work fine

kalkih · December 22, 2018, 8:02pm

New version v0.9.8

Replace mute option, media button icons & more…

And as usual, visit the Github repo for the updated readme, with instructions and examples.

Changelog

Added: replace_mute option #43
Added: icon option to media object (media buttons/list)
Changed: made name option for media object (media buttons/list) optional
Changed: renamed media item object url option to id (you can still use url for now)
Changed: new shuffle icon style
Fixed: more_info not working when using card inside entities card #44
Fixed: animation improvements
Fixed: cleaned up & removed redundant code
Fixed: bumped dependencies

hyperion_8123_lovelace_4

kalkih · December 22, 2018, 8:40pm

Yes you can, you just need to add the resource reference to mini-media-player-bundle.js in the auto generated lovelace file stored in /config/storage/lovelace instead of adding it in ui-lovelace.yaml.

I personally wasn’t able to use the “Raw config editor” in the GUI (left me with a blank file) so I had to open the file in a text editor to make the changes.

The beginning of the file should look something like this:

{
    "data": {
        "config": {
            "resources": [
                {
                    "type": "module",
                    "url": "/local/mini-media-player/mini-media-player-bundle.js?v=0.9.8"
                }
            ],
            "theme": "default",
            "title": "Home Assistant",
            "views": [
                ...

And when you want to add a mini-media-player card from the “Edit UI” GUI, just select media-control card (or any other card) and replace type: media-control with type: custom:mini-media-player, and then continue on with the rest of the options

maurizio53 · December 23, 2018, 1:16pm

Can you show an example about how to use the new options replace_mute and icon?

kalkih · December 23, 2018, 2:29pm

Here’s the yaml from the example screenshot.

# Example ui-lovelace.yaml entry
- entity: media_player.television
  type: custom:mini-media-player
  hide_controls: true
  replace_mute: play
  media_buttons:
    - icon: mdi:youtube
      name: YouTube
      type: ...
      id: ...
    - icon: mdi:google-play
      name: Google Play
      type: ...
      id: ...
    - icon: mdi:spotify
      type: ...
      id: ...

hyperion_8123_lovelace_4

Marius82 · December 23, 2018, 3:17pm

Thank you very much for your detailed explanation!
It works!

Marius82 · December 23, 2018, 4:33pm

Can anyone show me a working example for the media_button for Sonos speaker?

media_buttons:
  - name: RA-Heavy Metal
    type: music
    url: 'http://www.rockantenne.de/webradio/channels/heavy-metal.aac.pls'

I get this error:
ERROR (SyncWorker_1) [homeassistant.components.media_player.sonos] Error on play_media with UPnP Error 800 received: from 192.168.178.5

Thanks

tmorton · December 24, 2018, 8:34pm

I have been trying to get the sonos_grouping to work in lovelace storage mode. Is this the only place where the groups need to be defined? I have added the configuration and made sure hide_power: true as it appears the grouping option is in the same location as power. However they never show up. just making sure I did not need additional configuration in another .yaml flie somewhere?

Here is the config I am using.
entity: media_player.kitchen
type: ‘custom:mini-media-player’
artwork: cover
hide_power: true
sonos_grouping:
- entity_id: media_player.loft
name: Sonos Loft
- entity_id: media_player.kitchen
name: Sonos Kitchen

Thanks!

kalkih · December 24, 2018, 9:23pm

Hi,
You don’t necessarily have to to hide the power button, the Sonos group button should show up either way as long as you got the latest version of the card and a valid config. And It should work the same in storage mode.

Since you didn’t post your config as a code block I can’t check if the indentation is correct.

Here is what it should look like:

- entity: media_player.kitchen
  type: ‘custom:mini-media-player’
  artwork: cover
  hide_power: true
  sonos_grouping:
    - entity_id: media_player.loft
      name: Sonos Loft
    - entity_id: media_player.kitchen
      name: Sonos Kitchen

If you recently updated your card from an older version, try clearing your browser cache and check if it works. If not, let me know.

tmorton · December 25, 2018, 1:54am

I did clear the cache and I just grabbed the latest bundle as of today. I tried both safari and chrome with same result.

Thanks!

kalkih · December 25, 2018, 3:02pm

Very strange, if you are sure you are running version v0.9.6 or later of the card, I’m not sure what the issue could be.

I switched over to storage mode to check, and I don’t have the issue (see below)

Do you see any errors in the browser console log?

tmorton · December 27, 2018, 3:43pm

Well, You were correct I had an older version of the bundle that was loading. Thanks for all the help and sorry for not double checking it sooner.

Thanks!

gerard33 · December 28, 2018, 10:43am

This config is working for me.

media_buttons:
  - name: 538
    type: music
    url: http://18973.live.streamtheworld.com/RADIO538.mp3

Stewface · December 28, 2018, 11:10am

@kalkih kudos to you!

This little plugin has seen some amazing progress the last few weeks! Very impressive - thank you for all your hard work!