Переделка интерфейса с использованием SVG-иконок, добавлен счетчик времени и кнопки...

diff --git a/ajax/mpd.js b/ajax/mpd.js
deleted file mode 100644 (file)
index ccee6fb..0000000
--- a/ajax/mpd.js
+++ /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)

diff --git a/css/general.css b/css/general.css
deleted file mode 100644 (file)
index 62e4e56..0000000
--- a/css/general.css
+++ /dev/null
@@ -1,169 +0,0 @@
-body {
-       margin: 0px;
-       text-align: center;
-       font-family: arial,sans-serif;
-       color: Snow;
-}
-
-a {
-       text-decoration: none;
-       color: White;
-}
-
-table
-{
-       border-style: none;
-       padding: 0px;
-       border-collapse: collapse;
-       border-spacing: 0;
-}
-
-img{
-       border: 0px;
-       margin: 2px 2px 2px 2px;
-}
-
-button
-{
-       background: none;
-       cursor: pointer;
-       border: 0px;
-       margin: 0px;
-       padding: 0px;
-}
-
-.button
-{
-       cursor: pointer;
-}
-
-#frame {
-       text-align: left;
-       border: 1px solid Black;
-       background: DarkSlateGray;
-       margin: 0;
-}
-
-#nowplaying_heading {
-       font-size: 1.3em;
-       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 {
-       margin: 10px 10% 10px 10%;
-       text-align: center;
-       border: 1px solid LightGray;
-       height: 3em;
-       padding: 10px 0px 5px 0px;
-       background: SaddleBrown;
-       font-weight: bold;
-       color: White;   
-}
-
-#control_buttons {
-       text-align: center;
-       margin: 10px 5px 10px 5px;
-}
-
-#control_buttons table {
-       margin-left: auto; 
-  margin-right: auto;
-}
-
-
-#control_volume {
-       text-align: center;
-       margin: 10px 5px 10px 5px;
-}
-
-#control_volume table {
-       margin-left: auto; 
-       margin-right: auto;
-}
-
-.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;
-       width: 100%;
-       font-size: 1.0em;
-       font-weight:bold;
-       border-bottom: 1px solid DimGray;
-       border-top: 1px solid DimGray;
-       background: DarkSlateGray;
-}
-
-#items {
-       font-size: 0.9em;
-       text-align: center;
-       overflow-y: scroll;
-}
-
-#items table {
-       border: 1px solid DimGray;
-}
-
-.file {
-       text-align: left;
-       width: 100%;
-}
-
-
-.itemEven{
-       background-color: DarkSlateGray;
-}
-
-.itemOdd{
-  background-color: DimGray;
-}
-
-.itemActive {
-       background: LightGray;
-       color: DarkSlateGray;
-}
-
-.itemActive a {
-       color: DarkSlateGray;
-}
-
-.track_number {
-       text-align: right;
-}
-
-#volume_total {
-       margin: 10px;
-       width: 200px;
-       border: 1px solid LightGray;
-       height: 0.6em;
-}
-
-
-#volume_actual {
-       background-color: DarkOrange;
-       height: 0.6em;
-}

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

diff --git a/images/back.svg b/images/back.svg
new file mode 100644 (file)
index 0000000..4901f1e
--- /dev/null
+++ b/images/back.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300.003 300.003" style="enable-background:new 0 0 300.003 300.003;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150,0C67.159,0,0.001,67.159,0.001,150c0,82.838,67.157,150.003,149.997,150.003S300.002,232.838,300.002,150    C300.002,67.159,232.839,0,150,0z M189.226,218.202c-2.736,2.734-6.321,4.101-9.902,4.101c-3.582,0-7.169-1.367-9.902-4.103    l-56.295-56.292c-0.838-0.537-1.639-1.154-2.368-1.886c-2.796-2.799-4.145-6.479-4.077-10.144    c-0.065-3.667,1.281-7.35,4.077-10.146c0.734-0.731,1.53-1.349,2.368-1.886l56.043-56.043c5.47-5.465,14.34-5.467,19.808,0.003    c5.47,5.467,5.47,14.335,0,19.808l-48.265,48.265l48.514,48.516C194.695,203.864,194.695,212.732,189.226,218.202z" fill="#dd7700"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

diff --git a/images/cancel.svg b/images/cancel.svg
new file mode 100644 (file)
index 0000000..b8ccc3e
--- /dev/null
+++ b/images/cancel.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300.003 300.003" style="enable-background:new 0 0 300.003 300.003;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150,0C67.159,0,0.001,67.159,0.001,150c0,82.838,67.157,150.003,149.997,150.003S300.002,232.838,300.002,150    C300.002,67.159,232.839,0,150,0z M206.584,207.171c-5.989,5.984-15.691,5.984-21.675,0l-34.132-34.132l-35.686,35.686    c-5.986,5.984-15.689,5.984-21.672,0c-5.989-5.991-5.989-15.691,0-21.68l35.683-35.683L95.878,118.14    c-5.984-5.991-5.984-15.691,0-21.678c5.986-5.986,15.691-5.986,21.678,0l33.222,33.222l31.671-31.673    c5.986-5.984,15.694-5.986,21.675,0c5.989,5.991,5.989,15.697,0,21.678l-31.668,31.671l34.13,34.132    C212.57,191.475,212.573,201.183,206.584,207.171z" fill="#dd7700"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

diff --git a/images/down-arrow.svg b/images/down-arrow.svg
new file mode 100644 (file)
index 0000000..7514b45
--- /dev/null
+++ b/images/down-arrow.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300.003 300.003" style="enable-background:new 0 0 300.003 300.003;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150,0C67.159,0,0.001,67.159,0.001,150c0,82.838,67.157,150.003,149.997,150.003S300.002,232.838,300.002,150    C300.002,67.159,232.842,0,150,0z M217.685,131.647l-56.046,56.046c-0.537,0.838-1.146,1.637-1.88,2.365    c-2.796,2.799-6.484,4.145-10.146,4.08c-3.667,0.062-7.345-1.281-10.141-4.077c-0.734-0.731-1.351-1.53-1.891-2.368l-56.29-56.297    c-2.736-2.731-4.108-6.315-4.103-9.897c-0.005-3.584,1.367-7.166,4.098-9.902c5.47-5.47,14.335-5.467,19.808,0l48.519,48.514    l48.262-48.27c5.47-5.47,14.338-5.465,19.81,0C223.156,117.31,223.149,126.175,217.685,131.647z" fill="#dd7700"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

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

diff --git a/images/download.svg b/images/download.svg
new file mode 100644 (file)
index 0000000..083626a
--- /dev/null
+++ b/images/download.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 299.998 299.998" style="enable-background:new 0 0 299.998 299.998;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M149.995,0C67.156,0,0,67.159,0,149.997c0,82.837,67.156,150,149.995,150s150.003-67.163,150.003-150    C299.997,67.159,232.834,0,149.995,0z M110.967,105.357c2.075-2.075,4.793-3.112,7.511-3.112c2.718,0,5.434,1.037,7.508,3.112    l13.297,13.295v-3.911V62.477c0-5.867,4.754-10.621,10.621-10.621s10.621,4.754,10.621,10.621v52.263v4.63l4.63-4.63l9.386-9.384    c2.075-2.075,4.79-3.112,7.508-3.112s5.436,1.037,7.511,3.112c2.552,2.549,3.522,6.079,2.933,9.384    c0,0.003-0.003,0.005-0.003,0.008c-0.044,0.239-0.119,0.469-0.179,0.703c-0.091,0.366-0.189,0.729-0.322,1.084    c-0.088,0.239-0.189,0.472-0.296,0.705c-0.166,0.371-0.358,0.726-0.568,1.079c-0.112,0.187-0.215,0.373-0.34,0.552    c-0.363,0.524-0.76,1.032-1.227,1.499l-15.115,15.115l-16.591,16.591c-2.077,2.075-4.793,3.105-7.508,3.105    c-0.026,0-0.052,0-0.078,0s-0.054,0-0.078,0c-2.715,0-5.431-1.03-7.508-3.105l-16.591-16.591l-15.115-15.115    c-0.467-0.467-0.864-0.973-1.222-1.496c-0.127-0.184-0.231-0.373-0.345-0.56c-0.207-0.35-0.397-0.703-0.563-1.069    c-0.109-0.239-0.213-0.475-0.301-0.718c-0.127-0.348-0.223-0.7-0.314-1.056c-0.062-0.246-0.143-0.485-0.187-0.734    C107.444,111.436,108.412,107.906,110.967,105.357z M231.574,209.315h-0.003c0,14.337-14.057,25.568-32.005,25.568h-99.132    c-17.945,0-32.005-11.23-32.005-25.568V140.31c0-12.117,10.058-21.988,24.004-24.761c0.604,5.981,3.224,11.526,7.534,15.834    l4.108,4.108h-3.641c-7.265,0-11.256,3.621-11.256,4.819v69.005c0,1.201,3.992,4.819,11.256,4.819h99.135    c7.265,0,11.256-3.621,11.256-4.819V140.31c0-1.198-3.992-4.819-11.256-4.819h-3.12l4.111-4.111    c4.282-4.279,6.894-9.786,7.516-15.727c13.681,2.913,23.498,12.69,23.498,24.66V209.315z" fill="#dd7700"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

diff --git a/images/fast-forward.svg b/images/fast-forward.svg
new file mode 100644 (file)
index 0000000..aa3b9a0
--- /dev/null
+++ b/images/fast-forward.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150,0C67.157,0,0,67.157,0,150c0,82.841,67.157,150,150,150c82.838,0,150-67.159,150-150C300,67.157,232.838,0,150,0z     M235.188,157.228l-71.532,41.301c-1.289,0.744-2.731,1.123-4.171,1.123s-2.879-0.379-4.171-1.123    c-2.583-1.489-4.173-4.246-4.173-7.226v-33.899l-71.239,41.125c-1.292,0.744-2.734,1.123-4.173,1.123    c-1.439,0-2.879-0.379-4.171-1.123c-2.583-1.489-4.173-4.246-4.173-7.226v-82.605c0-2.977,1.59-5.74,4.173-7.228    c2.583-1.489,5.76-1.489,8.346,0l71.237,41.132v-33.904c0-2.977,1.587-5.74,4.171-7.228c2.583-1.489,5.766-1.489,8.349,0    l71.532,41.304c2.583,1.486,4.178,4.248,4.168,7.226C239.364,152.98,237.771,155.74,235.188,157.228z" fill="#dd7700"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

diff --git a/images/folder.svg b/images/folder.svg
new file mode 100644 (file)
index 0000000..9be9119
--- /dev/null
+++ b/images/folder.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <g>
+                       <path d="M207.597,115.365h-71.22l-18.759-17.029H85.649c-2.446,0-4.435,1.989-4.435,4.432v108.899     c0,2.443,1.989,4.432,4.435,4.432h3.369l17.688-91.03h105.32v-5.27C212.027,117.357,210.038,115.365,207.597,115.365z" fill="#dd7700"/>
+                       <path d="M149.996,0C67.157,0,0.001,67.161,0.001,149.997S67.157,300,149.996,300s150.003-67.163,150.003-150.003     S232.835,0,149.996,0z M227.241,212.721c-0.542,10.333-8.948,18.601-19.343,18.912c-0.101,0.005-0.197,0.031-0.301,0.031     l-9.231,0.005l-112.72-0.005c-11.023,0-19.991-8.969-19.991-19.994V102.768c0-11.025,8.969-19.994,19.997-19.994h37.975     l18.759,17.029h65.211c11.023,0,19.991,8.969,19.991,19.997v5.27l17.904,0.003L227.241,212.721z" fill="#dd7700"/>
+               </g>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

diff --git a/images/list.svg b/images/list.svg
new file mode 100644 (file)
index 0000000..496facd
--- /dev/null
+++ b/images/list.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300.003 300.003" style="enable-background:new 0 0 300.003 300.003;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150.001,0c-82.838,0-150,67.159-150,150c0,82.838,67.162,150.003,150,150.003c82.843,0,150-67.165,150-150.003    C300.001,67.159,232.843,0,150.001,0z M78.538,215.222c-6.832,0-12.372-5.54-12.372-12.369c0-6.837,5.54-12.374,12.372-12.374    c6.832,0,12.372,5.537,12.372,12.374C90.91,209.685,85.371,215.222,78.538,215.222z M78.538,166.708    c-6.832,0-12.372-5.54-12.372-12.372c0-6.834,5.54-12.372,12.372-12.372c6.832,0,12.372,5.537,12.372,12.372    S85.371,166.708,78.538,166.708z M78.538,118.303c-6.832,0-12.372-5.54-12.372-12.372c0-6.834,5.54-12.372,12.372-12.372    c6.832,0,12.372,5.537,12.372,12.372C90.91,112.766,85.371,118.303,78.538,118.303z M215.423,215.043H117.95    c-6.73,0-12.187-5.457-12.187-12.187c0-6.733,5.457-12.19,12.187-12.19h97.474c6.73,0,12.187,5.457,12.187,12.19    C227.609,209.586,222.15,215.043,215.423,215.043z M215.423,166.527H117.95c-6.73,0-12.187-5.457-12.187-12.187    c0-6.733,5.457-12.19,12.187-12.19h97.474c6.73,0,12.187,5.457,12.187,12.19C227.609,161.07,222.15,166.527,215.423,166.527z     M215.423,118.01H117.95c-6.73,0-12.187-5.457-12.187-12.19c0-6.733,5.457-12.187,12.187-12.187h97.474    c6.73,0,12.187,5.457,12.187,12.187C227.609,112.551,222.15,118.01,215.423,118.01z" fill="#dd7700"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

diff --git a/images/lists.png b/images/lists.png
deleted file mode 100644 (file)
index cbae301..0000000
Binary files a/images/lists.png and /dev/null differ

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

diff --git a/images/minus.svg b/images/minus.svg
new file mode 100644 (file)
index 0000000..601c5bb
--- /dev/null
+++ b/images/minus.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300.003 300.003" style="enable-background:new 0 0 300.003 300.003;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150.001,0c-82.843,0-150,67.159-150,150c0,82.838,67.157,150.003,150,150.003c82.838,0,150-67.165,150-150.003    C300.001,67.159,232.838,0,150.001,0z M197.218,166.283H92.41c-8.416,0-15.238-6.821-15.238-15.238s6.821-15.238,15.238-15.238    H197.22c8.416,0,15.238,6.821,15.238,15.238S205.634,166.283,197.218,166.283z" fill="#dd7700"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

