From: rvbglas <rvb@rvb.name>
Date: Thu, 28 Dec 2017 10:22:20 +0000 (+0300)
Subject: Переделка интерфейса с использованием SVG-иконок, добавлен счетчик времени и кнопки...
X-Git-Url: https://git.rvb.name/mpd-lua.git/commitdiff_plain/b12b118f634647454e110084173fefbb659419cc
Переделка интерфейса с использованием SVG-иконок, добавлен счетчик времени и кнопки перемотки.
---
diff --git a/ajax/mpd.js b/ajax/mpd.js
deleted file mode 100644
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
index fa2242b..0000000
Binary files a/images/update.png and /dev/null differ
diff --git a/index.html b/index.html
index 6a7c78a..608a4a2 100644
--- 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
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
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 31275b6..b5e180d 100755
--- 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