How to change music player background based on state? (JSON/CSS)

🛎️ Get Help
1

Dear Community,

I want the background image of my music player (sonos) change according to it's state. I've figured out how I can change colors depending on the state.
But I can't seem to get it to work with images, I even tried different kind of attributes.

JSON:

Change background COLOR of music player based on state (Works) 
{
  "template": "music-player",
  "bgColor": "rgb(225,0,225)",
  "state": "playing"
},
{
  "template": "music-player",
  "bgColor": "rgb(225,225,0)",
  "state": "paused"
},
{
  "template": "music-player",
  "bgColor": "rgb(225,0,0)",
  "state": "stopped"
},
Change background IMAGE of music player based on state (Doesn't work) 
{
  "template": "music-player",
  "bgImage": "https://media.tenor.com/images/77eed7166cacfada922cf45e47727080/tenor.gif",
  "state": "playing"
},
{
  "template": "music-player",
  "background": "https://media.tenor.com/images/77eed7166cacfada922cf45e47727080/tenor.gif",
  "state": "paused"
},
{
  "template": "music-player",
  "background-image": "https://media.tenor.com/images/77eed7166cacfada922cf45e47727080/tenor.gif",
  "state": "stopped"
},

Why is that? Or what am I doing wrong?
I've also thought about an overlay-tile (well, rather an underlay-tile with an image) and then making the music player transparent. But that's not what I want.

To sum it up:

  • When the Music player pause/stop: background image A.
  • When the Music player is playing: background image B.
2

Not sure this one will work but here it is.

1 Like
3

@Navat604 Hmm, I think that's a bit overkill for something that should be possible with only CSS. And it says it only works locally. Which won't work for me.
BUT I do find it really interesting! I'm definitely going to give that a try, Thank you so much!

I've researched a bit more today and I do get it to change now! But it's a pain in the :peach: to keep everything as it is. The background doesn't cover the whole tile and any adjustment makes another element behave differently. Guess I need more research (and time).

This is what I have now

div .music-player.playing {
background-image: url('https://i.pinimg.com/originals/01/71/5d/01715d903f85b151035284ed601fdfd0.gif') !important;
background-size: cover;
background-repeat: no-repeat;
height: 100% !important;
width: 28em !important;
background-position: top;
}
div .music-player.stopped {
background-color: rgba(0,0,0,0.25);
background-size: cover;
background-repeat: no-repeat;
height: 100% !important;
width: 28em !important;
background-position: center;
}
div .music-player.transitioning {
background-image: url('https://i.pinimg.com/originals/a2/dc/96/a2dc9668f2cf170fe3efeb263128b0e7.gif') !important;
background-size: cover;
background-repeat: no-repeat;
height: 100% !important;
width: 28em !important;
background-position: center;
}

I even figured out how I can put a "loading" image, kinda cool! :nerd_face:

4

Made it work! Not as elegant as it could be, but here it is:
(Tile-14 is also the music player).

Change music player background based on current state (CSS)

div .music-player.playing {
background-image: url('https://i.pinimg.com/originals/01/71/5d/01715d903f85b151035284ed601fdfd0.gif') !important;
background-size: cover;
background-repeat: no-repeat;
position: static;
top: 0px !important;
left: 0px !important;
width: 340px;
height: 132px;

}
div .music-player.stopped {
background-color: rgba(0,0,0,0.25);
background-size: cover;
background-repeat: no-repeat;
position: relative !important;
top: 0 !important;
left: 0px !important;
width: 340px !important;
height: 228px !important;
}
div .music-player.transitioning {
background-image: url('https://i.pinimg.com/originals/a2/dc/96/a2dc9668f2cf170fe3efeb263128b0e7.gif') !important;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: static;
top: 0;
left: 0;
width: 340px;
height: 132px;
}

#tile-14 {
background-color: rgba(0,0,0,0);
}
#tile-14 .tile-title {
visibility: hidden !important;
}
#tile-14 .tile-contents {
top: -4px !important;
left: -4px !important;
}
#tile-14 .material-icons {
font-size: 40px !important;
}
#tile-14 .vue-slider{
font-size: 40px !important;
position: static !important;
margin-top: -50px !important;
color: lightgrey !important;
}