github/plexpy
1
0
Fork 0
mirror of https://github.com/Tautulli/Tautulli.git synced 2025-07-07 05:31:15 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add blurhash user background for Most Active Users card

Browse source
This commit is contained in:
JonnyWong16 2021-03-19 11:10:30 -07:00
parent b19b9a70be
commit 74d6b18b47
No known key found for this signature in database
GPG key ID: B1F1F9807184697A
4 changed files with 44 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

1
data/interfaces/default/base.html
View file

@ -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>

4
data/interfaces/default/home_stats.html
View file

@ -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>

4
data/interfaces/default/index.html
View file

@ -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);
}

36
data/interfaces/default/js/script.js
View file

@ -873,3 +873,39 @@ function short_season(title) {
}
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 + ')')
}
);
});
}
}