Фикс для совместимости с lua 5.1 на debian
[mpd-lua.git] / mpd.js
1 urlbase="/cgi-bin/mpd.cgi?"
2 minScrollHeight=200
3
4 currentState=""
5
6 function GetFilename(url)
7 {
8    if (url)
9    return url.split('/').pop().split('#')[0].split('?')[0];
10 }
11
12 function EscapeStr(str) {
13   res = str.replace(/'/g,"\\'");
14   return res;
15 }
16
17 function SetSize() {
18   var w = window,
19       d = document,
20       e = d.documentElement,
21       g = d.getElementsByTagName('body')[0],
22       body_h = g.clientHeight,
23       window_h = w.innerHeight|| e.clientHeight|| g.clientHeight,
24       items = d.getElementById('items'),
25       current_h = items.clientHeight,
26       new_h=(window_h-body_h)+current_h;
27       if (new_h>minScrollHeight) {
28         items.style.height=new_h+"px";
29       }
30 }
31
32 function toHHMMSS(seconds) {
33     var hours = Math.floor(seconds / 3600);
34     seconds -= hours*3600;
35     var minutes = Math.floor(seconds / 60);
36     seconds -= minutes*60;
37
38     if (hours   < 10) {hours   = "0"+hours;}
39     if (minutes < 10) {minutes = "0"+minutes;}
40     if (seconds < 10) {seconds = "0"+seconds;}
41     if (hours == 0) {
42      return minutes+':'+seconds;
43     } else {
44      return hours+':'+minutes+':'+seconds;
45     }
46 }
47
48 function RefreshTime() {
49   if (currentSeconds) {
50     currentTime = toHHMMSS(currentSeconds)
51     if (trackSeconds) {
52       trackTime = toHHMMSS(trackSeconds)
53       nowPlayingTime = currentTime+"/"+trackTime
54     } else {
55       nowPlayingTime = currentTime
56     }
57   } else {
58     nowPlayingTime = "-:--/-:--"
59   }
60   document.getElementById('nowplaying_tracklen').innerHTML=nowPlayingTime;
61 }
62
63 function PeriodicRefreshTime() {
64   if (currentState == "play") {
65     nowTime = Date.now()
66     delta = (nowTime - updateTime)/1000
67     currentSeconds = updateSeconds + Math.round(delta)
68     if (trackSeconds && (currentSeconds > trackSeconds)) {
69       currentSeconds = trackSeconds
70     }
71     RefreshTime()
72   }
73 }
74
75 function RefreshPageStatus() {
76
77   var req = new XMLHttpRequest();
78
79   req.onreadystatechange = function () {
80     if (this.readyState != 4 || this.status != 200) return;
81     var returnedData = JSON.parse(this.responseText);
82     trackName = GetFilename(returnedData['current_playing']);
83     try {
84       var trackName=decodeURI(trackName).replace(/%2C/g,",")
85     }  
86     catch(e) {
87       console.log(trackName)
88     }
89     trackNo = returnedData['song'];
90     trackId = returnedData['songid']
91     currentState = returnedData['state'];
92     document.title='MPD Player: '+trackName;
93     if (trackNo) {
94       var nowPlayingTrackNo=String(1+Number(trackNo))
95     } else {
96       var nowPlayingTrackNo="--"
97     }
98     nowPlayingTrack = nowPlayingTrackNo + '/' + returnedData['playlistlength'];
99     nowPlayingName = trackName;
100     playingTime = returnedData['time']
101     if (playingTime) {
102       var splits = playingTime.split(":")
103       updateTime = Date.now()
104       currentSeconds = Number(splits[0])
105       updateSeconds = currentSeconds
106       trackSeconds = Number(splits[1])
107     } else {
108       currentSeconds = null
109     }
110     if (currentState=='stop') {
111       nowPlayingName = '<font color="gray">' + nowPlayingName+ '</font>'
112     }
113     document.getElementById('nowplaying_trackno').innerHTML=nowPlayingTrack;
114     document.getElementById('nowplaying_trackname').innerHTML=nowPlayingName;
115     RefreshTime()
116     if (currentState=="play") {
117       document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('pause')\"><img class=\"button\" title=\"Pause\" src=\"images/pause.svg\"></span>";
118     } else {
119       document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('play')\"><img class=\"button\" title=\"Play\" src=\"images/play-button.svg\"></span>";
120     }
121     if (currentState=="stop") {
122       document.getElementById('stopbutton').innerHTML="<span><img class=\"button\" src=\"images/stopoff.svg\"></span>";
123     } else {
124       document.getElementById('stopbutton').innerHTML="<span onclick=\"Command('stop')\"><img class=\"button\" title=\"Stop\" src=\"images/stop.svg\"></span>";
125     }
126     if (returnedData["repeat"]=="1") {
127       document.getElementById('repeatstate').innerHTML="<img class=\"button\" title=\"Replay is on\" src=\"images/replay.svg\"></a>";
128     } else {
129       document.getElementById('repeatstate').innerHTML="<img class=\"button\" title=\"Replay is off\" src=\"images/replayoff.svg\"></a>";
130     }
131     document.getElementById('volume_total').innerHTML="<div id=\"volume_actual\" style=\"width:"+returnedData["volume"]+"%\">";
132
133     var items = document.getElementById('items');
134     var table = items.getElementsByClassName('track');
135     var current_track="track_"+trackId;
136     for (var i = 0; i < table.length; i++) {
137       if (table[i].id==current_track) {
138         table[i].classList.add("itemActive");
139       } else {
140         table[i].classList.remove("itemActive")
141       }
142     }
143         
144   };
145
146   req.open("GET", urlbase+"status", true);
147   req.send();
148
149 }
150
151 function RefreshPlaylist() {
152
153 var req = new XMLHttpRequest();
154
155 req.onreadystatechange = function () {
156   if (this.readyState != 4 || this.status != 200) return;
157   var returnedData = JSON.parse(this.responseText);
158
159   var playlistMenuText = "<table>\
160   <tr>\
161   <td><span onclick=\"EditPlayList()\"><img class=\"medium-button\" title=\"Files\" src=\"images/folder.svg\"></span><td>\
162   <td><span onclick=\"LoadPlayList()\"><img class=\"medium-button\" title=\"Lists\" src=\"images/list.svg\"></span><td>\
163   <td><span onclick=\"SavePlayList()\"><img class=\"medium-button\" title=\"Save current list\" src=\"images/download.svg\"></span><td>\
164   <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>\
165   </tr>\
166   </table>";
167
168   var itemsText="<table>\
169   <tr id=\"items_heading\">\
170   <td></td class=\"track_number\"><td class=\"file\">Title</td><td class=\"medium-button\" colspan=\"3\">Controls</td>\
171   </tr>";
172
173   var even = 0;
174   for (var key in returnedData) {
175        var rec=returnedData[key];
176        var name=GetFilename(rec["title"]);
177        try {
178          var name=decodeURI(name).replace(/%2C/g,",")
179        }  
180        catch(e) {
181          console.log(name)
182        }
183        var id=rec["id"];
184
185        if (even) { 
186          evText="itemEven"; 
187        } else { 
188          evText="itemOdd";
189        };
190
191        even = ! even;
192
193        itemsText = itemsText + "<tr id=\"track_"+id+"\" class=\"track "+evText+"\">\
194   <td class=\"track_number\">\
195   <a name=\""+id+"\">"+(Number(key)+1)+"</a></td>\
196   </td>\
197   <td class=\"file\">\
198   <span class=\"link\" onclick=\"PlaylistCommand('playitem',"+id+")\">"+name+"</span>\
199   </td>\
200   <td class=\"move\">\
201   <span onclick=\"PlaylistCommand('moveup',"+id+")\"><img class=\"small-button\" title=\"Move up\" src=\"images/up-arrow.svg\"></span>\
202   </td>\
203   <td class=\"move\">\
204   <span onclick=\"PlaylistCommand('movedown',"+id+")\"><img class=\"small-button\" title=\"Move down\" src=\"images/down-arrow.svg\"></span>\
205   </td>\
206   <td class=\"remove\">\
207   <span onclick=\"PlaylistCommand('remove',"+id+")\"><img class=\"small-button\" title=\"Remove\" src=\"images/cancel.svg\"></span>\
208   </td>\
209   </tr>"; 
210   }
211
212   itemsText = itemsText + "</table>";
213
214   document.getElementById('items').innerHTML=itemsText;
215   document.getElementById('playlist_menu_top').innerHTML=playlistMenuText;
216   document.getElementById('playlist_menu_bottom').innerHTML=playlistMenuText;
217 };
218
219 req.open("GET", urlbase+"playlist", true);
220 req.send();
221
222 }
223
224 function EditPlayList(dir) {
225
226 var req = new XMLHttpRequest();
227
228 req.onreadystatechange = function () {
229   if (this.readyState != 4 || this.status != 200) return;
230   var returnedData = JSON.parse(this.responseText);
231
232   var playlistMenuText = "<table>\
233   <tr>\
234   <td><span onclick=\"RefreshPageContent()\"><img class=\"medium-button\" title=\"Home\" src=\"images/list.svg\"></span><td>\
235   <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>\
236   </tr>\
237   </table>";
238
239   var itemsText= "<table>\
240   <tr id=\"items_heading\">\
241   <td></td class=\"track_number\"><td class=\"file\">Title</td><td colspan=\"2\">Controls</td>\
242   </tr>";
243
244   var even = 0;
245   if (dir) {
246     var lastSlash=dir.lastIndexOf("/");
247     if (lastSlash>0) {
248       var upperLevel=dir.slice(0,lastSlash);
249     } else {
250       var upperLevel="";
251     }
252     even = ! even;
253     var itemsText = itemsText + "<tr class=\"itemOdd\">\
254   <td class=\"track_number\"></td>\
255   <td class=\"file\"><span class=\"link\" onclick=\"EditPlayList('"+upperLevel+"')\">..</span></td>\
256   <td></td><td></td>";
257   } 
258
259   var i = 0;
260   for (var key in returnedData) {
261        var rec=returnedData[key];
262        var type=rec["type"];
263        var name=rec["name"];
264        var lastSlash=name.lastIndexOf("/");
265        if (lastSlash>0) {
266          var tailName=name.slice(lastSlash+1);
267        } else {
268          var tailName=name
269        };
270        try {
271          var tailName=decodeURI(tailName).replace(/%2C/g,",")
272        }  
273        catch(e) {
274          console.log(tailName)
275        }
276
277        if (type == "directory" || type == "file") {
278          if (even) { 
279            evText="itemEven"; 
280          } else { 
281            evText="itemOdd";
282          };
283
284          i = i + 1;
285          even = ! even;
286
287          itemsText = itemsText + "<tr class=\""+evText+"\">\
288            <td class=\"track_number\">\
289            <a name=\""+i+"\"></a></td>\
290            </td>";
291       
292          if (type == "directory") {
293            itemsText = itemsText + "<td class=\"file\">\
294              <span class=\"link\" onclick=\"EditPlayList('"+EscapeStr(name)+"')\">"+tailName+"</span></td><td>\
295              <span onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\"><img class=\"small-button\" title=\"Add\" src=\"images/plus.svg\"></span></td>";
296          }; 
297
298          if (type == "file") {
299            itemsText = itemsText + "<td class=\"file\">\
300              <span class=\"link\" onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\">"+tailName+"</span></td><td>\
301              <span onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\"><img class=\"small-button\" title=\"Add\" src=\"images/plus.svg\"></span></td>";
302          };
303
304          itemsText = itemsText + "</tr>";
305
306        }       
307        
308   }
309
310   var itemsText = itemsText+"</table>";
311   document.getElementById('items').innerHTML=itemsText;
312   document.getElementById('playlist_menu_top').innerHTML=playlistMenuText;
313   document.getElementById('playlist_menu_bottom').innerHTML=playlistMenuText;
314 };
315
316 if (!dir) { dir = ''; };
317
318 req.open("GET", urlbase+"lists|edit|"+dir, true);
319 req.send();
320
321 }
322
323 function LoadPlayList() {
324
325 var req = new XMLHttpRequest();
326
327 req.onreadystatechange = function () {
328   if (this.readyState != 4 || this.status != 200) return;
329   var returnedData = JSON.parse(this.responseText);
330   playlistMenuText="<table>\
331     <tr>\
332       <td><span onclick=\"RefreshPageContent()\"><img class=\"medium-button\" title=\"Home\" src=\"images/list.svg\"></span><td>\
333       <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>\
334     </tr>\
335     </table>";
336   itemsText="<table>\
337     <tr id=\"items_heading\">\
338       <td class=\"track_number\"></td><td class=\"file\">Name</td><td>Controls</td>\
339     </tr>";
340
341   var even = 0;
342   for (var key in returnedData) {
343        var name=returnedData[key];
344
345        if (even) { 
346          evText="itemEven"; 
347        } else { 
348          evText="itemOdd";
349        };
350
351        even = ! even;
352
353        itemsText = itemsText + "<tr class=\""+evText+"\">\
354       <td class=\"track_number\"><a name=\"0\"></a></td>\
355       <td class=\"file\"><span class=\"link\" onclick=\"PlaylistEditCommandRefFull('load','"+EscapeStr(name)+"')\">"+name+"</td>\
356       <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>\
357     </tr>";
358   }
359
360   itemsText=itemsText+"</table>";
361   document.getElementById('items').innerHTML=itemsText;
362   document.getElementById('playlist_menu_top').innerHTML=playlistMenuText;
363   document.getElementById('playlist_menu_bottom').innerHTML=playlistMenuText;
364 };
365
366 req.open("GET", urlbase+"lists|load", true);
367 req.send();
368
369 }
370
371 function SavePlayList() {
372
373 var name=window.prompt('List name','');
374
375 var req = new XMLHttpRequest();
376
377 req.onreadystatechange = function () {
378   if (this.readyState != 4 || this.status != 200) return;
379   if (this.responseText != 'OK') {
380     window.alert(this.responseText);
381   }
382 };
383
384 req.open("GET", urlbase+"lists|save|"+name, true);
385 req.send();
386
387 }
388
389 function DelPlayList(item) {
390
391 var req = new XMLHttpRequest();
392
393 req.onreadystatechange = function () {
394   if (this.readyState != 4 || this.status != 200) return;
395   LoadPlayList();
396   RefreshPageStatus();
397 };
398
399 req.open("GET", urlbase+"lists|delete|"+item, true);
400 req.send();
401
402 }
403
404 function RefreshPageContent() {
405   RefreshPlaylist();
406   RefreshPageStatus();
407 }
408
409 function Command(cmd) {
410
411 var req = new XMLHttpRequest();
412
413 req.onreadystatechange = function () {
414   if (this.readyState != 4 || this.status != 200) return;
415   RefreshPageStatus();
416 };
417
418 req.open("GET", urlbase+cmd, true);
419 req.send();
420
421 }
422
423 function PlaylistCommand(cmd,item) {
424
425 var req = new XMLHttpRequest();
426
427 req.onreadystatechange = function () {
428   if (this.readyState != 4 || this.status != 200) return;
429   RefreshPageContent();
430 };
431
432 req.open("GET", urlbase+"cpl|"+cmd+"|"+item, true);
433 req.send();
434
435 }
436
437 function PlaylistCommandRefStatus(cmd,item) {
438
439 var req = new XMLHttpRequest();
440
441 req.onreadystatechange = function () {
442   if (this.readyState != 4 || this.status != 200) return;
443   RefreshPageStatus();
444 };
445
446 req.open("GET", urlbase+"cpl|"+cmd+"|"+item, true);
447 req.send();
448
449 }
450
451 function PlaylistEditCommand(cmd,item) {
452
453 var req = new XMLHttpRequest();
454
455 req.onreadystatechange = function () {
456   if (this.readyState != 4 || this.status != 200) return;
457   RefreshPageStatus();
458 };
459
460 req.open("GET", urlbase+"lists|"+cmd+"|"+item, true);
461 req.send();
462
463 }
464
465 function PlaylistEditCommandRefFull(cmd,item) {
466
467 var req = new XMLHttpRequest();
468
469 req.onreadystatechange = function () {
470   if (this.readyState != 4 || this.status != 200) return;
471   RefreshPageContent();
472 };
473
474 req.open("GET", urlbase+"lists|"+cmd+"|"+item, true);
475 req.send();
476
477 }
478
479 function subscribe_status() {
480   var xhr = new XMLHttpRequest();
481
482   xhr.onreadystatechange = function() {
483     if (this.readyState != 4) return;
484     if (this.status == 200) {
485       RefreshPageStatus()
486       setTimeout(subscribe_status,1000)
487     } else {
488       setTimeout(subscribe_status,15000)
489     }
490   }
491   xhr.open("GET", urlbase+"idle", true);
492   xhr.send();
493 }
494
495 setTimeout(subscribe_status,5000)
496 setInterval(PeriodicRefreshTime, 1000);