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

- Reduced the websocket ping poll frequency to 1 second
This commit is contained in:
Fabio Manganiello 2018-01-31 01:32:07 +01:00
parent 28bc4c748e
commit 968b71e946
5 changed files with 134 additions and 19 deletions

View file

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

View file

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

View file

@ -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() {

View file

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

View file

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