Dashboard: Sonos card

win88ice2004 · April 9, 2022, 4:36am

Just wanted to drop by and say thank you for this card! Absolutely sensational work!

PunxsutawneyPhil · April 9, 2022, 5:41am

You are welcome! And thanks for the kind words

Sergeantpup · April 10, 2022, 10:50pm

Now that I’m primarily using this SONOS card, I’ve become more reliant on playlists/favorites. I spent some time playing with the settings today that give a more ‘favorites’ focused layout that still looks good on mobile while providing more usable screen real estate on desktop and this is what I came up with. Posting it here because in case it helps somebody else:

layout:
  mobileThresholdPx: 500
  groups:
    width: 20%
    mobileWidth: 100%
  players:
    width: 30%
    mobileWidth: 100%
  favorites:
    width: 50%
    mobileWidth: 100%
  favorite:
    width: 15%
    mobileWidth: 25%

PunxsutawneyPhil · April 11, 2022, 7:23pm

Nice! I’ll add it to the readme

Sergeantpup · April 12, 2022, 4:59am

I got deeper into this tonight and I’m fairly certain I’m picking up on some weirdness with the settings.

There is DEFINITELY something wrong with the media label. I knew it looked weighted different but now I know for sure when you make changes, changes apply to the groups and grouping headers. Not sure if that was intentional but I’ve now noticed it on more than one occasion.

As I type this after hours of frustrating behavior that wasn’t yielding me the stylings I expected on desktop, I just realized they work fine on my phone (that’s good to know but something I’ll have to look into tomorrow).

…now that I realized my changes could’ve been working all this time, I need to go back and retest. But that doesn’t negate the Media label. I’ll look into it more tomorrow after more testing.

I’ll provide more details either supporting or refuting the other behaviors I observed tonight (but NOW I realize could’ve been working all along).

PunxsutawneyPhil · April 13, 2022, 11:55am

I can’t see any differences when I look at it, so please provide some more details and we’ll sort it out

Sergeantpup · April 13, 2022, 1:31pm

No worries. I realized I sounded a bit delirious and perhaps I was after two days of bug hunting and formally theming my entire HA (correctly).

The other bugs in the CSS formatting that I thought were causing issues were in fact user error with other settings I had elsewhere (and why it appeared to work correctly on mobile). So for the purpose of this response, we’re just going to talk about the 1 issue:

When I change the settings under title, it changes the settings of titles for all except media. Is that intentional? The fontweight behaves the same way.

Am I supposed to put changes in two places and I’m just not reading between the lines well enough?

ImNotSpam · April 13, 2022, 1:52pm

Thanks for the work on this. I couldn’t have come up with anything nearly this functional.

Two questions:

-Is there a way to adjust the location of the player footer within the player? On a fire 8" with fully kiosk, it shows up right in the middle of the player card. On phones and computers, it displays at the bottom like it should. Have no idea how to get / upload a screenshot from my tablet, so here’s a picture of the screen, lol.

-Whenever I activate the sonos view in my dashboard, I get a “login attempt failed” error in home assistant. I still have access and everything works. Has anyone else seen this behavior? Again, this only happens on the tablet, not on a phone or computer. Here is my code.

  - title: SONOS
    path: sonos  
    type: panel
    icon: ''
    badges: []
    cards:
      - type: custom:custom-sonos-card
        styles:
          button-section:
            backgroundColor: rgba(30, 30, 30, 0.5)
            border: 1px solid gray
          ha-card:
            background: none
            border: none
          player-footer:
            backgroundColor: rgb(30, 30, 30)
          title:
            color: rgb(220, 220, 220)
          group-speaker:
            color: rgb(220, 220, 220)
          group-speakers:
            color: rgb(220, 220, 220)
          member:
            color: rgb(220, 220, 220)
          media-button-title:
            color: rgb(30, 30, 30)
            font-size: 0.75rem
          player-artist-album:
            color: rgb(0, 0, 0)
        name: ''
        groupsTitle: ''
        groupingTitle: ''
        mediaTitle: ''
        headerImage: ''
        shuffleFavorites: false
        noMediaText: No media selected
        allVolumesText: All volumes
        entityNameRegexToReplace: 'SONOS '
        entityNameReplacement: ''
        layout:
          mobileThresholdPx: 500
          groups:
            width: 33%
            mobileWidth: 100%
          players:
            width: 33%
            mobileWidth: 100%
          mediaBrowser:
            width: 33%
            mobileWidth: 100%
          mediaItem:
            width: 33%
            mobileWidth: 25%
        mediaArtworkOverrides:
          - ifMissing: true
            imageUrl: https://cdn-icons-png.flaticon.com/512/651/651758.png
          - mediaTitleEquals: TV
            imageUrl: https://cdn-icons-png.flaticon.com/512/716/716429.png
            sizePercentage: 40
          - mediaTitleEquals: p4malmo-aac-192
            imageUrl: >-
              https://mytuner.global.ssl.fastly.net/media/tvos_radios/2BDTPrpMbn_cTdteqo.jpg
        #selectedPlayer: media_player.sonos_kitchen
        customSources:
          media_player.tv:
            - title: TV
              thumbnail: https://cdn-icons-png.flaticon.com/512/716/716429.png
        customThumbnailIfMissing:
          Ed Sheeran Radio: https://i.scdn.co/image/ab6761610000e5eb4d2f80ceffc6c70a432ccd7c
          Legendary: https://i.scdn.co/image/ab67706f000000027b2e7ee752dc222ff2fd466f
        backgroundBehindButtonSections: true
        hideGroupCurrentTrack: true
        entities:
          - media_player.sonos_jeffs_office
          - media_player.sonos_basement
          - media_player.sonos_dining_room
          - media_player.sonos_garage
          - media_player.sonos_kitchen
          - media_player.sonos_lindas_office
          - media_player.sonos_living_room
          - media_player.sonos_master_bedroom

