milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

update playlist content

Browse source
This commit is contained in:
Luke Pulverenti 2016-10-12 14:23:09 -04:00
parent a511a2fa84
commit d08286c538
24 changed files with 1115 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

147
dashboard-ui/bower_components/emby-webcomponents/images/imagehelper.js vendored
View file

@ -1,8 +1,15 @@
define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser', 'dom', 'appSettings'], function (visibleinviewport, imageFetcher, layoutManager, events, browser, dom, appSettings) {
define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser', 'dom', 'appSettings', 'require'], function (visibleinviewport, imageFetcher, layoutManager, events, browser, dom, appSettings, require) {
'use strict';
var thresholdX;
var thresholdY;
var requestIdleCallback = window.requestIdleCallback || function (fn) {
fn();
};
//var imagesWorker = new Worker(require.toUrl('.').split('?')[0] + '/imagesworker.js');
var supportsIntersectionObserver = function () {
if (window.IntersectionObserver) {
@ -19,8 +26,8 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
var y = screen.availHeight;
if (browser.touch) {
x *= 2;
y *= 2;
x *= 1.5;
y *= 1.5;
}
thresholdX = x;
@ -48,26 +55,72 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
source = elem.getAttribute('data-src');
}
if (source) {
imageFetcher.loadImage(elem, source).then(function () {
var fillingVibrant = fillVibrant(elem, source);
if (enableFade && !layoutManager.tv && enableEffects !== false && !fillingVibrant) {
fadeIn(elem);
}
elem.removeAttribute("data-src");
});
if (!source) {
return;
}
fillImageElement(elem, source, enableEffects);
}
function fillVibrant(img, url) {
function fillImageElement(elem, source, enableEffects) {
imageFetcher.loadImage(elem, source).then(function () {
if (img.tagName != 'IMG') {
return false;
}
var fillingVibrant = elem.tagName !== 'IMG' ? false : fillVibrant(elem, source);
if (enableFade && !layoutManager.tv && enableEffects !== false && !fillingVibrant) {
fadeIn(elem);
}
elem.removeAttribute("data-src");
});
}
//var placeholder = document.createElement('div');
//imagesWorker.onmessage = function (evt) {
// placeholder.dispatchEvent(new CustomEvent('decoded', {
// detail: evt.data,
// bubbles: false,
// cancellable: false
// }));
//};
//var uniqueId = 0;
//function fillCanvas(elem, source) {
// var newUniqueId = (++uniqueId);
// imagesWorker.postMessage({
// url: source,
// id: newUniqueId
// });
// placeholder.addEventListener('decoded', function (e) {
// if (e.detail.id == newUniqueId) {
// var imageBitmap = e.detail.imageBitmap;
// var canvas = document.createElement('canvas');
// var canvasContext = canvas.getContext('2d');
// //drawWidth *= ratio;
// //drawHeight *= ratio;
// // https://stackoverflow.com/questions/21961839/simulation-background-size-cover-in-canvas/21961894#21961894
// canvasContext.imageSmoothingEnabled = false;
// var width = canvas.width = elem.offsetWidth;
// var height = canvas.height = elem.offsetHeight;
// canvasContext.drawImage(imageBitmap, 0, 0, imageBitmap.width, imageBitmap.height, 0, 0, width, height);
// fillVibrant(elem, source, canvas, canvasContext);
// elem.insertBefore(canvas, elem.firstChild);
// elem.removeAttribute("data-src");
// }
// });
//}
function fillVibrant(img, url, canvas, canvasContext) {
var vibrantElement = img.getAttribute('data-vibrant');
if (!vibrantElement) {
@ -75,30 +128,35 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
}
if (window.Vibrant) {
fillVibrantOnLoaded(img, url, vibrantElement);
fillVibrantOnLoaded(img, url, vibrantElement, canvas, canvasContext);
return true;
}
require(['vibrant'], function () {
fillVibrantOnLoaded(img, url, vibrantElement);
fillVibrantOnLoaded(img, url, vibrantElement, canvas, canvasContext);
});
return true;
}
function fillVibrantOnLoaded(img, url, vibrantElement) {
function fillVibrantOnLoaded(img, url, vibrantElement, canvas, canvasContext) {
vibrantElement = document.getElementById(vibrantElement);
if (!vibrantElement) {
return;
}
var swatch = getVibrantInfo(img, url).split('|');
if (swatch.length) {
requestIdleCallback(function () {
var index = 0;
vibrantElement.style['backgroundColor'] = swatch[index];
vibrantElement.style['color'] = swatch[index + 1];
}
//var now = new Date().getTime();
var swatch = getVibrantInfo(canvas || img, url, canvasContext).split('|');
//console.log('vibrant took ' + (new Date().getTime() - now) + 'ms');
if (swatch.length) {
var index = 0;
vibrantElement.style.backgroundColor = swatch[index];
vibrantElement.style.color = swatch[index + 1];
}
});
/*
* Results into:
* Vibrant #7a4426
@ -118,7 +176,8 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
url = url.split('?')[0];
return 'vibrant5-' + url;
var cacheKey = 'vibrant8';
return cacheKey + url;
}
function getCachedVibrantInfo(url) {
@ -126,43 +185,41 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
return appSettings.get(getSettingsKey(url));
}
function getVibrantInfo(img, url) {
function getVibrantInfo(img, url, canvasContext) {
var value = getCachedVibrantInfo(url);
if (value) {
return value;
}
var vibrant = new Vibrant(img);
var vibrant = new Vibrant(img, canvasContext);
var swatches = vibrant.swatches();
value = '';
var swatch = swatches['DarkVibrant'];
var swatch = swatches.DarkVibrant;
if (swatch) {
value += swatch.getHex() + '|' + swatch.getBodyTextColor();
}
swatch = swatches['DarkMuted'];
swatch = swatches.DarkMuted;
if (swatch) {
value += '|' + swatch.getHex() + '|' + swatch.getBodyTextColor();
} else {
value += '||';
}
swatch = swatches['Vibrant'];
swatch = swatches.Vibrant;
if (swatch) {
value += '|' + swatch.getHex() + '|' + swatch.getBodyTextColor();
} else {
value += '||';
}
swatch = swatches['Muted'];
swatch = swatches.Muted;
if (swatch) {
value += '|' + swatch.getHex() + '|' + swatch.getBodyTextColor();
} else {
value += '||';
}
if (value) {
appSettings.set(getSettingsKey(url), value);
}
appSettings.set(getSettingsKey(url), value);
return value;
}
@ -335,31 +392,33 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
var result;
if (values.length % 2)
if (values.length % 2) {
result = values[half];
else
}
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) <= .15) {
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) <= .2) {
if (Math.abs(aspect16x9 - result) <= 0.2) {
return aspect16x9;
}
// If really close to 1 (square image), just return 1
if (Math.abs(1 - result) <= .15) {
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) <= .15) {
if (Math.abs(aspect4x3 - result) <= 0.15) {
return aspect4x3;
}