MPD Player

Date: Thu, 28 Dec 2017 10:22:20 +0000 (+0300) Subject: Переделка интерфейса с использованием SVG-иконок, добавлен счетчик времени и кнопки... X-Git-Url: https://git.rvb.name/mpd-lua.git/commitdiff_plain/b12b118f634647454e110084173fefbb659419cc?ds=inline Переделка интерфейса с использованием SVG-иконок, добавлен счетчик времени и кнопки перемотки. --- diff --git a/ajax/mpd.js b/ajax/mpd.js deleted file mode 100644 index ccee6fb..0000000 --- a/ajax/mpd.js +++ /dev/null @@ -1,408 +0,0 @@ -urlbase="mpd.lua?" -minScrollHeight=200 - -function GetFilename(url) -{ - if (url) - return url.split('/').pop().split('#')[0].split('?')[0]; -} - -function EscapeStr(str) { - res = str.replace(/'/g,"\\'"); - return res; -} - -function SetSize() { - var w = window, - d = document, - e = d.documentElement, - g = d.getElementsByTagName('body')[0], - body_h = g.clientHeight, - window_h = w.innerHeight|| e.clientHeight|| g.clientHeight, - items = d.getElementById('items'), - current_h = items.clientHeight, - new_h=(window_h-body_h)+current_h; - if (new_h>minScrollHeight) { - items.style.height=new_h+"px"; - } -} - -function RefreshPageStatus() { - - var req = new XMLHttpRequest(); - - req.onreadystatechange = function () { - if (this.readyState != 4 || this.status != 200) return; - var returnedData = JSON.parse(this.responseText); - trackName = GetFilename(returnedData['current_playing']); - trackNo = returnedData['song']; - document.title='MPD Player: '+trackName; - nowPlaying = (1+Number(trackNo)) + '/' + returnedData['playlistlength'] + ' '+trackName; - if (returnedData['state']=='stop') { - nowPlaying = '' + nowPlaying+ '' - } - document.getElementById('nowplaying_content').innerHTML=nowPlaying; - if (returnedData["state"]=="play") { - document.getElementById('playpausebutton').innerHTML="

"; - } else { - document.getElementById('playpausebutton').innerHTML="

"; - } - if (returnedData["repeat"]=="1") { - document.getElementById('repeatstate').innerHTML="

"; - } else { - document.getElementById('repeatstate').innerHTML="

"; - } - document.getElementById('volume_total').innerHTML="

"; - - var items = document.getElementById('items'); - var table = items.getElementsByClassName('track'); - var current_track="track_"+trackNo; - for (var i = 0; i < table.length; i++) { - console.log(table[i].id); - if (table[i].id==current_track) { - table[i].classList.add("itemActive"); - } else { - table[i].classList.remove("itemActive") - } - } - - }; - - req.open("GET", urlbase+"status", true); - req.send(); - -} - -function RefreshPlaylist() { - -var req = new XMLHttpRequest(); - -req.onreadystatechange = function () { - if (this.readyState != 4 || this.status != 200) return; - var returnedData = JSON.parse(this.responseText); - - var playlistMenuText = "\ - \ - \ -

\ -

"; - - var itemsText="\ - \ - \ - "; - - var even = 0; - for (var key in returnedData) { - var rec=returnedData[key]; - var name=GetFilename(rec["name"]); - var id=rec["id"]; - - if (even) { - evText="itemEven"; - } else { - evText="itemOdd"; - }; - - even = ! even; - - itemsText = itemsText + "\ - \ - \ - \ - \ - \ - \ - "; - } - - itemsText = itemsText + "

	Title	Controls
\ - "+(Number(id)+1)+"	\ - "+name+"\ -	\ - \ -	\ - \ -	\ - \ -

"; - - document.getElementById('items').innerHTML=itemsText; - document.getElementById('playlist_menu_top').innerHTML=playlistMenuText; - document.getElementById('playlist_menu_bottom').innerHTML=playlistMenuText; -}; - -req.open("GET", urlbase+"playlist", true); -req.send(); - -} - -function EditPlayList(dir) { - -var req = new XMLHttpRequest(); - -req.onreadystatechange = function () { - if (this.readyState != 4 || this.status != 200) return; - var returnedData = JSON.parse(this.responseText); - - var playlistMenuText = "\ - \ - \ -

\ -

"; - - var itemsText= "\ - \ - \ - "; - - var even = 0; - if (dir) { - var lastSlash=dir.lastIndexOf("/"); - if (lastSlash>0) { - var upperLevel=dir.slice(0,lastSlash); - } else { - var upperLevel=""; - } - even = ! even; - var itemsText = itemsText + "\ - \ - \ - "; - } - - var i = 0; - for (var key in returnedData) { - var rec=returnedData[key]; - var type=rec["type"]; - var name=rec["name"]; - var lastSlash=name.lastIndexOf("/"); - if (lastSlash>0) { - var tailName=name.slice(lastSlash+1); - } else { - var tailName=name - }; - - if (type == "directory" || type == "file") { - if (even) { - evText="itemEven"; - } else { - evText="itemOdd"; - }; - - i = i + 1; - even = ! even; - - itemsText = itemsText + "\ - \ - "; - - if (type == "directory") { - itemsText = itemsText + ""; - }; - - if (type == "file") { - itemsText = itemsText + ""; - }; - - itemsText = itemsText + ""; - - } - - } - - var itemsText = itemsText+"

	Title	Controls
	..
\ -	\ - "+tailName+"	\ -	\ - "+tailName+"	\ -

\ -

"; - itemsText="\ - \ - \ - "; - - var even = 0; - for (var key in returnedData) { - var name=returnedData[key]; - - if (even) { - evText="itemEven"; - } else { - evText="itemOdd"; - }; - - even = ! even; - - itemsText = itemsText + "\ - \ - \ - \ - "; - } - - itemsText=itemsText+"

	Name	Controls
	"+name+"

"; - document.getElementById('items').innerHTML=itemsText; - document.getElementById('playlist_menu_top').innerHTML=playlistMenuText; - document.getElementById('playlist_menu_bottom').innerHTML=playlistMenuText; -}; - -req.open("GET", urlbase+"lists|load", true); -req.send(); - -} - -function SavePlayList() { - -var name=window.prompt('List name',''); - -var req = new XMLHttpRequest(); - -req.onreadystatechange = function () { - if (this.readyState != 4 || this.status != 200) return; - if (this.responseText != 'OK') { - window.alert(this.responseText); - } -}; - -req.open("GET", urlbase+"lists|save|"+name, true); -req.send(); - -} - -function DelPlayList(item) { - -var req = new XMLHttpRequest(); - -req.onreadystatechange = function () { - if (this.readyState != 4 || this.status != 200) return; - LoadPlayList(); - RefreshPageStatus(); -}; - -req.open("GET", urlbase+"lists|delete|"+item, true); -req.send(); - -} - -function RefreshPageContent() { - RefreshPlaylist(); - RefreshPageStatus(); -} - -function Command(cmd) { - -var req = new XMLHttpRequest(); - -req.onreadystatechange = function () { - if (this.readyState != 4 || this.status != 200) return; - RefreshPageStatus(); -}; - -req.open("GET", urlbase+cmd, true); -req.send(); - -} - -function PlaylistCommand(cmd,item) { - -var req = new XMLHttpRequest(); - -req.onreadystatechange = function () { - if (this.readyState != 4 || this.status != 200) return; - RefreshPageContent(); -}; - -req.open("GET", urlbase+"cpl|"+cmd+"|"+item, true); -req.send(); - -} - -function PlaylistCommandRefStatus(cmd,item) { - -var req = new XMLHttpRequest(); - -req.onreadystatechange = function () { - if (this.readyState != 4 || this.status != 200) return; - RefreshPageStatus(); -}; - -req.open("GET", urlbase+"cpl|"+cmd+"|"+item, true); -req.send(); - -} - -function PlaylistEditCommand(cmd,item) { - -var req = new XMLHttpRequest(); - -req.onreadystatechange = function () { - if (this.readyState != 4 || this.status != 200) return; - RefreshPageStatus(); -}; - -req.open("GET", urlbase+"lists|"+cmd+"|"+item, true); -req.send(); - -} - -function PlaylistEditCommandRefFull(cmd,item) { - -var req = new XMLHttpRequest(); - -req.onreadystatechange = function () { - if (this.readyState != 4 || this.status != 200) return; - RefreshPageContent(); -}; - -req.open("GET", urlbase+"lists|"+cmd+"|"+item, true); -req.send(); - -} - -function subscribe_status() { - var xhr = new XMLHttpRequest(); - - xhr.onreadystatechange = function() { - if (this.readyState != 4) return; - if (this.status == 200) { - RefreshPageStatus() - setTimeout(subscribe_status,1000) - } else { - setTimeout(subscribe_status,15000) - } - } - xhr.open("GET", urlbase+"idle", true); - xhr.send(); -} - -setTimeout(subscribe_status,5000) diff --git a/css/general.css b/css/general.css deleted file mode 100644 index 62e4e56..0000000 --- a/css/general.css +++ /dev/null @@ -1,169 +0,0 @@ -body { - margin: 0px; - text-align: center; - font-family: arial,sans-serif; - color: Snow; -} - -a { - text-decoration: none; - color: White; -} - -table -{ - border-style: none; - padding: 0px; - border-collapse: collapse; - border-spacing: 0; -} - -img{ - border: 0px; - margin: 2px 2px 2px 2px; -} - -button -{ - background: none; - cursor: pointer; - border: 0px; - margin: 0px; - padding: 0px; -} - -.button -{ - cursor: pointer; -} - -#frame { - text-align: left; - border: 1px solid Black; - background: DarkSlateGray; - margin: 0; -} - -#nowplaying_heading { - font-size: 1.3em; - font-weight: bold; - padding: 5px; - background: linear-gradient(DarkSlateGray,Black); - border-bottom: 1px solid Black; - border-top: 1px solid Black; -} - -#heading_tbl { - width: 100%; -} - -#nowplaying_content { - margin: 10px 10% 10px 10%; - text-align: center; - border: 1px solid LightGray; - height: 3em; - padding: 10px 0px 5px 0px; - background: SaddleBrown; - font-weight: bold; - color: White; -} - -#control_buttons { - text-align: center; - margin: 10px 5px 10px 5px; -} - -#control_buttons table { - margin-left: auto; - margin-right: auto; -} - - -#control_volume { - text-align: center; - margin: 10px 5px 10px 5px; -} - -#control_volume table { - margin-left: auto; - margin-right: auto; -} - -.playlist_menu { - font-weight: bold; - height: 24px; - padding: 5px; - background: linear-gradient(DarkSlateGray,Black); - border-bottom: 1px solid Black; - border-top: 1px solid Black; -} - -.home { - text-align: left; - font-size: 1.0em; - font-weight: bold; - background: linear-gradient(DarkSlateGray,Black); - border-bottom: 2px solid Black; - border-top: 2px solid DarkSlateGray; -} - - -#items_heading { - text-align: center; - width: 100%; - font-size: 1.0em; - font-weight:bold; - border-bottom: 1px solid DimGray; - border-top: 1px solid DimGray; - background: DarkSlateGray; -} - -#items { - font-size: 0.9em; - text-align: center; - overflow-y: scroll; -} - -#items table { - border: 1px solid DimGray; -} - -.file { - text-align: left; - width: 100%; -} - - -.itemEven{ - background-color: DarkSlateGray; -} - -.itemOdd{ - background-color: DimGray; -} - -.itemActive { - background: LightGray; - color: DarkSlateGray; -} - -.itemActive a { - color: DarkSlateGray; -} - -.track_number { - text-align: right; -} - -#volume_total { - margin: 10px; - width: 200px; - border: 1px solid LightGray; - height: 0.6em; -} - - -#volume_actual { - background-color: DarkOrange; - height: 0.6em; -} diff --git a/images/addall.png b/images/addall.png deleted file mode 100755 index fa3983e..0000000 Binary files a/images/addall.png and /dev/null differ diff --git a/images/back.svg b/images/back.svg new file mode 100644 index 0000000..4901f1e --- /dev/null +++ b/images/back.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/cancel.svg b/images/cancel.svg new file mode 100644 index 0000000..b8ccc3e --- /dev/null +++ b/images/cancel.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/down-arrow.svg b/images/down-arrow.svg new file mode 100644 index 0000000..7514b45 --- /dev/null +++ b/images/down-arrow.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/down.png b/images/down.png deleted file mode 100755 index e8f3d6e..0000000 Binary files a/images/down.png and /dev/null differ diff --git a/images/download.svg b/images/download.svg new file mode 100644 index 0000000..083626a --- /dev/null +++ b/images/download.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/fast-forward.svg b/images/fast-forward.svg new file mode 100644 index 0000000..aa3b9a0 --- /dev/null +++ b/images/fast-forward.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/folder.svg b/images/folder.svg new file mode 100644 index 0000000..9be9119 --- /dev/null +++ b/images/folder.svg @@ -0,0 +1,42 @@ + + + diff --git a/images/list.svg b/images/list.svg new file mode 100644 index 0000000..496facd --- /dev/null +++ b/images/list.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/lists.png b/images/lists.png deleted file mode 100644 index cbae301..0000000 Binary files a/images/lists.png and /dev/null differ diff --git a/images/minus.png b/images/minus.png deleted file mode 100755 index dff37f6..0000000 Binary files a/images/minus.png and /dev/null differ diff --git a/images/minus.svg b/images/minus.svg new file mode 100644 index 0000000..601c5bb --- /dev/null +++ b/images/minus.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/music-player.svg b/images/music-player.svg new file mode 100644 index 0000000..e258c4f --- /dev/null +++ b/images/music-player.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/next.png b/images/next.png deleted file mode 100755 index fc2c791..0000000 Binary files a/images/next.png and /dev/null differ diff --git a/images/next.svg b/images/next.svg new file mode 100644 index 0000000..19a5278 --- /dev/null +++ b/images/next.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/pause.png b/images/pause.png deleted file mode 100755 index 9508f98..0000000 Binary files a/images/pause.png and /dev/null differ diff --git a/images/pause.svg b/images/pause.svg new file mode 100644 index 0000000..57d5b9e --- /dev/null +++ b/images/pause.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/play-button.svg b/images/play-button.svg new file mode 100644 index 0000000..99f7554 --- /dev/null +++ b/images/play-button.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/play.png b/images/play.png deleted file mode 100755 index 3591973..0000000 Binary files a/images/play.png and /dev/null differ diff --git a/images/playlist.png b/images/playlist.png deleted file mode 100755 index ae4af14..0000000 Binary files a/images/playlist.png and /dev/null differ diff --git a/images/plus.png b/images/plus.png deleted file mode 100755 index b72d579..0000000 Binary files a/images/plus.png and /dev/null differ diff --git a/images/plus.svg b/images/plus.svg new file mode 100644 index 0000000..e4b5135 --- /dev/null +++ b/images/plus.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/previous.png b/images/previous.png deleted file mode 100755 index 9c49139..0000000 Binary files a/images/previous.png and /dev/null differ diff --git a/images/remove.png b/images/remove.png deleted file mode 100755 index bf94562..0000000 Binary files a/images/remove.png and /dev/null differ diff --git a/images/removeall.png b/images/removeall.png deleted file mode 100755 index 4fe02d1..0000000 Binary files a/images/removeall.png and /dev/null differ diff --git a/images/repeatoff.png b/images/repeatoff.png deleted file mode 100755 index 0a17659..0000000 Binary files a/images/repeatoff.png and /dev/null differ diff --git a/images/repeaton.png b/images/repeaton.png deleted file mode 100755 index aaef8ce..0000000 Binary files a/images/repeaton.png and /dev/null differ diff --git a/images/replay.svg b/images/replay.svg new file mode 100644 index 0000000..04c9a0d --- /dev/null +++ b/images/replay.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/replayoff.svg b/images/replayoff.svg new file mode 100644 index 0000000..0b80990 --- /dev/null +++ b/images/replayoff.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/rewind.svg b/images/rewind.svg new file mode 100644 index 0000000..d706a71 --- /dev/null +++ b/images/rewind.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/save.png b/images/save.png deleted file mode 100644 index 37ec086..0000000 Binary files a/images/save.png and /dev/null differ diff --git a/images/songs.png b/images/songs.png deleted file mode 100755 index f24c1ef..0000000 Binary files a/images/songs.png and /dev/null differ diff --git a/images/stop.png b/images/stop.png deleted file mode 100755 index 1e1dd0f..0000000 Binary files a/images/stop.png and /dev/null differ diff --git a/images/stop.svg b/images/stop.svg new file mode 100644 index 0000000..9631700 --- /dev/null +++ b/images/stop.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/stopoff.svg b/images/stopoff.svg new file mode 100644 index 0000000..dc75dbe --- /dev/null +++ b/images/stopoff.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/up-arrow.svg b/images/up-arrow.svg new file mode 100644 index 0000000..e0bc299 --- /dev/null +++ b/images/up-arrow.svg @@ -0,0 +1,39 @@ + + + diff --git a/images/up.png b/images/up.png deleted file mode 100755 index 0ada34a..0000000 Binary files a/images/up.png and /dev/null differ diff --git a/images/update.png b/images/update.png deleted file mode 100755 index fa2242b..0000000 Binary files a/images/update.png and /dev/null differ diff --git a/index.html b/index.html index 6a7c78a..608a4a2 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,9 @@ MPD Player - - + + + @@ -15,23 +16,27 @@ Now playing -

--/---:--/-:--

---

- - - - - + + + + + + +

@@ -39,9 +44,9 @@

- + - +

Volume:

@@ -55,6 +60,8 @@

Code (C) Roman Bazalevsky, 2017 licensed by WTFPL

Icons made by Chanut is Industries from www.flaticon.com is licensed by CC 3.0 BY

diff --git a/mpd.css b/mpd.css new file mode 100644 index 0000000..597f527 --- /dev/null +++ b/mpd.css @@ -0,0 +1,194 @@ +body { + margin: 0px; + text-align: center; + font-family: arial,sans-serif; + color: Snow; +} + +a { + text-decoration: none; + color: White; +} + +table +{ + border-style: none; + padding: 0px; + border-collapse: collapse; + border-spacing: 0; +} + +img{ + border: 0px; + margin: 2px 2px 2px 2px; +} + +button +{ + background: none; + cursor: pointer; + border: 0px; + margin: 0px; + padding: 0px; +} + +.button +{ + cursor: pointer; +} + +#frame { + text-align: left; + border: 1px solid Black; + background: DarkSlateGray; + margin: 0; +} + +#nowplaying_heading { + font-size: 1.3em; + font-weight: bold; + padding: 5px; + background: linear-gradient(DarkSlateGray,Black); + border-bottom: 1px solid Black; + border-top: 1px solid Black; +} + +#heading_tbl { + width: 100%; +} + +#nowplaying_trackname { + text-align: center; + clear: both; + padding: 0.5em; +} + +#nowplaying_content { + height: 4em; + border: 1px solid LightGray; + margin: 10px 10% 10px 10%; + padding: 10px 0px 5px 0px; + background: SaddleBrown; + font-weight: bold; + color: White; +} + +#nowplaying_trackno { + text-align: left; + margin: 0 0 0 5%; + float:left; +} + +#nowplaying_tracklen { + text-align: right; + margin: 0 5% 0 0; + float:right; +} + +#nowplaying_counters { + width: 100%; +} + +#control_buttons { + text-align: center; + margin: 10px 5px 10px 5px; +} + +#control_buttons table { + margin-left: auto; + margin-right: auto; +} + + +#control_volume { + text-align: center; + margin: 10px 5px 10px 5px; +} + +#control_volume table { + margin-left: auto; + margin-right: auto; +} + +.playlist_menu { + font-weight: bold; + height: 24px; + padding: 5px; + background: linear-gradient(DarkSlateGray,Black); + border-bottom: 1px solid Black; + border-top: 1px solid Black; +} + +.home { + text-align: left; + font-size: 1.0em; + font-weight: bold; + background: linear-gradient(DarkSlateGray,Black); + border-bottom: 2px solid Black; + border-top: 2px solid DarkSlateGray; +} + + +#items_heading { + text-align: center; + width: 100%; + font-size: 1.0em; + font-weight:bold; + border-bottom: 1px solid DimGray; + border-top: 1px solid DimGray; + background: DarkSlateGray; +} + +#items { + font-size: 0.9em; + text-align: center; + overflow-y: scroll; +} + +#items table { + border: 1px solid DimGray; +} + +.file { + text-align: left; + width: 100%; +} + + +.itemEven{ + background-color: DarkSlateGray; +} + +.itemOdd{ + background-color: DimGray; +} + +.itemActive { + background: LightGray; + color: DarkSlateGray; +} + +.itemActive a { + color: DarkSlateGray; +} + +.track_number { + text-align: right; +} + +#volume_total { + margin: 10px; + width: 200px; + border: 1px solid LightGray; + height: 0.6em; +} + +#volume_actual { + background-color: DarkOrange; + height: 0.6em; +} + +#credits { + font-size: 0.6em; + background-color: Black; +} \ No newline at end of file diff --git a/mpd.js b/mpd.js new file mode 100644 index 0000000..f1c60cf --- /dev/null +++ b/mpd.js @@ -0,0 +1,468 @@ +urlbase="/cgi-bin/mpd.lua?" +minScrollHeight=200 + +currentState="" + +function GetFilename(url) +{ + if (url) + return url.split('/').pop().split('#')[0].split('?')[0]; +} + +function EscapeStr(str) { + res = str.replace(/'/g,"\\'"); + return res; +} + +function SetSize() { + var w = window, + d = document, + e = d.documentElement, + g = d.getElementsByTagName('body')[0], + body_h = g.clientHeight, + window_h = w.innerHeight|| e.clientHeight|| g.clientHeight, + items = d.getElementById('items'), + current_h = items.clientHeight, + new_h=(window_h-body_h)+current_h; + if (new_h>minScrollHeight) { + items.style.height=new_h+"px"; + } +} + +function toHHMMSS(seconds) { + var hours = Math.floor(seconds / 3600); + seconds -= hours*3600; + var minutes = Math.floor(seconds / 60); + seconds -= minutes*60; + + if (hours < 10) {hours = "0"+hours;} + if (minutes < 10) {minutes = "0"+minutes;} + if (seconds < 10) {seconds = "0"+seconds;} + if (hours == 0) { + return minutes+':'+seconds; + } else { + return hours+':'+minutes+':'+seconds; + } +} + +function RefreshTime() { + if (currentSeconds) { + currentTime = toHHMMSS(currentSeconds) + trackTime = toHHMMSS(trackSeconds) + nowPlayingTime = currentTime+"/"+trackTime + } else { + nowPlayingTime = "-:--/-:--" + } + document.getElementById('nowplaying_tracklen').innerHTML=nowPlayingTime; +} + +function PeriodicRefreshTime() { + if (currentState == "play") { + nowTime = Date.now() + delta = (nowTime - updateTime)/1000 + currentSeconds = updateSeconds + Math.round(delta) + if (currentSeconds > trackSeconds) { + currentSeconds = trackSeconds + } + RefreshTime() + } +} + +function RefreshPageStatus() { + + var req = new XMLHttpRequest(); + + req.onreadystatechange = function () { + if (this.readyState != 4 || this.status != 200) return; + var returnedData = JSON.parse(this.responseText); + trackName = GetFilename(returnedData['current_playing']); + trackNo = returnedData['song']; + currentState = returnedData['state']; + document.title='MPD Player: '+trackName; + nowPlayingTrack = (1+Number(trackNo)) + '/' + returnedData['playlistlength']; + nowPlayingName = trackName; + playingTime = returnedData['time'] + if (playingTime) { + var splits = playingTime.split(":") + updateTime = Date.now() + currentSeconds = Number(splits[0]) + updateSeconds = currentSeconds + trackSeconds = Number(splits[1]) + } else { + currentSeconds = null + } + if (currentState=='stop') { + nowPlayingName = '' + nowPlayingName+ '' + } + document.getElementById('nowplaying_trackno').innerHTML=nowPlayingTrack; + document.getElementById('nowplaying_trackname').innerHTML=nowPlayingName; + RefreshTime() + if (currentState=="play") { + document.getElementById('playpausebutton').innerHTML="

"; + } else { + document.getElementById('playpausebutton').innerHTML="

"; + } + if (currentState=="stop") { + document.getElementById('stopbutton').innerHTML="

"; + } else { + document.getElementById('stopbutton').innerHTML="

"; + } + if (returnedData["repeat"]=="1") { + document.getElementById('repeatstate').innerHTML="

"; + } else { + document.getElementById('repeatstate').innerHTML="

"; + } + document.getElementById('volume_total').innerHTML="

"; + + var items = document.getElementById('items'); + var table = items.getElementsByClassName('track'); + var current_track="track_"+trackNo; + for (var i = 0; i < table.length; i++) { + if (table[i].id==current_track) { + table[i].classList.add("itemActive"); + } else { + table[i].classList.remove("itemActive") + } + } + + }; + + req.open("GET", urlbase+"status", true); + req.send(); + +} + +function RefreshPlaylist() { + +var req = new XMLHttpRequest(); + +req.onreadystatechange = function () { + if (this.readyState != 4 || this.status != 200) return; + var returnedData = JSON.parse(this.responseText); + + var playlistMenuText = "\ + \ + \ +

\ +

"; + + var itemsText="\ + \ + \ + "; + + var even = 0; + for (var key in returnedData) { + var rec=returnedData[key]; + var name=GetFilename(rec["name"]); + var id=rec["id"]; + + if (even) { + evText="itemEven"; + } else { + evText="itemOdd"; + }; + + even = ! even; + + itemsText = itemsText + "\ + \ + \ + \ + \ + \ + \ + "; + } + + itemsText = itemsText + "

	Title	Controls