Last thing. The player footer displays correctly on the tablet if I use firefox. However, the “login attempt failed” error still comes up in home assistant.

EDIT: Partially solved. I was able to resolve the issue of the player footer being too high. If anyone else experiences this, make sure you update android webview to the latest version in the app store. That fixed it for me. Will report back if I can figure out the “login attempt failed thing”.
EDIT 2: The Login Attempt Failed error disappeared with the latest HA update. Nice when problems solve themselves.

srivers12 · April 17, 2022, 12:58am

I am still a newbie so this may seem like a very simple question for this topic but how does one add to the media options? I have a couple already listed but not sure how to customize.

Thanks

Sergeantpup · April 17, 2022, 1:21am

When you’re in the SONOS native app and you have a playlist/station/album you want to add to your SONOS Lovelace card, long press the playlist you want and then add to my sonos. You can also add to a sonos playlist depending on what you have setup already. They will show up on your Lovelace sonos card almost instantly.

Going to the star icon in the sonos app will aggregate these playlists for you so you can edit them easily.

srivers12 · April 17, 2022, 2:21am

Thanks for the reply

Mine is still having its challenges. In the Sonos app playlists: I have some that are Sonos Playlists and others that are Apple Music playlists. They are both under playlists in the home (star) screen. However only the Apple ones show in Home Assist. None of the Sonos Playlists are showing. I made sure that the Sonos app did not need an update.

I can recreate them in Apple Music and only use the “Add Playlist to My Sonos” option. Work arounds are never ideal. Still not sure why the others do not show.

Sergeantpup · April 17, 2022, 2:47am

Should definitely show both; Mine shows both. I have apple, Amazon, sonos playlistz, and pandora music.

PunxsutawneyPhil · April 19, 2022, 6:54pm

I can’t reproduce what you show in that screenshot. For me “Media” changes along with “Groups” and “Grouping”.
If you still have this problem, can you create an issue in Github?

PunxsutawneyPhil · April 19, 2022, 6:56pm

Not sure I can help you here. Sounds like you are using a browser that is hard to support.

Feel free to play around with the CSS styling though, maybe that can solve it for you. GitHub - johanfrick/custom-sonos-card: Home Assistant custom lovelace sonos card

wmn79 · April 19, 2022, 8:29pm

@PunxsutawneyPhil: Thanks for the great player card you’ve created! Just checking if I am missing something but is it possible to show the track progress or is that hard to create? So a progress bar or just the minutes it is in the track and the minutes it still lasts?

Sergeantpup · April 19, 2022, 11:08pm

I reproduced it on another computer and submitted a ticket but then realized the issue is only happening in preview. When you save the card, everything saves correctly. It’s just a display issue in the preview. Sorry about that. I closed the ticket.

ImNotSpam · April 19, 2022, 11:35pm

Ok. I need to know how you guys are modifying the player buttons. I have a small screen. So poking the pause/play, fwd, back buttons is a precise maneuver. Almost need a stylus. I’ve seen images on here where those buttons have been moved to the middle of the player and are larger. I’m looking to do that and increase the size of the ones in the player footer. Looked through this thread and the github and didn’t see it. How can I do this?

EDIT: This is what I’m referring to: