I checked that out but didn’t see where I could edit the layout. (n00b)

Looking at the sonos.css code, it basically does the same thing. Zone and Source are at the top, Artist and Track are on the right. I’d like to make it so that all four are on the side of the Cover Art, which IMO looks cleaner, takes up less space on the screen.

sonos.css

.sonos ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.sonos ul .name,
.sonos ul .art {
  display: inline-block;
  vertical-align: middle;
}
.sonos ul .name {
  padding: 0px .25em;
}
.sonos ul .art img {
  height: 100px;
}
.sonos ul .type,
.sonos ul .room {
  font-size: 50%;
  padding: .25em .5em;
}
.sonos ul .song {
	padding: 0px 0px;
	position: relative;
}
.sonos ul.flip {
  direction: rtl;
}

Hello, I have the MMM-Sonos module installed and working. I loaded a custom .css and the text layout is working my OCD. I have no programming skills but have managed to change the font size and things to my liking. The one thing I can’t resolve are the gaps between Source and Artist. Below pics are actual vs what I want. What is missing from the .css? Thanks!

Actual:

What I want:

My custom.css:

/* Sonos --------------------------------------------*/
.sonos ul .art img {
    height: 150px;
    width: 150px;
    border-radius: 0%;
    margin: 4px 4px;
    border: 0px solid #FFF;
}
.sonos ul .type {
    font-size: 16px;
    padding: 0px 0px;
    line-height: 16px;
    width: 300px;
}
.sonos ul .room {
    font-size: 20px;
    padding: 0px 0px;
    line-height: 20px;
    width: 300px;
}
.sonos ul .song {
    padding: 0px 0px;
    position: relative;
}
.sonos ul .name {
    width: 300px;
    font-size: 16px;
    padding: 0px 0px;
    line-height: 16px;
}
/*---------------------------------------------------*/

I made a few more edits. Removed the border from the cover art, removed the radius from the cover art, removed the drop shadow from the text and icons, changed the album fa-icon to a CD and lastly radiused the progress bar.

I also edited the Spotify logo on startup to a lower opacity.

Total n00b at this. This was fun. :P

@sdetweil said in MMM-Spotify.....Hide blurred background?:

@spoonek these settings should go in custom.css, right? backup is still a good practice

That is good advice. Thanks!

@Bugsounet. I’m learning as I go. Totally logical due to good programming. Many thanks! I dialed it in the way I wanted it. :clinking_beer_mugs: :thumbs_up:

[edit] I will add that anyone tinkering with the .css to backup the original first!!! That is just good practice.

@Bugsounet said in MMM-Spotify.....Hide blurred background?:

wait i will try (before talking nonsense)

in the css file locate: #SPOTIFY_BACKGROUND

add this inside the section: display: none;

Result : no background ;)

Many thanks sir!

Can I also modify the #SPOTIFY_COVER_IMAGE with the following or should I just comment it out?

box-shadow:black 0px 0px 0px 0px;

@Bugsounet said in MMM-Spotify.....Hide blurred background?:

wait i will try (before talking nonsense)

Appreciated. :P

I did find this:

#SPOTIFY_BACKGROUND {
  background-size: cover;
  background-position: center center;
  filter: blur(16px) opacity(90%) grayscale(33%);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}

and…

#SPOTIFY_COVER_IMAGE {
  width:100%;
  height:100%;
  border-radius:10px;
  box-shadow:black 1px 1px 1px 1px;
}

Greetings@Bugsounet, thanks again for the help yesterday.

I was wondering if there is a way to hide the blurred background album art when the music is playing. Also, the shadow frame for the album art as well. Is that something in a CSS I can manipulate? Many thanks!

@Bugsounet said in MMM-Spotify:

@spoonek said in MMM-Spotify:

Error: listen EADDRINUSE: address already in use :::8888

it’s mean that the port 8888 il used by another app… free this port temporarily and retry

I just started over from scratch and now was able to get the authorization webpage login to work.

@Bugsounet said in MMM-Spotify:

when it want to works ;)

