X-Git-Url: https://git.rvb.name/mpd-lua.git/blobdiff_plain/55262d4cf0ac84eb33fafca62bdcae22a4d478b3..refs/heads/master:/mpd.js diff --git a/mpd.js b/mpd.js new file mode 100644 index 0000000..b5ff513 --- /dev/null +++ b/mpd.js @@ -0,0 +1,496 @@ +urlbase="/cgi-bin/mpd.cgi?" +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) + if (trackSeconds) { + trackTime = toHHMMSS(trackSeconds) + nowPlayingTime = currentTime+"/"+trackTime + } else { + nowPlayingTime = currentTime + } + } 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 (trackSeconds && (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']); + try { + var trackName=decodeURI(trackName).replace(/%2C/g,",") + } + catch(e) { + console.log(trackName) + } + trackNo = returnedData['song']; + trackId = returnedData['songid'] + currentState = returnedData['state']; + document.title='MPD Player: '+trackName; + if (trackNo) { + var nowPlayingTrackNo=String(1+Number(trackNo)) + } else { + var nowPlayingTrackNo="--" + } + nowPlayingTrack = nowPlayingTrackNo + '/' + 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_"+trackId; + 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["title"]); + try { + var name=decodeURI(name).replace(/%2C/g,",") + } + catch(e) { + console.log(name) + } + var id=rec["id"]; + + if (even) { + evText="itemEven"; + } else { + evText="itemOdd"; + }; + + even = ! even; + + itemsText = itemsText + "\ + \ + \ + \ + \ + \ + \ + "; + } + + itemsText = itemsText + "
TitleControls
\ + "+(Number(key)+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 + }; + try { + var tailName=decodeURI(tailName).replace(/%2C/g,",") + } + catch(e) { + console.log(tailName) + } + + 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+"
TitleControls
..
\ + \ + "+tailName+"\ + \ + "+tailName+"\ +
"; + document.getElementById('items').innerHTML=itemsText; + document.getElementById('playlist_menu_top').innerHTML=playlistMenuText; + document.getElementById('playlist_menu_bottom').innerHTML=playlistMenuText; +}; + +if (!dir) { dir = ''; }; + +req.open("GET", urlbase+"lists|edit|"+dir, true); +req.send(); + +} + +function LoadPlayList() { + +var req = new XMLHttpRequest(); + +req.onreadystatechange = function () { + if (this.readyState != 4 || this.status != 200) return; + var returnedData = JSON.parse(this.responseText); + playlistMenuText="\ + \ + \ +
\ + \ +
"; + 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+"
NameControls
"+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);