SpotifyPlus Card Dashboard

awagner64404 · December 4, 2024, 2:27pm

Hi Todd, please send me a PN for sharing the trace. Thanks

thlucas · December 6, 2024, 7:44pm

FYI - just released a new version of the SpotifyPlus Card Dashboard

[ 1.0.16 ] - 2024/12/06

This release requires the SpotifyPlus Integration v1.0.68+ release; please make sure you update the SpotifyPlus integration prior to updating this SpotifyPlus Card release.
Added “Active User” information to Spotify Connect Device details display.

somansch · December 7, 2024, 12:43pm

Thanks for this great card!

I just done first tests and identified an issue around the default coloring. I’m using dark theme and the colors of background and font do not have enough contrast. What would be best way to change it? By card-mod or would you add this feature native?

thlucas · December 7, 2024, 1:29pm

@somansch
What is the name of the playlist that you marked in your screenshot with the red arrow? I would like to search for it and see how it appears on my system. It should not be too hard to add more contrast to the titles.

somansch · December 7, 2024, 1:32pm

It’s not about the specific playlist. All search results have the same appearance. Seems to be a styling issue in my CSS. I use “Mac-OS theme” and done some changes around coloring. What colors variables are you using for the background and font of these buttons?

I’ve done some research in dev-tools of the element “button.button”, but can’t find the difference .

That’s the result with the default HA-Dark theme:

…and with the MacOS-Dark theme:

thlucas · December 8, 2024, 2:14am

@somansch
I just installed the macOS theme, and see the problem.

The text color is the --secondary-text-color value.
The background color is the --rgb-card-background-color value.

        .title {
          font-size: 0.8rem;
          background-color: rgba(var(--rgb-card-background-color), 0.733);
          color: var(--secondary-text-color);
          font-weight: normal;
        }

I am going to adjust the background of the title / sub-title text to use a faded gradient instead of a solid color. I am also going to change the text color to use a variable (e.g. --spc-medialist-items-color: white) for the media items. This value defaults to white, which will contrast better on the gradient background. You can customize the --spc-medialist-items-color by overriding the theme. I am also thinking about a configurable “media list item text color”, so you can set the media list items via configuration settings. That will come later though.

Here’s some preliminary results from testing:

Theme macOS, dark mode

Theme macOS, light mode

Theme default, dark mode

Check out the Overriding Theme forum post on how to add custom theming.

somansch · December 8, 2024, 1:54pm

Thanks, this information helps a lot. I’ve setup the additional “rgb-card-background-color” entry in the existing MacOS theme (as it was not defined in this theme yet). Now, I got the contrast for better readibility

thlucas · December 11, 2024, 4:11pm

FYI - just released a new version of the SpotifyPlus Card Dashboard

[ 1.0.18 ] - 2024/12/11

This release requires the SpotifyPlus Integration v1.0.69+ release; please make sure you update the SpotifyPlus integration prior to updating this SpotifyPlus Card release.
Added playerVolumeControlsHideLevels config option that hides volume level numbers and percentages in the volume controls area of the Player section form. Volume slider control is not affected by this setting.
Added albumFavBrowserItemsLimit config option that specifies the maximum number of items to be returned by the Album Favorites media browser.
Added artistFavBrowserItemsLimit config option that specifies the maximum number of items to be returned by the Artist Favorites media browser.
Added audiobookFavBrowserItemsLimit config option that specifies the maximum number of items to be returned by the Audiobook Favorites media browser.
Added episodeFavBrowserItemsLimit config option that specifies the maximum number of items to be returned by the Episode Favorites media browser.
Added playlistFavBrowserItemsLimit config option that specifies the maximum number of items to be returned by the Playlist Favorites media browser.
Added showFavBrowserItemsLimit config option that specifies the maximum number of items to be returned by the Show Favorites media browser.
Added trackFavBrowserItemsLimit config option that specifies the maximum number of items to be returned by the Track Favorites media browser.
Added “Copy X Preset JSON to Clipboard” action for all section detail displays that contain a “Copy X Preset Info to Clipboard” action. This will create a user-preset JSON format configuration entry for the selected media and copy it to the clipboard; the entry can then be pasted into the userPresets.json file, which will create a user preset for the media item.
Added theme variable --spc-card-footer-background-color to set card footer area background color; default value for the player section is vibrant color (based on cover art colors); default value for all other sections is card background color.
Added theme variable --spc-card-footer-background-image to set card footer area background image; default value for the player section is a gradient, which provides good contrast; default value for all other sections is card background color.
Added theme variable --spc-card-footer-color to set card footer icon foreground color; default value is inherit, which is card foreground color value.
Adjusted scrollbar colors to more closely match selected theme.

thlucas · December 11, 2024, 4:17pm

@somansch
I added a Themes wiki page to document the various theme variables, as well as provide examples for popular themes. I also added the “macOS” example theme example, which gives you an idea of how to modify a theme for both light and dark modes.

Make sure you update to the latest SpotifyPlus Card and SpotifyPlus Integration versions.

mackbeth · December 12, 2024, 11:55am

Question: how to play all favorited songs one by one? As you know, there is no playlist to play, as there stored as something called collection…

thlucas · December 12, 2024, 1:46pm

@mackbeth
Use the Player Media Play Track Favorites service.

You can only play 200 tracks though (Spotify API limitation on the play tracks service).
The desired shuffle mode can also be set before tracks are played.

service: spotifyplus.player_media_play_track_favorites
data:
  entity_id: media_player.spotifyplus_john_s
  shuffle: true

mackbeth · December 12, 2024, 9:23pm

But from card? any button to do this, any way from GUI?

Sofa_Surfer · December 12, 2024, 10:15pm

@thlucas I’m using the Spotify plus in a browser mod popup (I can’t add another view of my panel), I would like to improve the layout:

I’m not sure If it’s possible with card-mod CSS, any advice? Sorry if it’s OT.

  - type: 'custom:button-card'
    icon: 'mdi:spotify'
    color_type: icon
    color: green
    template:
      - button_icon_square_footer   
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          size: wide
          card_mod:
            style: |
              ha-dialog {
                --mdc-dialog-min-width: 1100px !important;
                --mdc-dialog-min-height: 680px !important;   
              }
              .content {
                width: auto !important;
                height: auto !important;
              }
          content:
            !include button_card_templates/player.yaml

I’m struggling to stretch the height to the size of the popup like for the width, to make the player image bigger. Same happens for the browser sections

thlucas · December 12, 2024, 11:09pm

@mackbeth
Not currently, but it will be in the next release.

thlucas · December 13, 2024, 12:09am

@Sofa_Surfer
What do you have specified for the width and height values in your SpotifyPlus Card configuration? Have you tried specifying fill for those values?

If you are using fill, then it’s probably a matter of sizing the ha-dialog parent container element instead of the ha-dialog element itself maybe?

I’m not too familiar with the browser_mod, and it’s been awhile since I played with it.

I know that when I specify the fill values for the width and height that they consume 100% of the horizontal and vertical space on my mobile / tablet devices. I would think the same would apply in the browser_mod popup as well.

Sofa_Surfer · December 13, 2024, 8:09am

That was the silly problem, I “#” while doing some tests. Thank you!
I have some feature request as well, I will post it in the github pull request section

thlucas · December 15, 2024, 4:51pm

You can hide the devices section in the SpotifyPlus Card. You can then go into the SpotifyPlus integration options and select a default device.

thlucas · December 15, 2024, 9:03pm

FYI - just released a new version of the SpotifyPlus Card Dashboard

[ 1.0.19 ] - 2024/12/15

Added favorite indicator to the player section form for track, show episode, and audiobook items. The heart icon will be displayed to the right of the item name. A solid red heart indicates the item is a favorite; a transparent heart indicates the item is not a favorite.
Added “Play All Track Favorites” action to the track favorites section actions. This will get a list of the tracks saved in the current Spotify user’s ‘Your Library’ and starts playing them, with shuffle enabled.
Added logic to player PREVIOUS_TRACK control so that if more than 8 seconds have passed the currently playing track is just restarted from the beginning; otherwise, the previous track is selected if progress is past the 8 second point.

thlucas · December 17, 2024, 10:34pm

FYI - just released a new version of the SpotifyPlus Card Dashboard

[ 1.0.20 ] - 2024/12/17

This release requires the SpotifyPlus Integration v1.0.71+ release; please make sure you update the SpotifyPlus integration prior to updating this SpotifyPlus Card release.
Corrected a bug that was causing the wrong media player to be displayed when multiple SpotifyPlus media players were defined with the same prefix.
Hide Media controls for Spotify Free accounts, as a Spotify Premium membership is required for those functions.
Hide Volume controls for Spotify Free accounts, as a Spotify Premium membership is required for those functions.

thlucas · December 18, 2024, 9:23pm

@mackbeth
I added the “Play All Track Favorites” as a new user-preset option type (requires v1.0.22).

userPresets:
  - name: My Track Favorites
    subtitle: Shuffled
    image_url: https://t.scdn.co/images/728ed47fc1674feb95f7ac20236eb6d7.jpeg
    shuffle: true
    type: trackfavorites

or if you are using JSON file:

  {
    "name": "My Track Favorites",
    "subtitle": "Shuffled",
    "image_url": "https://t.scdn.co/images/728ed47fc1674feb95f7ac20236eb6d7.jpeg",
    "shuffle": true
    "type": "trackfavorites",
  }

The “Play All Track Favorites” is also still accessible via the track favorites detail action menu, but I thought this would make it a little bit easier to get to.

Did you ever figure out the limit on the track favorites?