From e2b0bf8462cf27cb143d8fc82a87269126931936 Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Fri, 8 Feb 2019 19:48:18 +0100 Subject: [PATCH] More consistent management of media devices icons and added devices refresh button --- platypush/backend/http/__init__.py | 4 +++ platypush/backend/http/static/css/media.css | 28 +++++++++++++--- platypush/backend/http/static/js/media.js | 29 +++++++++++++++-- .../backend/http/templates/plugins/media.html | 32 ++++++++++++------- 4 files changed, 74 insertions(+), 19 deletions(-) diff --git a/platypush/backend/http/__init__.py b/platypush/backend/http/__init__.py index 9557ed3cc4..94f2ab3fae 100644 --- a/platypush/backend/http/__init__.py +++ b/platypush/backend/http/__init__.py @@ -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: diff --git a/platypush/backend/http/static/css/media.css b/platypush/backend/http/static/css/media.css index 423140562b..03dc3d2d71 100644 --- a/platypush/backend/http/static/css/media.css +++ b/platypush/backend/http/static/css/media.css @@ -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; } diff --git a/platypush/backend/http/static/js/media.js b/platypush/backend/http/static/js/media.js index 153885a416..e449459a5e 100644 --- a/platypush/backend/http/static/js/media.js +++ b/platypush/backend/http/static/js/media.js @@ -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 = $('
').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); } } ); diff --git a/platypush/backend/http/templates/plugins/media.html b/platypush/backend/http/templates/plugins/media.html index bbe817924d..51ae8bc8a6 100644 --- a/platypush/backend/http/templates/plugins/media.html +++ b/platypush/backend/http/templates/plugins/media.html @@ -18,27 +18,35 @@
-
-
- -
-
- {{ request.host_url.split('/')[2].split(':')[0] }} +
+
+
-
-
- +
+
+
+ +
+
+ {{ utils.get_config('device_id') }} +
-
- This browser + +
+
+ +
+
+ Browser +