mirror of
https://github.com/SuperBFG7/ympd
synced 2024-09-28 22:20:42 +00:00
Feat: imprved layout of playbakc card
This commit is contained in:
parent
8ca90d02d6
commit
f78a9c8fef
@ -32,10 +32,12 @@ button {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#counter {
|
#counter {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
margin-left: 10px;
|
/* margin-left: 10px;
|
||||||
min-width: 50px;
|
min-width: 50px;
|
||||||
|
*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
@ -58,10 +60,10 @@ button {
|
|||||||
|
|
||||||
.album-cover {
|
.album-cover {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
border: 1px solid black;
|
/* border: 1px solid black;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;*/
|
||||||
width: 240px;
|
width: 240px;
|
||||||
height: 240px;
|
height: 240px;
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
|
@ -75,19 +75,28 @@
|
|||||||
<div class="card" id="cardPlayback">
|
<div class="card" id="cardPlayback">
|
||||||
<div class="card-header">Playback</div>
|
<div class="card-header">Playback</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="album-cover" id="currentCover"></div>
|
|
||||||
<h1 id="currentTrack" data-href="{'cmd': 'songClick', 'options': []}"></h1>
|
<div class="card">
|
||||||
<h3 id="currentArtist" data-href="{'cmd': 'artistClick', 'options': []}"></h3>
|
<div class="card-header"><h2 id="currentTrack" data-href="{'cmd': 'songClick', 'options': []}"></h2></div>
|
||||||
<h4 id="currentAlbum"></h4>
|
<div class="card-img-top album-cover" id="currentCover"></div>
|
||||||
|
<div class="card-body">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<input type="range" min="0" max="100" step="1" class="form-control-range" id="progressBar">
|
<input type="range" min="0" max="100" step="1" class="form-control-range" id="progressBar">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-4">
|
<div class="col-4" id="counter"> </div>
|
||||||
<p id="counter" class="text"> </p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h3 id="currentArtist" data-href="{'cmd': 'artistClick', 'options': []}"></h3>
|
||||||
|
<h4 id="currentAlbum"></h4>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card hide" id="cardQueue">
|
<div class="card hide" id="cardQueue">
|
||||||
@ -777,15 +786,20 @@
|
|||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="album-cover"></div>
|
<div class="album-cover"></div>
|
||||||
<h1></h1>
|
<h1></h1>
|
||||||
<table class="table">
|
<table class="table table-sm">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr data-name="artist"><td>Artist</td><td></td></tr>
|
<tr data-name="artist"><th>Artist</th><td></td></tr>
|
||||||
<tr data-name="album"><td>Album</td><td></td></tr>
|
<tr data-name="album"><th>Album</th><td></td></tr>
|
||||||
<tr data-name="track"><td>Track</td><td></td></tr>
|
<tr data-name="track"><th>Track</th><td></td></tr>
|
||||||
<tr data-name="albumartist"><td>Albumartist</td><td></td></tr>
|
<tr data-name="albumartist"><th>Albumartist</th><td></td></tr>
|
||||||
<tr data-name="genre"><td>Genre</td><td></td></tr>
|
<tr data-name="genre"><th>Genre</th><td></td></tr>
|
||||||
<tr data-name="date"><td>Date</td><td></td></tr>
|
<tr data-name="date"><th>Date</th><td></td></tr>
|
||||||
<tr data-name="uri"><td>Uri</td><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>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1387,16 +1387,31 @@ function parseSongDetails(obj) {
|
|||||||
var trLen = tr.length;
|
var trLen = tr.length;
|
||||||
for (var i = 0; i < trLen; i++) {
|
for (var i = 0; i < trLen; i++) {
|
||||||
var key = tr[i].getAttribute('data-name');
|
var key = tr[i].getAttribute('data-name');
|
||||||
|
if (!key)
|
||||||
|
continue;
|
||||||
var value = obj.data[key];
|
var value = obj.data[key];
|
||||||
if (key == 'duration') {
|
if (key == 'duration') {
|
||||||
var minutes = Math.floor(value / 60);
|
var minutes = Math.floor(value / 60);
|
||||||
var seconds = value - minutes * 60;
|
var seconds = value - minutes * 60;
|
||||||
value = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
|
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') {
|
else if (key == 'uri') {
|
||||||
value = '<a class="text-success" href="/library/' + value + '">' + value + '</a>';
|
value = '<a class="text-success" href="/library/' + value + '">' + value + '</a>';
|
||||||
}
|
}
|
||||||
tr[i].getElementsByTagName('td')[1].innerHTML = value;
|
tr[i].getElementsByTagName('td')[0].innerHTML = value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user