mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-10-26 11:27:40 +00:00
Code Issues Releases Wiki Activity

Feat: Like button in playback card

Browse Source
This commit is contained in:
jcorporation
2018-08-18 16:26:12 +02:00
parent 6d1f0437b3
commit 492f008555
6 changed files with 64 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
htdocs/css/mpd.css
View File

@@ -56,8 +56,7 @@ small {
}
.card-footer-playback {
padding-top: 0px;
padding-bottom: 0px;
padding: 0px;
}
.album-cover {
@@ -195,6 +194,14 @@ button.active {
border-color: #28a745 !important;
}
button.active-fg-green {
color: #28a745 !important;
}
button.active-fg-red {
color: #bd2130 !important;
}
div#alertBox {
position:fixed;
top: 50px;

17
htdocs/index.html
View File

@@ -80,15 +80,22 @@
<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>
<small>Artist</small>
<h4 id="currentArtist" data-href="{'cmd': 'artistClick', 'options': []}"></h4>
<small>Album</small>
<h4 id="currentAlbum"></h4>
<small>Vote</small><br/>
<div class="btn-group">
<button id="btnVoteDown" data-href="{'cmd': 'voteSong', 'options': ['0']}" class="btn btn-sm btn-light material-icons">thumb_down</button>
<button id="btnVoteUp" data-href="{'cmd': 'voteSong', 'options': ['2']}" class="btn btn-sm btn-light material-icons">thumb_up</button>
</div>
</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>
<button data-href="{'cmd':'clickPlay','options':[]}" class="mr-1 ml-1 btn btn-light material-icons btnPlay progressBarPlay">pause</button>
<input type="range" min="0" max="100" step="1" class="mr-1 ml-1 form-control-range flex-grow-1" id="progressBar">
<div class="btn ml-1 mr-1" id="counter">&nbsp;&nbsp;</div>
</div>
</div>
</div>

32
htdocs/js/mpd.js
View File

@@ -1451,6 +1451,34 @@ function getAllPlaylists(obj) {
}
}
function voteSong(vote) {
var uri = domCache.currentTrack.getAttribute('data-uri');
if (uri == '')
return;
var btnVoteUp = document.getElementById('btnVoteUp');
var btnVoteDown = document.getElementById('btnVoteDown');
if (vote == 2 && btnVoteUp.classList.contains('active-fg-green'))
vote = 1;
else if (vote == 0 && btnVoteDown.classList.contains('active-fg-red'))
vote = 1;
sendAPI({"cmd":"MPD_API_LIKE","data": {"uri": uri, "like": vote}});
setVoteSongBtns(vote);
}
function setVoteSongBtns(vote) {
if (vote == 0) {
btnVoteUp.classList.remove('active-fg-green');
btnVoteDown.classList.add('active-fg-red');
} else if (vote == 1) {
btnVoteUp.classList.remove('active-fg-green');
btnVoteDown.classList.remove('active-fg-red');
} else if (vote == 2) {
btnVoteUp.classList.add('active-fg-green');
btnVoteDown.classList.remove('active-fg-red');
}
}
function toggleAddToPlaylistFrm() {
var btn = document.getElementById('toggleAddToPlaylistBtn');
toggleBtn('toggleAddToPlaylistBtn');
@@ -1815,8 +1843,6 @@ function gotoPage(x) {
appGoto(app.current.app, app.current.tab, app.current.view, app.current.page + '/' + app.current.filter + '/' + app.current.search);
}
function saveQueue() {
var plName = document.getElementById('saveQueueName').value;
var valid = plName.replace(/\w/g,'');
@@ -1913,6 +1939,8 @@ function songChange(obj) {
domCache.currentTrack.setAttribute('data-uri', '');
}
document.title = pageTitle;
setVoteSongBtns(obj.data.like);
//Update Artist in queue view for http streams
var playingTr = document.getElementById('queueTrackId' + obj.data.currentSongId);
if (playingTr)