Lovelace: Mini Media Player

Share your Projects! Dashboards & Frontend
570

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

52%20AM
52%20AM1310×826 49.7 KB

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

571

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.

572

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

573

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
574

Here is the browser console log. I don’t think the errors are related to the media player cards.

log
log510×749 26.5 KB

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 !

Sans%20titre

575

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.

1 Like
576

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.

577

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.

578

Alright, that’s great!

579

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

580

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?

581

Sorry for not explaining myself properly.
Using Configurator in Hassio i’m going to my www folder and using the “upload file” option to upload the bundle.js i’ve downloaded. When i click in to the file though the entire code is on line 1 of the js file. I’ve added the reference to the raw config file as i have for other custom files.
I’m getting the “custom element doesn’t exist” error when i try and add the card.
I do genuinely always try and solve the errors i get before asking but as i can’t find anything similar makes me think i’m just being a bit dumb on this.

edit. So i went back and downloaded the zip folder instead, created a new folder and dropped the 9 files from the zip in there, then changed the reference path, and that seems to have solved it.

582

Okay, I’ve never used hassio myself so I wasn’t aware that you upload files through the configurator.
As described above the code should indeed be on a single line, so that’s most likely not the issue.
Would you mind posting the resource reference code you got and also the card configuration?

583

No Problem (I have ninja edited above after you posted with a way that’s worked for me)
I basically copied directly from github for the resource and then a simple two line card to check if it was working.
resources:
- url: /local/mini-media-player-bundle.js?v=0.9.8
type: module

type: 'custom:mini-media-player'
entity: media_player.kitchen_echo
1 Like
584

Ok, I think I have tried everything now… But I’m an amateur in Home Assistant and have just installed it so im still learning.

Probably some easy fault but I really cant figure it out… :frowning:

Im using the latest Hassio install with Lovelace UI. When trying to add a card with mediaplayer, I get this error:
YAML Error: TypeError: Cannot read property ‘startsWith’ of undefined

Im using this code:
type: custom:mini-media-player
entity: media_player.spotify
name: Spotify Player
artwork: cover
power_color: true
hide_volume: true
show_progress: true

If I try to add only:
type: custom:mini-media-player
entity: media_player.spotify

I get: Custom element doesn’t exist: mini-media-player.

I have downloaded the bundle and created a directory “www” within the “config” folder and put it there.

I also have set the frontend parameter in configuration.yaml:
frontend:
javascript_version: latest

Also resources in ui-lovelace.yaml (also tried adding it to storage/lovelace):
resources:

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

Tried with both “module” and “js”

Nothing works! What can i do?? :frowning:

585

Please post the yaml inside a code block, I can’t check if the indentation is correct.

Should look like this

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

If you just created the www folder I believe you need to restart your Home Assistant for it to work.

If you still get Custom element doesn’t exist: mini-media-player , check if you can access the file manually by navigating to http://192.168.1.5:8123/local/mini-media-player-bundle.js (change ip:port to match your HA setup obviously).

Also are you using lovelace storage or yaml mode?

586

Time for version 1.0.0 :tada:

The update includes new TTS options, new Sonos option, ability to seek though media & much more.

Important for existing users
This is a major release and many configuration options have been either reworked, renamed or changed in order to streamline future card configurations but also to make certain new features possible. This does introduce quite a few breaking changes that could effect existing card configurations.
Check the updated option list and the changelog and update your configurations accordingly.

If you have issues, questions or need help migrating to the new options, please open an issue on GitHub or let me know here.

Changelog

  • NEW: Ability to seek through media by pressing on the progress bar
  • NEW: Option hide (#50)
  • NEW: source, name, progress, artwork_border, power_state mute & shuffle parameters to hide option object (#50)
  • NEW: Option shortcuts, replaces media_list & media_buttons
  • NEW: Ability to switch source through shortcuts list/buttons (#47)
  • NEW: Option hide_when_off added to the shortcuts option to specify visibility when entity is off (#49)
  • NEW: Option source to modify how source & source select is displayed
  • NEW: Option info to modify how media info is displayed (#51)
  • NEW: Option tts (#61) (@Devqon)
  • NEW: Two optional TTS options language & entity_id options for TTS (#61) (@Devqon)
  • NEW: Option sync_volume option to sonos object to sync volume across grouped Sonos speakers (#48)
  • NEW: Option show_group_count added to sonos option object to display the number of grouped speakers (if any) in the name
  • NEW: Option expanded to sonos option object to specify default state of the list
  • CHANGE: Responsive design breakpoint changed from 350px to 390px
  • CHANGE: Improved responsive design
  • CHANGE: Icons inside shortcuts list items & buttons is now displayed to the left
  • CHANGE: Progress bar background color is now slightly more transparent
  • CHANGE: Source & source select is now visible by default (if supported & available)
  • CHANGE: Progress bar is now visible by default (if supported & available)
  • CHANGE: Artwork border is now visible by default
  • CHANGE: Renamed and reworked sonos_grouping option to sonos (BREAKING CHANGE)
  • CHANGE: The idle_view option now takes an object (BREAKING CHANGE)
  • FIXED: Progress bar layout when used with group option (#56)
  • FIXED: Issue where consider_idle_after (now idle_view -> after) option would not always work properly
  • FIXED: Inconsistent height of card while using group option and artwork cover (#54)
  • REMOVED: The following options were removed hide_info, hide_power, hide_icon, hide_media_info, hide_volume, hide_controls & hide_mute options (#50) (BREAKING CHANGE)
  • REMOVED: consider_idle_after & consider_pause_idle options were removed, see new idle_view option (BREAKING CHANGE)
  • REMOVED: artwork_border option, see new hide option (BREAKING CHANGE)
  • REMOVED: power_color option, see new hide option (BREAKING CHANGE)
  • REMOVED: show_source option, see new hide & source option (#50) (BREAKING CHANGE)
  • REMOVED: show_progress option, see new hide option (#50) (BREAKING CHANGE)
  • REMOVED: show_shuffle option, see new hide option (#50) (BREAKING CHANGE)
  • REMOVED: show_tts option, see new tts option (BREAKING CHANGE)
  • REMOVED: media_list & media_buttons options were removed, see new shortcuts option (BREAKING CHANGE)
  • REMOVED: scroll_info & short_info options were removed, see new info option (#51) (BREAKING CHANGE)
  • REMOVED: Ability to run the source directly was removed, if you haven’t migrated to the built bundle yet, it’s time to do it now (BREAKING CHANGE)
4 Likes
587

If you just created the www in config you need to restart home Assistant.

588

When I try to create a new card, I paste one or your examples into the lovelace ui “card, editor”

  • type: custom:mini-media-player
    entity: media_player.spotify
    name: Spotify Player
    artwork: cover
    power_color: true
    hide_volume: true
    show_progress: true

But I have also tried:

  • type: custom:mini-media-player
    entity: media_player.spotify

I have restarted HA many times since I created “www” folder.

When I try to access http://192.168.1.21:8123/local/mini-media-player-bundle.js I only get “404: Not Found”

How do I know if Im using lovelace storage or yaml mode? :flushed: As I said, Im total new on this… sorry… :slight_smile:

589

Hmm, if the file is in the correct directory and has the correct name, it should show up.
If possible, post a picture of your folder/file structure.
You could also make sure that the user running home assistant has proper access to the www directory and the mini media player bundle.

You have to specifically set lovelace to yaml mode in your configuration in order to use it, so you are probably running the default storage mode, meaning you customize your views in the UI :wink: