SpotifyPlus Card Dashboard

hassuser95 · March 31, 2025, 2:55pm

oh, Im still on the basics.
Im using Home Assistant Green.

Any advice?

thlucas · March 31, 2025, 3:27pm

@hassuser95
To be honest, my experience with all of these addon’s are from questions fielded by people using them with the SpotifyPlus Integration. I personally don’t use them in my everyday setup, as I utilize dedicated devices that support Spotify Connect natively: Bose SoundTouch, Google Nest, Sonos IKEA Symfonisk, and (just added) Amazon Echo Dot.

I have installed these various services in the past to test the Spotify Connect functionality, but I don’t use them enough to be comfortable making a specific recommendation.

thlucas · April 17, 2025, 6:04pm

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

[ 1.0.46 ] - 2025/04/17

Added theme variable --spc-footer-background-color and footerBackgroundColor card configuration option for styling footer background color.
Added theme variable --spc-footer-background-image and footerBackgroundImage card configuration option for styling footer background gradient.
Added theme variable --spc-footer-icon-color and footerIconColor card configuration option for styling footer icons color.
Added theme variable --spc-footer-icon-color-selected and footerIconColorSelected card configuration option for styling footer selected icon color.
Added theme variable --spc-footer-icon-size for styling footer icon size; note that the configuration option (footerIconSize) for this theme variable already exists.
Removed theme variable --spc-card-footer-color; use --spc-footer-icon-color instead.
Removed theme variable --spc-card-footer-background-color; use --spc-footer-background-color instead.
Removed theme variable --spc-card-footer-background-image; use --spc-footer-background-image instead.

brett91 · April 25, 2025, 4:38pm

Are there css variables to change the player control icon size? << Play >>, etc. I’ve dug in to try this with card mod and mod card, but without success. (AI tells me the elements are 5 shadow dom layers deep, and untouchable At least for my skillset.)

Or is there an easier way that i’m missing? I think all of the footer config is for the row of icons below the controls i’m looking for.

PlayedIn · April 25, 2025, 7:08pm

Have you tried:

playerControlsIconSize: 2.5rem

The visual editor allows you to change it also: Player>Controls. The default is 2.0rem

thlucas · April 25, 2025, 7:15pm

@brett91
You can customize button sizes / colors / fonts / etc using the player theming options. There is no UI Editor support for these options, but you can specify them via the code editor or in an HA theme file.

UPDATE: As @PlayedIn pointed out in a reply, the playerControlsIconSize is supported via the UI editor; I omitted the other settings from the UI editor, as there were so many to add, and limited real-estate on the editor UI form that I just decided to make them manual. Hopefully the documentation does a good job of explaining what options are available.

For example, the default format:

Can turn into this:

by specifying these 4 theming configuration options in the card configuration via Show Code Editor:

playerControlsIconSize: 4rem
playerHeaderTitle1FontSize: 2rem
playerHeaderTitle2FontSize: 1.5rem
playerHeaderTitle3FontSize: 1.25rem

woempiej · April 25, 2025, 8:45pm

Nice integration and card! Very responsive and configurable

brett91 · April 25, 2025, 11:30pm

Thank you. I hadn’t found the secondary menu buttons under player! I looked several times. Perfect. Great card for my use case.

woempiej · April 27, 2025, 4:04pm

Hi all,

Short question.

Is it possible with the current configuration to add the device button to the card if the card is minimized?

or

Is it possible to expend the card (like it does right now with the power button) without starting a playback on the recent used device ?

afbeelding

Current card:

Future request?
afbeelding

I want to start music on a device of choice (Not a default device). I think that is impossible right now when using the nice and compact “minimize” option.

Thanks

thlucas · April 27, 2025, 8:23pm

@woempiej
Sorry, that is not possible right now. You can submit a feature request though and I’ll see if I can get it added.

hamd01 · April 28, 2025, 11:27am

Im using this card and it’s awesome. Im just using it in my games room, to control spotify to one alexa device. Works a treat.
One little issue I have though is that most times, people play music by voice command. So ‘alexa play whatever on spotify’.

When somthing is already playing, the card stays looking like the below photo. Is there any way to get it to show what is currently playing instead?

thlucas · April 28, 2025, 12:41pm

@hamd01
Absolutely - check out the SpotifyPlus integration Always On configuration option. This tells the integration to always remain turned on (just like HA Spotify). The integration is turned off by default.

Note that it can take between 1-30 seconds to detect Spotify Player state when it’s controlled by players outside of HA (just like HA Spotify). You can also reduce that delay from 1-4 seconds by setting the SpotifyPlus integration Spotify Polling Scan Interval value. Just make sure you read the documentation for the pros / cons of adjusting the polling interval.

hamd01 · April 28, 2025, 3:09pm

that worked beautifully!!! Thank you

woempiej · April 29, 2025, 4:21pm

Hi,

Thank you for the quick follow-up!
The upgraded card including the new device button works like a charm.

Ltek · May 17, 2025, 10:13pm

Can we move the Footer to be the Header (top of the card). I’d like to have the buttons to change pages at the top, they are small and kinda get lost at the bottom

also, this card, and integration, is amazing - thank you!!!

thlucas · May 18, 2025, 2:03pm

@Ltek
Sorry, but I have to decline this enhancement. It’s not an easy task to re-position the buttons from the bottom to the top. It would also slow down the responsiveness of the card, as it would have to do multiple checks to see where the user wants to position the buttons. It would also encourage the possibility to re-position other components on the card (e.g progress bar at the bottom, or song info at the bottom, etc) which compounds the responsiveness problem. I’m not saying it could not be done, it would just require a re-design of the card UI to do it.

As for the button sizes, check out the Card Theming Options wiki, specifically the playerControlsIconSize option to make the icons larger. Theming can be applied using Home Assistant theme file variables (apply to ALL card instances), or card configuration options (apply to individual cards).

Ltek · May 18, 2025, 2:13pm

I have an idea… what if you made those specific buttons a separate card, separate buttons. (and allow for completely hiding those buttons on the main card)? If they are separate exposed entities this is possible, I think easily?

This would allow for separate positioning logic in the dashboard, and thus no responsiveness issues based on positioning since the card itself is not doing any of that. The cool thing about that is in a separate card, the user could then make them horizonal, vertical, grid, whatever… and place them anywhere in the Dashboard view itself.

thlucas · May 18, 2025, 3:05pm

@Ltek
You could do this already by setting up a separate instance of the card, and setting the card height (see screenshot below), as well as hiding the player icons in the card above it. The problem with that (currently) is that the card logic specifies a min-height value of 15rem, but that could be easily changed.

type: custom:spotifyplus-card
sections:
  - player
sectionDefault: player
entity: media_player.spotifyplus_todd_l
height: 6
playerMinimizeOnIdle: true
playerHeaderHide: true
playerVolumeControlsHideLevels: true
playerVolumeControlsHideSlider: true
playerVolumeControlsHideMute: true
playerBackgroundImageSize: 0 0
customImageUrls:
  playerBackground: null

You could also setup a vertical stack with your own custom icons / titles. You would just issue a service call to the appropriate service to perform the function (pause, resume, etc). The following is an example of adding an artist favorite; you could use something similar for a “Pause” button, etc.

type: vertical-stack
cards:
  - square: false
    type: grid
    title: Spotify Favorite Functions
    columns: 3
    cards:
      - type: button
        name: Artist
        icon: mdi:plus
        icon_height: 32px
        show_name: true
        show_icon: true
        tap_action:
          action: call-service
          service: spotifyplus.follow_artists
          target: {}
          data:
            entity_id: media_player.spotifyplus_todd_l

Ltek · May 18, 2025, 8:08pm

I tried creating buttons but many of them I cant find the service commands. Is there a master list that shows all of them at once?

sections Add/Remove & Playback Control work; Devices, Discovery, top Favorites do not

thlucas · May 18, 2025, 10:13pm

@Ltek
Have a look at the SpotifyPlus Integration Services Provided wiki doc for a list of supported services. Also check out the Media Player Service Enhancements list for standard HA media player entity services that have been enhanced.

The Player Media Play Track Favorites service can be used to start play of your Spotify favorite tracks list.

Not sure what you are trying to accomplish with most of the other buttons / features, as they require input criteria to use.

Regarding the “Recently Played”, you might be able to create your own dashboard with those entries. The closest working example I have would be the Queue Info List Dashboard, which works pretty much the same but would use the Get Player Recent Tracks service call to get the media list instead of the Get Player Queue Info service call.