pi@raspberrypi:~/MagicMirror/modules/MMM-Spotify $ node first_auth.js
[SPOTIFY:ERROR] Token not found! /home/pi/MagicMirror/modules/MMM-Spotify/token.json
[SPOTIFY] Spotify v1.0.2 Initialized…
[SPOTIFY_AUTH] Opening the browser for authentication on Spotify…
events.js:174
throw er; // Unhandled ‘error’ event
^

Error: listen EADDRINUSE: address already in use :::8888
at Server.setupListenHandle [as _listen2] (net.js:1280:14)
at listenInCluster (net.js:1328:12)
at Server.listen (net.js:1415:7)
at Function.listen (/home/pi/MagicMirror/modules/MMM-Spotify/node_modules/express/lib/application.js:618:24)
at Spotify.authFlow (/home/pi/MagicMirror/modules/MMM-Spotify/node_modules/@bugsounet/spotify/index.js:310:8)
at Promise (/home/pi/MagicMirror/modules/MMM-Spotify/first_auth.js:20:14)
at new Promise ()
at authorize (/home/pi/MagicMirror/modules/MMM-Spotify/first_auth.js:17:12)
at authorizations (/home/pi/MagicMirror/modules/MMM-Spotify/first_auth.js:33:19)
at Object. (/home/pi/MagicMirror/modules/MMM-Spotify/first_auth.js:40:1)
Emitted ‘error’ event at:
at emitErrorNT (net.js:1307:8)
at process._tickCallback (internal/process/next_tick.js:63:19)
at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

@Bugsounet Good point. I was thinking I needed to reuse my client ID credentials I had already setup for MMM-NowPlayingOnSpotify. DOH! I just created a “New App” on the Spotify Dev page for MMM-Spotify. Should be good to go now.

@Bugsounet said in MMM-Spotify:

if Soptify logo not hidden after start, it’s means :
token missing or token error

you should have in console something like that :

[SPOTIFY:ERROR] USERNAME: [your username]
[SPOTIFY:ERROR] Token Error ! ./[token name].json

@Bugsounet I have this same error. I got the webpage after running node first_auth.js but it said invalid and then I had to CRTL-Z to stop it. Now when I run node first_auth.js I get errors. Do I need to uninstall MMM-Spotify and start from scratch?

Also, I already am using MMM-NowPlayingOnSpotify and that is working fine. Can I just reuse my existing Client ID and Client Secret? I’m worried that using both modules is causing the issue. I could be wrong though.

Thanks!

@sdetweil said in Second Calendar is offset/ Indented:

@spoonek i do not know, but if u change the symbol of the second cal to the same as the 1st cal, is the offset still there?

It’s still indented.

@sdetweil Looking good now after adding both apikey and apiKey. Most likely me generating a new key as well. Thanks for the dev tips! Will be useful for me down the road.

@sdetweil said in MMM-MyCommute not showing up.:

@spoonek from the module folder

jclarke0000/MMM-MyCommute.git

@sdetweil said in MMM-MyCommute not showing up.:

@spoonek so, then, passing the key is a problem,

so it might be the item name in config. u can specify both,
and u got the right string for the API key from Google.

OK, I’ll add apikey and apiKey. I just generated a new key as well. Billing acct is active too.

pi@raspberrypi:~/MagicMirror/modules/MMM-MyCommute $ git remote -v
origin https://github.com/jclarke0000/MMM-MyCommute.git (fetch)
origin https://github.com/jclarke0000/MMM-MyCommute.git (push)
pi@raspberrypi:~/MagicMirror/modules/MMM-MyCommute $

@sdetweil said in MMM-MyCommute not showing up.:

@spoonek from the link on the moduledoc

Maps JavaScript API

from the image u posted,
2nd row, second box from left

Yep, got that one already. :(

@sdetweil thanks. I don’t see it…

@sdetweil said in MMM-MyCommute not showing up.:

@spoonek use the menu to get the dev window open. or start with

npm start dev

if u normally use pm2, do pm2 stop 0
before the npm start

OK, that is awesome! Thanks for the tip! So maybe I need to generate a new api key and use that?

[2020-08-20 09:07:14.680] [LOG] MMM-MyCommute: You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account

@sdetweil Yep, I added a card and activated the account last night. Was hoping it would sync up overnight but same issue this morning.