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

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:

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

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 = $('<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);
                 }
             }
         );

platypush/backend/http/templates/plugins/media.html

@@ -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="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 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 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>