lukmangrd/platypush
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Implemented support for track random seek

Browse source
This commit is contained in:
Fabio Manganiello 2018-01-31 10:35:14 +01:00
parent 7cd15d35e1
commit de2e50fefa
4 changed files with 117 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
platypush/backend/http/static/css/application.css
View file

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

110
platypush/backend/http/static/js/music.mpd.js
View file

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

4
platypush/backend/http/templates/plugins/music.mpd.html
View file

@ -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> &nbsp;
<input type="range" min="0" id="track-seeker" disabled="disabled" class="slider" style="width:80%">
&nbsp; <span class="seek-time" id="seek-time-length">-:--</span>
</div>
</div>

3
platypush/plugins/music/mpd/__init__.py
View file

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