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.
Limitations
A Spotify Premium level membership is required in order to control the Spotify Player (e.g. pause, resume, volume changes, etc) as well as retrieve player queue info.
A Spotify Free level membership will work fine if you want to retrieve data, set / reset / check favorites, etc. Any changes to the Spotify Player must be made using a Spotify client (e.g. mobile, desktop, etc).
Limited control of Chromecast devices. Chromecast devices are currently not fully supported by the SpotifyPlus integration. You can perform player functions (e.g. pause, resume, next track, etc) if the device is the currently active player, but you can’t wake up a device or initiate play of tracks / context.
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.
@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.
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.
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.
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.
@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:
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:
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.
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…).
@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.
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
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.
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.
@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?
