ajax/mpd.js

   1 urlbase="mpd.lua?"
   2
   3 function GetFilename(url)
   4 {
   5    if (url)
   6    return url.split('/').pop().split('#')[0].split('?')[0];
   7 }
   8
   9 function EscapeStr(str) {
  10   res = str.replace(/'/g,"\\'");
  11   return res;
  12 }
  13
  14 function RefreshPageStatus() {
  15
  16   var req = new XMLHttpRequest();
  17
  18   req.onreadystatechange = function () {
  19     if (this.readyState != 4 || this.status != 200) return;
  20     var returnedData = JSON.parse(this.responseText);
  21     nowPlaying = GetFilename(returnedData['current_playing'])
  22     document.title='MPD Player: '+nowPlaying;
  23     nowPlaying = (1+Number(returnedData['song'])) + '/' + returnedData['playlistlength'] + ' '+nowPlaying;
  24     if (returnedData['state']=='stop') {
  25       nowPlaying = '<font color="gray">' + nowPlaying+ '</font>'
  26     }
  27     document.getElementById('nowplaying_content').innerHTML=nowPlaying;
  28     if (returnedData["state"]=="play") {
  29       document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('pause')\"><img class=\"button\" src=\"images/pause.png\"></span>";
  30     } else {
  31       document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('play')\"><img class=\"button\" src=\"images/play.png\"></span>";
  32     }
  33     if (returnedData["repeat"]=="1") {
  34       document.getElementById('repeatstate').innerHTML="<img src=\"images/repeaton.png\"></a>";
  35     } else {
  36       document.getElementById('repeatstate').innerHTML="<img src=\"images/repeatoff.png\"></a>";
  37     }
  38     document.getElementById('volume_total').innerHTML="<div id=\"volume_actual\" style=\"width:"+returnedData["volume"]+"%\">";
  39   };
  40
  41   req.open("GET", urlbase+"status", true);
  42   req.send();
  43
  44
  45 }
  46
  47 function RefreshPlaylist() {
  48
  49 var req = new XMLHttpRequest();
  50
  51 req.onreadystatechange = function () {
  52   if (this.readyState != 4 || this.status != 200) return;
  53   var returnedData = JSON.parse(this.responseText);
  54
  55   var text = "<div id=\"playlist_menu\">\
  56   <table>\
  57   <tr>\
  58   <td><span class=\"button\" onclick=\"EditPlayList()\"><img width=\"20\" src=\"images/songs.png\"></span><td>\
  59   <td><span class=\"button\" onclick=\"LoadPlayList()\"><img width=\"20\" src=\"images/lists.png\"></span><td>\
  60   <td><span class=\"button\" onclick=\"SavePlayList()\"><img width=\"20\" src=\"images/save.png\"></span><td>\
  61   <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>\
  62   </tr>\
  63   </table>\
  64   </div>\
  65   <div id=\"items\">\
  66   <table>\
  67   <tr id=\"items_heading\">\
  68   <td></td><td>Title</td><th colspan=\"4\">Controls</th>\
  69   </tr>";
  70
  71   var even = 0;
  72   for (var key in returnedData) {
  73        var rec=returnedData[key];
  74        var name=GetFilename(rec["name"]);
  75        var id=rec["id"];
  76
  77        if (even) {
  78          evText="itemEven";
  79        } else {
  80          evText="itemOdd";
  81        };
  82
  83        even = ! even;
  84
  85        text = text + "<tr id=\""+evText+"\">\
  86   <td id=\"track_number\">\
  87   <a name=\""+id+"\"></a></td>\
  88   </td>\
  89   <td id=\"file\">\
  90   <span class=\"button\" onclick=\"PlaylistCommand('playitem',"+id+")\">"+name+"</span>\
  91   </td>\
  92   <td id=\"move\">\
  93   <span class=\"button\" onclick=\"PlaylistCommand('moveup',"+id+")\"><img width=\"15\" src=\"images/up.png\"></span>\
  94   </td>\
  95   <td id=\"move\">\
  96   <span class=\"button\" onclick=\"PlaylistCommand('movedown',"+id+")\"><img width=\"15\" src=\"images/down.png\"></span>\
  97   </td>\
  98   <td id=\"remove\">\
  99   <span class=\"button\" onclick=\"PlaylistCommand('remove',"+id+")\"><img width=\"15\" src=\"images/remove.png\"></span>\
 100   </td>\
 101   </tr>";
 102   }
 103
 104   text = text + "</table>\
 105   </div>\
 106   <div id=\"playlist_menu\">\
 107   <table>\
 108   <tr>\
 109   <td><span class=\"button\" onclick=\"EditPlayList()\"><img width=\"20\" src=\"images/songs.png\"></span><td>\
 110   <td><span class=\"button\" onclick=\"LoadPlayList()\"><img width=\"20\" src=\"images/lists.png\"></span><td>\
 111   <td><span class=\"button\" onclick=\"SavePlayList()\"><img width=\"20\" src=\"images/save.png\"></span><td>\
 112   <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>\
 113   </tr>\
 114   </table>\
 115 </div>";
 116
 117   document.getElementById('playlist').innerHTML=text;
 118 };
 119
 120 req.open("GET", urlbase+"playlist", true);
 121 req.send();
 122
 123 }
 124
 125 function EditPlayList(dir) {
 126
 127 var req = new XMLHttpRequest();
 128
 129 req.onreadystatechange = function () {
 130   if (this.readyState != 4 || this.status != 200) return;
 131   var returnedData = JSON.parse(this.responseText);
 132
 133   var text = "<div id=\"playlist_menu\">\
 134   <table>\
 135   <tr>\
 136   <td><span class=\"button\" onclick=\"RefreshPlaylist()\"><img width=\"20\" src=\"images/playlist.png\"></span><td>\
 137   <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>\
 138   </tr>\
 139   </table>\
 140   </div>\
 141   <div id=\"items\">\
 142   <table>\
 143   <tr id=\"items_heading\">\
 144   <td></td><td>Title</td><th colspan=\"2\">Controls</th>\
 145   </tr>";
 146
 147   if (dir) {
 148     var lastSlash=dir.lastIndexOf("/");
 149     if (lastSlash>0) {
 150       var upperLevel=dir.slice(0,lastSlash);
 151     } else {
 152       var upperLevel="";
 153     }
 154     var text = text + "<tr id=\"home\">\
 155   <td></td>\
 156   <td><span class=\"button\" onclick=\"EditPlayList('"+upperLevel+"')\"><img width=\"20\" src=\"images/left.png\"></span></td>\
 157   <td></td><td></td>";
 158   }
 159
 160   var even = 0;
 161   var i = 0;
 162   for (var key in returnedData) {
 163        var rec=returnedData[key];
 164        var type=rec["type"];
 165        var name=rec["name"];
 166        var lastSlash=name.lastIndexOf("/");
 167        if (lastSlash>0) {
 168          var tailName=name.slice(lastSlash+1);
 169        } else {
 170          var tailName=name
 171        };
 172
 173        if (type == "directory" || type == "file") {
 174          if (even) {
 175            evText="itemEven";
 176          } else {
 177            evText="itemOdd";
 178          };
 179
 180          i = i + 1;
 181          even = ! even;
 182
 183          text = text + "<tr id=\""+evText+"\">\
 184            <td id=\"track_number\">\
 185            <a name=\""+i+"\"></a></td>\
 186            </td>";
 187
 188          if (type == "directory") {
 189            text = text + "<td id=\"file\">\
 190              <span class=\"button\" onclick=\"EditPlayList('"+EscapeStr(name)+"')\">"+tailName+"</span></td><td>\
 191              <span class=\"button\" onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\"><img width=\"15\" src=\"images/plus.png\"></span></td>";
 192          };
 193
 194          if (type == "file") {
 195            text = text + "<td id=\"file\">\
 196              <span class=\"button\" onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\">"+tailName+"</span></td><td>\
 197              <span class=\"button\" onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\"><img width=\"15\" src=\"images/plus.png\"></span></td>";
 198          };
 199
 200          text = text + "</tr>";
 201
 202        }
 203
 204   }
 205
 206   var text = text+"</table></div>\
 207   <div id=\"playlist_menu\">\
 208   <table>\
 209   <tr>\
 210   <td><span class=\"button\" onclick=\"RefreshPlaylist()\"><img width=\"20\" src=\"images/playlist.png\"></span><td>\
 211   <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>\
 212   </tr>\
 213   </table>\
 214   </div>";
 215   document.getElementById('playlist').innerHTML=text;
 216 };
 217
 218 if (!dir) { dir = ''; };
 219
 220 req.open("GET", urlbase+"lists|edit|"+dir, true);
 221 req.send();
 222
 223 }
 224
 225 function LoadPlayList() {
 226
 227 var req = new XMLHttpRequest();
 228
 229 req.onreadystatechange = function () {
 230   if (this.readyState != 4 || this.status != 200) return;
 231   var returnedData = JSON.parse(this.responseText);
 232   text="<div id=\"playlist_menu\">\
 233     <table>\
 234     <tr>\
 235       <td><span class=\"button\" onclick=\"RefreshPlaylist()\"><img width=\"20\" src=\"images/playlist.png\"></span><td>\
 236       <td><span class=\"button\" onclick=\"confirm('Clear current playlist, are you sure?') ? PlaylistCommandRefStatus('clear') : false;\" ><img width=\"20\" src=\"images/removeall.png\"></span><td>\
 237     </tr>\
 238     </table>\
 239     </div>\
 240     <div id=\"items\">\
 241     <table>\
 242     <tr id=\"items_heading\">\
 243       <td></td><td>Name</td><td>Controls</td>\
 244     </tr>";
 245
 246   var even = 0;
 247   for (var key in returnedData) {
 248        var name=returnedData[key];
 249
 250        if (even) {
 251          evText="itemEven";
 252        } else {
 253          evText="itemOdd";
 254        };
 255
 256        even = ! even;
 257
 258        text = text + "<tr id=\""+evText+"\">\
 259       <td id=\"track_number\"><a name=\"0\"></a></td>\
 260       <td id=\"file\"><span class=\"button\" onclick=\"PlaylistEditCommandRefFull('load','"+EscapeStr(name)+"')\">"+name+"</td>\
 261       <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>\
 262     </tr>";
 263   }
 264
 265   text=text+"</table></div><div id=\"playlist_menu\">\
 266     <table>\
 267     <tr>\
 268       <td><span class=\"button\" onclick=\"RefreshPlaylist()\"><img width=\"20\" src=\"images/playlist.png\"></span><td>\
 269       <td><span class=\"button\" onclick=\"confirm('Clear current playlist, are you sure?') ? PlaylistCommandRefStatus('clear') : false;\" ><img width=\"20\" src=\"images/removeall.png\"></span><td>\
 270     </tr>\
 271     </table>\
 272     </div>";
 273
 274   document.getElementById('playlist').innerHTML=text;
 275 };
 276
 277 req.open("GET", urlbase+"lists|load", true);
 278 req.send();
 279
 280 }
 281
 282 function SavePlayList() {
 283
 284 var name=window.prompt('List name','');
 285
 286 var req = new XMLHttpRequest();
 287
 288 req.onreadystatechange = function () {
 289   if (this.readyState != 4 || this.status != 200) return;
 290   if (this.responseText != 'OK') {
 291     window.alert(this.responseText);
 292   }
 293 };
 294
 295 req.open("GET", urlbase+"lists|save|"+name, true);
 296 req.send();
 297
 298 }
 299
 300 function DelPlayList(item) {
 301
 302 var req = new XMLHttpRequest();
 303
 304 req.onreadystatechange = function () {
 305   if (this.readyState != 4 || this.status != 200) return;
 306   RefreshPageStatus();
 307   LoadPlayList();
 308 };
 309
 310 req.open("GET", urlbase+"lists|delete|"+item, true);
 311 req.send();
 312
 313 }
 314
 315 function RefreshPageContent() {
 316
 317   RefreshPageStatus();
 318   RefreshPlaylist();
 319
 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 setInterval(RefreshPageStatus, 10000);