1
0
Fork 0
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:
Luke Pulverenti 2015-06-28 11:43:49 -04:00
parent 95a647e0df
commit a0b6f768b3
14 changed files with 112 additions and 73 deletions

View file

@ -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);

View file

@ -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));

View file

@ -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 () {

View file

@ -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));

View file

@ -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);

View file

@ -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);

View file

@ -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) {

View file

@ -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);
});
}

View file

@ -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) {

View file

@ -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) {

View file

@ -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);
});
}

View file

@ -67,8 +67,9 @@
});
}
$('#latestEpisodes', page).html(html).lazyChildren();
var elem = page.querySelector('#latestEpisodes');
elem.innerHTML = html;
ImageLoader.lazyChildren(elem);
});
});

View file

@ -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);
});
}

View file

@ -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);