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
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.
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
"
Sorry, actually have no idea what the issue could be then, never seen that before.
How do you use this in the new Lovelace UI editor?
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.
@vidvisionify answered this nicely already, I’ll also quote a post from a few weeks back regarding this.
Thank you!
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
Hello, I’ve been excited to try this project for some time. Unfortunately, I am getting the error “custom element doesn’t exist: mini-media-player”
I am running the latest version of Home Assistant which is using the Lovelace GUI mode. Following earlier instructions, I edited my /config/.storage/lovelace file to:
{
"data": {
"config": {
"resources": [
{
"type": "module",
"url": "/local/mini-media-player/mini-media-player-bundle.js?v=0.9.8"
}
],
"title": "Home",
"views": [
...
In the card, I’ve tried to keep things as simple as possible for now:
entity: media_player.sonos_kitchen
type: custom:mini-media-player
The bundle is in the correct www folder. I have the latest version and I’ve tried clearing the browser cache and restarting Home Assistant several times.
Is there something else that I’m missing? Thank you for any help
Can you post the state attributes of the media player, can be found by accessing /dev-state.
Also, please check the /dev-info log an the browser developer console for errors.
Just double checking, from the resource url it looks like you put the bundle in a folder named mini-media-player inside the www folder, is that correct?
Please check the browser developer console for errors.
Here are the state attributes when a game is launched on the ps4 :
media_content_id: CUSA05625
media_content_type: channel
media_title: Assassin's Creed® Origins
source: Assassin's Creed® Origins
source_list: Assassin's Creed® Origins,Lecteur multimédia,Plex,YouTube
friendly_name: PlayStation 4
icon: mdi:playstation
entity_picture: /local/games/CUSA05625.jpg
supported_features: 6528
custom_ui_state_card: state-card-custom-ui
(images are located in /config/www/games/ folder)
No error on the info page.
Thanks for your help
Okay, please also check the browser console log.
The artwork/thumbnail is fetched from the backend thorugh the WebSocket API, very similar to how the default lovelace media-control card works,
Do the image show up in the default lovelace media-control card (when not nested in an entities card)?
# example config
- entity: media_player.playstation_4
type: media-control
Here is the browser console log. I don’t think the errors are related to the media player cards.
However, the image does not show up when used in a media-control card. There must be a problem with the custom ps4 component. The developer presents a screenshot of a media player with a game cover in this post, that’s why I thought the issue came from the media player configuration. I’ll seek help on this page. Thanks for your help in the troubleshooting !
I’m both embarrassed and excited to say that you solved my problem. I didn’t notice that I was referencing a sub-folder of my ‘www’ directory.
Thank you so much for the help and for this great project! It’s incredibly useful and very well polished.
Okay, that’s interesting.
The reason It works inside the entities card is probably because the image isn’t fetched from the WebSocket API, the image is rendered in a state-badge element which just refers to the location of the image file on disk and applies that url as the background image, I believe.
I’m not sure if it’s supposed to work through the WS API like it’s implemented now or if something need to be changed in the custom PS4 component to make it work.
The issue does come from the ps4 component. I have replaced HMN’s ps4.py file by this one (https://github.com/abdel-elbel/homeassistant-config/blob/master/custom_components/media_player/ps4.py).
The game cover now shows up in both standard media-control card and your mini-media-player card.
Alright, that’s great!
I realise i’m probably doing something completely stupid here, but i’ve had this issue a couple of times with the custom cards as bundle.js files now.
So i’ve downloaded the bundle.js file, and then in configurator i’m uploading the file to the www folder, but each time i do when i look in the js file all of the code has been copied to the first line, and so the code doesn’t work.
Please help an idiot out!!?
What do you mean by uploading the file in the configurator?
As far as the bundle goes (at least for my cards mini-graph-card and mini-media-player) the code is minified before release to take up as little space as possible, so it’s basically made into a single really long line of code.
What error do you get?