SoundTouchPlus-Card HA UI Card

I have developed a new Home Assistant SoundTouchPlus-Card custom card that adds front-end support to my SoundTouchPlus integration.

Features

  • Display / Select / Store SoundTouch Device Presets
  • Display / Select SoundTouch Device Recently Played items
  • Display / Select your Pandora Stations

with more to come!

How it Looks

Here’s a quick overview on what the card can look like; check out the UI Dashboards wiki page for more examples and YAML configuration.

Pandora Stations, Panel Mode

SoundTouch Presets, Panel Mode

SoundTouch Recently Played, Panel Mode

Editor UI, General 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.

1 Like

Tagging those who might be interested …
@jasebob @jones @Andreas_R @terhofte7553 @lucamichetti @zdale59 @bencsikzoli @Diegocampy

1 Like

Thanks, if I understand correctly, this would work with Bose Sound touch devices and that’s it right? Because I only have one of these devices, out of a total of about 10 devices, mostly Google home, and an onkyo amplifier. I had often thought of something to be able to use a graphical interface, but then I always opted to choose the music from the Spotify app (my only source in use) and then stream it on the selected device.
Mine isn’t meant to be a request for new features, just a request for clarification, but I think I already understand well that it only works with Sound Touch

@Diegocampy
You are correct - the SoundTouchPlus Card will only work with the Bose SoundTouch devices.

This is my first attempt at writing a Home Assistant custom card. If things go well, I may write another custom card for the SpotifyPlus integration, but that will be a few months.

1 Like

Your card is just as awesome as the SoundtouchPlus integration. Have you thought about implementing a nice UI in the card for managing speaker groups for multi room audio like in mini-media-player?

@jones
Thank you - it’s been a learning process, as I have never coded in Typescript before.

As for group support, I have not given that much thought. The mini media player does a pretty good job of implementing group support in the player. I know the maxi media player has support for grouping as well. Is there something that those two players don’t provide that you are looking for, functionality-wise?

You are totally right. I am too using the grouping feature of mini-media-player. My thought was just that all your work seems like you are developping a swiss army knife for the Soundtouch Platform. In mini-media-player. you have to define the master device and add all other speakers manually in each card. In your config all these information are already available.

If you could select a master speaker in the card all other group devices could all be added automatically as children.

1 Like

Hi Todd

This looks great and is much easier than manually extracting the presets/recent data from directly calling soundtouchplus.recent_list. I appreciate your ongoing efforts to create a great Bose experience that Bose was unable to do themselves! :slight_smile:

For Bose + Spotify users like me, it doesn’t solve the main problem I had before the new card. The recent list does not include the Container Art. So you don’t get nice pictures. Here’s a screen shot - only the Pandora recent play has a picture!

The reason is clear from the response from soundtouchplus.recent_list. The spotify items don’t come with ContainerArt item. I couldn’t see a solution with my previous manual code. But with a custom card perhaps you can cache the ContainerArt as it playus and generate lookup enties. Essentially this would automatically creating entries for customImageUrls as something plays.

[ We could argue whether this feature should go into the SoundTouchPlus code, so the recent list is corrected, or if it should go in the card as customImageUrls]

Just for a full picture, here are the first two items in the recent list. See how the Pandora entry has ContainerArt buyt the Spotify entry does not.

serviceResponse: 
LastUpdatedOn: 1715703622
Recents:
  - CreatedOn: 1715703622
    DeviceId: 000C8AC06D11
    SourceTitle: Pandora (*************************)
    ContentItem:
      ContainerArt: >-
        https://content-images.p-cdn.com/images/08/c4/56/bd/c05545d69f247db1f0dc09c7/_500W_500H.jpg
      IsPresetable: true
      Location: '271146598476467514'
      Name: Jack Johnson Radio
      Source: PANDORA
      SourceAccount: ********************
  - RecentId: 2453844922
    CreatedOn: 1715694486
    DeviceId: 000C8AC06D11
    SourceTitle: Spotify (*****************************)
    ContentItem:
      IsPresetable: true
      Location: /playback/container/c3BvdGlmeTpwbGF5bGlzdDozV0dlOVpERk1VVmd0anpLVWlrR0Q2
      Name: Favorite Classical
      Source: SPOTIFY
      SourceAccount: **************************
      TypeValue: tracklisturl
  - RecentId: 2504739107
    CreatedOn: 1715661165
    DeviceId: 000C8AC06D11
    SourceTitle: Spotify (**************************)
    ContentItem:
      IsPresetable: true
      Location: /playback/container/c3BvdGlmeTp0cmFjazozTmNycjhHbVpCaDVBQXRGQnlURWg3
      Name: Streets Of London
      Source: SPOTIFY
      SourceAccount: ********************
      TypeValue: tracklisturl

I also think mini-media-player is great and use it.
Rather than re-implementing it within this card, I think the focus should be on building some nice examples of combining mini-media-player and this card together in one dashboard. Probably a panel card, with some veritical / horizontal stacks or grids.

1 Like

@jasebob
I hear you on the recently played cover art. I still am unclear why Bose chose to remove the cover art url links on the recently played items, but links are retained for presets! If you are going to do one, then why not the other?!

I overcame this by building the customImageUrls list for my most-played songs, but that is a pain and is not realistic from a real use-case perspective (it makes my screen caps for documentation look good though). My thought there was to create an imageCache folder on the file system and start downloading links as things are playing. I am hesitant to go that route though, as it clearly violates Spotify (if not other music service) usage terms. It could also fill up the file system if not done properly (e.g. enforce a max cache size). Maybe a hybrid solution to only keep what’s in the recently played list, and remove everything else? Will have to put some thought into that.

To avoid violating terms, don’t cache the downloaded image. Just the URL for that image and let browser fetch it like it does for Pandora.

@jasebob
I like that idea, but the image url could change since it’s (usually) a CDN link. That would be better than nothing though, as I am sure some CDN links don’t change that often.

@jasebob
I just released v1.0.3 of the SoundTouchPlus Card with the following changes:

[ 1.0.3 ] - 2024/05/20

  • Updated the Player section to be a basic media player; more features are planned, but I wanted to get something out there that was functional.
  • Added Sources section to allow media player source to be selected.
  • Added recently played list cache support, that caches recently played content to the local file system. The cache list is preferred over the SoundTouch device list, since the device removes it’s cover art image links quite frequently. Max cache items is configurable in the SoundTouchPlus device options (per device).
  • Updated wiki documentation.

I added a new SoundTouchPlus configuration option to configure the recent list cache max items. You can specify from 1 to whatever, but keep in mind that the information is stored on the file system; if you are limited on space (think Raspberry Pi for example) that could be an issue, not to mention the amount of time it takes to refresh a display. There is more info on the wiki about how the caching works. I would suggest a value of 150 for max items, which is 3x more than the SoundTouch device recents list gives you (50 max).

Also keep in mind that pretty much all of the Spotify image url links are CDN’s, which mean (theoretically) that they could change. Something to keep in mind if you start seeing the wrong image for a title in the recently played list.

I also put a lot of work into the player section, which contains the basic functions (control, status display, volume, etc). I plan on adding some grouping / zone support in the future, as well as some Spotify functionality (including searches hopefully). Baby steps.

Enjoy!

Hi Todd
I upgraded and lost functionality, unfortunately.
The recent list tab is now empty, it used to populate but just be missing images.
I have cleared the browser cache and tried Chrome and Edge browsers with the same results.

image



image

I also note that the player tab is empty when nothing is playing, but has the album art and some controls when something is playing.

Let me know if you want some debug logs or some experiments.

OK I found this in the homeassistant.log
Am I missing a directory?

2024-05-20 09:34:30.980 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection] [546517132352] Service soundtouchplus.recent_list_cache not found

@jasebob
Per the log entry about the missing service, that’s an indicator that you need to update the SoundTouchPlus integration; the recent_list_cache service is a new service that is called by the SoundTouchPlusCard card. My apologies on that, as I forgot to mention that I rolled out a new SoundTouchPlus update as well.

After updating, don’t forgot to configure the cache max items option in the SoundTouchPlus integration device options.

Hi Todd

When reconfiguring SoundTouchPlus, do I need the SpotifyPlus integration?
I cant find a reference to SpotifyPlus in the SoundTouchPlus documents.

@jasebob
If you don’t have SpotifyPlus installed then you don’t need to configure the SoundTouchPlus option. It’s only used if you are calling Spotify services that query data. Note that it’s not used to play Spotify media, as the Bose Soundtouch handles that natively.

So if SpotifyPlus is not required then I still have a problem

image

image

There is nothing in my homeassistant.log now…
I’ve rebooted and cleared browser cache after updating too

@jasebob
A few things to check …

  • do you have websocket support enabled for the SoundTouch Kitchen device? RecentListCache requires that websockets be enabled, as it uses provided event(s) to receive updates. I really need to add a state attribute that lists the websocket status. You can try deleting / re-adding the device with websockets enabled.

  • what do you see in your developer tools \ states display for the SoundTouch Kitchen device? Look for the soundtouchplus_recents_cache_enabled and soundtouchplus_recents_cache_max_items attributes.

  • do you see any files created in the \config\www\soundtouchplus folder? Look for a file named recently_played_cache_XX.xml where XX is the SoundTouch Kitchen device id.

The STP Card displays the Recents cache disabled in ... message if the soundtouchplus_recents_cache_enabled attribute is false.