\ + "+(Number(id)+1)+"	\ + "+name+"\ +	\ + \ +	\ + \ +	\ + \ +

"; + + document.getElementById('items').innerHTML=itemsText; + document.getElementById('playlist_menu_top').innerHTML=playlistMenuText; + document.getElementById('playlist_menu_bottom').innerHTML=playlistMenuText; +}; + +req.open("GET", urlbase+"playlist", true); +req.send(); + +} + +function EditPlayList(dir) { + +var req = new XMLHttpRequest(); + +req.onreadystatechange = function () { + if (this.readyState != 4 || this.status != 200) return; + var returnedData = JSON.parse(this.responseText); + + var playlistMenuText = "\ + \ + \ +

\ +

"; + + var itemsText= "\ + \ + \ + "; + + var even = 0; + if (dir) { + var lastSlash=dir.lastIndexOf("/"); + if (lastSlash>0) { + var upperLevel=dir.slice(0,lastSlash); + } else { + var upperLevel=""; + } + even = ! even; + var itemsText = itemsText + "\ + \ + \ + "; + } + + var i = 0; + for (var key in returnedData) { + var rec=returnedData[key]; + var type=rec["type"]; + var name=rec["name"]; + var lastSlash=name.lastIndexOf("/"); + if (lastSlash>0) { + var tailName=name.slice(lastSlash+1); + } else { + var tailName=name + }; + + if (type == "directory" || type == "file") { + if (even) { + evText="itemEven"; + } else { + evText="itemOdd"; + }; + + i = i + 1; + even = ! even; + + itemsText = itemsText + "\ + \ + "; + + if (type == "directory") { + itemsText = itemsText + ""; + }; + + if (type == "file") { + itemsText = itemsText + ""; + }; + + itemsText = itemsText + ""; + + } + + } + + var itemsText = itemsText+"

	Title	Controls
	..
\ +	\ + "+tailName+"	\ +	\ + "+tailName+"	\ +

\ +

"; + itemsText="\ + \ + \ + "; + + var even = 0; + for (var key in returnedData) { + var name=returnedData[key]; + + if (even) { + evText="itemEven"; + } else { + evText="itemOdd"; + }; + + even = ! even; + + itemsText = itemsText + "\ + \ + \ + \ + "; + } + + itemsText=itemsText+"

	Name	Controls
	"+name+"

"; + document.getElementById('items').innerHTML=itemsText; + document.getElementById('playlist_menu_top').innerHTML=playlistMenuText; + document.getElementById('playlist_menu_bottom').innerHTML=playlistMenuText; +}; + +req.open("GET", urlbase+"lists|load", true); +req.send(); + +} + +function SavePlayList() { + +var name=window.prompt('List name',''); + +var req = new XMLHttpRequest(); + +req.onreadystatechange = function () { + if (this.readyState != 4 || this.status != 200) return; + if (this.responseText != 'OK') { + window.alert(this.responseText); + } +}; + +req.open("GET", urlbase+"lists|save|"+name, true); +req.send(); + +} + +function DelPlayList(item) { + +var req = new XMLHttpRequest(); + +req.onreadystatechange = function () { + if (this.readyState != 4 || this.status != 200) return; + LoadPlayList(); + RefreshPageStatus(); +}; + +req.open("GET", urlbase+"lists|delete|"+item, true); +req.send(); + +} + +function RefreshPageContent() { + RefreshPlaylist(); + RefreshPageStatus(); +} + +function Command(cmd) { + +var req = new XMLHttpRequest(); + +req.onreadystatechange = function () { + if (this.readyState != 4 || this.status != 200) return; + RefreshPageStatus(); +}; + +req.open("GET", urlbase+cmd, true); +req.send(); + +} + +function PlaylistCommand(cmd,item) { + +var req = new XMLHttpRequest(); + +req.onreadystatechange = function () { + if (this.readyState != 4 || this.status != 200) return; + RefreshPageContent(); +}; + +req.open("GET", urlbase+"cpl|"+cmd+"|"+item, true); +req.send(); + +} + +function PlaylistCommandRefStatus(cmd,item) { + +var req = new XMLHttpRequest(); + +req.onreadystatechange = function () { + if (this.readyState != 4 || this.status != 200) return; + RefreshPageStatus(); +}; + +req.open("GET", urlbase+"cpl|"+cmd+"|"+item, true); +req.send(); + +} + +function PlaylistEditCommand(cmd,item) { + +var req = new XMLHttpRequest(); + +req.onreadystatechange = function () { + if (this.readyState != 4 || this.status != 200) return; + RefreshPageStatus(); +}; + +req.open("GET", urlbase+"lists|"+cmd+"|"+item, true); +req.send(); + +} + +function PlaylistEditCommandRefFull(cmd,item) { + +var req = new XMLHttpRequest(); + +req.onreadystatechange = function () { + if (this.readyState != 4 || this.status != 200) return; + RefreshPageContent(); +}; + +req.open("GET", urlbase+"lists|"+cmd+"|"+item, true); +req.send(); + +} + +function subscribe_status() { + var xhr = new XMLHttpRequest(); + + xhr.onreadystatechange = function() { + if (this.readyState != 4) return; + if (this.status == 200) { + RefreshPageStatus() + setTimeout(subscribe_status,1000) + } else { + setTimeout(subscribe_status,15000) + } + } + xhr.open("GET", urlbase+"idle", true); + xhr.send(); +} + +setTimeout(subscribe_status,5000) +setInterval(PeriodicRefreshTime, 1000); diff --git a/mpd.lua b/mpd.lua index 31275b6..b5e180d 100755 --- a/mpd.lua +++ b/mpd.lua @@ -182,10 +182,15 @@ if not command or command=="" then command="idle" end -if command=="play" or command=="pause" or command=="stop" or command=="previous" or command=="next" then +if command=="play" or command=="pause" or command=="stop" then res=mpd_send(m,command) +elseif command=="previous" or command=="next" then + + res=mpd_send(m,"play") + res=mpd_send(m,command) + elseif command=="idle" then m.timeout=30 @@ -203,6 +208,79 @@ elseif command=="volu" then volume=tonumber(status["volume"]) res=mpd_send(m,"setvol "..(volume+volstep)) +elseif string.starts(command,"fastfwd") then + + cmd=split(command,"|") + skip=tonumber(cmd[2]) + if not skip then + skip=15 + end + + status=mpd_send(m,"status") + rec_time=status["time"] + song=status["song"] + + if song then + + if rec_time then + rec_time=split(rec_time,":") + cur_time=tonumber(rec_time[1]) + + track_time=tonumber(rec_time[2]) + cur_time=cur_time+skip + if cur_time>track_time then + cur_time=track_time + end + + mpd_send(m,"seek "..song.." "..cur_time) + + else + + mpd_send(m,"play") + + end + + end + + res={} + +elseif string.starts(command,"rewind") then + + cmd=split(command,"|") + skip=tonumber(cmd[2]) + if not skip then + skip=15 + end + + status=mpd_send(m,"status") + rec_time=status["time"] + song=status["song"] + + if song then + + if rec_time then + rec_time=split(rec_time,":") + cur_time=tonumber(rec_time[1]) + + track_time=tonumber(rec_time[2]) + cur_time=cur_time-skip + if cur_time<0 then + cur_time=0 + end + + mpd_send(m,"seek "..song.." "..cur_time) + + else + + mpd_send(m,"play") + mpd_send(m,"previous") + + end + + end + + res={} + elseif command=="status" then res=mpd_send(m,"status") @@ -213,7 +291,8 @@ elseif command=="status" then if song then res['current_playing']=pl[song]['name'] else - res['current_playing']="No songs selected" + res['song']="--" + res['current_playing']="---" end elseif command=="playlist" then