From 862c9cea8749bb73950a96cda30895b82432d903 Mon Sep 17 00:00:00 2001
From: JonnyWong16 <JonnyWong16@users.noreply.github.com>
Date: Mon, 7 Aug 2017 11:25:26 -0700
Subject: [PATCH] Add network and bandwidth to current activity

* Move quality profile to info bar
---
 data/interfaces/default/css/plexpy.css        | 12 +++--
 .../default/current_activity_instance.html    | 45 ++++++++++---------
 data/interfaces/default/index.html            | 11 +++--
 3 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css
index 4ce699dd..4fe763c5 100644
--- a/data/interfaces/default/css/plexpy.css
+++ b/data/interfaces/default/css/plexpy.css
@@ -611,7 +611,7 @@ textarea.form-control:focus {
 a .poster-face:hover,
 a .cover-face:hover,
 a .users-poster-face:hover {
-    webkit-box-shadow: inset 0 0 0 2px #e9a049;
+    -webkit-box-shadow: inset 0 0 0 2px #e9a049;
     -moz-box-shadow: inset 0 0 0 2px #e9a049;
     box-shadow: inset 0 0 0 2px #e9a049;
 }
@@ -642,7 +642,8 @@ a .users-poster-face:hover {
     box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 2px #e9a049;
 }
 .dashboard-instance.hover .dashboard-activity-poster-info-bar,
-.dashboard-instance.hover .dashboard-activity-terminate-bar {
+.dashboard-instance.hover .dashboard-activity-terminate-bar,
+.dashboard-instance.hover .dashboard-activity-terminate-session {
     opacity: 1;
 }
 .dashboard-instance.hover .dashboard-activity-progress-bar { 
@@ -793,7 +794,7 @@ a .users-poster-face:hover {
     opacity: 0;
     -webkit-transition: all .2s;
     transition: all .2s;
-    z-index: 0W;
+    z-index: -2;
 }
 .dashboard-activity-terminate-session {
     width: 50px;
@@ -803,9 +804,12 @@ a .users-poster-face:hover {
     left: 0;
     font-size: 30px;
     color: #eee;
-    z-index: 1;
     text-align: center;
     padding-top: 5px;
+    opacity: 0;
+    -webkit-transition: all .2s;
+    transition: all .2s;
+    z-index: 1;
 }
 .dashboard-activity-terminate-session:hover {
     color: #e9a049;
diff --git a/data/interfaces/default/current_activity_instance.html b/data/interfaces/default/current_activity_instance.html
index 868ba38b..dc2355e8 100644
--- a/data/interfaces/default/current_activity_instance.html
+++ b/data/interfaces/default/current_activity_instance.html
@@ -106,20 +106,18 @@ DOCUMENTATION :: END
                 % else:
                 <div class="dashboard-activity-poster-face" style="background-image: url(${data['art']});"></div>
                 % endif
-                % if _session['user_group'] == 'admin' and plexpy.CONFIG.PMS_PLEXPASS:
-                <div class="dashboard-activity-terminate-bar">
-                    <div class="dashboard-activity-terminate-session" id="terminate-button-${data['session_key']}" data-key="${data['session_key']}" data-id="${data['session_id']}" style="display: none;">
-                        <span class="btn-terminate-session" data-toggle="tooltip" title="Terminate Stream">
-                            <i class="fa fa-times"></i>
-                        </span>
-                    </div>
-                </div>
-                % endif
                 <div class="dashboard-activity-button-info">
                     <button type="button" class="btn btn-activity-info btn-lg" data-target="#stream-${data['session_key']}" data-key="${data['session_key']}">
                         <i class="fa fa-info-circle"></i>
                     </button>
                 </div>
+                % if _session['user_group'] == 'admin' and plexpy.CONFIG.PMS_PLEXPASS:
+                <div class="dashboard-activity-terminate-session" id="terminate-button-${data['session_key']}" data-key="${data['session_key']}" data-id="${data['session_id']}">
+                    <span class="btn-terminate-session" data-toggle="tooltip" title="Terminate Stream">
+                        <i class="fa fa-times"></i>
+                    </span>
+                </div>
+                % endif
                 <div id="stream-${data['session_key']}" class="dashboard-activity-info-details-overlay">
                     <div class="dashboard-activity-info-details-content">
                         <div id="platform-${data['session_key']}" title="${data['platform']}">
@@ -131,11 +129,11 @@ DOCUMENTATION :: END
                             <strong>${data['player']}</strong><br />
                             <span id="overlay-play-state-${data['session_key']}">
                                 % if data['state'] == 'playing':
-                                State &nbsp;<strong>Playing</strong> ${'(' + data['quality_profile'] + ')' if data['media_type'] != 'track' else ''}
+                                State &nbsp;<strong>Playing</strong>
                                 % elif data['state'] == 'paused':
-                                State &nbsp;<strong>Paused</strong> ${'(' + data['quality_profile'] + ')' if data['media_type'] != 'track' else ''}
+                                State &nbsp;<strong>Paused</strong>
                                 % elif data['state'] == 'buffering':
-                                State &nbsp;<strong>Buffering</strong> ${'(' + data['quality_profile'] + ')' if data['media_type'] != 'track' else ''}
+                                State &nbsp;<strong>Buffering</strong>
                                 % endif
                             </span>
                         </div>
@@ -195,24 +193,29 @@ DOCUMENTATION :: END
                         </div>
                     </div>
                 </div>
+                <div class="dashboard-activity-terminate-bar">
+                </div>
                 % if data['media_type'] != 'photo':
                 <div class="dashboard-activity-poster-info-bar">
                     <div class="dashboard-activity-poster-info-ip-address">
-                        % if data['ip_address']:
-                        <span>IP: ${data['ip_address']}</span>
-                        % else:
-                        <span>IP: N/A</span>
-                        % endif
+                        Quality: 
+                        <span id="stream-quality-${data['session_key']}">
+                            ${data['quality_profile'] if data['media_type'] != 'track' else ''}
+                        </span>
                         <br />
+                        % if data['ip_address']:
+                        IP: ${data['ip_address']} (${data['location'].upper()} - <span id="stream-bandwidth-${data['session_key']}">${data['bandwidth']}</span> kbps)
+                        % else:
+                        IP: N/A
+                        % endif
+                    </div>
+                    <div class="dashboard-activity-poster-info-time">
                         ETA:
                         <span id="stream-eta-${data['session_key']}">
                             <script>
                                 $("#stream-eta-${data['session_key']}").html(moment().add(parseInt("${data['duration']}") - parseInt("${data['view_offset']}"), 'milliseconds').format(time_format));
                             </script>
-                        </span>
-                    </div>
-                    <div class="dashboard-activity-poster-info-time">
-                        <span class="progress_time" id="stream-view-offset-${data['session_key']}">
+                        </span><br /><span class="progress_time" id="stream-view-offset-${data['session_key']}">
                             <script>
                                 $("#stream-view-offset-${data['session_key']}").html(millisecondsToMinutes(parseInt("${data['view_offset']}"), false));
                             </script>
diff --git a/data/interfaces/default/index.html b/data/interfaces/default/index.html
index 5c930fb8..7bd2b56b 100644
--- a/data/interfaces/default/index.html
+++ b/data/interfaces/default/index.html
@@ -267,8 +267,7 @@
                                 var overlay_state = 'State &nbsp;<strong>Unknown</strong>';
                                 var state_icon = '<i class="fa fa-fw fa-question-circle"></i>&nbsp;';
                         }
-                        var q = (s.media_type != 'track') ? ' (' + s.quality_profile + ')' : '';
-                        $('#overlay-play-state-' + key).html(overlay_state + q);
+                        $('#overlay-play-state-' + key).html(overlay_state);
                         $('#play-state-' + key).html(state_icon);
 
                         % if config['pms_use_bif']:
@@ -351,6 +350,10 @@
                         }
                         $('#transcode-state-' + key).html(ts);
 
+                        // update the stream quality profile and bandwidth
+                        $('#stream-quality-' + key).html((s.media_type != 'track') ? s.quality_profile : '');
+                        $('#stream-bandwidth-' + key).html(s.bandwidth);
+
                         // update the stream progress times
                         $('#stream-eta-' + key).html(moment().add(parseInt(s.duration) - parseInt(s.view_offset), 'milliseconds').format(time_format));
                         $('#stream-view-offset-' + key).html(millisecondsToMinutes(s.view_offset, false));
@@ -426,15 +429,11 @@
     $('#currentActivity').on('mouseover', '.dashboard-hover-container', function () {
         $(this).closest('.dashboard-instance').addClass('hover');
         var key = $(this).closest('.dashboard-instance').data('key');
-        if (!($('#stream-' + key).is(':visible'))) {
-            $('#terminate-button-' + key).fadeIn(200);
-        }
     });
     $('#currentActivity').on('mouseleave', '.dashboard-hover-container', function () {
         var key = $(this).closest('.dashboard-instance').data('key');
         if (!($('#stream-' + key).is(':visible'))) {
             $(this).closest('.dashboard-instance').removeClass('hover');
-            $('#terminate-button-' + key).fadeOut(200);
         }
     });