A bit of CSS cleanup for activity cards

This commit is contained in:
JonnyWong16 2017-11-04 23:12:05 -07:00
commit de589f59a1
3 changed files with 58 additions and 53 deletions

View file

@ -765,7 +765,7 @@ a .users-poster-face:hover {
.dashboard-activity-info-scroller {
height: 225px;
width: 335px;
-webkit-flex-grow: 0;
-webkit-flex-grow: 1;
flex-grow: 1;
z-index: 1;
}
@ -789,6 +789,10 @@ a .users-poster-face:hover {
margin-bottom: 0;
}
.dashboard-activity-info-item {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
width: 100%;
margin-bottom: 5px;
}
@ -803,14 +807,14 @@ a .users-poster-face:hover {
text-align: right;
text-transform: uppercase;
line-height: 14px;
vertical-align: bottom;
float: left;
}
.dashboard-activity-info-item .sub-value {
margin-left: 70px;
margin-left: 10px;
text-align: left;
line-height: 14px;
vertical-align: bottom;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.dashboard-activity-info-time {
position: absolute;

View file

@ -65,43 +65,44 @@ DOCUMENTATION :: END
from plexpy import helpers
import plexpy
%>
<div class="dashboard-activity-instance" id="instance-${data['session_key']}" data-key="${data['session_key']}" data-id="${data['session_id']}"
<% sk = data['session_key'] %>
<div class="dashboard-activity-instance" id="instance-${sk}" data-key="${sk}" data-id="${data['session_id']}"
data-rating_key="${data['rating_key']}" data-parent_rating_key="${data['parent_rating_key']}" data-grandparent_rating_key="${data['grandparent_rating_key']}">
<div class="dashboard-activity-container">
<div class="dashboard-activity-background-overlay">
% if data['channel_stream'] == '0':
<div id="background-${data['session_key']}" class="dashboard-activity-background" style="background-image: url(pms_image_proxy?img=${data['art']}&width=500&height=280&fallback=art&refresh=true);"></div>
<div id="background-${sk}" class="dashboard-activity-background" style="background-image: url(pms_image_proxy?img=${data['art']}&width=500&height=280&fallback=art&refresh=true);"></div>
% else:
% if (data['art'] and data['art'].startswith('http')) or (data['thumb'] and data['thumb'].startswith('http')):
<div id="background-${data['session_key']}" class="dashboard-activity-background" style="background-image: url(${data['art']});"></div>
<div id="background-${sk}" class="dashboard-activity-background" style="background-image: url(${data['art']});"></div>
% else:
<!--Hacky solution to escape the image url until I come up with something better-->
<div id="background-${data['session_key']}" class="dashboard-activity-background" style="background-image: url(pms_image_proxy?img=${quote(data['art'] or data['thumb'])}&width=500&height=280&fallback=art&refresh=true&clip=true);"></div>
<div id="background-${sk}" class="dashboard-activity-background" style="background-image: url(pms_image_proxy?img=${quote(data['art'] or data['thumb'])}&width=500&height=280&fallback=art&refresh=true&clip=true);"></div>
% endif
% endif
% if data['channel_stream'] == '0':
% if data['media_type'] == 'movie':
<a id="poster-url-${data['session_key']}" href="info?rating_key=${data['rating_key']}" title="${data['title']}" class="hidden-xs">
<div id="poster-${data['session_key']}" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
<a id="poster-url-${sk}" href="info?rating_key=${data['rating_key']}" title="${data['title']}" class="hidden-xs">
<div id="poster-${sk}" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
</a>
% elif data['media_type'] == 'episode':
<a id="poster-url-${data['session_key']}" href="info?rating_key=${data['grandparent_rating_key']}" title="${data['grandparent_title']}" class="hidden-xs">
<div id="poster-${data['session_key']}" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['grandparent_thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
<a id="poster-url-${sk}" href="info?rating_key=${data['grandparent_rating_key']}" title="${data['grandparent_title']}" class="hidden-xs">
<div id="poster-${sk}" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['grandparent_thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
</a>
% elif data['media_type'] == 'track':
<a id="poster-url-${data['session_key']}" href="info?rating_key=${data['parent_rating_key']}" title="${data['parent_title']}" class="hidden-xs">
<div id="poster-${data['session_key']}" class="dashboard-activity-cover" style="background-image: url(pms_image_proxy?img=${data['parent_thumb']}&width=300&height=300&fallback=cover&refresh=true);"></div>
<a id="poster-url-${sk}" href="info?rating_key=${data['parent_rating_key']}" title="${data['parent_title']}" class="hidden-xs">
<div id="poster-${sk}" class="dashboard-activity-cover" style="background-image: url(pms_image_proxy?img=${data['parent_thumb']}&width=300&height=300&fallback=cover&refresh=true);"></div>
</a>
% elif data['media_type'] in ('photo', 'clip'):
<div id="poster-${data['session_key']}" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['parent_thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
<div id="poster-${sk}" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['parent_thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
% else:
<div id="poster-${data['session_key']}" class="dashboard-activity-poster" style="background-image: url(images/art.png);"></div>
<div id="poster-${sk}" class="dashboard-activity-poster" style="background-image: url(images/art.png);"></div>
% endif
% else:
% if data['channel_icon'].startswith('http'):
<div id="poster-${data['session_key']}" class="dashboard-activity-cover" style="background-image: url(${data['channel_icon']});"></div>
<div id="poster-${sk}" class="dashboard-activity-cover" style="background-image: url(${data['channel_icon']});"></div>
% else:
<div id="poster-${data['session_key']}" class="dashboard-activity-cover" style="background-image: url(pms_image_proxy?img=${data['channel_icon']}&width=300&height=300&fallback=cover&refresh=true);"></div>
<div id="poster-${sk}" class="dashboard-activity-cover" style="background-image: url(pms_image_proxy?img=${data['channel_icon']}&width=300&height=300&fallback=cover&refresh=true);"></div>
% endif
% endif
<div class="dashboard-activity-info-icon">
@ -111,13 +112,13 @@ DOCUMENTATION :: END
else:
no_terminate = ''
%>
<div id="platform-${data['session_key']}" class="dashboard-activity-info-platform${no_terminate}" title="${data['platform']}">
<div id="platform-${sk}" class="dashboard-activity-info-platform${no_terminate}" title="${data['platform']}">
<script>
$("#platform-${data['session_key']}").css("background-image", "url(" + getPlatformImagePath('${data['platform']}') + ")");
$("#platform-${sk}").css("background-image", "url(" + getPlatformImagePath('${data['platform']}') + ")");
</script>
</div>
% if _session['user_group'] == 'admin' and plexpy.CONFIG.PMS_PLEXPASS and data['session_id']:
<div class="dashboard-activity-terminate-session" id="terminate-button-${data['session_key']}" data-key="${data['session_key']}" data-id="${data['session_id']}" data-toggle="tooltip" title="Terminate Stream">
<div class="dashboard-activity-terminate-session" id="terminate-button-${sk}" data-key="${sk}" data-id="${data['session_id']}" data-toggle="tooltip" title="Terminate Stream">
<i class="fa fa-times" style="padding-top: 8px;"></i>
</div>
% endif
@ -135,7 +136,7 @@ DOCUMENTATION :: END
</li>
<li class="dashboard-activity-info-item">
<div class="sub-heading">Quality</div>
<div class="sub-value" id="stream_quality-${data['session_key']}">
<div class="sub-value" id="stream_quality-${sk}">
% if data['media_type'] != 'photo' and data['quality_profile'] != 'Unknown':
<%
br = helpers.cast_to_int(data['stream_bitrate']) or ''
@ -154,7 +155,7 @@ DOCUMENTATION :: END
% if data['optimized_version'] == '1':
<li class="dashboard-activity-info-item">
<div class="sub-heading">Optimized</div>
<div class="sub-value" id="optimized_version-${data['session_key']}">
<div class="sub-value" id="optimized_version-${sk}">
${data['optimized_version_profile']}
</div>
</li>
@ -163,11 +164,11 @@ DOCUMENTATION :: END
<ul class="list-unstyled dashboard-activity-info-list">
<li class="dashboard-activity-info-item">
% if _session['user_group'] == 'admin':
<div class="sub-heading"><span class="raw-stream-info-modal" data-toggle="modal" data-target="#raw-stream-info-modal" data-key="${data['session_key']}">Stream</span></div>\
<div class="sub-heading"><span class="raw-stream-info-modal" data-toggle="modal" data-target="#raw-stream-info-modal" data-key="${sk}">Stream</span></div>\
% else:
<div class="sub-heading">Stream</div>
% endif
<div class="sub-value" id="transcode_decision-${data['session_key']}">
<div class="sub-value" id="transcode_decision-${sk}">
% if data['transcode_decision'] == 'transcode':
Transcode
% if data['transcode_throttled'] == '1':
@ -184,7 +185,7 @@ DOCUMENTATION :: END
</li>
<li class="dashboard-activity-info-item">
<div class="sub-heading">Container</div>
<div class="sub-value" id="transcode_container-${data['session_key']}">
<div class="sub-value" id="transcode_container-${sk}">
% if data.get('stream_container_decision') == 'transcode':
Transcode (${data['container'].upper()} &rarr; ${data['stream_container'].upper()})
% else:
@ -195,7 +196,7 @@ DOCUMENTATION :: END
% if data['media_type'] in ('movie', 'episode', 'clip', 'photo'):
<li class="dashboard-activity-info-item">
<div class="sub-heading">Video</div>
<div class="sub-value" id="video_decision-${data['session_key']}">
<div class="sub-value" id="video_decision-${sk}">
% if data['media_type'] in ('movie', 'episode', 'clip'):
% if data.get('stream_video_decision') == 'transcode':
<%
@ -220,7 +221,7 @@ DOCUMENTATION :: END
% if data['media_type'] in ('movie', 'episode', 'clip', 'track'):
<li class="dashboard-activity-info-item">
<div class="sub-heading">Audio</div>
<div class="sub-value" id="audio_decision-${data['session_key']}">
<div class="sub-value" id="audio_decision-${sk}">
% if data.get('stream_audio_decision') == 'transcode':
Transcode (${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['audio_codec'], data['audio_codec'].upper())} ${data['audio_channel_layout'].split('(')[0].capitalize()} &rarr; ${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['stream_audio_codec'], data['stream_audio_codec'].upper())} ${data['stream_audio_channel_layout'].split('(')[0].capitalize()})
% elif data.get('stream_audio_decision') == 'copy':
@ -234,7 +235,7 @@ DOCUMENTATION :: END
% if data['media_type'] in ('movie', 'episode', 'clip'):
<li class="dashboard-activity-info-item">
<div class="sub-heading">Subtitle</div>
<div class="sub-value" id="subtitle_decision-${data['session_key']}">
<div class="sub-value" id="subtitle_decision-${sk}">
% if data['subtitles'] == '1':
% if data['stream_subtitle_decision'] == 'transcode':
Transcode (${data['subtitle_codec'].upper()} &rarr; ${data['stream_subtitle_codec'].upper()})
@ -259,13 +260,13 @@ DOCUMENTATION :: END
% if data['ip_address'] != 'N/A':
${'LAN' if data['local'] == '1' else 'WAN'}: ${data['ip_address']}
<a href="#" class="external_ip-modal" data-toggle="modal" data-target="#ip-info-modal" data-ip="${data['ip_address']}">
<span id="external_ip-${data['session_key']}" class="external-ip-tooltip" data-toggle="tooltip" title="Lookup IP" style="display: none;"><i class="fa fa-map-marker"></i></span>
<span id="external_ip-${sk}" class="external-ip-tooltip" data-toggle="tooltip" title="Lookup IP" style="display: none;"><i class="fa fa-map-marker"></i></span>
</a>
<script>
isPrivateIP("${data['ip_address']}").then(function () {
$("#external_ip-${data['session_key']}").hide();
$("#external_ip-${sk}").hide();
}, function () {
$("#external_ip-${data['session_key']}").show();
$("#external_ip-${sk}").show();
});
</script>
% else:
@ -285,12 +286,12 @@ DOCUMENTATION :: END
else:
bw = str(bw) + ' kbps'
%>
<span id="stream-bandwidth-${data['session_key']}">${bw}</span>
<span id="streaming-brain-${data['session_key']}" data-toggle="tooltip" title="Streaming Brain Estimate"><i class="fa fa-info-circle"></i></span>
<span id="stream-bandwidth-${sk}">${bw}</span>
<span id="streaming-brain-${sk}" data-toggle="tooltip" title="Streaming Brain Estimate"><i class="fa fa-info-circle"></i></span>
% elif data['synced_version'] == '1' or data['channel_stream'] == '1':
<span id="stream-bandwidth-${data['session_key']}">None</span>
<span id="stream-bandwidth-${sk}">None</span>
% else:
<span id="stream-bandwidth-${data['session_key']}">Unknown</span>
<span id="stream-bandwidth-${sk}">Unknown</span>
% endif
</div>
</li>
@ -301,23 +302,23 @@ DOCUMENTATION :: END
<div class="dashboard-activity-info-time">
% if data['view_offset']:
ETA:
<span id="stream-eta-${data['session_key']}">
<span id="stream-eta-${sk}">
<script>
$("#stream-eta-${data['session_key']}").html(moment().add(parseInt("${data['duration']}") - parseInt("${data['view_offset']}"), 'milliseconds').format(time_format));
$("#stream-eta-${sk}").html(moment().add(parseInt("${data['duration']}") - parseInt("${data['view_offset']}"), 'milliseconds').format(time_format));
</script>
</span><br /><span class="progress_time_offset" id="stream-view-offset-${data['session_key']}" data-last_view_offset="${data['view_offset']}" data-view_offset="${data['view_offset']}" data-state="${data['state']}">
</span><br /><span class="progress_time_offset" id="stream-view-offset-${sk}" data-last_view_offset="${data['view_offset']}" data-view_offset="${data['view_offset']}" data-state="${data['state']}">
<script>
$("#stream-view-offset-${data['session_key']}").html(millisecondsToMinutes(parseInt("${data['view_offset']}"), false));
$("#stream-view-offset-${sk}").html(millisecondsToMinutes(parseInt("${data['view_offset']}"), false));
</script>
</span> / <span class="progress_time_total" id="stream-duration-${data['session_key']}">
</span> / <span class="progress_time_total" id="stream-duration-${sk}">
<script>
$("#stream-duration-${data['session_key']}").html(millisecondsToMinutes(parseInt("${data['duration']}"), false));
$("#stream-duration-${sk}").html(millisecondsToMinutes(parseInt("${data['duration']}"), false));
</script>
</span>
% else:
ETA: Unknown<br />0:00 / <span class="progress_time_total" id="stream-duration-${data['session_key']}">
ETA: Unknown<br />0:00 / <span class="progress_time_total" id="stream-duration-${sk}">
<script>
$("#stream-duration-${data['session_key']}").html(millisecondsToMinutes(parseInt("${data['duration']}"), false));
$("#stream-duration-${sk}").html(millisecondsToMinutes(parseInt("${data['duration']}"), false));
</script>
</span>
% endif
@ -326,8 +327,8 @@ DOCUMENTATION :: END
</div>
<div class="dashboard-activity-progress">
<div class="dashboard-activity-progress-bar">
<div id="buffer-bar-${data['session_key']}" class="buffer-bar" style="width: ${data['transcode_progress']}%" data-toggle="tooltip" title="Transcoder Progress ${data['transcode_progress']}%">${data['transcode_progress']}%</div>
<div id="progress-bar-${data['session_key']}" class="progress-bar" style="width: ${data['progress_percent']}%" data-last_view_offset="${data['view_offset']}" data-view_offset="${data['view_offset']}" data-stream_duration="${data['stream_duration']}" data-state="${data['state']}" data-toggle="tooltip" title="Stream Progress ${data['progress_percent']}%">${data['progress_percent']}%</div>
<div id="buffer-bar-${sk}" class="buffer-bar" style="width: ${data['transcode_progress']}%" data-toggle="tooltip" title="Transcoder Progress ${data['transcode_progress']}%">${data['transcode_progress']}%</div>
<div id="progress-bar-${sk}" class="progress-bar" style="width: ${data['progress_percent']}%" data-last_view_offset="${data['view_offset']}" data-view_offset="${data['view_offset']}" data-stream_duration="${data['stream_duration']}" data-state="${data['state']}" data-toggle="tooltip" title="Stream Progress ${data['progress_percent']}%">${data['progress_percent']}%</div>
</div>
</div>
</div>
@ -340,7 +341,7 @@ DOCUMENTATION :: END
<div class="dashboard-activity-metadata-user-thumb" style="background-image: url(${data['user_thumb']});"></div>
% endif
<div class="dashboard-activity-metadata-title">
<span id="play-state-${data['session_key']}" title="${data['state'].capitalize()}">
<span id="play-state-${sk}" title="${data['state'].capitalize()}">
% if data['state'] == 'playing':
<i class="fa fa-fw fa-play"></i>&nbsp;
% elif data['state'] == 'paused':
@ -356,8 +357,8 @@ DOCUMENTATION :: END
<a href="info?rating_key=${data['grandparent_rating_key']}" title="${data['grandparent_title']}">${data['grandparent_title']}</a>
- <a href="info?rating_key=${data['rating_key']}" title="${data['title']}">${data['title']}</a>
% elif data['media_type'] == 'track':
<a id="metadata-grandparent_title-${data['session_key']}" href="info?rating_key=${data['grandparent_rating_key']}" title="${data['grandparent_title']}">${data['grandparent_title']}</a>
- <a id="metadata-title-${data['session_key']}" href="info?rating_key=${data['rating_key']}" title="${data['title']}">${data['title']}</a>
<a id="metadata-grandparent_title-${sk}" href="info?rating_key=${data['grandparent_rating_key']}" title="${data['grandparent_title']}">${data['grandparent_title']}</a>
- <a id="metadata-title-${sk}" href="info?rating_key=${data['rating_key']}" title="${data['title']}">${data['title']}</a>
% elif data['media_type'] == 'photo':
<span title="${data['parent_title']}">${data['parent_title']}</span>
% elif data['media_type'] == 'clip':
@ -374,7 +375,7 @@ DOCUMENTATION :: END
</div>
<div class="dashboard-activity-metadata-subtitle">
% if data['channel_stream'] == '0':
<span id="media-type-${data['session_key']}" title="${data['media_type'].capitalize()}">
<span id="media-type-${sk}" title="${data['media_type'].capitalize()}">
% if data['media_type'] == 'movie':
<i class="fa fa-fw fa-film"></i>&nbsp;
% elif data['media_type'] == 'episode':
@ -388,7 +389,7 @@ DOCUMENTATION :: END
% endif
</span>
% else:
<span id="media-type-${data['session_key']}" title="Channel">
<span id="media-type-${sk}" title="Channel">
<i class="fa fa-fw fa-cloud"></i>&nbsp;
</span>
% endif
@ -399,7 +400,7 @@ DOCUMENTATION :: END
<a href="info?rating_key=${data['parent_rating_key']}" title="Season ${data['parent_media_index']}" class="sub-heading">S${data['parent_media_index']}</a>
&middot; <a href="info?rating_key=${data['rating_key']}" title="Episode ${data['media_index']}" class="sub-heading">E${data['media_index']}</a>
% elif data['media_type'] == 'track':
<a id="metadata-parent_title-${data['session_key']}" href="info?rating_key=${data['parent_rating_key']}" title="${data['parent_title']}" class="sub-heading">${data['parent_title']}</a>
<a id="metadata-parent_title-${sk}" href="info?rating_key=${data['parent_rating_key']}" title="${data['parent_title']}" class="sub-heading">${data['parent_title']}</a>
% elif data['media_type'] == 'photo':
<span title="${data['title']}" class="sub-heading">${data['title']}</span>
% else:

View file

@ -494,7 +494,7 @@
getCurrentActivity();
}, 2000);
setInterval( function(){
setInterval(function(){
$('.progress_time_offset').each(function () {
if ($(this).data('state') === 'playing' && $(this).data('view_offset')) {
var view_offset = parseInt($(this).data('view_offset'));