SpotifyPlus Card Dashboard

Richi · May 20, 2025, 3:56pm

Hi Todd, is there a way to make the playeroffbackground theme dependent? Theme 1 background A, theme 2 background B!

Best regards

Stefan

thlucas · May 20, 2025, 5:49pm

Currently no, there is not; but I might be able to make that happen.

Are you just wanting to set the Player section background image to use when the player is powered off via a theme file (instead of configuration option)?

If so, I think I can make that happen.

Richi · May 20, 2025, 6:16pm

Yes, exactly, instead of the configuration option. That would be great!! thank you

thlucas · May 21, 2025, 4:52am

@Richi
FYI - just released a new version of the SpotifyPlus Card.

Updated Theming wiki doc with new variable names.

[ 1.0.55 ] - 2025/05/20

Added theme variable spc-player-background-image-off; Background image to use for the player section when the player state is off; default value is none.
Added theme variable spc-player-background-image-idle; Background image to use for the player section when the player state is idle; default value is none.
Added theme variable spc-player-background-image; Background image to use for the player section when the player state is playing; default value is to use currently playing content cover art.
Removed card min-height value, which allows you to resize the card to any minimum height you wish.

Ltek · July 4, 2025, 6:34pm

@thlucas Hope you would be willing to help by fixing a few of the buttons with the corrected YAML to show me what they should really be so I can fix the rest.

I’ve made a few attempts to get these buttons working and mostly failing.These buttons will make it a lot easier for family and guests to use it the controls since they are larger with descriptions.

thank you!

Dashboard YAML file here

thlucas · July 4, 2025, 9:05pm

@Ltek
Not sure what you are trying to do with this …

Is the idea to click on a button, call a SpotifyPlus integration service, and have something display in the SpotifyPlus Card? If so, that is not the way the SpotifyPlus integration services work. They are built more for automations and scripts to control the player and return results in a non-interactive way.

You can obviously define front-end UI buttons that call these services to do SOME things, but nothing that is interactive. You would need to write your own card / dashboard for something similar to what the SpotifyPlus Card does. You might have a look at the Queue Info List Dashboard example for some ideas on how to call a SpotifyPlus service that returns data, then builds a dashboard dynamically.

The only buttons that will work on your interface “as-is” are the “Favorites - Add / Remove” buttons, and those will only work if the appropriate content is currently playing on the Spotify player. For example, you cannot add / remove a track if the currently playing content is a podcast show or audiobook chapter (e.g. it does not contain “track” information). Some of the other buttons can be made to work, but would contain static content; for example, the “Play Context” button would always play the same playlist / album / artist.

Another possibility is to use the SpotifyPlus Card Theme Options to make things in the display bigger (buttons, text, etc).

For example:

type: custom:spotifyplus-card
sections:
  - player
  - devices
  - playlistfavorites
  - albumfavorites
  - artistfavorites
  - recents
  - searchmedia
  - trackfavorites
entity: media_player.spotifyplus_todd_l
width: fill
height: fill
playerHeaderTitle: "{player.source} (Spotify {player.sp_user_product})"
playerHeaderArtistTrack: "{player.media_artist} - {player.media_title}"
playerHeaderAlbum: "{player.media_album_name} {player.sp_playlist_name_title}"
playerHeaderNoMediaPlayingText: "\"{player.name}\" - No Media playing ({player.state})"
footerIconSize: 4rem
deviceBrowserItemsPerRow: 6
deviceBrowserItemsShowHiddenDevices: false
deviceBrowserItemsHideSubTitle: true
mediaBrowserItemsTitleFontSize: 2rem
mediaBrowserItemsSubTitleFontSize: 1.3rem
playerControlsIconSize: 4rem
playerHeaderTitle1FontSize: 1.8rem
playerHeaderTitle2FontSize: 2rem
playerHeaderTitle3FontSize: 2rem
playerMinimizeOnIdle: false

Player Section

Recently Played Section

Ltek · July 5, 2025, 12:34am

Yeah, that was the idea since the stock card buttons are too small, do not have descriptions, and missing many of the functions.

I changed the size using the theme setting, so that helps but having controls be a separate card would be more ideal for a control panel (like my screenshot has). This way we could position it where we need to, and manipulate it like we do any other card, using mod-card, CSS, etc.

Please consider making a ‘control panel’ integration. Things like the
SpotifyPlus Queue Info Update Template Sensor could be built-in as to ensure functionality. Playlists and control buttons could be dynamic. You have a ton of functionality and the documentation is deep and overwhelming, even to a techie like me. It is a ton on manual config and unless you are an expert, hard to understand what some of the required items like Spotify Connect device id (is this the canonical ID?).

Also would help to avoid “hidden code” like template sensors (I wish HA would change template sensors, they are not a good design being hidden/buried in a file)

thx

thlucas · July 5, 2025, 1:22pm

@Ltek
You could create multiple instances of the card, and enable only 1 section in each of them. You could then use the width and height options to control the size of each card to your taste.

spider7611 · July 29, 2025, 6:36am

Hi,

I setup everything and have a question with the user preset daily mix album picture. Sometime the spotify change the album picture, but on the card is stay the old picture. Is it possible to set up when change on spotify daily mix album picture change on the card too?

thlucas · July 29, 2025, 2:45pm

@spider7611
I have that issue myself, and setup a SpotifyPlus Playlist Get Cover Image blueprint to refresh the Daily Mix 1 cover image every morning. Just use the Import Blueprint button in the link above to import the blueprint into your HA environment.

It refreshes only one playlist image at a time, so you would need to duplicate this if you want to refresh the other “Daily Mix x” images; just update the input arguments accordingly.

alias: SpotifyPlus Playlist Get Cover Image - Daily Mix 01
description: Updates Daily Mix 01 playlist image every morning.
use_blueprint:
  path: thlucas1/spotifyplus_playlist_get_cover_image.yaml
  input:
    media_player: media_player.spotifyplus_todd_l
    playlist_id: 37i9dQZF1E39vTG3GurFPW
    output_path: /config/www/spotifyplus/userpreset_images/daily_mix_01.jpg

spider7611 · July 30, 2025, 6:28am

Wow. This is working good. Thank You!!

berkans · August 17, 2025, 2:37am

Hello,

First of all, thank you very much for this excellent work.
I previously had a Spotify card project that was even published in the Home Assistant newsletter. That card was entirely created using Mushroom and Card Mod, and I had released version 3 as its latest update. I hadn’t refreshed it in a long time.

In the old card, the playlist name I was using wasn’t fully visible and I couldn’t get efficient use out of it. After the recent changes on the Spotcast side, the card had also become completely non-functional. That’s why I decided to update it, and while browsing the internet I came across your work. You’ve truly done an amazing job. Honestly, I’m so happy now that I no longer need Spotcast. On top of that, I’ll be using your media player in my card. I’ve even done a few small test runs, which you can see in the screenshots.

With this new Spotify card I’ve built, it has now become possible to use Spotify fully functional without even needing to open the original Spotify app. And all of this is thanks to you. I’m also planning to feature this on my YouTube channel soon.

However, I’ve run into a couple of small problems, which I wanted to ask you about:

After installing Spotify Plus, it worked correctly at first. But after restarting Home Assistant, even though Spotify was playing music, Spotify Plus still showed as idle. Only when I pressed the power button did it refresh itself and show the currently playing track. Is this a bug, or is there a way to prevent this?
In your media player card, when we click once on a playlist, it starts playing the song, and when we hold on it, it goes into the details. Is it possible to assign another function instead of long-press? Since I’ll be using the card inside a bubble card, I often scroll down, and I accidentally enter album details repeatedly. If there were an option like double-click instead of long-press, it would be much more convenient.
When we go into the details of an album from a playlist, it shows all the songs with great detail. However, even if I press the play button before the song title, it doesn’t start playing. Is this a bug?

Thanks again for everything.

thlucas · August 17, 2025, 3:21am

@berkans
Thank you for the kind words; I’m glad to hear you are enjoying the card.

To answer your questions …

Use the SpotifyPlus Integration Always On configuration option to put the integration into “turned on” state automatically. Just check out the wiki docs link above for the performance impact (minimal) this can have on your HA instance due to continuous polling in always on condition.
I don’t think I can change the press and hold behavior in the SpotifyPlus Card, as it uses special logic to detect the hold condition. I tried to stay true to other HA controls that utilize the press and hold functionality.
In the SpotifyPlus Card, the button icon before the song title is actually a “Add item to play queue” function for various context (e.g. Album Tracks, Playlist Tracks / Episodes, Show Episodes, Audio Chapters, etc) items. It is not meant to play the item immediately, but it will play it as the next track if there are no other tracks in the play queue.

Hope it helps!

berkans · August 17, 2025, 3:39am

Thank you for your quick response. Regarding questions 3 and 1, I later realized the same thing myself; I must have read the documents a bit too quickly. My card will be ready within a week, and once I publish it on my YouTube channel I will also let you know. In another video I am also planning to go through the detailed installation and introduction of the Spotify Plus and the Plus Card. Once again, thank you very much for this great work. Because of your effort I can now use my Alexa media players much more efficiently. I wish you a great day.

thlucas · August 17, 2025, 3:45am

@berkans
Yes, please let me know when you publish your YouTube video - would love to check it out. Thanks!

sasshas · September 29, 2025, 9:59am

That looks great. Can’t wait for the vid!

sasshas · September 29, 2025, 10:08am

Thanks for all your hardwork, this is truly an amazing card and integration. I have quick question.

Can you change/add the icon menus when in idle mode? It only shows play and speakers.

Thanks!

thlucas · September 29, 2025, 1:49pm

@sasshas
Can you send a screen capture of what you see so I can diagnose?

It sounds like you might be using the playerMinimizeOnIdle configuration option, which minimizes the player card height when player state goes to idle (or off) AND card height is not set to fill.

If that is the case, then there will only be 2 transport icons displayed (power, resume). Like so:

Versus regular mode when the player is idle:

sasshas · September 30, 2025, 10:42pm

And yep that would be it! Weirdly I don’t get a power button (but I have ‘always on’ enabled), I do get the speaker icon next to the play button which is actually good because I can pull up the menu from there.

I was having control issues last night but this morning seems fine. Everything is working perfectly, seems like it’s all user error

thlucas · September 30, 2025, 11:35pm

@sasshas
Ya, I forgot to mention the “Always On” scenario will hide the power button and add the speaker icon. You have to have the ability to transfer playback (e.g. the speaker button) if power is always on.

Glad to hear it’s sorted out.