Add additional info when hovering over activity pane.

This commit is contained in:
Tim 2015-07-12 17:41:59 +02:00
parent 2221697c20
commit 887c61a80b
4 changed files with 72 additions and 4 deletions

View file

@ -6695,6 +6695,31 @@ button.close {
height:100%;
opacity: 0.7;
}
.dashboard-activity-poster-info-bar {
position:absolute;
color: #F9AA03;
bottom: 0;
background-color: rgba(0,0,0,.7);
width:100%;
height:22px;
}
.dashboard-activity-poster-info-text {
float: left;
text-align: left;
padding: 0px 0px 0px 2px;
font-size: 12px;
color: #999;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.dashboard-activity-poster-info-time {
float: right;
text-align: right;
padding: 0px 2px 0px 0px;
font-size: 12px;
color: #999;
}
.dashboard-activity-metadata-user {
text-overflow: ellipsis;
overflow: hidden;

View file

@ -17,6 +17,8 @@ data[sessions] :: Usable parameters
== Global keys ==
session_key Returns a unique session id for the active stream
rating_key Returns the unique identifier for the media item.
media_index Returns the index of the media item.
parent_media_index Returns the index of the media item's parent.
type Returns the type of session. Either 'track', 'episode' or 'movie'.
thumb Returns the location of the item's thumbnail. Use with pms_image_proxy.
bif_thumb Returns the location of the item's bif thumbnail. Use with pms_image_proxy.
@ -75,6 +77,20 @@ DOCUMENTATION :: END
<div class="dashboard-activity-poster-music-bg" style="background-image: url('pms_image_proxy?img=${a['thumb']}&width=300&height=300');"></div>
% endif
<img src="pms_image_proxy?img=${a['thumb']}&width=300&height=169&fallback=cover"/>
<div class="dashboard-activity-poster-info-bar">
<div class="dashboard-activity-poster-info-text">
% if a['type'] == 'track':
Track ${a['media_index']}
% elif a['type'] == 'episode':
Season ${a['parent_media_index']}, Episode ${a['media_index']}
% else:
${a['title']}
% endif
</div>
<div class="dashboard-activity-poster-info-time">
<span class="progress_time">${a['progress']}</span>/<span class="progress_time">${a['duration']}</span>
</div>
</div>
</div>
% endif
<div class='dashboard-activity-metadata-wrapper'>
@ -167,13 +183,30 @@ DOCUMENTATION :: END
</div>
<script>
$("#platform-${a['session_key']}").html("<img src='" + getPlatformImagePath('${a['platform']}') + "'>");
</script>
% endfor
<script>
// When using bif indexes make the image transition a little smoother.
function fadeIn(obj) {
$(obj).fadeIn(450);
}
// Convert timestamps to readable times
$('.progress_time').each(function(index) {
$(this).html(millisecondsToMinutes($(this).text(), false));
});
// Hide the info bar on page load
$('.dashboard-activity-poster-info-bar').hide();
// When mouse over the activity pane, show an info bar with extra info.
$('.dashboard-activity-poster-face').mouseenter(function() {
$('.dashboard-activity-poster-info-bar', this).slideDown();
});
$('.dashboard-activity-poster-face').mouseleave(function() {
$('.dashboard-activity-poster-info-bar', this).slideUp();
});
</script>
% else:
<div class="muted">Nothing is currently being watched.</div><br>

View file

@ -253,7 +253,6 @@ String.prototype.toProperCase = function () {
function millisecondsToMinutes(ms, roundToMinute) {
console.log("Ms: " + ms)
if (ms > 0) {
seconds = ms / 1000;
minutes = seconds / 60;
@ -270,7 +269,10 @@ function millisecondsToMinutes(ms, roundToMinute) {
}
return output;
} else {
if (roundToMinute) {
return '0';
} else {
return '0:00';
}
}
}

View file

@ -530,6 +530,8 @@ class PmsConnect(object):
machine_id = helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'machineIdentifier')
session_output = {'session_key': helpers.get_xml_attr(session, 'sessionKey'),
'media_index': helpers.get_xml_attr(session, 'index'),
'parent_media_index': helpers.get_xml_attr(session, 'parentIndex'),
'art': helpers.get_xml_attr(session, 'art'),
'parent_thumb': helpers.get_xml_attr(session, 'parentThumb'),
'grandparent_thumb': helpers.get_xml_attr(session, 'grandparentThumb'),
@ -637,6 +639,8 @@ class PmsConnect(object):
if helpers.get_xml_attr(session, 'type') == 'episode':
session_output = {'session_key': helpers.get_xml_attr(session, 'sessionKey'),
'media_index': helpers.get_xml_attr(session, 'index'),
'parent_media_index': helpers.get_xml_attr(session, 'parentIndex'),
'art': helpers.get_xml_attr(session, 'art'),
'parent_thumb': helpers.get_xml_attr(session, 'parentThumb'),
'grandparent_thumb': helpers.get_xml_attr(session, 'grandparentThumb'),
@ -682,6 +686,8 @@ class PmsConnect(object):
}
elif helpers.get_xml_attr(session, 'type') == 'movie':
session_output = {'session_key': helpers.get_xml_attr(session, 'sessionKey'),
'media_index': helpers.get_xml_attr(session, 'index'),
'parent_media_index': helpers.get_xml_attr(session, 'parentIndex'),
'art': helpers.get_xml_attr(session, 'art'),
'thumb': helpers.get_xml_attr(session, 'thumb'),
'bif_thumb': bif_thumb,
@ -727,6 +733,8 @@ class PmsConnect(object):
}
elif helpers.get_xml_attr(session, 'type') == 'clip':
session_output = {'session_key': helpers.get_xml_attr(session, 'sessionKey'),
'media_index': helpers.get_xml_attr(session, 'index'),
'parent_media_index': helpers.get_xml_attr(session, 'parentIndex'),
'art': helpers.get_xml_attr(session, 'art'),
'thumb': helpers.get_xml_attr(session, 'thumb'),
'bif_thumb': bif_thumb,