Style current activity to match Plex/Web

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;
+    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 {
-    height: 141px;
+    height: 200px;
-    width: 250px;
+    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;
+    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);
     -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;
+    z-index: -3;
-    text-align: center;
 }
 .dashboard-activity-cover-face-bg {
     background-position: center;
     background-size: cover;
     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);
     -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;
+    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);
     -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;
+    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);
     -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;
+    height: 200px;
-    width: 94px;
+    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;
+    width: 100%;
-    bottom: 0;
+    height: 100%;
-    width:100%;
+    background-image: -webkit-gradient(linear,left 30%,left 100%,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.75)));
-    height: 100px;
+    background-image: -webkit-linear-gradient(top,rgba(0,0,0,0),30%,rgba(0,0,0,0.75),100%);
-    background: -moz-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: -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: linear-gradient(to bottom,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%);
+    opacity: 0;
-    background: -o-linear-gradient(top,  rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%);
+    -webkit-transition: all .2s;
-    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%);
+    transition: all .2s;
-    background: linear-gradient(to bottom,  rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%);
+    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;
+    bottom: 5px;
-    right: 0;
+    right: 10px;
-    float: right;
     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: 350px;
-    width: 250px;
+    height: 50px;
     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 {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     font-size: 14px;
-    width: 80%;
+    line-height: 25px;
-    margin-right: 5px;
     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 {
+/*.dashboard-activity-instance-overlay {
-    width: 100%;
-}
-.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;

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']:
 <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">
             % 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>
             % 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>
             % 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" style="background-image: url(pms_image_proxy?img=${a['thumb']}&width=300&height=300);"></div>
                 % elif a['type'] == 'clip':
                 <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>
                 % 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
-            <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']}">
+                    <i class="fa fa-info-circle"></i>
+                </button>
+            </div>
+            <div id="stream-${a['session_key']}" class="dashboard-activity-info-details-overlay">
+                <div class="dashboard-activity-info-details-content">
+                    <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
+                    </div>
                     % if a['type'] == 'track':
-                    Track ${a['media_index']}
+                        % if a['audio_decision'] == 'direct play':
-                    % elif a['type'] == 'episode':
+                        Stream &nbsp;<strong>Direct Play</strong>
-                    Season ${a['parent_media_index']}, Episode ${a['media_index']}
+                        % else:
-                    % else:
+                        Stream &nbsp;<strong>Transcoding</strong>
-                    ${a['title']}
+                        % 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">
                     <span class="progress_time">${a['progress']}</span>/<span class="progress_time">${a['duration']}</span>
                 </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="bar" style="width: ${a['progress_percent']}%">${a['progress_percent']}%</div>
+        <div class="dashboard-activity-progress-bar">
-                    </div>
+            <div class="bar" style="width: ${a['progress_percent']}%">${a['progress_percent']}%</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>
-                <div class="dashboard-activity-metadata-user">
-                    % if a['user_id']:
-                    <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">
-                    % if a['type'] == 'episode':
-                    <a href="info?item_id=${a['rating_key']}">${a['grandparent_title']} - ${a['title']}</a>
-                    % elif a['type'] == 'movie':
-                    <a href="info?item_id=${a['rating_key']}">${a['title']}</a>
-                    % elif a['type'] == 'clip':
-                    ${a['title']}
-                    % elif a['type'] == 'track':
-                    ${a['grandparent_title']} - ${a['title']}
-                    % else:
-                    ${a['grandparent_title']} - ${a['title']}
-                    % endif
-                </div>
-            </div>
-            <div id="stream-${a['session_key']}" class="collapse out">
-                <div class='dashboard-activity-info-details-overlay'>
-                    <div class='dashboard-activity-info-details-content'>
-                        % if a['type'] == 'track':
-                        Artist: <strong>${a['grandparent_title']}</strong>
-                        <br>
-                        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:
-                        Stream: <strong>Transcoding</strong>
-                        % endif
-                        <br/>
-                        % if a['audio_decision'] != 'direct play':
-                        Audio: <strong>${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
-                        % elif a['type'] == 'episode' or a['type'] == 'movie' or a['type'] == 'clip':
-                        % if a['video_decision'] == 'direct play':
-                        Stream: <strong>Direct Play</strong>
-                        % else:
-                        Stream: <strong>Transcoding</strong>
-                        % 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 class="dashboard-activity-button-info">
+    <div class="dashboard-activity-metadata-wrapper">
-        <button type="button" class="btn btn-activity-info btn-sm" data-toggle="collapse" data-target="#stream-${a['session_key']}">
+        <a href="user?user_id=${a['user_id']}">
-            <i class='fa fa-info-circle'></i>
+            <div class="dashboard-activity-metadata-user-thumb" style="background-image: url(${a['user_thumb']});"></div>
-        </button>
+        </a>
-    </div>
+        <div class="dashboard-activity-metadata-title">
+            % if a['type'] == 'episode':
+            <a href="info?item_id=${a['rating_key']}">${a['grandparent_title']} - ${a['title']}</a>
+            % elif a['type'] == 'movie':
+            <a href="info?item_id=${a['rating_key']}">${a['title']}</a>
+            % elif a['type'] == 'clip':
+            ${a['title']}
+            % elif a['type'] == 'track':
+            ${a['grandparent_title']} - ${a['title']}
+            % else:
+            ${a['grandparent_title']} - ${a['title']}
+            % endif
+        </div>
+        <div class="dashboard-activity-metadata-subtitle">
+            % if a['type'] == 'episode':
+            S${a['parent_media_index']} &middot; E${a['media_index']}
+            % elif a['type'] == 'movie':
+            ${a['year']}
+            % elif a['type'] == 'track':
+            ${a['parent_title']}
+            % else:
+            ${a['year']}
+            % endif
+        </div>
+        <div class="dashboard-activity-metadata-user">
+            % if a['user_id']:
+            <a href="user?user_id=${a['user_id']}">${a['friendly_name']}</a>
+            % else:
+            <a href="user?user=${a['user']}">${a['friendly_name']}</a>
+            % endif
+        </div>
+</div>
 </div>
 <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>
 
 % 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();
+    });
 </script>
 % else:
 <div class="text-muted">Nothing is currently being watched.</div><br>

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'),