mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Unminify using 1.5.323
Repo with tag: https://github.com/MediaBrowser/emby-webcomponents/tree/1.5.323
This commit is contained in:
Vasily
parent
4678528d00
commit
de6ac33ec1
289 changed files with 78483 additions and 54701 deletions
|
|
@ -1,18 +1,38 @@
|
|||
define(["dom"], function(dom) {
|
||||
"use strict";
|
||||
define(['dom'], function (dom) {
|
||||
'use strict';
|
||||
|
||||
function loadImage(elem, url) {
|
||||
return elem ? "IMG" !== elem.tagName ? (elem.style.backgroundImage = "url('" + url + "')", Promise.resolve()) : loadImageIntoImg(elem, url) : Promise.reject("elem cannot be null")
|
||||
|
||||
if (!elem) {
|
||||
return Promise.reject('elem cannot be null');
|
||||
}
|
||||
|
||||
if (elem.tagName !== "IMG") {
|
||||
|
||||
elem.style.backgroundImage = "url('" + url + "')";
|
||||
return Promise.resolve();
|
||||
|
||||
//return loadImageIntoImg(document.createElement('img'), url).then(function () {
|
||||
// elem.style.backgroundImage = "url('" + url + "')";
|
||||
// return Promise.resolve();
|
||||
//});
|
||||
|
||||
}
|
||||
return loadImageIntoImg(elem, url);
|
||||
}
|
||||
|
||||
function loadImageIntoImg(elem, url) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
dom.addEventListener(elem, "load", resolve, {
|
||||
once: !0
|
||||
}), elem.setAttribute("src", url)
|
||||
})
|
||||
return new Promise(function (resolve, reject) {
|
||||
|
||||
dom.addEventListener(elem, 'load', resolve, {
|
||||
once: true
|
||||
});
|
||||
elem.setAttribute("src", url);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
loadImage: loadImage
|
||||
}
|
||||
};
|
||||
|
||||
});
|
||||
|
|
@ -1,82 +1,255 @@
|
|||
define(["lazyLoader", "imageFetcher", "layoutManager", "browser", "appSettings", "require", "css!./style"], function(lazyLoader, imageFetcher, layoutManager, browser, appSettings, require) {
|
||||
"use strict";
|
||||
define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings', 'require', 'css!./style'], function (lazyLoader, imageFetcher, layoutManager, browser, appSettings, require) {
|
||||
'use strict';
|
||||
|
||||
var requestIdleCallback = window.requestIdleCallback || function (fn) {
|
||||
fn();
|
||||
};
|
||||
|
||||
var self = {};
|
||||
|
||||
// seeing slow performance with firefox
|
||||
var enableFade = false;
|
||||
|
||||
function fillImage(elem, source, enableEffects) {
|
||||
if (!elem) throw new Error("elem cannot be null");
|
||||
source || (source = elem.getAttribute("data-src")), source && fillImageElement(elem, source, enableEffects)
|
||||
|
||||
if (!elem) {
|
||||
throw new Error('elem cannot be null');
|
||||
}
|
||||
|
||||
if (!source) {
|
||||
source = elem.getAttribute('data-src');
|
||||
}
|
||||
|
||||
if (!source) {
|
||||
return;
|
||||
}
|
||||
|
||||
fillImageElement(elem, source, enableEffects);
|
||||
}
|
||||
|
||||
function fillImageElement(elem, source, enableEffects) {
|
||||
imageFetcher.loadImage(elem, source).then(function() {
|
||||
enableFade && !1 !== enableEffects && fadeIn(elem), elem.removeAttribute("data-src")
|
||||
})
|
||||
imageFetcher.loadImage(elem, source).then(function () {
|
||||
|
||||
var fillingVibrant = false;//fillVibrant(elem, source);
|
||||
|
||||
if (enableFade && enableEffects !== false && !fillingVibrant) {
|
||||
fadeIn(elem);
|
||||
}
|
||||
|
||||
elem.removeAttribute("data-src");
|
||||
});
|
||||
}
|
||||
|
||||
function fillVibrant(img, url, canvas, canvasContext) {
|
||||
|
||||
var vibrantElement = img.getAttribute('data-vibrant');
|
||||
if (!vibrantElement) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (window.Vibrant) {
|
||||
fillVibrantOnLoaded(img, url, vibrantElement, canvas, canvasContext);
|
||||
return true;
|
||||
}
|
||||
|
||||
require(['vibrant'], function () {
|
||||
fillVibrantOnLoaded(img, url, vibrantElement, canvas, canvasContext);
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
function fillVibrantOnLoaded(img, url, vibrantElement) {
|
||||
|
||||
vibrantElement = document.getElementById(vibrantElement);
|
||||
if (!vibrantElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
requestIdleCallback(function () {
|
||||
|
||||
//var now = new Date().getTime();
|
||||
getVibrantInfoFromElement(img, url).then(function (vibrantInfo) {
|
||||
|
||||
var swatch = vibrantInfo.split('|');
|
||||
//console.log('vibrant took ' + (new Date().getTime() - now) + 'ms');
|
||||
if (swatch.length) {
|
||||
|
||||
var index = 0;
|
||||
var style = vibrantElement.style;
|
||||
style.backgroundColor = swatch[index];
|
||||
style.color = swatch[index + 1];
|
||||
|
||||
var classList = vibrantElement.classList;
|
||||
|
||||
if (classList.contains('cardFooter')) {
|
||||
classList.add('cardFooter-vibrant');
|
||||
} else {
|
||||
classList.add('vibrant');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
/*
|
||||
* Results into:
|
||||
* Vibrant #7a4426
|
||||
* Muted #7b9eae
|
||||
* DarkVibrant #348945
|
||||
* DarkMuted #141414
|
||||
* LightVibrant #f3ccb4
|
||||
*/
|
||||
}
|
||||
|
||||
function getVibrantInfoFromElement(elem, url) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
require(["vibrant"], function() {
|
||||
if ("IMG" === elem.tagName) return void resolve(getVibrantInfo(elem, url));
|
||||
var img = new Image;
|
||||
img.onload = function() {
|
||||
resolve(getVibrantInfo(img, url))
|
||||
}, img.src = url
|
||||
})
|
||||
})
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
|
||||
require(['vibrant'], function () {
|
||||
|
||||
if (elem.tagName === 'IMG') {
|
||||
resolve(getVibrantInfo(elem, url));
|
||||
return;
|
||||
}
|
||||
|
||||
var img = new Image();
|
||||
img.onload = function () {
|
||||
resolve(getVibrantInfo(img, url));
|
||||
};
|
||||
img.src = url;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function getSettingsKey(url) {
|
||||
var parts = url.split("://");
|
||||
url = parts[parts.length - 1], url = url.substring(url.indexOf("/") + 1), url = url.split("?")[0];
|
||||
return "vibrant31" + url
|
||||
|
||||
var parts = url.split('://');
|
||||
url = parts[parts.length - 1];
|
||||
|
||||
url = url.substring(url.indexOf('/') + 1);
|
||||
|
||||
url = url.split('?')[0];
|
||||
|
||||
var cacheKey = 'vibrant31';
|
||||
//cacheKey = 'vibrant' + new Date().getTime();
|
||||
return cacheKey + url;
|
||||
}
|
||||
|
||||
function getCachedVibrantInfo(url) {
|
||||
return appSettings.get(getSettingsKey(url))
|
||||
|
||||
return appSettings.get(getSettingsKey(url));
|
||||
}
|
||||
|
||||
function getVibrantInfo(img, url) {
|
||||
|
||||
var value = getCachedVibrantInfo(url);
|
||||
if (value) return value;
|
||||
var vibrant = new Vibrant(img),
|
||||
swatches = vibrant.swatches();
|
||||
return value = "", value += getSwatchString(swatches.DarkVibrant), appSettings.set(getSettingsKey(url), value), value
|
||||
if (value) {
|
||||
return value;
|
||||
}
|
||||
|
||||
var vibrant = new Vibrant(img);
|
||||
var swatches = vibrant.swatches();
|
||||
|
||||
value = '';
|
||||
var swatch = swatches.DarkVibrant;
|
||||
value += getSwatchString(swatch);
|
||||
|
||||
appSettings.set(getSettingsKey(url), value);
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
function getSwatchString(swatch) {
|
||||
return swatch ? swatch.getHex() + "|" + swatch.getBodyTextColor() + "|" + swatch.getTitleTextColor() : "||"
|
||||
|
||||
if (swatch) {
|
||||
return swatch.getHex() + '|' + swatch.getBodyTextColor() + '|' + swatch.getTitleTextColor();
|
||||
}
|
||||
return '||';
|
||||
}
|
||||
|
||||
function fadeIn(elem) {
|
||||
elem.classList.add("lazy-image-fadein")
|
||||
|
||||
var cssClass = 'lazy-image-fadein';
|
||||
|
||||
elem.classList.add(cssClass);
|
||||
}
|
||||
|
||||
function lazyChildren(elem) {
|
||||
lazyLoader.lazyChildren(elem, fillImage)
|
||||
|
||||
lazyLoader.lazyChildren(elem, fillImage);
|
||||
}
|
||||
|
||||
function getPrimaryImageAspectRatio(items) {
|
||||
for (var values = [], i = 0, length = items.length; i < length; i++) {
|
||||
|
||||
var values = [];
|
||||
|
||||
for (var i = 0, length = items.length; i < length; i++) {
|
||||
|
||||
var ratio = items[i].PrimaryImageAspectRatio || 0;
|
||||
ratio && (values[values.length] = ratio)
|
||||
|
||||
if (!ratio) {
|
||||
continue;
|
||||
}
|
||||
|
||||
values[values.length] = ratio;
|
||||
}
|
||||
if (!values.length) return null;
|
||||
values.sort(function(a, b) {
|
||||
return a - b
|
||||
});
|
||||
var result, half = Math.floor(values.length / 2);
|
||||
result = values.length % 2 ? values[half] : (values[half - 1] + values[half]) / 2;
|
||||
if (Math.abs(2 / 3 - result) <= .15) return 2 / 3;
|
||||
if (Math.abs(16 / 9 - result) <= .2) return 16 / 9;
|
||||
if (Math.abs(1 - result) <= .15) return 1;
|
||||
return Math.abs(4 / 3 - result) <= .15 ? 4 / 3 : result
|
||||
|
||||
if (!values.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Use the median
|
||||
values.sort(function (a, b) { return a - b; });
|
||||
|
||||
var half = Math.floor(values.length / 2);
|
||||
|
||||
var result;
|
||||
|
||||
if (values.length % 2) {
|
||||
result = values[half];
|
||||
}
|
||||
else {
|
||||
result = (values[half - 1] + values[half]) / 2.0;
|
||||
}
|
||||
|
||||
// If really close to 2:3 (poster image), just return 2:3
|
||||
var aspect2x3 = 2 / 3;
|
||||
if (Math.abs(aspect2x3 - result) <= 0.15) {
|
||||
return aspect2x3;
|
||||
}
|
||||
|
||||
// If really close to 16:9 (episode image), just return 16:9
|
||||
var aspect16x9 = 16 / 9;
|
||||
if (Math.abs(aspect16x9 - result) <= 0.2) {
|
||||
return aspect16x9;
|
||||
}
|
||||
|
||||
// If really close to 1 (square image), just return 1
|
||||
if (Math.abs(1 - result) <= 0.15) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
// If really close to 4:3 (poster image), just return 2:3
|
||||
var aspect4x3 = 4 / 3;
|
||||
if (Math.abs(aspect4x3 - result) <= 0.15) {
|
||||
return aspect4x3;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
function fillImages(elems) {
|
||||
|
||||
for (var i = 0, length = elems.length; i < length; i++) {
|
||||
fillImage(elems[0])
|
||||
var elem = elems[0];
|
||||
fillImage(elem);
|
||||
}
|
||||
}
|
||||
var self = (window.requestIdleCallback, {}),
|
||||
enableFade = !1;
|
||||
return self.fillImages = fillImages, self.lazyImage = fillImage, self.lazyChildren = lazyChildren, self.getPrimaryImageAspectRatio = getPrimaryImageAspectRatio, self.getCachedVibrantInfo = getCachedVibrantInfo, self.getVibrantInfoFromElement = getVibrantInfoFromElement, self
|
||||
|
||||
self.fillImages = fillImages;
|
||||
self.lazyImage = fillImage;
|
||||
self.lazyChildren = lazyChildren;
|
||||
self.getPrimaryImageAspectRatio = getPrimaryImageAspectRatio;
|
||||
self.getCachedVibrantInfo = getCachedVibrantInfo;
|
||||
self.getVibrantInfoFromElement = getVibrantInfoFromElement;
|
||||
|
||||
return self;
|
||||
});
|
||||
|
|
@ -1,61 +1,47 @@
|
|||
.lazy-image-fadein {
|
||||
-webkit-animation: lazy-image-fadein 330ms ease-in normal both;
|
||||
animation: lazy-image-fadein 330ms ease-in normal both
|
||||
animation: lazy-image-fadein 330ms ease-in normal both;
|
||||
}
|
||||
|
||||
.lazy-image-fadein-fast {
|
||||
-webkit-animation: lazy-image-fadein 160ms ease-in normal both;
|
||||
animation: lazy-image-fadein 160ms ease-in normal both
|
||||
}
|
||||
|
||||
@-webkit-keyframes lazy-image-fadein {
|
||||
from {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1
|
||||
}
|
||||
animation: lazy-image-fadein 160ms ease-in normal both;
|
||||
}
|
||||
|
||||
@keyframes lazy-image-fadein {
|
||||
from {
|
||||
opacity: 0
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.lazy-image-fadein {
|
||||
opacity: 0;
|
||||
-webkit-animation-duration: .8s;
|
||||
-moz-animation-duration: .8s;
|
||||
-o-animation-duration: .8s;
|
||||
animation-duration: .8s;
|
||||
-webkit-animation-name: popInAnimation;
|
||||
-moz-animation-name: popInAnimation;
|
||||
-o-animation-name: popInAnimation;
|
||||
animation-name: popInAnimation;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
-o-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-timing-function: cubic-bezier(0, 0, .5, 1);
|
||||
animation-timing-function: cubic-bezier(0, 0, .5, 1)
|
||||
}
|
||||
|
||||
@-webkit-keyframes popInAnimation {
|
||||
0% {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1
|
||||
}
|
||||
-webkit-animation-timing-function: cubic-bezier(0,0,.5,1);
|
||||
-moz-animation-timing-function: cubic-bezier(0,0,.5,1);
|
||||
-o-animation-timing-function: cubic-bezier(0,0,.5,1);
|
||||
animation-timing-function: cubic-bezier(0,0,.5,1);
|
||||
}
|
||||
|
||||
@keyframes popInAnimation {
|
||||
0% {
|
||||
opacity: 0
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue