Dashboard: Sonos card

Per Find TuneIn content on Sonos Radio | Sonos, “As a result, TuneIn’s legacy service will be removed from Sonos and you will no longer be able to access it.”

I’m not sure if you’re able to see it because you added it before this point? What software are you using to get that list? I’m looking at the Sonos Android app and when choosing “Add Content Service” I see the list of services like you have, but only TuneIn (New) appears - not TuneIn.

Interesting. I added it (actually removed it and readded it, to be sure) via the Windows Sonos app. i don’t see it in the Android app, either.

1 Like

Thank you! I was able to add it via the macOS Sonos app too - I didn’t know these existed. I did have to jump over to my IoT WiFi network, since the Sonos app will only look at the LAN for the network you are on (even if they can talk to each other.)

Now I’m hitting this error when I actually try to stream, but I suspect this is a separate issue and will go do some digging: Failed to perform the action media_player/play_media. Error calling SonosMediaPlayerEntity._play_media on media_player.bedroom: UPnP Error 701 received: Transition not available from 192.168.73.135

EDIT: Hmm, so it still doesn’t show up in “Sonos Favorites” on Android - but does appear in the macOS Sonos app. But trying to actually play it, even from the Sonos app, does not work. However, the radios you provided do work, so I assume something is wrong with this stream (even though I can play it on my computer.) Maybe TuneIn doesn’t support OGG?

EDIT 2: I tried the instructions here to add it to TuneIn (new) and am able to play the stream correctly in the TuneIn app, so it now shows up in the Android Sonos app too, but as soon as I try to play it in Sonos, it fails. What a bummer. Sonos claims to support OGG so I’m not sure what else could be going wrong. Although if this is considered HLS it seems it must be mp3… but I wonder then why it works if I trigger it directly with music_assisstant.play_media… is it transcoding the stream for me?

EDIT 3: Yes, it looks like that is what’s happening:

root     2603458  0.9  0.8 186852 34944 ?        Sl   15:39   0:02      \_ ffmpeg -hide_banner -loglevel info -nostats -ignore_unknown -protocol_whitelist file,hls,http,https,tcp,tls,crypto,pipe,data,fd,rtp,udp,concat -ac 2 -channel_layout stereo -ar 48000 -acodec pcm_f32le -f f32le -i - -af alimiter=limit=-2dB:level=false:asc=true,aresample=resampler=soxr:precision=30:osf=s16:dither_method=triangular_hp -ac 2 -channel_layout stereo -sample_fmt s16 -ar 48000 -f flac -compression_level 0 -
root     2603459  2.5  0.7 177512 29284 ?        Sl   15:39   0:07      \_ ffmpeg -hide_banner -loglevel info -nostats -ignore_unknown -protocol_whitelist file,hls,http,https,tcp,tls,crypto,pipe,data,fd,rtp,udp,concat -reconnect 1 -reconnect_delay_max 30 -reconnect_streamed 1 -reconnect_on_network_error 1 -reconnect_on_http_error 5xx,4xx -i https://radio.darkscience.net:8443/stream.ogg -af volume=2.6dB -ac 2 -channel_layout stereo -ar 48000 -acodec pcm_f32le -f f32le -

So is there any way to get Music Assistant sources into the Sonos card? If not, I suppose I will just add a custom button near the Sonos card.

Any suggestions on how to expose this.activePlayer as a sensor returning the media_player.entity_id?

Use case is driving logic in the front end. For example, the Speaker Controls below would show for the activePlayer. Groups might be a little complicated.

edit: I can’t use state as each Sonos speaker could be playing something different.

card_mod:
style:
sonos-player$ sonos-player-controls$: |
.audio-input-format > div {
color: white !important;
font-size: 13px !important;
background: transparent !important;
}
After the upgrade to newest Sonos card the above does not work

card_mod:
  style:
    sonos-player$ sonos-player-header$: |
      .audio-input-format {
        color: white !important;
        font-size: 13px !important;
        background: transparent !important;
      }

PunxaPhil
image

Is there any way to change the background color of the songs from gray to transparent? And the text to white? Thank you very much in advance for this great work.

Have a go at this one! Release v10.0.0-beta1 · punxaphil/custom-sonos-card · GitHub
(make sure to read the breaking changes note)


PunxaPhil
image

Hi Friend, After trying many of the new features (I tried the entire list), many of them still aren’t working, such as the ones I mentioned earlier regarding the queue. Here’s the link: feat: add configuration options for queue item background and text colors. I assume the options are these three:

  1. queueTitle: Songs # default is ‘Play Queue’. Use this to change the title for the queue section.

  2. queueItemBackgroundColor: ‘#ff0000’ # Use this to set a custom background color for queue items.

  3. queueItemTextColor: ‘#ffffff’ # Use this to set a custom text color for queue items.

I have Beta Version 2, in case that was a problem. I don’t know if I’m doing something wrong or if it’s just because it’s still in testing that it doesn’t work. In any case, some slightly clearer instructions wouldn’t hurt, not just for expert users but for anyone who wants to get to know this incredible card.Thanks, and let me know what you think.

Ok, indeed updating to the 10 beta breaks it. Favorites gone, no volume and maybe more.

Any guidance on migrating the old config to the new one without deepdiving?

I see now that the release notes for beta 2 wasn’t properly updated. I apologize for this.
It’s been updated now: Release v10.0.0-beta2 · punxaphil/custom-sonos-card · GitHub
Please read the notes, and let me know if you have further questions!

1 Like

The release notes also include a link to BREAKING_CHANGES.md, which amongst other things has a migration guide.

1 Like

Phil

On the Media Player page:

It would be nice to use a group name (such as “All Speakers”, or “Upstairs Speakers”, whatever) instead of a list of physical speakers displayed on this page - if I add more to the house, this list would start to look ugly.

Also, because my chime_tts announcements are made to all the Sonos speakers throughout the day, it would be nice to be able to hide the ‘last thing played’. (Clearly, when actively playing a music track, then such a display is desirable, but if not actively playing then perhaps nothing should be displayed.) Don’t know if this is possible.

– Darrell

1 Like

After some testing, many things aren’t working for me, such as the queue colors. I’m not sure if I’m misinterpreting it. I’ve tried network, RGBA, etc., and nothing works. Let me know what you think. Cheers.

type: custom:sonos-card
heightPercentage: 130
widthPercentage: 90
sections:
  - queue
  - player
  - grouping
  - favorites
  - groups
predefinedGroups:
  - name: Habitaciones
    entities:
      - media_player.bano_rojo
      - media_player.bano_negro
      - media_player.habitacion_blanca
      - media_player.habitacion_negra
      - media_player.estudio
  - name: Planta Alta
    entities:
      - media_player.bano_rojo
      - media_player.bano_negro
      - media_player.habitacion_blanca
      - media_player.habitacion_negra
      - media_player.estudio
      - media_player.salon
  - name: Planta Baja
    entities:
      - media_player.bano_blanco
      - media_player.entrada
      - media_player.bodega
sectionButtonIconSize: 3
sectionButtonIcons:
  player: phu:goplay
  favorites: phu:spotify
  groups: mdi:speaker-wireless
  grouping: phu:sonos
  volumes: mdi:volume-high
  queue: mdi:view-list
groupingButtonIcons:
  predefinedGroup: phu:sonos-one
  joinAll: mdi:plus
  unJoinAll: mdi:minus
player:
  artworkAsBackground: false
  artworkAsBackgroundBlur: 70
  artworkMinHeight: 25
  backgroundOverlayColor: transparent
  controlsAndHeaderBackgroundOpacity: 10
  controlsColor: var(--gray800)
  controlsLargeIcons: false
  controlsMargin: 30px
  fallbackArtwork: false
  fastForwardAndRewindStepSizeSeconds: 3
  headerEntityFontSize: 1.5
  headerSongFontSize: 1
  hideArtistAlbum: false
  hideArtwork: false
  hideControls: false
  hideControlNextTrackButton: false
  hideControlPowerButton: true
  hideControlPrevTrackButton: false
  hideControlRepeatButton: true
  hideControlShuffleButton: true
  hideEntityName: false
  hideHeader: false
  hidePlaylist: true
  hideVolume: false
  hideVolumeMuteButton: true
  hideVolumePercentage: true
  labelWhenNoMediaIsSelected: SONOS
  mediaArtworkOverrides:
    - mediaTitleEquals: TV
      imageUrl: /local/fondo/sonos1.gif
    - ifMissing: true
      imageUrl: /local/fondo/sonos1.gif
  showAudioInputFormat: true
  showBrowseMediaButton: false
  showChannel: true
  showFastForwardAndRewindButtons: true
  showSource: true
  showVolumeUpAndDownButtons: false
  stopInsteadOfPause: false
  volumeSliderHeight: 1
favorites:
  hideBrowseMediaButton: true
  hideHeader: true
  hideTitleForThumbnailIcons: false
  iconBorder: 1px solid white
  iconPadding: 1.5
  iconTitleBackgroundColor: var(--gray100)
  iconTitleColor: rgba(255,0,0,0.3)
  itemsPerRow: 4
  numberToShow: 30
  title: Favoritos
groups: null
grouping:
  buttonColor: rgba(255,2,2,0.3)
  buttonFontSize: 0.5
  buttonIcons:
    Habitaciones: phu:sonos-one
  disableMainSpeakers: false
  dontSortMembersOnTop: false
  dontSwitchPlayer: ture
  hideUngroupAllButtons: true
  skipApplyButton: false
  title: hola
queue:
  itemBackgroundColor: rgba(205,2,2,0.3)
  itemTextColor: rgba(255,2,2,0.3)
  title: hola

Please consider reading the docs before asking :pray:
For your questions:

  1. Sure, just use predefined groups, then that name will show instead of all players.
  2. Use mediaTitleRegexToReplace and mediaTitleReplacement

What else is not working?
Just remember that this is a beta release, and If you are not up for testing something not fully ready for final release, then stick to v9.

The most important now for me is this:
queue:
itemBackgroundColor: rgba(205,2,2,0.3)
itemTextColor: rgba(255,2,2,0.3)

Let’s continue discussions in the GitHub issue you created

1 Like

Hello. beautiful dashboard. can you share the code? Thank you

After hours of work, I have almost everything ready for my card. But there’s something I haven’t understood how to declare: the icons on the grouping card. I need to change them to phu:sonos-one. Could you help me? Thanks in advance.