mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
unify backdrops
This commit is contained in:
Luke Pulverenti
parent
ba749de15d
commit
aed49d567d
14 changed files with 420 additions and 296 deletions
115
dashboard-ui/scripts/autobackdrops.js
Normal file
115
dashboard-ui/scripts/autobackdrops.js
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
define(['backdrop', 'appStorage'], function (backdrop, appStorage) {
|
||||
|
||||
function isEnabledByDefault() {
|
||||
|
||||
if (AppInfo.hasLowImageBandwidth) {
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function enabled() {
|
||||
|
||||
var userId = Dashboard.getCurrentUserId();
|
||||
|
||||
var val = appStorage.getItem('enableBackdrops-' + userId);
|
||||
|
||||
// For bandwidth
|
||||
return val == '1' || (val != '0' && isEnabledByDefault());
|
||||
}
|
||||
|
||||
var cache = {};
|
||||
|
||||
function getBackdropItemIds(apiClient, userId, types, parentId) {
|
||||
|
||||
var key = 'backdrops2_' + userId + (types || '') + (parentId || '');
|
||||
|
||||
var data = cache[key];
|
||||
|
||||
if (data) {
|
||||
|
||||
console.log('Found backdrop id list in cache. Key: ' + key)
|
||||
data = JSON.parse(data);
|
||||
return Promise.resolve(data);
|
||||
} else {
|
||||
|
||||
var options = {
|
||||
|
||||
SortBy: "IsFavoriteOrLiked,Random",
|
||||
Limit: 20,
|
||||
Recursive: true,
|
||||
IncludeItemTypes: types,
|
||||
ImageTypes: "Backdrop",
|
||||
//Ids: "8114409aa00a2722456c08e298f90bed",
|
||||
ParentId: parentId
|
||||
};
|
||||
|
||||
return apiClient.getItems(Dashboard.getCurrentUserId(), options).then(function (result) {
|
||||
|
||||
var images = result.Items.map(function (i) {
|
||||
return {
|
||||
Id: i.Id,
|
||||
tag: i.BackdropImageTags[0],
|
||||
ServerId: i.ServerId
|
||||
};
|
||||
});
|
||||
|
||||
cache[key] = JSON.stringify(images);
|
||||
return images;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function showBackdrop(type, parentId) {
|
||||
|
||||
var apiClient = window.ApiClient;
|
||||
|
||||
if (!apiClient) {
|
||||
return;
|
||||
}
|
||||
|
||||
getBackdropItemIds(apiClient, Dashboard.getCurrentUserId(), type, parentId).then(function (images) {
|
||||
|
||||
if (images.length) {
|
||||
|
||||
backdrop.setBackdrops(images.map(function (i) {
|
||||
i.BackdropImageTags = [i.tag];
|
||||
return i;
|
||||
}));
|
||||
|
||||
} else {
|
||||
|
||||
backdrop.clear();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
pageClassOn('pagebeforeshow', "page", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
// These pages self-manage their backdrops
|
||||
if (page.classList.contains('selfBackdropPage')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (page.classList.contains('backdropPage')) {
|
||||
|
||||
if (enabled()) {
|
||||
var type = page.getAttribute('data-backdroptype');
|
||||
|
||||
var parentId = page.classList.contains('globalBackdropPage') ? '' : LibraryMenu.getTopParentId();
|
||||
showBackdrop(type, parentId);
|
||||
|
||||
} else {
|
||||
page.classList.remove('backdropPage');
|
||||
backdrop.clear();
|
||||
}
|
||||
} else {
|
||||
backdrop.clear();
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
|
@ -1,249 +0,0 @@
|
|||
define(['appStorage'], function (appStorage) {
|
||||
|
||||
var pageBackgroundCreated;
|
||||
|
||||
function getElement() {
|
||||
|
||||
//var elem = $('.backdropContainer');
|
||||
|
||||
//if (!elem.length) {
|
||||
|
||||
// elem = $('<div class="backdropContainer"></div>').prependTo(document.body);
|
||||
//}
|
||||
|
||||
var elem = document.documentElement;
|
||||
|
||||
elem.classList.add('backdropContainer');
|
||||
elem.classList.add('noFade');
|
||||
|
||||
if (!pageBackgroundCreated) {
|
||||
pageBackgroundCreated = true;
|
||||
var div = document.createElement('div');
|
||||
div.classList.add('pageBackground');
|
||||
document.body.insertBefore(div, document.body.firstChild);
|
||||
}
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
||||
function clearBackdrop() {
|
||||
|
||||
var elem = document.documentElement;
|
||||
elem.classList.remove('backdropContainer');
|
||||
elem.removeAttribute('data-url');
|
||||
elem.style.backgroundImage = '';
|
||||
}
|
||||
|
||||
function getRandom(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
var cache = {};
|
||||
|
||||
function getBackdropItemIds(apiClient, userId, types, parentId) {
|
||||
|
||||
var key = 'backdrops2_' + userId + (types || '') + (parentId || '');
|
||||
|
||||
var deferred = $.Deferred();
|
||||
|
||||
var data = cache[key];
|
||||
|
||||
if (data) {
|
||||
|
||||
console.log('Found backdrop id list in cache. Key: ' + key)
|
||||
data = JSON.parse(data);
|
||||
deferred.resolveWith(null, [data]);
|
||||
} else {
|
||||
|
||||
var options = {
|
||||
|
||||
SortBy: "IsFavoriteOrLiked,Random",
|
||||
Limit: 20,
|
||||
Recursive: true,
|
||||
IncludeItemTypes: types,
|
||||
ImageTypes: "Backdrop",
|
||||
//Ids: "8114409aa00a2722456c08e298f90bed",
|
||||
ParentId: parentId
|
||||
};
|
||||
|
||||
apiClient.getItems(Dashboard.getCurrentUserId(), options).then(function (result) {
|
||||
|
||||
var images = result.Items.map(function (i) {
|
||||
return {
|
||||
id: i.Id,
|
||||
tag: i.BackdropImageTags[0]
|
||||
};
|
||||
});
|
||||
|
||||
cache[key] = JSON.stringify(images);
|
||||
deferred.resolveWith(null, [images]);
|
||||
});
|
||||
}
|
||||
|
||||
return deferred.promise();
|
||||
}
|
||||
|
||||
function setBackdropImage(elem, url) {
|
||||
|
||||
if (url == elem.getAttribute('data-url')) {
|
||||
return;
|
||||
}
|
||||
|
||||
elem.setAttribute('data-url', url);
|
||||
ImageLoader.lazyImage(elem, url);
|
||||
}
|
||||
|
||||
function showBackdrop(type, parentId) {
|
||||
|
||||
var apiClient = window.ApiClient;
|
||||
|
||||
if (!apiClient) {
|
||||
return;
|
||||
}
|
||||
|
||||
getBackdropItemIds(apiClient, Dashboard.getCurrentUserId(), type, parentId).then(function (images) {
|
||||
|
||||
if (images.length) {
|
||||
|
||||
var index = getRandom(0, images.length - 1);
|
||||
var item = images[index];
|
||||
|
||||
var screenWidth = $(window).width();
|
||||
|
||||
var imgUrl = apiClient.getScaledImageUrl(item.id, {
|
||||
type: "Backdrop",
|
||||
tag: item.tag,
|
||||
maxWidth: screenWidth,
|
||||
quality: 50
|
||||
});
|
||||
|
||||
setBackdropImage(getElement(), imgUrl);
|
||||
|
||||
} else {
|
||||
|
||||
clearBackdrop();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setDefault(page) {
|
||||
|
||||
var elem = getElement();
|
||||
elem.style.backgroundImage = "url(css/images/splash.jpg)";
|
||||
elem.setAttribute('data-url', 'css/images/splash.jpg');
|
||||
page = $(page)[0];
|
||||
page.classList.add('backdropPage');
|
||||
page.classList.add('staticBackdropPage');
|
||||
}
|
||||
|
||||
function isEnabledByDefault() {
|
||||
|
||||
if (AppInfo.hasLowImageBandwidth) {
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function enabled() {
|
||||
|
||||
var userId = Dashboard.getCurrentUserId();
|
||||
|
||||
var val = appStorage.getItem('enableBackdrops-' + userId);
|
||||
|
||||
// For bandwidth
|
||||
return val == '1' || (val != '0' && isEnabledByDefault());
|
||||
}
|
||||
|
||||
function setBackdrops(page, items) {
|
||||
|
||||
var images = items.map(function (i) {
|
||||
|
||||
if (i.BackdropImageTags.length > 0) {
|
||||
return {
|
||||
id: i.Id,
|
||||
tag: i.BackdropImageTags[0]
|
||||
};
|
||||
}
|
||||
|
||||
if (i.ParentBackdropItemId && i.ParentBackdropImageTags && i.ParentBackdropImageTags.length) {
|
||||
|
||||
return {
|
||||
id: i.ParentBackdropItemId,
|
||||
tag: i.ParentBackdropImageTags[0]
|
||||
};
|
||||
}
|
||||
return null;
|
||||
|
||||
}).filter(function (i) {
|
||||
return i != null;
|
||||
});
|
||||
|
||||
if (images.length) {
|
||||
page.classList.add('backdropPage');
|
||||
|
||||
var index = getRandom(0, images.length - 1);
|
||||
var item = images[index];
|
||||
|
||||
var screenWidth = $(window).width();
|
||||
|
||||
var imgUrl = ApiClient.getScaledImageUrl(item.id, {
|
||||
type: "Backdrop",
|
||||
tag: item.tag,
|
||||
maxWidth: screenWidth,
|
||||
quality: 50
|
||||
});
|
||||
|
||||
setBackdropImage(getElement(), imgUrl);
|
||||
|
||||
} else {
|
||||
page.classList.remove('backdropPage');
|
||||
}
|
||||
}
|
||||
|
||||
function setBackdropUrl(page, url) {
|
||||
|
||||
if (url) {
|
||||
page.classList.add('backdropPage');
|
||||
|
||||
setBackdropImage(getElement(), url);
|
||||
|
||||
} else {
|
||||
page.classList.remove('backdropPage');
|
||||
clearBackdrop();
|
||||
}
|
||||
}
|
||||
|
||||
pageClassOn('pagebeforeshow', "page", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
if (page.classList.contains('backdropPage')) {
|
||||
|
||||
if (enabled()) {
|
||||
var type = page.getAttribute('data-backdroptype');
|
||||
|
||||
var parentId = page.classList.contains('globalBackdropPage') ? '' : LibraryMenu.getTopParentId();
|
||||
|
||||
showBackdrop(type, parentId);
|
||||
|
||||
} else {
|
||||
page.classList.remove('backdropPage');
|
||||
clearBackdrop();
|
||||
}
|
||||
} else {
|
||||
clearBackdrop();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
window.Backdrops = {
|
||||
|
||||
setBackdrops: setBackdrops,
|
||||
setBackdropUrl: setBackdropUrl,
|
||||
setDefault: setDefault,
|
||||
clear: clearBackdrop
|
||||
};
|
||||
|
||||
});
|
||||
|
|
@ -73,7 +73,9 @@
|
|||
// For these types, make the backdrop a little smaller so that the items are more quickly accessible
|
||||
if (item.Type == 'MusicArtist' || item.Type == "MusicAlbum" || item.Type == "Playlist" || item.Type == "BoxSet" || item.Type == "Audio") {
|
||||
$('#itemBackdrop', page).addClass('noBackdrop').css('background-image', 'none');
|
||||
Backdrops.setBackdrops(page, [item]);
|
||||
require(['backdrop'], function (backdrop) {
|
||||
backdrop.setBackdrops([item]);
|
||||
});
|
||||
}
|
||||
else {
|
||||
//$('#itemBackdrop', page).addClass('noBackdrop').css('background-image', 'none');
|
||||
|
|
|
|||
|
|
@ -1767,6 +1767,8 @@ var AppInfo = {};
|
|||
define("actionsheet", [embyWebComponentsBowerPath + "/actionsheet/actionsheet"], returnFirstDependency);
|
||||
}
|
||||
|
||||
define("backdrop", [embyWebComponentsBowerPath + "/backdrop/backdrop"], returnFirstDependency);
|
||||
|
||||
// hack for an android test before browserInfo is loaded
|
||||
if (Dashboard.isRunningInCordova() && window.MainActivity) {
|
||||
paths.appStorage = "cordova/android/appstorage";
|
||||
|
|
@ -2242,7 +2244,6 @@ var AppInfo = {};
|
|||
|
||||
deps.push('scripts/search');
|
||||
deps.push('scripts/librarylist');
|
||||
deps.push('scripts/backdrops');
|
||||
deps.push('scripts/librarymenu');
|
||||
deps.push('scripts/librarybrowser');
|
||||
deps.push('jqm');
|
||||
|
|
@ -2262,6 +2263,7 @@ var AppInfo = {};
|
|||
postInitDependencies.push('scripts/remotecontrol');
|
||||
postInitDependencies.push('css!css/notifications.css');
|
||||
postInitDependencies.push('css!css/chromecast.css');
|
||||
postInitDependencies.push('scripts/autobackdrops');
|
||||
|
||||
if (Dashboard.isRunningInCordova()) {
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue