SpotifyPlus Card Dashboard

I have developed a new SpotifyPlus Card Home Assistant custom component dashboard that adds extended support for Spotify premium account users.

This card utilizes services and features unique to the SpotifyPlus custom integration.

Note - this card will NOT work with the built-in HA Spotify integration; the SpotifyPlus custom integration is required.

Features

  • Spotify Media player interface with customizable controls and information display.
  • Search Spotify catalog for all media types (tracks, playlists, albums, artists, shows, audiobooks, episodes, categories, etc).
  • Display / Select your Spotify favorites: Albums, Artists, Audiobooks, Episodes, Shows, Tracks.
  • Display / Select Spotify Connect device outputs.
  • User-defined media item presets (both file and code edited supported).
  • User-defined recommendation presets; play dynamically generated content based on user-defined criteria (e.g. energy, loudness, danceability, etc).
  • Favorite status / add / remove support for all media types.
  • View Player Queue information.
  • Card Configuration Editor User-Interface for changing options.

Check out the screen captures at the end of this initial post for examples of what the card can look like.

Requirements

Getting Started

  • make sure all requirements above have been installed.
  • follow the SpotifyPlus Card Installation Instructions to install the card.
  • refer to the Card Picker topic for how to add the card to a dashboard; that document also covers the various card configuration options.

More Information

Check out the following links for more information:

Reporting a Problem

Submit a Bug Report to bring the issue to my attention. I receive a notification when a new issue is opened, and will do my best to address it in a prompt and professional manner.

Request a New Feature

Do you have an idea for a new feature that could be added to the integration? Submit a Feature Request to get your idea into the queue. I receive a notification when a new request is opened, and will do my best to turn your idea into the latest and greatest feature.

How it Looks

Here’s just a few screen captures of what the card can look like. The card is highly customizable when it comes to the information displayed. Check out the Card Features wiki page for more examples.

Media Player Control / Actions (Masonry Mode)






Spotify Media Favorites Browser (Masonry Mode)


artist_details







Spotify Media Search (Masonry Mode)

This example shows the Playlist search results; other search types are contained in a similar format.

User Presets (Masonry Mode)

Recently Played (Masonry Mode)

Spotify Connect Device Selection (Masonry Mode)


Card Configuration Editor UI

This is just one of the editor UI screen captures; each tab button option will display settings related to that section type.

9 Likes

Thanks, looking for something like this for years

1 Like

Amazing work! Thank you very much!

1 Like

Is it possible to set a default view in the player view? For example player queue

@Tim_Br
No, not currently. The player queue can only be displayed by clicking the queue icon in the player display. It’s a pop up semi-transparent view of the queue.

Is that something where you want to have a dedicated dialog form for the queue? I didn’t give the player queue it’s own form, as the Spotify Web API does not support any queue functions other than adding new items to the queue. There are no functions available for clearing, reordering, or even deleting items from the queue. You can click a play icon on a queue item, but it clears the queue and plays the selected item. It’s really odd behavior, but all of that is controlled by the Spotify Web API. The Spotify developers clearly did not put much effort into queue related functionality.

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

[ 1.0.13 ] - 2024/11/20

  • This release requires the SpotifyPlus v1.0.66+ release; please make sure you update the SpotifyPlus integration prior to updating this SpotifyPlus Card release.
  • Added “Copy Preset Info to Clipboard” action for track and artist in the player track details action menu. This will create a user-preset configuration entry for the selected media and copy it to the clipboard; the entry can then be pasted into the configuration editor under the userPresets: key, which will create a user preset for the media item.
  • Added “Copy Preset Info to Clipboard” action for track and artist in the favorites track details action menu. This will create a user-preset configuration entry for the selected media and copy it to the clipboard; the entry can then be pasted into the configuration editor under the userPresets: key, which will create a user preset for the media item.
  • Added “Show Album Tracks” action for all album action menus. This will display all tracks on the album in the search browser.
  • Added “Connect / Login to this device” action menu item to Spotify Connect device browser action menu. This will add the device to the Spotify Connect player device list.
  • Added “Disconnect / Logout from this device” action menu item to Spotify Connect device browser action menu. This will remove the device from the Spotify Connect player device list.
  • Fixed a bug in userpreset details display that was causing an error alert of “MediaItem not set in updateActions” when a userpreset with type “recommendations” was selected.

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

[ 1.0.14 ] - 2024/11/25

  • Non-Administrator accounts can now use the card without receiving the unauthorized message. Note that non-administrators cannot change the card configuration (as designed).
  • Changed the way calls are made to the underlying SpotifyPlus integration services. Calls are now made using the hass.callService method instead of the hass.connection.sendMessagePromise with type execute_script. This was causing all calls that returned service response data to fail with unauthorized errors.
  • Removed references to custom-card-helpers npm package, as it was outdated and is not being maintained. We will now create our own card helpers when needed.
  • Added dependency reference to home-assistant-js-websocket version 9.4.0.
1 Like

