Interesting approach, I’m still learning my way around HA and Lovelace. What entity did you use to send the miniplayer artwork to the generic camera? Mind sharing a snippet of the code?
Hi all,
Did you or anyone else ever succeed in getting card-mod to style any part of the mini media player card? I’ve been utterly unsuccessful… I’m just trying to get the text of my buttons to fit on the buttons.
I’ve tried a million things, here are a few:
style: |
.slot-container {
margin: 0px !important;
}
style: |
mmp-button {
font-size: 6px !important;
}
style: |
.mmp-shortcuts__button {
display: !important;
width: !important;
}
Any sample of anyone who’s done any styling on this card wil be appreciated, especially on the buttons!
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