mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update detail images
This commit is contained in:
parent
95a647e0df
commit
a0b6f768b3
14 changed files with 112 additions and 73 deletions
|
@ -315,7 +315,7 @@
|
|||
function renderDetails(page, item, context) {
|
||||
|
||||
//LibraryBrowser.renderDetailPageBackdrop(page, item);
|
||||
LibraryBrowser.renderOverview($('.itemOverview', page), item);
|
||||
LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), item);
|
||||
|
||||
renderUserDataIcons(page, item);
|
||||
LibraryBrowser.renderLinks($('#itemLinks', page), item);
|
||||
|
|
|
@ -123,7 +123,7 @@
|
|||
|
||||
var imageHref = user.Policy.IsAdministrator && item.MediaType != 'Photo' ? "edititemimages.html?id=" + item.Id : "";
|
||||
|
||||
LibraryBrowser.renderDetailImage($('.detailImageContainer', page), item, imageHref);
|
||||
LibraryBrowser.renderDetailImage(page.querySelector('.detailImageContainer'), item, imageHref);
|
||||
}
|
||||
|
||||
function onWebSocketMessage(e, data) {
|
||||
|
@ -362,7 +362,7 @@
|
|||
$('#itemTagline', page).hide();
|
||||
}
|
||||
|
||||
LibraryBrowser.renderOverview($('.itemOverview', page), item);
|
||||
LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), item);
|
||||
|
||||
$('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(item));
|
||||
|
||||
|
|
|
@ -2660,40 +2660,51 @@
|
|||
|
||||
html += "</div>";
|
||||
|
||||
elem.html(html);
|
||||
elem.innerHTML = html;
|
||||
|
||||
function addClass(elems, name) {
|
||||
for (var i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].classList.add(name);
|
||||
}
|
||||
}
|
||||
function removeClass(elems, name) {
|
||||
for (var i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].classList.remove(name);
|
||||
}
|
||||
}
|
||||
|
||||
var page = $(elem).parents('.page')[0];
|
||||
|
||||
var detailContentEffectedByImage = page.querySelector('.detailContentEffectedByImage');
|
||||
var detailContentEffectedByImage = page.querySelectorAll('.detailContentEffectedByImage');
|
||||
|
||||
if (shape == 'thumb') {
|
||||
detailContentEffectedByImage.classList.add('detailContentEffectedByThumbImage');
|
||||
detailContentEffectedByImage.classList.remove('detailContentEffectedBySquareImage');
|
||||
detailContentEffectedByImage.classList.remove('detailContentEffectedByPortraitImage');
|
||||
addClass(detailContentEffectedByImage, 'detailContentEffectedByThumbImage');
|
||||
removeClass(detailContentEffectedByImage, 'detailContentEffectedBySquareImage');
|
||||
removeClass(detailContentEffectedByImage, 'detailContentEffectedByPortraitImage');
|
||||
|
||||
elem.addClass('thumbDetailImageContainer');
|
||||
elem.removeClass('portraitDetailImageContainer');
|
||||
elem.removeClass('squareDetailImageContainer');
|
||||
elem.classList.add('thumbDetailImageContainer');
|
||||
elem.classList.add('portraitDetailImageContainer');
|
||||
elem.classList.add('squareDetailImageContainer');
|
||||
}
|
||||
else if (shape == 'square') {
|
||||
detailContentEffectedByImage.classList.remove('detailContentEffectedByThumbImage');
|
||||
detailContentEffectedByImage.classList.add('detailContentEffectedBySquareImage');
|
||||
detailContentEffectedByImage.classList.remove('detailContentEffectedByPortraitImage');
|
||||
removeClass(detailContentEffectedByImage, 'detailContentEffectedByThumbImage');
|
||||
removeClass(detailContentEffectedByImage, 'detailContentEffectedByPortraitImage');
|
||||
addClass(detailContentEffectedByImage, 'detailContentEffectedBySquareImage');
|
||||
|
||||
elem.removeClass('thumbDetailImageContainer');
|
||||
elem.removeClass('portraitDetailImageContainer');
|
||||
elem.addClass('squareDetailImageContainer');
|
||||
elem.classList.add('thumbDetailImageContainer');
|
||||
elem.classList.add('portraitDetailImageContainer');
|
||||
elem.classList.add('squareDetailImageContainer');
|
||||
} else {
|
||||
detailContentEffectedByImage.classList.remove('detailContentEffectedByThumbImage');
|
||||
detailContentEffectedByImage.classList.remove('detailContentEffectedBySquareImage');
|
||||
detailContentEffectedByImage.classList.add('detailContentEffectedByPortraitImage');
|
||||
removeClass(detailContentEffectedByImage, 'detailContentEffectedByThumbImage');
|
||||
removeClass(detailContentEffectedByImage, 'detailContentEffectedBySquareImage');
|
||||
addClass(detailContentEffectedByImage, 'detailContentEffectedByPortraitImage');
|
||||
|
||||
elem.removeClass('thumbDetailImageContainer');
|
||||
elem.addClass('portraitDetailImageContainer');
|
||||
elem.removeClass('squareDetailImageContainer');
|
||||
elem.classList.add('thumbDetailImageContainer');
|
||||
elem.classList.add('portraitDetailImageContainer');
|
||||
elem.classList.remove('squareDetailImageContainer');
|
||||
}
|
||||
|
||||
elem.lazyChildren();
|
||||
ImageLoader.lazyChildren(elem);
|
||||
},
|
||||
|
||||
getDisplayTime: function (date) {
|
||||
|
@ -2869,7 +2880,6 @@
|
|||
|
||||
var overview = item.Overview || '';
|
||||
|
||||
elem = elem[0];
|
||||
elem.innerHTML = overview;
|
||||
|
||||
$('a', elem).each(function () {
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
$('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(program));
|
||||
|
||||
LibraryBrowser.renderGenres($('.itemGenres', page), program, context);
|
||||
LibraryBrowser.renderOverview($('.itemOverview', page), program);
|
||||
LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), program);
|
||||
|
||||
$('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(program));
|
||||
|
||||
|
|
|
@ -45,7 +45,7 @@
|
|||
$('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item));
|
||||
|
||||
LibraryBrowser.renderGenres($('.itemGenres', page), item, context);
|
||||
LibraryBrowser.renderOverview($('.itemOverview', page), item);
|
||||
LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), item);
|
||||
$('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
|
||||
|
||||
LiveTvHelpers.renderMiscProgramInfo($('.miscTvProgramInfo', page), item);
|
||||
|
|
|
@ -50,7 +50,7 @@
|
|||
$('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item));
|
||||
|
||||
LibraryBrowser.renderGenres($('.itemGenres', page), item, context);
|
||||
LibraryBrowser.renderOverview($('.itemOverview', page), item);
|
||||
LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), item);
|
||||
$('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
|
||||
|
||||
LiveTvHelpers.renderMiscProgramInfo($('.miscTvProgramInfo', page), item);
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
$('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(programInfo));
|
||||
|
||||
LibraryBrowser.renderGenres($('.itemGenres', page), programInfo, context);
|
||||
LibraryBrowser.renderOverview($('.itemOverview', page), programInfo);
|
||||
LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), programInfo);
|
||||
|
||||
if (programInfo.ImageTags && programInfo.ImageTags.Primary) {
|
||||
|
||||
|
|
|
@ -32,7 +32,8 @@
|
|||
|
||||
ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).done(function (items) {
|
||||
|
||||
$('#recentlyAddedSongs', page).html(LibraryBrowser.getPosterViewHtml({
|
||||
var elem = page.querySelector('#recentlyAddedSongs');
|
||||
elem.innerHTML = LibraryBrowser.getPosterViewHtml({
|
||||
items: items,
|
||||
showUnplayedIndicator: false,
|
||||
showLatestItemsPopup: false,
|
||||
|
@ -42,7 +43,8 @@
|
|||
lazy: true,
|
||||
cardLayout: true
|
||||
|
||||
})).lazyChildren();
|
||||
});
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
|
@ -66,13 +68,16 @@
|
|||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
|
||||
|
||||
var elem;
|
||||
|
||||
if (result.Items.length) {
|
||||
$('#recentlyPlayed', page).show();
|
||||
elem = $('#recentlyPlayed', page).show()[0];
|
||||
} else {
|
||||
$('#recentlyPlayed', page).hide();
|
||||
elem = $('#recentlyPlayed', page).hide()[0];
|
||||
}
|
||||
|
||||
$('#recentlyPlayedSongs', page).html(LibraryBrowser.getPosterViewHtml({
|
||||
var itemsContainer = elem.querySelector('.itemsContainer');
|
||||
itemsContainer.innerHTML = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
showUnplayedIndicator: false,
|
||||
shape: getSquareShape(),
|
||||
|
@ -82,7 +87,8 @@
|
|||
lazy: true,
|
||||
cardLayout: true
|
||||
|
||||
})).lazyChildren();
|
||||
});
|
||||
ImageLoader.lazyChildren(itemsContainer);
|
||||
|
||||
});
|
||||
|
||||
|
@ -106,13 +112,16 @@
|
|||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
|
||||
|
||||
var elem;
|
||||
|
||||
if (result.Items.length) {
|
||||
$('#topPlayed', page).show();
|
||||
elem = $('#topPlayed', page).show()[0];
|
||||
} else {
|
||||
$('#topPlayed', page).hide();
|
||||
elem = $('#topPlayed', page).hide()[0];
|
||||
}
|
||||
|
||||
$('#topPlayedSongs', page).html(LibraryBrowser.getPosterViewHtml({
|
||||
var itemsContainer = elem.querySelector('.itemsContainer');
|
||||
itemsContainer.innerHTML = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
showUnplayedIndicator: false,
|
||||
shape: getSquareShape(),
|
||||
|
@ -122,7 +131,8 @@
|
|||
lazy: true,
|
||||
cardLayout: true
|
||||
|
||||
})).lazyChildren();
|
||||
});
|
||||
ImageLoader.lazyChildren(itemsContainer);
|
||||
|
||||
});
|
||||
|
||||
|
@ -147,12 +157,13 @@
|
|||
var elem;
|
||||
|
||||
if (result.Items.length) {
|
||||
elem = $('#playlists', page).show();
|
||||
elem = $('#playlists', page).show()[0];
|
||||
} else {
|
||||
elem = $('#playlists', page).hide();
|
||||
elem = $('#playlists', page).hide()[0];
|
||||
}
|
||||
|
||||
$('.itemsContainer', elem).html(LibraryBrowser.getPosterViewHtml({
|
||||
var itemsContainer = elem.querySelector('.itemsContainer');
|
||||
itemsContainer.innerHTML = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: getSquareShape(),
|
||||
showTitle: true,
|
||||
|
@ -162,7 +173,8 @@
|
|||
showItemCounts: true,
|
||||
cardLayout: true
|
||||
|
||||
})).lazyChildren();
|
||||
});
|
||||
ImageLoader.lazyChildren(itemsContainer);
|
||||
|
||||
});
|
||||
}
|
||||
|
|
|
@ -619,7 +619,9 @@
|
|||
smallIcon: true
|
||||
});
|
||||
|
||||
$(".playlist", page).html(html).trigger('create').lazyChildren();
|
||||
var itemsContainer = elem.querySelector('.playlist');
|
||||
itemsContainer.innerHTML = html;
|
||||
ImageLoader.lazyChildren(html).trigger('create');
|
||||
}
|
||||
|
||||
function onListItemClick(e) {
|
||||
|
|
|
@ -91,7 +91,10 @@
|
|||
centerImage: true,
|
||||
textLines: getAdditionalTextLines
|
||||
});
|
||||
$('.itemsContainer', elem).html(html).lazyChildren();
|
||||
|
||||
var itemsContainer = elem.querySelector('.itemsContainer');
|
||||
itemsContainer.innerHTML = html;
|
||||
ImageLoader.lazyChildren(html);
|
||||
}
|
||||
|
||||
function requestSearchHintsForOverlay(elem, searchTerm) {
|
||||
|
|
|
@ -178,8 +178,9 @@
|
|||
}
|
||||
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
$(elem).lazyChildren().createCardMenus();
|
||||
$(elem).createCardMenus();
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -215,8 +216,9 @@
|
|||
}
|
||||
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
$(elem).lazyChildren().createCardMenus();
|
||||
$(elem).createCardMenus();
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -267,8 +269,9 @@
|
|||
}
|
||||
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
$(elem).lazyChildren().createCardMenus({ showDetailsMenu: false });
|
||||
$(elem).createCardMenus({ showDetailsMenu: false });
|
||||
|
||||
handleLibraryLinkNavigations(elem);
|
||||
});
|
||||
|
@ -323,7 +326,8 @@
|
|||
|
||||
elem.innerHTML = html;
|
||||
|
||||
$(elem).lazyChildren().createCardMenus();
|
||||
ImageLoader.lazyChildren(elem);
|
||||
$(elem).createCardMenus();
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -412,8 +416,9 @@
|
|||
|
||||
var elem = page.querySelector('#channel' + channel.Id + '');
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
$(elem).lazyChildren().trigger('create').createCardMenus();
|
||||
$(elem).createCardMenus();
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -453,9 +458,7 @@
|
|||
});
|
||||
|
||||
elem.innerHTML = html;
|
||||
|
||||
$(elem).lazyChildren().trigger('create');
|
||||
|
||||
ImageLoader.lazyChildren(elem);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -67,8 +67,9 @@
|
|||
});
|
||||
}
|
||||
|
||||
$('#latestEpisodes', page).html(html).lazyChildren();
|
||||
|
||||
var elem = page.querySelector('#latestEpisodes');
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -92,7 +92,9 @@
|
|||
});
|
||||
}
|
||||
|
||||
$('#nextUpItems', page).html(html).lazyChildren();
|
||||
var elem = page.querySelector('#nextUpItems');
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
|
@ -166,8 +168,9 @@
|
|||
});
|
||||
}
|
||||
|
||||
$('#resumableItems', page).html(html).lazyChildren();
|
||||
|
||||
var elem = page.querySelector('#resumableItems');
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
27
dashboard-ui/thirdparty/jquery.unveil-custom.js
vendored
27
dashboard-ui/thirdparty/jquery.unveil-custom.js
vendored
|
@ -97,12 +97,11 @@
|
|||
|
||||
var threshold = getThreshold();
|
||||
|
||||
function isVisible() {
|
||||
return visibleInViewport(this, true, false, 'both', threshold);
|
||||
function isVisible(elem) {
|
||||
return visibleInViewport(elem, true, false, 'both', threshold);
|
||||
}
|
||||
|
||||
function fillImage() {
|
||||
var elem = this;
|
||||
function fillImage(elem) {
|
||||
var source = elem.getAttribute('data-src');
|
||||
if (source) {
|
||||
ImageStore.setImageInto(elem, source);
|
||||
|
@ -116,19 +115,25 @@
|
|||
return;
|
||||
}
|
||||
|
||||
var images = $(elems),
|
||||
loaded;
|
||||
var images = elems;
|
||||
|
||||
unveilId++;
|
||||
var eventNamespace = 'unveil' + unveilId;
|
||||
|
||||
images.one("unveil", fillImage);
|
||||
|
||||
function unveil() {
|
||||
var inview = images.filter(isVisible);
|
||||
|
||||
loaded = inview.trigger("unveil");
|
||||
images = images.not(loaded);
|
||||
var remaining = [];
|
||||
|
||||
for (var i = 0, length = images.length; i < length; i++) {
|
||||
var img = images[i];
|
||||
if (isVisible(img)) {
|
||||
fillImage(img);
|
||||
} else {
|
||||
remaining.push(img);
|
||||
}
|
||||
}
|
||||
|
||||
images = remaining;
|
||||
|
||||
if (!images.length) {
|
||||
Events.off(window, 'scroll.' + eventNamespace);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue