Lovelace: Mini Media Player

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

mimurra3 · January 27, 2019, 1:36pm

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

kalkih · January 27, 2019, 2:24pm

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.

mat44150 · January 27, 2019, 2:51pm

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

kalkih · January 27, 2019, 8:49pm

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

mat44150 · January 27, 2019, 10:04pm

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 !

Sans%20titre

mimurra3 · January 27, 2019, 10:17pm

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.

kalkih · January 27, 2019, 10:27pm

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.

mat44150 · January 27, 2019, 10:51pm

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.

kalkih · January 27, 2019, 10:57pm

Alright, that’s great!

screzwell · January 28, 2019, 12:30am

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

kalkih · January 28, 2019, 1:57pm

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?

screzwell · January 28, 2019, 8:50pm

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.

kalkih · January 28, 2019, 8:56pm

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?

screzwell · January 28, 2019, 9:08pm

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

crazytok · February 3, 2019, 8:01pm

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…

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

kalkih · February 3, 2019, 8:16pm

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?

kalkih · February 3, 2019, 9:09pm

Time for version 1.0.0

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)

DavidFW1960 · February 3, 2019, 9:12pm

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

crazytok · February 3, 2019, 10:01pm

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? As I said, Im total new on this… sorry…