More consistent management of media devices icons and added devices refresh button
This commit is contained in:
parent
b3f2974c4c
commit
e2b0bf8462
4 changed files with 74 additions and 19 deletions
|
@ -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:
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
|
@ -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="refresh-devices-container">
|
||||||
|
<div class="row refresh-devices disabled">
|
||||||
|
<i class="fa fa-retweet"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="devices-list">
|
||||||
<div class="row cast-device cast-device-local selected" data-local="local" data-name="_server">
|
<div class="row cast-device cast-device-local selected" data-local="local" data-name="_server">
|
||||||
<div class="two columns">
|
<div class="two columns">
|
||||||
<i class="fa fa-server cast-device-icon"></i>
|
<i class="fa fa-desktop cast-device-icon"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="ten columns">
|
<div class="ten columns">
|
||||||
<span class="cast-device-name">{{ request.host_url.split('/')[2].split(':')[0] }}</span>
|
<span class="cast-device-name">{{ utils.get_config('device_id') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row cast-device cast-device-local" data-browser="browser" data-name="_local">
|
<div class="row cast-device cast-device-local" data-browser="browser" data-name="_local">
|
||||||
<div class="two columns">
|
<div class="two columns">
|
||||||
<i class="fa fa-globe cast-device-icon"></i>
|
<i class="fa fa-laptop cast-device-icon"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="ten columns">
|
<div class="ten columns">
|
||||||
<span class="cast-device-name">This browser</span>
|
<span class="cast-device-name">Browser</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue