SpotifyPlus Card

Home Assistant UI card that supports features unique to the SpotifyPlus custom integration.
Extended support for the Spotify Service for use in Home Assistant.

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.

and more!

How it Looks

Here's a quick overview on what the card can look like. The card is highly customizable when it comes to the information displayed. Check out the UI Dashboards wiki page for more examples and YAML configuration.

Media Player Control / Actions (Masonry Mode)

Media Favorites (Masonry Mode)

Spotify Media Search (Masonry Mode)

Devices / Actions (Masonry Mode)

Editor UI

Card Picker

HACS Installation Instructions (recommended)

• On your Home Assistant sidebar menu, go to HACS > Frontend
• Click on the 3-dot overflow menu in the upper right, and select custom repositories item.
• Copy / paste https://github.com/thlucas1/spotifyplus_card in the Repository textbox and select Dashboard for the category entry.
• Click on Add to add the custom repository.
• You can then click on the SpotifyPlus Card repository entry (you may need to filter your list first to find the new entry).
• Click on download to start the download. It will install the card to your /config/www/community/spotifyplus_card directory.
• Go back on your dashboard and click on the icon at the right top corner then on Edit dashboard.
• You can now click on Add card in the bottom right corner and search for "Custom: SpotifyPlus Card".

Manual Installation

• using the tool of choice open the directory (folder) for your HA configuration (where you find configuration.yaml).
• change directory to the www folder; if you don't have this directory, then create it.
• download the spotifyplus_card.js file from the GitHub repository into your <config>/www folder.
• on your dashboard click on the icon at the right top corner then on Edit dashboard.
• click again on that icon and then on Manage resources.
• click on Add resource.
• copy and paste this: /local/spotifyplus_card.js?v=1.
• click on JavaScript Module then Create.
• go back and refresh your page.
• you can now click on Add card in the bottom right corner and search for "Custom: SpotifyPlus Card".
• after any update of the file you will have to edit /local/spotifyplus_card.js?v=1 and change the version (e.g. v=1) to any higher number (e.g. v=1.2).

More Information

Check out the following links for more information:

• Card Wiki Home
• Card Features
• Card Configuration
• Card UI Examples
• SpotifyPlus Integration

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.

---