Dashboard: Sonos card

Share your Projects! Dashboards & Frontend
656

I have one more question, is it possible to add the option to enable shuffle mode with ‘shuffle: true / shuffle: false’ when using this button?

here code ?

predefinedGroups: # defaults to empty
  - name: Inside
    entities:
      - media_player.matrum
      - media_player.hall
  - name: Kök&Hall
    media: Legendary # If you want to start playing a specific favorite when grouping 
    entities: # Use below format if you want to set the volume of the speakers when grouping
    shuffel: true
      - player: media_player.kok
        volume: 10
      - player: media_player.hall
        volume: 5
  - name: Sleeproom
    media: Legendary # If you want to start playing a specific favorite when grouping 
    entities: # Use below format if you want to set the volume of the speakers when grouping
    shuffel: false
      - player: media_player.kok
        volume: 10
      - player: media_player.hall
        volume: 5
657

I would love a card that looks just like this but for google cast speakers wow

658

Many thanks to all who post here! :grinning:

I use Mushrom Cards for my dashboards and wanted to style my Sonos Card to be similar. Below is the end result based on info in this thread and using Card Mod. Happy to help where I can if anyone want a similar UI.

screenshot-homeassistant.local_8123-2023.09.21-21_59_03
screenshot-homeassistant.local_8123-2023.09.21-21_59_031536×1152 189 KB

6 Likes
659

Nice! Could you please share your code. Have been thinking about restyling my dashboard too for some time now. Using mushroom too.

660

I guess this is how I could get a similar card for google cast speakers instead of sonos! Would love the code please.

661

Would love to see the code!

662

The Card Mod code below is by each secion card in the screenshot:

  1. Groups
  2. Player
  3. Grouping

I’m not an expert using Card Mod, so am sure some it can be improved (but it work for my setup).

Groups

card_mod:
  style:
    ha-card.type-custom-sonos-card>div.content>sonos-groups$mwc-list>sonos-group:
      $: |
        mwc-list-item[hasmeta] {
          background: var(--theme-card-background-glass);
          border: 1px solid var(--theme-card-border-glass);
          height: 61.4468px!important;
          border-radius: var(--theme-card-border-radius);
          margin: 12px 0px 0px 0px;
        }
        mwc-list-item[activated] {
          --mdc-ripple-color: none;
        }
        mwc-list-item>div>div>span:nth-child(1) {
          color: var(--primary-text-color);
          font-size: 14px;
          font-weight: 700;
          line-height: 15.4px;
        }
        mwc-list-item>div>div>span:nth-child(2) {
          color: var(--secondary-text-color);
          font-size: 12px;
          font-weight: 700;
          line-height: 13.2px;
        }
        mwc-list-item > div > ha-icon {
          color: rgb(var(--mush-rgb-disabled));
          background: rgba(var(--mush-rgb-disabled), 0.2);
          --mdc-icon-size: 30px;
          min-width: 40px;
          min-height: 40px;
          max-width: 40px;
          max-height: 40px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        mwc-list-item[activated] > div > ha-icon {
          color: rgb(var(--mush-rgb-blue));
          background: rgba(var(--mush-rgb-blue), 0.2);
        }
    ha-card.type-custom-sonos-card>div.content>sonos-groups$mwc-list>sonos-group:nth-child(1)$: |
      mwc-list-item[hasmeta] {
        margin-top: 4px;
      }
    .: |
      ha-card {
        background: none;
        border: none;
        --accent-color: none;
        --primary-color: var(--primary-text-color);
        --secondary-background-color: none;
      }

Player

card_mod:
  style:
    sonos-player:
      $:
        sonos-player-header$: |
          .info .song {
            color: var(--primary-text-color);
            font-weight: 600;
            font-size: 20px;
          }
    .: |
      ha-card {
        --primary-color: none;
        --secondary-background-color: none;
      }

Grouping

card_mod:
  style:
    sonos-grouping:
      $: |
        ha-control-button {
          height: 36px;
          width: auto;
          min-width: 36px;
          border-width: 1px;
          border-color: var(--theme-card-border-glass);
          --control-button-background-color: var(--theme-card-background-glass)!important;
          --mdc-ripple-color: none;
          --control-button-background-opacity: 1;
          --control-button-border-radius: 18px;
        }
        ha-control-button span {
          color: var(--primary-text-color);
          line-height: 14.4px;
          font-weight: 700;
          font-size: 14px;
        }
        ha-control-button ha-icon {
          color: var(--primary-color);
          
        }
        mwc-list.list>mwc-list-item {
          background: var(--theme-card-background-glass);
          border: 1px solid var(--theme-card-border-glass);
          height: 61.4468px;
          border-radius: var(--theme-card-border-radius);
          margin: 12px 2px 0px 2px;
        }
        mwc-list>mwc-list-item:nth-child(1) {
          margin-top: 0;
        }
        mwc-list.list>mwc-list-item[activated] {
          --mdc-ripple-color: none;
        }
        mwc-list.list>mwc-list-item>ha-icon {
          margin-right: 10px;
          display: flex;
          color: rgb(var(--mush-rgb-disabled));
          background-color: rgba(var(--mush-rgb-disabled), 0.2);
          min-width: 40px;
          min-height: 40px;
          border-radius: 50%;
          opacity: 1;
          align-items: center;
          justify-content: center;
        }
        mwc-list.list>mwc-list-item[activated]>ha-icon {
          color: rgb(var(--mush-rgb-blue));
          background: rgba(var(--mush-rgb-blue), 0.2);
        }
        mwc-list.list>mwc-list-item>span {
          opacity: 1;
          color: var(--primary-text-color);
        }
    div.content>sonos-grouping$mwc-list.list>mwc-list-item:
      $: |
        span.mdc-deprecated-list-item__text>slot {
          display: flex;
          align-items: center;
        }
    .: |
      ha-card {
        background: none;
        border-color: transparent;
        --accent-color: none;
        --primary-color: var(--primary-text-color);
        --secondary-background-color: none;
      }
2 Likes
663

Is anyway to resize the volume slider height?

664

You need card_mod for it. Example:

type: custom:sonos-card
card_mod:
  style:
    .: |
    sonos-player$ sonos-player-controls$ sonos-volume$: |
      ha-control-slider {
        height: 10px;
      }
      ha-icon-button {
        --mdc-icon-button-size: 2rem !important;
        --mdc-icon-size: 1.5rem !important;
      }
665

I’ve been using Sonoscard for a while, but since updating to 6.7.1 the artwork has decided to fill the entire available space, and not be a neatly presented square tile.

image
image744×842 125 KB

This persists across multiple devices (web, mobile, private browsing) and I’ve made no configuration changes in code / YAML beyond creating groups via the UI.

I’ve also tried reverting to an older version, but the issue remains.

Any ideas where to look?

666

Looks like we’ve got a bug! Thanks for finding it. Would you care reporting it in github?

667

Nevermind filing the bug, I’ve already fixed it now: Release v6.7.2 · punxaphil/custom-sonos-card · GitHub

2 Likes
668

:slight_smile:

Confirmed that fixed the problem. All back to normal now! Thanks,

1 Like
669

I’m still seeing this issue. I’ve cleared website data and reloaded the page, but when using google chrome, the artwork is still cropped top and bottom when filling the width. What’s weird is the iOS companion app has always appeared fine even before this recent release.

Issue resolved itself by having the card open and changing the song playing by Sonos. Not a browser cache issue, but something between the card and Sonos integration.

670

I haven’t messed with this card in a minute but I just came to say excellent upgrade/implementation of the volume and groupings. I know this happened a while ago but today was the first time I really used it and it was smooth as butter.

1 Like
671

Updated: released v6.9 with feature: make it possible to exclude items in predefined group entities list

v6.8 out in pre-release mode. Would highly appreciate anyone wanting to try it out, to validate it before releasing it :pray:

v6.8

Repository: johanfrick/custom-sonos-card · Tag: v6.8 · Commit: b2b1f4d · Released by: github-actions[bot]

🚀 Features

🐛 Fixes

672

Hi guys, i’m very sorry if it’s not the correct place to ask this or if it’s been answered already, i’m struggling finding the informations I need in those 656 messages ><

i see a lot of you have resized the cover art size, i don’t understand how you did it.
it is a settings in the card itself or is it something in a more global scale inside a theme or something ?

thanks in advance for you help/time.

Btw, PunxsutawneyPhil thanks a lot for this fantastic card ! <3

1 Like
673

Hello, is it a way to reduce this two section ?

Capture d’écran 2023-10-06 à 12.11.06
Capture d’écran 2023-10-06 à 12.11.06814×698 74 KB

674

Apologies if this has been asked before, but is there a way to change the main icons? I’m a HA newbie and can’t quite figure it out!

Screen Shot 2023-10-06 at 8.42.25 AM
Screen Shot 2023-10-06 at 8.42.25 AM932×172 1.94 KB

675

This card is causing my HA instance to crash. Not quite sure what it is but it’s to do with the media-browser element.

I have the following configure:

  - type: custom:sonos-card
    sections:
      - media browser
    mediaBrowserItemsPerRow: 4
    mediaBrowserTitlesToIgnore:
      - My media
      - Artists
      - Albums
      - Tracks
      - Recently played
      - Top Artists
      - Top Tracks
      - Categories
      - Featured Playlists
      - New Releases
      - UniFi Protect
    topFavorites:
      - good energy
      - Chilled Hits
      - Dog Calming Music
      - Kitchen Swagger
    numberOfFavoritesToShow: 5
    title: Music Selection

Each time I move through the menus it suddenly freezes up my entire HA (usually with 4-5 clicks). Only way I can then get it going again is to hard restart the Pi that HA is running on.

Great card though so absolutely not a criticism, just wanted to draw your attention to a potential issue Phil. Let me know if I can do anything to help?

Update: The following appears in the logs;

Updating systemmonitor took longer than the scheduled update interval 0:00:15

14:35:08 – (WARNING) systemmonitor - message first occurred at 14:34:53 and shows up 2 times
Update of media_player.spotify_house is taking over 10 seconds

14:35:07 – (WARNING) helpers/entity.py - message first occurred at 14:34:50 and shows up 3 times
Spotify Page - Update Media Players: Already running

14:35:00 – (WARNING) Automation - message first occurred at 14:34:50 and shows up 2 times

It then just goes into a constant loop and my entire HA instance freezes up - Can’t even download the full logs beyond this point.