urlbase="mpd.lua?"
+minScrollHeight=200
function GetFilename(url)
{
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);
- nowPlaying = GetFilename(returnedData['current_playing'])
- document.title='MPD Player: '+nowPlaying;
- nowPlaying = (1+Number(returnedData['song'])) + '/' + returnedData['playlistlength'] + ' '+nowPlaying;
+ 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 = '<font color="gray">' + nowPlaying+ '</font>'
}
document.getElementById('repeatstate').innerHTML="<img src=\"images/repeatoff.png\"></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;
+ 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() {
if (this.readyState != 4 || this.status != 200) return;
var returnedData = JSON.parse(this.responseText);
- var text = "<div id=\"playlist_menu\">\
- <table>\
+ var playlistMenuText = "<table>\
<tr>\
<td><span class=\"button\" onclick=\"EditPlayList()\"><img width=\"20\" src=\"images/songs.png\"></span><td>\
<td><span class=\"button\" onclick=\"LoadPlayList()\"><img width=\"20\" src=\"images/lists.png\"></span><td>\
<td><span class=\"button\" onclick=\"SavePlayList()\"><img width=\"20\" src=\"images/save.png\"></span><td>\
<td><span class=\"button\" onclick=\"return confirm('Clear current playlist, are you sure?') ? PlaylistCommand('clear') : false;\" ><img width=\"20\" src=\"images/removeall.png\"></span><td>\
</tr>\
- </table>\
- </div>\
- <div id=\"items\">\
- <table>\
+ </table>";
+
+ var itemsText="<table>\
<tr id=\"items_heading\">\
- <td></td><td>Title</td><th colspan=\"4\">Controls</th>\
+ <td></td class=\"track_number\"><td class=\"file\">Title</td><td class=\"button\" colspan=\"3\">Controls</td>\
</tr>";
var even = 0;
even = ! even;
- text = text + "<tr id=\""+evText+"\">\
- <td id=\"track_number\">\
- <a name=\""+id+"\"></a></td>\
+ itemsText = itemsText + "<tr id=\"track_"+id+"\" class=\"track "+evText+"\">\
+ <td class=\"track_number\">\
+ <a name=\""+id+"\">"+(Number(id)+1)+"</a></td>\
</td>\
- <td id=\"file\">\
+ <td class=\"file\">\
<span class=\"button\" onclick=\"PlaylistCommand('playitem',"+id+")\">"+name+"</span>\
</td>\
- <td id=\"move\">\
+ <td class=\"move\">\
<span class=\"button\" onclick=\"PlaylistCommand('moveup',"+id+")\"><img width=\"15\" src=\"images/up.png\"></span>\
</td>\
- <td id=\"move\">\
+ <td class=\"move\">\
<span class=\"button\" onclick=\"PlaylistCommand('movedown',"+id+")\"><img width=\"15\" src=\"images/down.png\"></span>\
</td>\
- <td id=\"remove\">\
+ <td class=\"remove\">\
<span class=\"button\" onclick=\"PlaylistCommand('remove',"+id+")\"><img width=\"15\" src=\"images/remove.png\"></span>\
</td>\
</tr>";
}
- text = text + "</table>\
- </div>\
- <div id=\"playlist_menu\">\
- <table>\
- <tr>\
- <td><span class=\"button\" onclick=\"EditPlayList()\"><img width=\"20\" src=\"images/songs.png\"></span><td>\
- <td><span class=\"button\" onclick=\"LoadPlayList()\"><img width=\"20\" src=\"images/lists.png\"></span><td>\
- <td><span class=\"button\" onclick=\"SavePlayList()\"><img width=\"20\" src=\"images/save.png\"></span><td>\
- <td><span class=\"button\" onclick=\"return confirm('Clear current playlist, are you sure?') ? PlaylistCommand('clear') : false;\" ><img width=\"20\" src=\"images/removeall.png\"></span><td>\
- </tr>\
- </table>\
-</div>";
+ itemsText = itemsText + "</table>";
- document.getElementById('playlist').innerHTML=text;
+ 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);
if (this.readyState != 4 || this.status != 200) return;
var returnedData = JSON.parse(this.responseText);
- var text = "<div id=\"playlist_menu\">\
- <table>\
+ var playlistMenuText = "<table>\
<tr>\
<td><span class=\"button\" onclick=\"RefreshPlaylist()\"><img width=\"20\" src=\"images/playlist.png\"></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/addall.png\"></span><td>\
</tr>\
- </table>\
- </div>\
- <div id=\"items\">\
- <table>\
+ </table>";
+
+ var itemsText= "<table>\
<tr id=\"items_heading\">\
- <td></td><td>Title</td><th colspan=\"2\">Controls</th>\
+ <td></td class=\"track_number\"><td class=\"file\">Title</td><td class=\"button\" colspan=\"2\">Controls</td>\
</tr>";
+ var even = 0;
if (dir) {
var lastSlash=dir.lastIndexOf("/");
if (lastSlash>0) {
} else {
var upperLevel="";
}
- var text = text + "<tr id=\"home\">\
- <td></td>\
- <td><span class=\"button\" onclick=\"EditPlayList('"+upperLevel+"')\"><img width=\"20\" src=\"images/left.png\"></span></td>\
+ 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></td><td></td>";
}
- var even = 0;
var i = 0;
for (var key in returnedData) {
var rec=returnedData[key];
i = i + 1;
even = ! even;
- text = text + "<tr id=\""+evText+"\">\
- <td id=\"track_number\">\
+ itemsText = itemsText + "<tr class=\""+evText+"\">\
+ <td class=\"track_number\">\
<a name=\""+i+"\"></a></td>\
</td>";
if (type == "directory") {
- text = text + "<td id=\"file\">\
+ 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.png\"></span></td>";
};
if (type == "file") {
- text = text + "<td id=\"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.png\"></span></td>";
};
- text = text + "</tr>";
+ itemsText = itemsText + "</tr>";
}
}
- var text = text+"</table></div>\
- <div id=\"playlist_menu\">\
- <table>\
- <tr>\
- <td><span class=\"button\" onclick=\"RefreshPlaylist()\"><img width=\"20\" src=\"images/playlist.png\"></span><td>\
- <td><span class=\"button\" onclick=\"return confirm('Add all to the list, are you sure?') ? PlaylistEditCommand('addall','"+EscapeStr(dir)+"') : false;\" ><img width=\"20\" src=\"images/addall.png\"></span><td>\
- </tr>\
- </table>\
- </div>";
- document.getElementById('playlist').innerHTML=text;
+ var itemsText = itemsText+"</table>";
+ document.getElementById('items').innerHTML=itemsText;
+ document.getElementById('playlist_menu_top').innerHTML=playlistMenuText;
+ document.getElementById('playlist_menu_bottom').innerHTML=playlistMenuText;
};
if (!dir) { dir = ''; };
req.onreadystatechange = function () {
if (this.readyState != 4 || this.status != 200) return;
var returnedData = JSON.parse(this.responseText);
- text="<div id=\"playlist_menu\">\
- <table>\
+ playlistMenuText="<table>\
<tr>\
<td><span class=\"button\" onclick=\"RefreshPlaylist()\"><img width=\"20\" src=\"images/playlist.png\"></span><td>\
<td><span class=\"button\" onclick=\"confirm('Clear current playlist, are you sure?') ? PlaylistCommandRefStatus('clear') : false;\" ><img width=\"20\" src=\"images/removeall.png\"></span><td>\
</tr>\
- </table>\
- </div>\
- <div id=\"items\">\
- <table>\
+ </table>";
+ itemsText="<table>\
<tr id=\"items_heading\">\
- <td></td><td>Name</td><td>Controls</td>\
+ <td class=\"track_number\"></td><td class=\"file\">Name</td><td class=\"button\">Controls</td>\
</tr>";
var even = 0;
even = ! even;
- text = text + "<tr id=\""+evText+"\">\
- <td
id=\"track_number\"><a name=\"0\"></a></td>\
- <td id=\"file\"><span class=\"button\" onclick=\"PlaylistEditCommandRefFull('load','"+EscapeStr(name)+"')\">"+name+"</td>\
- <td
id=\"controls\"><span class=\"button\" onclick=\"confirm('Delete playlist "+name+", are you sure?') ? DelPlayList('"+EscapeStr(name)+"') : false;\"><img width=\"20\" src=\"images/minus.png\"></span></td>\
+ 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.png\"></span></td>\
</tr>";
}
- text=text+"</table></div><div id=\"playlist_menu\">\
- <table>\
- <tr>\
- <td><span class=\"button\" onclick=\"RefreshPlaylist()\"><img width=\"20\" src=\"images/playlist.png\"></span><td>\
- <td><span class=\"button\" onclick=\"confirm('Clear current playlist, are you sure?') ? PlaylistCommandRefStatus('clear') : false;\" ><img width=\"20\" src=\"images/removeall.png\"></span><td>\
- </tr>\
- </table>\
- </div>";
-
- document.getElementById('playlist').innerHTML=text;
+ itemsText=itemsText+"</table>";
+ 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.onreadystatechange = function () {
if (this.readyState != 4 || this.status != 200) return;
- RefreshPageStatus();
LoadPlayList();
+ RefreshPageStatus();
};
req.open("GET", urlbase+"lists|delete|"+item, true);
}
function RefreshPageContent() {
-
- RefreshPageStatus();
RefreshPlaylist();
-
+ RefreshPageStatus();
}
function Command(cmd) {
}
-setInterval(RefreshPageStatus, 10000);
+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)
projects / mpd-lua.git / blobdiff