From 7bbcc575b045c08da5db0a9ac26aeba68028da75 Mon Sep 17 00:00:00 2001 From: Jonathan Wong Date: Thu, 27 Aug 2015 12:50:31 -0700 Subject: [PATCH] Style current activity to match Plex/Web --- data/interfaces/default/css/plexpy.css | 309 +++++++++++------- data/interfaces/default/current_activity.html | 223 ++++++------- plexpy/pmsconnect.py | 7 + 3 files changed, 305 insertions(+), 234 deletions(-) diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css index 97d2b46e..6df761b6 100644 --- a/data/interfaces/default/css/plexpy.css +++ b/data/interfaces/default/css/plexpy.css @@ -84,14 +84,6 @@ img { outline:0px !important; -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 { color: #d7d7d7; background-color: #3B3B3B; @@ -484,117 +476,183 @@ a .users-poster-face:hover { float: left; } .dashboard-instance { - padding-bottom: 15px; float: left; position: relative; - margin-right: 27px; -} -.dashboard-poster { - float: left; - min-width: 150px; - margin-bottom: 8px; - position: relative; + height: 260px; + width: 350px; + margin-right: 25px; + margin-bottom: 25px; } .dashboard-activity-poster { - height: 141px; - width: 250px; + height: 200px; + width: 350px; position: relative; - top: 0px; - background-color: rgba(255,255,255,.03); - margin-bottom: 11px; - text-align: center; 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 { background-position: center; background-size: cover; - height: 140px; - width: 250px; - position: relative; + height: 200px; + width: 350px; + 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); -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); - margin-bottom: 11px; - text-align: center; + z-index: -3; } .dashboard-activity-cover-face-bg { background-position: center; background-size: cover; background-repeat: no-repeat; - height: 140px; - width: 250px; - position: relative; + height: 200px; + width: 350px; + 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); -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); - margin-bottom: 11px; - text-align: center; -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); opacity: 0.75; + z-index: -3; } .dashboard-activity-cover-face { background-position: center; background-size: cover; background-repeat: no-repeat; - height: 140px; - width: 140px; - position: relative; + height: 200px; + width: 200px; -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); - margin-bottom: 11px; - text-align: center; position: absolute; top: 0; - left: 55px; + left: 77px; + z-index: -3; } .dashboard-activity-clip-face-bg { background-position: center; background-size: cover; background-repeat: no-repeat; - height: 140px; - width: 250px; - position: relative; + height: 200px; + width: 350px; + 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); -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); - margin-bottom: 11px; - text-align: center; -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); opacity: 0.75; + z-index: -3; } .dashboard-activity-clip-face { background-position: center; background-size: cover; background-repeat: no-repeat; - height: 140px; - width: 94px; + height: 200px; + width: 130px; position: relative; -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); - margin-bottom: 11px; - text-align: center; position: absolute; 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 { position:absolute; - color: #F9AA03; - bottom: 0; - width:100%; - height: 100px; - background: -moz-linear-gradient(top, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 100%); - 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: -webkit-linear-gradient(top, rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%); - background: -o-linear-gradient(top, rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%); - background: -ms-linear-gradient(top, rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%); - background: linear-gradient(to bottom, rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%); + width: 100%; + height: 100%; + background-image: -webkit-gradient(linear,left 30%,left 100%,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.75))); + background-image: -webkit-linear-gradient(top,rgba(0,0,0,0),30%,rgba(0,0,0,0.75),100%); + background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 30%,rgba(0,0,0,0.75) 100%); + background-image: linear-gradient(to bottom,rgba(0,0,0,0) 30%,rgba(0,0,0,0.75) 100%); + opacity: 0; + -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 { position: absolute; @@ -612,23 +670,28 @@ a .users-poster-face:hover { } .dashboard-activity-poster-info-time { position: absolute; - bottom: 0; - right: 0; - float: right; + bottom: 5px; + right: 10px; text-align: right; - padding: 5px 8px; font-size: 12px; color: #eee; } .dashboard-activity-progress { - overflow: hidden; - height: 4px; - background-color: #111; - float: left; 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 { + padding-top: 6px; background-color: #faa732; background-image: -moz-linear-gradient(top, #fbb450, #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; 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 { position: relative; - left: 0px; - width: 250px; + width: 350px; + height: 50px; font-size: 13px; -} -.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; + padding: 0 3px; } .dashboard-activity-metadata-title { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 14px; - width: 80%; - margin-right: 5px; + line-height: 25px; 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; } +.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 { 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 { margin-bottom: 20px; font-size: 12px; font-weight: bold; color: #F9AA03; } -.dashboard-activity-metadata-progress-minutes { - width: 100%; -} -.dashboard-activity-instance-overlay { +/*.dashboard-activity-instance-overlay { position: relative; top: -12px; text-align: left; height: 53px; width: 250px; 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 { width: 100%; margin:0 auto; diff --git a/data/interfaces/default/current_activity.html b/data/interfaces/default/current_activity.html index ef401039..92d28b0e 100644 --- a/data/interfaces/default/current_activity.html +++ b/data/interfaces/default/current_activity.html @@ -28,8 +28,10 @@ user Returns the name of the user owning the session. user_id Returns the Plex user id if available. machine_id Returns the machine id of the players being used. 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'. 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. platform Returns the type of platform used to play the stream. audio_decision Returns the audio transcode decision. Either 'transcode', 'copy' or 'direct play'. @@ -62,132 +64,137 @@ DOCUMENTATION :: END % if data['stream_count'] != '0': % for a in data['sessions']:
-
+ % if a['type'] == 'movie' or a['type'] == 'episode': + + % endif
% if a['type'] == 'movie' and not a['indexes']:
% elif a['indexes']: % else: - % if a['type'] == 'track': + % if a['type'] == 'episode': +
+ % elif a['type'] == 'track':
% elif a['type'] == 'clip':
% else: -
+
% endif % endif -
-
+
+ +
+
+
+
+ ${a['player']}
+ % if a['state'] == 'playing': + State  Playing + % elif a['state'] == 'paused': + State  Paused + % elif a['state'] == 'buffering': + State  Buffering + % endif +
% if a['type'] == 'track': - Track ${a['media_index']} - % elif a['type'] == 'episode': - Season ${a['parent_media_index']}, Episode ${a['media_index']} - % else: - ${a['title']} + % if a['audio_decision'] == 'direct play': + Stream  Direct Play + % else: + Stream  Transcoding + % endif +
+ % if a['audio_decision'] == 'direct play': + Audio  Direct Play (${a['audio_codec']}) (${a['audio_channels']}ch) + % elif a['audio_decision'] == 'Copy': + Audio  Direct Stream (${a['transcode_audio_codec']}) (${a['transcode_audio_channels']}ch) + % elif a['audio_decision'] != 'transcode': + Audio  Transcode (${a['transcode_audio_codec']}) (${a['transcode_audio_channels']}ch) + % endif + % elif a['type'] == 'episode' or a['type'] == 'movie' or a['type'] == 'clip': + % if a['video_decision'] == 'direct play': + Stream  Direct Play + % else: + Stream  Transcoding + % endif +
+ % if a['video_decision'] == 'direct play': + Video  Direct Play (${a['video_codec']}) (${a['width']}x${a['height']}) + % elif a['video_decision'] == 'copy': + Video  Direct Stream (${a['transcode_video_codec']}) (${a['width']}x${a['height']}) + % elif a['video_decision'] == 'transcode': + Video  Transcode (${a['transcode_video_codec']}) (${a['width']}x${a['height']}) + % endif +
+ % if a['audio_decision'] == 'direct play': + Audio  Direct Play (${a['audio_codec']}) (${a['audio_channels']}ch) + % elif a['audio_decision'] == 'copy': + Audio  Direct Stream (${a['transcode_audio_codec']}) (${a['transcode_audio_channels']}ch) + % elif a['audio_decision'] == 'transcode': + Audio  Transcode (${a['transcode_audio_codec']}) (${a['transcode_audio_channels']}ch) + % endif % endif +
+
+
${a['progress']}/${a['duration']}
-
% endfor @@ -201,20 +208,16 @@ DOCUMENTATION :: END $(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 $('.dashboard-activity-metadata-platform').each(function() { $(this).tooltip(); }); + + // Show/Hide activity info + $('.btn-activity-info').on('click', function(e) { + e.preventDefault(); + $($(this).attr('data-target')).toggle(); + }); % else:
Nothing is currently being watched.

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