Skip to content

Commit

Permalink
Merge pull request MagicMirrorOrg#6 from eouia/dev
Browse files Browse the repository at this point in the history 
release 1.0.0
  • Loading branch information
@eouia
eouia authored Mar 18, 2019
2 parents f391e90 + abec448 commit 9adb389
Show file tree
Hide file tree
Showing 8 changed files with 455 additions and 107 deletions.
92 changes: 90 additions & 2 deletions MMM-Spotify.css
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@

#SPOTIFY {
position: relative;
width:360px;
border-radius:10px;
height:480px;
box-sizing:border-box;
}



#SPOTIFY_BACKGROUND {
background-size: cover;
background-position: center top;
background-position: center center;
filter: blur(32px) opacity(80%) grayscale(30%);
position:absolute;
top:0;
Expand All @@ -26,6 +29,8 @@
width:100%;
height:100%;
z-index:2;
display:flex;
flex-direction:column;
}

#SPOTIFY_INFO {
Expand All @@ -45,6 +50,15 @@
color:#FFF;
font-weight:bold;
font-size:22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

#SPOTIFY_ARTIST {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

#SPOTIFY_COVER {
Expand All @@ -62,3 +76,77 @@
#SPOTIFY.pausing #SPOTIFY_FOREGROUND {
filter:brightness(50%);
}

#SPOTIFY_PROGRESS_TIME {
margin:0 20px 0 20px;
display:flex;
flex-direction:row;
justify-content:space-between;
}

#SPOTIFY_PROGRESS_END {

}

#SPOTIFY_PROGRESS_CURRENT {

}



#SPOTIFY_PROGRESS_BAR {
margin: 0 20px 10px 20px;
background-color:#666;
height:10px;
position:relative;
}


#SPOTIFY_PROGRESS_BAR_NOW {
background-color:#FFF;
position:absolute;
top:0;
left:0;
height:10px;
}


/* style "mini" */
#SPOTIFY.mini {
width:360px;
height:120px;
}

#SPOTIFY.mini #SPOTIFY_FOREGROUND {
flex-direction:row;
}

#SPOTIFY.mini #SPOTIFY_COVER {
min-width:120px;
width:120px;
height:120px;
padding:0;
}

#SPOTIFY.mini #SPOTIFY_COVER_IMAGE {
height:120px;
}

#SPOTIFY.mini #SPOTIFY_INFO {
width:240px;
padding-left:10px;
}

#SPOTIFY.mini #SPOTIFY_PROGRESS_BAR {
width:240px;
margin:0;
margin-bottom:10px;
}

#SPOTIFY.mini #SPOTIFY_PROGRESS_TIME {
margin:0;
}

#SPOTIFY.mini #SPOTIFY_INFO .fas {
margin:0;
}
177 changes: 128 additions & 49 deletions MMM-Spotify.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,21 @@
//
Module.register("MMM-Spotify", {
default: {
defaultPlayer: "RASPOTIFY",

updateInterval: 2000,
style: "default", // "default", "mini" available.
updateInterval: 1000,
onStart: null,
//If you want to play something on start; set like this.
/*
onStart: {
deviceName: "Web Player (Chrome)", //if null, current(last) activated device will be.
spotifyUri : "spotify:playlist:37i9dQZF1DX9EM98aZosoy", //when search is set, sportifyUri will be ignored.
search: {
type: "artist, track", // `artist`, track`, `album`, `playlist` available
keyword: "michael+jackson",
random:true,
}
}
*/
},

getStyles: function() {
Expand All @@ -19,24 +31,24 @@ Module.register("MMM-Spotify", {
notificationReceived: function(noti, payload, sender) {
if (noti == "DOM_OBJECTS_CREATED") {
this.sendSocketNotification("INIT", this.config)
this.onStart()
}
switch(noti) {
case "SPOTIFY_SEARCH":
var pl = {
query: {
q:"michael+jackson",
type:"artist",
q: payload.query,
type: payload.type,
},
condition: {
random:false,
random:payload.random,
autoplay:true,
}
}
this.sendSocketNotification("SEARCH_AND_PLAY", pl)
break
case "SPOTIFY_PLAY":
var pl = {context_uri:"spotify:playlist:37i9dQZF1DX9EM98aZosoy"}
this.sendSocketNotification("PLAY", pl)
this.sendSocketNotification("PLAY", payload)
break
case "SPOTIFY_PAUSE":
this.sendSocketNotification("PAUSE")
Expand All @@ -48,9 +60,10 @@ Module.register("MMM-Spotify", {
this.sendSocketNotification("PREVIOUS")
break
case "SPOTIFY_VOLUME":
var pl = 50
this.sendSocketNotification("VOLUME", pl)
this.sendSocketNotification("VOLUME", payload)
break
case "SPOTIFY_TRANSFER":
this.sendSocketNotification("TRANSFER", payload)
}
},

Expand All @@ -64,6 +77,40 @@ Module.register("MMM-Spotify", {
}
},

onStart: function() {
if (!this.config.onStart) return
this.sendSocketNotification("ONSTART", this.config.onStart)
},

updateProgress: function(
current,
end = document.getElementById("SPOTIFY_PROGRESS_END"),
curbar = document.getElementById("SPOTIFY_PROGRESS_CURRENT"),
now = document.getElementById("SPOTIFY_PROGRESS_BAR_NOW")
) {
var msToTime = (duration) => {
var ret = ""
var milliseconds = parseInt((duration%1000)/100)
, seconds = parseInt((duration/1000)%60)
, minutes = parseInt((duration/(1000*60))%60)
, hours = parseInt((duration/(1000*60*60))%24)
if (hours > 0) {
hours = (hours < 10) ? "0" + hours : hours
ret = ret + hours + ":"
}
minutes = (minutes < 10) ? "0" + minutes : minutes
seconds = (seconds < 10) ? "0" + seconds : seconds
return ret + minutes + ":" + seconds
}
var songDur = current.item.duration_ms
var cur = current.progress_ms
var pros = (cur / songDur) * 100

end.innerHTML = msToTime(songDur)
curbar.innerHTML = msToTime(cur)
now.style.width = pros + "%"
},

updateCurrentPlayback: function(current) {
if (!current) return
var isChanged = false
Expand All @@ -76,7 +123,10 @@ Module.register("MMM-Spotify", {
} else if (this.currentPlayback.device.id !== current.device.id) {
isChanged = true
} else if (this.currentPlayback.progress_ms !== current.progress_ms) {
isChanged = true
//isChanged = true //It would make too many updateDom.
//It's better to manipulate Dom directly
this.currentPlayback = current
this.updateProgress(current)
}

if (isChanged) {
Expand All @@ -88,12 +138,8 @@ Module.register("MMM-Spotify", {
getDom: function(){
var m = document.createElement("div")
m.id = "SPOTIFY"
if (this.currentPlayback) {
if (this.currentPlayback.is_playing) {
m.className = "playing"
} else {
m.className = "pausing"
}
if (this.config.style !== "default") {
m.classList.add(this.config.style)
}

var back = document.createElement("div")
Expand All @@ -108,44 +154,77 @@ Module.register("MMM-Spotify", {

var cover_img = document.createElement("img")
cover_img.id = "SPOTIFY_COVER_IMAGE"
if (this.currentPlayback) {
cover_img.src = this.currentPlayback.item.album.images[0].url
back.style.backgroundImage = `url(${this.currentPlayback.item.album.images[0].url})`
} else {
cover_img.src = "./modules/MMM-Spotify/spotify-xxl.png"
}
cover_img.src = "./modules/MMM-Spotify/resources/spotify-xxl.png"
cover.appendChild(cover_img)
fore.appendChild(cover)

var info = document.createElement("div")
info.id = "SPOTIFY_INFO"

var title = document.createElement("div")
title.id = "SPOTIFY_TITLE"

var artist = document.createElement("div")
artist.id = "SPOTIFY_ARTIST"

var device = document.createElement("div")
device.id = "SPOTIFY_DEVICE"

var progress = document.createElement("div")
progress_ms = "PROGRESS_BAR"

// var time_ms = this.currentPlayback.progress_ms


if (this.currentPlayback) {
title.innerHTML = `<i class="fas fa-music"></i>` + " " + this.currentPlayback.item.name
artist.innerHTML = `<i class="fas fa-user-circle"></i>` + " " + this.currentPlayback.item.artists[0].name
var info = document.createElement("div")
info.id = "SPOTIFY_INFO"

var title = document.createElement("div")
title.id = "SPOTIFY_TITLE"

var artist = document.createElement("div")
artist.id = "SPOTIFY_ARTIST"

var device = document.createElement("div")
device.id = "SPOTIFY_DEVICE"

var progress = document.createElement("div")
progress.id = "SPOTIFY_PROGRESS"
var currentTime = document.createElement("div")
currentTime.id = "SPOTIFY_PROGRESS_CURRENT"
currentTime.innerHTML = "--:--"
var songTime = document.createElement("div")
songTime.id = "SPOTIFY_PROGRESS_END"
songTime.innerHTML = "--:--"
var time = document.createElement("div")
time.id = "SPOTIFY_PROGRESS_TIME"
time.appendChild(currentTime)
time.appendChild(songTime)
progress.appendChild(time)
var bar = document.createElement("div")
bar.id = "SPOTIFY_PROGRESS_BAR"
var barNow = document.createElement("div")
barNow.id = "SPOTIFY_PROGRESS_BAR_NOW"
bar.appendChild(barNow)
progress.appendChild(bar)

this.updateProgress(this.currentPlayback, songTime, currentTime, barNow)

if (this.currentPlayback.is_playing) {
m.classList.add("playing")
m.classList.remove("pausing")
} else {
m.classList.add("pausing")
m.classList.remove("playing")
}
if (this.currentPlayback.item) {
cover_img.src = this.currentPlayback.item.album.images[0].url
back.style.backgroundImage = `url(${this.currentPlayback.item.album.images[0].url})`
//progress.innerHTML = `<i class="fas fa-clock"></i>` + " " + Math.floor(this.currentPlayback.progress_ms / 60000) + ":" + (((this.currentPlayback.progress_ms % 60000) / 1000).toFixed(0)-1) + " / " + Math.floor(this.currentPlayback.item.duration_ms / 60000) + ":" + (((this.currentPlayback.item.duration_ms % 60000) / 1000).toFixed(0)-1) }
title.innerHTML = `<i class="fas fa-music"></i>` + " " + this.currentPlayback.item.name
var artists = this.currentPlayback.item.artists
var artistName = ""
for (var x = 0; x < artists.length; x++) {
if (!artistName) {
artistName = artists[x].name
} else {
artistName += ", " + artists[x].name
}
}
artist.innerHTML = `<i class="fas fa-user-circle"></i>` + " " + artistName
}
device.innerHTML = `<i class="fas fa-volume-up"></i>` + " " + this.currentPlayback.device.name
progress.innerHTML = `<i class="fas fa-clock"></i>` + " " + Math.floor(this.currentPlayback.progress_ms / 60000) + ":" + (((this.currentPlayback.progress_ms % 60000) / 1000).toFixed(0)-1) + " / " + Math.floor(this.currentPlayback.item.duration_ms / 60000) + ":" + (((this.currentPlayback.item.duration_ms % 60000) / 1000).toFixed(0)-1) }

info.appendChild(title)
info.appendChild(artist)
info.appendChild(device)
info.appendChild(progress)
fore.appendChild(info)
info.appendChild(progress)
info.appendChild(title)
info.appendChild(artist)
info.appendChild(device)
fore.appendChild(info)
}

m.appendChild(fore)
return m
},
Expand Down
Loading

0 comments on commit 9adb389

Please sign in to comment.