Lovelace: Mini Media Player


Ok in the desktop client i get the URI, but i get no sound… maybe i really need a Premium account…

This is the URI i get:


so i must put the entire line after the url: option… ok?


Are you sure? Then the error message seems really strange.
Where did you get that error message, and is that the whole error message?


yes I checked all my files.
It is only the header of the error message

the full is here:

Log Details (ERROR)
Wed Dec 12 2018 21:04:22 GMT+0100 (Mitteleuropäische Normalzeit)

Error handling message: {‘entity_id’: ‘media_player.sonos_mediaplayer’, ‘id’: 19, ‘type’: ‘media_player_thumbnail’}
Traceback (most recent call last):
File “/srv/homeassistant/lib/python3.5/site-packages/aiohttp/”, line 822, in _wrap_create_connection
return await self._loop.create_connection(*args, **kwargs)
File “/usr/lib/python3.5/asyncio/”, line 801, in create_connection
sock, protocol_factory, ssl, server_hostname)
File “/usr/lib/python3.5/asyncio/”, line 827, in _create_connection_transport
yield from waiter
File “/usr/lib/python3.5/asyncio/”, line 380, in iter
yield self # This tells Task to wait for completion.
File “/usr/lib/python3.5/asyncio/”, line 304, in _wakeup
File “/usr/lib/python3.5/asyncio/”, line 293, in result
raise self._exception
File “/usr/lib/python3.5/asyncio/”, line 126, in _run
File “/usr/lib/python3.5/asyncio/”, line 730, in _read_ready
File “/usr/lib/python3.5/asyncio/”, line 502, in data_received
ssldata, appdata = self._sslpipe.feed_ssldata(data)
File “/usr/lib/python3.5/asyncio/”, line 201, in feed_ssldata
File “/usr/lib/python3.5/”, line 646, in do_handshake
match_hostname(self.getpeercert(), self.server_hostname)
File “/srv/homeassistant/lib/python3.5/site-packages/”, line 16, in patched_match_hostname
return real_match_hostname(cert, hostname)
File “/usr/lib/python3.5/”, line 309, in match_hostname
% (hostname, dnsnames[0]))
ssl.CertificateError: hostname ‘’ doesn’t match ‘

The above exception was the direct cause of the following exception:

Traceback (most recent call last):
File “/srv/homeassistant/lib/python3.5/site-packages/homeassistant/components/websocket_api/”, line 16, in _handle_async_response
await func(hass, connection, msg)
File “/srv/homeassistant/lib/python3.5/site-packages/homeassistant/components/media_player/”, line 881, in websocket_handle_thumbnail
data, content_type = await player.async_get_media_image()
File “/srv/homeassistant/lib/python3.5/site-packages/homeassistant/components/media_player/”, line 388, in async_get_media_image
return await _async_fetch_image(self.hass, url)
File “/srv/homeassistant/lib/python3.5/site-packages/homeassistant/components/media_player/”, line 815, in _async_fetch_image
response = await websession.get(url)
File “/srv/homeassistant/lib/python3.5/site-packages/aiohttp/”, line 370, in _request
File “/srv/homeassistant/lib/python3.5/site-packages/aiohttp/”, line 445, in connect
proto = await self._create_connection(req, traces, timeout)
File “/srv/homeassistant/lib/python3.5/site-packages/aiohttp/”, line 757, in _create_connection
req, traces, timeout)
File “/srv/homeassistant/lib/python3.5/site-packages/aiohttp/”, line 879, in _create_direct_connection
raise last_exc
File “/srv/homeassistant/lib/python3.5/site-packages/aiohttp/”, line 862, in _create_direct_connection
req=req, client_error=client_error)
File “/srv/homeassistant/lib/python3.5/site-packages/aiohttp/”, line 825, in _wrap_create_connection
req.connection_key, exc) from exc
aiohttp.client_exceptions.ClientConnectorCertificateError: Cannot connect to host ssl:True [CertificateError: (“hostname ‘’ doesn’t match 'xxxx”,)]

if I remove the artwork the error is also gone


Just tried and it works:

  - name: All Out 60s
    type: playlist
    url: spotify:user:spotify:playlist:37i9dQZF1DXaKIA8E7WcJj

Yes, you might be right maybe you need to be premium.
You are attempting this from a Spotify media player right?

Oh my… That’s a backend error message.
Does the media player work when using the default media-control card?


What you mean?
Ah… ok… no i don’t have that media player. To have it i need a premium account, so solved…


yes. with the media-control card it is working

it was working till 0.9.5


Ok, since v0.9.6 the thumbnail/artwork is now fetched from the backend through the websocket API. This is very similar to what the default media-control card does.

And if you look closer at the error message it seems to indicate that there are issues with your SSL certificate.

I’m really not sure about this though, what does the attributes look like for that universal media player?


ok thanks. I need to have a closer look into the ssl topic
It is working for the “standard” sonos player. it is only not working for the universal media player

  • platform: universal
    name: Sonos MediaPlayer
    • media_player.schlafzimmer
    • media_player.bad
      service: media_player.volume_set
      entity_id: media_player.bad, media_player.schlafzimmer
      volume_level: ‘{{ volume_level }}’
      service: media_player.volume_mute
      entity_id: media_player.bad, media_player.schlafzimmer
      is_volume_muted: ‘{{ is_volume_muted }}’
      volume_level: media_player.schlafzimmer|volume_level
      is_volume_muted: media_player.schlafzimmer|is_volume_muted


Yes, which is very strange… I’ll try to replicate this issue later tonight by creating a similar universal media player, thanks for the data!


If I can provide more info or even more help please let me know

I combined two Sonos Player into the universal one


Thanks for the update! Loving the Sonos group function :+1:


Ah. That would explain that.

Yep, that works, but I don’t want the volume, hence why it’s hidden. hmm. :thinking:

I’m not sure exactly how to fix it so it doesn’t break mini-media-player. Is it possible to have the background images applied to the ha-card element?

And yes, card-modder work with the ha-card element. Anything on top of that element isn’t styled.


That would not really work in the current implementation.
What you probably could do is to set overflow: hidden in your card-modder style. This would however cut off the volume slider pin, but hopefully you can see past that :smile:

- type: custom:card-modder
    overflow: hidden
    border-radius: 5px
    border: solid 1px rgba(100,100,100,0.3)
    box-shadow: 3px 3px rgba(0,0,0,0.4)

Let me know if that solves the problem!


Works perfectly!! I’m not showing the volume slider, so it doesn’t matter to me, but I did test, and there was no cut off. The pin isn’t that big, and as I have scroll_info: true, the volume slider is on the next line.

overflow: hidden does exactly what I want. thanks mate!!


I configured the spotify media player, but i have some problems with it and the card.
Is this working also with echo devices? I cannot see my echo devices in the list of available devices from the spotify app…


I have premium but it isn’t working either for me with latest release 0.9.7. When clicked on the media_button log throws this error:

Unable to find preset with id spotify:user:XXX:playlist:5HsFcLHzzXXXXXXXX

Anyone got a solution for this? I copied the URI from the desktop application but cannot get it to work with Spotify URLs. Internetradio urls work fine.


Maybe you put wrong name at XXX. I understand that the URI url must be not changed…


I tried everything. I just copy and pasted the URI. Username was correctly in it. Strange…


I don’t have any echos, do they support Spotify connect? Only Spotify connect devices will show up.
I know Chromecasts only show up after you’ve casted To them at least once from the Spotify app.

What device are you trying to achieve this on? Spotify URIs will only work through the Spotify component.


Ah… now I uderstand. I tried to apply this for my Bose Soundtouch but that is the reason the URI’s aren’t working. I there a way to trigger Soundtouch’s presets with your media_button @kalkih? Like this:

- service: media_player.play_media
    entity_id: media_player.soundtouch_living_room
    media_content_id: 2
    media_content_type: PLAYLIST