forked from platypush/platypush
More consistent management of media devices icons and added devices refresh button
This commit is contained in:
Fabio Manganiello
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):
|
||||
return json.loads(data)
|
||||
|
||||
@classmethod
|
||||
def get_config(cls, attr):
|
||||
return Config.get(attr)
|
||||
|
||||
|
||||
# vim:sw=4:ts=4:et:
|
||||
|
|
|
|||
|
|
@ -96,24 +96,44 @@ form#video-ctrl {
|
|||
z-index: 10;
|
||||
border: 1px solid #d0d0d0;
|
||||
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;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#media-devices-panel .cast-device-local {
|
||||
#media-devices-panel * > .cast-device-local {
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
#media-devices-panel .cast-device.selected {
|
||||
#media-devices-panel * > .cast-device.selected {
|
||||
font-weight: bold;
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@ $(document).ready(function() {
|
|||
$volumeCtrl = $('#video-volume-ctrl'),
|
||||
$ctrlForm = $('#video-ctrl'),
|
||||
$devsPanel = $('#media-devices-panel'),
|
||||
$devsList = $devsPanel.find('.devices-list'),
|
||||
$devsBtn = $('button[data-panel-toggle="#media-devices-panel"]'),
|
||||
$devsBtnIcon = $('#media-devices-panel-icon'),
|
||||
$devsRefreshBtn = $devsPanel.find('.refresh-devices'),
|
||||
$searchBarContainer = $('#media-search-bar-container'),
|
||||
$mediaBtnsContainer = $('#media-btns-container'),
|
||||
prevVolume = undefined;
|
||||
|
|
@ -282,14 +285,19 @@ $(document).ready(function() {
|
|||
});
|
||||
|
||||
$devsPanel.on('mouseup touchend', '.cast-device', function() {
|
||||
if ($(this).hasClass('disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $devices = $devsPanel.find('.cast-device');
|
||||
var $curSelected = $devices.filter((i, d) => $(d).hasClass('selected'));
|
||||
|
||||
if ($curSelected.data('name') !== $(this).data('name')) {
|
||||
$curSelected.removeClass('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');
|
||||
} else {
|
||||
$devsBtn.addClass('remote');
|
||||
|
|
@ -301,9 +309,20 @@ $(document).ready(function() {
|
|||
$devsPanel.hide();
|
||||
$devsBtn.removeClass('selected');
|
||||
});
|
||||
|
||||
$devsRefreshBtn.on('click', function() {
|
||||
if ($(this).hasClass('disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(this).addClass('disabled');
|
||||
initRemoteDevices();
|
||||
});
|
||||
};
|
||||
|
||||
var initRemoteDevices = function() {
|
||||
$devsList.find('.cast-device[data-remote]').addClass('disabled');
|
||||
|
||||
execute(
|
||||
{
|
||||
type: 'request',
|
||||
|
|
@ -311,6 +330,9 @@ $(document).ready(function() {
|
|||
},
|
||||
|
||||
function(results) {
|
||||
$devsRefreshBtn.removeClass('disabled');
|
||||
$devsList.find('.cast-device[data-remote]').remove();
|
||||
|
||||
if (!results || results.response.errors.length) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -318,7 +340,8 @@ $(document).ready(function() {
|
|||
results = results.response.output;
|
||||
for (var cast of results) {
|
||||
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';
|
||||
switch (cast.type) {
|
||||
|
|
@ -338,7 +361,7 @@ $(document).ready(function() {
|
|||
|
||||
$iconContainer.appendTo($cast);
|
||||
$nameContainer.appendTo($cast);
|
||||
$cast.appendTo($devsPanel);
|
||||
$cast.appendTo($devsList);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -18,27 +18,35 @@
|
|||
<i class="fa fa-search"></i>
|
||||
</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="two columns">
|
||||
<i class="fa fa-server cast-device-icon"></i>
|
||||
<i class="fa fa-desktop cast-device-icon"></i>
|
||||
</div>
|
||||
<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 class="row cast-device cast-device-local" data-browser="browser" data-name="_local">
|
||||
<div class="two columns">
|
||||
<i class="fa fa-globe cast-device-icon"></i>
|
||||
<i class="fa fa-laptop cast-device-icon"></i>
|
||||
</div>
|
||||
<div class="ten columns">
|
||||
<span class="cast-device-name">This browser</span>
|
||||
<span class="cast-device-name">Browser</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue