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:
parent
6503c7c6f8
commit
07d49e2573
34 changed files with 216 additions and 2228 deletions
|
@ -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',
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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(),
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue