Thanks. I hope it will be fixed
Hoping someone can help.
I’ve got the below code and I’ve customised a few different cards to get a media dashboard for Spotify just the way I want.
I’ve found the bulk of the code on the Mushroom Cards thread posted by @rhysb however I’m finding my volume slider is transparent/clear and can’t be seen. It is there and when I click in a specific area the volume does adjust, it’s just got no colour. When I click the play/pause button the ‘skip track’ and ‘play/pause’ buttons show up fine, it’s just the volume slider that’s affected. See picture below. Can anybody help me fix this as I can’t seem to figure it out.
Thanks in advance!
type: conditional
conditions:
- entity: input_select.smart_speakers
state: Living Room Speaker
card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.living_room_speaker
name: Living Room Speaker
icon: mdi:spotify
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: spotify;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
--rgb-state-media-player: var(--album-art-color);
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'idle') and not is_state(config.entity, 'off') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
- type: conditional
conditions:
- entity: media_player.living_room_speaker
state_not: 'off'
- entity: media_player.living_room_speaker
state_not: idle
card:
entity: media_player.living_room_speaker
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{% if is_state(config.entity, 'playing') %}
--paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
{% endif %}
}
.: |
ha-card {
margin: 12px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--album-art-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
- type: custom:spotify-card
always_play_random_song: true
hide_currently_playing: true
hide_playback_controls: true
hide_top_header: true
hide_warning: true
hide_chromecast_devices: false
hide_connect_devices: true
display_style: Grid
grid_covers_per_row: 5
card_mod:
style: |
#footer {
display: none !important;
}
- type: custom:mushroom-select-card
entity: input_select.smart_speakers
fill_container: false
secondary_info: none
icon_color: disabled
layout: horizontal
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state('media_player.plex_tv', 'idle') %}
background: url( '{{ state_attr('media_player.plex_tv', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
1 Like
Hello,
I have set up the Spotify integration and installed the card thru hacs + restarted hassio. And the card doesn’t seem to work for me besides showing the currently playing song. I’m not sure what I’ve done wrong.
DId you install the Spotcast integration?
See GitHub - custom-cards/spotify-card: Spotify playlist card for Home Assistant card
Specifically:
" The component uses the Spotify Integration and spotcast and both of them have to be installed for the card to function properly."
Yes I have, do I need to do this part in the configuration when installing thru hacs and having the Spotify integration installed?
spotcast:
sp_dc: !secret sp_dc
sp_key: !secret sp_key
country: SE #optional, added in 3.6.24
I thought I was losing the plot on changes not saving. Non of my yamal edits were saving. So thought I’d try the visual editor e.g. toggled hide chromecast devices and this didn’t work either. This is the only card I’ve worked on that doesn’t save changes - strange.
if you only want the control gone,
style: |
.footer__right {
display: none !important;
}
Since the spotcast update this card keeps on loading. Is there anything we can do to fix this issue ?
Working fine here for 3 different Spotify accounts.
Check your HA logs to see if any errors are reported, either about hitting a rate limit (something like ‘Max retries reached’), or about access tokens being invalid. Often updating the sp_dc and sp_key values can resolve things like this.
Thanks will try!
Anyone ever experience an issue where none of the card options can be selected from the GUI?
Example: I have the playlists in a list now, and I click grid and it doesn’t change. It happens with every option. The only way I can get it to work if I make changes via the Code Editor and then it all works fine.
Same here. I only want to display small thumbnails of playlists and nothing else. Maybe it’s the newest version?
Where did you get this info from? Doesn’t work for me and I also highly prefer my own playlists there. The docs don’t say how.
There is no word about include_playlists. And it doesn’t work for me.
It’s called playlist filtering… it’s under advance in the UI editor. And it does work for me
Since a couple of weeks (approx. 3 weeks) it does not work anymore.
I renewed the sp_key and sp_dc - in the log I have this:
Logger: homeassistant
Source: custom_components/spotcast/spotcast_controller.py:251
Integration: Spotcast (documentation, issues)
First occurred: 13:23:24 (1 occurrences)
Last logged: 13:23:24
Error doing job: Task exception was never retrieved
Traceback (most recent call last):
File "/config/custom_components/spotcast/helpers.py", line 102, in run
return await loop.run_in_executor(executor, pfunc)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.11/concurrent/futures/thread.py", line 58, in run
result = self.fn(*self.args, **self.kwargs)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/config/custom_components/spotcast/__init__.py", line 128, in get_devices
client = spotcast_controller.get_spotify_client(account)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/config/custom_components/spotcast/spotcast_controller.py", line 262, in get_spotify_client
auth=self.get_token_instance(account).access_token
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/config/custom_components/spotcast/spotcast_controller.py", line 251, in get_token_instance
dc = self.accounts.get(account).get(CONF_SP_DC)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
AttributeError: 'NoneType' object has no attribute 'get'
What else I can try?
Okay I see. The UI doesn’t work for me anyway. I can only find those playlists that are already shown. There are playlists like my main one that cannot be found. I have no idea why.
Nevermind. I have to set the limit to something like 50…
awesome card!
Couple questions though…
None of the options in the UI work, so I have to add them with yaml.
- What is the format for adding titles to the grid albums
- What are more options for playlist type, and can you list multiples? Only thing that works for me is “featured”.
Appreciate any help.