SpotifyPlus Card Dashboard

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

Best regards

Stefan

@Richi

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.

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

@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.

@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

@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

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

@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.

1 Like