Hi Todd, your SpotifyPlus card is amazing, thank you very much!
Ive played a bit in the week end and for my needs I have done this config:

As you can see I have removed in the footer most of the buttons, and I’d like to be able to configure a kind of browser window, like the SpotifyPlus browser “Media” and be able to give an address for browsing. In my case I use a lot the “made for you” with daily mixes, discovery weekly, release radar and all the recomendations from Spotify. Do you think it’s possible to make a custumizations like that in one of the next releases (like a custom button browser)?
Another silly request is if it’s possible to “resize” the player popup, since in a tablet it’s often not easy to see and touch the buttons, I would like to make the player bigger.

1 Like

@Sofa_Surfer
The “Made For You” content can be accessed using the categories section (see screen shot below); it’s in the list of alphabetized categories. Note that there is currently no way to get directly to it though. I think what I might do is create a new user-preset type, that allows you to jump to a specific category for display.

You can also set individual “Made For You” category items (or any other category items) as user presets. Note that the “Made For You” items are just playlists. For example, you can create a user-preset for the Spotify “Daily Mix 1” playlist:

userPresets:
  - name: Daily Mix 1
    subtitle: playlist
    image_url: https://pickasso.spotifycdn.com/image/ab67c0de0000deef/dt/v1/img/daily/1/ab6761610000e5ebcd3f796bd7ea49ed7615a550/en
    uri: spotify:playlist:37i9dQZF1E39vTG3GurFPW
    type: playlist

The user-preset item can be created for you by using the actions menu “Copy Playlist Preset Info to Clipboard”; this will copy the user-preset to your clipboard.

The clipboard contents can then pasted into the Card Configuration editor under the userPresets: configuration key:
image

I am trying to make the “Copy Playlist Preset Info to Clipboard” into a "“Add Playlist to User Presets” function, but that is still in the works. For now, it’s a manual process.

As for resizing the player popup … if you are using a tablet, I would suggest using a dashboard of “panel” type, and set the SpotifyPlus Card width and height to “fill”.
You can also make the footer buttons bigger by using the “Size of the icons in the footer area”. Default size is “1.75rem”; I would suggest a size of “2.5rem”, and increase / decrease as needed.

Hope it helps!

1 Like

Yes, both the preset and the browse helps, I’ve added a preset with my playlist, thanks, I didn’t see it before!
Regarding the windows size I use Matt’s dashboard, both side menu and header are hidden and at the moment I haven’t tested another view yet but I can try, it’s a good idea! But I would need a button somewhere or a way tobe able to browse back to my main dashboard ( if it works maybe a swipe…).

1 Like

@Sofa_Surfer
I’m not familiar with the Matt’s dashboard, so not sure how to direct you on that one.

Is there anyway to hide the header area where it fills the space and not just leaves a blank.

Example: Show one thing:

Now hiding the header:


I have things that display song title artist, etc. and I do not want progressbar.

Could be that this is so deep in card_mod? for other things?

@kbrown01
Currently there is no way to do that, as the progress bar and track info are overlaying the cover art.

It might be possible to stretch the cover art, but it would probably look odd depending on the size of the cover art (which can vary by track).

Can you tweak the css attributes in say Google Chrome developer tools to display the image how you want it? Just as an example to show me what you want. I might be able to tweak css attributes if progressbar and track info are hidden.

actually it works well except that in in a grid layout.

Grid layout:

WIthout grid layout and in a panel:

Except that doesn’t work for me and the bottom buttons scale “fill” but the rest doesn;t. It’s unfortunate because I was rebuilding my whole Music and wanted to use this card. I will need to go back to building all my buttons

where do I put the userpresets.json ?

@Faecon
Check out out the userPresetsFile documentation for more info.

With that said, I just noticed a small issue with the docs… I need to change all references of “soundtouchplus” to “spotifyplus” in the docs, as I copied some of these docs from another integration with similar functionality. Apologies for the confusion.

1 Like

Can I have it connected to only 1 device ?

I just installed this card and are trying to set it up. If I play something from the Spotify app on my default Spotify Connect player, it will show in the card, but if I try to choose something else, e.g. a playlist or a recently played song from the card I always get this error:
“The “SpotifyConnectLoginId” configuration option was not supplied, which is required in order to reactivate a Spotify Connect device.”
Same error message if I select my default player from the card. In fact, any action except clicking the Play button from the leftmost page of the card, fails with the same message.
I guess it doesn’t have to do with the need to reactivate the player, as it is already active and playing via Spotify Connect.

What could be wrong?

@tomoqv
You need to set the SpotifyPlus LoginId configuration option, which is used to reactivate a Spotify Connect device. I would also set the Userid and Password values as well; some devices require all 3 settings, others require just the loginId.

I believe it tries to activate it, regardless if it’s already active or not.

Hi Lucas, I’ve been using your Spotifyplus integration with the card for a few days now. However, I have noticed more and more often that I regularly get this message when changing songs! Is this a known problem or is there a solution?

Best regards

Stefan