- Implemented support for shuffle, random and set volume on the UI

- Reduced the websocket ping poll frequency to 1 second

platypush/backend/http/__init__.py

@@ -123,7 +123,7 @@ class HttpBackend(Backend):
                 try:
                     waiter = await websocket.ping()
                     await asyncio.wait_for(waiter, timeout=5)
-                    time.sleep(0.1)
+                    time.sleep(1)
                 except (asyncio.TimeoutError, websockets.exceptions.ConnectionClosed) as e:
                     logging.info('Client {} closed connection'.format(websocket.remote_address[0]))
                     self.active_websockets.remove(websocket)

platypush/backend/http/static/css/application.css

@@ -95,3 +95,49 @@ main {
             color: #666;
         }
 
+#track-seeker-container {
+    margin-bottom: 15px;
+}
+
+#volume-ctrl-container {
+    margin-top: 15px;
+}
+
+.slider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 15px;
+    border-radius: 5px;
+    background: #e4e4e4;
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: .2s;
+    transition: opacity .2s;
+}
+
+    .slider:hover {
+        opacity: 1;
+    }
+
+    .slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background: #4CAF50;
+        cursor: pointer;
+    }
+
+        .slider[disabled]::-webkit-slider-thumb {
+            display: none;
+        }
+
+    .slider::-moz-range-thumb {
+        width: 25px;
+        height: 25px;
+        background: #4CAF50;
+        cursor: pointer;
+    }
+

platypush/backend/http/static/js/music.mpd.js

@@ -1,5 +1,5 @@
 $(document).ready(function() {
-    var execute = function(request, onSuccess, onComplete) {
+    var execute = function(request, onSuccess, onError, onComplete) {
         request['target'] = 'localhost';
         $.ajax({
             type: 'POST',
@@ -12,6 +12,11 @@ $(document).ready(function() {
                     onComplete();
                 }
             },
+            error: function(xhr, status, error) {
+                if (onError) {
+                    onError(xhr, status, error);
+                }
+            },
             success: function(response, status, xhr) {
                 if (onSuccess) {
                     onSuccess(response, status, xhr);
@@ -28,6 +33,7 @@ $(document).ready(function() {
     var updateControls = function(status, track) {
         var $playbackControls = $('.playback-controls');
         var $curTrack = $('.track-info');
+        var $volumeCtrl = $('#volume-ctrl');
 
         if (status) {
             switch (status.state.toLowerCase()) {
@@ -53,6 +59,11 @@ $(document).ready(function() {
                     $curTrack.find('.no-track').hide();
                     break;
             }
+
+            if ('volume' in status) {
+                var volume = parseInt(status.volume);
+                $volumeCtrl.val(volume);
+            }
         }
 
         if (track) {
@@ -183,6 +194,8 @@ $(document).ready(function() {
     var initBindings = function() {
         window.registerEventListener(onEvent);
         var $playbackControls = $('.playback-controls').find('button');
+        var $volumeCtrl = $('#volume-ctrl');
+        var prevVolume;
 
         $playbackControls.on('click', function(evt) {
             var action = $(this).data('action');
@@ -196,11 +209,31 @@ $(document).ready(function() {
                 },
 
                 onSuccess=undefined,
+                onError=undefined,
                 onComplete = function() {
                     $btn.removeAttr('disabled');
                 }
             );
         });
+
+        $volumeCtrl.on('mousedown', function(event) {
+            prevVolume = $(this).val();
+        });
+
+        $volumeCtrl.on('mouseup', function(event) {
+            execute(
+                {
+                    type: 'request',
+                    action: 'music.mpd.setvol',
+                    args: { vol: $(this).val() }
+                },
+
+                onSuccess=undefined,
+                onError = function() {
+                    $volumeCtrl.val(prevVolume);
+                }
+            );
+        });
     };
 
     var init = function() {

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

@@ -6,27 +6,51 @@
     <span class="track"></span>
 </div>
 
-<div class="row playback-controls">
-    <div class="eight columns offset-by-two">
-        <button data-action="previous">
-            <i class="fa fa-step-backward"></i>
-        </button>
+<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">
+        </div>
+    </div>
 
-        <button data-action="play">
-            <i class="fa fa-play"></i>
-        </button>
+    <div class="row">
+        <div class="eight columns offset-by-two">
+            <button data-action="previous">
+                <i class="fa fa-step-backward"></i>
+            </button>
 
-        <button data-action="pause">
-            <i class="fa fa-pause"></i>
-        </button>
+            <button data-action="repeat">
+                <i class="fa fa-repeat"></i>
+            </button>
 
-        <button data-action="stop">
-            <i class="fa fa-stop"></i>
-        </button>
+            <button data-action="play">
+                <i class="fa fa-play"></i>
+            </button>
 
-        <button data-action="next">
-            <i class="fa fa-step-forward"></i>
-        </button>
+            <button data-action="pause">
+                <i class="fa fa-pause"></i>
+            </button>
+
+            <button data-action="stop">
+                <i class="fa fa-stop"></i>
+            </button>
+
+            <button data-action="random">
+                <i class="fa fa-random"></i>
+            </button>
+
+            <button data-action="next">
+                <i class="fa fa-step-forward"></i>
+            </button>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="six columns offset-by-three slider-container" id="volume-ctrl-container">
+            <i class="fa fa-volume-down"></i> &nbsp;
+            <input type="range" min="0" max="100" id="volume-ctrl" class="slider" style="width:90%">
+            &nbsp; <i class="fa fa-volume-up"></i>
+        </div>
     </div>
 </div>
 

platypush/plugins/music/mpd/__init__.py

@@ -64,6 +64,18 @@ class MusicMpdPlugin(MusicPlugin):
             self.setvol(str(new_volume))
         return self.status()
 
+    def random(self, value=None):
+        if value is None:
+            value = int(self.status().output['random'])
+            value = 1 if value == 0 else 0
+        self.client.random(value)
+
+    def repeat(self, value=None):
+        if value is None:
+            value = int(self.status().output['repeat'])
+            value = 1 if value == 0 else 0
+        self.client.repeat(value)
+
     def add(self, resource):
         return self._exec('add', resource)