ccee6fb07cc54d84a442719d8bd0f67f27f85e8a
[mpd-lua.git] / ajax / mpd.js
1 urlbase="mpd.lua?"
2 minScrollHeight=200
3
4 function GetFilename(url)
5 {
6    if (url)
7    return url.split('/').pop().split('#')[0].split('?')[0];
8 }
9
10 function EscapeStr(str) {
11   res = str.replace(/'/g,"\\'");
12   return res;
13 }
14
15 function SetSize() {
16   var w = window,
17       d = document,
18       e = d.documentElement,
19       g = d.getElementsByTagName('body')[0],
20       body_h = g.clientHeight,
21       window_h = w.innerHeight|| e.clientHeight|| g.clientHeight,
22       items = d.getElementById('items'),
23       current_h = items.clientHeight,
24       new_h=(window_h-body_h)+current_h;
25       if (new_h>minScrollHeight) {
26         items.style.height=new_h+"px";
27       }
28 }
29
30 function RefreshPageStatus() {
31
32   var req = new XMLHttpRequest();
33
34   req.onreadystatechange = function () {
35     if (this.readyState != 4 || this.status != 200) return;
36     var returnedData = JSON.parse(this.responseText);
37     trackName = GetFilename(returnedData['current_playing']);
38     trackNo = returnedData['song'];
39     document.title='MPD Player: '+trackName;
40     nowPlaying = (1+Number(trackNo)) + '/' + returnedData['playlistlength'] + ' '+trackName;
41     if (returnedData['state']=='stop') {
42       nowPlaying = '<font color="gray">' + nowPlaying+ '</font>'
43     }
44     document.getElementById('nowplaying_content').innerHTML=nowPlaying;
45     if (returnedData["state"]=="play") {
46       document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('pause')\"><img class=\"button\" src=\"images/pause.png\"></span>";
47     } else {
48       document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('play')\"><img class=\"button\" src=\"images/play.png\"></span>";
49     }
50     if (returnedData["repeat"]=="1") {
51       document.getElementById('repeatstate').innerHTML="<img src=\"images/repeaton.png\"></a>";
52     } else {
53       document.getElementById('repeatstate').innerHTML="<img src=\"images/repeatoff.png\"></a>";
54     }
55     document.getElementById('volume_total').innerHTML="<div id=\"volume_actual\" style=\"width:"+returnedData["volume"]+"%\">";
56
57     var items = document.getElementById('items');
58     var table = items.getElementsByClassName('track');
59     var current_track="track_"+trackNo;
60     for (var i = 0; i < table.length; i++) {
61       console.log(table[i].id);  
62       if (table[i].id==current_track) {
63         table[i].classList.add("itemActive");
64       } else {
65         table[i].classList.remove("itemActive")
66       }
67     }
68         
69   };
70
71   req.open("GET", urlbase+"status", true);
72   req.send();
73
74 }
75
76 function RefreshPlaylist() {
77
78 var req = new XMLHttpRequest();
79
80 req.onreadystatechange = function () {
81   if (this.readyState != 4 || this.status != 200) return;
82   var returnedData = JSON.parse(this.responseText);
83
84   var playlistMenuText = "<table>\
85   <tr>\
86   <td><span class=\"button\" onclick=\"EditPlayList()\"><img width=\"20\" src=\"images/songs.png\"></span><td>\
87   <td><span class=\"button\" onclick=\"LoadPlayList()\"><img width=\"20\" src=\"images/lists.png\"></span><td>\
88   <td><span class=\"button\" onclick=\"SavePlayList()\"><img width=\"20\" src=\"images/save.png\"></span><td>\
89   <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>\
90   </tr>\
91   </table>";
92
93   var itemsText="<table>\
94   <tr id=\"items_heading\">\
95   <td></td class=\"track_number\"><td class=\"file\">Title</td><td class=\"button\" colspan=\"3\">Controls</td>\
96   </tr>";
97
98   var even = 0;
99   for (var key in returnedData) {
100        var rec=returnedData[key];
101        var name=GetFilename(rec["name"]);
102        var id=rec["id"];
103
104        if (even) { 
105          evText="itemEven"; 
106        } else { 
107          evText="itemOdd";
108        };
109
110        even = ! even;
111
112        itemsText = itemsText + "<tr id=\"track_"+id+"\" class=\"track "+evText+"\">\
113   <td class=\"track_number\">\
114   <a name=\""+id+"\">"+(Number(id)+1)+"</a></td>\
115   </td>\
116   <td class=\"file\">\
117   <span class=\"button\" onclick=\"PlaylistCommand('playitem',"+id+")\">"+name+"</span>\
118   </td>\
119   <td class=\"move\">\
120   <span class=\"button\" onclick=\"PlaylistCommand('moveup',"+id+")\"><img width=\"15\" src=\"images/up.png\"></span>\
121   </td>\
122   <td class=\"move\">\
123   <span class=\"button\" onclick=\"PlaylistCommand('movedown',"+id+")\"><img width=\"15\" src=\"images/down.png\"></span>\
124   </td>\
125   <td class=\"remove\">\
126   <span class=\"button\" onclick=\"PlaylistCommand('remove',"+id+")\"><img width=\"15\" src=\"images/remove.png\"></span>\
127   </td>\
128   </tr>"; 
129   }
130
131   itemsText = itemsText + "</table>";
132
133   document.getElementById('items').innerHTML=itemsText;
134   document.getElementById('playlist_menu_top').innerHTML=playlistMenuText;
135   document.getElementById('playlist_menu_bottom').innerHTML=playlistMenuText;
136 };
137
138 req.open("GET", urlbase+"playlist", true);
139 req.send();
140
141 }
142
143 function EditPlayList(dir) {
144
145 var req = new XMLHttpRequest();
146
147 req.onreadystatechange = function () {
148   if (this.readyState != 4 || this.status != 200) return;
149   var returnedData = JSON.parse(this.responseText);
150
151   var playlistMenuText = "<table>\
152   <tr>\
153   <td><span class=\"button\" onclick=\"RefreshPlaylist()\"><img width=\"20\" src=\"images/playlist.png\"></span><td>\
154   <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>\
155   </tr>\
156   </table>";
157
158   var itemsText= "<table>\
159   <tr id=\"items_heading\">\
160   <td></td class=\"track_number\"><td class=\"file\">Title</td><td class=\"button\" colspan=\"2\">Controls</td>\
161   </tr>";
162
163   var even = 0;
164   if (dir) {
165     var lastSlash=dir.lastIndexOf("/");
166     if (lastSlash>0) {
167       var upperLevel=dir.slice(0,lastSlash);
168     } else {
169       var upperLevel="";
170     }
171     even = ! even;
172     var itemsText = itemsText + "<tr class=\"itemOdd\">\
173   <td class=\"track_number\"></td>\
174   <td class=\"file\"><span class=\"button\" onclick=\"EditPlayList('"+upperLevel+"')\">..</span></td>\
175   <td></td><td></td>";
176   } 
177
178   var i = 0;
179   for (var key in returnedData) {
180        var rec=returnedData[key];
181        var type=rec["type"];
182        var name=rec["name"];
183        var lastSlash=name.lastIndexOf("/");
184        if (lastSlash>0) {
185          var tailName=name.slice(lastSlash+1);
186        } else {
187          var tailName=name
188        };
189
190        if (type == "directory" || type == "file") {
191          if (even) { 
192            evText="itemEven"; 
193          } else { 
194            evText="itemOdd";
195          };
196
197          i = i + 1;
198          even = ! even;
199
200          itemsText = itemsText + "<tr class=\""+evText+"\">\
201            <td class=\"track_number\">\
202            <a name=\""+i+"\"></a></td>\
203            </td>";
204       
205          if (type == "directory") {
206            itemsText = itemsText + "<td class=\"file\">\
207              <span class=\"button\" onclick=\"EditPlayList('"+EscapeStr(name)+"')\">"+tailName+"</span></td><td>\
208              <span class=\"button\" onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\"><img width=\"15\" src=\"images/plus.png\"></span></td>";
209          }; 
210
211          if (type == "file") {
212            itemsText = itemsText + "<td class=\"file\">\
213              <span class=\"button\" onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\">"+tailName+"</span></td><td>\
214              <span class=\"button\" onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\"><img width=\"15\" src=\"images/plus.png\"></span></td>";
215          };
216
217          itemsText = itemsText + "</tr>";
218
219        }       
220        
221   }
222
223   var itemsText = itemsText+"</table>";
224   document.getElementById('items').innerHTML=itemsText;
225   document.getElementById('playlist_menu_top').innerHTML=playlistMenuText;
226   document.getElementById('playlist_menu_bottom').innerHTML=playlistMenuText;
227 };
228
229 if (!dir) { dir = ''; };
230
231 req.open("GET", urlbase+"lists|edit|"+dir, true);
232 req.send();
233
234 }
235
236 function LoadPlayList() {
237
238 var req = new XMLHttpRequest();
239
240 req.onreadystatechange = function () {
241   if (this.readyState != 4 || this.status != 200) return;
242   var returnedData = JSON.parse(this.responseText);
243   playlistMenuText="<table>\
244     <tr>\
245       <td><span class=\"button\" onclick=\"RefreshPlaylist()\"><img width=\"20\" src=\"images/playlist.png\"></span><td>\
246       <td><span class=\"button\" onclick=\"confirm('Clear current playlist, are you sure?') ? PlaylistCommandRefStatus('clear') : false;\" ><img width=\"20\" src=\"images/removeall.png\"></span><td>\
247     </tr>\
248     </table>";
249   itemsText="<table>\
250     <tr id=\"items_heading\">\
251       <td class=\"track_number\"></td><td class=\"file\">Name</td><td class=\"button\">Controls</td>\
252     </tr>";
253
254   var even = 0;
255   for (var key in returnedData) {
256        var name=returnedData[key];
257
258        if (even) { 
259          evText="itemEven"; 
260        } else { 
261          evText="itemOdd";
262        };
263
264        even = ! even;
265
266        itemsText = itemsText + "<tr class=\""+evText+"\">\
267       <td class=\"track_number\"><a name=\"0\"></a></td>\
268       <td class=\"file\"><span class=\"button\" onclick=\"PlaylistEditCommandRefFull('load','"+EscapeStr(name)+"')\">"+name+"</td>\
269       <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>\
270     </tr>";
271   }
272
273   itemsText=itemsText+"</table>";
274   document.getElementById('items').innerHTML=itemsText;
275   document.getElementById('playlist_menu_top').innerHTML=playlistMenuText;
276   document.getElementById('playlist_menu_bottom').innerHTML=playlistMenuText;
277 };
278
279 req.open("GET", urlbase+"lists|load", true);
280 req.send();
281
282 }
283
284 function SavePlayList() {
285
286 var name=window.prompt('List name','');
287
288 var req = new XMLHttpRequest();
289
290 req.onreadystatechange = function () {
291   if (this.readyState != 4 || this.status != 200) return;
292   if (this.responseText != 'OK') {
293     window.alert(this.responseText);
294   }
295 };
296
297 req.open("GET", urlbase+"lists|save|"+name, true);
298 req.send();
299
300 }
301
302 function DelPlayList(item) {
303
304 var req = new XMLHttpRequest();
305
306 req.onreadystatechange = function () {
307   if (this.readyState != 4 || this.status != 200) return;
308   LoadPlayList();
309   RefreshPageStatus();
310 };
311
312 req.open("GET", urlbase+"lists|delete|"+item, true);
313 req.send();
314
315 }
316
317 function RefreshPageContent() {
318   RefreshPlaylist();
319   RefreshPageStatus();
320 }
321
322 function Command(cmd) {
323
324 var req = new XMLHttpRequest();
325
326 req.onreadystatechange = function () {
327   if (this.readyState != 4 || this.status != 200) return;
328   RefreshPageStatus();
329 };
330
331 req.open("GET", urlbase+cmd, true);
332 req.send();
333
334 }
335
336 function PlaylistCommand(cmd,item) {
337
338 var req = new XMLHttpRequest();
339
340 req.onreadystatechange = function () {
341   if (this.readyState != 4 || this.status != 200) return;
342   RefreshPageContent();
343 };
344
345 req.open("GET", urlbase+"cpl|"+cmd+"|"+item, true);
346 req.send();
347
348 }
349
350 function PlaylistCommandRefStatus(cmd,item) {
351
352 var req = new XMLHttpRequest();
353
354 req.onreadystatechange = function () {
355   if (this.readyState != 4 || this.status != 200) return;
356   RefreshPageStatus();
357 };
358
359 req.open("GET", urlbase+"cpl|"+cmd+"|"+item, true);
360 req.send();
361
362 }
363
364 function PlaylistEditCommand(cmd,item) {
365
366 var req = new XMLHttpRequest();
367
368 req.onreadystatechange = function () {
369   if (this.readyState != 4 || this.status != 200) return;
370   RefreshPageStatus();
371 };
372
373 req.open("GET", urlbase+"lists|"+cmd+"|"+item, true);
374 req.send();
375
376 }
377
378 function PlaylistEditCommandRefFull(cmd,item) {
379
380 var req = new XMLHttpRequest();
381
382 req.onreadystatechange = function () {
383   if (this.readyState != 4 || this.status != 200) return;
384   RefreshPageContent();
385 };
386
387 req.open("GET", urlbase+"lists|"+cmd+"|"+item, true);
388 req.send();
389
390 }
391
392 function subscribe_status() {
393   var xhr = new XMLHttpRequest();
394
395   xhr.onreadystatechange = function() {
396     if (this.readyState != 4) return;
397     if (this.status == 200) {
398       RefreshPageStatus()
399       setTimeout(subscribe_status,1000)
400     } else {
401       setTimeout(subscribe_status,15000)
402     }
403   }
404   xhr.open("GET", urlbase+"idle", true);
405   xhr.send();
406 }
407
408 setTimeout(subscribe_status,5000)