Use the code editor.
So, something ended up being weird with this. I ended up deleting every lovelace custom downloaded from HACS (luckily, I really wasn’t using any of them). Rebooted HA and then when I went back in, downloaded only mini media player from HACS and the GUI looked proper. I don’t know if it’s possible but I almost wander if one of the custom lovelace cards I had was interfering with that one. Anyways, it’s corrected now so I guess that’s all that matters. Thank you again for the help you have given me on the couple of things I had going on. Very helpful!!
There has also been an update for this card in the last day or so, so you may have got a newer and better version in the process. Glad you got it working anyway.
Hi,
Have problem with my image the first “full-cover” artwork got bright bacground image. If change it to “cover” get pallid image. Need bright image in “cover” too. Please help.
Is it possible to have more than one label in the shortcuts?
After lots of trial and error I was able to get the sensor.sonos_favorites into the custom:mini-media-player shortcuts:
type: custom:auto-entities
card:
type: entities
filter:
template: |
{
'entity': 'media_player.kitchen',
'type': 'custom:mini-media-player',
'name': 'Sonos',
'group': 'true',
'source': 'icon',
'hide': {
'volume': True
},
'shortcuts':{
'columns': 3,
'buttons':
[
{%- for media_id, station in state_attr("sensor.sonos_favorites", "items").items() -%}
{{ {
'name': station,
'type': 'service',
'id': 'media_player.play_media',
'data':
{
'entity_id': 'media_player.kitchen',
'media_content_id': media_id,
'media_content_type': 'favorite_item_id'
}
} }},
{%- endfor -%}
],
}
},
If anyone knows how to get the image from the media browser it would be great to put that on the shortcut button too!
Hope this helps.
6 Likes
Have you tried scripts? Seems a little easier and shortcuts work with images. Hopefully this will help as well.
Script example:
sequence:
- service: media_player.play_media
target:
entity_id: media_player.gym
data:
media_content_id: FV:2/26
media_content_type: favorite_item_id
metadata:
title: 90s90s Hiphop
thumbnail: >-
https://sonos_generated_url
media_class: genre
children_media_class: null
navigateIds:
- {}
- media_content_type: favorites
media_content_id: ''
- media_content_type: favorites_folder
media_content_id: object.item.audioItem.audioBroadcast
mode: single
icon: mdi:radio-tower
Cards example:
type: vertical-stack
cards:
- type: custom:mini-media-player
entity: media_player.gym
group: true
hide:
volume: true
name: true
next: true
prev: true
play_pause: true
info: true
power: true
shuffle: true
icon: true
progress: true
shortcuts:
columns: 3
buttons:
- icon: mdi:radio-tower
type: script
id: script.classicrock
name: Classic Rock
- icon: mdi:radio-tower
type: script
name: 90sHipHop
id: script.90shiphop
- icon: mdi:radio-tower
name: Greatest Hits
type: script
id: script.greatesthits
name: Gym
artwork: material
- type: custom:mini-media-player
entity: media_player.gym
source: icon
artwork: full-cover
replace_mute: stop
info: short
hide:
power: true
group: true
Screenshot of cards:
@ctowers
My main objective was to automate how the buttons or list was created from the sonos favorites sensor using the for loop. Using scripts or service calls is more of a personal preference and use case.
Is it possible to start a Sonos playlist with a button?
I don’t use Spotify, but have plex integration in sonos app.
If it is possible how can I set that up?
it would be nice if i could play an album like this
When change volume or something see the background image bright for a sec but after go to fades. I use config-template-card to use internet radio background image. If I use without artwork it is ok. But I need artwork when I play spotify.
“full-cover” everything is ok but with “cover” what I want to use the image is fade.
This is my settings:
type: custom:config-template-card
variables:
- states['media_player.denon_avr_x1000'].attributes.media_artist
entities:
- media_player.denon_avr_x1000
card:
type: custom:mini-media-player
entity: media_player.denon_avr_x1000
artwork: cover
hide:
icon_state: false
power_state: false
runtime: false
sound_mode: false
source: false
volume: false
progress: false
icon: mdi:music-box
info: scroll
max_volume: '80'
name: Denon
style: |
ha-icon {
color:
{% if states(config.entity) == 'playing' %}
var(--accent-color)
{% else %}
var(--iron-icon-fill-color)
{% endif %}
;
}
:host {
--secondary-text-color: red;
--mini-media-player-media-cover-info-color: red;
}
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
--ha-card-box-shadow: none; }
background: |-
"${ if (vars[0] === 'Retro Radio') { '/local/retro2.png' }
else if (vars[0] === 'Radio1 Debrecen') { '/local/radio1.png' }
else if (vars[0] === 'BBC Radio 1') { '/local/bbcradio1.jpg' }
else { '/local/default.png' }
}"
I used your settings, just with different radio stations and different images and I don’t have the effect you got.
But I don’t really understand why you are doing it this way. I get the radio stations logos or the artwork of the tracks of my Spotify playlists without declaring them in the code.
Because what I listen internet radios not have image! So manually must set it up with config-template-card.
With spotify not have problem.
oh, I wouldn’t have said it without testing it:
BUT! I play radio stations via tunein so there might be advertisers.
I use with denon music player and there can use only radiobrowser. And there no image.
Ah okay. Wasn’t aware it is a limitation of the player.
So the problem you’re facing might be caused by the player as well, since I don’t have it with my players.
Love this card, 2 questions:
- is there a way to use this with UI-Lovelace-Minimalist? The browse media button doesn’t seem to work; probably because opening another pop-up. Alternatively can I add a browse button directly to the card?
- I am using the tts volume setting for Sonos. Any ideas is something similar is coming for Google Nest?
Thanks!
The player has nothing to do with it. That image simply doesn’t look the way it should.
As far as I know, Radio Browser does not provide an entity_picture
That’s why I would use manual background picture.
background: |-
"${ if (vars[0] === 'Retro Radio') { '/local/retro2.png' }
else if (vars[0] === 'Radio1 Debrecen') { '/local/radio1.png' }
else if (vars[0] === 'BBC Radio 1') { '/local/bbcradio1.jpg' }
else { '/local/default.png' }
}"
The question is not why the player and the radibrowser do not give a picture or give. Please read back what is my problem.
Hi Nick, I get pictures when playing radio stations via Tunein, but I’m not sure about what is meant with “Radio Browser” - has this to do with the Denon player?