"Резиновая" верстка и изменение стиля.

diff --git a/ajax/mpd.js b/ajax/mpd.js
index 9cd26672e7af01e828fda93b47dd9ff6291cb33a..ccee6fb07cc54d84a442719d8bd0f67f27f85e8a 100644 (file)
--- a/ajax/mpd.js
+++ b/ajax/mpd.js
@@ -1,4 +1,5 @@
 urlbase="mpd.lua?"
 urlbase="mpd.lua?"

+minScrollHeight=200

 
 function GetFilename(url)
 {
 
 function GetFilename(url)
 {


@@ -11,6 +12,21 @@ function EscapeStr(str) {
   return res;
 }
 
   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();
 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);
   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>'
     }
     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"]+"%\">";
       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();
 
   };
 
   req.open("GET", urlbase+"status", true);
   req.send();
 

-

 }
 
 function RefreshPlaylist() {
 }
 
 function RefreshPlaylist() {


@@ -52,20 +81,18 @@ req.onreadystatechange = function () {
   if (this.readyState != 4 || this.status != 200) return;
   var returnedData = JSON.parse(this.responseText);
 
   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>\
   <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\">\
   <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;
   </tr>";
 
   var even = 0;


@@ -82,39 +109,30 @@ req.onreadystatechange = function () {
 
        even = ! even;
 
 
        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>\

-  <td id=\"file\">\
+  <td class=\"file\">\

   <span class=\"button\" onclick=\"PlaylistCommand('playitem',"+id+")\">"+name+"</span>\
   </td>\
   <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>\
   <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>\
   <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>"; 
   }
 
   <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);
 };
 
 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);
 
   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>\
   <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\">\
   <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>";
 
   </tr>";
 

+  var even = 0;

   if (dir) {
     var lastSlash=dir.lastIndexOf("/");
     if (lastSlash>0) {
   if (dir) {
     var lastSlash=dir.lastIndexOf("/");
     if (lastSlash>0) {


@@ -151,13 +168,13 @@ req.onreadystatechange = function () {
     } else {
       var upperLevel="";
     }
     } 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>";
   } 
 
   <td></td><td></td>";
   } 
 

-  var even = 0;

   var i = 0;
   for (var key in returnedData) {
        var rec=returnedData[key];
   var i = 0;
   for (var key in returnedData) {
        var rec=returnedData[key];


@@ -180,39 +197,33 @@ req.onreadystatechange = function () {
          i = i + 1;
          even = ! even;
 
          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") {
            <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") {
              <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>";
          };
 
              <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 = ''; };
 };
 
 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);
 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>\
     <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\">\
     <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;
     </tr>";
 
   var even = 0;


@@ -255,23 +263,17 @@ req.onreadystatechange = function () {
 
        even = ! even;
 
 
        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>";
   }
 
     </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);
 };
 
 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;
 
 req.onreadystatechange = function () {
   if (this.readyState != 4 || this.status != 200) return;

-  RefreshPageStatus();

   LoadPlayList();
   LoadPlayList();

+  RefreshPageStatus();

 };
 
 req.open("GET", urlbase+"lists|delete|"+item, true);
 };
 
 req.open("GET", urlbase+"lists|delete|"+item, true);


@@ -313,10 +315,8 @@ req.send();
 }
 
 function RefreshPageContent() {
 }
 
 function RefreshPageContent() {

-
-  RefreshPageStatus();

   RefreshPlaylist();
   RefreshPlaylist();

-
+  RefreshPageStatus();

 }
 
 function Command(cmd) {
 }
 
 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)

diff --git a/css/general.css b/css/general.css
index 6bb13ccf56f4722e70208045c74e2b7dd39ed6b1..62e4e5642b2807c72e14caa1d6f85f339bb82588 100644 (file)
--- a/css/general.css
+++ b/css/general.css
@@ -1,24 +1,13 @@
-/*
-#525356
-*/
-
-
-
-* {
-       margin:0;
-}
-

 body {
 body {

+       margin: 0px;

        text-align: center;
        font-family: arial,sans-serif;
        text-align: center;
        font-family: arial,sans-serif;

-       margin-top: 15px;
-       margin-bottom: 15px;
-       color: #AEAEAE;
+       color: Snow;

 }
 
 a {
        text-decoration: none;
 }
 
 a {
        text-decoration: none;

-       color: #AEAEAE;
+       color: White;

 }
 
 table
 }
 
 table


@@ -48,154 +37,133 @@ button
        cursor: pointer;
 }
 
        cursor: pointer;
 }
 

-.trackno
-{
-       text-align: right;
-       vertical-align: top;
-       padding: 0px 0px 5px 0px;
-}
-
-#heading_tbl {
-       width: 400px
-}
-

 #frame {
        text-align: left;
 #frame {
        text-align: left;

-       border: 1px solid #000;
-       width: 400px;
-       background: url(../images/bg.png) no-repeat #251616;
-       margin: 0 auto;
+       border: 1px solid Black;
+       background: DarkSlateGray;
+       margin: 0;

 }
 
 }
 

-

 #nowplaying_heading {
        font-size: 1.3em;
 #nowplaying_heading {
        font-size: 1.3em;

-       font-wieght: bold;
-       height: 30px;   
-       background: url(../images/control_bg.png) repeat-x;
-       border-bottom: 1px solid #525356;
+       font-weight: bold;
+       padding: 5px;
+       background: linear-gradient(DarkSlateGray,Black);
+       border-bottom: 1px solid Black;
+       border-top: 1px solid Black;
+}
+
+#heading_tbl {
+       width: 100%;

 }
 
 #nowplaying_content {
 }
 
 #nowplaying_content {

-       margin: 10px 5px 10px 5px;
+       margin: 10px 10% 10px 10%;

        text-align: center;
        text-align: center;

-       border: 1px solid #525356;
-       width: 380px;
-       height: 60px;
+       border: 1px solid LightGray;
+       height: 3em;

        padding: 10px 0px 5px 0px;
        padding: 10px 0px 5px 0px;

-       background: url(../images/playing_bg.png);
+       background: SaddleBrown;

        font-weight: bold;
        font-weight: bold;

-       color: #fff;    
+       color: White;   

 }
 
 #control_buttons {
        text-align: center;
 }
 
 #control_buttons {
        text-align: center;

-       width: 390px;

        margin: 10px 5px 10px 5px;
 }
 
 #control_buttons table {
        margin-left: auto; 
        margin: 10px 5px 10px 5px;
 }
 
 #control_buttons table {
        margin-left: auto; 

-       margin-right: auto;
+  margin-right: auto;

 }
 
 
 #control_volume {
        text-align: center;
 }
 
 
 #control_volume {
        text-align: center;

-       width: 390px;

        margin: 10px 5px 10px 5px;
 }
 
 #control_volume table {
        margin-left: auto; 
        margin: 10px 5px 10px 5px;
 }
 
 #control_volume table {
        margin-left: auto; 

-       margin-right: auto;
+       margin-right: auto;

 }
 
 }
 

-#playlist_menu {
-        font-wieght: bold;
-        height: 24px;
-        background: url(../images/control_bg.png) repeat-x;
-        border-top: 2px solid #525356;
-       margin-top: 5px;
-       margin-bottom: 5px;
+.playlist_menu {
+  font-weight: bold;
+  height: 24px;
+       padding: 5px;
+  background: linear-gradient(DarkSlateGray,Black);
+  border-bottom: 1px solid Black;
+  border-top: 1px solid Black;

 }
 
 }
 

+.home {
+  text-align: left;
+  font-size: 1.0em;
+  font-weight: bold;
+  background: linear-gradient(DarkSlateGray,Black);
+  border-bottom: 2px solid Black;
+  border-top: 2px solid DarkSlateGray;
+}
+
+

 #items_heading {
        text-align: center;
 #items_heading {
        text-align: center;

+       width: 100%;

        font-size: 1.0em;
        font-weight:bold;
        font-size: 1.0em;
        font-weight:bold;

-       border-bottom: 1px solid #525356;
-       border-top: 1px solid #525356;
-       background-color: #333;
-}
-
-#home {
-       text-align: left;
-        font-size: 1.0em;
-        font-weight: bold;
-       border-bottom: 3px solid #525356;
-        background-color: #251616;
+       border-bottom: 1px solid DimGray;
+       border-top: 1px solid DimGray;
+       background: DarkSlateGray;

 }
 
 #items {
        font-size: 0.9em;
        text-align: center;
 }
 
 #items {
        font-size: 0.9em;
        text-align: center;

-       min-height: 400px;
-        max-height: 600px;
-       background: url(../images/playing_bg.png);

        overflow-y: scroll;
 }
 
 #items table {
        overflow-y: scroll;
 }
 
 #items table {

-       width: 380px;
-       margin: 0px 5px 0px 5px;
-       border: 1px solid  #525356;
+       border: 1px solid DimGray;

 }
 
 }
 

-#file {
+.file {

        text-align: left;
        width: 100%;
        text-align: left;
        width: 100%;

-

 }
 
 
 }
 
 

-#itemEven{
-       background-color: #251616;
-
-}
-
-#itemOdd{
-        background-color: #333;
+.itemEven{
+       background-color: DarkSlateGray;

 }
 
 }
 

-#itemActive {
-       background: url(../images/playing_bg.png);
-       color: #fff;
+.itemOdd{
+  background-color: DimGray;

 }
 
 }
 

-#itemActive a {
-       color: #fff;
+.itemActive {
+       background: LightGray;
+       color: DarkSlateGray;

 }
 
 }
 

-
-#move img {
-       margin: 1px 1px 1px 1px;
+.itemActive a {
+       color: DarkSlateGray;

 }
 
 }
 

-#remove img {
-        margin: 1px 1px 1px 1px;
+.track_number {
+       text-align: right;

 }
 
 }
 

-

 #volume_total {
 #volume_total {

-       width: 100px;
-       border: 1px solid #525356;
-       height: 5px;
+       margin: 10px;
+       width: 200px;
+       border: 1px solid LightGray;
+       height: 0.6em;

 }
 
 
 #volume_actual {
 }
 
 
 #volume_actual {

-       background-color: #d9600c;
-       height:5px;
+       background-color: DarkOrange;
+       height: 0.6em;

 }
 }

-

diff --git a/images/addselected.png b/images/addselected.png
deleted file mode 100755 (executable)
index 52fbb78..0000000
Binary files a/images/addselected.png and /dev/null differ

diff --git a/images/bg.png b/images/bg.png
deleted file mode 100755 (executable)
index 5bd1ec8..0000000
Binary files a/images/bg.png and /dev/null differ

diff --git a/images/control_bg.png b/images/control_bg.png
deleted file mode 100755 (executable)
index 685abbb..0000000
Binary files a/images/control_bg.png and /dev/null differ

diff --git a/images/highlight.png b/images/highlight.png
deleted file mode 100755 (executable)
index 3710d71..0000000
Binary files a/images/highlight.png and /dev/null differ

diff --git a/images/left.png b/images/left.png
deleted file mode 100755 (executable)
index 00714b7..0000000
Binary files a/images/left.png and /dev/null differ

diff --git a/images/playing_bg.png b/images/playing_bg.png
deleted file mode 100755 (executable)
index f2e2337..0000000
Binary files a/images/playing_bg.png and /dev/null differ

diff --git a/images/prev.png b/images/prev.png
deleted file mode 100755 (executable)
index aedbbdf..0000000
Binary files a/images/prev.png and /dev/null differ

diff --git a/images/remall.png b/images/remall.png
deleted file mode 100755 (executable)
index ffb546a..0000000
Binary files a/images/remall.png and /dev/null differ

diff --git a/images/removeselected.png b/images/removeselected.png
deleted file mode 100755 (executable)
index 35294aa..0000000
Binary files a/images/removeselected.png and /dev/null differ

diff --git a/images/right.png b/images/right.png
deleted file mode 100755 (executable)
index 2ce6d36..0000000
Binary files a/images/right.png and /dev/null differ

diff --git a/index.html b/index.html
index 5df6090a58e2920fa3b10516972aa5f48ae39942..6a7c78a6b17335f059d2a65cd27c06e04968a2ab 100644 (file)
--- a/index.html
+++ b/index.html
@@ -6,12 +6,10 @@
        <link rel="stylesheet" href="css/general.css" type="text/css" />
        <script type="text/javascript" src="ajax/mpd.js"></script>
 </head>
        <link rel="stylesheet" href="css/general.css" type="text/css" />
        <script type="text/javascript" src="ajax/mpd.js"></script>
 </head>

-<body onload="RefreshPageContent()">
+<body onload="SetSize(); RefreshPageContent()" onresize="SetSize()">

 
 <div id="frame">
 
 <div id="frame">

-
-<div id="playerframe">
-
+<div id="header">

 <div id="nowplaying_heading">
 <table id="heading_tbl">
 <tr>
 <div id="nowplaying_heading">
 <table id="heading_tbl">
 <tr>


