MMM-Sonos

This is an adaption and modification of of Vaggan's MagicMirror-SonosModule and CFenner's MagicMirror-SonosModule. It was modified to get some enhancements in visualisation an configuration. Also the module hides itself when not playing now.

Note from Snille: I'm new to the MagicMirror world and Node.js, this is my first attempt to modify a module. There are probably lot's of things that could have been done better. :)

When starting the Mirror:

Module on the Left side of the Mirror:

Module in the Center of the Mirror:

Module in the Center of the Mirror playing in 3 different zones:

Module on the Right side of the Mirror:

This is my own mirrors view (Top Center) using some addition in the custom.css see below

Usage

Prerequisites

• requires MagicMirror v2.0.0
• install and run node-sonos-http-api

Installation

In your terminal, go to your MagicMirror's Module folder:

cd ~/MagicMirror/modules

Clone this repository:

git clone https://github.com/Snille/MMM-Sonos.git

Add some config entries to your config.js file. After that the content will be added to your mirror.

Configuration

To run the module properly, you need to add the following data to your config.js file.

{
	module: 'MMM-Sonos',
	header: "Playing on SONOS",
	position: "top_center", // This can be any of the regions, best results in center regions
	classes: "default everyone",
	config: {
		// See 'Configuration options' for more information.
	}
}

Here are the configuration options to configure the module.

Option	Description
showStoppedRoom	Trigger the visualization of stopped rooms. Default value: true
showAlbumArt	Trigger the visualization of the album art. Default value: true
showRoomName	Trigger the visualization of the room name. Default value: true
preRoomText	Text to be displayed before the zone name. Default value: Zone:
preArtistText	Text to be displayed before the artist name. Default value: Artist:
preTrackText	Text to be displayed before the track name. Default value: Track:
preTypeText	Text to be displayed before the source name. Default value: Source:
animationSpeed	Lenght of the fade animation. Default value: 1000
updateInterval	Update interval. Default value: 0.5
apiBase	http link to the SONOS API. Default value: http://localhost'
apiPort	SONOS API port. Default value: 5005
apiEndpoint	Link to the "zones" information on the SONOS API. Default value: zones
exclude	Zones names to exclude ["Secret-Room","Greenhouse"]. Default value: []

Custom-CSS

Here is my CSS settings for the module that I have added to my custom.css to give it the exta special look. :)

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

Known Issues

The module may not be able to access the data of the sonos API due to a Cross-Origin Resource Sharing (CORS) issue. This could be solved by adding the following lines to the sonos-http-api.js just before res.write(new Buffer(jsonResponse)); in the sonos api. Remember to restart the service after the change.

  res.setHeader("Access-Control-Allow-Origin", "http://localhost");
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

known nothings