Implemented support for track random seek

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 {

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) {
+            $volumeCtrl.val(parseInt(status.volume));
-                var volume = parseInt(status.volume);
+
-                $volumeCtrl.val(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() {

platypush/backend/http/templates/plugins/music.mpd.html

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

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