Dashboard: Sonos card

nbanbury · August 25, 2022, 4:17pm

Hi there. I love this card! Thanks so much for creating it.

Can you tell me how I change the colour of the round button on the volume slider? I can’t work it out! I just want to set it to white. Here’s my design if you’re interested:

Thanks in advance!

PunxsutawneyPhil · August 25, 2022, 6:54pm

No idea actually. I’m not sure it’s possible.

nbanbury · August 26, 2022, 7:06am

Thanks - strangely when I view it on my iPad the button is white…but on desktop it’s blue! No big deal, thanks for replying.

PunxsutawneyPhil · August 26, 2022, 7:35am

Yes, that is controlled by the browser and device type. If we want to change it you need to “hack” it specific ways for every browser/device type.

nbanbury · August 26, 2022, 9:27am

Thanks - not a deal breaker so I’ll leave it as is

cowboysdude · August 26, 2022, 10:19pm

I am having an issue with Brave browser…when you start playing music the screen starts shaking … no idea what causes that.

ShooterQ · August 27, 2022, 9:00pm

Hello, thank you @PunxsutawneyPhil for creating this. It’s been wonderful.

Does anyone have any advice for making the volume slider larger and give some space between it and the playback controls? I tried to make the player larger but it didn’t seen to have much effect. I have family members with larger fingers and I’m trying to make our dedicated Home Assistant iPad easier to use. Sometimes we accidentally hit the playback buttons while trying to adjust volume and other times we just miss the volume slider altogether. Works perfect on PC with a mouse, though.

PunxsutawneyPhil · August 29, 2022, 6:57am

styles:
  player-volume-range:
    height: 2rem

PunxaPhil - I like coffee

PunxsutawneyPhil · August 29, 2022, 6:59am

Seen it a few times, but usually just in edit mode. Not sure what to do actually. You could try and play around with sizes with the different elements (using layout), or dig even deeper by making adjustments in css (using styles).
Example:

layout:
  mobileThresholdPx: 500 
  groups:
    width: '20%' 
    mobileWidth: '80%' 
  players:
    width: '20%' 
    mobileWidth: '80%' 
  mediaBrowser:
    width: '20%' 
    mobileWidth: '80%' 
  mediaItem:
    width: '20%' 
    mobileWidth: '25%'

PunxsutawneyPhil · August 29, 2022, 7:01am

Good suggestion, could you add a feature request in Github?

abplus · August 29, 2022, 1:35pm

Will do. Do you mean in the ideas section? Discussions · johanfrick/custom-sonos-card · GitHub

ShooterQ · August 29, 2022, 2:12pm

Thanks again. Working well. I can’t get the coffee payment to go through but I’ll try again later.

What is the plan for “add support for non-Sonos players.” Something like what fork-daapd does?

PunxsutawneyPhil · August 29, 2022, 3:24pm

I have some ideas on how to solve it. I’ll share more once we get closer to the goal

raglandan · August 31, 2022, 11:57pm

Did you find a way to do this? I also need a way to navigate back to the dashboard home page.

PunxsutawneyPhil · September 4, 2022, 10:21pm

With v5.8.0, it is now possible to add other cards to your Sonos Card panel using the new config option: singleSectionMode.

See https://github.com/johanfrick/custom-sonos-card#single-section-mode on how to use it.

FYI: @sdholden28 @raglandan @cowboysdude @abplus

PunxaPhil - I like coffee

cowboysdude · September 5, 2022, 10:16am

Not sure what I’m doing wrong but I have it as basic as I can get it like this, this is just a test →

- type: horizontal-stack
  cards:
      - type: custom:custom-sonos-card
        singleSectionMode: player

And it’s still showing the entire player

sonos

My actual config is like this but still not working →

- type: custom:custom-sonos-card
        allVolumesText: "All volumes"
        entityNameRegexToReplace: "SONOS "
        entityNameReplacement: ""
        groupsTitle: "My Speakers"
        groupingTitle: "Locations"
        mediaTitle: "Stations"
        noMediaText: "What would you like to hear?"
        singleSectionMode: player
        layout:
          mobileThresholdPx: 750
          groups:
            width: 20%
            mobileWidth: 90%
          players:
            width: 20%
            mobileWidth: 90%
          mediaItems:
            name: Favorites
            width: 60%
            mobileWidth: 70%
          mediaItem:
            width: 28%
            mobileWidth: 80%
        selectedPlayer: media_player.sonos_pair
        backgroundBehindButtonSections: true
        skipAdditionalPlayerSwitches: false
        groups:
          order: 1
        players:
          order: 2
        player-body:
          border: 5px black
        player-song:
          color: "#000000"
        font-family: Times New Roman
        font-weight: 900
        mediaBrowser:
          order: 0
        title:
          fontSize: 26px
          fontWeight: lighter
          textTransform: uppercase
          color: white

PunxsutawneyPhil · September 5, 2022, 10:47am

Very strange. Could it be some browser caching problem?

Just for debugging, create a new dashboard without all that other config you have and add the example config from the documentation (https://github.com/johanfrick/custom-sonos-card#single-section-mode), and see if that works.

If it doesn’t work, Try clearing the browser cache for your home assistant page. It should not be needed, but let’s try anyway.

cowboysdude · September 5, 2022, 10:50am

I cleared the cache made sure I had the right sonos card version and used the example config…
here is what I get…

Not recognizing singleSectionMode

cowboysdude · September 5, 2022, 11:08am

OK so I solved it!
On the integerations page you have to turn on show beta versions…as it turns out I only had 5.7 installed NOT 5.8.

Once I did that NOW it’s working at it should!!!

Thank you!

abplus · September 5, 2022, 11:24am

Hi - I’m having the same problem you were having. I can’t see where the show beta versions is, can you share please? Thanks.