Add network and bandwidth to current activity

* Move quality profile to info bar
This commit is contained in:
JonnyWong16 2017-08-07 11:25:26 -07:00
commit 862c9cea87
3 changed files with 37 additions and 31 deletions

View file

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

View file

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

View file

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