mirror of
https://github.com/SuperBFG7/ympd
synced 2025-05-01 15:04:18 +00:00
Feat: improved layout of playback card
This commit is contained in:
parent
f78a9c8fef
commit
6d1f0437b3
@ -33,13 +33,6 @@ button {
|
||||
}
|
||||
|
||||
|
||||
#counter {
|
||||
font-size: 22px;
|
||||
/* margin-left: 10px;
|
||||
min-width: 50px;
|
||||
*/
|
||||
}
|
||||
|
||||
.card {
|
||||
min-height: 350px;
|
||||
}
|
||||
@ -58,15 +51,31 @@ button {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
small {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.card-footer-playback {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.album-cover {
|
||||
background-size: cover;
|
||||
/* border: 1px solid black;
|
||||
border: 1px solid black;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;*/
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
background-color: #eee;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.album-desc {
|
||||
min-width: 240px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.hide {
|
||||
@ -140,9 +149,12 @@ button {
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
#progressBar {
|
||||
width:100%;
|
||||
margin-top:8px;
|
||||
.progressBarPlay {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#counter {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
#volumeBar {
|
||||
|
@ -39,7 +39,7 @@
|
||||
<button data-href="{'cmd':'clickStop','options':[]}" id="btnStop" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
|
||||
stop
|
||||
</button>
|
||||
<button data-href="{'cmd':'clickPlay','options':[]}" id="btnPlay" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
|
||||
<button data-href="{'cmd':'clickPlay','options':[]}" id="btnPlay" type="button" class="btnPlay btn btn-secondary pl-2 pr-2 material-icons">
|
||||
pause
|
||||
</button>
|
||||
<button data-href="{'cmd':'clickNext','options':[]}" id="btnNext" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
|
||||
@ -75,27 +75,23 @@
|
||||
<div class="card" id="cardPlayback">
|
||||
<div class="card-header">Playback</div>
|
||||
<div class="card-body">
|
||||
|
||||
<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 class="album-cover" id="currentCover"></div>
|
||||
<div class="album-desc">
|
||||
<h2 id="currentTrack" data-href="{'cmd': 'songClick', 'options': []}"></h2>
|
||||
<small>Artist</small><h4 id="currentArtist" data-href="{'cmd': 'artistClick', 'options': []}"></h4>
|
||||
<small>Album</small><h4 id="currentAlbum"></h4>
|
||||
</div>
|
||||
</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"> </div>
|
||||
</div>
|
||||
<div class="card-footer card-footer-playback">
|
||||
<div class="d-flex">
|
||||
<button data-href="{'cmd':'clickPlay','options':[]}" class="btn btn-light material-icons btnPlay progressBarPlay">pause</button>
|
||||
<input type="range" min="0" max="100" step="1" class="form-control-range flex-grow-1" id="progressBar">
|
||||
<div class="btn" id="counter"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3 id="currentArtist" data-href="{'cmd': 'artistClick', 'options': []}"></h3>
|
||||
<h4 id="currentAlbum"></h4>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -69,7 +69,7 @@ domCache.counter = document.getElementById('counter');
|
||||
domCache.volumePrct = document.getElementById('volumePrct');
|
||||
domCache.volumeControl = document.getElementById('volumeControl');
|
||||
domCache.volumeIcon = document.getElementById('volumeIcon');
|
||||
domCache.btnPlay = document.getElementById('btnPlay');
|
||||
domCache.btnsPlay = document.querySelectorAll('.btnPlay');
|
||||
domCache.btnPrev = document.getElementById('btnPrev');
|
||||
domCache.btnNext = document.getElementById('btnNext');
|
||||
domCache.progressBar = document.getElementById('progressBar');
|
||||
@ -876,13 +876,16 @@ function parseState(obj) {
|
||||
|
||||
//Set playstate
|
||||
if (obj.data.state == 1) {
|
||||
domCache.btnPlay.innerText = 'play_arrow';
|
||||
for (var i = 0; i < domCache.btnsPlay.length; i++)
|
||||
domCache.btnsPlay[i].innerText = 'play_arrow';
|
||||
playstate = 'stop';
|
||||
} else if (obj.data.state == 2) {
|
||||
domCache.btnPlay.innerText = 'pause';
|
||||
for (var i = 0; i < domCache.btnsPlay.length; i++)
|
||||
domCache.btnsPlay[i].innerText = 'pause';
|
||||
playstate = 'play';
|
||||
} else {
|
||||
domCache.btnPlay.innerText = 'play_arrow';
|
||||
for (var i = 0; i < domCache.btnsPlay.length; i++)
|
||||
domCache.btnsPlay[i].innerText = 'play_arrow';
|
||||
playstate = 'pause';
|
||||
}
|
||||
|
||||
@ -897,9 +900,11 @@ function parseState(obj) {
|
||||
domCache.btnPrev.removeAttribute('disabled');
|
||||
|
||||
if (obj.data.queueLength == 0)
|
||||
domCache.btnPlay.setAttribute('disabled','disabled');
|
||||
for (var i = 0; i < domCache.btnsPlay.length; i++)
|
||||
domCache.btnsPlay[i].setAttribute('disabled','disabled');
|
||||
else
|
||||
domCache.btnPlay.removeAttribute('disabled');
|
||||
for (var i = 0; i < domCache.btnsPlay.length; i++)
|
||||
domCache.btnsPlay[i].removeAttribute('disabled');
|
||||
|
||||
//Set volume
|
||||
if (obj.data.volume == -1) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user