@anderslutzhoft
The SpotifyPlus Card can display queue info in the player section display. If you’re not familiar, the SpotifyPlus Card is a front-end UI for the SpotifyPlus Integgration.
Or were you looking for more of a service call type of functionality for an automation?
Hi!
Ah, that’s cool! Thank’s for pointing me to that.
For my specific use, what I’d like was to have the queue displayed separately on my dashboard, and yeah, the ability to tap to skip to a track.
So if the Spotify Card could have the Queue as a Section, then I could just click the other sections off, and it would hit the spot!
Right now I am using an automation to call the get_player_queue and store the queue in a separate sensor. Because as far as I see the SpotifyPlus integration doesn’t keep the queue data in any of the built in sensors, right?
@anderslutzhoft
The queue info display is not it’s own section, but rather a popup of the Player section. There is currently no way to make it separate without a lot of work.
Regarding sensors … correct, there is no sensor that contains queue data.
I have found that there are limitations to sensors, in that only so much data can be stored in them (16k max if memory serves). The get_player_queue_info service could possibly exceed these limits, depending on how much data is associated with a track. I know that all you really need are a few fields out of that (track name, uri, image_url, etc), but unfortunately the Spotify Web API service gives you everything (no way to limit output fields to the ones you want).
You might check out the following link: Recently Played List - check the How It Works section.
I know, it has nothing to do with Spotify (nor SpotifyPlus for that matter). It’s a script I put together for my SoundTouchPlus integration which stores the recently played list in a template sensor, then it uses a custom:auto-entities to display the list of tiles. The same concept could be applied to the SpotifyPlus queue info with some tweaking.
The above is how I found out about the 16k limitation of template sensors.
Hope it helps!
Without clearing the cache I used another PC and it saved the information. Thanks and compliments for the great work. It has actually ousted the old spotify integration.
FYI - just released a new version of the SpotifyPlus integration
Be sure to check out the SpotifyPlus Card Dashboard as well.
player_media_play_context, player_media_play_track_favorites, player_media_play_tracks, player_media_resume, and media_play (e.g. start / resume playback). This feature was already available for the play_media service, but only if a supported media_type was specified and no enqueueing).I circled back to this in my integrations and I am trying to figure out what is wrong here. It plays and the card is nice (albeit I would prefer to build my own from components of this card).
So, I am playing and I can select the queue and change the song, great:
If I click play it will play that song.
But if I use any of the lower buttons (favorites, all of them really …) I cannot play anything. Clicking the song does nothing. If I click Peggy Gou in the image below, nothing happens.
What am I missing?
NOTE: I just noticed I use conditional rendering of the card by screen size. While the card parameters themselves are identical, only the selection for “phone” size works.
Yellow is fine, red those buttons do not function
NOTE2: I put the card into a decluttering template so I am sure they are identical. And same result, the bottom buttons do not function on the greater > 768px view.
The only difference is that one is in a vertical-stack overall (phone) and the other is in a horizontal-stack (tab/pc).
NOTE3: Proven out. If I use my PC and use developers tools, simply switching between a phone-size view and a wide view shows those buttons only work when the screen size is small
Has the card been tested on anything other than a phone?
I did create a larger screen in developers tools and it works, just not when developers tools are open. Tiotally confusing
@kbrown01
Not sure I follow what you are trying to do with the vertical stacks or media_query definitions - not familiar with those. I also have not tested the card with “conditional rendering”, so not sure about that either.
But if I use any of the lower buttons (favorites, all of them really …) I cannot play anything. Clicking the song does nothing. If I click Peggy Gou in the image below, nothing happens.
Clicking on the tile should play the media.
What is the output device you are playing on? It appears you have hidden the player header area so I cannot tell what the device is.
What browser / device are you displaying the card in? That might be affecting the ability to click on a time and play - depends if the device supports both touchpad and touch screen inputs.
I’ve had several users run the card on various tablets and browsers, all with no issues.
Pictures maybe help.
PC/Pad view:
Phone view:
The whole thing is in a panel dashboard hence it can have only one card which is a vertical-stack. The whole control system is meant to look good on PC, pad, and phone. Note that the their are other cards hidden/shown depending on the source … spotify = Spotifyplus, Pandora = Kodi, Local Music = Volumio. Depending on the switch thrown the proper cards are shown hidden.
So obviously there are layout considerations as you can see above. The phone versus eveything else is merely changing the layout from vertical to horizontal 2 columns.
I would note that everything works in the phone mode, and most all work in the PC/tab 2 column view except selecting a bottom button and trying to play the result from the list. On the wide, two column mode it does nothing.
More odd is that if I enter developer’s tab on google they work UNLESS I select responsive mode. If I watch the console nothing happens if I click the song to play in responsive mode, but if I change to a different device type I can see it get the song:
Oh, and the unit itself is a Dayton Audio Dax88 multizone (6 input, 6 output) AMP. So the GUI controls what goes to what zone or multiple zones. All of this is perfect.
In case it helps, this is the card YAML for both:
type: custom:spotifyplus-card
sections:
- player
- albumfavorites
- artistfavorites
- playlistfavorites
- recents
- devices
- trackfavorites
- searchmedia
entity: media_player.spotifyplus_kevin_brown
albumFavBrowserItemsPerRow: 1
albumFavBrowserItemsHideTitle: false
albumFavBrowserItemsHideSubTitle: false
albumFavBrowserItemsSortTitle: true
artistFavBrowserItemsPerRow: 1
artistFavBrowserItemsHideTitle: false
artistFavBrowserItemsHideSubTitle: false
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
audiobookFavBrowserItemsPerRow: 4
audiobookFavBrowserItemsHideTitle: true
audiobookFavBrowserItemsHideSubTitle: false
audiobookFavBrowserItemsSortTitle: true
categoryBrowserItemsPerRow: 4
categoryBrowserItemsHideTitle: true
categoryBrowserItemsHideSubTitle: true
categoryBrowserItemsSortTitle: true
deviceBrowserItemsPerRow: 4
deviceBrowserItemsHideTitle: false
deviceBrowserItemsHideSubTitle: true
episodeFavBrowserItemsPerRow: 4
episodeFavBrowserItemsHideTitle: true
episodeFavBrowserItemsHideSubTitle: false
episodeFavBrowserItemsSortTitle: true
playlistFavBrowserItemsPerRow: 4
playlistFavBrowserItemsHideTitle: true
playlistFavBrowserItemsHideSubTitle: false
playlistFavBrowserItemsSortTitle: true
recentBrowserItemsPerRow: 4
recentBrowserItemsHideTitle: true
recentBrowserItemsHideSubTitle: false
searchMediaBrowserUseDisplaySettings: false
searchMediaBrowserItemsPerRow: 1
searchMediaBrowserItemsHideTitle: true
searchMediaBrowserItemsHideSubTitle: true
searchMediaBrowserItemsSortTitle: false
searchMediaBrowserSearchLimit: 50
searchMediaBrowserSearchTypes:
- Albums
- Artists
- Playlists
- Tracks
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: 4
showFavBrowserItemsHideTitle: true
showFavBrowserItemsHideSubTitle: true
showFavBrowserItemsSortTitle: true
trackFavBrowserItemsPerRow: 1
trackFavBrowserItemsHideTitle: false
trackFavBrowserItemsHideSubTitle: false
trackFavBrowserItemsSortTitle: false
userPresetBrowserItemsPerRow: 1
userPresetBrowserItemsHideTitle: true
userPresetBrowserItemsHideSubTitle: false
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
customImageUrls:
X_default: /local/images/spotifyplus_card_customimages/default.png
X_empty preset: /local/images/spotifyplus_card_customimages/empty_preset.png
X_Daily Mix 1: https://brands.home-assistant.io/spotifyplus/icon.png
X_playerOffBackground: /local/images/spotifyplus_card_customimages/playerOffBackground.png
X_playerBackground: /local/images/spotifyplus_card_customimages/playerBackground.png
width: fill
playerHeaderHide: true
playerVolumeControlsHidePower: false
playerVolumeControlsHideSlider: true
playerVolumeControlsHideMute: true
footerIconSize: 2rem
playerHeaderBackgroundColor: '#bbbb'
playerHeaderHideProgressBar: true
height: fill
@kbrown01
So the problems are:
If so, it almost sounds like a problem related to how the SP+ card is processing touchpad events for certain responsive type modes / resolutions. What is different about the “PC/tab 2 column view” that you mentioned compared to the other views that work - just the resolution? or are there multiple instances of the card?
You might also try activating card debug logging (in Chrome), to see which selection events are being triggered or if exceptions are being raised. Use the following to enable / disable debug logging for the card.
SpotifyPlus Card Debug Logging Console Commands:
localStorage.setItem('debug', 'spotifyplus-card:*');localStorage.setItem('debug', '');Just to be clear, not #1 … if displays the list. It is all #2.
The difference is not even in the layout, the choice by resolution oddly works on my tablet, just not my PC.
If I click, no song retrieved, no click event.
Now simply selecting a screen mode like a tablet, it works:
Note the second screen I selected a tablet size.
Maybe this video helps to illustrate.
Those buttons just do not function in my PC when viewed full screen.
@kbrown01
The video really helps.
When it’s set to “Dimensions Responsive”, I notice there is a “Desktop” option next to the “100%” zoom drop down. What are the other options in the “Desktop” drop down? Is there a “Desktop (touch)” option? or other options in that dropdown that you can try?
When you switch to the “tablet” mode (that works), it shows "Desktop (touch) option.
Questions:
It’s almost like it’s not firing the “touchend” EventListener, which detects when the mouse (or touch device) releases the press. I had a similar issue with another user in the past, and had to enable the “touchend” support. If memory serves, it was only an issue when the device supported both touch input and mouse input events.
OMFG … that is it. Laptop and touch screen. If I touch the screen it works, mouse does not. Tried disabling touch and still no good. Mouse just not work for that view.
I will note that the behavior is different from everyother card. None exhibit this behavior, all work with a mouse except this.
@kbrown01
Ya, I think I left it that way since he was using a FireHD tablet and was using touch input on it. If I change it for you, I break his setup.
The only way around this would be to add a SP+ card configuration option to prioritize mouse input vs touch input. Let me do some more research into that and I will get back to you.
Thank you! I’ll have a look at it
Please do. Consider the fact that I have dual monitors … one is touch, one not. It will not work on the non-touch one
@kbrown01
My thought was to add a new configuration option that you set on the card to “enable / disable touch screen support”. In your dual monitor scenario, you would have to enable the option for the card on one monitor, and disable the option for the card on the other monitor. Would that be acceptable?
Another thought is to modify the current logic to automatically detect touch support. The problem is that I don’t have a way of testing it to see if it works (no touchscreen devices / no dual monitor support). The only way I know how to test this is via Google Chrome developer tools, switching resolutions and input types.
@kbrown01
Can you try something for me:
using Google Chrome browser …
<ha-control-buttonistouchdevice= attribute? should be true if touch support was detected; otherwise false if mouse support was detected.ha-control-button.button entry in both the “touchstart” and “touchend” listeners?Example on my system, emulating a touch device (FireHD Tablet in this case) - istouchdevice=true, and “touchstart” / “touchend” event listeners defined:
Now do the same set of instructions on the monitor that is working.
istouchdevice= attribute?ha-control-button.button entry in both the “touchstart” and “touchend” listeners?Example on my system, emulating a desktop (non-touch) device - istouchdevice=false, and no “touchstart” / “touchend” event listeners:
I don’t think I can modify the current logic to automatically detect touch support, as it seems to be detecting touch support on one monitor and no touch support on the other monitor. It would HAVE to be a card configuration option to fix this, with the caveat that the appropriate card configuration is always ran on the same monitor. Does that make sense?
@kbrown01
Just released an SP+ card update v1.0.28.
Can you install v1.0.28 and give your test scenario another try? I updated the logic in the touch screen detection method, and would like to see if it fixes your problem.
If it does not fix it, then I will need to implement the manual configuration to enable / disable touch support via card configuration that I mentioned above.
Forgot to mention … the reason why other cards do not exhibit a problem like this is because the SP+ card has to support a “tap and hold” / “long press” in the UI. In other words, there are different actions for when you simply “tap” and image (e.g. play media) and “tap and hold” an image (e.g. display an action ui). Most cards don’t have support for the “tap and hold” logic detection is not needed.
It does not work, same result.
Question I have i have is that all the buttons at the bottom work touch or click, it is only the result of clicking them and the list that displays that does not work. Why are these so different?
I see no ha-control-button elements, only mwc-list-item’s with a class of button:
