diff --git a/platypush/backend/http/__init__.py b/platypush/backend/http/__init__.py index b9b37b72e..8637aa9fb 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 3af8fd430..05fcf30a5 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 16e9e8fc0..3cf35af94 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 54cfd69b1..1d6188c18 100644 --- a/platypush/backend/http/templates/plugins/music.mpd.html +++ b/platypush/backend/http/templates/plugins/music.mpd.html @@ -6,27 +6,51 @@ -