Add blurhash user background for Most Active Users card

data/interfaces/default/base.html

@@ -311,6 +311,7 @@ ${next.modalIncludes()}
 <script src="${http_root}js/ipaddr.min.js"></script>
 <script src="${http_root}js/selectize.min.js"></script>
 <script src="${http_root}js/jquery.tripleclick.min.js"></script>
+<script src="${http_root}js/blurhash_pure_js_port.min.js"></script>
 <script src="${http_root}js/script.js${cache_param}"></script>
 <script src="${http_root}js/ajaxNotifications.js"></script>
 <script>

data/interfaces/default/home_stats.html

@@ -76,6 +76,8 @@ DOCUMENTATION :: END
         <div id="stats-background-${stat_id}" class="dashboard-stats-background" style="background-image: url(${page('pms_image_proxy', row0['art'], row0['rating_key'], 500, 280, 40, '282828', 3, fallback=fallback)});">
         % elif stat_id == 'top_libraries':
         <div id="stats-background-${stat_id}" class="dashboard-stats-background" style="background-image: url(${page('pms_image_proxy', row0['art'], None, 500, 280, 40, '282828', 3, fallback='art')});">
+        % elif stat_id == 'top_users':
+        <div id="stats-background-${stat_id}" class="dashboard-stats-background" data-blurhash="${page('pms_image_proxy', row0['user_thumb'] or 'interfaces/default/images/gravatar-default.png', None, 80, 80, 40, '282828', 0, fallback='user')}">
         % elif stat_id == 'top_platforms':
         <div id="stats-background-${stat_id}" class="dashboard-stats-background platform-${row0['platform_name']}-rgba no-image">
         % else:
@@ -113,7 +115,7 @@ DOCUMENTATION :: END
             % elif stat_id == 'top_users':
             <% user_href = page('user', row0['user_id']) if row0['user_id'] else '#' %>
             <a id="stats-thumb-url-${stat_id}" href="${user_href}" title="${row0['user']}" 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>
+                <div id="stats-thumb-${stat_id}" class="dashboard-stats-circle" style="background-image: url(${page('pms_image_proxy', row0['user_thumb'] or 'interfaces/default/images/gravatar-default.png', None, 80, 80, fallback='user')})"></div>
             </a>
             % elif stat_id == 'top_platforms':
             <div id="stats-thumb-${stat_id}" class="dashboard-stats-flat svg-icon platform-${row0['platform_name']} transparent hidden-xs"></div>

data/interfaces/default/index.html

@@ -778,6 +778,7 @@
 <script>
     function statsCardCallback() {
         $('.dashboard-stats-instance .dashboard-stats-info-scroller').scrollbar();
+        loadAllBlurHash();
 
         function changeImages(elem) {
             var stat_id = $(elem).data('stat_id');
@@ -811,7 +812,8 @@
                         .addClass('svg-icon library-' + library_type);
                 }
             } else if (stat_id === 'top_users') {
-                $('#stats-thumb-' + stat_id).css('background-image', 'url(' + (user_thumb || 'images/gravatar-default.png') + ')');
+                loadBlurHash($('#stats-background-' + stat_id), page('pms_image_proxy', user_thumb || 'interfaces/default/images/gravatar-default.png', null, 80, 80, 40, '282828', 0, 'user'));
+                $('#stats-thumb-' + stat_id).css('background-image', 'url(' + page('pms_image_proxy', user_thumb || 'interfaces/default/images/gravatar-default.png', null, 80, 80, null, null, null, 'user') + ')');
                 if (user_id) {
                     href = page('user', user_id);
                 }

data/interfaces/default/js/script.js

@@ -872,4 +872,40 @@ function short_season(title) {
         return 'S' + title.substring(7)
     }
     return title
-}
+}
+
+function loadAllBlurHash() {
+    $('[data-blurhash]').each(function() {
+        const elem = $(this);
+        const src = elem.data('blurhash');
+        loadBlurHash(elem, src);
+    });
+}
+
+function loadBlurHash(elem, src) {
+    const img = new Image();
+    img.src = src;
+    img.onload = () => {
+        const imgData = blurhash.getImageData(img);
+
+        blurhash
+            .encodePromise(imgData, img.width, img.height, 4, 4)
+            .then(hash => {
+                return blurhash.decodePromise(
+                    hash,
+                    img.width,
+                    img.height
+                );
+            })
+            .then(blurhashImgData => {
+                const imgObject = blurhash.getImageDataAsImage(
+                    blurhashImgData,
+                    img.width,
+                    img.height,
+                    (event, imgObject) => {
+                        elem.css('background-image', 'url(' + imgObject.src + ')')
+                    }
+                );
+            });
+    }
+}