mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Add a toggle for blurhash

Browse source
This commit is contained in:
ferferga 2020-05-30 16:44:33 +02:00
parent 2a0f971e76
commit 7169d8494d
6 changed files with 59 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/displaySettings/displaySettings.js
View file

@ -181,6 +181,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
context.querySelector('#chkThemeSong').checked = userSettings.enableThemeSongs();
context.querySelector('#chkThemeVideo').checked = userSettings.enableThemeVideos();
context.querySelector('#chkFadein').checked = userSettings.enableFastFadein();
context.querySelector('#chkBlurhash').checked = userSettings.enableBlurhash();
context.querySelector('#chkBackdrops').checked = userSettings.enableBackdrops();
context.querySelector('#chkDetailsBanner').checked = userSettings.detailsBanner();
@ -223,6 +224,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
userSettingsInstance.skin(context.querySelector('.selectSkin').value);
userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked);
userSettingsInstance.enableBlurhash(context.querySelector('#chkBlurhash').checked);
userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked);
userSettingsInstance.detailsBanner(context.querySelector('#chkDetailsBanner').checked);

11
src/components/displaySettings/displaySettings.template.html
View file

@ -143,12 +143,12 @@
<select is="emby-select" class="selectSoundEffects" label="${LabelSoundEffects}"></select>
</div>
<div class="inputContainer inputContainer-withDescription fldFadein">
<div class="inputContainer inputContainer-withDescription">
<input is="emby-input" type="number" id="txtLibraryPageSize" pattern="[0-9]*" required="required" min="0" max="1000" step="1" label="${LabelLibraryPageSize}" />
<div class="fieldDescription">${LabelLibraryPageSizeHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription fldFadein">
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkFadein" />
<span>${EnableFastImageFadeIn}</span>
@ -156,14 +156,15 @@
<div class="fieldDescription checkboxFieldDescription">${EnableFastImageFadeInHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription fldFadein">
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkFadein" />
<input type="checkbox" is="emby-checkbox" id="chkBlurhash" />
<span>${EnableBlurhash}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${EnableBlurhashHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription fldDetailsBanner">
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input type="checkbox" is="emby-checkbox" id="chkDetailsBanner" />
<span>${EnableDetailsBanner}</span>

32
src/components/images/imageLoader.js
View file

@ -69,8 +69,10 @@ import 'css!./style';
source = entry;
}
if (!target.classList.contains('blurhashed')) {
if (!target.classList.contains('blurhashed') && userSettings.enableBlurhash()) {
itemBlurhashing(target);
} else if (!userSettings.enableBlurhash()) {
target.classList.add('lazy-hidden');
}
if (entry.intersectionRatio > 0) {
@ -88,15 +90,26 @@ import 'css!./style';
let preloaderImg = new Image();
preloaderImg.src = url;
if (!userSettings.enableBlurhash()) elem.classList.add('lazy-hidden');
preloaderImg.addEventListener('load', () => {
if (elem.tagName !== 'IMG') {
elem.style.backgroundImage = "url('" + url + "')";
} else {
elem.setAttribute('src', url);
}
elem.removeAttribute('data-src');
switchCanvas(elem);
if (userSettings.enableBlurhash()) {
switchCanvas(elem);
} else {
elem.classList.remove('lazy-hidden');
if (userSettings.enableFastFadein()) {
elem.classList.add('lazy-image-fadein-fast');
} else {
elem.classList.add('lazy-image-fadein');
}
}
});
}
@ -110,9 +123,18 @@ import 'css!./style';
url = elem.getAttribute('src');
elem.setAttribute('src', '');
}
elem.setAttribute('data-src', url);
switchCanvas(elem);
if (userSettings.enableBlurhash()) {
switchCanvas(elem);
} else {
if (userSettings.enableFastFadein()) {
elem.classList.remove('lazy-image-fadein-fast');
} else {
elem.classList.remove('lazy-image-fadein');
}
elem.classList.add('lazy-hidden');
}
}
export function lazyChildren(elem) {

14
src/components/images/style.css
View file

@ -1,3 +1,17 @@
.lazy-image-fadein {
opacity: 1;
transition: opacity 0.7s;
}
.lazy-image-fadein-fast {
opacity: 1;
transition: opacity 0.2s;
}
.lazy-hidden {
opacity: 0;
}
.lazy-blurhash-fadein-fast {
transition: opacity 0.2s;
}