@@ -47,39 +45,17 @@
 </tr>
 </table>
 </div>
 </tr>
 </table>
 </div>

-</div>
-
-<div id="playlist">

 
 

-<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>
-<td><span class="button" onclick="PlaylistItemsCommand('removeselected')"><img width="20" src="images/removeselected.png"></span><td>
-</tr>
-</table>

 </div>
 
 </div>
 

+<div id="main">
+<div id="playlist_menu_top" class="playlist_menu">
+</div>

 <div id="items">
 </div>
 <div id="items">
 </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>
-<td><span class="button" onclick="PlaylistItemsCommand('removeselected')"><img width="20" src="images/removeselected.png"></span><td>
-</tr>
-</table>
+<div id="playlist_menu_bottom" class="playlist_menu">

 </div>
 </div>

-

 </div>
 
 </div>
 </div>
 
 </div>

-

 </body>
 </body>

diff --git a/mpd.lua b/mpd.lua
index 0200a8a37cfa92c3e6ccb314a7410048734d77fe..31275b69277cf1ae3210969c6537ddfcec155622 100755 (executable)
--- a/mpd.lua
+++ b/mpd.lua
@@ -1,5 +1,9 @@
 #!/usr/bin/lua
 
 #!/usr/bin/lua
 

+require "uci"
+require("socket")
+json=require("json")
+

 function url_decode(str)
   if not str then return nil end
   str = string.gsub (str, "+", " ")
 function url_decode(str)
   if not str then return nil end
   str = string.gsub (str, "+", " ")


@@ -65,9 +69,6 @@ function process_directory(directory)
   return res
 end
 
   return res
 end
 

-require "uci"
-require("socket")
-

 function mpd_new(settings)
     local client = {}
     if settings == nil then settings = {} end
 function mpd_new(settings)
     local client = {}
     if settings == nil then settings = {} end


@@ -82,7 +83,6 @@ function mpd_new(settings)
     return client
 end
 
     return client
 end
 

-

 function mpd_send(mpd,action,raw)
 
     local command = string.format("%s\n", action)
 function mpd_send(mpd,action,raw)
 
     local command = string.format("%s\n", action)


@@ -160,13 +160,15 @@ function mpd_send(mpd,action,raw)
     return values
 end
 
     return values
 end
 

-
-json=require("json")
-

 x = uci.cursor()
 x = uci.cursor()

+

 settings = {}
 settings['host'] = x.get("mpd","server","host") or "localhost"
 settings['port'] = x.get("mpd","server","port") or 6600
 settings = {}
 settings['host'] = x.get("mpd","server","host") or "localhost"
 settings['port'] = x.get("mpd","server","port") or 6600

+settings['timeout'] = x.get("mpd","server","timeout") or 1
+
+volstep = x.get("mpd","control","volume_step") or 3
+

 password = x.get("mpd","server","password")
 if password then
   settings["password"] = password
 password = x.get("mpd","server","password")
 if password then
   settings["password"] = password


@@ -177,62 +179,89 @@ m = mpd_new(settings)
 command = url_decode(os.getenv('QUERY_STRING'))
 
 if not command or command=="" then
 command = url_decode(os.getenv('QUERY_STRING'))
 
 if not command or command=="" then

-  command="status"
+  command="idle"

 end
 
 if command=="play" or command=="pause" or command=="stop" or command=="previous" or command=="next" then
 end
 
 if command=="play" or command=="pause" or command=="stop" or command=="previous" or command=="next" then

+

   res=mpd_send(m,command)
   res=mpd_send(m,command)

+
+elseif command=="idle" then
+
+  m.timeout=30
+  res=mpd_send(m,command)
+

 elseif command=="vold" then
 elseif command=="vold" then

+

   status=mpd_send(m,"status")
   volume=tonumber(status["volume"])
   status=mpd_send(m,"status")
   volume=tonumber(status["volume"])

-  res=mpd_send(m,"setvol "..(volume-3))
+  res=mpd_send(m,"setvol "..(volume-volstep))
+

 elseif command=="volu" then
 elseif command=="volu" then

+

   status=mpd_send(m,"status")
   volume=tonumber(status["volume"])
   status=mpd_send(m,"status")
   volume=tonumber(status["volume"])

-  res=mpd_send(m,"setvol "..(volume+3))
+  res=mpd_send(m,"setvol "..(volume+volstep))
+

 elseif command=="status" then
 elseif command=="status" then

