Answering my own question. Found a comment above about how you can’t use card-mod on the buttons because ::shadow and /deep/ have been depreciated (this explains a lot of card-mod failures actually, so glad I learned it). So I just went into the source and found slot-container and changed it’s margin to 0px and I got the below:
deprecated!
Thanks @GH2user, copy pasting your code doesn’t work for me. I suspect you posted part of the necessary code? Could ou post the full code?
Thanks!
FYI you may be interested in this in case you have multiple HEOS devices:
https://community.home-assistant.io/t/heos-group-support/
Hello, could you precise where in the source ?
I installed it via hacs which made it one file with one very long line, so no, I can’t. But the search term only returned 2 hits, so just go to the GitHub repo and search it.
Hi @quizzical
Don’t know if I snapped a bit off or not; currently have this which does work and is straight from the UI-editor. Note that you need to change the Favorite stations as per your source list name.
entities:
- artwork: full-cover
entity: media_player.denon
group: true
shortcuts:
buttons:
- icon: 'mdi:arrow-top-right-thick'
type: service
name: Arrow
id: media_player.play_media
data:
entity_id: media_player.denon
media_content_type: favorite
media_content_id: Arrow Classic Rock
- icon: 'mdi:newspaper-variant-outline'
type: service
name: BNR
id: media_player.play_media
data:
entity_id: media_player.denon
media_content_type: favorite
media_content_id: BNR Nieuwsradio
- icon: 'mdi:weather-night'
type: service
name: Sky
id: media_player.play_media
data:
entity_id: media_player.denon
media_content_type: favorite
media_content_id: Sky Radio 101 FM 101.5 (Adult Contemporary Music)
- icon: 'mdi:satellite-variant'
type: service
name: Xtrend
id: media_player.play_media
data:
entity_id: media_player.denon
media_content_type: favorite
media_content_id: Denon - HDMI 1
- icon: 'mdi:microsoft-xbox'
type: service
name: XboxX
id: media_player.play_media
data:
entity_id: media_player.denon
media_content_type: favorite
media_content_id: Denon - HDMI 3
- icon: 'mdi:satellite-variant'
type: service
name: Zgemma
id: media_player.play_media
data:
entity_id: media_player.denon
media_content_type: favorite
media_content_id: Denon - HDMI 4
columns: 3
source: icon
type: 'custom:mini-media-player'
volume_stateless: true
volume_step: 1
- entity: media_player.denon
group: true
hide:
controls: true
type: 'custom:mini-media-player'
volume_stateless: false
volume_step: 1
- entity: media_player.kitchen
group: true
hide:
controls: true
type: 'custom:mini-media-player'
volume_stateless: false
volume_step: 1
- entity: media_player.office
group: true
hide:
controls: true
type: 'custom:mini-media-player'
volume_stateless: false
volume_step: 1
- entity: media_player.heos_link
group: true
hide:
controls: true
type: 'custom:mini-media-player'
volume_stateless: false
volume_step: 1
type: entities
title: Denon HEOS
2 Likes
I created these camera’s
camera:
- platform: generic
name: denon_logo
still_image_url: >-
{{ state_attr( 'sensor.heos_denon_info', 'logo') }}
- platform: generic
name: denon_cover
still_image_url: >-
{{ state_attr( 'sensor.heos_denon_info', 'cover') }}
and then a sensor which gets the appropriate details as follow
sensor:
- platform: template
sensors:
heos_denon_info:
unique_id: sensor_heos_denon_info
value_template: >-
{% if is_state('media_player.denon', 'playing') %}
on
{% else %}
off
{% endif %}
attribute_templates:
logo: >-
{% if is_state('media_player.denon', 'idle') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/idle.jpg' %}
{% else %}
{% set x = state_attr( 'media_player.denon', 'source') %}
{% set q = state_attr( 'media_player.denon', 'media_album_id') %}
{% if (q == 'inputs') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/playing.jpg' %}
{% if (x == 'Denon - HDMI 1') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/satellite.png' %}
{% elif (x == 'Denon - HDMI 2') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/playing.jpg' %}
{% elif (x == 'Denon - HDMI 3') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/microsoft.png' %}
{% elif (x == 'Denon - HDMI 4') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/satellite.png' %}
{% endif %}
{% else %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/playing.png' %}
{% if (x == 'Arrow Classic Rock') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/arrow.png' %}
{% elif (x == 'BNR Nieuwsradio') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/bnr.png' %}
{% elif (x == 'Radio Gelderland 89.1 (News)') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/gelderland.png' %}
{% elif (x == 'NPO Radio 2 92.3 (Adult Hits)') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/npo2.png' %}
{% elif (x == 'NPO 3FM 97.1 (Top40 & Pop Music)') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/npo3fm.png' %}
{% elif (x == 'Pinguin Radio') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/pinguinradio.png' %}
{% elif (x == 'Pinguin Pluche') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/pinguinpluche.png' %}
{% elif (x == 'Pinguin Classics') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/pinguinclassics.png' %}
{% elif (x == 'Pinguin On The Rocks') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/pinguinrocks.png' %}
{% elif (x == 'Sky Radio 101 FM 101.5 (Adult Contemporary Music)') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/sky.png' %}
{% elif (x == 'Radio Veronica 96.3 (Classic Hits)') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/veronica.png' %}
{% endif %}
{% endif %}
{% endif %}
{{ y }}
cover: >-
{% if is_state('media_player.denon', 'idle') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/idle.jpg' %}
{% else %}
{% set x = state_attr( 'media_player.denon', 'source') %}
{% set q = state_attr( 'media_player.denon', 'media_album_id') %}
{% if (q == 'inputs') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/inputs.jpg' %}
{% if (x == 'Denon - HDMI 1') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/xtrend.png' %}
{% elif (x == 'Denon - HDMI 2') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/playing.jpg' %}
{% elif (x == 'Denon - HDMI 3') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/xbox.png' %}
{% elif (x == 'Denon - HDMI 4') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/zgemma.png' %}
{% endif %}
{% else %}
{% set y = state_attr( 'media_player.denon', 'entity_picture') %}
{% if (y == '') %}
{% set y = 'http://192.168.178.207:8123/local/images/denon/playing.png' %}
{% endif %}
{% endif %}
{% endif %}
{{ y }}
Note that you will have to chance the references to the favorite stations and IP to the images.
Images are stored in …www/images/denon/
You just display the camera in a Picture Entity / ELements card
I intend to put this on github in the near future but not there yet.
1 Like
Hello @kalkih is it be possible to externalise the CSS you have in the JS ?
To permis us to custom it ?
1 Like
If you use these links to your images, I think it will only work if you are inside your network. If you access your Home Assistant from outside it will not work.
Hello.
I have install mini player in HACS.
I have problem with inserting
resources:
- url: /local/mini-media-player-bundle.js?v=1.11.0
type: module
to configuration.yaml
Configuration validation
Configuration invalid
Component error: resources - Integration 'resources' not found.Using Nabu Casa it works also outside, at least it did show the idle images yesterday.
Resources don’t get added to configuration.yaml
To use this, open Configuration > Lovelace Dashboards > Resources > + ADD RESOURCE. Paste the url into the url line, and the type will usually auto-fill to JS Module. If not, select it.
Save, and your resource is stored.
I have done so,now is problem i dont see in developer tools in Entity no custom:mini-media-player.
No card type configured
- type: ‘custom:mini-media-player’
You shouldn’t expect to see an entity after installing via HACS and adding the resource as I described above. Instead, from Lovelace you add a manual card and paste the code you want to use. Note, as I found out when installing this yesterday, the developer’s examples have a “-” in front of the type that might not be required depending on where you’re pasting the code. For example, the most basic custom mini media player should look like this:
type: 'custom:mini-media-player'
entity: media_player.basement_speaker
Which results in:
Can you paste the code you’re trying to use for a custom card?
No luck
Error: No visual editor available for: custom:mini-media-player
That’s to be expected. You have to manually edit many custom cards with the code editor. Did you try pasting the code I showed you above, replacing media_player.basement_speaker with the name of your media device?
From the dashboard, Edit Dashboard > + ADD CARD > Manual then paste the code I showed you above.
Success 
Works now. 
Text to speak dont work normal?
thanks for your help