blacklight
/
platypush
forked from platypush/platypush
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
platypush/backend/http/__init__.py
View File

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

28
platypush/backend/http/static/css/media.css
View File

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

29
platypush/backend/http/static/js/media.js
View File

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

32
platypush/backend/http/templates/plugins/media.html
View File

@ -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="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>
</div>
<div class="ten columns">
<span class="cast-device-name">{{ request.host_url.split('/')[2].split(':')[0] }}</span>
<div class="refresh-devices-container">
<div class="row refresh-devices disabled">
<i class="fa fa-retweet"></i>
</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>
<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-desktop cast-device-icon"></i>
</div>
<div class="ten columns">
<span class="cast-device-name">{{ utils.get_config('device_id') }}</span>
</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>