From 968b71e946f5cb58205936a109d3fe0a43a31108 Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Wed, 31 Jan 2018 01:32:07 +0100 Subject: [PATCH] - 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 | 2 +- .../backend/http/static/css/application.css | 46 +++++++++++++++ platypush/backend/http/static/js/music.mpd.js | 35 ++++++++++- .../http/templates/plugins/music.mpd.html | 58 +++++++++++++------ platypush/plugins/music/mpd/__init__.py | 12 ++++ 5 files changed, 134 insertions(+), 19 deletions(-) diff --git a/platypush/backend/http/__init__.py b/platypush/backend/http/__init__.py index b9b37b72ec..8637aa9fb8 100644 --- a/platypush/backend/http/__init__.py +++ b/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) diff --git a/platypush/backend/http/static/css/application.css b/platypush/backend/http/static/css/application.css index 3af8fd4309..05fcf30a53 100644 --- a/platypush/backend/http/static/css/application.css +++ b/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; + } + diff --git a/platypush/backend/http/static/js/music.mpd.js b/platypush/backend/http/static/js/music.mpd.js index 16e9e8fc0a..3cf35af948 100644 --- a/platypush/backend/http/static/js/music.mpd.js +++ b/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() { diff --git a/platypush/backend/http/templates/plugins/music.mpd.html b/platypush/backend/http/templates/plugins/music.mpd.html index 54cfd69b1a..1d6188c18b 100644 --- a/platypush/backend/http/templates/plugins/music.mpd.html +++ b/platypush/backend/http/templates/plugins/music.mpd.html @@ -6,27 +6,51 @@ -
-
- +
+
+
+ +
+
- +
+
+ - + - + - + + + + + + + +
+
+ +
+
+   + +   +
diff --git a/platypush/plugins/music/mpd/__init__.py b/platypush/plugins/music/mpd/__init__.py index 0e4219af28..b86d7d5df3 100644 --- a/platypush/plugins/music/mpd/__init__.py +++ b/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)