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)