-urlbase="/cgi-bin/mpd.lua?"
+urlbase="/cgi-bin/mpd.cgi?"
minScrollHeight=200
currentState=""
function RefreshTime() {
if (currentSeconds) {
currentTime = toHHMMSS(currentSeconds)
- trackTime = toHHMMSS(trackSeconds)
- nowPlayingTime = currentTime+"/"+trackTime
+ if (trackSeconds) {
+ trackTime = toHHMMSS(trackSeconds)
+ nowPlayingTime = currentTime+"/"+trackTime
+ } else {
+ nowPlayingTime = currentTime
+ }
} else {
nowPlayingTime = "-:--/-:--"
}
nowTime = Date.now()
delta = (nowTime - updateTime)/1000
currentSeconds = updateSeconds + Math.round(delta)
- if (currentSeconds > trackSeconds) {
+ if (trackSeconds && (currentSeconds > trackSeconds)) {
currentSeconds = trackSeconds
}
RefreshTime()
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;
- nowPlayingTrack = (1+Number(trackNo)) + '/' + returnedData['playlistlength'];
+ if (trackNo) {
+ var nowPlayingTrackNo=String(1+Number(trackNo))
+ } else {
+ var nowPlayingTrackNo="--"
+ }
+ nowPlayingTrack = nowPlayingTrackNo + '/' + returnedData['playlistlength'];
nowPlayingName = trackName;
playingTime = returnedData['time']
if (playingTime) {
document.getElementById('nowplaying_trackname').innerHTML=nowPlayingName;
RefreshTime()
if (currentState=="play") {
- document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('pause')\"><img class=\"button\" width=\"30\" src=\"images/pause.svg\"></span>";
+ document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('pause')\"><img class=\"button\" title=\"Pause\" src=\"images/pause.svg\"></span>";
} else {
- document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('play')\"><img class=\"button\" width=\"30\" src=\"images/play-button.svg\"></span>";
+ document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('play')\"><img class=\"button\" title=\"Play\" src=\"images/play-button.svg\"></span>";
}
if (currentState=="stop") {
- document.getElementById('stopbutton').innerHTML="<span><img class=\"button\" width=\"30\" src=\"images/stopoff.svg\"></span>";
+ document.getElementById('stopbutton').innerHTML="<span><img class=\"button\" src=\"images/stopoff.svg\"></span>";
} else {
- document.getElementById('stopbutton').innerHTML="<span onclick=\"Command('stop')\"><img class=\"button\" width=\"30\" src=\"images/stop.svg\"></span>";
+ document.getElementById('stopbutton').innerHTML="<span onclick=\"Command('stop')\"><img class=\"button\" title=\"Stop\" src=\"images/stop.svg\"></span>";
}
if (returnedData["repeat"]=="1") {
- document.getElementById('repeatstate').innerHTML="<img width=\"30\" src=\"images/replay.svg\"></a>";
+ document.getElementById('repeatstate').innerHTML="<img class=\"button\" title=\"Replay is on\" src=\"images/replay.svg\"></a>";
} else {
- document.getElementById('repeatstate').innerHTML="<img width=\"30\" src=\"images/replayoff.svg\"></a>";
+ document.getElementById('repeatstate').innerHTML="<img class=\"button\" title=\"Replay is off\" src=\"images/replayoff.svg\"></a>";
}
document.getElementById('volume_total').innerHTML="<div id=\"volume_actual\" style=\"width:"+returnedData["volume"]+"%\">";
var items = document.getElementById('items');
var table = items.getElementsByClassName('track');
- var current_track="track_"+trackNo;
+ var current_track="track_"+trackId;
for (var i = 0; i < table.length; i++) {
if (table[i].id==current_track) {
table[i].classList.add("itemActive");
var playlistMenuText = "<table>\
<tr>\
- <td><span class=\"button\" onclick=\"EditPlayList()\"><img width=\"20\" src=\"images/folder.svg\"></span><td>\
- <td><span class=\"button\" onclick=\"LoadPlayList()\"><img width=\"20\" src=\"images/list.svg\"></span><td>\
- <td><span class=\"button\" onclick=\"SavePlayList()\"><img width=\"20\" src=\"images/download.svg\"></span><td>\
- <td><span class=\"button\" onclick=\"return confirm('Clear current playlist, are you sure?') ? PlaylistCommand('clear') : false;\" ><img width=\"20\" src=\"images/cancel.svg\"></span><td>\
+ <td><span onclick=\"EditPlayList()\"><img class=\"medium-button\" title=\"Files\" src=\"images/folder.svg\"></span><td>\
+ <td><span onclick=\"LoadPlayList()\"><img class=\"medium-button\" title=\"Lists\" src=\"images/list.svg\"></span><td>\
+ <td><span onclick=\"SavePlayList()\"><img class=\"medium-button\" title=\"Save current list\" src=\"images/download.svg\"></span><td>\
+ <td><span onclick=\"return confirm('Clear current playlist, are you sure?') ? PlaylistCommand('clear') : false;\" ><img class=\"medium-button\" title=\"Clear current list\" src=\"images/cancel.svg\"></span><td>\
</tr>\
</table>";
var itemsText="<table>\
<tr id=\"items_heading\">\
- <td></td class=\"track_number\"><td class=\"file\">Title</td><td class=\"button\" colspan=\"3\">Controls</td>\
+ <td></td class=\"track_number\"><td class=\"file\">Title</td><td class=\"medium-button\" colspan=\"3\">Controls</td>\
</tr>";
var even = 0;
for (var key in returnedData) {
var rec=returnedData[key];
- var name=GetFilename(rec["name"]);
+ var name=GetFilename(rec["title"]);
+ try {
+ var name=decodeURI(name).replace(/%2C/g,",")
+ }
+ catch(e) {
+ console.log(name)
+ }
var id=rec["id"];
if (even) {
itemsText = itemsText + "<tr id=\"track_"+id+"\" class=\"track "+evText+"\">\
<td class=\"track_number\">\
- <a name=\""+id+"\">"+(Number(id)+1)+"</a></td>\
+ <a name=\""+id+"\">"+(Number(key)+1)+"</a></td>\
</td>\
<td class=\"file\">\
- <span class=\"button\" onclick=\"PlaylistCommand('playitem',"+id+")\">"+name+"</span>\
+ <span class=\"link\" onclick=\"PlaylistCommand('playitem',"+id+")\">"+name+"</span>\
</td>\
<td class=\"move\">\
- <span class=\"button\" onclick=\"PlaylistCommand('moveup',"+id+")\"><img width=\"15\" src=\"images/up-arrow.svg\"></span>\
+ <span onclick=\"PlaylistCommand('moveup',"+id+")\"><img class=\"small-button\" title=\"Move up\" src=\"images/up-arrow.svg\"></span>\
</td>\
<td class=\"move\">\
- <span class=\"button\" onclick=\"PlaylistCommand('movedown',"+id+")\"><img width=\"15\" src=\"images/down-arrow.svg\"></span>\
+ <span onclick=\"PlaylistCommand('movedown',"+id+")\"><img class=\"small-button\" title=\"Move down\" src=\"images/down-arrow.svg\"></span>\
</td>\
<td class=\"remove\">\
- <span class=\"button\" onclick=\"PlaylistCommand('remove',"+id+")\"><img width=\"15\" src=\"images/cancel.svg\"></span>\
+ <span onclick=\"PlaylistCommand('remove',"+id+")\"><img class=\"small-button\" title=\"Remove\" src=\"images/cancel.svg\"></span>\
</td>\
</tr>";
}
var playlistMenuText = "<table>\
<tr>\
- <td><span class=\"button\" onclick=\"RefreshPlaylist()\"><img width=\"20\" src=\"images/list.svg\"></span><td>\
- <td><span class=\"button\" onclick=\"return confirm('Add all to the list, are you sure?') ? PlaylistEditCommand('add','"+EscapeStr(dir)+"') : false;\" ><img width=\"20\" src=\"images/plus.svg\"></span><td>\
+ <td><span onclick=\"RefreshPageContent()\"><img class=\"medium-button\" title=\"Home\" src=\"images/list.svg\"></span><td>\
+ <td><span onclick=\"return confirm('Add all to the list, are you sure?') ? PlaylistEditCommand('add','"+EscapeStr(dir)+"') : false;\" ><img class=\"medium-button\" title=\"Add all\" src=\"images/plus.svg\"></span><td>\
</tr>\
</table>";
var itemsText= "<table>\
<tr id=\"items_heading\">\
- <td></td class=\"track_number\"><td class=\"file\">Title</td><td class=\"button\" colspan=\"2\">Controls</td>\
+ <td></td class=\"track_number\"><td class=\"file\">Title</td><td colspan=\"2\">Controls</td>\
</tr>";
var even = 0;
even = ! even;
var itemsText = itemsText + "<tr class=\"itemOdd\">\
<td class=\"track_number\"></td>\
- <td class=\"file\"><span class=\"button\" onclick=\"EditPlayList('"+upperLevel+"')\">..</span></td>\
+ <td class=\"file\"><span class=\"link\" onclick=\"EditPlayList('"+upperLevel+"')\">..</span></td>\
<td></td><td></td>";
}
} else {
var tailName=name
};
+ try {
+ var tailName=decodeURI(tailName).replace(/%2C/g,",")
+ }
+ catch(e) {
+ console.log(tailName)
+ }
if (type == "directory" || type == "file") {
if (even) {
if (type == "directory") {
itemsText = itemsText + "<td class=\"file\">\
- <span class=\"button\" onclick=\"EditPlayList('"+EscapeStr(name)+"')\">"+tailName+"</span></td><td>\
- <span class=\"button\" onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\"><img width=\"15\" src=\"images/plus.svg\"></span></td>";
+ <span class=\"link\" onclick=\"EditPlayList('"+EscapeStr(name)+"')\">"+tailName+"</span></td><td>\
+ <span onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\"><img class=\"small-button\" title=\"Add\" src=\"images/plus.svg\"></span></td>";
};
if (type == "file") {
itemsText = itemsText + "<td class=\"file\">\
- <span class=\"button\" onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\">"+tailName+"</span></td><td>\
- <span class=\"button\" onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\"><img width=\"15\" src=\"images/plus.svg\"></span></td>";
+ <span class=\"link\" onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\">"+tailName+"</span></td><td>\
+ <span onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\"><img class=\"small-button\" title=\"Add\" src=\"images/plus.svg\"></span></td>";
};
itemsText = itemsText + "</tr>";
var returnedData = JSON.parse(this.responseText);
playlistMenuText="<table>\
<tr>\
- <td><span class=\"button\" onclick=\"RefreshPlaylist()\"><img width=\"20\" src=\"images/list.svg\"></span><td>\
- <td><span class=\"button\" onclick=\"confirm('Clear current playlist, are you sure?') ? PlaylistCommandRefStatus('clear') : false;\" ><img width=\"20\" src=\"images/cancel.svg\"></span><td>\
+ <td><span onclick=\"RefreshPageContent()\"><img class=\"medium-button\" title=\"Home\" src=\"images/list.svg\"></span><td>\
+ <td><span onclick=\"confirm('Clear current playlist, are you sure?') ? PlaylistCommandRefStatus('clear') : false;\" ><img class=\"medium-button\" title=\"Clear all\" src=\"images/cancel.svg\"></span><td>\
</tr>\
</table>";
itemsText="<table>\
<tr id=\"items_heading\">\
- <td class=\"track_number\"></td><td class=\"file\">Name</td><td class=\"button\">Controls</td>\
+ <td class=\"track_number\"></td><td class=\"file\">Name</td><td>Controls</td>\
</tr>";
var even = 0;
itemsText = itemsText + "<tr class=\""+evText+"\">\
<td class=\"track_number\"><a name=\"0\"></a></td>\
- <td class=\"file\"><span class=\"button\" onclick=\"PlaylistEditCommandRefFull('load','"+EscapeStr(name)+"')\">"+name+"</td>\
- <td class=\"controls\"><span class=\"button\" onclick=\"confirm('Delete playlist "+name+", are you sure?') ? DelPlayList('"+EscapeStr(name)+"') : false;\"><img width=\"20\" src=\"images/minus.svg\"></span></td>\
+ <td class=\"file\"><span class=\"link\" onclick=\"PlaylistEditCommandRefFull('load','"+EscapeStr(name)+"')\">"+name+"</td>\
+ <td class=\"controls\"><span onclick=\"confirm('Delete playlist "+name+", are you sure?') ? DelPlayList('"+EscapeStr(name)+"') : false;\"><img class=\"small-button\" title=\"Delete\" src=\"images/minus.svg\"></span></td>\
</tr>";
}
projects / mpd-lua.git / blobdiff