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

Feat: improved layout of playback card

This commit is contained in:
jcorporation 2018-08-18 15:23:02 +02:00
parent f78a9c8fef
commit 6d1f0437b3
3 changed files with 48 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
htdocs/css/mpd.css
View File

@ -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 {

30
htdocs/index.html
View File

@ -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">&nbsp;&nbsp;</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">&nbsp;&nbsp;</div>
</div>
</div>
</div>
<h3 id="currentArtist" data-href="{'cmd': 'artistClick', 'options': []}"></h3>
<h4 id="currentAlbum"></h4>
</div>
</div>

17
htdocs/js/mpd.js
View File

@ -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) {