Needed adjustments to let the module working

MMM-MPD.css

@@ -0,0 +1,35 @@
+.nowplaying-wrapper {
+    margin-bottom: 10px;
+}
+.nowplaying-wrapper .play-btn {
+    padding-right: 30px;
+}
+.nowplaying-wrapper .current-track,
+.playlist-wrapper .title {
+    width: 250px;
+    max-width: 250px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.playlist-wrapper .time {
+    padding-left: 10px;
+}
+
+
+.nowplaying-wrapper progress.player {
+    background-color: transparent;
+    border-radius: 1em;
+    border: 1px solid #aaaaaa;
+    height: 0.25em;
+    width: 100%;
+    vertical-align: 0.5em;
+}
+
+.nowplaying-wrapper progress[value].player::-webkit-progress-bar {
+    background-color: transparent;
+}
+
+.nowplaying-wrapper progress[value].player::-webkit-progress-value {
+    background-color: #aaaaaa;
+}

MMM-MPD.js

@@ -0,0 +1,153 @@
+/* global Module */
+
+/* Magic Mirror
+ * Module: MMM-MPD
+ *
+ * By Tim Jongsma
+ * MIT Licensed.
+ */
+
+Module.register("MMM-MPD",{
+
+	// Default module config.
+	defaults: {
+		showPlaylist: true,
+		maxRows: 10,
+		fade: true,
+        fadePoint: 0.3,
+        port: 6600,
+        hostname: 'localhost',
+    },
+
+	playerState:{
+		state: 'pause',
+		volume: 100,
+		repeat: false,
+		random: false,
+		duration: null,
+		started: null
+	},
+
+	playerTimer: null,
+
+	playList : [],
+	loading: true,
+
+	getStyles: function() {
+		console.log('getStyles');
+        return ['font-awesome.css','MMM-MPD.css'];
+    },
+
+    getTranslations: function() {
+        return {
+            en: "translations/en.json",
+            de: "translations/de.json"
+        };
+	},
+
+	start: function() {
+		console.log("starting MPD Client");
+		this.addFilters();
+		this.sendSocketNotification("config", this.config)
+	},
+
+	// Subclass socketNotificationReceived method.
+    socketNotificationReceived: function(notification, payload) {
+		//console.log(payload);
+        Log.info(this.name + " received a notification??: " + notification);
+        if (notification === 'mpd_status_update') {
+        	this.playerState.state = payload.state;
+        	this.playerState.volume = payload.volume;
+        	this.playerState.repeat = payload.repeat;
+			this.playerState.random = payload.random;
+
+			if (payload.elapsed) {
+				this.playerState.duration = payload.time.split(":");
+				this.playerState.started = Date.now() - (this.playerState.duration[0] * 1000);
+			}
+			this.loading = false;
+
+			this.updatePlayerTimer();
+			this.updateDom();
+        }
+        if (notification === 'mpd_playlist_update') {
+        	this.playList = payload;
+			this.loading = false;
+        	this.updateDom();
+        }
+    },
+
+	getTemplate: function () {
+        return "templates\\mmm-mpd-playlist.njk";
+	},
+
+    getTemplateData: function () {
+        var templateData = {
+            loading: this.loading,
+            config: this.config,
+            identifier: this.identifier,
+            timeStamp: this.dataRefreshTimeStamp
+		};
+
+		if (!this.loading) {
+			templateData.playerstate = this.playerState.state;
+			templateData.playervolume = this.playerState.volume;
+
+			templateData.playertime = this.playerState.playertime;
+
+			if(this.playList.length > 0){
+				templateData.playlist = this.playList;
+			}
+		}
+        return templateData;
+	},
+
+	addFilters() {
+        var env = this.nunjucksEnvironment();
+		env.addFilter("getFadeOpacity", this.getFadeOpacity.bind(this));
+		env.addFilter("getDuration", this.getDuration.bind(this));
+	},
+
+	getFadeOpacity: function(index, itemCount) {
+		var fadeStart = itemCount * this.config.fadePoint;
+        var fadeItemCount = itemCount - fadeStart + 1;
+        if (this.config.fade && index > fadeStart) {
+            return 1- ((index - fadeStart) / fadeItemCount);
+        } else {
+            return 1;
+		}
+    },
+
+	getDuration: function(seconds) {
+		var minutes = Math.floor(seconds / 60);
+		var seconds = Math.floor(seconds - minutes * 60);
+		if(seconds.toString().length < 2){
+			seconds = '0' + seconds; 
+		}
+		return minutes + ":" + seconds;
+	},
+
+	updatePlayer: function(){
+		var elapsed = (Date.now() - this.playerState.started) / 1000;
+		this.playerState.playertime = elapsed;
+
+		this.updateDom();
+	},
+
+	startPlayerTimer: function(){
+        if(this.playerTimer)return;
+        this.playerTimer = setInterval(this.updatePlayer.bind(this),500);
+    },
+
+	stopPlayerTimer: function(){
+        clearInterval(this.playerTimer);
+        this.playerTimer = null;
+    },
+
+	updatePlayerTimer: function(){
+        if(this.playerState.state == 'play')
+            this.startPlayerTimer();
+        else
+            this.stopPlayerTimer();
+    }
+});

README.md

@@ -1,16 +1,54 @@
-# Module: MMM-MPD
+# MagicMirror Module: MMM-MPD
+
 This module uses MPD (Music Player Deamon) to connect to your favorite music player, for example mopidy, 
 and shows the current state of your music player on your magic mirror.
 
-![screenshot of MMM-MPD](https://user-images.githubusercontent.com/3584382/31564034-be25b64c-b061-11e7-93e6-2209d26000c9.PNG)
+[![Platform](https://img.shields.io/badge/platform-MagicMirror-informational)](https://MagicMirror.builders)
+
+## Example
+
+![screenshot of MMM-MPD](https://user-images.githubusercontent.com/55058372/96780350-f34c3700-13ec-11eb-8c2d-536098016fef.jpg)
+
+## Installation
+
+In your terminal, go to your MagicMirror's Module folder:
+
+````bash
+cd ~/MagicMirror/modules
+````
+
+Clone this repository:
+
+````bash
+git clone https://github.com/timjong93/MMM-MPD.git
+````
+
+Run npm install in the module folder:
+
+````bash
+npm install
+````
+
+Configure the module in your `config/config.js` file.
+
+## Updating
+
+If you want to update your MMM-MPD module to the latest version, use your terminal to go to your MMM-MPD module folder and type the following command:
+
+````bash
+git pull && npm install
+````
+
+If you haven't changed the modules, this should work without any problems.
+Type `git status` to see your changes, if there are any, you can reset them with `git reset --hard`. After that, git pull should be possible.
 
 ## Using the module
 
 To use this module, add it to the modules array in the `config/config.js` file:
 ````javascript
 modules: [
 	{
-		module: "mpd_client",
+		module: "MMM-MPD",
 		position: "top_right",	// This can be any of the regions.
 		config: {
 			// See 'Configuration options' for more information.
@@ -21,7 +59,6 @@ modules: [
 	}
 ]
 ````
-Run npm install in the module folder.
 
 ## Configuration options
 
@@ -31,5 +68,15 @@ The following properties can be configured:
 | ------ | -----------
 | `hostname` | The hostname of the machine running the MPD server. <br><br> **Example:** `'192.168.0.10'` <br> **Default value:** `'localhost'`
 | `port` | The port of the MPD server. <br><br> **Example:** `'6600` <br> **Default value:** `'6600'`
+| `showPlaylist` | Show playlist or not <br><br> **Example:** `'true` <br> **Default value:** `'true'`
 | `maxRows` | The number of songs comming up in your playlist which will be displayed. <br><br> **Example:** `'10` <br> **Default value:** `'10'`
-| `fadePoint` |the point where the playlist starts to fade <br><br> **Example:** `'0.5` <br> **Default value:** `'0.5'`
+| `fade` | Enable fading effect. <br><br> **Example:** `'true` <br> **Default value:** `'true'`
+| `fadePoint` | The point where the playlist starts to fade. <br><br> **Example:** `'0.3` <br> **Default value:** `'0.3'`
+
+### Displaying the MMM-MPD module
+
+Stop and start your Magic Mirror (your exact method may vary)
+
+````bash
+pm2 restart mm
+````