From bf3bf92221cb7c06bcd93683db53b54b28ec31b5 Mon Sep 17 00:00:00 2001
From: rvbglas <rvb@rvb.name>
Date: Thu, 28 Dec 2017 14:06:55 +0300
Subject: [PATCH 1/1] =?utf8?q?=D0=9A=D0=BE=D1=81=D0=BC=D0=B5=D1=82=D0=B8?=
=?utf8?q?=D1=87=D0=B5=D1=81=D0=BA=D0=B8=D0=B5=20=D0=B4=D0=BE=D1=80=D0=B0?=
=?utf8?q?=D0=B1=D0=BE=D1=82=D0=BA=D0=B8.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit
---
index.html | 20 +++++++++----------
mpd.css | 21 +++++++++++++++++++-
mpd.js | 56 +++++++++++++++++++++++++++---------------------------
3 files changed, 58 insertions(+), 39 deletions(-)
diff --git a/index.html b/index.html
index 608a4a2..a80c421 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
<tr>
<td id="left">Now playing</td>
<td id="right">
-<span onclick="RefreshPageContent()"><img class="button" align="right" width="20" src="images/replay.svg"></span>
+<span onclick="RefreshPageContent()"><img class="medium-button" align="right" title="Refresh" src="images/replay.svg"></span>
</td>
</tr>
</table>
@@ -30,13 +30,13 @@
<div id="control_buttons">
<table>
<tr>
-<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>
+<td><span onclick="Command('previous')"><img class="button" title="Previous" src="images/back.svg"></span></td>
+<td><span onclick="Command('rewind')"><img class="button" title="Rewind" src="images/rewind.svg"></span></td>
+<td><div id="playpausebutton"><span onclick="Command('pause')"><img class="button" title="Pause" src="images/pause.svg"></span></div></td>
+<td><div id="stopbutton"><span onclick="Command('stop')"><img class="button" title="Stop" src="images/stop.svg"></span></div></td>
+<td><span onclick="Command('fastfwd')"><img class="button" title="Fast Forward" src="images/fast-forward.svg"></span></td>
+<td><span onclick="Command('next')"><img class="button" title="Next" src="images/next.svg"></span></td>
+<td><span onclick="Command('repeat')"><div id="repeatstate"><img class="button" title="Repeat is on" src="images/replay.svg"></div></span></td>
</tr>
</table>
</div>
@@ -44,9 +44,9 @@
<div id="control_volume">
<table>
<tr>
-<td><span onclick="Command('vold')"><img class="button" width="30" src="images/minus.svg"></span></td>
+<td><span onclick="Command('vold')"><img class="button" title="Volume down" 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" width="30" src="images/plus.svg"></span></td>
+<td><span onclick="Command('volu')"><img class="button" title="Volume up" src="images/plus.svg"></span></td>
</tr>
</table>
</div>
diff --git a/mpd.css b/mpd.css
index 597f527..27e2150 100644
--- a/mpd.css
+++ b/mpd.css
@@ -33,6 +33,24 @@ button
}
.button
+{
+ cursor: pointer;
+ width: 30px;
+}
+
+.medium-button
+{
+ cursor: pointer;
+ width: 20px;
+}
+
+.small-button
+{
+ cursor: pointer;
+ width: 15px;
+}
+
+.link
{
cursor: pointer;
}
@@ -191,4 +209,5 @@ button
#credits {
font-size: 0.6em;
background-color: Black;
-}
\ No newline at end of file
+}
+
diff --git a/mpd.js b/mpd.js
index f1c60cf..c23c316 100644
--- a/mpd.js
+++ b/mpd.js
@@ -98,19 +98,19 @@ function RefreshPageStatus() {
document.getElementById('nowplaying_trackname').innerHTML=nowPlayingName;
RefreshTime()
if (currentState=="play") {
- document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('pause')\"><img class=\"button\" width=\"30\" src=\"images/pause.svg\"></span>";
+ document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('pause')\"><img class=\"button\" title=\"Pause\" src=\"images/pause.svg\"></span>";
} else {
- document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('play')\"><img class=\"button\" width=\"30\" src=\"images/play-button.svg\"></span>";
+ document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('play')\"><img class=\"button\" title=\"Play\" src=\"images/play-button.svg\"></span>";
}
if (currentState=="stop") {
- document.getElementById('stopbutton').innerHTML="<span><img class=\"button\" width=\"30\" src=\"images/stopoff.svg\"></span>";
+ document.getElementById('stopbutton').innerHTML="<span><img class=\"button\" src=\"images/stopoff.svg\"></span>";
} else {
- document.getElementById('stopbutton').innerHTML="<span onclick=\"Command('stop')\"><img class=\"button\" width=\"30\" src=\"images/stop.svg\"></span>";
+ document.getElementById('stopbutton').innerHTML="<span onclick=\"Command('stop')\"><img class=\"button\" title=\"Stop\" src=\"images/stop.svg\"></span>";
}
if (returnedData["repeat"]=="1") {
- document.getElementById('repeatstate').innerHTML="<img width=\"30\" src=\"images/replay.svg\"></a>";
+ document.getElementById('repeatstate').innerHTML="<img class=\"button\" title=\"Replay is on\" src=\"images/replay.svg\"></a>";
} else {
- document.getElementById('repeatstate').innerHTML="<img width=\"30\" src=\"images/replayoff.svg\"></a>";
+ document.getElementById('repeatstate').innerHTML="<img class=\"button\" title=\"Replay is off\" src=\"images/replayoff.svg\"></a>";
}
document.getElementById('volume_total').innerHTML="<div id=\"volume_actual\" style=\"width:"+returnedData["volume"]+"%\">";
@@ -142,16 +142,16 @@ req.onreadystatechange = function () {
var playlistMenuText = "<table>\
<tr>\
- <td><span class=\"button\" onclick=\"EditPlayList()\"><img width=\"20\" src=\"images/folder.svg\"></span><td>\
- <td><span class=\"button\" onclick=\"LoadPlayList()\"><img width=\"20\" src=\"images/list.svg\"></span><td>\
- <td><span class=\"button\" onclick=\"SavePlayList()\"><img width=\"20\" src=\"images/download.svg\"></span><td>\
- <td><span class=\"button\" onclick=\"return confirm('Clear current playlist, are you sure?') ? PlaylistCommand('clear') : false;\" ><img width=\"20\" src=\"images/cancel.svg\"></span><td>\
+ <td><span onclick=\"EditPlayList()\"><img class=\"medium-button\" title=\"Files\" src=\"images/folder.svg\"></span><td>\
+ <td><span onclick=\"LoadPlayList()\"><img class=\"medium-button\" title=\"Lists\" src=\"images/list.svg\"></span><td>\
+ <td><span onclick=\"SavePlayList()\"><img class=\"medium-button\" title=\"Save current list\" src=\"images/download.svg\"></span><td>\
+ <td><span onclick=\"return confirm('Clear current playlist, are you sure?') ? PlaylistCommand('clear') : false;\" ><img class=\"medium-button\" title=\"Clear current list\" src=\"images/cancel.svg\"></span><td>\
</tr>\
</table>";
var itemsText="<table>\
<tr id=\"items_heading\">\
- <td></td class=\"track_number\"><td class=\"file\">Title</td><td class=\"button\" colspan=\"3\">Controls</td>\
+ <td></td class=\"track_number\"><td class=\"file\">Title</td><td class=\"medium-button\" colspan=\"3\">Controls</td>\
</tr>";
var even = 0;
@@ -173,16 +173,16 @@ req.onreadystatechange = function () {
<a name=\""+id+"\">"+(Number(id)+1)+"</a></td>\
</td>\
<td class=\"file\">\
- <span class=\"button\" onclick=\"PlaylistCommand('playitem',"+id+")\">"+name+"</span>\
+ <span class=\"link\" onclick=\"PlaylistCommand('playitem',"+id+")\">"+name+"</span>\
</td>\
<td class=\"move\">\
- <span class=\"button\" onclick=\"PlaylistCommand('moveup',"+id+")\"><img width=\"15\" src=\"images/up-arrow.svg\"></span>\
+ <span onclick=\"PlaylistCommand('moveup',"+id+")\"><img class=\"small-button\" title=\"Move up\" src=\"images/up-arrow.svg\"></span>\
</td>\
<td class=\"move\">\
- <span class=\"button\" onclick=\"PlaylistCommand('movedown',"+id+")\"><img width=\"15\" src=\"images/down-arrow.svg\"></span>\
+ <span onclick=\"PlaylistCommand('movedown',"+id+")\"><img class=\"small-button\" title=\"Move down\" src=\"images/down-arrow.svg\"></span>\
</td>\
<td class=\"remove\">\
- <span class=\"button\" onclick=\"PlaylistCommand('remove',"+id+")\"><img width=\"15\" src=\"images/cancel.svg\"></span>\
+ <span onclick=\"PlaylistCommand('remove',"+id+")\"><img class=\"small-button\" title=\"Remove\" src=\"images/cancel.svg\"></span>\
</td>\
</tr>";
}
@@ -209,14 +209,14 @@ req.onreadystatechange = function () {
var playlistMenuText = "<table>\
<tr>\
- <td><span class=\"button\" onclick=\"RefreshPlaylist()\"><img width=\"20\" src=\"images/list.svg\"></span><td>\
- <td><span class=\"button\" onclick=\"return confirm('Add all to the list, are you sure?') ? PlaylistEditCommand('add','"+EscapeStr(dir)+"') : false;\" ><img width=\"20\" src=\"images/plus.svg\"></span><td>\
+ <td><span onclick=\"RefreshPlaylist()\"><img class=\"medium-button\" title=\"Home\" src=\"images/list.svg\"></span><td>\
+ <td><span onclick=\"return confirm('Add all to the list, are you sure?') ? PlaylistEditCommand('add','"+EscapeStr(dir)+"') : false;\" ><img class=\"medium-button\" title=\"Add all\" src=\"images/plus.svg\"></span><td>\
</tr>\
</table>";
var itemsText= "<table>\
<tr id=\"items_heading\">\
- <td></td class=\"track_number\"><td class=\"file\">Title</td><td class=\"button\" colspan=\"2\">Controls</td>\
+ <td></td class=\"track_number\"><td class=\"file\">Title</td><td colspan=\"2\">Controls</td>\
</tr>";
var even = 0;
@@ -230,7 +230,7 @@ req.onreadystatechange = function () {
even = ! even;
var itemsText = itemsText + "<tr class=\"itemOdd\">\
<td class=\"track_number\"></td>\
- <td class=\"file\"><span class=\"button\" onclick=\"EditPlayList('"+upperLevel+"')\">..</span></td>\
+ <td class=\"file\"><span class=\"link\" onclick=\"EditPlayList('"+upperLevel+"')\">..</span></td>\
<td></td><td></td>";
}
@@ -263,14 +263,14 @@ req.onreadystatechange = function () {
if (type == "directory") {
itemsText = itemsText + "<td class=\"file\">\
- <span class=\"button\" onclick=\"EditPlayList('"+EscapeStr(name)+"')\">"+tailName+"</span></td><td>\
- <span class=\"button\" onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\"><img width=\"15\" src=\"images/plus.svg\"></span></td>";
+ <span class=\"link\" onclick=\"EditPlayList('"+EscapeStr(name)+"')\">"+tailName+"</span></td><td>\
+ <span onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\"><img class=\"small-button\" title=\"Add\" src=\"images/plus.svg\"></span></td>";
};
if (type == "file") {
itemsText = itemsText + "<td class=\"file\">\
- <span class=\"button\" onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\">"+tailName+"</span></td><td>\
- <span class=\"button\" onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\"><img width=\"15\" src=\"images/plus.svg\"></span></td>";
+ <span class=\"link\" onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\">"+tailName+"</span></td><td>\
+ <span onclick=\"PlaylistEditCommand('add','"+EscapeStr(name)+"')\"><img class=\"small-button\" title=\"Add\" src=\"images/plus.svg\"></span></td>";
};
itemsText = itemsText + "</tr>";
@@ -301,13 +301,13 @@ req.onreadystatechange = function () {
var returnedData = JSON.parse(this.responseText);
playlistMenuText="<table>\
<tr>\
- <td><span class=\"button\" onclick=\"RefreshPlaylist()\"><img width=\"20\" src=\"images/list.svg\"></span><td>\
- <td><span class=\"button\" onclick=\"confirm('Clear current playlist, are you sure?') ? PlaylistCommandRefStatus('clear') : false;\" ><img width=\"20\" src=\"images/cancel.svg\"></span><td>\
+ <td><span onclick=\"RefreshPlaylist()\"><img class=\"medium-button\" title=\"Home\" src=\"images/list.svg\"></span><td>\
+ <td><span onclick=\"confirm('Clear current playlist, are you sure?') ? PlaylistCommandRefStatus('clear') : false;\" ><img class=\"medium-button\" title=\"Clear all\" src=\"images/cancel.svg\"></span><td>\
</tr>\
</table>";
itemsText="<table>\
<tr id=\"items_heading\">\
- <td class=\"track_number\"></td><td class=\"file\">Name</td><td class=\"button\">Controls</td>\
+ <td class=\"track_number\"></td><td class=\"file\">Name</td><td>Controls</td>\
</tr>";
var even = 0;
@@ -324,8 +324,8 @@ req.onreadystatechange = function () {
itemsText = itemsText + "<tr class=\""+evText+"\">\
<td class=\"track_number\"><a name=\"0\"></a></td>\
- <td class=\"file\"><span class=\"button\" onclick=\"PlaylistEditCommandRefFull('load','"+EscapeStr(name)+"')\">"+name+"</td>\
- <td class=\"controls\"><span class=\"button\" onclick=\"confirm('Delete playlist "+name+", are you sure?') ? DelPlayList('"+EscapeStr(name)+"') : false;\"><img width=\"20\" src=\"images/minus.svg\"></span></td>\
+ <td class=\"file\"><span class=\"link\" onclick=\"PlaylistEditCommandRefFull('load','"+EscapeStr(name)+"')\">"+name+"</td>\
+ <td class=\"controls\"><span onclick=\"confirm('Delete playlist "+name+", are you sure?') ? DelPlayList('"+EscapeStr(name)+"') : false;\"><img class=\"small-button\" title=\"Delete\" src=\"images/minus.svg\"></span></td>\
</tr>";
}
--
2.34.1