Переделка интерфейса с использованием SVG-иконок, добавлен счетчик времени и кнопки...
[mpd-lua.git] / ajax / mpd.js
diff --git a/ajax/mpd.js b/ajax/mpd.js
deleted file mode 100644 (file)
index ccee6fb..0000000
+++ /dev/null
@@ -1,408 +0,0 @@
-urlbase="mpd.lua?"
-minScrollHeight=200
-
-function GetFilename(url)
-{
-   if (url)
-   return url.split('/').pop().split('#')[0].split('?')[0];
-}
-
-function EscapeStr(str) {
-  res = str.replace(/'/g,"\\'");
-  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);
-    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('nowplaying_content').innerHTML=nowPlaying;
-    if (returnedData["state"]=="play") {
-      document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('pause')\"><img class=\"button\" src=\"images/pause.png\"></span>";
-    } else {
-      document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('play')\"><img class=\"button\" src=\"images/play.png\"></span>";
-    }
-    if (returnedData["repeat"]=="1") {
-      document.getElementById('repeatstate').innerHTML="<img src=\"images/repeaton.png\"></a>";
-    } else {
-      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() {
-
-var req = new XMLHttpRequest();
-
-req.onreadystatechange = function () {
-  if (this.readyState != 4 || this.status != 200) return;
-  var returnedData = JSON.parse(this.responseText);
-
-  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>";
-
-  var itemsText="<table>\
-  <tr id=\"items_heading\">\
-  <td></td class=\"track_number\"><td class=\"file\">Title</td><td class=\"button\" colspan=\"3\">Controls</td>\
-  </tr>";
-
-  var even = 0;
-  for (var key in returnedData) {
-       var rec=returnedData[key];
-       var name=GetFilename(rec["name"]);
-       var id=rec["id"];
-
-       if (even) { 
-         evText="itemEven"; 
-       } else { 
-         evText="itemOdd";
-       };
-
-       even = ! even;
-
-       itemsText = itemsText + "<tr id=\"track_"+id+"\" class=\"track "+evText+"\">\
-  <td class=\"track_number\">\
-  <a name=\""+id+"\">"+(Number(id)+1)+"</a></td>\
-  </td>\
-  <td class=\"file\">\
-  <span class=\"button\" onclick=\"PlaylistCommand('playitem',"+id+")\">"+name+"</span>\
-  </td>\
-  <td class=\"move\">\
-  <span class=\"button\" onclick=\"PlaylistCommand('moveup',"+id+")\"><img width=\"15\" src=\"images/up.png\"></span>\
-  </td>\
-  <td class=\"move\">\
-  <span class=\"button\" onclick=\"PlaylistCommand('movedown',"+id+")\"><img width=\"15\" src=\"images/down.png\"></span>\
-  </td>\
-  <td class=\"remove\">\
-  <span class=\"button\" onclick=\"PlaylistCommand('remove',"+id+")\"><img width=\"15\" src=\"images/remove.png\"></span>\
-  </td>\
-  </tr>"; 
-  }
-
-  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+"playlist", true);
-req.send();
-
-}
-
-function EditPlayList(dir) {
-
-var req = new XMLHttpRequest();
-
-req.onreadystatechange = function () {
-  if (this.readyState != 4 || this.status != 200) return;
-  var returnedData = JSON.parse(this.responseText);
-
-  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>";
-
-  var itemsText= "<table>\
-  <tr id=\"items_heading\">\
-  <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) {
-      var upperLevel=dir.slice(0,lastSlash);
-    } else {
-      var upperLevel="";
-    }
-    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 i = 0;
-  for (var key in returnedData) {
-       var rec=returnedData[key];
-       var type=rec["type"];
-       var name=rec["name"];
-       var lastSlash=name.lastIndexOf("/");
-       if (lastSlash>0) {
-         var tailName=name.slice(lastSlash+1);
-       } else {
-         var tailName=name
-       };
-
-       if (type == "directory" || type == "file") {
-         if (even) { 
-           evText="itemEven"; 
-         } else { 
-           evText="itemOdd";
-         };
-
-         i = i + 1;
-         even = ! even;
-
-         itemsText = itemsText + "<tr class=\""+evText+"\">\
-           <td class=\"track_number\">\
-           <a name=\""+i+"\"></a></td>\
-           </td>";
-      
-         if (type == "directory") {
-           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") {
-           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>";
-         };
-
-         itemsText = itemsText + "</tr>";
-
-       }       
-       
-  }
-
-  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.open("GET", urlbase+"lists|edit|"+dir, true);
-req.send();
-
-}
-
-function LoadPlayList() {
-
-var req = new XMLHttpRequest();
-
-req.onreadystatechange = function () {
-  if (this.readyState != 4 || this.status != 200) return;
-  var returnedData = JSON.parse(this.responseText);
-  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>";
-  itemsText="<table>\
-    <tr id=\"items_heading\">\
-      <td class=\"track_number\"></td><td class=\"file\">Name</td><td class=\"button\">Controls</td>\
-    </tr>";
-
-  var even = 0;
-  for (var key in returnedData) {
-       var name=returnedData[key];
-
-       if (even) { 
-         evText="itemEven"; 
-       } else { 
-         evText="itemOdd";
-       };
-
-       even = ! even;
-
-       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>";
-  }
-
-  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.send();
-
-}
-
-function SavePlayList() {
-
-var name=window.prompt('List name','');
-
-var req = new XMLHttpRequest();
-
-req.onreadystatechange = function () {
-  if (this.readyState != 4 || this.status != 200) return;
-  if (this.responseText != 'OK') {
-    window.alert(this.responseText);
-  }
-};
-
-req.open("GET", urlbase+"lists|save|"+name, true);
-req.send();
-
-}
-
-function DelPlayList(item) {
-
-var req = new XMLHttpRequest();
-
-req.onreadystatechange = function () {
-  if (this.readyState != 4 || this.status != 200) return;
-  LoadPlayList();
-  RefreshPageStatus();
-};
-
-req.open("GET", urlbase+"lists|delete|"+item, true);
-req.send();
-
-}
-
-function RefreshPageContent() {
-  RefreshPlaylist();
-  RefreshPageStatus();
-}
-
-function Command(cmd) {
-
-var req = new XMLHttpRequest();
-
-req.onreadystatechange = function () {
-  if (this.readyState != 4 || this.status != 200) return;
-  RefreshPageStatus();
-};
-
-req.open("GET", urlbase+cmd, true);
-req.send();
-
-}
-
-function PlaylistCommand(cmd,item) {
-
-var req = new XMLHttpRequest();
-
-req.onreadystatechange = function () {
-  if (this.readyState != 4 || this.status != 200) return;
-  RefreshPageContent();
-};
-
-req.open("GET", urlbase+"cpl|"+cmd+"|"+item, true);
-req.send();
-
-}
-
-function PlaylistCommandRefStatus(cmd,item) {
-
-var req = new XMLHttpRequest();
-
-req.onreadystatechange = function () {
-  if (this.readyState != 4 || this.status != 200) return;
-  RefreshPageStatus();
-};
-
-req.open("GET", urlbase+"cpl|"+cmd+"|"+item, true);
-req.send();
-
-}
-
-function PlaylistEditCommand(cmd,item) {
-
-var req = new XMLHttpRequest();
-
-req.onreadystatechange = function () {
-  if (this.readyState != 4 || this.status != 200) return;
-  RefreshPageStatus();
-};
-
-req.open("GET", urlbase+"lists|"+cmd+"|"+item, true);
-req.send();
-
-}
-
-function PlaylistEditCommandRefFull(cmd,item) {
-
-var req = new XMLHttpRequest();
-
-req.onreadystatechange = function () {
-  if (this.readyState != 4 || this.status != 200) return;
-  RefreshPageContent();
-};
-
-req.open("GET", urlbase+"lists|"+cmd+"|"+item, true);
-req.send();
-
-}
-
-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)