Add blur poster behind cover art

data/interfaces/default/css/plexpy.css

@@ -675,9 +675,7 @@ a .users-poster-face:hover {
     backface-visibility: hidden;
     z-index: -1;
 }
-.dashboard-activity-poster {
-    background-position: center;
-    background-size: cover;
+.dashboard-activity-poster-container {
     height: 225px;
     width: 150px;
     margin-right: 5px;
@@ -686,11 +684,33 @@ a .users-poster-face:hover {
     box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1);
     -webkit-flex-shrink: 0;
     flex-shrink: 0;
+    z-index: 1;
+}
+.dashboard-activity-poster {
+    background-position: center;
+    background-size: cover;
+    height: 225px;
+    width: 150px;
     -webkit-transition: background 1s linear;
     transition: background 1s linear;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
-    z-index: 1;
+    z-index: 2;
+}
+.dashboard-activity-poster-blur {
+    background-position: center;
+    background-size: cover;
+    height: 225px;
+    width: 150px;
+    -webkit-transition: background .2s ease-in-out;
+    transition: background .2s ease-in-out;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    opacity: 0.50;
+    -webkit-filter: blur(3px);
+    -moz-filter: blur(3px);
+    filter: blur(3px);
+    z-index: 2;
 }
 .dashboard-activity-cover {
     background-position: center;
@@ -698,17 +718,16 @@ a .users-poster-face:hover {
     height: 150px;
     width: 150px;
     margin-top: 37.5px;
-    margin-right: 5px;
     -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);
-    -webkit-flex-shrink: 0;
-    flex-shrink: 0;
     -webkit-transition: background 1s linear;
     transition: background 1s linear;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
-    z-index: 1;
+    position: absolute;
+    top: 0;
+    z-index: 3;
 }
 .dashboard-activity-info-icon {
     width: 50px;
@@ -1054,9 +1073,7 @@ a .dashboard-activity-metadata-user-thumb:hover {
 .dashboard-stats-background.flat {
     opacity: 1;
 }
-.dashboard-stats-poster {
-    background-position: center;
-    background-size: cover;
+.dashboard-stats-poster-container {
     height: 150px;
     width: 100px;
     margin-right: 5px;
@@ -1065,11 +1082,35 @@ a .dashboard-activity-metadata-user-thumb:hover {
     box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1);
     -webkit-flex-shrink: 0;
     flex-shrink: 0;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+}
+.dashboard-stats-poster {
+    background-position: center;
+    background-size: cover;
+    height: 150px;
+    width: 100px;
     -webkit-transition: background .2s ease-in-out;
     transition: background .2s ease-in-out;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
-    z-index: 1;
+    z-index: 2;
+}
+.dashboard-stats-poster-blur {
+    background-position: center;
+    background-size: cover;
+    height: 150px;
+    width: 100px;
+    -webkit-transition: background .2s ease-in-out;
+    transition: background .2s ease-in-out;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    opacity: 0.50;
+    -webkit-filter: blur(3px);
+    -moz-filter: blur(3px);
+    filter: blur(3px);
+    z-index: 2;
 }
 .dashboard-stats-cover {
     background-position: center;
@@ -1077,17 +1118,16 @@ a .dashboard-activity-metadata-user-thumb:hover {
     height: 100px;
     width: 100px;
     margin-top: 25px;
-    margin-right: 5px;
     -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);
-    -webkit-flex-shrink: 0;
-    flex-shrink: 0;
     -webkit-transition: background .2s ease-in-out;
     transition: background .2s ease-in-out;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
-    z-index: 1;
+    position: absolute;
+    top: 0;
+    z-index: 3;
 }
 .dashboard-stats-circle {
     background-position: center;

data/interfaces/default/current_activity_instance.html

@@ -82,31 +82,38 @@ DOCUMENTATION :: END
                 <div id="background-${sk}" class="dashboard-activity-background" style="background-image: url(pms_image_proxy?img=${quote(data['art'] or data['thumb'])}&width=500&height=280&fallback=art&refresh=true&clip=true);"></div>
                 % endif
             % endif
-            % if data['channel_stream'] == '0':
-                % if data['media_type'] == 'movie':
-                <a id="poster-url-${sk}" href="info?rating_key=${data['rating_key']}" title="${data['title']}" class="hidden-xs">
-                    <div id="poster-${sk}" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
-                </a>
-                % elif data['media_type'] == 'episode':
-                <a id="poster-url-${sk}" href="info?rating_key=${data['grandparent_rating_key']}" title="${data['grandparent_title']}" class="hidden-xs">
-                    <div id="poster-${sk}" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['grandparent_thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
-                </a>
-                % elif data['media_type'] == 'track':
-                <a id="poster-url-${sk}" href="info?rating_key=${data['parent_rating_key']}" title="${data['parent_title']}" class="hidden-xs">
-                    <div id="poster-${sk}" class="dashboard-activity-cover" style="background-image: url(pms_image_proxy?img=${data['parent_thumb']}&width=300&height=300&fallback=cover&refresh=true);"></div>
-                </a>
-                % elif data['media_type'] in ('photo', 'clip'):
-                <div id="poster-${sk}" class="dashboard-activity-poster hidden-xs" style="background-image: url(pms_image_proxy?img=${data['parent_thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
-                % else:
-                <div id="poster-${sk}" class="dashboard-activity-poster hidden-xs" style="background-image: url(images/art.png);"></div>
+            <div class="dashboard-activity-poster-container hidden-xs">
+                % if data['media_type'] == 'track':
+                <div id="poster-${sk}-bg" class="dashboard-activity-poster-blur" style="background-image: url(pms_image_proxy?img=${data['parent_thumb']}&width=300&height=300&fallback=cover&refresh=true);"></div>
                 % endif
-            % else:
-                % if data['channel_icon'].startswith('http'):
-                <div id="poster-${sk}" class="dashboard-activity-cover hidden-xs" style="background-image: url(${data['channel_icon']});"></div>
+                % if data['channel_stream'] == '0':
+                    % if data['media_type'] == 'movie':
+                    <a id="poster-url-${sk}" href="info?rating_key=${data['rating_key']}" title="${data['title']}">
+                        <div id="poster-${sk}" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
+                    </a>
+                    % elif data['media_type'] == 'episode':
+                    <a id="poster-url-${sk}" href="info?rating_key=${data['grandparent_rating_key']}" title="${data['grandparent_title']}">
+                        <div id="poster-${sk}" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['grandparent_thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
+                    </a>
+                    % elif data['media_type'] == 'track':
+                    <a id="poster-url-${sk}" href="info?rating_key=${data['parent_rating_key']}" title="${data['parent_title']}">
+                        <div id="poster-${sk}" class="dashboard-activity-cover" style="background-image: url(pms_image_proxy?img=${data['parent_thumb']}&width=300&height=300&fallback=cover&refresh=true);"></div>
+                    </a>
+                    % elif data['media_type'] in ('photo', 'clip'):
+                    <div id="poster-${sk}" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['parent_thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
+                    % else:
+                    <div id="poster-${sk}" class="dashboard-activity-poster" style="background-image: url(images/art.png);"></div>
+                    % endif
                 % else:
-               <div id="poster-${sk}" class="dashboard-activity-cover hidden-xs" style="background-image: url(pms_image_proxy?img=${data['channel_icon']}&width=300&height=300&fallback=cover&refresh=true);"></div>
+                    % if data['channel_icon'].startswith('http'):
+                    <div id="poster-${sk}" class="dashboard-activity-poster-blur" style="background-image: url(${data['channel_icon']});"></div>
+                    <div id="poster-${sk}" class="dashboard-activity-cover" style="background-image: url(${data['channel_icon']});"></div>
+                    % else:
+                    <div id="poster-${sk}" class="dashboard-activity-poster-blur" style="background-image: url(pms_image_proxy?img=${data['channel_icon']}&width=300&height=300&fallback=cover&refresh=true);"></div>
+                    <div id="poster-${sk}" class="dashboard-activity-cover" style="background-image: url(pms_image_proxy?img=${data['channel_icon']}&width=300&height=300&fallback=cover&refresh=true);"></div>
+                    % endif
                 % endif
-            % endif
+            </div>
             <div class="dashboard-activity-info-icon">
                 <%
                     if not _session['user_group'] == 'admin' or not data['session_id']:

data/interfaces/default/home_stats.html

@@ -84,14 +84,19 @@ DOCUMENTATION :: END
             <div id="stats-background-${stat_id}" class="dashboard-stats-background flat"></div>
             % endif
             % if stat_id in ('top_movies', 'popular_movies', 'top_tv', 'popular_tv', 'top_music', 'popular_music', 'last_watched'):
-            <a id="stats-thumb-url-${stat_id}" href="info?rating_key=${row0['rating_key']}" title="${row0['title']}" class="hidden-xs">
-                <% type = 'cover' if stat_id in ('top_music', 'popular_music') else 'poster' %>
-                % if row0['thumb']:
-                <div id="stats-thumb-${stat_id}" class="dashboard-stats-${type}" style="background-image: url(pms_image_proxy?img=${row0['thumb']}&width=300&height=300&fallback=${type});"></div>
-                % else:
-                <div id="stats-thumb-${stat_id}" class="dashboard-stats-${type}" style="background-image: url(images/${type}.png);"></div>
+            <div class="dashboard-stats-poster-container hidden-xs">
+                % if stat_id in ('top_music', 'popular_music'):
+                <div id="stats-thumb-${stat_id}-bg" class="dashboard-stats-poster-blur" style="background-image: url(pms_image_proxy?img=${row0['thumb']}&width=300&height=300&fallback=${type});"></div>
                 % endif
-            </a>
+                <a id="stats-thumb-url-${stat_id}" href="info?rating_key=${row0['rating_key']}" title="${row0['title']}">
+                    <% type = 'cover' if stat_id in ('top_music', 'popular_music') else 'poster' %>
+                    % if row0['thumb']:
+                    <div id="stats-thumb-${stat_id}" class="dashboard-stats-${type}" style="background-image: url(pms_image_proxy?img=${row0['thumb']}&width=300&height=300&fallback=${type});"></div>
+                    % else:
+                    <div id="stats-thumb-${stat_id}" class="dashboard-stats-${type}" style="background-image: url(images/${type}.png);"></div>
+                    % endif
+                </a>
+            </div>
             % elif stat_id == 'top_users':
             <a id="stats-thumb-url-${stat_id}" href="user?user_id=${row0['user_id']}" title="${row0['friendly_name']}" class="hidden-xs">
                 <div id="stats-thumb-${stat_id}" class="dashboard-stats-circle" style="background-image: url(${row0['user_thumb'] or 'images/gravatar-default.png'})"></div>
@@ -200,6 +205,7 @@ DOCUMENTATION :: END
             }
             if (thumb) {
                 $('#stats-thumb-' + stat_id).css('background-image', 'url(pms_image_proxy?img=' + thumb + '&width=300&height=' + height + '&fallback=' + fallback + ')');
+                $('#stats-thumb-' + stat_id + '-bg').css('background-image', 'url(pms_image_proxy?img=' + thumb + '&width=300&height=' + height + '&fallback=' + fallback + ')');
             } else {
                 $('#stats-background-' + stat_id).css('background-image', 'url(images/' + fallback + '.png)');
             }

data/interfaces/default/index.html

@@ -326,6 +326,7 @@
                             // Update cover if album changed
                             if (s.parent_rating_key != instance.data('parent_rating_key')) {
                                 $('#poster-' + key).css('background-image', 'url(pms_image_proxy?img=' + s.parent_thumb + '&width=300&height=300&fallback=poster&refresh=true)');
+                                $('#poster-' + key + '-bg').css('background-image', 'url(pms_image_proxy?img=' + s.parent_thumb + '&width=300&height=300&fallback=poster&refresh=true)');
                                 $('#poster-url-' + key)
                                     .attr('href', 'info?rating_key=' + s.parent_rating_key)
                                     .attr('title', s.parent_title);