More consistent management of media devices icons and added devices refresh button

This commit is contained in:
Fabio Manganiello 2019-02-08 19:48:18 +01:00
parent b3f2974c4c
commit e2b0bf8462
4 changed files with 74 additions and 19 deletions

View file

@ -740,5 +740,9 @@ class HttpUtils(object):
def from_json(cls, data): def from_json(cls, data):
return json.loads(data) return json.loads(data)
@classmethod
def get_config(cls, attr):
return Config.get(attr)
# vim:sw=4:ts=4:et: # vim:sw=4:ts=4:et:

View file

@ -96,24 +96,44 @@ form#video-ctrl {
z-index: 10; z-index: 10;
border: 1px solid #d0d0d0; border: 1px solid #d0d0d0;
border-radius: 5px; border-radius: 5px;
min-width: 10em;
} }
#media-devices-panel .cast-device { #media-devices-panel .refresh-devices-container {
position: relative;
height: 1em;
}
#media-devices-panel * > .refresh-devices {
text-align: right;
cursor: pointer;
position: absolute;
top: -.5rem;
right: .5rem;
}
#media-devices-panel * > .cast-device {
padding: 0.5rem; padding: 0.5rem;
cursor: pointer; cursor: pointer;
} }
#media-devices-panel .cast-device-local { #media-devices-panel * > .cast-device-local {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
#media-devices-panel .cast-device.selected { #media-devices-panel * > .cast-device.selected {
font-weight: bold; font-weight: bold;
color: #34b868; color: #34b868;
} }
#media-devices-panel .cast-device:hover { #media-devices-panel * > .cast-device.disabled,
#media-devices-panel * > .refresh-devices.disabled {
cursor: default;
color: #999 !important;
}
#media-devices-panel * > .cast-device:hover {
background-color: #daf8e2 !important; background-color: #daf8e2 !important;
} }

View file

@ -5,7 +5,10 @@ $(document).ready(function() {
$volumeCtrl = $('#video-volume-ctrl'), $volumeCtrl = $('#video-volume-ctrl'),
$ctrlForm = $('#video-ctrl'), $ctrlForm = $('#video-ctrl'),
$devsPanel = $('#media-devices-panel'), $devsPanel = $('#media-devices-panel'),
$devsList = $devsPanel.find('.devices-list'),
$devsBtn = $('button[data-panel-toggle="#media-devices-panel"]'), $devsBtn = $('button[data-panel-toggle="#media-devices-panel"]'),
$devsBtnIcon = $('#media-devices-panel-icon'),
$devsRefreshBtn = $devsPanel.find('.refresh-devices'),
$searchBarContainer = $('#media-search-bar-container'), $searchBarContainer = $('#media-search-bar-container'),
$mediaBtnsContainer = $('#media-btns-container'), $mediaBtnsContainer = $('#media-btns-container'),
prevVolume = undefined; prevVolume = undefined;
@ -282,14 +285,19 @@ $(document).ready(function() {
}); });
$devsPanel.on('mouseup touchend', '.cast-device', function() { $devsPanel.on('mouseup touchend', '.cast-device', function() {
if ($(this).hasClass('disabled')) {
return;
}
var $devices = $devsPanel.find('.cast-device'); var $devices = $devsPanel.find('.cast-device');
var $curSelected = $devices.filter((i, d) => $(d).hasClass('selected')); var $curSelected = $devices.filter((i, d) => $(d).hasClass('selected'));
if ($curSelected.data('name') !== $(this).data('name')) { if ($curSelected.data('name') !== $(this).data('name')) {
$curSelected.removeClass('selected'); $curSelected.removeClass('selected');
$(this).addClass('selected'); $(this).addClass('selected');
$devsBtnIcon.attr('class', $(this).find('.fa').attr('class'));
if ($(this).data('local') || $(this).data('browser')) { if ($(this).data('browser') || $(this).data('local')) {
$devsBtn.removeClass('remote'); $devsBtn.removeClass('remote');
} else { } else {
$devsBtn.addClass('remote'); $devsBtn.addClass('remote');
@ -301,9 +309,20 @@ $(document).ready(function() {
$devsPanel.hide(); $devsPanel.hide();
$devsBtn.removeClass('selected'); $devsBtn.removeClass('selected');
}); });
$devsRefreshBtn.on('click', function() {
if ($(this).hasClass('disabled')) {
return;
}
$(this).addClass('disabled');
initRemoteDevices();
});
}; };
var initRemoteDevices = function() { var initRemoteDevices = function() {
$devsList.find('.cast-device[data-remote]').addClass('disabled');
execute( execute(
{ {
type: 'request', type: 'request',
@ -311,6 +330,9 @@ $(document).ready(function() {
}, },
function(results) { function(results) {
$devsRefreshBtn.removeClass('disabled');
$devsList.find('.cast-device[data-remote]').remove();
if (!results || results.response.errors.length) { if (!results || results.response.errors.length) {
return; return;
} }
@ -318,7 +340,8 @@ $(document).ready(function() {
results = results.response.output; results = results.response.output;
for (var cast of results) { for (var cast of results) {
var $cast = $('<div></div>').addClass('row cast-device') var $cast = $('<div></div>').addClass('row cast-device')
.addClass('cast-device-' + cast.type).data('name', cast.name); .addClass('cast-device-' + cast.type).attr('data-remote', true)
.data('name', cast.name);
var icon = 'question'; var icon = 'question';
switch (cast.type) { switch (cast.type) {
@ -338,7 +361,7 @@ $(document).ready(function() {
$iconContainer.appendTo($cast); $iconContainer.appendTo($cast);
$nameContainer.appendTo($cast); $nameContainer.appendTo($cast);
$cast.appendTo($devsPanel); $cast.appendTo($devsList);
} }
} }
); );

View file

@ -18,27 +18,35 @@
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</button> </button>
<button data-panel-toggle="#media-devices-panel"> <button data-panel-toggle="#media-devices-panel">
<i class="fa fa-tv"></i> <i id="media-devices-panel-icon" class="fa fa-desktop"></i>
</button> </button>
</div> </div>
</div> </div>
<div class="row" id="media-devices-panel"> <div class="row" id="media-devices-panel">
<div class="row cast-device cast-device-local selected" data-local="local" data-name="_server"> <div class="refresh-devices-container">
<div class="two columns"> <div class="row refresh-devices disabled">
<i class="fa fa-server cast-device-icon"></i> <i class="fa fa-retweet"></i>
</div>
<div class="ten columns">
<span class="cast-device-name">{{ request.host_url.split('/')[2].split(':')[0] }}</span>
</div> </div>
</div> </div>
<div class="row cast-device cast-device-local" data-browser="browser" data-name="_local"> <div class="devices-list">
<div class="two columns"> <div class="row cast-device cast-device-local selected" data-local="local" data-name="_server">
<i class="fa fa-globe cast-device-icon"></i> <div class="two columns">
<i class="fa fa-desktop cast-device-icon"></i>
</div>
<div class="ten columns">
<span class="cast-device-name">{{ utils.get_config('device_id') }}</span>
</div>
</div> </div>
<div class="ten columns">
<span class="cast-device-name">This browser</span> <div class="row cast-device cast-device-local" data-browser="browser" data-name="_local">
<div class="two columns">
<i class="fa fa-laptop cast-device-icon"></i>
</div>
<div class="ten columns">
<span class="cast-device-name">Browser</span>
</div>
</div> </div>
</div> </div>
</div> </div>