diff --git a/images/music-player.svg b/images/music-player.svg
new file mode 100644 (file)
index 0000000..e258c4f
--- /dev/null
+++ b/images/music-player.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300.003 300.003" style="enable-background:new 0 0 300.003 300.003;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150.005,0C67.164,0,0.001,67.159,0.001,150c0,82.838,67.162,150.003,150.003,150.003S300.002,232.838,300.002,150    C300.002,67.159,232.844,0,150.005,0z M214.127,185.87c-3.488,13.015-16.864,23.566-29.881,23.566    c-13.017,0-20.739-10.551-17.25-23.566c3.486-13.017,16.866-23.568,29.881-23.568c0.327,0,0.635,0.039,0.96,0.049l0.41-46.639    c0-2.052-2.002-4.43-3.33-5.239c-1.235-0.75-3.73-1.276-5.727-0.76l-76.058,19.872c-2.915,0.763-4.949,3.395-4.949,6.411v5.859    l-0.029,0.008v55.584c1.273,3.608,1.458,7.848,0.233,12.411c-3.488,13.017-16.866,23.566-29.881,23.566    c-13.02,0-20.739-10.548-17.253-23.566c3.488-13.02,16.869-23.568,29.881-23.568c0.171,0,0.335,0.023,0.501,0.029l-0.973-79.313    c0-4.995,3.359-9.36,8.185-10.642l102.648-27.241c3.312-0.877,6.832-0.166,9.537,1.914c2.71,2.088,4.298,5.309,4.298,8.728    l-0.986,95.14C215.198,178.177,215.19,181.909,214.127,185.87z" fill="#dd7700"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

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

diff --git a/images/next.svg b/images/next.svg
new file mode 100644 (file)
index 0000000..19a5278
--- /dev/null
+++ b/images/next.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150,0C67.157,0,0,67.157,0,150c0,82.841,67.157,150,150,150s150-67.159,150-150C300,67.157,232.843,0,150,0z     M195.708,160.159c-0.731,0.731-1.533,1.349-2.368,1.886l-56.295,56.295c-2.734,2.736-6.318,4.103-9.902,4.103    s-7.166-1.367-9.902-4.103c-5.47-5.47-5.47-14.34,0-19.808l48.509-48.516l-48.265-48.265c-5.47-5.473-5.47-14.34,0-19.808    c5.47-5.47,14.338-5.467,19.808-0.003l56.046,56.043c0.835,0.537,1.637,1.154,2.365,1.886c2.796,2.796,4.145,6.479,4.082,10.146    C199.852,153.68,198.506,157.361,195.708,160.159z" fill="#dd7700"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

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

diff --git a/images/pause.svg b/images/pause.svg
new file mode 100644 (file)
index 0000000..57d5b9e
--- /dev/null
+++ b/images/pause.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300.003 300.003" style="enable-background:new 0 0 300.003 300.003;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150.001,0c-82.838,0-150,67.159-150,150c0,82.838,67.162,150.003,150,150.003c82.843,0,150-67.165,150-150.003    C300.001,67.159,232.846,0,150.001,0z M134.41,194.538c0,9.498-7.7,17.198-17.198,17.198s-17.198-7.7-17.198-17.198V105.46    c0-9.498,7.7-17.198,17.198-17.198s17.198,7.7,17.198,17.198V194.538z M198.955,194.538c0,9.498-7.701,17.198-17.198,17.198    c-9.498,0-17.198-7.7-17.198-17.198V105.46c0-9.498,7.7-17.198,17.198-17.198s17.198,7.7,17.198,17.198V194.538z" fill="#dd7700"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

diff --git a/images/play-button.svg b/images/play-button.svg
new file mode 100644 (file)
index 0000000..99f7554
--- /dev/null
+++ b/images/play-button.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150,0C67.157,0,0,67.162,0,150c0,82.841,67.157,150,150,150s150-67.159,150-150C300,67.162,232.843,0,150,0z     M205.846,158.266l-86.557,49.971c-1.32,0.765-2.799,1.144-4.272,1.144c-1.473,0-2.949-0.379-4.274-1.144    c-2.64-1.525-4.269-4.347-4.269-7.402V100.89c0-3.053,1.631-5.88,4.269-7.402c2.648-1.528,5.906-1.528,8.551,0l86.557,49.974    c2.645,1.53,4.274,4.352,4.269,7.402C210.12,153.916,208.494,156.741,205.846,158.266z" fill="#dd7700"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

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

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

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

diff --git a/images/plus.svg b/images/plus.svg
new file mode 100644 (file)
index 0000000..e4b5135
--- /dev/null
+++ b/images/plus.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300.003 300.003" style="enable-background:new 0 0 300.003 300.003;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150,0C67.159,0,0.001,67.159,0.001,150c0,82.838,67.157,150.003,149.997,150.003S300.002,232.838,300.002,150    C300.002,67.159,232.839,0,150,0z M213.281,166.501h-48.27v50.469c-0.003,8.463-6.863,15.323-15.328,15.323    c-8.468,0-15.328-6.86-15.328-15.328v-50.464H87.37c-8.466-0.003-15.323-6.863-15.328-15.328c0-8.463,6.863-15.326,15.328-15.328    l46.984,0.003V91.057c0-8.466,6.863-15.328,15.326-15.328c8.468,0,15.331,6.863,15.328,15.328l0.003,44.787l48.265,0.005    c8.466-0.005,15.331,6.86,15.328,15.328C228.607,159.643,221.742,166.501,213.281,166.501z" fill="#dd7700"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

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

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

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

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

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

diff --git a/images/replay.svg b/images/replay.svg
new file mode 100644 (file)
index 0000000..04c9a0d
--- /dev/null
+++ b/images/replay.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300.003 300.003" style="enable-background:new 0 0 300.003 300.003;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150.005,0C67.164,0,0.001,67.159,0.001,150c0,82.838,67.162,150.003,150.003,150.003S300.002,232.838,300.002,150    C300.002,67.159,232.844,0,150.005,0z M230.091,172.444c-9.921,37.083-43.801,64.477-83.969,64.477    c-47.93,0-86.923-38.99-86.923-86.923s38.99-86.92,86.923-86.92c21.906,0,41.931,8.157,57.228,21.579l-13.637,23.623    c-11-11.487-26.468-18.664-43.594-18.664c-33.294,0-60.38,27.088-60.38,60.38c0,33.294,27.085,60.38,60.38,60.38    c25.363,0,47.113-15.728,56.038-37.937h-20.765l36.168-62.636l36.166,62.641H230.091z" fill="#dd7700"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

diff --git a/images/replayoff.svg b/images/replayoff.svg
new file mode 100644 (file)
index 0000000..0b80990
--- /dev/null
+++ b/images/replayoff.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300.003 300.003" style="enable-background:new 0 0 300.003 300.003;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150.005,0C67.164,0,0.001,67.159,0.001,150c0,82.838,67.162,150.003,150.003,150.003S300.002,232.838,300.002,150    C300.002,67.159,232.844,0,150.005,0z M230.091,172.444c-9.921,37.083-43.801,64.477-83.969,64.477    c-47.93,0-86.923-38.99-86.923-86.923s38.99-86.92,86.923-86.92c21.906,0,41.931,8.157,57.228,21.579l-13.637,23.623    c-11-11.487-26.468-18.664-43.594-18.664c-33.294,0-60.38,27.088-60.38,60.38c0,33.294,27.085,60.38,60.38,60.38    c25.363,0,47.113-15.728,56.038-37.937h-20.765l36.168-62.636l36.166,62.641H230.091z" fill="#888888"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

diff --git a/images/rewind.svg b/images/rewind.svg
new file mode 100644 (file)
index 0000000..d706a71
--- /dev/null
+++ b/images/rewind.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150.003,0C67.162,0,0,67.159,0,150c0,82.838,67.162,150,150.003,150S300,232.838,300,150C300,67.157,232.843,0,150.003,0    z M228.439,198.529c-1.292,0.744-2.731,1.12-4.171,1.12s-2.882-0.376-4.173-1.12l-71.239-41.127v33.899    c0,2.983-1.59,5.74-4.173,7.228c-1.292,0.744-2.734,1.12-4.173,1.12c-1.439,0-2.882-0.376-4.171-1.12l-71.54-41.301    c-2.583-1.489-4.173-4.251-4.173-7.228c0-2.98,1.59-5.74,4.173-7.228l71.535-41.304c2.583-1.489,5.763-1.489,8.346,0    s4.173,4.251,4.173,7.228V142.6l71.237-41.132c2.586-1.489,5.763-1.489,8.346,0c2.583,1.489,4.173,4.251,4.173,7.228v82.605h0.003    C232.612,194.284,231.022,197.041,228.439,198.529z" fill="#dd7700"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

diff --git a/images/save.png b/images/save.png
deleted file mode 100644 (file)
index 37ec086..0000000
Binary files a/images/save.png and /dev/null differ

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

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

diff --git a/images/stop.svg b/images/stop.svg
new file mode 100644 (file)
index 0000000..9631700
--- /dev/null
+++ b/images/stop.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300.003 300.003" style="enable-background:new 0 0 300.003 300.003;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150.005,0C67.164,0,0.001,67.159,0.001,150c0,82.838,67.162,150.003,150.003,150.003S300.002,232.838,300.002,150    C300.002,67.159,232.844,0,150.005,0z M196.63,210.605h-93.26c-7.706,0-13.974-6.269-13.974-13.974v-93.259    c0-7.706,6.269-13.974,13.974-13.974h93.259c7.706,0,13.974,6.269,13.974,13.974v93.259h0.001    C210.604,204.337,204.336,210.605,196.63,210.605z" fill="#dd7700"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

diff --git a/images/stopoff.svg b/images/stopoff.svg
new file mode 100644 (file)
index 0000000..dc75dbe
--- /dev/null
+++ b/images/stopoff.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300.003 300.003" style="enable-background:new 0 0 300.003 300.003;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150.005,0C67.164,0,0.001,67.159,0.001,150c0,82.838,67.162,150.003,150.003,150.003S300.002,232.838,300.002,150    C300.002,67.159,232.844,0,150.005,0z M196.63,210.605h-93.26c-7.706,0-13.974-6.269-13.974-13.974v-93.259    c0-7.706,6.269-13.974,13.974-13.974h93.259c7.706,0,13.974,6.269,13.974,13.974v93.259h0.001    C210.604,204.337,204.336,210.605,196.63,210.605z" fill="#888888"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

