Sonos Web Versions Save

Merge variety of fixes and update dependencies to node=16

Dependencies

• Update node-sonos from 1.12.5 to 1.12.6

Bugs

• Removed a gray background behind the Music Library tabs that snuck in while upgrading the dependencies. Didn't show in development, only when compiled.

Bugs

• ESLint was throwing errors during the build process, causing the installer to fail

Bugs

• webpackChunkNames with spaces were causing build errors

Should fix this error when installing with sonos-web cli command

Features

• Now Playing page updates the document title based upon the current track playing • The Volume slider now shows a value in a popup while adjusting the volume.

Misc

• Upgrade all project dependencies
• Migrated from Vuetify v1.5 to v2.0
• Prepping to fix other issues & add new features

Bug Fixes

• Fixes the following error upon startup:

This error was caused by a breaking change made to the Sonos API. The node-sonos library was updated and sonos-web is now using the latest release from the master branch of node-sonos.

Bug Fixes

• The Connect Spotify Account process was not working properly and has now been fixed.

IMPORTANT

Unfortunately, there is a limitation to the Spotify authorization. You must authorize Spotify from the machine that the Sonos Web server is running on. You must authorize Spotify from localhost:5050 and not, for example, 192.168.0.16:5050. The reason for this is that the Spotify API requires the redirect URL be defined in the Spotify Developer Dashboard and since I cannot add a wildcard route, the only allowable redirect URL is localhost:5050.

Once Spotify is authorized from the machine the Sonos Web server is running on, you may then access Spotify from a different machine and use it without issue.

A note on headless machines

You won’t be able to connect Spotify on the headless machine due the lack of being able to access a web browser and authorize. However, the easiest way to get it to work (for now) is to install Sonos Web on a desktop/laptop and then authorize Spotify in your web browser. Once authorized, the tokens are cached in the browser. You must then copy the localStorage spotify settings to the browser where your headless install is running. After that you will be able to use Spotify on Sonos Web from your headlesss machine.

// Open up developer tools console on localhost:5050
// Authorize Spotify, and then proceed with below:
var settings = JSON.parse(localStorage.settings)
settings.spotify
// copy the output of the above command to you clipboard
// should look something like this
{refreshToken: "yourLongStreamOfCharactersRefreshTokenIdHere"}

// Open up developer tools on your remote/headless machine ex. 192.168.0.200:5050
// run the following code in the console
var settings = JSON.parse(localStorage.settings)
// paste what you copied earlier from your clipboard to after the equals sign
settings.spotify = {refreshToken: "yourLongStreamOfCharactersRefreshTokenIdHere"}
localStorage.setItem('settings', JSON.stringify(settings))

After this, accessing Spotify on your headless machine should work properly.

Bug Fixes

• Fixed major issue with the whole app layout being utterly broken
• Apparently using css modules in vue.config.js was causing the issue

Bug Fixes

• Fix a couple variables that were undefined

Miscellaneous

• Fix linting errors