X-Git-Url: https://git.rvb.name/mpd-lua.git/blobdiff_plain/7e7b0d2b9ec3b3c62370de418cf9b0a4a667b1fb..5d95eb041ee13d0b7adb93b4e52a616b89b45094:/ajax/mpd.js

diff --git a/ajax/mpd.js b/ajax/mpd.js
index 9cd2667..ccee6fb 100644
--- a/ajax/mpd.js
+++ b/ajax/mpd.js
@@ -1,4 +1,5 @@
 urlbase="mpd.lua?"
+minScrollHeight=200
 
 function GetFilename(url)
 {
@@ -11,6 +12,21 @@ function EscapeStr(str) {
   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();
@@ -18,9 +34,10 @@ function RefreshPageStatus() {
   req.onreadystatechange = function () {
     if (this.readyState != 4 || this.status != 200) return;
     var returnedData = JSON.parse(this.responseText);
-    nowPlaying = GetFilename(returnedData['current_playing'])
-    document.title='MPD Player: '+nowPlaying;
-    nowPlaying = (1+Number(returnedData['song'])) + '/' + returnedData['playlistlength'] + ' '+nowPlaying;
+    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>'
     }
@@ -36,12 +53,24 @@ function RefreshPageStatus() {
       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() {
@@ -52,20 +81,18 @@ req.onreadystatechange = function () {
   if (this.readyState != 4 || this.status != 200) return;
   var returnedData = JSON.parse(this.responseText);
 
-  var text = "<div id=\"playlist_menu\">\
-  <table>\
+  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>\
-  </div>\
-  <div id=\"items\">\
-  <table>\
+  </table>";
+
+  var itemsText="<table>\
   <tr id=\"items_heading\">\
-  <td></td><td>Title</td><th colspan=\"4\">Controls</th>\
+  <td></td class=\"track_number\"><td class=\"file\">Title</td><td class=\"button\" colspan=\"3\">Controls</td>\
   </tr>";
 
   var even = 0;
@@ -82,39 +109,30 @@ req.onreadystatechange = function () {
 
        even = ! even;
 
-       text = text + "<tr id=\""+evText+"\">\
-  <td id=\"track_number\">\
-  <a name=\""+id+"\"></a></td>\
+       itemsText = itemsText + "<tr id=\"track_"+id+"\" class=\"track "+evText+"\">\
+  <td class=\"track_number\">\
+  <a name=\""+id+"\">"+(Number(id)+1)+"</a></td>\
   </td>\
-  <td id=\"file\">\
+  <td class=\"file\">\
   <span class=\"button\" onclick=\"PlaylistCommand('playitem',"+id+")\">"+name+"</span>\
   </td>\
-  <td id=\"move\">\
+  <td class=\"move\">\
   <span class=\"button\" onclick=\"PlaylistCommand('moveup',"+id+")\"><img width=\"15\" src=\"images/up.png\"></span>\
   </td>\
-  <td id=\"move\">\
+  <td class=\"move\">\
   <span class=\"button\" onclick=\"PlaylistCommand('movedown',"+id+")\"><img width=\"15\" src=\"images/down.png\"></span>\
   </td>\
-  <td id=\"remove\">\
+  <td class=\"remove\">\
   <span class=\"button\" onclick=\"PlaylistCommand('remove',"+id+")\"><img width=\"15\" src=\"images/remove.png\"></span>\
   </td>\
   </tr>"; 
   }
 
-  text = text + "</table>\
-  </div>\
-  <div id=\"playlist_menu\">\
-  <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>\
-</div>";
+  itemsText = itemsText + "</table>";
 
-  document.getElementById('playlist').innerHTML=text;
+  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);
@@ -130,20 +148,19 @@ req.onreadystatechange = function () {
   if (this.readyState != 4 || this.status != 200) return;
   var returnedData = JSON.parse(this.responseText);
 
-  var text = "<div id=\"playlist_menu\">\
-  <table>\
+  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>\
-  </div>\
-  <div id=\"items\">\
-  <table>\
+  </table>";
+
+  var itemsText= "<table>\
   <tr id=\"items_heading\">\
-  <td></td><td>Title</td><th colspan=\"2\">Controls</th>\
+  <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) {
@@ -151,13 +168,13 @@ req.onreadystatechange = function () {
     } else {
       var upperLevel="";
     }
-    var text = text + "<tr id=\"home\">\
-  <td></td>\
-  <td><span class=\"button\" onclick=\"EditPlayList('"+upperLevel+"')\"><img width=\"20\" src=\"images/left.png\"></span></td>\
+    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 even = 0;
   var i = 0;
   for (var key in returnedData) {
        var rec=returnedData[key];
@@ -180,39 +197,33 @@ req.onreadystatechange = function () {
          i = i + 1;
          even = ! even;
 
-         text = text + "<tr id=\""+evText+"\">\
-           <td id=\"track_number\">\
+         itemsText = itemsText + "<tr class=\""+evText+"\">\
+           <td class=\"track_number\">\
            <a name=\""+i+"\"></a></td>\
            </td>";
       
          if (type == "directory") {
-           text = text + "<td id=\"file\">\
+           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") {
-           text = text + "<td id=\"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>";
          };
 
-         text = text + "</tr>";
+         itemsText = itemsText + "</tr>";
 
        }       
        
   }
 
-  var text = text+"</table></div>\
-  <div id=\"playlist_menu\">\
-  <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('addall','"+EscapeStr(dir)+"') : false;\" ><img width=\"20\" src=\"images/addall.png\"></span><td>\
-  </tr>\
-  </table>\
-  </div>";
-  document.getElementById('playlist').innerHTML=text;
+  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 = ''; };
@@ -229,18 +240,15 @@ var req = new XMLHttpRequest();
 req.onreadystatechange = function () {
   if (this.readyState != 4 || this.status != 200) return;
   var returnedData = JSON.parse(this.responseText);
-  text="<div id=\"playlist_menu\">\
-    <table>\
+  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>\
-    </div>\
-    <div id=\"items\">\
-    <table>\
+    </table>";
+  itemsText="<table>\
     <tr id=\"items_heading\">\
-      <td></td><td>Name</td><td>Controls</td>\
+      <td class=\"track_number\"></td><td class=\"file\">Name</td><td class=\"button\">Controls</td>\
     </tr>";
 
   var even = 0;
@@ -255,23 +263,17 @@ req.onreadystatechange = function () {
 
        even = ! even;
 
-       text = text + "<tr id=\""+evText+"\">\
-      <td id=\"track_number\"><a name=\"0\"></a></td>\
-      <td id=\"file\"><span class=\"button\" onclick=\"PlaylistEditCommandRefFull('load','"+EscapeStr(name)+"')\">"+name+"</td>\
-      <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>\
+       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>";
   }
 
-  text=text+"</table></div><div id=\"playlist_menu\">\
-    <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>\
-    </div>";
-
-  document.getElementById('playlist').innerHTML=text;
+  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);
@@ -303,8 +305,8 @@ var req = new XMLHttpRequest();
 
 req.onreadystatechange = function () {
   if (this.readyState != 4 || this.status != 200) return;
-  RefreshPageStatus();
   LoadPlayList();
+  RefreshPageStatus();
 };
 
 req.open("GET", urlbase+"lists|delete|"+item, true);
@@ -313,10 +315,8 @@ req.send();
 }
 
 function RefreshPageContent() {
-
-  RefreshPageStatus();
   RefreshPlaylist();
-
+  RefreshPageStatus();
 }
 
 function Command(cmd) {
@@ -389,4 +389,20 @@ req.send();
 
 }
 
-setInterval(RefreshPageStatus, 10000);
+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)