X-Git-Url: https://git.rvb.name/mpd-lua.git/blobdiff_plain/b12b118f634647454e110084173fefbb659419cc..6c4cba13d034c0c7675e8f2aa3ee04ad24c911e1:/mpd.js

diff --git a/mpd.js b/mpd.js
index f1c60cf..b5ff513 100644
--- a/mpd.js
+++ b/mpd.js
@@ -1,4 +1,4 @@
-urlbase="/cgi-bin/mpd.lua?"
+urlbase="/cgi-bin/mpd.cgi?"
 minScrollHeight=200
 
 currentState=""
@@ -48,8 +48,12 @@ function toHHMMSS(seconds) {
 function RefreshTime() {
   if (currentSeconds) {
     currentTime = toHHMMSS(currentSeconds)
-    trackTime = toHHMMSS(trackSeconds)
-    nowPlayingTime = currentTime+"/"+trackTime
+    if (trackSeconds) {
+      trackTime = toHHMMSS(trackSeconds)
+      nowPlayingTime = currentTime+"/"+trackTime
+    } else {
+      nowPlayingTime = currentTime
+    }
   } else {
     nowPlayingTime = "-:--/-:--"
   }
@@ -61,7 +65,7 @@ function PeriodicRefreshTime() {
     nowTime = Date.now()
     delta = (nowTime - updateTime)/1000
     currentSeconds = updateSeconds + Math.round(delta)
-    if (currentSeconds > trackSeconds) {
+    if (trackSeconds && (currentSeconds > trackSeconds)) {
       currentSeconds = trackSeconds
     }
     RefreshTime()
@@ -76,10 +80,22 @@ function RefreshPageStatus() {
     if (this.readyState != 4 || this.status != 200) return;
     var returnedData = JSON.parse(this.responseText);
     trackName = GetFilename(returnedData['current_playing']);
+    try {
+      var trackName=decodeURI(trackName).replace(/%2C/g,",")
+    }  
+    catch(e) {
+      console.log(trackName)
+    }
     trackNo = returnedData['song'];
+    trackId = returnedData['songid']
     currentState = returnedData['state'];
     document.title='MPD Player: '+trackName;
-    nowPlayingTrack = (1+Number(trackNo)) + '/' + returnedData['playlistlength'];
+    if (trackNo) {
+      var nowPlayingTrackNo=String(1+Number(trackNo))
+    } else {
+      var nowPlayingTrackNo="--"
+    }
+    nowPlayingTrack = nowPlayingTrackNo + '/' + returnedData['playlistlength'];
     nowPlayingName = trackName;
     playingTime = returnedData['time']
     if (playingTime) {
@@ -98,25 +114,25 @@ function RefreshPageStatus() {
     document.getElementById('nowplaying_trackname').innerHTML=nowPlayingName;
     RefreshTime()
     if (currentState=="play") {
-      document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('pause')\"><img class=\"button\" width=\"30\" src=\"images/pause.svg\"></span>";
+      document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('pause')\"><img class=\"button\" title=\"Pause\" src=\"images/pause.svg\"></span>";
     } else {
-      document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('play')\"><img class=\"button\" width=\"30\" src=\"images/play-button.svg\"></span>";
+      document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('play')\"><img class=\"button\" title=\"Play\" src=\"images/play-button.svg\"></span>";
     }
     if (currentState=="stop") {
-      document.getElementById('stopbutton').innerHTML="<span><img class=\"button\" width=\"30\" src=\"images/stopoff.svg\"></span>";
+      document.getElementById('stopbutton').innerHTML="<span><img class=\"button\" src=\"images/stopoff.svg\"></span>";
     } else {
-      document.getElementById('stopbutton').innerHTML="<span onclick=\"Command('stop')\"><img class=\"button\" width=\"30\" src=\"images/stop.svg\"></span>";
+      document.getElementById('stopbutton').innerHTML="<span onclick=\"Command('stop')\"><img class=\"button\" title=\"Stop\" src=\"images/stop.svg\"></span>";
     }
     if (returnedData["repeat"]=="1") {
-      document.getElementById('repeatstate').innerHTML="<img width=\"30\" src=\"images/replay.svg\"></a>";
+      document.getElementById('repeatstate').innerHTML="<img class=\"button\" title=\"Replay is on\" src=\"images/replay.svg\"></a>";
     } else {
-      document.getElementById('repeatstate').innerHTML="<img width=\"30\" src=\"images/replayoff.svg\"></a>";
+      document.getElementById('repeatstate').innerHTML="<img class=\"button\" title=\"Replay is off\" src=\"images/replayoff.svg\"></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;
+    var current_track="track_"+trackId;
     for (var i = 0; i < table.length; i++) {
       if (table[i].id==current_track) {
         table[i].classList.add("itemActive");
@@ -142,22 +158,28 @@ req.onreadystatechange = function () {
 
   var playlistMenuText = "<table>\
   <tr>\
-  <td><span class=\"button\" onclick=\"EditPlayList()\"><img width=\"20\" src=\"images/folder.svg\"></span><td>\
-  <td><span class=\"button\" onclick=\"LoadPlayList()\"><img width=\"20\" src=\"images/list.svg\"></span><td>\
-  <td><span class=\"button\" onclick=\"SavePlayList()\"><img width=\"20\" src=\"images/download.svg\"></span><td>\
-  <td><span class=\"button\" onclick=\"return confirm('Clear current playlist, are you sure?') ? PlaylistCommand('clear') : false;\" ><img width=\"20\" src=\"images/cancel.svg\"></span><td>\
+  <td><span onclick=\"EditPlayList()\"><img class=\"medium-button\" title=\"Files\" src=\"images/folder.svg\"></span><td>\
+  <td><span onclick=\"LoadPlayList()\"><img class=\"medium-button\" title=\"Lists\" src=\"images/list.svg\"></span><td>\
+  <td><span onclick=\"SavePlayList()\"><img class=\"medium-button\" title=\"Save current list\" src=\"images/download.svg\"></span><td>\
+  <td><span onclick=\"return confirm('Clear current playlist, are you sure?') ? PlaylistCommand('clear') : false;\" ><img class=\"medium-button\" title=\"Clear current list\"  src=\"images/cancel.svg\"></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>\
+  <td></td class=\"track_number\"><td class=\"file\">Title</td><td class=\"medium-button\" colspan=\"3\">Controls</td>\
   </tr>";
 
   var even = 0;
   for (var key in returnedData) {
        var rec=returnedData[key];
-       var name=GetFilename(rec["name"]);
+       var name=GetFilename(rec["title"]);
+       try {
+         var name=decodeURI(name).replace(/%2C/g,",")
+       }  
+       catch(e) {
+         console.log(name)
+       }
        var id=rec["id"];
 
        if (even) { 
@@ -170,19 +192,19 @@ req.onreadystatechange = function () {
 
        itemsText = itemsText + "<tr id=\"track_"+id+"\" class=\"track "+evText+"\">\
   <td class=\"track_number\">\
-  <a name=\""+id+"\">"+(Number(id)+1)+"</a></td>\
+  <a name=\""+id+"\">"+(Number(key)+1)+"</a></td>\
   </td>\
   <td class=\"file\">\
-  <span class=\"button\" onclick=\"PlaylistCommand('playitem',"+id+")\">"+name+"</span>\
+  <span class=\"link\" onclick=\"PlaylistCommand('playitem',"+id+")\">"+name+"</span>\
   </td>\
   <td class=\"move\">\
-  <span class=\"button\" onclick=\"PlaylistCommand('moveup',"+id+")\"><img width=\"15\" src=\"images/up-arrow.svg\"></span>\
+  <span onclick=\"PlaylistCommand('moveup',"+id+")\"><img class=\"small-button\" title=\"Move up\" src=\"images/up-arrow.svg\"></span>\
   </td>\
   <td class=\"move\">\
-  <span class=\"button\" onclick=\"PlaylistCommand('movedown',"+id+")\"><img width=\"15\" src=\"images/down-arrow.svg\"></span>\
+  <span onclick=\"PlaylistCommand('movedown',"+id+")\"><img class=\"small-button\" title=\"Move down\" src=\"images/down-arrow.svg\"></span>\
   </td>\
   <td class=\"remove\">\
-  <span class=\"button\" onclick=\"PlaylistCommand('remove',"+id+")\"><img width=\"15\" src=\"images/cancel.svg\"></span>\
+  <span onclick=\"PlaylistCommand('remove',"+id+")\"><img class=\"small-button\" title=\"Remove\" src=\"images/cancel.svg\"></span>\
   </td>\
   </tr>"; 
   }
@@ -209,14 +231,14 @@ req.onreadystatechange = function () {
 
   var playlistMenuText = "<table>\
   <tr>\
-  <td><span class=\"button\" onclick=\"RefreshPlaylist()\"><img width=\"20\" src=\"images/list.svg\"></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/plus.svg\"></span><td>\
+  <td><span onclick=\"RefreshPageContent()\"><img class=\"medium-button\" title=\"Home\" src=\"images/list.svg\"></span><td>\
+  <td><span onclick=\"return confirm('Add all to the list, are you sure?') ? PlaylistEditCommand('add','"+EscapeStr(dir)+"') : false;\" ><img class=\"medium-button\" title=\"Add all\" src=\"images/plus.svg\"></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>\
+  <td></td class=\"track_number\"><td class=\"file\">Title</td><td colspan=\"2\">Controls</td>\
   </tr>";
 
   var even = 0;
@@ -230,7 +252,7 @@ req.onreadystatechange = function () {
     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 class=\"file\"><span class=\"link\" onclick=\"EditPlayList('"+upperLevel+"')\">..</span></td>\
   <td></td><td></td>";
   } 
 
@@ -245,6 +267,12 @@ req.onreadystatechange = function () {
        } else {
          var tailName=name
        };
+       try {
+         var tailName=decodeURI(tailName).replace(/%2C/g,",")
+       }  
+       catch(e) {
+         console.log(tailName)
+       }
 
        if (type == "directory" || type == "file") {
          if (even) { 
@@ -263,14 +291,14 @@ req.onreadystatechange = function () {
       
          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.svg\"></span></td>";
+             <span class=\"link\" onclick=\"EditPlayList('"+EscapeStr(name)+"')\">"+tailName+"</span></td><td>\
+             <span onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\"><img class=\"small-button\" title=\"Add\" src=\"images/plus.svg\"></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.svg\"></span></td>";
+             <span class=\"link\" onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\">"+tailName+"</span></td><td>\
+             <span onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\"><img class=\"small-button\" title=\"Add\" src=\"images/plus.svg\"></span></td>";
          };
 
          itemsText = itemsText + "</tr>";
@@ -301,13 +329,13 @@ req.onreadystatechange = function () {
   var returnedData = JSON.parse(this.responseText);
   playlistMenuText="<table>\
     <tr>\
-      <td><span class=\"button\" onclick=\"RefreshPlaylist()\"><img width=\"20\" src=\"images/list.svg\"></span><td>\
-      <td><span class=\"button\" onclick=\"confirm('Clear current playlist, are you sure?') ? PlaylistCommandRefStatus('clear') : false;\" ><img width=\"20\" src=\"images/cancel.svg\"></span><td>\
+      <td><span onclick=\"RefreshPageContent()\"><img class=\"medium-button\" title=\"Home\" src=\"images/list.svg\"></span><td>\
+      <td><span onclick=\"confirm('Clear current playlist, are you sure?') ? PlaylistCommandRefStatus('clear') : false;\" ><img class=\"medium-button\" title=\"Clear all\" src=\"images/cancel.svg\"></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>\
+      <td class=\"track_number\"></td><td class=\"file\">Name</td><td>Controls</td>\
     </tr>";
 
   var even = 0;
@@ -324,8 +352,8 @@ req.onreadystatechange = function () {
 
        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.svg\"></span></td>\
+      <td class=\"file\"><span class=\"link\" onclick=\"PlaylistEditCommandRefFull('load','"+EscapeStr(name)+"')\">"+name+"</td>\
+      <td class=\"controls\"><span onclick=\"confirm('Delete playlist "+name+", are you sure?') ? DelPlayList('"+EscapeStr(name)+"') : false;\"><img class=\"small-button\" title=\"Delete\" src=\"images/minus.svg\"></span></td>\
     </tr>";
   }