Lovelace: Mini Media Player

Remco_Timmer · January 20, 2019, 5:11pm

Solved it by changing

resources:
  - type: module
    url: /local/mini-media-player?v=0.9.8

to:

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

Edit: It worked for a few minutes, then went back to ‘element doesn’t exist’ again

eggman · January 20, 2019, 5:46pm

I think it should be

url: /local/mini-media-player-bundle.js?v=0.9.8

but I don’t think that make a difference.

kalkih · January 21, 2019, 12:11am

@leranp @Remco_Timmer
Make sure you’ve downloaded the latest bundle from the release page and, placed it inside your HA www directory.

Resource reference should look like this:

# ui-lovelace.yaml
resources:
  - url: /local/mini-media-player-bundle.js?v=0.9.8
    type: module

Make the url actually matches with where you’ve placed mini-media-player-bundle.js.

Try clearing cache.

If you are having this problem on an older device or browser, you can try changing type: module to type: js, like below:

# ui-lovelace.yaml
resources:
  - url: /local/mini-media-player-bundle.js?v=0.9.8
    type: js

If nothing above helps, please check the browser developer console for errors and get back to me

leranp · January 21, 2019, 8:57pm

it doesn’t work for me, what do i need to add to configuration.yaml to catch the errors?

kalkih · January 21, 2019, 9:30pm

Nothing. Press F12 in Chrome/Firefox and press the console tab then navigate to the page where you see the error card and watch for errors in the console.

jusdwy · January 22, 2019, 2:34pm

Card suggestion for Sonos Grouping function.

When grouped have the friendly name change to reflect that the player is now in a group.

Pseudo code where SonosGroupNameOption is a ui-lovelace.yaml config option to turn on this group naming method.

 _computeName() {
    if ( this.entity.attributes.sonos_group.length > 1 && SonosGroupNameOption)
    {
        // probably wrong way to get name         
        const newName = this.entity.attributes.friendly_name + " " + this.entity.attributes.sonos_group[1].friendly_name;
        return newName;
    }
    return this.config.name || this.entity.attributes.friendly_name;
  }

kalkih · January 22, 2019, 4:05pm

Great suggestion.
There’s actually already an indication to see if the Sonos is grouped or not, the Sonos button is slightly faded when the entity isn’t grouped, and fully opaque when grouped.

What do you think the name should change to when grouped?
Looking at your pseudo code the name would be “friendly_name” + “master speakers friendly_name”.
Example:
“Sonos bedroom” would become “Sonos bedroom Sonos Kitchen” when grouped.

What about something like this: “Sonos bedroom (grouped)” or “Sonos bedroom (master)” if it’s the master.

What do you think?

jusdwy · January 22, 2019, 4:10pm

Ya, I see that the group icon changes colour which is cool.
Any of those naming options make sense. I don’t have my sonos named with “sonos …” just the speaker’s name, so grouped it would look like “Kitchen + Office” or whatever. Obviously it would get ridiculous to list all in the group, so the latter options would make more sense in that case. Maybe include the number in the group? Sonos bedroom +1, +2, etc.

kalkih · January 22, 2019, 4:15pm

Love the idea of having “friendly_name +(number_of_group_members)”.
It’s both shorter and provides additional information, only thing you would miss out on is if it’s the master or not.

jusdwy · January 22, 2019, 4:18pm

I’m working on a system to hide my speakers when they aren’t the master so hopefully I won’t have that problem.

kalkih · January 22, 2019, 4:24pm

Great, I opened an issue on GitHub to track this and will include this feature in the next version.

Thanks!

leranp · January 22, 2019, 4:39pm

0:1 Active resource loading counts reached a per-frame limit while the tab was in background. Network requests will be delayed until a previous loading finishes, or the tab is brought to the foreground. See https://www.chromestatus.com/feature/5527160148197376 for more details localhost:5000/@polymer/polymer@%5E3.0.2/lib/mixins/properties-mixin.js?module:1 Failed to load resource: net::ERR_CONNECTION_REFUSED /frontend_latest/f472ba3cb4559cb19acc.chunk.js:5759 Uncaught (in promise) /local/button-card.js localhost:5000/@polymer/polymer@%5E3.0.2/lib/utils/case-map.js?module:1 Failed to load resource: net::ERR_CONNECTION_REFUSED localhost:5000/lit-html@%5E0.10.0/lib/shady-render.js?module:1 Failed to load resource: net::ERR_CONNECTION_REFUSED localhost:5000/lit-html@%5E0.10.0/lib/lit-extended.js?module:1 Failed to load resource: net::ERR_CONNECTION_REFUSED localhost:5000/lit-html@%5E1.0.0-rc.1?module:1 Failed to load resource: net::ERR_CONNECTION_REFUSED /frontend_latest/f472ba3cb4559cb19acc.chunk.js:5759 Uncaught (in promise) /local/mini-media-player.js?v=0.9.8 localhost:5000/lit-html@%5E1.0.0-rc.1/lib/shady-render?module:1 Failed to load resource: net::ERR_CONNECTION_REFUSED localhost:5000/lit-html@%5E1.0.0-rc.1/lit-html?module:1 Failed to load resource: net::ERR_CONNECTION_REFUSED /api/media_player_proxy/media_player.living_room_tv?token=XXXXXXXXXXX&cache=XXXXXXXX:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error) media_player.living_room_tv:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error) f472ba3cb4559cb19acc.chunk.js:5759 Uncaught (in promise) /local/mini-media-player.js?v=0.9.8

kalkih · January 22, 2019, 5:51pm

Did you followe the instructions properly? and downloaded mini-media-player-bundle.js and not mini-media-player.js?

Error shows /local/mini-media-player.js?v=0.9.8 on several places as well as “ERR_CONNECTION_REFUSED” which indicates that you are using mini-media-player.js.

leranp · January 22, 2019, 6:34pm

i tried both of them , now i have change only to bundle and this is the error log:
"
workbox-core.prod.js:1 Uncaught (in promise) TypeError: Failed to execute ‘fetch’ on ‘ServiceWorkerGlobalScope’: ‘only-if-cached’ can be set only with ‘same-origin’ mode
at Object. (workbox-core.prod.js:1)
at Generator.next ()
at n (workbox-core.prod.js:1)
at workbox-core.prod.js:1
workbox-core.prod.js:1 Uncaught (in promise) TypeError: Failed to execute ‘fetch’ on ‘ServiceWorkerGlobalScope’: ‘only-if-cached’ can be set only with ‘same-origin’ mode
at Object. (workbox-core.prod.js:1)
at Generator.next ()
at n (workbox-core.prod.js:1)
at workbox-core.prod.js:1

"

kalkih · January 23, 2019, 1:44pm

Sorry, actually have no idea what the issue could be then, never seen that before.

JesseWebDotCom · January 25, 2019, 2:12am

How do you use this in the new Lovelace UI editor?

vidvisionify · January 25, 2019, 2:19am

You’ll want to add the module first in the raw config editor. (Top right three dot menu, Configure UI, then go to that menu again to open the raw config editor)

Be sure to save that, Then when you add a card, skip the card selection. You can put you card config there.

kalkih · January 25, 2019, 2:31am

@vidvisionify answered this nicely already, I’ll also quote a post from a few weeks back regarding this.

kalkih:

Marius82:

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?

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

JesseWebDotCom · January 25, 2019, 2:39am

Thank you!

mat44150 · January 27, 2019, 1:01pm

I love this custom media player card ! It looks really great.
I have just installed the custom ps4 media player component (https://github.com/hmn/home-assistant-config/wiki/media_player_ps4), which displays a local image for each game (the online file does not seem to work).
The image displays properly with the “state UI view” (which does not use the mini-media player card), but nothing shows up in the lovelace UI view as you can see on the screenshot below. Still, when I click on the card to display more info, I can see a small thumbnail.

Here is my ui-lovelace.yaml config :

      - entity: media_player.playstation_4
        type: custom:mini-media-player
        artwork: full-cover
        show_source: true
        hide_controls: true
        hide_volume: true
        show_progress: false
        group: true

Is there a config option to display this local game image in the frontend ?

Thank you !
Mat