+

   res=mpd_send(m,"status")
   song=res["song"]
   playlist=mpd_send(m,"playlist",1)
   pl=process_playlist(playlist)
   res=mpd_send(m,"status")
   song=res["song"]
   playlist=mpd_send(m,"playlist",1)
   pl=process_playlist(playlist)

+

   if song then 
     res['current_playing']=pl[song]['name']
   else
     res['current_playing']="No songs selected"
   end
   if song then 
     res['current_playing']=pl[song]['name']
   else
     res['current_playing']="No songs selected"
   end

+

 elseif command=="playlist" then
 elseif command=="playlist" then

+

   playlist=mpd_send(m,"playlist",1)
   res=process_playlist(playlist)
   playlist=mpd_send(m,"playlist",1)
   res=process_playlist(playlist)

+

 elseif command=="repeat" then
 elseif command=="repeat" then

+

   status=mpd_send(m,"status")
   rep=1-status["repeat"]
   res=mpd_send(m,"repeat "..rep)
   status=mpd_send(m,"status")
   rep=1-status["repeat"]
   res=mpd_send(m,"repeat "..rep)

+

 elseif string.starts(command,"cpl") then
 elseif string.starts(command,"cpl") then

+

   cmd=split(command,"|")
   id=cmd[3]
   command=cmd[2]
   cmd=split(command,"|")
   id=cmd[3]
   command=cmd[2]

+

   if command=="playitem" then
     command="play "..id
     res=mpd_send(m,command)
   end
   if command=="playitem" then
     command="play "..id
     res=mpd_send(m,command)
   end

+

   if command=="clear" then
     res=mpd_send(m,"clear")
   end
   if command=="clear" then
     res=mpd_send(m,"clear")
   end

+

   if command=="remove" then
     command="delete "..id
     res=mpd_send(m,command)
   end
   if command=="remove" then
     command="delete "..id
     res=mpd_send(m,command)
   end

+

   if command=="moveup" then
     command="swap "..id.." "..(id-1)
     res=mpd_send(m,command)
   end
   if command=="moveup" then
     command="swap "..id.." "..(id-1)
     res=mpd_send(m,command)
   end

+

   if command=="movedown" then
     command="swap "..id.." "..(id+1)
     res=mpd_send(m,command)
   end
   if command=="movedown" then
     command="swap "..id.." "..(id+1)
     res=mpd_send(m,command)
   end

+

 elseif string.starts(command,"lists") then
 elseif string.starts(command,"lists") then

+

   cmd=split(command,"|")
   command=cmd[2]
   cmd=split(command,"|")
   command=cmd[2]

+

   if command=="load" then
     if not cmd[3] then
       lists=mpd_send(m,"listplaylists",1)
   if command=="load" then
     if not cmd[3] then
       lists=mpd_send(m,"listplaylists",1)


@@ -241,12 +270,15 @@ elseif string.starts(command,"lists") then
       res=mpd_send(m,"load "..cmd[3],1)
     end
   end
       res=mpd_send(m,"load "..cmd[3],1)
     end
   end

+

   if command=="save" and cmd[3] then
     res=mpd_send(m,"save "..cmd[3],1)
   end
   if command=="save" and cmd[3] then
     res=mpd_send(m,"save "..cmd[3],1)
   end

+

   if command=="delete" and cmd[3] then
     res=mpd_send(m,"rm "..cmd[3],1)
   end
   if command=="delete" and cmd[3] then
     res=mpd_send(m,"rm "..cmd[3],1)
   end

+

   if command=="edit" then
     if cmd[3] then
       dir=mpd_send(m,"lsinfo \""..cmd[3].."\"",1)
   if command=="edit" then
     if cmd[3] then
       dir=mpd_send(m,"lsinfo \""..cmd[3].."\"",1)


@@ -255,12 +287,14 @@ elseif string.starts(command,"lists") then
     end
     res=process_directory(dir)
   end
     end
     res=process_directory(dir)
   end

+

   if command=="add" then
     res={}
     if cmd[3] then
       res=mpd_send(m,"add \""..cmd[3].."\"")
     end
   end
   if command=="add" then
     res={}
     if cmd[3] then
       res=mpd_send(m,"add \""..cmd[3].."\"")
     end
   end

+

 end
 
 if not res then
 end
 
 if not res then