diff --git a/images/up-arrow.svg b/images/up-arrow.svg
new file mode 100644 (file)
index 0000000..e0bc299
--- /dev/null
+++ b/images/up-arrow.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 300.003 300.003" style="enable-background:new 0 0 300.003 300.003;" xml:space="preserve" width="512px" height="512px">
+<g>
+       <g>
+               <path d="M150,0C67.159,0,0.001,67.159,0.001,150c0,82.838,67.157,150.003,149.997,150.003S300.002,232.838,300.002,150    C300.002,67.159,232.842,0,150,0z M217.685,189.794c-5.47,5.467-14.338,5.47-19.81,0l-48.26-48.27l-48.522,48.516    c-5.467,5.467-14.338,5.47-19.81,0c-2.731-2.739-4.098-6.321-4.098-9.905s1.367-7.166,4.103-9.897l56.292-56.297    c0.539-0.838,1.157-1.637,1.888-2.368c2.796-2.796,6.476-4.142,10.146-4.077c3.662-0.062,7.348,1.281,10.141,4.08    c0.734,0.729,1.349,1.528,1.886,2.365l56.043,56.043C223.152,175.454,223.156,184.322,217.685,189.794z" fill="#dd7700"/>
+       </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

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

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

diff --git a/index.html b/index.html
index 6a7c78a6b17335f059d2a65cd27c06e04968a2ab..608a4a22e71957bdc693ace894b55b1bd8cbb86f 100644 (file)
--- a/index.html
+++ b/index.html
@@ -3,8 +3,9 @@
 <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>MPD Player</title>
-       <link rel="stylesheet" href="css/general.css" type="text/css" />
-       <script type="text/javascript" src="ajax/mpd.js"></script>
+       <link rel="stylesheet" href="mpd.css" type="text/css" />
+       <link rel="icon" type="image/svg+xml" href="images/music-player.svg" />
+       <script type="text/javascript" src="mpd.js"></script>
 </head>
 <body onload="SetSize(); RefreshPageContent()" onresize="SetSize()">
 
@@ -15,23 +16,27 @@
 <tr>
 <td id="left">Now playing</td>
 <td id="right">
-<span onclick="RefreshPageContent()"><img class="button" align="right" width="20" src="images/update.png"></span>
+<span onclick="RefreshPageContent()"><img class="button" align="right" width="20" src="images/replay.svg"></span>
 </td>
 </tr>
 </table>
 </div>
 
 <div id="nowplaying_content">
+<div id="nowplaying_counters"> <span id="nowplaying_trackno">--/--</span><span id="nowplaying_tracklen">-:--/-:--</span></div>
+<div id="nowplaying_trackname">---</div>
 </div>
 
 <div id="control_buttons">
 <table>
 <tr>
-<td><span onclick="Command('previous')"><img class="button" src="images/previous.png"></span></td>
-<td><div id="playpausebutton"><span onclick="Command('pause')"><img class="button" src="images/pause.png"></span></div></td>
-<td><span onclick="Command('stop')"><img class="button" src="images/stop.png"></span></td>
-<td><span onclick="Command('next')"><img class="button" src="images/next.png"></span></td>
-<td><span onclick="Command('repeat')"><div id="repeatstate"><img class="button" src="images/repeaton.png"></div></span></td>
+<td><span onclick="Command('previous')"><img class="button" width="30" src="images/back.svg"></span></td>
+<td><span onclick="Command('rewind')"><img class="button" width="30" src="images/rewind.svg"></span></td>
+<td><div id="playpausebutton"><span onclick="Command('pause')"><img class="button" width="30" src="images/pause.svg"></span></div></td>
+<td><div id="stopbutton"><span onclick="Command('stop')"><img class="button" width="30" src="images/stop.svg"></span></div></td>
+<td><span onclick="Command('fastfwd')"><img class="button" width="30" src="images/fast-forward.svg"></span></td>
+<td><span onclick="Command('next')"><img class="button" width="30" src="images/next.svg"></span></td>
+<td><span onclick="Command('repeat')"><div id="repeatstate"><img class="button" width="30" src="images/replay.svg"></div></span></td>
 </tr>
 </table>
 </div>
@@ -39,9 +44,9 @@
 <div id="control_volume">
 <table>
 <tr>
-<td><span onclick="Command('vold')"><img class="button" src="images/minus.png"></span></td>
+<td><span onclick="Command('vold')"><img class="button" width="30" src="images/minus.svg"></span></td>
 <td id="volume_content">Volume:</td><td><div id="volume_total"></div></div></td>
-<td><span onclick="Command('volu')"><img class="button" src="images/plus.png"></span></td>
+<td><span onclick="Command('volu')"><img class="button" width="30" src="images/plus.svg"></span></td>
 </tr>
 </table>
 </div>
@@ -55,6 +60,8 @@
 </div>
 <div id="playlist_menu_bottom" class="playlist_menu">
 </div>
+<div id="credits">Code (C) <a href="https://rvb-glas.livejournal.com/">Roman Bazalevsky</a>, 2017 licensed by <a href="http://www.wtfpl.net/">WTFPL</a></div>
+<div id="credits">Icons made by <a href="https://www.flaticon.com/authors/chanut-is-industries" title="Chanut is Industries">Chanut is Industries</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
 </div>
 
 </div>

diff --git a/mpd.css b/mpd.css
new file mode 100644 (file)
index 0000000..597f527
--- /dev/null
+++ b/mpd.css
@@ -0,0 +1,194 @@
+body {
+       margin: 0px;
+       text-align: center;
+       font-family: arial,sans-serif;
+       color: Snow;
+}
+
+a {
+       text-decoration: none;
+       color: White;
+}
+
+table
+{
+       border-style: none;
+       padding: 0px;
+       border-collapse: collapse;
+       border-spacing: 0;
+}
+
+img{
+       border: 0px;
+       margin: 2px 2px 2px 2px;
+}
+
+button
+{
+       background: none;
+       cursor: pointer;
+       border: 0px;
+       margin: 0px;
+       padding: 0px;
+}
+
+.button
+{
+       cursor: pointer;
+}
+
+#frame {
+       text-align: left;
+       border: 1px solid Black;
+       background: DarkSlateGray;
+       margin: 0;
+}
+
+#nowplaying_heading {
+       font-size: 1.3em;
+       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_trackname {
+       text-align: center;
+       clear: both;
+       padding: 0.5em;
+}
+
+#nowplaying_content {
+       height: 4em;
+       border: 1px solid LightGray;
+       margin: 10px 10% 10px 10%;
+       padding: 10px 0px 5px 0px;
+       background: SaddleBrown;
+       font-weight: bold;
+       color: White;   
+}
+
+#nowplaying_trackno {
+       text-align: left;
+       margin: 0 0 0 5%;
+       float:left;
+}
+
+#nowplaying_tracklen {
+       text-align: right;
+       margin: 0 5% 0 0;
+       float:right;
+}
+
+#nowplaying_counters {
+       width: 100%;
+}
+
+#control_buttons {
+       text-align: center;
+       margin: 10px 5px 10px 5px;
+}
+
+#control_buttons table {
+       margin-left: auto; 
+  margin-right: auto;
+}
+
+
+#control_volume {
+       text-align: center;
+       margin: 10px 5px 10px 5px;
+}
+
+#control_volume table {
+       margin-left: auto; 
+       margin-right: auto;
+}
+
+.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;
+       width: 100%;
+       font-size: 1.0em;
+       font-weight:bold;
+       border-bottom: 1px solid DimGray;
+       border-top: 1px solid DimGray;
+       background: DarkSlateGray;
+}
+
+#items {
+       font-size: 0.9em;
+       text-align: center;
+       overflow-y: scroll;
+}
+
+#items table {
+       border: 1px solid DimGray;
+}
+
+.file {
+       text-align: left;
+       width: 100%;
+}
+
+
+.itemEven{
+       background-color: DarkSlateGray;
+}
+
+.itemOdd{
+  background-color: DimGray;
+}
+
+.itemActive {
+       background: LightGray;
+       color: DarkSlateGray;
+}
+
+.itemActive a {
+       color: DarkSlateGray;
+}
+
+.track_number {
+       text-align: right;
+}
+
+#volume_total {
+       margin: 10px;
+       width: 200px;
+       border: 1px solid LightGray;
+       height: 0.6em;
+}
+
+#volume_actual {
+       background-color: DarkOrange;
+       height: 0.6em;
+}
+
+#credits {
+       font-size: 0.6em;
+       background-color: Black;
+}
\ No newline at end of file

diff --git a/mpd.js b/mpd.js
new file mode 100644 (file)
index 0000000..f1c60cf
--- /dev/null
+++ b/mpd.js
@@ -0,0 +1,468 @@
+urlbase="/cgi-bin/mpd.lua?"
+minScrollHeight=200
+
+currentState=""
+
+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 toHHMMSS(seconds) {
+    var hours = Math.floor(seconds / 3600);
+    seconds -= hours*3600;
+    var minutes = Math.floor(seconds / 60);
+    seconds -= minutes*60;
+
+    if (hours   < 10) {hours   = "0"+hours;}
+    if (minutes < 10) {minutes = "0"+minutes;}
+    if (seconds < 10) {seconds = "0"+seconds;}
+    if (hours == 0) {
+     return minutes+':'+seconds;
+    } else {
+     return hours+':'+minutes+':'+seconds;
+    }
+}
+
+function RefreshTime() {
+  if (currentSeconds) {
+    currentTime = toHHMMSS(currentSeconds)
+    trackTime = toHHMMSS(trackSeconds)
+    nowPlayingTime = currentTime+"/"+trackTime
+  } else {
+    nowPlayingTime = "-:--/-:--"
+  }
+  document.getElementById('nowplaying_tracklen').innerHTML=nowPlayingTime;
+}
+
+function PeriodicRefreshTime() {
+  if (currentState == "play") {
+    nowTime = Date.now()
+    delta = (nowTime - updateTime)/1000
+    currentSeconds = updateSeconds + Math.round(delta)
+    if (currentSeconds > trackSeconds) {
+      currentSeconds = trackSeconds
+    }
+    RefreshTime()
+  }
+}
+
+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'];
+    currentState = returnedData['state'];
+    document.title='MPD Player: '+trackName;
+    nowPlayingTrack = (1+Number(trackNo)) + '/' + returnedData['playlistlength'];
+    nowPlayingName = trackName;
+    playingTime = returnedData['time']
+    if (playingTime) {
+      var splits = playingTime.split(":")
+      updateTime = Date.now()
+      currentSeconds = Number(splits[0])
+      updateSeconds = currentSeconds
+      trackSeconds = Number(splits[1])
+    } else {
+      currentSeconds = null
+    }
+    if (currentState=='stop') {
+      nowPlayingName = '<font color="gray">' + nowPlayingName+ '</font>'
+    }
+    document.getElementById('nowplaying_trackno').innerHTML=nowPlayingTrack;
+    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>";
+    } else {
+      document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('play')\"><img class=\"button\" width=\"30\" src=\"images/play-button.svg\"></span>";
+    }
+    if (currentState=="stop") {
+      document.getElementById('stopbutton').innerHTML="<span><img class=\"button\" width=\"30\" src=\"images/stopoff.svg\"></span>";
+    } else {
+      document.getElementById('stopbutton').innerHTML="<span onclick=\"Command('stop')\"><img class=\"button\" width=\"30\" src=\"images/stop.svg\"></span>";
+    }
+    if (returnedData["repeat"]=="1") {
+      document.getElementById('repeatstate').innerHTML="<img width=\"30\" src=\"images/replay.svg\"></a>";
+    } else {
+      document.getElementById('repeatstate').innerHTML="<img width=\"30\" 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;
+    for (var i = 0; i < table.length; i++) {
+      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/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>\
+  </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-arrow.svg\"></span>\
+  </td>\
+  <td class=\"move\">\
+  <span class=\"button\" onclick=\"PlaylistCommand('movedown',"+id+")\"><img width=\"15\" 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>\
+  </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/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>\
+  </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.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>";
+         };
+
+         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/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>\
+    </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.svg\"></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)
+setInterval(PeriodicRefreshTime, 1000);

diff --git a/mpd.lua b/mpd.lua
index 31275b69277cf1ae3210969c6537ddfcec155622..b5e180d5adf38465a3e284af0f766d1a310a12f2 100755 (executable)
--- a/mpd.lua
+++ b/mpd.lua
@@ -182,10 +182,15 @@ if not command or command=="" then
   command="idle"
 end
 
-if command=="play" or command=="pause" or command=="stop" or command=="previous" or command=="next" then
+if command=="play" or command=="pause" or command=="stop" then
 
   res=mpd_send(m,command)
 
+elseif command=="previous" or command=="next" then
+
+  res=mpd_send(m,"play")
+  res=mpd_send(m,command)
+
 elseif command=="idle" then
 
   m.timeout=30
@@ -203,6 +208,79 @@ elseif command=="volu" then
   volume=tonumber(status["volume"])
   res=mpd_send(m,"setvol "..(volume+volstep))
 
+elseif string.starts(command,"fastfwd") then
+
+  cmd=split(command,"|")
+  skip=tonumber(cmd[2])
+  if not skip then
+    skip=15
+  end
+
+  status=mpd_send(m,"status")
+  rec_time=status["time"]
+  song=status["song"]
+  
+  if song then
+
+    if rec_time then
+      rec_time=split(rec_time,":")
+      cur_time=tonumber(rec_time[1])
+
+      track_time=tonumber(rec_time[2])
+      cur_time=cur_time+skip
+      if cur_time>track_time then
+        cur_time=track_time
+      end
+
+      mpd_send(m,"seek "..song.." "..cur_time)
+
+    else
+
+      mpd_send(m,"play")
+
+    end  
+  
+  end
+
+  res={}
+
+elseif string.starts(command,"rewind") then
+
+  cmd=split(command,"|")
+  skip=tonumber(cmd[2])
+  if not skip then
+    skip=15
+  end
+
+  status=mpd_send(m,"status")
+  rec_time=status["time"]
+  song=status["song"]
+  
+  if song then
+
+    if rec_time then
+      rec_time=split(rec_time,":")
+      cur_time=tonumber(rec_time[1])
+
+      track_time=tonumber(rec_time[2])
+      cur_time=cur_time-skip
+      if cur_time<0 then
+        cur_time=0
+      end
+
+      mpd_send(m,"seek "..song.." "..cur_time)
+
+    else
+
+      mpd_send(m,"play")
+      mpd_send(m,"previous")
+
+    end  
+  
+  end
+
+  res={}
+
 elseif command=="status" then
 
   res=mpd_send(m,"status")
@@ -213,7 +291,8 @@ elseif command=="status" then
   if song then 
     res['current_playing']=pl[song]['name']
   else
-    res['current_playing']="No songs selected"
+    res['song']="--"
+    res['current_playing']="---"
   end
 
 elseif command=="playlist" then