github/plexpy
1
0
Fork 0
mirror of https://github.com/Tautulli/Tautulli.git synced 2025-07-14 09:12:58 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Style current activity to match Plex/Web

Browse source
This commit is contained in:
Jonathan Wong 2015-08-27 12:50:31 -07:00
parent b91a4844e0
commit 7bbcc575b0
3 changed files with 305 additions and 234 deletions
Download patch file Download diff file Expand all files Collapse all files

307
data/interfaces/default/css/plexpy.css
View file

@ -84,14 +84,6 @@ img {
outline:0px !important; outline:0px !important;
-webkit-appearance:none; -webkit-appearance:none;
} }
.btn-activity-info,
.btn-activity-info:focus {
color: #aaa;
background-color: rgba(0,0,0,0.5);
}
.btn-activity-info:hover {
color: #eee;
}
.btn-dark { .btn-dark {
color: #d7d7d7; color: #d7d7d7;
background-color: #3B3B3B; background-color: #3B3B3B;
@ -484,117 +476,183 @@ a .users-poster-face:hover {
float: left; float: left;
} }
.dashboard-instance { .dashboard-instance {
padding-bottom: 15px;
float: left; float: left;
position: relative; position: relative;
margin-right: 27px; height: 260px;
} width: 350px;
.dashboard-poster { margin-right: 25px;
float: left; margin-bottom: 25px;
min-width: 150px;
margin-bottom: 8px;
position: relative;
} }
.dashboard-activity-poster { .dashboard-activity-poster {
height: 141px; height: 200px;
width: 250px; width: 350px;
position: relative; position: relative;
top: 0px;
background-color: rgba(255,255,255,.03);
margin-bottom: 11px;
text-align: center;
overflow: hidden; overflow: hidden;
} }
a:hover .dashboard-activity-poster {
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 2px #e9a049;
-moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 2px #e9a049;
box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 2px #e9a049;
}
.dashboard-activity-poster-face { .dashboard-activity-poster-face {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
height: 140px; height: 200px;
width: 250px; width: 350px;
position: relative; position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
margin-bottom: 11px; z-index: -3;
text-align: center;
} }
.dashboard-activity-cover-face-bg { .dashboard-activity-cover-face-bg {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 140px; height: 200px;
width: 250px; width: 350px;
position: relative; position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
margin-bottom: 11px;
text-align: center;
-webkit-filter: blur(5px); -webkit-filter: blur(5px);
-moz-filter: blur(5px); -moz-filter: blur(5px);
filter: blur(5px); filter: blur(5px);
opacity: 0.75; opacity: 0.75;
z-index: -3;
} }
.dashboard-activity-cover-face { .dashboard-activity-cover-face {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 140px; height: 200px;
width: 140px; width: 200px;
position: relative;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
margin-bottom: 11px;
text-align: center;
position: absolute; position: absolute;
top: 0; top: 0;
left: 55px; left: 77px;
z-index: -3;
} }
.dashboard-activity-clip-face-bg { .dashboard-activity-clip-face-bg {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 140px; height: 200px;
width: 250px; width: 350px;
position: relative; position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
margin-bottom: 11px;
text-align: center;
-webkit-filter: blur(5px); -webkit-filter: blur(5px);
-moz-filter: blur(5px); -moz-filter: blur(5px);
filter: blur(5px); filter: blur(5px);
opacity: 0.75; opacity: 0.75;
z-index: -3;
} }
.dashboard-activity-clip-face { .dashboard-activity-clip-face {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 140px; height: 200px;
width: 94px; width: 130px;
position: relative; position: relative;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
margin-bottom: 11px;
text-align: center;
position: absolute; position: absolute;
top: 0; top: 0;
left: 78px; left: 110px;
z-index: -3;
}
.dashboard-activity-info-details-overlay {
text-align: left;
background-image: -webkit-gradient(linear,left 0,left 100%,from(rgba(0,0,0,.6)),to(rgba(0,0,0,.8)));
background-image: -webkit-linear-gradient(top,rgba(0,0,0,.6),0,rgba(0,0,0,.8),100%);
background-image: -moz-linear-gradient(top,rgba(0,0,0,.6) 0,rgba(0,0,0,.8) 100%);
background-image: linear-gradient(to bottom,rgba(0,0,0,.6) 0,rgba(0,0,0,.8) 100%);
background-repeat: repeat-x;
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: none;
z-index: -1;
}
.dashboard-activity-button-info {
width: 50px;
height: 50px;
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
}
.btn-activity-info,
.btn-activity-info:focus {
color: #999;
background-color: rgba(0,0,0,0.5);
}
.btn-activity-info:hover {
color: #fff;
}
.dashboard-activity-info-details-content {
height: 200px;
width: 350px;
line-height: 25px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #aaa;
padding: 10px;
}
.dashboard-activity-info-details-content strong {
color: #fff;
font-weight: normal;
}
.dashboard-activity-info-platform {
width: 100%;
height: 50px;
margin-bottom: 10px;
}
.dashboard-activity-info-platform-box {
float: left;
background-position: center;
background-size: cover;
width: 50px;
height: 50px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;
} }
.dashboard-activity-poster-info-bar { .dashboard-activity-poster-info-bar {
position:absolute; position:absolute;
color: #F9AA03;
bottom: 0;
width: 100%; width: 100%;
height: 100px; height: 100%;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 100%); background-image: -webkit-gradient(linear,left 30%,left 100%,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.75)));
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0),30%,rgba(0,0,0,0.75),100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 30%,rgba(0,0,0,0.75) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%); background-image: linear-gradient(to bottom,rgba(0,0,0,0) 30%,rgba(0,0,0,0.75) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%); opacity: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%); -webkit-transition: all .2s;
transition: all .2s;
z-index: -2;
}
.dashboard-activity-poster:hover .dashboard-activity-poster-info-bar {
opacity: 1;
} }
.dashboard-activity-poster-info-text { .dashboard-activity-poster-info-text {
position: absolute; position: absolute;
@ -612,23 +670,28 @@ a .users-poster-face:hover {
} }
.dashboard-activity-poster-info-time { .dashboard-activity-poster-info-time {
position: absolute; position: absolute;
bottom: 0; bottom: 5px;
right: 0; right: 10px;
float: right;
text-align: right; text-align: right;
padding: 5px 8px;
font-size: 12px; font-size: 12px;
color: #eee; color: #eee;
} }
.dashboard-activity-progress { .dashboard-activity-progress {
overflow: hidden;
height: 4px;
background-color: #111;
float: left;
width: 100%; width: 100%;
margin: 0 10px 5px 0; height: 5px;
margin-bottom: 5px;
}
.dashboard-activity-progress-bar {
overflow: hidden;
height: 5px;
background-color: #111;
width: 100%;
z-index: -1;
-webkit-transition: all 0s;
transition: all 0s;
} }
.dashboard-activity-progress .bar { .dashboard-activity-progress .bar {
padding-top: 6px;
background-color: #faa732; background-color: #faa732;
background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
@ -638,90 +701,88 @@ a .users-poster-face:hover {
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
} }
.dashboard-activity-button-info {
position: absolute;
top: 3px;
left: 5px;
z-index: 1;
}
.dashboard-activity-metadata-wrapper { .dashboard-activity-metadata-wrapper {
position: relative; position: relative;
left: 0px; width: 350px;
width: 250px; height: 50px;
font-size: 13px; font-size: 13px;
} padding: 0 3px;
.dashboard-activity-metadata-user {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 80%;
margin-right: 5px;
float: left;
}
.dashboard-activity-metadata-user a {
color: #F9AA03;
}
.dashboard-activity-metadata-user a:hover {
color: #FFCD62;
} }
.dashboard-activity-metadata-title { .dashboard-activity-metadata-title {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
font-size: 14px; font-size: 14px;
width: 80%; line-height: 25px;
margin-right: 5px;
color: #fff; color: #fff;
max-width: 300px;
}
.dashboard-activity-metadata-subtitle {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 14px;
line-height: 25px;
color: #999;
max-width: 172px;
float: left; float: left;
} }
.dashboard-activity-metadata-user {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 14px;
line-height: 25px;
color: #999;
text-align: right;
max-width: 122px;
float: right;
}
.dashboard-activity-metadata-user-thumb {
background-position: center;
background-size: cover;
margin-top: 5px;
margin-left: 10px;
height: 40px;
width: 40px;
position: relative;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
overflow: hidden;
float: right;
}
a .dashboard-activity-metadata-user-thumb:hover {
-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;
}
.dashboard-activity-metadata-user a {
color: #999;
}
.dashboard-activity-metadata-user a:hover {
color: #F9AA03;
}
.dashboard-activity-metadata-title a:hover { .dashboard-activity-metadata-title a:hover {
color: #F9AA03; color: #F9AA03;
} }
.dashboard-activity-metadata-platform {
float: right;
}
.dashboard-activity-metadata-platform-box {
background-position: center;
background-size: cover;
width: 40px;
height: 40px;
}
.dashboard-activity-metadata-progress-wrapper { .dashboard-activity-metadata-progress-wrapper {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
color: #F9AA03; color: #F9AA03;
} }
.dashboard-activity-metadata-progress-minutes { /*.dashboard-activity-instance-overlay {
width: 100%;
}
.dashboard-activity-instance-overlay {
position: relative; position: relative;
top: -12px; top: -12px;
text-align: left; text-align: left;
height: 53px; height: 53px;
width: 250px; width: 250px;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
} }*/
.dashboard-activity-info-details-overlay {
text-align: left;
background-color: rgba(0,0,0,0.5);
width: 250px;
padding: 5px 0px 5px 0px;
}
.dashboard-activity-info-details-content {
margin-left: 5px;
margin-right: 5px;
width: 245px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #999;
}
.dashboard-activity-info-details-content strong {
color: #fff;
font-weight: normal;
}
.dashboard-recent-media-row { .dashboard-recent-media-row {
width: 100%; width: 100%;
margin:0 auto; margin:0 auto;

185
data/interfaces/default/current_activity.html
View file

@ -28,8 +28,10 @@ user Returns the name of the user owning the session.
user_id Returns the Plex user id if available. user_id Returns the Plex user id if available.
machine_id Returns the machine id of the players being used. machine_id Returns the machine id of the players being used.
friendly_name Returns the friendlly name of the user owning the session. friendly_name Returns the friendlly name of the user owning the session.
user_thumb Returns the profile picture of the user owning the session.
state Returns the state of the current session. Either 'playing', 'paused' or 'buffering'. state Returns the state of the current session. Either 'playing', 'paused' or 'buffering'.
title Returns the name of the episode, movie or music track. title Returns the name of the episode, movie or music track.
year Returns the year of the episode, movie, or clip.
player Returns the name of the platform used to play the stream. player Returns the name of the platform used to play the stream.
platform Returns the type of platform used to play the stream. platform Returns the type of platform used to play the stream.
audio_decision Returns the audio transcode decision. Either 'transcode', 'copy' or 'direct play'. audio_decision Returns the audio transcode decision. Either 'transcode', 'copy' or 'direct play'.
@ -62,54 +64,102 @@ DOCUMENTATION :: END
% if data['stream_count'] != '0': % if data['stream_count'] != '0':
% for a in data['sessions']: % for a in data['sessions']:
<div class="dashboard-instance" id="instance-${a['session_key']}"> <div class="dashboard-instance" id="instance-${a['session_key']}">
<div class="dashboard-poster"> % if a['type'] == 'movie' or a['type'] == 'episode':
<a href="info?item_id=${a['rating_key']}">
% endif
<div class="dashboard-activity-poster"> <div class="dashboard-activity-poster">
% if a['type'] == 'movie' and not a['indexes']: % if a['type'] == 'movie' and not a['indexes']:
<div class="dashboard-activity-poster-face" style="background-image: url(pms_image_proxy?img=${a['art']}&width=500&height=280);"></div> <div class="dashboard-activity-poster-face" style="background-image: url(pms_image_proxy?img=${a['art']}&width=500&height=280);"></div>
% elif a['indexes']: % elif a['indexes']:
<div class="dashboard-activity-poster-face" style="background-image: url(pms_image_proxy?img=${a['bif_thumb']}&width=300&height=280); display: none;" onload="fadeIn(this)"></div> <div class="dashboard-activity-poster-face" style="background-image: url(pms_image_proxy?img=${a['bif_thumb']}&width=300&height=280); display: none;" onload="fadeIn(this)"></div>
% else: % else:
% if a['type'] == 'track': % if a['type'] == 'episode':
<div class="dashboard-activity-poster-face" style="background-image: url(pms_image_proxy?img=${a['thumb']}&width=500&height=280&fallback=cover);"></div>
% elif a['type'] == 'track':
<div class="dashboard-activity-cover-face-bg" style="background-image: url(pms_image_proxy?img=${a['thumb']}&width=300&height=300);"></div> <div class="dashboard-activity-cover-face-bg" style="background-image: url(pms_image_proxy?img=${a['thumb']}&width=300&height=300);"></div>
<div class="dashboard-activity-cover-face" style="background-image: url(pms_image_proxy?img=${a['thumb']}&width=300&height=300);"></div> <div class="dashboard-activity-cover-face" style="background-image: url(pms_image_proxy?img=${a['thumb']}&width=300&height=300);"></div>
% elif a['type'] == 'clip': % elif a['type'] == 'clip':
<div class="dashboard-activity-clip-face-bg" style="background-image: url(${a['thumb']});"></div> <div class="dashboard-activity-clip-face-bg" style="background-image: url(${a['thumb']});"></div>
<div class="dashboard-activity-clip-face" style="background-image: url(${a['thumb']});"></div> <div class="dashboard-activity-clip-face" style="background-image: url(${a['thumb']});"></div>
% else: % else:
<div class="dashboard-activity-cover-face" style="background-image: url(pms_image_proxy?img=${a['thumb']}&width=300&height=300&fallback=cover);"></div> <div class="dashboard-activity-cover-face" style="background-image: url(pms_image_proxy?img=${a['thumb']}&width=500&height=280&fallback=cover);"></div>
% endif % endif
% endif % endif
<div class="dashboard-activity-poster-info-bar"> <div class="dashboard-activity-button-info">
<div class="dashboard-activity-poster-info-text"> <button type="button" class="btn btn-activity-info btn-lg" data-target="#stream-${a['session_key']}">
% if a['type'] == 'track': <i class="fa fa-info-circle"></i>
Track ${a['media_index']} </button>
% elif a['type'] == 'episode': </div>
Season ${a['parent_media_index']}, Episode ${a['media_index']} <div id="stream-${a['session_key']}" class="dashboard-activity-info-details-overlay">
% else: <div class="dashboard-activity-info-details-content">
${a['title']} <div class="dashboard-activity-info-platform" id="platform-${a['session_key']}">
<strong>${a['player']}</strong><br />
% if a['state'] == 'playing':
State &nbsp;<strong>Playing</strong>
% elif a['state'] == 'paused':
State &nbsp;<strong>Paused</strong>
% elif a['state'] == 'buffering':
State &nbsp;<strong>Buffering</strong>
% endif % endif
</div> </div>
% if a['type'] == 'track':
% if a['audio_decision'] == 'direct play':
Stream &nbsp;<strong>Direct Play</strong>
% else:
Stream &nbsp;<strong>Transcoding</strong>
% endif
<br />
% if a['audio_decision'] == 'direct play':
Audio &nbsp;<strong>Direct Play (${a['audio_codec']}) (${a['audio_channels']}ch)</strong>
% elif a['audio_decision'] == 'Copy':
Audio &nbsp;<strong>Direct Stream (${a['transcode_audio_codec']}) (${a['transcode_audio_channels']}ch)</strong>
% elif a['audio_decision'] != 'transcode':
Audio &nbsp;<strong>Transcode (${a['transcode_audio_codec']}) (${a['transcode_audio_channels']}ch)</strong>
% endif
% elif a['type'] == 'episode' or a['type'] == 'movie' or a['type'] == 'clip':
% if a['video_decision'] == 'direct play':
Stream &nbsp;<strong>Direct Play</strong>
% else:
Stream &nbsp;<strong>Transcoding</strong>
% endif
<br />
% if a['video_decision'] == 'direct play':
Video &nbsp;<strong>Direct Play (${a['video_codec']}) (${a['width']}x${a['height']})</strong>
% elif a['video_decision'] == 'copy':
Video &nbsp;<strong>Direct Stream (${a['transcode_video_codec']}) (${a['width']}x${a['height']})</strong>
% elif a['video_decision'] == 'transcode':
Video &nbsp;<strong>Transcode (${a['transcode_video_codec']}) (${a['width']}x${a['height']})</strong>
% endif
<br />
% if a['audio_decision'] == 'direct play':
Audio &nbsp;<strong>Direct Play (${a['audio_codec']}) (${a['audio_channels']}ch)</strong>
% elif a['audio_decision'] == 'copy':
Audio &nbsp;<strong>Direct Stream (${a['transcode_audio_codec']}) (${a['transcode_audio_channels']}ch)</strong>
% elif a['audio_decision'] == 'transcode':
Audio &nbsp;<strong>Transcode (${a['transcode_audio_codec']}) (${a['transcode_audio_channels']}ch)</strong>
% endif
% endif
<br>
</div>
</div>
<div class="dashboard-activity-poster-info-bar">
<div class="dashboard-activity-poster-info-time"> <div class="dashboard-activity-poster-info-time">
<span class="progress_time">${a['progress']}</span>/<span class="progress_time">${a['duration']}</span> <span class="progress_time">${a['progress']}</span>/<span class="progress_time">${a['duration']}</span>
</div> </div>
</div> </div>
</div> </div>
<div class='dashboard-activity-metadata-wrapper'> % if a['type'] == 'movie' or a['type'] == 'episode':
<div class='dashboard-activity-instance-overlay'> </a>
<div class='dashboard-activity-metadata-progress-minutes'> % endif
<div class='dashboard-activity-progress'> <div class="dashboard-activity-progress">
<div class="dashboard-activity-progress-bar">
<div class="bar" style="width: ${a['progress_percent']}%">${a['progress_percent']}%</div> <div class="bar" style="width: ${a['progress_percent']}%">${a['progress_percent']}%</div>
</div> </div>
</div> </div>
<div class="dashboard-activity-metadata-platform" data-toggle="tooltip" data-placement="right" title data-title="${a['player']}" id="platform-${a['session_key']}"> <div class="dashboard-activity-metadata-wrapper">
</div> <a href="user?user_id=${a['user_id']}">
<div class="dashboard-activity-metadata-user"> <div class="dashboard-activity-metadata-user-thumb" style="background-image: url(${a['user_thumb']});"></div>
% if a['user_id']: </a>
<a href="user?user_id=${a['user_id']}">${a['friendly_name']}</a> is ${a['state']}
% else:
<a href="user?user=${a['user']}">${a['friendly_name']}</a> is ${a['state']}
% endif
</div>
<div class="dashboard-activity-metadata-title"> <div class="dashboard-activity-metadata-title">
% if a['type'] == 'episode': % if a['type'] == 'episode':
<a href="info?item_id=${a['rating_key']}">${a['grandparent_title']} - ${a['title']}</a> <a href="info?item_id=${a['rating_key']}">${a['grandparent_title']} - ${a['title']}</a>
@ -123,71 +173,28 @@ DOCUMENTATION :: END
${a['grandparent_title']} - ${a['title']} ${a['grandparent_title']} - ${a['title']}
% endif % endif
</div> </div>
</div> <div class="dashboard-activity-metadata-subtitle">
<div id="stream-${a['session_key']}" class="collapse out"> % if a['type'] == 'episode':
<div class='dashboard-activity-info-details-overlay'> S${a['parent_media_index']} &middot; E${a['media_index']}
<div class='dashboard-activity-info-details-content'> % elif a['type'] == 'movie':
% if a['type'] == 'track': ${a['year']}
Artist: <strong>${a['grandparent_title']}</strong> % elif a['type'] == 'track':
<br> ${a['parent_title']}
Album: <strong>${a['parent_title']}</strong>
<br>
% endif
% if a['state'] == 'playing':
State: <strong>Playing</strong>
% elif a['state'] == 'paused':
State: <strong>Paused</strong>
% elif a['state'] == 'buffering':
State: <strong>Buffering</strong>
% endif
<br>
% if a['type'] == 'track':
% if a['audio_decision'] == 'direct play':
Stream: <strong>Direct Play</strong>
% else: % else:
Stream: <strong>Transcoding</strong> ${a['year']}
% endif % endif
<br/> </div>
% if a['audio_decision'] != 'direct play': <div class="dashboard-activity-metadata-user">
Audio: <strong>${a['transcode_audio_codec']} (${a['transcode_audio_channels']}ch)</strong> % if a['user_id']:
% elif a['audio_decision'] == 'direct play': <a href="user?user_id=${a['user_id']}">${a['friendly_name']}</a>
Audio: <strong>${a['audio_codec']} (${a['audio_channels']}ch)</strong>
% endif
% elif a['type'] == 'episode' or a['type'] == 'movie' or a['type'] == 'clip':
% if a['video_decision'] == 'direct play':
Stream: <strong>Direct Play</strong>
% else: % else:
Stream: <strong>Transcoding</strong> <a href="user?user=${a['user']}">${a['friendly_name']}</a>
% endif % endif
<br/>
% if a['video_decision'] != 'direct play':
Video: <strong>${a['video_decision']} (${a['transcode_video_codec']})
(${a['transcode_width']}x${a['transcode_height']})</strong>
% elif a['audio_decision'] == 'direct play':
Video: <strong>${a['video_decision']} (${a['video_codec']})
(${a['width']}x${a['height']})</strong>
% endif
<br/>
% if a['audio_decision'] != 'direct play':
Audio: <strong>${a['audio_decision']} ${a['transcode_audio_codec']} (${a['transcode_audio_channels']}ch)</strong>
% elif a['audio_decision'] == 'direct play':
Audio: <strong>${a['audio_codec']} (${a['audio_channels']}ch)</strong>
% endif
% endif
<br>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="dashboard-activity-button-info">
<button type="button" class="btn btn-activity-info btn-sm" data-toggle="collapse" data-target="#stream-${a['session_key']}">
<i class='fa fa-info-circle'></i>
</button>
</div>
</div>
<script> <script>
$("#platform-${a['session_key']}").html("<div class='dashboard-activity-metadata-platform-box' style='background-image: url(" + getPlatformImagePath('${a['platform']}') + ");'>"); $("#platform-${a['session_key']}").prepend("<div class='dashboard-activity-info-platform-box' style='background-image: url(" + getPlatformImagePath('${a['platform']}') + ");'>");
</script> </script>
% endfor % endfor
@ -201,20 +208,16 @@ DOCUMENTATION :: END
$(this).html(millisecondsToMinutes($(this).text(), false)); $(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').hover(function() {
$('.dashboard-activity-poster-info-bar', this).stop().slideDown('fast');
}, function() {
$('.dashboard-activity-poster-info-bar', this).stop().slideUp('fast');
});
// Tooltips // Tooltips
$('.dashboard-activity-metadata-platform').each(function() { $('.dashboard-activity-metadata-platform').each(function() {
$(this).tooltip(); $(this).tooltip();
}); });
// Show/Hide activity info
$('.btn-activity-info').on('click', function(e) {
e.preventDefault();
$($(this).attr('data-target')).toggle();
});
</script> </script>
% else: % else:
<div class="text-muted">Nothing is currently being watched.</div><br> <div class="text-muted">Nothing is currently being watched.</div><br>

7
plexpy/pmsconnect.py
View file

@ -555,6 +555,7 @@ class PmsConnect(object):
'user': user_details['username'], 'user': user_details['username'],
'user_id': user_details['user_id'], 'user_id': user_details['user_id'],
'friendly_name': user_details['friendly_name'], 'friendly_name': user_details['friendly_name'],
'user_thumb': user_details['thumb'],
'player': helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'title'), 'player': helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'title'),
'platform': helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'platform'), 'platform': helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'platform'),
'machine_id': machine_id, 'machine_id': machine_id,
@ -664,6 +665,7 @@ class PmsConnect(object):
'user': user_details['username'], 'user': user_details['username'],
'user_id': user_details['user_id'], 'user_id': user_details['user_id'],
'friendly_name': user_details['friendly_name'], 'friendly_name': user_details['friendly_name'],
'user_thumb': user_details['thumb'],
'player': helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'title'), 'player': helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'title'),
'platform': helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'platform'), 'platform': helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'platform'),
'machine_id': machine_id, 'machine_id': machine_id,
@ -671,6 +673,7 @@ class PmsConnect(object):
'grandparent_title': helpers.get_xml_attr(session, 'grandparentTitle'), 'grandparent_title': helpers.get_xml_attr(session, 'grandparentTitle'),
'parent_title': helpers.get_xml_attr(session, 'parentTitle'), 'parent_title': helpers.get_xml_attr(session, 'parentTitle'),
'title': helpers.get_xml_attr(session, 'title'), 'title': helpers.get_xml_attr(session, 'title'),
'year': helpers.get_xml_attr(session, 'year'),
'rating_key': helpers.get_xml_attr(session, 'ratingKey'), 'rating_key': helpers.get_xml_attr(session, 'ratingKey'),
'parent_rating_key': helpers.get_xml_attr(session, 'parentRatingKey'), 'parent_rating_key': helpers.get_xml_attr(session, 'parentRatingKey'),
'grandparent_rating_key': helpers.get_xml_attr(session, 'grandparentRatingKey'), 'grandparent_rating_key': helpers.get_xml_attr(session, 'grandparentRatingKey'),
@ -711,6 +714,7 @@ class PmsConnect(object):
'user': user_details['username'], 'user': user_details['username'],
'user_id': user_details['user_id'], 'user_id': user_details['user_id'],
'friendly_name': user_details['friendly_name'], 'friendly_name': user_details['friendly_name'],
'user_thumb': user_details['thumb'],
'player': helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'title'), 'player': helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'title'),
'platform': helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'platform'), 'platform': helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'platform'),
'machine_id': machine_id, 'machine_id': machine_id,
@ -718,6 +722,7 @@ class PmsConnect(object):
'grandparent_title': helpers.get_xml_attr(session, 'grandparentTitle'), 'grandparent_title': helpers.get_xml_attr(session, 'grandparentTitle'),
'parent_title': helpers.get_xml_attr(session, 'parentTitle'), 'parent_title': helpers.get_xml_attr(session, 'parentTitle'),
'title': helpers.get_xml_attr(session, 'title'), 'title': helpers.get_xml_attr(session, 'title'),
'year': helpers.get_xml_attr(session, 'year'),
'rating_key': helpers.get_xml_attr(session, 'ratingKey'), 'rating_key': helpers.get_xml_attr(session, 'ratingKey'),
'parent_rating_key': helpers.get_xml_attr(session, 'parentRatingKey'), 'parent_rating_key': helpers.get_xml_attr(session, 'parentRatingKey'),
'grandparent_rating_key': helpers.get_xml_attr(session, 'grandparentRatingKey'), 'grandparent_rating_key': helpers.get_xml_attr(session, 'grandparentRatingKey'),
@ -758,6 +763,7 @@ class PmsConnect(object):
'user': user_details['username'], 'user': user_details['username'],
'user_id': user_details['user_id'], 'user_id': user_details['user_id'],
'friendly_name': user_details['friendly_name'], 'friendly_name': user_details['friendly_name'],
'user_thumb': user_details['thumb'],
'player': helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'title'), 'player': helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'title'),
'platform': helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'platform'), 'platform': helpers.get_xml_attr(session.getElementsByTagName('Player')[0], 'platform'),
'machine_id': machine_id, 'machine_id': machine_id,
@ -765,6 +771,7 @@ class PmsConnect(object):
'grandparent_title': helpers.get_xml_attr(session, 'grandparentTitle'), 'grandparent_title': helpers.get_xml_attr(session, 'grandparentTitle'),
'parent_title': helpers.get_xml_attr(session, 'parentTitle'), 'parent_title': helpers.get_xml_attr(session, 'parentTitle'),
'title': helpers.get_xml_attr(session, 'title'), 'title': helpers.get_xml_attr(session, 'title'),
'year': helpers.get_xml_attr(session, 'year'),
'rating_key': helpers.get_xml_attr(session, 'ratingKey'), 'rating_key': helpers.get_xml_attr(session, 'ratingKey'),
'parent_rating_key': helpers.get_xml_attr(session, 'parentRatingKey'), 'parent_rating_key': helpers.get_xml_attr(session, 'parentRatingKey'),
'grandparent_rating_key': helpers.get_xml_attr(session, 'grandparentRatingKey'), 'grandparent_rating_key': helpers.get_xml_attr(session, 'grandparentRatingKey'),