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']}
-
-
-
-
-
${a['progress_percent']}%
-
-
-
-
-
- % if a['user_id']: - ${a['friendly_name']} is ${a['state']} - % else: - ${a['friendly_name']} is ${a['state']} - % endif -
-
- % if a['type'] == 'episode': - ${a['grandparent_title']} - ${a['title']} - % elif a['type'] == 'movie': - ${a['title']} - % elif a['type'] == 'clip': - ${a['title']} - % elif a['type'] == 'track': - ${a['grandparent_title']} - ${a['title']} - % else: - ${a['grandparent_title']} - ${a['title']} - % endif -
-
-
-
-
- % if a['type'] == 'track': - Artist: ${a['grandparent_title']} -
- Album: ${a['parent_title']} -
- % endif - % if a['state'] == 'playing': - State: Playing - % elif a['state'] == 'paused': - State: Paused - % elif a['state'] == 'buffering': - State: Buffering - % endif -
- % if a['type'] == 'track': - % if a['audio_decision'] == 'direct play': - Stream: Direct Play - % else: - Stream: Transcoding - % endif -
- % if a['audio_decision'] != 'direct play': - Audio: ${a['transcode_audio_codec']} (${a['transcode_audio_channels']}ch) - % elif a['audio_decision'] == 'direct play': - Audio: ${a['audio_codec']} (${a['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: ${a['video_decision']} (${a['transcode_video_codec']}) - (${a['transcode_width']}x${a['transcode_height']}) - % elif a['audio_decision'] == 'direct play': - Video: ${a['video_decision']} (${a['video_codec']}) - (${a['width']}x${a['height']}) - % endif -
- % if a['audio_decision'] != 'direct play': - Audio: ${a['audio_decision']} ${a['transcode_audio_codec']} (${a['transcode_audio_channels']}ch) - % elif a['audio_decision'] == 'direct play': - Audio: ${a['audio_codec']} (${a['audio_channels']}ch) - % endif - % endif -
-
-
-
+ % if a['type'] == 'movie' or a['type'] == 'episode': + + % endif +
+
+
${a['progress_percent']}%
-
- -
+
+ +
+ +
+ % if a['type'] == 'episode': + ${a['grandparent_title']} - ${a['title']} + % elif a['type'] == 'movie': + ${a['title']} + % elif a['type'] == 'clip': + ${a['title']} + % elif a['type'] == 'track': + ${a['grandparent_title']} - ${a['title']} + % else: + ${a['grandparent_title']} - ${a['title']} + % endif +
+
+ % if a['type'] == 'episode': + S${a['parent_media_index']} · E${a['media_index']} + % elif a['type'] == 'movie': + ${a['year']} + % elif a['type'] == 'track': + ${a['parent_title']} + % else: + ${a['year']} + % endif +
+
+ % if a['user_id']: + ${a['friendly_name']} + % else: + ${a['friendly_name']} + % endif +
+
% 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'),