Skip to content
This repository has been archived by the owner on Feb 4, 2024. It is now read-only.

Home Assistant Lovelace card that lists your current Spotify playlists.

License

Notifications You must be signed in to change notification settings

dnguyen800/spotify-playlist-card

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Spotify Playlist Card

GitHub Release GitHub Activity License

Project Maintenance Project Maintenance

header

This is a Home Assistant Lovelace card that takes your Spotify playlists and creates buttons that will start the playlist when pressed. Requires the Spotify Playlist sensor, and Spotify Media Player to be setup.

Note: There is another Spotify Playlist card by user @fondberg here that is much cleaner and less hacky than my card. Doesn't require the Feed Parser sensor either. Check it out! I don't plan to make much updates on this card, besides fixing a few bugs.

Features

  • Works with Spotcast component and Alexa media player component (still testing).
  • Press/click on the image to start the playlist on the selected media player.
  • Configurable options (number of columns, grid gap, shuffle, playlist title)
  • No white background!

Installation

HACS Install

  1. Install the Spotify Playlist sensor via HACS.
  2. Include this repository as a custom plugin in the HACS settings.
https://github.com/dnguyen800/spotify-playlist-card

If added correctly, the repository should be listed like below: hacs

Manual install

  1. Install the Spotify Playlist sensor and confirm your playlists, URIs and image URLs are loaded in the sensor.
  2. Download the spotify-playlist-card.js and save to the config/www folder
  3. If you edit your Lovelace configuration using ui-lovelace.yaml, include the card code at the top of the ui-lovelace-card.yaml. If using the Lovelace UI editor, enter the Raw Config Editor and make sure the following code is at the top of the editor:
resources:
  - url: /local/spotify-playlist-card.js
    type: js

lovelace-ui-header

Configuration

  1. Make sure the Spotify Playlist sensor contains playlist data.
  2. If you edit your Lovelace configuration using ui-lovelace.yaml, add the entry below:
- type: "custom:spotify-playlist-card"
  sensor: sensor.spotify_playlist  
  playback_method: spotcast
  speaker_entity: "media_player.google_home"
  show_playlist_titles: true
  shuffle: true
  columns: 3

If using the Lovelace UI editor, click on ⋮ >> Configure UI >> + >> Manual Card and add the entry above, making sure to modify the config to match your entity IDs. If the config works, the card should appear in a preview window to the right.

lovelace-ui

Options

Name Type Requirement Description Default
type string Required custom:spotify-playlist-card None
sensor string Required Name of the Spotify Playlist sensor that holds your playlist info. None
columns int Optional Number of columns to display. 3
gradient_level string Optional Choose a value between 0 and 1 for the gradient level used when show_playlist_titles is enabled. 0.8
grid_gap string Optional Define the size of the gap between playlist images. 8px
show_playlist_titles boolean Optional Add a text title at the bottom of each playlist. false
shuffle boolean Optional Set the Spotify shuffle setting. false
playback_method string Optional Speaker playback method for Spotify. Acceptable choices are: spotcast, alexa, or spotify spotify
speaker_entity string Optional The name of the speaker that will play the music. When using Spotcast, use the entity_id of the Chromecast device listed in Home Assistant. If using Amazon Echo or Spotify as the media player, list the full entity name, such as "media_player.spotify" media_player.spotify

Sample for ui-lovelace.yaml:

- type: "custom:spotify-playlist-card"
  sensor: sensor.spotify_playlist  
  playback_method: spotcast
  speaker_entity: "media_player.google_home"
  gradient_level: 0.7
  grid_gap: '8px'
  show_playlist_titles: true
  shuffle: true
  columns: 3

FAQ

  • I press on a playlist button but I don't hear the playlist playing.

If you are using media_player: spotify, and not spotcast or echo, you will not be able to play music on idle speakers. To remedy, start playing Spotify on any device, then try pressing the playlist image again.

Support

I am studying Python as a hobby and this is my first public project. Unfortunately, I know nothing about Javascript and relied on studying other Lovelace custom cards to write this. Suggestions are welcome but no promises if I can fix anything! If you're familiar with CSS, then you can edit the CSS style in the .js file directly!

Credits

  • Tracker-card which I studied and re-used the button code.
  • Spotcast - Starts Spotify playback on an idle Chromecast device. Fixes a big deficiency with my card--the inability to play music on an idle Chromecast.
  • Spotify Card - A great Lovelace Spotify Playlist card that also allows you to select which speaker to play music.

About

Home Assistant Lovelace card that lists your current Spotify playlists.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published