Implemented support for track random seek
This commit is contained in:
Fabio Manganiello
parent
7cd15d35e1
commit
de2e50fefa
|
|
@ -55,6 +55,10 @@ main {
|
|||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.playback-controls * > button.enabled {
|
||||
color: #59df3e;
|
||||
}
|
||||
|
||||
.button[disabled] {
|
||||
background: rgba(240,240,240,1)
|
||||
}
|
||||
|
|
@ -96,7 +100,7 @@ main {
|
|||
}
|
||||
|
||||
#track-seeker-container {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#volume-ctrl-container {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
$(document).ready(function() {
|
||||
var seekInterval;
|
||||
var curTrackElapsed = {
|
||||
timestamp: null,
|
||||
elapsed: null,
|
||||
};
|
||||
|
||||
var execute = function(request, onSuccess, onError, onComplete) {
|
||||
request['target'] = 'localhost';
|
||||
$.ajax({
|
||||
|
|
@ -34,8 +40,34 @@ $(document).ready(function() {
|
|||
var $playbackControls = $('.playback-controls');
|
||||
var $curTrack = $('.track-info');
|
||||
var $volumeCtrl = $('#volume-ctrl');
|
||||
var $trackSeeker = $('#track-seeker');
|
||||
var $randomBtn = $playbackControls.find('[data-action=random]');
|
||||
var $repeatBtn = $playbackControls.find('[data-action=repeat]');
|
||||
var elapsed; var length;
|
||||
|
||||
if (status) {
|
||||
if (seekInterval) {
|
||||
clearInterval(seekInterval);
|
||||
}
|
||||
|
||||
if ('time' in status) {
|
||||
var time = status.time.split(':');
|
||||
elapsed = parseInt(parseInt(time[0])/60) + ':'
|
||||
+ (parseInt(time[0])%60 < 10 ? '0' : '') + (parseInt(time[0])%60);
|
||||
|
||||
if (time.length > 1) {
|
||||
length = parseInt(parseInt(time[1])/60) + ':'
|
||||
+ (parseInt(time[1])%60 < 10 ? '0' : '') + (parseInt(time[1])%60);
|
||||
}
|
||||
|
||||
$trackSeeker.val(parseInt(time[0]));
|
||||
$trackSeeker.attr('max', parseInt(time[1]));
|
||||
curTrackElapsed = {
|
||||
timestamp: new Date().getTime(),
|
||||
elapsed: parseInt(time[0]),
|
||||
};
|
||||
}
|
||||
|
||||
switch (status.state.toLowerCase()) {
|
||||
case 'stop':
|
||||
$playbackControls.find('button[data-action=pause]').hide();
|
||||
|
|
@ -43,26 +75,62 @@ $(document).ready(function() {
|
|||
$curTrack.find('.artist').hide();
|
||||
$curTrack.find('.track').hide();
|
||||
$curTrack.find('.no-track').show();
|
||||
|
||||
$trackSeeker.attr('disabled', true);
|
||||
$('.seek-time').text('-:--');
|
||||
break;
|
||||
|
||||
case 'pause':
|
||||
$playbackControls.find('button[data-action=pause]').hide();
|
||||
$playbackControls.find('button[data-action=play]').show();
|
||||
$curTrack.find('.artist').show();
|
||||
$curTrack.find('.track').show();
|
||||
$curTrack.find('.no-track').hide();
|
||||
|
||||
$trackSeeker.removeAttr('disabled');
|
||||
$('#seek-time-elapsed').text(elapsed ? elapsed : '-:--');
|
||||
$('#seek-time-length').text(length ? length : '-:--');
|
||||
break;
|
||||
|
||||
case 'play':
|
||||
$playbackControls.find('button[data-action=pause]').show();
|
||||
$playbackControls.find('button[data-action=play]').hide();
|
||||
$curTrack.find('.artist').show();
|
||||
$curTrack.find('.track').show();
|
||||
$curTrack.find('.no-track').hide();
|
||||
|
||||
$trackSeeker.removeAttr('disabled');
|
||||
$('#seek-time-elapsed').text(elapsed ? elapsed : '-:--');
|
||||
$('#seek-time-length').text(length ? length : '-:--');
|
||||
|
||||
seekInterval = setInterval(function() {
|
||||
var length = parseInt($trackSeeker.attr('max'));
|
||||
var value = parseInt((new Date().getTime() - curTrackElapsed.timestamp)/1000)
|
||||
+ curTrackElapsed.elapsed;
|
||||
|
||||
if (value < length) {
|
||||
$trackSeeker.val(value);
|
||||
elapsed = parseInt(value/60) + ':' + (value%60 < 10 ? '0' : '') + (value%60);
|
||||
$('#seek-time-elapsed').text(elapsed);
|
||||
}
|
||||
}, 1000);
|
||||
break;
|
||||
}
|
||||
|
||||
if ('volume' in status) {
|
||||
var volume = parseInt(status.volume);
|
||||
$volumeCtrl.val(volume);
|
||||
$volumeCtrl.val(parseInt(status.volume));
|
||||
|
||||
var repeat = parseInt(status.repeat);
|
||||
if (repeat) {
|
||||
$repeatBtn.addClass('enabled');
|
||||
} else {
|
||||
$repeatBtn.removeClass('enabled');
|
||||
}
|
||||
|
||||
var random = parseInt(status.random);
|
||||
if (random) {
|
||||
$randomBtn.addClass('enabled');
|
||||
} else {
|
||||
$randomBtn.removeClass('enabled');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -195,6 +263,7 @@ $(document).ready(function() {
|
|||
window.registerEventListener(onEvent);
|
||||
var $playbackControls = $('.playback-controls').find('button');
|
||||
var $volumeCtrl = $('#volume-ctrl');
|
||||
var $trackSeeker = $('#track-seeker');
|
||||
var prevVolume;
|
||||
|
||||
$playbackControls.on('click', function(evt) {
|
||||
|
|
@ -208,7 +277,10 @@ $(document).ready(function() {
|
|||
action: 'music.mpd.' + action,
|
||||
},
|
||||
|
||||
onSuccess=undefined,
|
||||
onSuccess = function(response) {
|
||||
updateControls(status=response.response.output);
|
||||
},
|
||||
|
||||
onError=undefined,
|
||||
onComplete = function() {
|
||||
$btn.removeAttr('disabled');
|
||||
|
|
@ -234,6 +306,36 @@ $(document).ready(function() {
|
|||
}
|
||||
);
|
||||
});
|
||||
|
||||
$volumeCtrl.on('mouseup', function(event) {
|
||||
execute(
|
||||
{
|
||||
type: 'request',
|
||||
action: 'music.mpd.setvol',
|
||||
args: { vol: $(this).val() }
|
||||
},
|
||||
|
||||
onSuccess=undefined,
|
||||
onError = function() {
|
||||
$volumeCtrl.val(prevVolume);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
$trackSeeker.on('mouseup', function(event) {
|
||||
execute(
|
||||
{
|
||||
type: 'request',
|
||||
action: 'music.mpd.seekcur',
|
||||
args: { value: $(this).val() }
|
||||
},
|
||||
|
||||
onSuccess = function(response) {
|
||||
var elapsed = parseInt(response.response.output.time.split(':')[0]);
|
||||
curTrackElapsed.elapsed = elapsed;
|
||||
}
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@
|
|||
<div class="playback-controls">
|
||||
<div class="row">
|
||||
<div class="six columns offset-by-three slider-container" id="track-seeker-container">
|
||||
<input type="range" min="0" id="track-seeker" disabled="disabled" class="slider">
|
||||
<span class="seek-time" id="seek-time-elapsed">-:--</span>
|
||||
<input type="range" min="0" id="track-seeker" disabled="disabled" class="slider" style="width:80%">
|
||||
<span class="seek-time" id="seek-time-length">-:--</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -86,6 +86,9 @@ class MusicMpdPlugin(MusicPlugin):
|
|||
def clear(self):
|
||||
return self._exec('clear')
|
||||
|
||||
def seekcur(self, value):
|
||||
return self._exec('seekcur', value)
|
||||
|
||||
def forward(self):
|
||||
return self._exec('seekcur', '+15')
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue