1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

begin unifying card layouts

This commit is contained in:
Luke Pulverenti 2016-07-29 16:06:58 -04:00
parent 6503c7c6f8
commit 07d49e2573
34 changed files with 216 additions and 2228 deletions

View file

@ -1,4 +1,4 @@
define(['jQuery', 'emby-itemscontainer'], function ($) {
define(['jQuery', 'cardBuilder', 'emby-itemscontainer'], function ($, cardBuilder) {
var data = {};
@ -129,7 +129,7 @@
updateFilterControls(page);
html = LibraryBrowser.getPosterViewHtml({
html = cardBuilder.getCardsHtml({
items: result.Items,
shape: "auto",
defaultShape: 'square',

View file

@ -1,4 +1,4 @@
define(['libraryBrowser', 'emby-itemscontainer'], function (libraryBrowser) {
define(['libraryBrowser', 'cardBuilder', 'emby-itemscontainer'], function (libraryBrowser, cardBuilder) {
// The base query options
var query = {
@ -23,7 +23,7 @@
if (view == "Thumb") {
html = libraryBrowser.getPosterViewHtml({
html = cardBuilder.getCardsHtml({
items: result.Items,
shape: "backdrop",
context: 'channels',
@ -36,7 +36,7 @@
}
else if (view == "ThumbCard") {
html = libraryBrowser.getPosterViewHtml({
html = cardBuilder.getCardsHtml({
items: result.Items,
shape: "backdrop",
preferThumb: true,

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView) {
define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView, cardBuilder) {
return function (view, params, tabContent) {
@ -83,27 +83,25 @@
});
}
else if (viewStyle == "PosterCard") {
html = libraryBrowser.getPosterViewHtml({
html = cardBuilder.getCardsHtml({
items: result.Items,
shape: "backdrop",
showTitle: true,
showParentTitle: true,
lazy: true,
cardLayout: true,
showDetailsMenu: true
scalable: true,
cardLayout: true
});
}
else {
// poster
html = libraryBrowser.getPosterViewHtml({
html = cardBuilder.getCardsHtml({
items: result.Items,
shape: "backdrop",
showTitle: true,
showParentTitle: true,
overlayText: true,
lazy: true,
showDetailsMenu: true,
scalable: true,
overlayPlayButton: true
});
}

View file

@ -1,4 +1,4 @@
define(['components/categorysyncbuttons', 'emby-itemscontainer'], function (categorysyncbuttons) {
define(['components/categorysyncbuttons', 'cardBuilder', 'emby-itemscontainer'], function (categorysyncbuttons, cardBuilder) {
function getNextUpPromise() {
@ -25,7 +25,7 @@
var html = '';
html += LibraryBrowser.getPosterViewHtml({
html += cardBuilder.getCardsHtml({
items: result.Items,
shape: "backdrop",
showTitle: true,

View file

@ -1,4 +1,4 @@
define(['datetime', 'emby-itemscontainer', 'scrollStyles'], function (datetime) {
define(['datetime', 'cardBuilder', 'emby-itemscontainer', 'scrollStyles'], function (datetime, cardBuilder) {
function getUpcomingPromise() {
@ -102,10 +102,10 @@
if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
} else {
html += '<div is="emby-itemscontainer" class="itemsContainer">';
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
}
html += LibraryBrowser.getPosterViewHtml({
html += cardBuilder.getCardsHtml({
items: group.items,
showLocationTypeIndicator: false,
shape: getThumbShape(),

File diff suppressed because it is too large Load diff

View file

@ -1,4 +1,4 @@
define(['emby-itemscontainer'], function () {
define(['cardBuilder', 'emby-itemscontainer'], function (cardBuilder) {
return function (view, params, tabContent) {
@ -38,7 +38,7 @@
function getChannelsHtml(channels) {
return LibraryBrowser.getPosterViewHtml({
return cardBuilder.getCardsHtml({
items: channels,
shape: "square",
showTitle: true,

View file

@ -1,6 +1,4 @@
define(['emby-itemscontainer'], function () {
var view = LibraryBrowser.getDefaultItemsView('Poster', 'Poster');
define(['cardBuilder', 'emby-itemscontainer'], function (cardBuilder) {
var currentDate = new Date();
currentDate.setHours(0, 0, 0, 0);
@ -37,33 +35,18 @@
page.querySelector('.listTopPaging').innerHTML = pagingHtml;
if (view == "Poster") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: query.IsMovie ? 'portrait' : "auto",
context: 'livetv',
showTitle: false,
centerText: true,
lazy: true,
showStartDateIndex: true,
overlayText: false,
showProgramAirInfo: true,
overlayMoreButton: true
});
}
else if (view == "PosterCard") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "portrait",
context: 'livetv',
showTitle: true,
showStartDateIndex: true,
lazy: true,
cardLayout: true,
showProgramAirInfo: true,
overlayMoreButton: true
});
}
html = cardBuilder.getCardsHtml({
items: result.Items,
shape: query.IsMovie ? 'portrait' : "auto",
context: 'livetv',
showTitle: false,
centerText: true,
lazy: true,
showStartDateIndex: true,
overlayText: false,
showProgramAirInfo: true,
overlayMoreButton: true
});
var elem = page.querySelector('.itemsContainer');
elem.innerHTML = html + pagingHtml;

View file

@ -1,4 +1,4 @@
define(['libraryBrowser', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser) {
define(['libraryBrowser', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, cardBuilder) {
function enableScrollX() {
return browserInfo.mobile && AppInfo.enableAppLayouts;
@ -99,7 +99,7 @@
function renderItems(page, items, sectionClass, overlayButton, shape) {
var html = libraryBrowser.getPosterViewHtml({
var html = cardBuilder.getCardsHtml({
items: items,
shape: shape || (enableScrollX() ? 'autooverflow' : 'auto'),
showTitle: true,
@ -130,8 +130,10 @@
for (var i = 0, length = containers.length; i < length; i++) {
if (enableScrollX()) {
containers[i].classList.add('hiddenScrollX');
containers[i].classList.remove('verticalItemsContainer');
} else {
containers[i].classList.remove('hiddenScrollX');
containers[i].classList.add('verticalItemsContainer');
}
}
};

View file

@ -1,4 +1,4 @@
define(['libraryBrowser'], function (libraryBrowser) {
define(['libraryBrowser', 'cardBuilder'], function (libraryBrowser, cardBuilder) {
return function (view, params, tabContent) {
@ -16,7 +16,7 @@
SortOrder: "Ascending",
IncludeItemTypes: "Movie",
Recursive: true,
Fields: "DateCreated,SyncInfo,ItemCounts",
Fields: "DateCreated,SyncInfo,ItemCounts,PrimaryImageAspectRatio",
StartIndex: 0
},
view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
@ -55,59 +55,56 @@
var html = '';
var viewStyle = self.getCurrentViewStyle();
var elem = context.querySelector('#items');
if (viewStyle == "Thumb") {
html = libraryBrowser.getPosterViewHtml({
items: result.Items,
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "backdrop",
preferThumb: true,
context: 'movies',
showTitle: false,
scalable: true,
showItemCounts: true,
centerText: true,
lazy: true,
overlayMoreButton: true
});
}
else if (viewStyle == "ThumbCard") {
html = libraryBrowser.getPosterViewHtml({
items: result.Items,
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "backdrop",
preferThumb: true,
context: 'movies',
showTitle: false,
scalable: true,
showItemCounts: true,
cardLayout: true,
showTitle: true,
lazy: true
centerText: true,
cardLayout: true
});
}
else if (viewStyle == "PosterCard") {
html = libraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "portrait",
context: 'movies',
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "auto",
showTitle: false,
scalable: true,
showItemCounts: true,
lazy: true,
cardLayout: true,
showTitle: true
centerText: true,
cardLayout: true
});
}
else if (viewStyle == "Poster") {
html = libraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "portrait",
context: 'movies',
centerText: true,
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "auto",
showTitle: false,
scalable: true,
showItemCounts: true,
lazy: true,
centerText: true,
overlayMoreButton: true
});
}
var elem = context.querySelector('#items');
elem.innerHTML = html;
ImageLoader.lazyChildren(elem);
libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
Dashboard.hideLoadingMsg();

View file

@ -1,14 +1,4 @@
define(['libraryBrowser', 'components/categorysyncbuttons', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons) {
function getView() {
return 'Poster';
}
function getResumeView() {
return 'Thumb';
}
define(['libraryBrowser', 'components/categorysyncbuttons', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons, cardBuilder) {
function enableScrollX() {
return browserInfo.mobile && AppInfo.enableAppLayouts;
@ -37,39 +27,13 @@
ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
var view = getView();
var html = '';
if (view == 'PosterCard') {
html += libraryBrowser.getPosterViewHtml({
items: items,
lazy: true,
shape: getPortraitShape(),
overlayText: false,
showTitle: true,
showYear: true,
cardLayout: true,
showDetailsMenu: true
});
} else if (view == 'Poster') {
html += libraryBrowser.getPosterViewHtml({
items: items,
shape: getPortraitShape(),
centerText: true,
lazy: true,
overlayText: false,
showDetailsMenu: true,
overlayPlayButton: true
});
}
var recentlyAddedItems = page.querySelector('#recentlyAddedItems');
recentlyAddedItems.innerHTML = html;
ImageLoader.lazyChildren(recentlyAddedItems);
var container = page.querySelector('#recentlyAddedItems');
cardBuilder.buildCards(items, {
itemsContainer: container,
shape: getPortraitShape(),
scalable: true,
overlayPlayButton: true
});
});
}
@ -101,40 +65,14 @@
page.querySelector('#resumableSection').classList.add('hide');
}
var view = getResumeView();
var html = '';
if (view == 'ThumbCard') {
html += libraryBrowser.getPosterViewHtml({
items: result.Items,
preferThumb: true,
shape: getThumbShape(),
showTitle: true,
showYear: true,
lazy: true,
cardLayout: true,
showDetailsMenu: true
});
} else if (view == 'Thumb') {
html += libraryBrowser.getPosterViewHtml({
items: result.Items,
preferThumb: true,
shape: getThumbShape(),
overlayText: true,
showTitle: false,
lazy: true,
showDetailsMenu: true,
overlayPlayButton: true
});
}
var resumableItems = page.querySelector('#resumableItems');
resumableItems.innerHTML = html;
ImageLoader.lazyChildren(resumableItems);
var container = page.querySelector('#resumableItems');
cardBuilder.buildCards(result.Items, {
itemsContainer: container,
preferThumb: true,
shape: getThumbShape(),
scalable: true,
overlayPlayButton: true
});
});
}
@ -167,38 +105,17 @@
html += '<h1 class="listHeader">' + title + '</h1>';
if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="hiddenScrollX">';
html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
} else {
html += '<div is="emby-itemscontainer">';
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
}
var view = getView();
html += cardBuilder.getCardsHtml(recommendation.Items, {
shape: getPortraitShape(),
scalable: true,
overlayPlayButton: true
});
if (view == 'PosterCard') {
html += libraryBrowser.getPosterViewHtml({
items: recommendation.Items,
lazy: true,
shape: getPortraitShape(),
overlayText: false,
showTitle: true,
showYear: true,
cardLayout: true,
showDetailsMenu: true
});
} else if (view == 'Poster') {
html += libraryBrowser.getPosterViewHtml({
items: recommendation.Items,
shape: getPortraitShape(),
centerText: true,
lazy: true,
showDetailsMenu: true,
overlayPlayButton: true
});
}
html += '</div>';
html += '</div>';
@ -244,8 +161,10 @@
for (var i = 0, length = containers.length; i < length; i++) {
if (enableScrollX()) {
containers[i].classList.add('hiddenScrollX');
containers[i].classList.remove('verticalItemsContainer');
} else {
containers[i].classList.remove('hiddenScrollX');
containers[i].classList.add('verticalItemsContainer');
}
}
}

View file

@ -1,4 +1,4 @@
define(['libraryBrowser'], function (libraryBrowser) {
define(['libraryBrowser', 'cardBuilder'], function (libraryBrowser, cardBuilder) {
// The base query options
var data = {};
@ -15,7 +15,7 @@
SortOrder: "Ascending",
IncludeItemTypes: "Movie",
Recursive: true,
Fields: "DateCreated,ItemCounts",
Fields: "DateCreated,ItemCounts,PrimaryImageAspectRatio",
StartIndex: 0
}
};
@ -42,24 +42,18 @@
promise.then(function (result) {
var html = '';
html += libraryBrowser.getPosterViewHtml({
items: result.Items,
var elem = context.querySelector('#items');
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "backdrop",
showTitle: false,
context: 'movies',
preferThumb: true,
showTitle: false,
scalable: true,
showItemCounts: true,
centerText: true,
lazy: true
overlayMoreButton: true
});
var elem = context.querySelector('#items');
elem.innerHTML = html;
ImageLoader.lazyChildren(elem);
Dashboard.hideLoadingMsg();
});
}

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader'], function (events, libraryBrowser, imageLoader) {
define(['events', 'libraryBrowser', 'imageLoader', 'cardBuilder'], function (events, libraryBrowser, imageLoader, cardBuilder) {
return function (view, params, tabContent) {
@ -65,7 +65,7 @@
filterButton: false
});
var html = LibraryBrowser.getPosterViewHtml({
var html = cardBuilder.getCardsHtml({
items: result.Items,
shape: "square",
context: 'folders',

View file

@ -1,4 +1,4 @@
define(['libraryBrowser', 'listView', 'emby-itemscontainer'], function (libraryBrowser, listView) {
define(['libraryBrowser', 'listView', 'cardBuilder', 'emby-itemscontainer'], function (libraryBrowser, listView, cardBuilder) {
return function (view, params) {
@ -160,7 +160,7 @@
}
// Poster
html = libraryBrowser.getPosterViewHtml(posterOptions);
html = cardBuilder.getCardsHtml(posterOptions);
}
var elem = view.querySelector('#items');

View file

@ -1,4 +1,4 @@
define(['libraryBrowser', 'appSettings', 'components/groupedcards', 'scrollStyles', 'emby-button', 'paper-icon-button-light', 'emby-itemscontainer'], function (LibraryBrowser, appSettings, groupedcards) {
define(['libraryBrowser', 'cardBuilder', 'appSettings', 'components/groupedcards', 'scrollStyles', 'emby-button', 'paper-icon-button-light', 'emby-itemscontainer'], function (LibraryBrowser, cardBuilder, appSettings, groupedcards) {
function getUserViews(userId) {
@ -302,9 +302,9 @@
html += '</div>';
html += '<div is="emby-itemscontainer" class="itemsContainer">';
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
html += LibraryBrowser.getPosterViewHtml({
html += cardBuilder.getCardsHtml({
items: items,
preferThumb: true,
shape: 'backdrop',
@ -348,9 +348,9 @@
if (scrollX) {
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
} else {
html += '<div is="emby-itemscontainer" class="itemsContainer">';
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
}
html += LibraryBrowser.getPosterViewHtml({
html += cardBuilder.getCardsHtml({
items: items,
shape: getPortraitShape(),
showUnplayedIndicator: false,
@ -390,10 +390,10 @@
if (scrollX) {
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
} else {
html += '<div is="emby-itemscontainer" class="itemsContainer">';
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
}
html += LibraryBrowser.getPosterViewHtml({
html += cardBuilder.getCardsHtml({
items: items,
preferThumb: true,
shape: getThumbShape(),
@ -429,8 +429,9 @@
if (result.Items.length) {
html += '<h1 class="listHeader">' + Globalize.translate('HeaderLatestChannelMedia') + '</h1>';
html += '<div is="emby-itemscontainer" class="itemsContainer">';
html += LibraryBrowser.getPosterViewHtml({
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
html += cardBuilder.getCardsHtml({
items: result.Items,
shape: 'auto',
showTitle: true,
@ -473,9 +474,9 @@
if (scrollX) {
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer homeTopViews">';
} else {
html += '<div is="emby-itemscontainer" class="itemsContainer homeTopViews">';
html += '<div is="emby-itemscontainer" class="itemsContainer homeTopViews verticalItemsContainer">';
}
html += LibraryBrowser.getPosterViewHtml({
html += cardBuilder.getCardsHtml({
items: items,
shape: scrollX ? 'overflowBackdrop' : shape,
showTitle: showTitles,
@ -532,9 +533,9 @@
if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
} else {
html += '<div is="emby-itemscontainer" class="itemsContainer">';
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
}
html += LibraryBrowser.getPosterViewHtml({
html += cardBuilder.getCardsHtml({
items: result.Items,
preferThumb: true,
shape: getThumbShape(),
@ -576,9 +577,9 @@
if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
} else {
html += '<div is="emby-itemscontainer" class="itemsContainer">';
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
}
html += LibraryBrowser.getPosterViewHtml({
html += cardBuilder.getCardsHtml({
items: result.Items,
preferThumb: true,
shape: getThumbShape(),
@ -656,8 +657,8 @@
html += '<a href="channelitems.html?id=' + channel.Id + '" class="clearLink" style="margin-left:2em;"><button is="emby-button" type="button" class="raised more mini"><span>' + Globalize.translate('ButtonMore') + '</span></button></a>';
html += '</div>';
html += '<div is="emby-itemscontainer" is="emby-itemscontainer" class="itemsContainer">';
html += LibraryBrowser.getPosterViewHtml({
html += '<div is="emby-itemscontainer" is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
html += cardBuilder.getCardsHtml({
items: result.Items,
shape: 'autohome',
defaultShape: 'square',
@ -704,9 +705,9 @@
if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
} else {
html += '<div is="emby-itemscontainer" class="itemsContainer">';
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
}
html += LibraryBrowser.getPosterViewHtml({
html += cardBuilder.getCardsHtml({
items: result.Items,
shape: enableScrollX() ? 'autooverflow' : 'auto',
showTitle: true,

View file

@ -2789,8 +2789,6 @@ var AppInfo = {};
deps.push('scripts/librarymenu');
deps.push('css!css/card.css');
console.log('onAppReady - loading dependencies');
require(deps, function (imageLoader, pageObjects) {

View file

@ -1,4 +1,4 @@
define(['libraryBrowser'], function (libraryBrowser) {
define(['libraryBrowser', 'cardBuilder'], function (libraryBrowser, cardBuilder) {
return function (view, params, tabContent) {
@ -16,7 +16,7 @@
SortOrder: "Ascending",
IncludeItemTypes: "Series",
Recursive: true,
Fields: "DateCreated,SyncInfo,ItemCounts",
Fields: "DateCreated,SyncInfo,ItemCounts,PrimaryImageAspectRatio",
StartIndex: 0
},
view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
@ -55,59 +55,56 @@
var html = '';
var viewStyle = self.getCurrentViewStyle();
var elem = context.querySelector('#items');
if (viewStyle == "Thumb") {
html = libraryBrowser.getPosterViewHtml({
items: result.Items,
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "backdrop",
preferThumb: true,
context: 'tv',
showTitle: false,
scalable: true,
showItemCounts: true,
centerText: true,
lazy: true,
overlayMoreButton: true
});
}
else if (viewStyle == "ThumbCard") {
html = libraryBrowser.getPosterViewHtml({
items: result.Items,
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "backdrop",
preferThumb: true,
context: 'tv',
showTitle: false,
scalable: true,
showItemCounts: true,
cardLayout: true,
showTitle: true,
lazy: true
centerText: true,
cardLayout: true
});
}
else if (viewStyle == "PosterCard") {
html = libraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "portrait",
context: 'tv',
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "auto",
showTitle: false,
scalable: true,
showItemCounts: true,
lazy: true,
cardLayout: true,
showTitle: true
centerText: true,
cardLayout: true
});
}
else if (viewStyle == "Poster") {
html = libraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "portrait",
context: 'tv',
centerText: true,
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "auto",
showTitle: false,
scalable: true,
showItemCounts: true,
lazy: true,
centerText: true,
overlayMoreButton: true
});
}
var elem = context.querySelector('#items');
elem.innerHTML = html;
ImageLoader.lazyChildren(elem);
libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
Dashboard.hideLoadingMsg();
@ -121,7 +118,7 @@
return getPageData(tabContent).view;
};
self.setCurrentViewStyle = function(viewStyle) {
self.setCurrentViewStyle = function (viewStyle) {
getPageData(tabContent).view = viewStyle;
libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
fullyReload();

View file

@ -1,4 +1,4 @@
define(['components/categorysyncbuttons', 'components/groupedcards'], function (categorysyncbuttons, groupedcards) {
define(['components/categorysyncbuttons', 'components/groupedcards', 'cardBuilder'], function (categorysyncbuttons, groupedcards, cardBuilder) {
function getView() {
@ -35,7 +35,7 @@
if (view == 'ThumbCard') {
html += LibraryBrowser.getPosterViewHtml({
html += cardBuilder.getCardsHtml({
items: items,
shape: "backdrop",
preferThumb: true,
@ -51,7 +51,7 @@
} else if (view == 'Thumb') {
html += LibraryBrowser.getPosterViewHtml({
html += cardBuilder.getCardsHtml({
items: items,
shape: "backdrop",
preferThumb: true,

View file

@ -1,19 +1,9 @@
define(['libraryBrowser', 'components/categorysyncbuttons', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons) {
define(['libraryBrowser', 'components/categorysyncbuttons', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons, cardBuilder) {
return function (view, params) {
var self = this;
function getView() {
return 'Thumb';
}
function getResumeView() {
return 'Poster';
}
function reload() {
Dashboard.showLoadingMsg();
@ -43,41 +33,19 @@
view.querySelector('.noNextUpItems').classList.remove('hide');
}
var viewStyle = getView();
var html = '';
var container = view.querySelector('#nextUpItems');
cardBuilder.buildCards(result.Items, {
itemsContainer: container,
preferThumb: true,
shape: "backdrop",
scalable: true,
showTitle: true,
showParentTitle: true,
overlayText: false,
centerText: true,
overlayPlayButton: AppInfo.enableAppLayouts
});
if (viewStyle == 'ThumbCard') {
html += libraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
showTitle: true,
preferThumb: true,
showParentTitle: true,
lazy: true,
cardLayout: true,
showDetailsMenu: true
});
} else if (viewStyle == 'Thumb') {
html += libraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
showTitle: true,
showParentTitle: true,
overlayText: false,
lazy: true,
preferThumb: true,
showDetailsMenu: true,
centerText: true,
overlayPlayButton: AppInfo.enableAppLayouts
});
}
var elem = view.querySelector('#nextUpItems');
elem.innerHTML = html;
ImageLoader.lazyChildren(elem);
Dashboard.hideLoadingMsg();
});
}
@ -120,50 +88,33 @@
view.querySelector('#resumableSection').classList.add('hide');
}
var viewStyle = getResumeView();
var html = '';
if (viewStyle == 'PosterCard') {
html += libraryBrowser.getPosterViewHtml({
items: result.Items,
shape: getThumbShape(),
showTitle: true,
showParentTitle: true,
lazy: true,
cardLayout: true,
showDetailsMenu: true,
preferThumb: true
});
} else if (viewStyle == 'Poster') {
html += libraryBrowser.getPosterViewHtml({
items: result.Items,
shape: getThumbShape(),
showTitle: true,
showParentTitle: true,
lazy: true,
showDetailsMenu: true,
overlayPlayButton: true,
preferThumb: true,
centerText: true
});
}
var elem = view.querySelector('#resumableItems');
elem.innerHTML = html;
ImageLoader.lazyChildren(elem);
var container = view.querySelector('#resumableItems');
cardBuilder.buildCards(result.Items, {
itemsContainer: container,
preferThumb: true,
shape: getThumbShape(),
scalable: true,
showTitle: true,
showParentTitle: true,
overlayText: false,
centerText: true,
overlayPlayButton: true
});
});
}
self.initTab = function () {
var tabContent = self.tabContent;
var resumableItemsContainer = tabContent.querySelector('#resumableItems');
if (enableScrollX()) {
tabContent.querySelector('#resumableItems').classList.add('hiddenScrollX');
resumableItemsContainer.classList.add('hiddenScrollX');
resumableItemsContainer.classList.remove('verticalItemsContainer');
} else {
tabContent.querySelector('#resumableItems').classList.remove('hiddenScrollX');
resumableItemsContainer.classList.remove('hiddenScrollX');
resumableItemsContainer.classList.add('verticalItemsContainer');
}
categorysyncbuttons.init(tabContent);

View file

@ -1,4 +1,4 @@
define(['libraryBrowser'], function (libraryBrowser) {
define(['libraryBrowser', 'cardBuilder'], function (libraryBrowser, cardBuilder) {
// The base query options
var data = {};
@ -15,7 +15,7 @@
SortOrder: "Ascending",
IncludeItemTypes: "Series",
Recursive: true,
Fields: "DateCreated,ItemCounts",
Fields: "DateCreated,ItemCounts,PrimaryImageAspectRatio",
StartIndex: 0
}
};
@ -42,24 +42,18 @@
promise.then(function (result) {
var html = '';
html += libraryBrowser.getPosterViewHtml({
items: result.Items,
var elem = context.querySelector('#items');
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "backdrop",
showTitle: false,
context: 'tv',
preferThumb: true,
showTitle: false,
scalable: true,
showItemCounts: true,
centerText: true,
lazy: true
overlayMoreButton: true
});
var elem = context.querySelector('#items');
elem.innerHTML = html;
ImageLoader.lazyChildren(elem);
Dashboard.hideLoadingMsg();
});
}

View file

@ -1,4 +1,4 @@
define(['datetime', 'libraryBrowser', 'scrollStyles', 'emby-itemscontainer'], function (datetime, libraryBrowser) {
define(['datetime', 'libraryBrowser', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (datetime, libraryBrowser, cardBuilder) {
function getUpcomingPromise(context, params) {
@ -104,10 +104,10 @@
if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
} else {
html += '<div is="emby-itemscontainer" class="itemsContainer">';
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
}
html += libraryBrowser.getPosterViewHtml({
html += cardBuilder.getCardsHtml({
items: group.items,
showLocationTypeIndicator: false,
shape: getThumbShape(),