From de2e50fefa18020c6f6d9c50e65beabc6ea5089d Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Wed, 31 Jan 2018 10:35:14 +0100 Subject: [PATCH] Implemented support for track random seek --- .../backend/http/static/css/application.css | 6 +- platypush/backend/http/static/js/music.mpd.js | 110 +++++++++++++++++- .../http/templates/plugins/music.mpd.html | 4 +- platypush/plugins/music/mpd/__init__.py | 3 + 4 files changed, 117 insertions(+), 6 deletions(-) diff --git a/platypush/backend/http/static/css/application.css b/platypush/backend/http/static/css/application.css index 05fcf30a5..41d0c5d83 100644 --- a/platypush/backend/http/static/css/application.css +++ b/platypush/backend/http/static/css/application.css @@ -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 { diff --git a/platypush/backend/http/static/js/music.mpd.js b/platypush/backend/http/static/js/music.mpd.js index 3cf35af94..06c6f4e70 100644 --- a/platypush/backend/http/static/js/music.mpd.js +++ b/platypush/backend/http/static/js/music.mpd.js @@ -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() { diff --git a/platypush/backend/http/templates/plugins/music.mpd.html b/platypush/backend/http/templates/plugins/music.mpd.html index 1d6188c18..3a68b9f24 100644 --- a/platypush/backend/http/templates/plugins/music.mpd.html +++ b/platypush/backend/http/templates/plugins/music.mpd.html @@ -9,7 +9,9 @@
- + -:--   + +   -:--
diff --git a/platypush/plugins/music/mpd/__init__.py b/platypush/plugins/music/mpd/__init__.py index 01f954695..ed04c2d86 100644 --- a/platypush/plugins/music/mpd/__init__.py +++ b/platypush/plugins/music/mpd/__init__.py @@ -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')