mirrors
/
ympd
mirror of https://github.com/SuperBFG7/ympd
1
0
Fork 0
Code Issues Releases Wiki Activity

Feat: imprved layout of playbakc card

This commit is contained in:
jcorporation 2018-08-17 11:53:03 +02:00
parent 8ca90d02d6
commit f78a9c8fef
3 changed files with 53 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
htdocs/css/mpd.css
View File

@ -32,10 +32,12 @@ button {
cursor: pointer;
}
#counter {
font-size: 22px;
margin-left: 10px;
/* margin-left: 10px;
min-width: 50px;
*/
}
.card {
@ -58,10 +60,10 @@ button {
.album-cover {
background-size: cover;
border: 1px solid black;
/* border: 1px solid black;
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
margin-bottom: 20px;*/
width: 240px;
height: 240px;
background-color: #eee;

50
htdocs/index.html
View File

@ -75,18 +75,27 @@
<div class="card" id="cardPlayback">
<div class="card-header">Playback</div>
<div class="card-body">
<div class="album-cover" id="currentCover"></div>
<h1 id="currentTrack" data-href="{'cmd': 'songClick', 'options': []}"></h1>
<div class="card">
<div class="card-header"><h2 id="currentTrack" data-href="{'cmd': 'songClick', 'options': []}"></h2></div>
<div class="card-img-top album-cover" id="currentCover"></div>
<div class="card-body">
</div>
<div class="card-footer">
<div class="row">
<div class="col-8">
<input type="range" min="0" max="100" step="1" class="form-control-range" id="progressBar">
</div>
<div class="col-4" id="counter">&nbsp;&nbsp;</div>
</div>
</div>
</div>
<h3 id="currentArtist" data-href="{'cmd': 'artistClick', 'options': []}"></h3>
<h4 id="currentAlbum"></h4>
<div class="row">
<div class="col-8">
<input type="range" min="0" max="100" step="1" class="form-control-range" id="progressBar">
</div>
<div class="col-4">
<p id="counter" class="text">&nbsp;&nbsp;</p>
</div>
</div>
</div>
</div>
@ -777,15 +786,20 @@
<div class="modal-body">
<div class="album-cover"></div>
<h1></h1>
<table class="table">
<table class="table table-sm">
<tbody>
<tr data-name="artist"><td>Artist</td><td></td></tr>
<tr data-name="album"><td>Album</td><td></td></tr>
<tr data-name="track"><td>Track</td><td></td></tr>
<tr data-name="albumartist"><td>Albumartist</td><td></td></tr>
<tr data-name="genre"><td>Genre</td><td></td></tr>
<tr data-name="date"><td>Date</td><td></td></tr>
<tr data-name="uri"><td>Uri</td><td></td></tr>
<tr data-name="artist"><th>Artist</th><td></td></tr>
<tr data-name="album"><th>Album</th><td></td></tr>
<tr data-name="track"><th>Track</th><td></td></tr>
<tr data-name="albumartist"><th>Albumartist</th><td></td></tr>
<tr data-name="genre"><th>Genre</th><td></td></tr>
<tr data-name="date"><th>Date</th><td></td></tr>
<tr data-name="uri"><th>Uri</th><td></td></tr>
<tr><th colspan="2">Statistics</th></tr>
<tr data-name="playCount"><th>Play count</th><td></td></tr>
<tr data-name="skipCount"><th>Skip count</th><td></td></tr>
<tr data-name="lastPlayed"><th>Last played</th><td></td></tr>
<tr data-name="like"><th>Like</th><td></td></tr>
</tbody>
</table>
</div>

17
htdocs/js/mpd.js
View File

@ -1387,16 +1387,31 @@ function parseSongDetails(obj) {
var trLen = tr.length;
for (var i = 0; i < trLen; i++) {
var key = tr[i].getAttribute('data-name');
if (!key)
continue;
var value = obj.data[key];
if (key == 'duration') {
var minutes = Math.floor(value / 60);
var seconds = value - minutes * 60;
value = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
}
else if (key == 'lastPlayed') {
if (value == 0)
value = 'never';
else {
var d = new Date(value * 1000);
value = d.toUTCString();
}
}
else if (key == 'like') {
if (value == 0) value = '<span class="material-icons">thumb_down_alt</span>';
else if (value == 2) value = '<span class="material-icons">thumb_up_alt</span>';
else value = 'not voted';
}
else if (key == 'uri') {
value = '<a class="text-success" href="/library/' + value + '">' + value + '</a>';
}
tr[i].getElementsByTagName('td')[1].innerHTML = value;
tr[i].getElementsByTagName('td')[0].innerHTML = value;
}
}