UI Dashboards - thlucas1/spotifyplus_card GitHub Wiki

The following dashboards are useful to me in my environment, so I thought I would post them here in case anyone else finds them useful.

Index

Masonry Dashboard Configuration
Panel Dashboard Configuration
Sample Configuration YAML
- iPhone16 Pro Max

Masonry Dashboard Configuration

This example will configure the card to be used on a masonry dashboard. This is the configuration I used when putting together the card documentation.

Don't care how it looks? Jump to the YAML definition.

How it Looks

Player Section - Track content

Player Section - Audiobook content

Player Section - Podcast Show content

Player Section - Album Favorites

Masonry Dashboard Configuration YAML

Add the following YAML to a masonry dashboard of your choice. Make the following changes to the yaml:

change media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID to your SpotifyPlus player entity_id (e.g. media_player.spotifyplus_username)
create a userpresets.json in the <configuration folder>/www/spotifyplus/ folder. This will contain user-defined presets. Please refer to the User Presets File topic JSON File Example for the JSON file content.

type: custom:spotifyplus-card
entity: media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID
sections:
  - player
  - albumfavorites
  - artistfavorites
  - playlistfavorites
  - recents
  - devices
  - trackfavorites
  - userpresets
  - searchmedia
  - audiobookfavorites
  - showfavorites
  - episodefavorites
playerHeaderTitle: "{player.source}"
playerHeaderArtistTrack: "{player.media_artist} - {player.media_title}"
playerHeaderAlbum: "{player.media_album_name}"
playerHeaderNoMediaPlayingText: "\"{player.name}\" state is \"{player.state}\""
albumFavBrowserTitle: Album Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
albumFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
albumFavBrowserItemsPerRow: 4
albumFavBrowserItemsHideTitle: false
albumFavBrowserItemsHideSubTitle: false
albumFavBrowserItemsSortTitle: true
artistFavBrowserTitle: Artist Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
artistFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
artistFavBrowserItemsPerRow: 4
artistFavBrowserItemsHideTitle: false
artistFavBrowserItemsHideSubTitle: true
artistFavBrowserItemsSortTitle: true
audiobookFavBrowserTitle: Audiobook Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
audiobookFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
audiobookFavBrowserItemsHideTitle: false
audiobookFavBrowserItemsHideSubTitle: false
audiobookFavBrowserItemsSortTitle: true
audiobookFavBrowserItemsPerRow: 4
deviceBrowserTitle: Spotify Connect Devices ({medialist.itemcount} items)
deviceBrowserSubTitle: click an item to select the device; click-hold for device info
deviceBrowserItemsPerRow: 1
deviceBrowserItemsHideSubTitle: true
episodeFavBrowserTitle: Episode Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
episodeFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
episodeFavBrowserItemsHideTitle: false
episodeFavBrowserItemsSortTitle: true
episodeFavBrowserItemsHideSubTitle: false
playlistFavBrowserTitle: Playlist Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
playlistFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
playlistFavBrowserItemsPerRow: 4
playlistFavBrowserItemsHideTitle: false
playlistFavBrowserItemsHideSubTitle: false
playlistFavBrowserItemsSortTitle: true
recentBrowserTitle: Recently Played by {player.sp_user_display_name} ({medialist.itemcount} items)
recentBrowserSubTitle: click a tile item to play the content; click-hold for actions
recentBrowserItemsPerRow: 4
recentBrowserItemsHideTitle: false
recentBrowserItemsHideSubTitle: false
searchMediaBrowserTitle: Search Spotify for {player.sp_user_display_name} ({medialist.itemcount} items)
searchMediaBrowserSubTitle: click a tile item to play the content; click-hold for actions
searchMediaBrowserItemsPerRow: 4
searchMediaBrowserItemsHideTitle: false
searchMediaBrowserItemsHideSubTitle: false
searchMediaBrowserSearchLimit: 150
showFavBrowserTitle: Show Favorites for {player.sp_user_display_name} ({medialist.itemcount} items)
showFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
showFavBrowserItemsHideSubTitle: false
showFavBrowserItemsHideTitle: false
showFavBrowserItemsSortTitle: true
trackFavBrowserTitle: Track Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
trackFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
trackFavBrowserItemsPerRow: 4
trackFavBrowserItemsHideTitle: false
trackFavBrowserItemsHideSubTitle: false
trackFavBrowserItemsSortTitle: false
userPresetBrowserTitle: User Presets for {player.sp_user_display_name} ({medialist.itemcount} items)
userPresetBrowserSubTitle: click a tile item to play the content; click-hold for actions
userPresetBrowserItemsPerRow: 4
userPresetBrowserItemsHideTitle: false
userPresetBrowserItemsHideSubTitle: false
userPresetsFile: /local/spotifyplus/userpresets.json
userPresets:
  - name: Spotify Playlist Daily Mix 1
    subtitle: Various Artists
    image_url: >-
      https://dailymix-images.scdn.co/v2/img/ab6761610000e5ebcd3f796bd7ea49ed7615a550/1/en/default
    uri: spotify:playlist:37i9dQZF1E39vTG3GurFPW
    type: playlist

Panel Dashboard Configuration

This example will configure the card to be used on a panel dashboard. It will utilize 100% of the space on the dashboard.

Don't care how it looks? Jump to the YAML definition.

How it Looks

Player Section - Track content

Player Section - Podcast Show content

Album Favorites Section

Album Favorites Section - Actions

Search Media Section - Albums

Search Media Section - Album Actions

Panel Dashboard Configuration YAML

Add the following YAML to a panel dashboard of your choice. Make the following changes to the yaml:

change media_player.YOUR_SPOTIFYPLUS_PLAYER_ENTITY_ID to your SpotifyPlus player entity_id (e.g. media_player.spotifyplus_username)
create a userpresets.json in the <configuration folder>/www/spotifyplus/ folder. This will contain user-defined presets. Please refer to the User Presets File topic JSON File Example for the JSON file content.

type: custom:spotifyplus-card
entity: media_player.spotifyplus_todd_l
width: fill
height: fill
sections:
  - player
  - albumfavorites
  - artistfavorites
  - playlistfavorites
  - recents
  - devices
  - trackfavorites
  - userpresets
  - searchmedia
  - audiobookfavorites
  - showfavorites
  - episodefavorites
playerHeaderTitle: "{player.source}"
playerHeaderArtistTrack: "{player.media_artist} - {player.media_title}"
playerHeaderAlbum: "{player.media_album_name}"
playerHeaderNoMediaPlayingText: "\"{player.name}\" state is \"{player.state}\""
albumFavBrowserTitle: >-
  Album Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
albumFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
albumFavBrowserItemsPerRow: 10
albumFavBrowserItemsHideTitle: false
albumFavBrowserItemsHideSubTitle: false
albumFavBrowserItemsSortTitle: true
artistFavBrowserTitle: >-
  Artist Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
artistFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
artistFavBrowserItemsPerRow: 10
artistFavBrowserItemsHideTitle: false
artistFavBrowserItemsHideSubTitle: true
artistFavBrowserItemsSortTitle: true
audiobookFavBrowserTitle: >-
  Audiobook Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
audiobookFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
audiobookFavBrowserItemsHideTitle: false
audiobookFavBrowserItemsHideSubTitle: false
audiobookFavBrowserItemsSortTitle: true
audiobookFavBrowserItemsPerRow: 10
deviceBrowserTitle: Spotify Connect Devices ({medialist.itemcount} items)
deviceBrowserSubTitle: click an item to select the device; click-hold for device info
deviceBrowserItemsPerRow: 1
deviceBrowserItemsHideSubTitle: true
episodeFavBrowserTitle: >-
  Episode Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
episodeFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
episodeFavBrowserItemsPerRow: 10
episodeFavBrowserItemsHideTitle: false
episodeFavBrowserItemsSortTitle: true
episodeFavBrowserItemsHideSubTitle: false
playlistFavBrowserTitle: >-
  Playlist Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
playlistFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
playlistFavBrowserItemsPerRow: 10
playlistFavBrowserItemsHideTitle: false
playlistFavBrowserItemsHideSubTitle: false
playlistFavBrowserItemsSortTitle: true
recentBrowserTitle: Recently Played by {player.sp_user_display_name} ({medialist.itemcount} items)
recentBrowserSubTitle: click a tile item to play the content; click-hold for actions
recentBrowserItemsPerRow: 10
recentBrowserItemsHideTitle: false
recentBrowserItemsHideSubTitle: false
searchMediaBrowserTitle: Search Spotify for {player.sp_user_display_name} ({medialist.itemcount} items)
searchMediaBrowserSubTitle: click a tile item to play the content; click-hold for actions
searchMediaBrowserItemsPerRow: 10
searchMediaBrowserItemsHideTitle: false
searchMediaBrowserItemsHideSubTitle: false
searchMediaBrowserSearchLimit: 150
showFavBrowserTitle: Show Favorites for {player.sp_user_display_name} ({medialist.itemcount} items)
showFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
showFavBrowserItemsPerRow: 10
showFavBrowserItemsHideSubTitle: false
showFavBrowserItemsHideTitle: false
showFavBrowserItemsSortTitle: true
trackFavBrowserTitle: >-
  Track Favorites for {player.sp_user_display_name} ({medialist.itemcount}
  items)
trackFavBrowserSubTitle: click a tile item to play the content; click-hold for actions
trackFavBrowserItemsPerRow: 10
trackFavBrowserItemsHideTitle: false
trackFavBrowserItemsHideSubTitle: false
trackFavBrowserItemsSortTitle: false
userPresetBrowserTitle: User Presets for {player.sp_user_display_name} ({medialist.itemcount} items)
userPresetBrowserSubTitle: click a tile item to play the content; click-hold for actions
userPresetBrowserItemsPerRow: 10
userPresetBrowserItemsHideTitle: false
userPresetBrowserItemsHideSubTitle: false
userPresetsFile: /local/spotifyplus/userpresets.json
userPresets:
  - name: Spotify Playlist Daily Mix 1
    subtitle: Various Artists
    image_url: >-
      https://dailymix-images.scdn.co/v2/img/ab6761610000e5ebcd3f796bd7ea49ed7615a550/1/en/default
    uri: spotify:playlist:37i9dQZF1E39vTG3GurFPW
    type: playlist

iPhone16 Pro Max Sample

This example will configure the card to be used on an Apple iPhone 16 Pro Max device.

How it Looks

TODO

iPhone16 Pro Max Sample YAML

Add the following YAML to a panel dashboard of your choice. Make the following changes to the yaml:

change media_player.spotifyplus_todd_l to your SpotifyPlus player entity_id (e.g. media_player.spotifyplus_username)

type: custom:spotifyplus-card
cardUniqueId: iphone17pro-unique-id
entity: media_player.spotifyplus_todd_l
sections:
  - albumfavorites
  - artistfavorites
  - audiobookfavorites
  - devices
  - episodefavorites
  - player
  - playlistfavorites
  - recents
  - searchmedia
  - showfavorites
  - trackfavorites
  - userpresets
sectionDefault: player
width: fill
height: fill
footerIconSize: 3rem
touchSupportDisabled: false
mediaBrowserItemsTitleFontSize: 1.8rem
mediaBrowserItemsSubTitleFontSize: 1.4rem
mediaBrowserSectionTitleFontSize: 2rem
mediaBrowserSectionSubTitleFontSize: 1.4rem
playerBackgroundImageSize: cover
playerControlsIconSize: 3rem
playerControlsIconMargin: 0 4px 0 4px
playerHeaderTitle1FontSize: 1.8rem
playerHeaderTitle2FontSize: 2rem
playerHeaderTitle3FontSize: 2rem
playerMinimizeOnIdle: false
playerHeaderTitle: "{player.source}"
playerHeaderArtistTrack: "{player.media_artist} - {player.media_title}"
playerHeaderAlbum: "{player.media_album_name} {player.sp_playlist_name_title}"
playerHeaderNoMediaPlayingText: "\"{player.name}\" - No Media playing ({player.state})"
playerVolumeControlsShowPlusMinus: false
playerVolumeControlsHideSlider: false
playerVolumeStepValue: 10
albumFavBrowserTitle: Album Favorites ({medialist.filteritemcount} items)
albumFavBrowserSubTitle: click tile to play; click-hold for actions
albumFavBrowserItemsPerRow: 2
albumFavBrowserItemsHideTitle: false
albumFavBrowserItemsHideSubTitle: false
albumFavBrowserItemsSortTitle: true
albumFavBrowserShuffleOnPlay: false
artistFavBrowserTitle: Artist Favorites ({medialist.filteritemcount} items)
artistFavBrowserSubTitle: click tile to play; click-hold for actions
artistFavBrowserItemsPerRow: 2
artistFavBrowserItemsHideTitle: false
artistFavBrowserItemsHideSubTitle: true
artistFavBrowserItemsSortTitle: true
artistFavBrowserShuffleOnPlay: false
audiobookFavBrowserTitle: Audiobook Favorites ({medialist.filteritemcount} items)
audiobookFavBrowserSubTitle: click tile to play; click-hold for actions
audiobookFavBrowserItemsHideTitle: false
audiobookFavBrowserItemsHideSubTitle: false
audiobookFavBrowserItemsSortTitle: true
audiobookFavBrowserItemsPerRow: 2
categoryBrowserTitle: Categorys ({medialist.filteritemcount} items)
categoryBrowserSubTitle: click tile to display playlists for category; click-hold for actions
categoryBrowserItemsPerRow: 2
categoryBrowserItemsHideTitle: false
categoryBrowserItemsHideSubTitle: true
deviceBrowserTitle: Spotify Connect Devices ({medialist.filteritemcount})
deviceBrowserSubTitle: click item to select device; click-hold for info
deviceBrowserItemsPerRow: 1
deviceBrowserItemsHideTitle: false
deviceBrowserItemsHideSubTitle: true
deviceBrowserItemsShowHiddenDevices: true
deviceControlByName: true
episodeFavBrowserTitle: Episode Favorites ({medialist.filteritemcount} items)
episodeFavBrowserSubTitle: click tile to play; click-hold for actions
episodeFavBrowserItemsPerRow: 2
episodeFavBrowserItemsHideTitle: false
episodeFavBrowserItemsSortTitle: true
episodeFavBrowserItemsHideSubTitle: false
playlistFavBrowserTitle: Playlist Favorites ({medialist.filteritemcount} items)
playlistFavBrowserSubTitle: click tile to play; click-hold for actions
playlistFavBrowserItemsPerRow: 2
playlistFavBrowserItemsHideTitle: false
playlistFavBrowserItemsHideSubTitle: false
playlistFavBrowserItemsSortTitle: true
playlistFavBrowserShuffleOnPlay: false
recentBrowserTitle: Recently Played ({medialist.filteritemcount} items)
recentBrowserSubTitle: click tile to play; click-hold for actions
recentBrowserItemsPerRow: 2
recentBrowserItemsHideTitle: false
recentBrowserItemsHideSubTitle: false
searchMediaBrowserTitle: Search Spotify ({medialist.filteritemcount} items)
searchMediaBrowserSubTitle: click tile to play; click-hold for actions
searchMediaBrowserItemsPerRow: 2
searchMediaBrowserItemsHideTitle: false
searchMediaBrowserItemsHideSubTitle: false
searchMediaBrowserQueueSelection: false
searchMediaBrowserSearchLimit: 150
searchMediaBrowserSearchTypes:
  - Albums
  - Artists
  - Tracks
  - AudioBooks
  - Episodes
  - Shows
  - Playlists
showFavBrowserTitle: Show Favorites ({medialist.filteritemcount} items)
showFavBrowserSubTitle: click tile to play; click-hold for actions
showFavBrowserItemsPerRow: 2
showFavBrowserItemsHideSubTitle: false
showFavBrowserItemsHideTitle: false
showFavBrowserItemsSortTitle: true
trackFavBrowserTitle: Track Favorites ({medialist.filteritemcount} items)
trackFavBrowserSubTitle: click tile to play; click-hold for actions
trackFavBrowserItemsPerRow: 2
trackFavBrowserItemsHideTitle: false
trackFavBrowserItemsHideSubTitle: false
trackFavBrowserItemsSortTitle: false
trackFavBrowserShuffleOnPlay: false
userPresetBrowserTitle: User Presets ({medialist.filteritemcount} items)
userPresetBrowserSubTitle: click tile to play; click-hold for actions
userPresetBrowserItemsPerRow: 2
userPresetBrowserItemsHideTitle: false
userPresetBrowserItemsHideSubTitle: false
userPresets:
  - name: Daily Mix 1
    image_url: >-
      https://pickasso.spotifycdn.com/image/ab67c0de0000deef/dt/v1/img/daily/1/ab6761610000e5eb9b76ad1c4303ee8eb665a5ee/en
    subtitle: playlist
    type: playlist
    uri: spotify:playlist:37i9dQZF1E39vTG3GurFPW
customImageUrls:
  playerOffBackground: /local/spotifyplus/customimages/playerOffIdleBackground09.png
  playerIdleBackground: /local/spotifyplus/customimages/playerOffIdleBackground09.png
  Bose-ST10-1: /local/spotifyplus/customimages/device_bose_soundtouch_10.png
  Bose-ST10-2: /local/spotifyplus/customimages/device_bose_soundtouch_10.png
  Bose-ST10-3: /local/spotifyplus/customimages/device_bose_soundtouch_10.png
  Bose-ST10-4: /local/spotifyplus/customimages/device_bose_soundtouch_10.png
  Bose-ST300: /local/spotifyplus/customimages/device_bose_soundtouch_300.png
  Echo Dot 01: /local/spotifyplus/customimages/device_amazon_echo_dot.png
  Go-Librespot: /local/spotifyplus/customimages/device_librespot.png?v20250912
  HAVM-SpotifyConnect: /local/spotifyplus/customimages/device_raspberrypi_04.png?v20250912
  Nest Audio 01: /local/spotifyplus/customimages/device_google_nest.png
  Nest Group 01: /local/spotifyplus/customimages/device_google_nest_group.png
  Google Home 01: /local/spotifyplus/customimages/device_google_home_mini_gen1.png
  Google Group 01: /local/spotifyplus/customimages/device_google_home_mini_gen1_group.png
  Google Group 02: /local/spotifyplus/customimages/device_google_home_mini_gen1_group.png
  Sonos 01: /local/spotifyplus/customimages/device_sonos_symfonisk.png?v1
  THLUCASI9: /local/spotifyplus/customimages/device_windows_logo.png
  iPhone: /local/spotifyplus/customimages/device_apple_iphone_16promax.png