Fix indentation issues
This commit is contained in:
Bill Thornton
+229
-232
@@ -10,243 +10,240 @@ import Events from '../../utils/events.ts';
|
||||
|
||||
import '../../elements/emby-itemscontainer/emby-itemscontainer';
|
||||
|
||||
/* eslint-disable indent */
|
||||
export default function (view, params, tabContent) {
|
||||
function getPageData(context) {
|
||||
const key = getSavedQueryKey(context);
|
||||
let pageData = data[key];
|
||||
|
||||
export default function (view, params, tabContent) {
|
||||
function getPageData(context) {
|
||||
const key = getSavedQueryKey(context);
|
||||
let pageData = data[key];
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
query: {
|
||||
SortBy: 'SeriesSortName,SortName',
|
||||
SortOrder: 'Ascending',
|
||||
IncludeItemTypes: 'Episode',
|
||||
Recursive: true,
|
||||
Fields: 'PrimaryImageAspectRatio,MediaSourceCount',
|
||||
IsMissing: false,
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Thumb',
|
||||
StartIndex: 0
|
||||
},
|
||||
view: libraryBrowser.getSavedView(key) || 'Poster'
|
||||
};
|
||||
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
query: {
|
||||
SortBy: 'SeriesSortName,SortName',
|
||||
SortOrder: 'Ascending',
|
||||
IncludeItemTypes: 'Episode',
|
||||
Recursive: true,
|
||||
Fields: 'PrimaryImageAspectRatio,MediaSourceCount',
|
||||
IsMissing: false,
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Thumb',
|
||||
StartIndex: 0
|
||||
},
|
||||
view: libraryBrowser.getSavedView(key) || 'Poster'
|
||||
};
|
||||
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
pageData.query['Limit'] = userSettings.libraryPageSize();
|
||||
}
|
||||
|
||||
pageData.query.ParentId = params.topParentId;
|
||||
libraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
pageData.query['Limit'] = userSettings.libraryPageSize();
|
||||
}
|
||||
|
||||
return pageData;
|
||||
pageData.query.ParentId = params.topParentId;
|
||||
libraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||
}
|
||||
|
||||
function getQuery(context) {
|
||||
return getPageData(context).query;
|
||||
}
|
||||
|
||||
function getSavedQueryKey(context) {
|
||||
if (!context.savedQueryKey) {
|
||||
context.savedQueryKey = libraryBrowser.getSavedQueryKey('episodes');
|
||||
}
|
||||
|
||||
return context.savedQueryKey;
|
||||
}
|
||||
|
||||
function onViewStyleChange() {
|
||||
const viewStyle = self.getCurrentViewStyle();
|
||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
|
||||
if (viewStyle == 'List') {
|
||||
itemsContainer.classList.add('vertical-list');
|
||||
itemsContainer.classList.remove('vertical-wrap');
|
||||
} else {
|
||||
itemsContainer.classList.remove('vertical-list');
|
||||
itemsContainer.classList.add('vertical-wrap');
|
||||
}
|
||||
|
||||
itemsContainer.innerHTML = '';
|
||||
}
|
||||
|
||||
function reloadItems(page) {
|
||||
loading.show();
|
||||
isLoading = true;
|
||||
const query = getQuery(page);
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
|
||||
function onNextPageClick() {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
query.StartIndex += query.Limit;
|
||||
}
|
||||
reloadItems(tabContent);
|
||||
}
|
||||
|
||||
function onPreviousPageClick() {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
|
||||
}
|
||||
reloadItems(tabContent);
|
||||
}
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
let html;
|
||||
const pagingHtml = libraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
showLimit: false,
|
||||
updatePageSizeSetting: false,
|
||||
addLayoutButton: false,
|
||||
sortButton: false,
|
||||
filterButton: false
|
||||
});
|
||||
const viewStyle = self.getCurrentViewStyle();
|
||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
if (viewStyle == 'List') {
|
||||
html = listView.getListViewHtml({
|
||||
items: result.Items,
|
||||
sortBy: query.SortBy,
|
||||
showParentTitle: true
|
||||
});
|
||||
} else if (viewStyle == 'PosterCard') {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'backdrop',
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
scalable: true,
|
||||
cardLayout: true
|
||||
});
|
||||
} else {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'backdrop',
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
overlayText: false,
|
||||
centerText: true,
|
||||
scalable: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
let elems;
|
||||
|
||||
elems = tabContent.querySelectorAll('.paging');
|
||||
for (let i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].innerHTML = pagingHtml;
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnNextPage');
|
||||
for (let i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onNextPageClick);
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
||||
for (let i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onPreviousPageClick);
|
||||
}
|
||||
|
||||
itemsContainer.innerHTML = html;
|
||||
imageLoader.lazyChildren(itemsContainer);
|
||||
libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
|
||||
loading.hide();
|
||||
isLoading = false;
|
||||
|
||||
import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
|
||||
autoFocuser.autoFocus(page);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const self = this;
|
||||
const data = {};
|
||||
let isLoading = false;
|
||||
|
||||
self.showFilterMenu = function () {
|
||||
import('../../components/filterdialog/filterdialog').then(({ default: filterDialogFactory }) => {
|
||||
const filterDialog = new filterDialogFactory({
|
||||
query: getQuery(tabContent),
|
||||
mode: 'episodes',
|
||||
serverId: ApiClient.serverId()
|
||||
});
|
||||
Events.on(filterDialog, 'filterchange', function () {
|
||||
reloadItems(tabContent);
|
||||
});
|
||||
filterDialog.show();
|
||||
});
|
||||
};
|
||||
|
||||
self.getCurrentViewStyle = function () {
|
||||
return getPageData(tabContent).view;
|
||||
};
|
||||
|
||||
function initPage(tabElement) {
|
||||
tabElement.querySelector('.btnFilter').addEventListener('click', function () {
|
||||
self.showFilterMenu();
|
||||
});
|
||||
tabElement.querySelector('.btnSort').addEventListener('click', function (e) {
|
||||
libraryBrowser.showSortMenu({
|
||||
items: [{
|
||||
name: globalize.translate('Name'),
|
||||
id: 'SeriesSortName,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionTvdbRating'),
|
||||
id: 'CommunityRating,SeriesSortName,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionDateAdded'),
|
||||
id: 'DateCreated,SeriesSortName,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionPremiereDate'),
|
||||
id: 'PremiereDate,SeriesSortName,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionDatePlayed'),
|
||||
id: 'DatePlayed,SeriesSortName,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionParentalRating'),
|
||||
id: 'OfficialRating,SeriesSortName,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionPlayCount'),
|
||||
id: 'PlayCount,SeriesSortName,SortName'
|
||||
}, {
|
||||
name: globalize.translate('Runtime'),
|
||||
id: 'Runtime,SeriesSortName,SortName'
|
||||
}],
|
||||
callback: function () {
|
||||
reloadItems(tabElement);
|
||||
},
|
||||
query: getQuery(tabElement),
|
||||
button: e.target
|
||||
});
|
||||
});
|
||||
const btnSelectView = tabElement.querySelector('.btnSelectView');
|
||||
btnSelectView.addEventListener('click', function (e) {
|
||||
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
|
||||
});
|
||||
btnSelectView.addEventListener('layoutchange', function (e) {
|
||||
const viewStyle = e.detail.viewStyle;
|
||||
getPageData(tabElement).view = viewStyle;
|
||||
libraryBrowser.saveViewSetting(getSavedQueryKey(tabElement), viewStyle);
|
||||
onViewStyleChange();
|
||||
reloadItems(tabElement);
|
||||
});
|
||||
}
|
||||
|
||||
initPage(tabContent);
|
||||
onViewStyleChange();
|
||||
|
||||
self.renderTab = function () {
|
||||
reloadItems(tabContent);
|
||||
};
|
||||
return pageData;
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
function getQuery(context) {
|
||||
return getPageData(context).query;
|
||||
}
|
||||
|
||||
function getSavedQueryKey(context) {
|
||||
if (!context.savedQueryKey) {
|
||||
context.savedQueryKey = libraryBrowser.getSavedQueryKey('episodes');
|
||||
}
|
||||
|
||||
return context.savedQueryKey;
|
||||
}
|
||||
|
||||
function onViewStyleChange() {
|
||||
const viewStyle = self.getCurrentViewStyle();
|
||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
|
||||
if (viewStyle == 'List') {
|
||||
itemsContainer.classList.add('vertical-list');
|
||||
itemsContainer.classList.remove('vertical-wrap');
|
||||
} else {
|
||||
itemsContainer.classList.remove('vertical-list');
|
||||
itemsContainer.classList.add('vertical-wrap');
|
||||
}
|
||||
|
||||
itemsContainer.innerHTML = '';
|
||||
}
|
||||
|
||||
function reloadItems(page) {
|
||||
loading.show();
|
||||
isLoading = true;
|
||||
const query = getQuery(page);
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
|
||||
function onNextPageClick() {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
query.StartIndex += query.Limit;
|
||||
}
|
||||
reloadItems(tabContent);
|
||||
}
|
||||
|
||||
function onPreviousPageClick() {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
|
||||
}
|
||||
reloadItems(tabContent);
|
||||
}
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
let html;
|
||||
const pagingHtml = libraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
showLimit: false,
|
||||
updatePageSizeSetting: false,
|
||||
addLayoutButton: false,
|
||||
sortButton: false,
|
||||
filterButton: false
|
||||
});
|
||||
const viewStyle = self.getCurrentViewStyle();
|
||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
if (viewStyle == 'List') {
|
||||
html = listView.getListViewHtml({
|
||||
items: result.Items,
|
||||
sortBy: query.SortBy,
|
||||
showParentTitle: true
|
||||
});
|
||||
} else if (viewStyle == 'PosterCard') {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'backdrop',
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
scalable: true,
|
||||
cardLayout: true
|
||||
});
|
||||
} else {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'backdrop',
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
overlayText: false,
|
||||
centerText: true,
|
||||
scalable: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
let elems;
|
||||
|
||||
elems = tabContent.querySelectorAll('.paging');
|
||||
for (let i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].innerHTML = pagingHtml;
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnNextPage');
|
||||
for (let i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onNextPageClick);
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
||||
for (let i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onPreviousPageClick);
|
||||
}
|
||||
|
||||
itemsContainer.innerHTML = html;
|
||||
imageLoader.lazyChildren(itemsContainer);
|
||||
libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
|
||||
loading.hide();
|
||||
isLoading = false;
|
||||
|
||||
import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
|
||||
autoFocuser.autoFocus(page);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const self = this;
|
||||
const data = {};
|
||||
let isLoading = false;
|
||||
|
||||
self.showFilterMenu = function () {
|
||||
import('../../components/filterdialog/filterdialog').then(({ default: filterDialogFactory }) => {
|
||||
const filterDialog = new filterDialogFactory({
|
||||
query: getQuery(tabContent),
|
||||
mode: 'episodes',
|
||||
serverId: ApiClient.serverId()
|
||||
});
|
||||
Events.on(filterDialog, 'filterchange', function () {
|
||||
reloadItems(tabContent);
|
||||
});
|
||||
filterDialog.show();
|
||||
});
|
||||
};
|
||||
|
||||
self.getCurrentViewStyle = function () {
|
||||
return getPageData(tabContent).view;
|
||||
};
|
||||
|
||||
function initPage(tabElement) {
|
||||
tabElement.querySelector('.btnFilter').addEventListener('click', function () {
|
||||
self.showFilterMenu();
|
||||
});
|
||||
tabElement.querySelector('.btnSort').addEventListener('click', function (e) {
|
||||
libraryBrowser.showSortMenu({
|
||||
items: [{
|
||||
name: globalize.translate('Name'),
|
||||
id: 'SeriesSortName,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionTvdbRating'),
|
||||
id: 'CommunityRating,SeriesSortName,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionDateAdded'),
|
||||
id: 'DateCreated,SeriesSortName,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionPremiereDate'),
|
||||
id: 'PremiereDate,SeriesSortName,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionDatePlayed'),
|
||||
id: 'DatePlayed,SeriesSortName,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionParentalRating'),
|
||||
id: 'OfficialRating,SeriesSortName,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionPlayCount'),
|
||||
id: 'PlayCount,SeriesSortName,SortName'
|
||||
}, {
|
||||
name: globalize.translate('Runtime'),
|
||||
id: 'Runtime,SeriesSortName,SortName'
|
||||
}],
|
||||
callback: function () {
|
||||
reloadItems(tabElement);
|
||||
},
|
||||
query: getQuery(tabElement),
|
||||
button: e.target
|
||||
});
|
||||
});
|
||||
const btnSelectView = tabElement.querySelector('.btnSelectView');
|
||||
btnSelectView.addEventListener('click', function (e) {
|
||||
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
|
||||
});
|
||||
btnSelectView.addEventListener('layoutchange', function (e) {
|
||||
const viewStyle = e.detail.viewStyle;
|
||||
getPageData(tabElement).view = viewStyle;
|
||||
libraryBrowser.saveViewSetting(getSavedQueryKey(tabElement), viewStyle);
|
||||
onViewStyleChange();
|
||||
reloadItems(tabElement);
|
||||
});
|
||||
}
|
||||
|
||||
initPage(tabContent);
|
||||
onViewStyleChange();
|
||||
|
||||
self.renderTab = function () {
|
||||
reloadItems(tabContent);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
+201
-204
@@ -8,213 +8,210 @@ import globalize from '../../scripts/globalize';
|
||||
import { appRouter } from '../../components/appRouter';
|
||||
import '../../elements/emby-button/emby-button';
|
||||
|
||||
/* eslint-disable indent */
|
||||
export default function (view, params, tabContent) {
|
||||
function getPageData() {
|
||||
const key = getSavedQueryKey();
|
||||
let pageData = data[key];
|
||||
|
||||
export default function (view, params, tabContent) {
|
||||
function getPageData() {
|
||||
const key = getSavedQueryKey();
|
||||
let pageData = data[key];
|
||||
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
query: {
|
||||
SortBy: 'SortName',
|
||||
SortOrder: 'Ascending',
|
||||
IncludeItemTypes: 'Series',
|
||||
Recursive: true,
|
||||
EnableTotalRecordCount: false
|
||||
},
|
||||
view: 'Poster'
|
||||
};
|
||||
pageData.query.ParentId = params.topParentId;
|
||||
libraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||
}
|
||||
|
||||
return pageData;
|
||||
}
|
||||
|
||||
function getQuery() {
|
||||
return getPageData().query;
|
||||
}
|
||||
|
||||
function getSavedQueryKey() {
|
||||
return libraryBrowser.getSavedQueryKey('seriesgenres');
|
||||
}
|
||||
|
||||
function getPromise() {
|
||||
loading.show();
|
||||
const query = getQuery();
|
||||
return ApiClient.getGenres(ApiClient.getCurrentUserId(), query);
|
||||
}
|
||||
|
||||
function enableScrollX() {
|
||||
return !layoutManager.desktop;
|
||||
}
|
||||
|
||||
function getThumbShape() {
|
||||
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
|
||||
}
|
||||
|
||||
function getPortraitShape() {
|
||||
return enableScrollX() ? 'overflowPortrait' : 'portrait';
|
||||
}
|
||||
|
||||
function fillItemsContainer(entry) {
|
||||
const elem = entry.target;
|
||||
const id = elem.getAttribute('data-id');
|
||||
const viewStyle = self.getCurrentViewStyle();
|
||||
let limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9;
|
||||
|
||||
if (enableScrollX()) {
|
||||
limit = 10;
|
||||
}
|
||||
|
||||
const enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary';
|
||||
const query = {
|
||||
SortBy: 'Random',
|
||||
SortOrder: 'Ascending',
|
||||
IncludeItemTypes: 'Series',
|
||||
Recursive: true,
|
||||
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: enableImageTypes,
|
||||
Limit: limit,
|
||||
GenreIds: id,
|
||||
EnableTotalRecordCount: false,
|
||||
ParentId: params.topParentId
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
query: {
|
||||
SortBy: 'SortName',
|
||||
SortOrder: 'Ascending',
|
||||
IncludeItemTypes: 'Series',
|
||||
Recursive: true,
|
||||
EnableTotalRecordCount: false
|
||||
},
|
||||
view: 'Poster'
|
||||
};
|
||||
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
|
||||
if (viewStyle == 'Thumb') {
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: getThumbShape(),
|
||||
preferThumb: true,
|
||||
showTitle: true,
|
||||
scalable: true,
|
||||
centerText: true,
|
||||
overlayMoreButton: true,
|
||||
allowBottomPadding: false
|
||||
});
|
||||
} else if (viewStyle == 'ThumbCard') {
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: getThumbShape(),
|
||||
preferThumb: true,
|
||||
showTitle: true,
|
||||
scalable: true,
|
||||
centerText: false,
|
||||
cardLayout: true,
|
||||
showYear: true
|
||||
});
|
||||
} else if (viewStyle == 'PosterCard') {
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: getPortraitShape(),
|
||||
showTitle: true,
|
||||
scalable: true,
|
||||
centerText: false,
|
||||
cardLayout: true,
|
||||
showYear: true
|
||||
});
|
||||
} else if (viewStyle == 'Poster') {
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: getPortraitShape(),
|
||||
scalable: true,
|
||||
showTitle: true,
|
||||
centerText: true,
|
||||
showYear: true,
|
||||
overlayMoreButton: true,
|
||||
allowBottomPadding: false
|
||||
});
|
||||
}
|
||||
if (result.Items.length >= query.Limit) {
|
||||
tabContent.querySelector('.btnMoreFromGenre' + id + ' .material-icons').classList.remove('hide');
|
||||
}
|
||||
});
|
||||
pageData.query.ParentId = params.topParentId;
|
||||
libraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||
}
|
||||
|
||||
function reloadItems(context, promise) {
|
||||
const query = getQuery();
|
||||
promise.then(function (result) {
|
||||
const elem = context.querySelector('#items');
|
||||
let html = '';
|
||||
const items = result.Items;
|
||||
|
||||
for (const item of items) {
|
||||
html += '<div class="verticalSection">';
|
||||
html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
|
||||
html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item, {
|
||||
context: 'tvshows',
|
||||
parentId: params.topParentId
|
||||
}) + '" class="more button-flat button-flat-mini sectionTitleTextButton btnMoreFromGenre' + item.Id + '">';
|
||||
html += '<h2 class="sectionTitle sectionTitle-cards">';
|
||||
html += escapeHtml(item.Name);
|
||||
html += '</h2>';
|
||||
html += '<span class="material-icons hide chevron_right" aria-hidden="true"></span>';
|
||||
html += '</a>';
|
||||
html += '</div>';
|
||||
if (enableScrollX()) {
|
||||
let scrollXClass = 'scrollX hiddenScrollX';
|
||||
if (layoutManager.tv) {
|
||||
scrollXClass += 'smoothScrollX padded-top-focusscale padded-bottom-focusscale';
|
||||
}
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer ' + scrollXClass + ' lazy padded-left padded-right" data-id="' + item.Id + '">';
|
||||
} else {
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap lazy padded-left padded-right" data-id="' + item.Id + '">';
|
||||
}
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
if (!result.Items.length) {
|
||||
html = '';
|
||||
|
||||
html += '<div class="noItemsMessage centerMessage">';
|
||||
html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
|
||||
html += '<p>' + globalize.translate('MessageNoGenresAvailable') + '</p>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
elem.innerHTML = html;
|
||||
lazyLoader.lazyChildren(elem, fillItemsContainer);
|
||||
libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
|
||||
loading.hide();
|
||||
});
|
||||
}
|
||||
|
||||
function fullyReload() {
|
||||
self.preRender();
|
||||
self.renderTab();
|
||||
}
|
||||
|
||||
const self = this;
|
||||
const data = {};
|
||||
|
||||
self.getViewStyles = function () {
|
||||
return 'Poster,PosterCard,Thumb,ThumbCard'.split(',');
|
||||
};
|
||||
|
||||
self.getCurrentViewStyle = function () {
|
||||
return getPageData().view;
|
||||
};
|
||||
|
||||
self.setCurrentViewStyle = function (viewStyle) {
|
||||
getPageData().view = viewStyle;
|
||||
libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle);
|
||||
fullyReload();
|
||||
};
|
||||
|
||||
self.enableViewSelection = true;
|
||||
let promise;
|
||||
|
||||
self.preRender = function () {
|
||||
promise = getPromise();
|
||||
};
|
||||
|
||||
self.renderTab = function () {
|
||||
reloadItems(tabContent, promise);
|
||||
};
|
||||
return pageData;
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
function getQuery() {
|
||||
return getPageData().query;
|
||||
}
|
||||
|
||||
function getSavedQueryKey() {
|
||||
return libraryBrowser.getSavedQueryKey('seriesgenres');
|
||||
}
|
||||
|
||||
function getPromise() {
|
||||
loading.show();
|
||||
const query = getQuery();
|
||||
return ApiClient.getGenres(ApiClient.getCurrentUserId(), query);
|
||||
}
|
||||
|
||||
function enableScrollX() {
|
||||
return !layoutManager.desktop;
|
||||
}
|
||||
|
||||
function getThumbShape() {
|
||||
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
|
||||
}
|
||||
|
||||
function getPortraitShape() {
|
||||
return enableScrollX() ? 'overflowPortrait' : 'portrait';
|
||||
}
|
||||
|
||||
function fillItemsContainer(entry) {
|
||||
const elem = entry.target;
|
||||
const id = elem.getAttribute('data-id');
|
||||
const viewStyle = self.getCurrentViewStyle();
|
||||
let limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9;
|
||||
|
||||
if (enableScrollX()) {
|
||||
limit = 10;
|
||||
}
|
||||
|
||||
const enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary';
|
||||
const query = {
|
||||
SortBy: 'Random',
|
||||
SortOrder: 'Ascending',
|
||||
IncludeItemTypes: 'Series',
|
||||
Recursive: true,
|
||||
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: enableImageTypes,
|
||||
Limit: limit,
|
||||
GenreIds: id,
|
||||
EnableTotalRecordCount: false,
|
||||
ParentId: params.topParentId
|
||||
};
|
||||
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
|
||||
if (viewStyle == 'Thumb') {
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: getThumbShape(),
|
||||
preferThumb: true,
|
||||
showTitle: true,
|
||||
scalable: true,
|
||||
centerText: true,
|
||||
overlayMoreButton: true,
|
||||
allowBottomPadding: false
|
||||
});
|
||||
} else if (viewStyle == 'ThumbCard') {
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: getThumbShape(),
|
||||
preferThumb: true,
|
||||
showTitle: true,
|
||||
scalable: true,
|
||||
centerText: false,
|
||||
cardLayout: true,
|
||||
showYear: true
|
||||
});
|
||||
} else if (viewStyle == 'PosterCard') {
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: getPortraitShape(),
|
||||
showTitle: true,
|
||||
scalable: true,
|
||||
centerText: false,
|
||||
cardLayout: true,
|
||||
showYear: true
|
||||
});
|
||||
} else if (viewStyle == 'Poster') {
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: getPortraitShape(),
|
||||
scalable: true,
|
||||
showTitle: true,
|
||||
centerText: true,
|
||||
showYear: true,
|
||||
overlayMoreButton: true,
|
||||
allowBottomPadding: false
|
||||
});
|
||||
}
|
||||
if (result.Items.length >= query.Limit) {
|
||||
tabContent.querySelector('.btnMoreFromGenre' + id + ' .material-icons').classList.remove('hide');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function reloadItems(context, promise) {
|
||||
const query = getQuery();
|
||||
promise.then(function (result) {
|
||||
const elem = context.querySelector('#items');
|
||||
let html = '';
|
||||
const items = result.Items;
|
||||
|
||||
for (const item of items) {
|
||||
html += '<div class="verticalSection">';
|
||||
html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
|
||||
html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item, {
|
||||
context: 'tvshows',
|
||||
parentId: params.topParentId
|
||||
}) + '" class="more button-flat button-flat-mini sectionTitleTextButton btnMoreFromGenre' + item.Id + '">';
|
||||
html += '<h2 class="sectionTitle sectionTitle-cards">';
|
||||
html += escapeHtml(item.Name);
|
||||
html += '</h2>';
|
||||
html += '<span class="material-icons hide chevron_right" aria-hidden="true"></span>';
|
||||
html += '</a>';
|
||||
html += '</div>';
|
||||
if (enableScrollX()) {
|
||||
let scrollXClass = 'scrollX hiddenScrollX';
|
||||
if (layoutManager.tv) {
|
||||
scrollXClass += 'smoothScrollX padded-top-focusscale padded-bottom-focusscale';
|
||||
}
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer ' + scrollXClass + ' lazy padded-left padded-right" data-id="' + item.Id + '">';
|
||||
} else {
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap lazy padded-left padded-right" data-id="' + item.Id + '">';
|
||||
}
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
if (!result.Items.length) {
|
||||
html = '';
|
||||
|
||||
html += '<div class="noItemsMessage centerMessage">';
|
||||
html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
|
||||
html += '<p>' + globalize.translate('MessageNoGenresAvailable') + '</p>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
elem.innerHTML = html;
|
||||
lazyLoader.lazyChildren(elem, fillItemsContainer);
|
||||
libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
|
||||
loading.hide();
|
||||
});
|
||||
}
|
||||
|
||||
function fullyReload() {
|
||||
self.preRender();
|
||||
self.renderTab();
|
||||
}
|
||||
|
||||
const self = this;
|
||||
const data = {};
|
||||
|
||||
self.getViewStyles = function () {
|
||||
return 'Poster,PosterCard,Thumb,ThumbCard'.split(',');
|
||||
};
|
||||
|
||||
self.getCurrentViewStyle = function () {
|
||||
return getPageData().view;
|
||||
};
|
||||
|
||||
self.setCurrentViewStyle = function (viewStyle) {
|
||||
getPageData().view = viewStyle;
|
||||
libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle);
|
||||
fullyReload();
|
||||
};
|
||||
|
||||
self.enableViewSelection = true;
|
||||
let promise;
|
||||
|
||||
self.preRender = function () {
|
||||
promise = getPromise();
|
||||
};
|
||||
|
||||
self.renderTab = function () {
|
||||
reloadItems(tabContent, promise);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -16,377 +16,374 @@ import Dashboard from '../../utils/dashboard';
|
||||
import Events from '../../utils/events.ts';
|
||||
import autoFocuser from '../../components/autoFocuser';
|
||||
|
||||
/* eslint-disable indent */
|
||||
function getTabs() {
|
||||
return [{
|
||||
name: globalize.translate('Shows')
|
||||
}, {
|
||||
name: globalize.translate('Suggestions')
|
||||
}, {
|
||||
name: globalize.translate('TabUpcoming')
|
||||
}, {
|
||||
name: globalize.translate('Genres')
|
||||
}, {
|
||||
name: globalize.translate('TabNetworks')
|
||||
}, {
|
||||
name: globalize.translate('Episodes')
|
||||
}];
|
||||
}
|
||||
|
||||
function getTabs() {
|
||||
return [{
|
||||
name: globalize.translate('Shows')
|
||||
}, {
|
||||
name: globalize.translate('Suggestions')
|
||||
}, {
|
||||
name: globalize.translate('TabUpcoming')
|
||||
}, {
|
||||
name: globalize.translate('Genres')
|
||||
}, {
|
||||
name: globalize.translate('TabNetworks')
|
||||
}, {
|
||||
name: globalize.translate('Episodes')
|
||||
}];
|
||||
function getDefaultTabIndex(folderId) {
|
||||
switch (userSettings.get('landing-' + folderId)) {
|
||||
case 'suggestions':
|
||||
return 1;
|
||||
|
||||
case 'upcoming':
|
||||
return 2;
|
||||
|
||||
case 'genres':
|
||||
return 3;
|
||||
|
||||
case 'networks':
|
||||
return 4;
|
||||
|
||||
case 'episodes':
|
||||
return 5;
|
||||
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
function getDefaultTabIndex(folderId) {
|
||||
switch (userSettings.get('landing-' + folderId)) {
|
||||
case 'suggestions':
|
||||
return 1;
|
||||
function setScrollClasses(elem, scrollX) {
|
||||
if (scrollX) {
|
||||
elem.classList.add('hiddenScrollX');
|
||||
|
||||
case 'upcoming':
|
||||
return 2;
|
||||
|
||||
case 'genres':
|
||||
return 3;
|
||||
|
||||
case 'networks':
|
||||
return 4;
|
||||
|
||||
case 'episodes':
|
||||
return 5;
|
||||
|
||||
default:
|
||||
return 0;
|
||||
if (layoutManager.tv) {
|
||||
elem.classList.add('smoothScrollX');
|
||||
}
|
||||
|
||||
elem.classList.add('scrollX');
|
||||
elem.classList.remove('vertical-wrap');
|
||||
} else {
|
||||
elem.classList.remove('hiddenScrollX');
|
||||
elem.classList.remove('smoothScrollX');
|
||||
elem.classList.remove('scrollX');
|
||||
elem.classList.add('vertical-wrap');
|
||||
}
|
||||
}
|
||||
|
||||
function setScrollClasses(elem, scrollX) {
|
||||
if (scrollX) {
|
||||
elem.classList.add('hiddenScrollX');
|
||||
function initSuggestedTab(page, tabContent) {
|
||||
const containers = tabContent.querySelectorAll('.itemsContainer');
|
||||
|
||||
if (layoutManager.tv) {
|
||||
elem.classList.add('smoothScrollX');
|
||||
}
|
||||
for (let i = 0, length = containers.length; i < length; i++) {
|
||||
setScrollClasses(containers[i], enableScrollX());
|
||||
}
|
||||
}
|
||||
|
||||
elem.classList.add('scrollX');
|
||||
elem.classList.remove('vertical-wrap');
|
||||
function loadSuggestionsTab(view, params, tabContent) {
|
||||
const parentId = params.topParentId;
|
||||
const userId = ApiClient.getCurrentUserId();
|
||||
console.debug('loadSuggestionsTab');
|
||||
loadResume(tabContent, userId, parentId);
|
||||
loadLatest(tabContent, userId, parentId);
|
||||
loadNextUp(tabContent, userId, parentId);
|
||||
}
|
||||
|
||||
function loadResume(view, userId, parentId) {
|
||||
const screenWidth = dom.getWindowSize().innerWidth;
|
||||
const options = {
|
||||
SortBy: 'DatePlayed',
|
||||
SortOrder: 'Descending',
|
||||
IncludeItemTypes: 'Episode',
|
||||
Filters: 'IsResumable',
|
||||
Limit: screenWidth >= 1600 ? 5 : 3,
|
||||
Recursive: true,
|
||||
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
|
||||
CollapseBoxSetItems: false,
|
||||
ParentId: parentId,
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
|
||||
EnableTotalRecordCount: false
|
||||
};
|
||||
ApiClient.getItems(userId, options).then(function (result) {
|
||||
if (result.Items.length) {
|
||||
view.querySelector('#resumableSection').classList.remove('hide');
|
||||
} else {
|
||||
elem.classList.remove('hiddenScrollX');
|
||||
elem.classList.remove('smoothScrollX');
|
||||
elem.classList.remove('scrollX');
|
||||
elem.classList.add('vertical-wrap');
|
||||
view.querySelector('#resumableSection').classList.add('hide');
|
||||
}
|
||||
}
|
||||
|
||||
function initSuggestedTab(page, tabContent) {
|
||||
const containers = tabContent.querySelectorAll('.itemsContainer');
|
||||
const allowBottomPadding = !enableScrollX();
|
||||
const container = view.querySelector('#resumableItems');
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: container,
|
||||
preferThumb: true,
|
||||
inheritThumb: !userSettings.useEpisodeImagesInNextUpAndResume(),
|
||||
shape: getThumbShape(),
|
||||
scalable: true,
|
||||
overlayPlayButton: true,
|
||||
allowBottomPadding: allowBottomPadding,
|
||||
cardLayout: false,
|
||||
showTitle: true,
|
||||
showYear: true,
|
||||
centerText: true
|
||||
});
|
||||
loading.hide();
|
||||
|
||||
for (let i = 0, length = containers.length; i < length; i++) {
|
||||
setScrollClasses(containers[i], enableScrollX());
|
||||
autoFocuser.autoFocus(view);
|
||||
});
|
||||
}
|
||||
|
||||
function loadLatest(view, userId, parentId) {
|
||||
const options = {
|
||||
userId: userId,
|
||||
IncludeItemTypes: 'Episode',
|
||||
Limit: 30,
|
||||
Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
|
||||
ParentId: parentId,
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Thumb'
|
||||
};
|
||||
ApiClient.getLatestItems(options).then(function (items) {
|
||||
const section = view.querySelector('#latestItemsSection');
|
||||
const allowBottomPadding = !enableScrollX();
|
||||
const container = section.querySelector('#latestEpisodesItems');
|
||||
cardBuilder.buildCards(items, {
|
||||
parentContainer: section,
|
||||
itemsContainer: container,
|
||||
items: items,
|
||||
shape: 'backdrop',
|
||||
preferThumb: true,
|
||||
showTitle: true,
|
||||
showSeriesYear: true,
|
||||
showParentTitle: true,
|
||||
overlayText: false,
|
||||
cardLayout: false,
|
||||
allowBottomPadding: allowBottomPadding,
|
||||
showUnplayedIndicator: false,
|
||||
showChildCountIndicator: true,
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
overlayPlayButton: true,
|
||||
lines: 2
|
||||
});
|
||||
loading.hide();
|
||||
|
||||
autoFocuser.autoFocus(view);
|
||||
});
|
||||
}
|
||||
|
||||
function loadNextUp(view, userId, parentId) {
|
||||
const query = {
|
||||
userId: userId,
|
||||
Limit: 24,
|
||||
Fields: 'PrimaryImageAspectRatio,DateCreated,BasicSyncInfo,MediaSourceCount',
|
||||
ParentId: parentId,
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Thumb',
|
||||
EnableTotalRecordCount: false
|
||||
};
|
||||
query.ParentId = libraryMenu.getTopParentId();
|
||||
ApiClient.getNextUpEpisodes(query).then(function (result) {
|
||||
if (result.Items.length) {
|
||||
view.querySelector('.noNextUpItems').classList.add('hide');
|
||||
} else {
|
||||
view.querySelector('.noNextUpItems').classList.remove('hide');
|
||||
}
|
||||
|
||||
const section = view.querySelector('#nextUpItemsSection');
|
||||
const container = section.querySelector('#nextUpItems');
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
parentContainer: section,
|
||||
itemsContainer: container,
|
||||
preferThumb: true,
|
||||
inheritThumb: !userSettings.useEpisodeImagesInNextUpAndResume(),
|
||||
shape: 'backdrop',
|
||||
scalable: true,
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
overlayText: false,
|
||||
centerText: true,
|
||||
overlayPlayButton: true,
|
||||
cardLayout: false
|
||||
});
|
||||
loading.hide();
|
||||
|
||||
autoFocuser.autoFocus(view);
|
||||
});
|
||||
}
|
||||
|
||||
function enableScrollX() {
|
||||
return !layoutManager.desktop;
|
||||
}
|
||||
|
||||
function getThumbShape() {
|
||||
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
|
||||
}
|
||||
|
||||
export default function (view, params) {
|
||||
function onBeforeTabChange(e) {
|
||||
preLoadTab(view, parseInt(e.detail.selectedTabIndex, 10));
|
||||
}
|
||||
|
||||
function loadSuggestionsTab(view, params, tabContent) {
|
||||
const parentId = params.topParentId;
|
||||
const userId = ApiClient.getCurrentUserId();
|
||||
console.debug('loadSuggestionsTab');
|
||||
loadResume(tabContent, userId, parentId);
|
||||
loadLatest(tabContent, userId, parentId);
|
||||
loadNextUp(tabContent, userId, parentId);
|
||||
function onTabChange(e) {
|
||||
const newIndex = parseInt(e.detail.selectedTabIndex, 10);
|
||||
loadTab(view, newIndex);
|
||||
}
|
||||
|
||||
function loadResume(view, userId, parentId) {
|
||||
const screenWidth = dom.getWindowSize().innerWidth;
|
||||
const options = {
|
||||
SortBy: 'DatePlayed',
|
||||
SortOrder: 'Descending',
|
||||
IncludeItemTypes: 'Episode',
|
||||
Filters: 'IsResumable',
|
||||
Limit: screenWidth >= 1600 ? 5 : 3,
|
||||
Recursive: true,
|
||||
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
|
||||
CollapseBoxSetItems: false,
|
||||
ParentId: parentId,
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
|
||||
EnableTotalRecordCount: false
|
||||
};
|
||||
ApiClient.getItems(userId, options).then(function (result) {
|
||||
if (result.Items.length) {
|
||||
view.querySelector('#resumableSection').classList.remove('hide');
|
||||
} else {
|
||||
view.querySelector('#resumableSection').classList.add('hide');
|
||||
function getTabContainers() {
|
||||
return view.querySelectorAll('.pageTabContent');
|
||||
}
|
||||
|
||||
function initTabs() {
|
||||
mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange);
|
||||
}
|
||||
|
||||
function getTabController(page, index, callback) {
|
||||
let depends;
|
||||
|
||||
switch (index) {
|
||||
case 0:
|
||||
depends = 'tvshows';
|
||||
break;
|
||||
|
||||
case 1:
|
||||
depends = 'tvrecommended';
|
||||
break;
|
||||
|
||||
case 2:
|
||||
depends = 'tvupcoming';
|
||||
break;
|
||||
|
||||
case 3:
|
||||
depends = 'tvgenres';
|
||||
break;
|
||||
|
||||
case 4:
|
||||
depends = 'tvstudios';
|
||||
break;
|
||||
|
||||
case 5:
|
||||
depends = 'episodes';
|
||||
break;
|
||||
}
|
||||
|
||||
import(`../shows/${depends}`).then(({ default: controllerFactory }) => {
|
||||
let tabContent;
|
||||
|
||||
if (index === 1) {
|
||||
tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
|
||||
self.tabContent = tabContent;
|
||||
}
|
||||
|
||||
const allowBottomPadding = !enableScrollX();
|
||||
const container = view.querySelector('#resumableItems');
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: container,
|
||||
preferThumb: true,
|
||||
inheritThumb: !userSettings.useEpisodeImagesInNextUpAndResume(),
|
||||
shape: getThumbShape(),
|
||||
scalable: true,
|
||||
overlayPlayButton: true,
|
||||
allowBottomPadding: allowBottomPadding,
|
||||
cardLayout: false,
|
||||
showTitle: true,
|
||||
showYear: true,
|
||||
centerText: true
|
||||
});
|
||||
loading.hide();
|
||||
let controller = tabControllers[index];
|
||||
|
||||
autoFocuser.autoFocus(view);
|
||||
});
|
||||
}
|
||||
|
||||
function loadLatest(view, userId, parentId) {
|
||||
const options = {
|
||||
userId: userId,
|
||||
IncludeItemTypes: 'Episode',
|
||||
Limit: 30,
|
||||
Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
|
||||
ParentId: parentId,
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Thumb'
|
||||
};
|
||||
ApiClient.getLatestItems(options).then(function (items) {
|
||||
const section = view.querySelector('#latestItemsSection');
|
||||
const allowBottomPadding = !enableScrollX();
|
||||
const container = section.querySelector('#latestEpisodesItems');
|
||||
cardBuilder.buildCards(items, {
|
||||
parentContainer: section,
|
||||
itemsContainer: container,
|
||||
items: items,
|
||||
shape: 'backdrop',
|
||||
preferThumb: true,
|
||||
showTitle: true,
|
||||
showSeriesYear: true,
|
||||
showParentTitle: true,
|
||||
overlayText: false,
|
||||
cardLayout: false,
|
||||
allowBottomPadding: allowBottomPadding,
|
||||
showUnplayedIndicator: false,
|
||||
showChildCountIndicator: true,
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
overlayPlayButton: true,
|
||||
lines: 2
|
||||
});
|
||||
loading.hide();
|
||||
|
||||
autoFocuser.autoFocus(view);
|
||||
});
|
||||
}
|
||||
|
||||
function loadNextUp(view, userId, parentId) {
|
||||
const query = {
|
||||
userId: userId,
|
||||
Limit: 24,
|
||||
Fields: 'PrimaryImageAspectRatio,DateCreated,BasicSyncInfo,MediaSourceCount',
|
||||
ParentId: parentId,
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Thumb',
|
||||
EnableTotalRecordCount: false
|
||||
};
|
||||
query.ParentId = libraryMenu.getTopParentId();
|
||||
ApiClient.getNextUpEpisodes(query).then(function (result) {
|
||||
if (result.Items.length) {
|
||||
view.querySelector('.noNextUpItems').classList.add('hide');
|
||||
} else {
|
||||
view.querySelector('.noNextUpItems').classList.remove('hide');
|
||||
}
|
||||
|
||||
const section = view.querySelector('#nextUpItemsSection');
|
||||
const container = section.querySelector('#nextUpItems');
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
parentContainer: section,
|
||||
itemsContainer: container,
|
||||
preferThumb: true,
|
||||
inheritThumb: !userSettings.useEpisodeImagesInNextUpAndResume(),
|
||||
shape: 'backdrop',
|
||||
scalable: true,
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
overlayText: false,
|
||||
centerText: true,
|
||||
overlayPlayButton: true,
|
||||
cardLayout: false
|
||||
});
|
||||
loading.hide();
|
||||
|
||||
autoFocuser.autoFocus(view);
|
||||
});
|
||||
}
|
||||
|
||||
function enableScrollX() {
|
||||
return !layoutManager.desktop;
|
||||
}
|
||||
|
||||
function getThumbShape() {
|
||||
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
|
||||
}
|
||||
|
||||
export default function (view, params) {
|
||||
function onBeforeTabChange(e) {
|
||||
preLoadTab(view, parseInt(e.detail.selectedTabIndex, 10));
|
||||
}
|
||||
|
||||
function onTabChange(e) {
|
||||
const newIndex = parseInt(e.detail.selectedTabIndex, 10);
|
||||
loadTab(view, newIndex);
|
||||
}
|
||||
|
||||
function getTabContainers() {
|
||||
return view.querySelectorAll('.pageTabContent');
|
||||
}
|
||||
|
||||
function initTabs() {
|
||||
mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange);
|
||||
}
|
||||
|
||||
function getTabController(page, index, callback) {
|
||||
let depends;
|
||||
|
||||
switch (index) {
|
||||
case 0:
|
||||
depends = 'tvshows';
|
||||
break;
|
||||
|
||||
case 1:
|
||||
depends = 'tvrecommended';
|
||||
break;
|
||||
|
||||
case 2:
|
||||
depends = 'tvupcoming';
|
||||
break;
|
||||
|
||||
case 3:
|
||||
depends = 'tvgenres';
|
||||
break;
|
||||
|
||||
case 4:
|
||||
depends = 'tvstudios';
|
||||
break;
|
||||
|
||||
case 5:
|
||||
depends = 'episodes';
|
||||
break;
|
||||
}
|
||||
|
||||
import(`../shows/${depends}`).then(({ default: controllerFactory }) => {
|
||||
let tabContent;
|
||||
if (!controller) {
|
||||
tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
|
||||
|
||||
if (index === 1) {
|
||||
tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
|
||||
self.tabContent = tabContent;
|
||||
}
|
||||
|
||||
let controller = tabControllers[index];
|
||||
|
||||
if (!controller) {
|
||||
tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
|
||||
|
||||
if (index === 1) {
|
||||
controller = self;
|
||||
} else {
|
||||
controller = new controllerFactory(view, params, tabContent);
|
||||
}
|
||||
|
||||
tabControllers[index] = controller;
|
||||
|
||||
if (controller.initTab) {
|
||||
controller.initTab();
|
||||
}
|
||||
}
|
||||
|
||||
callback(controller);
|
||||
});
|
||||
}
|
||||
|
||||
function preLoadTab(page, index) {
|
||||
getTabController(page, index, function (controller) {
|
||||
if (renderedTabs.indexOf(index) == -1 && controller.preRender) {
|
||||
controller.preRender();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadTab(page, index) {
|
||||
currentTabIndex = index;
|
||||
getTabController(page, index, function (controller) {
|
||||
if (renderedTabs.indexOf(index) == -1) {
|
||||
renderedTabs.push(index);
|
||||
controller.renderTab();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onPlaybackStop(e, state) {
|
||||
if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
|
||||
renderedTabs = [];
|
||||
mainTabsManager.getTabsElement().triggerTabChange();
|
||||
}
|
||||
}
|
||||
|
||||
function onWebSocketMessage(e, data) {
|
||||
const msg = data;
|
||||
|
||||
if (msg.MessageType === 'UserDataChanged' && msg.Data.UserId == ApiClient.getCurrentUserId()) {
|
||||
renderedTabs = [];
|
||||
}
|
||||
}
|
||||
|
||||
function onInputCommand(e) {
|
||||
if (e.detail.command === 'search') {
|
||||
e.preventDefault();
|
||||
Dashboard.navigate('search.html?collectionType=tv&parentId=' + params.topParentId);
|
||||
}
|
||||
}
|
||||
|
||||
const self = this;
|
||||
let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId), 10);
|
||||
const suggestionsTabIndex = 1;
|
||||
|
||||
self.initTab = function () {
|
||||
const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
|
||||
initSuggestedTab(view, tabContent);
|
||||
};
|
||||
|
||||
self.renderTab = function () {
|
||||
const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
|
||||
loadSuggestionsTab(view, params, tabContent);
|
||||
};
|
||||
|
||||
const tabControllers = [];
|
||||
let renderedTabs = [];
|
||||
view.addEventListener('viewshow', function () {
|
||||
initTabs();
|
||||
if (!view.getAttribute('data-title')) {
|
||||
const parentId = params.topParentId;
|
||||
|
||||
if (parentId) {
|
||||
ApiClient.getItem(ApiClient.getCurrentUserId(), parentId).then(function (item) {
|
||||
view.setAttribute('data-title', item.Name);
|
||||
libraryMenu.setTitle(item.Name);
|
||||
});
|
||||
controller = self;
|
||||
} else {
|
||||
view.setAttribute('data-title', globalize.translate('Shows'));
|
||||
libraryMenu.setTitle(globalize.translate('Shows'));
|
||||
controller = new controllerFactory(view, params, tabContent);
|
||||
}
|
||||
|
||||
tabControllers[index] = controller;
|
||||
|
||||
if (controller.initTab) {
|
||||
controller.initTab();
|
||||
}
|
||||
}
|
||||
|
||||
Events.on(playbackManager, 'playbackstop', onPlaybackStop);
|
||||
Events.on(ApiClient, 'message', onWebSocketMessage);
|
||||
inputManager.on(window, onInputCommand);
|
||||
});
|
||||
view.addEventListener('viewbeforehide', function () {
|
||||
inputManager.off(window, onInputCommand);
|
||||
Events.off(playbackManager, 'playbackstop', onPlaybackStop);
|
||||
Events.off(ApiClient, 'message', onWebSocketMessage);
|
||||
});
|
||||
view.addEventListener('viewdestroy', function () {
|
||||
tabControllers.forEach(function (t) {
|
||||
if (t.destroy) {
|
||||
t.destroy();
|
||||
}
|
||||
});
|
||||
callback(controller);
|
||||
});
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
function preLoadTab(page, index) {
|
||||
getTabController(page, index, function (controller) {
|
||||
if (renderedTabs.indexOf(index) == -1 && controller.preRender) {
|
||||
controller.preRender();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadTab(page, index) {
|
||||
currentTabIndex = index;
|
||||
getTabController(page, index, function (controller) {
|
||||
if (renderedTabs.indexOf(index) == -1) {
|
||||
renderedTabs.push(index);
|
||||
controller.renderTab();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onPlaybackStop(e, state) {
|
||||
if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
|
||||
renderedTabs = [];
|
||||
mainTabsManager.getTabsElement().triggerTabChange();
|
||||
}
|
||||
}
|
||||
|
||||
function onWebSocketMessage(e, data) {
|
||||
const msg = data;
|
||||
|
||||
if (msg.MessageType === 'UserDataChanged' && msg.Data.UserId == ApiClient.getCurrentUserId()) {
|
||||
renderedTabs = [];
|
||||
}
|
||||
}
|
||||
|
||||
function onInputCommand(e) {
|
||||
if (e.detail.command === 'search') {
|
||||
e.preventDefault();
|
||||
Dashboard.navigate('search.html?collectionType=tv&parentId=' + params.topParentId);
|
||||
}
|
||||
}
|
||||
|
||||
const self = this;
|
||||
let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId), 10);
|
||||
const suggestionsTabIndex = 1;
|
||||
|
||||
self.initTab = function () {
|
||||
const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
|
||||
initSuggestedTab(view, tabContent);
|
||||
};
|
||||
|
||||
self.renderTab = function () {
|
||||
const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
|
||||
loadSuggestionsTab(view, params, tabContent);
|
||||
};
|
||||
|
||||
const tabControllers = [];
|
||||
let renderedTabs = [];
|
||||
view.addEventListener('viewshow', function () {
|
||||
initTabs();
|
||||
if (!view.getAttribute('data-title')) {
|
||||
const parentId = params.topParentId;
|
||||
|
||||
if (parentId) {
|
||||
ApiClient.getItem(ApiClient.getCurrentUserId(), parentId).then(function (item) {
|
||||
view.setAttribute('data-title', item.Name);
|
||||
libraryMenu.setTitle(item.Name);
|
||||
});
|
||||
} else {
|
||||
view.setAttribute('data-title', globalize.translate('Shows'));
|
||||
libraryMenu.setTitle(globalize.translate('Shows'));
|
||||
}
|
||||
}
|
||||
|
||||
Events.on(playbackManager, 'playbackstop', onPlaybackStop);
|
||||
Events.on(ApiClient, 'message', onWebSocketMessage);
|
||||
inputManager.on(window, onInputCommand);
|
||||
});
|
||||
view.addEventListener('viewbeforehide', function () {
|
||||
inputManager.off(window, onInputCommand);
|
||||
Events.off(playbackManager, 'playbackstop', onPlaybackStop);
|
||||
Events.off(ApiClient, 'message', onWebSocketMessage);
|
||||
});
|
||||
view.addEventListener('viewdestroy', function () {
|
||||
tabControllers.forEach(function (t) {
|
||||
if (t.destroy) {
|
||||
t.destroy();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
+286
-289
@@ -10,300 +10,297 @@ import Events from '../../utils/events.ts';
|
||||
|
||||
import '../../elements/emby-itemscontainer/emby-itemscontainer';
|
||||
|
||||
/* eslint-disable indent */
|
||||
export default function (view, params, tabContent) {
|
||||
function getPageData(context) {
|
||||
const key = getSavedQueryKey(context);
|
||||
let pageData = data[key];
|
||||
|
||||
export default function (view, params, tabContent) {
|
||||
function getPageData(context) {
|
||||
const key = getSavedQueryKey(context);
|
||||
let pageData = data[key];
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
query: {
|
||||
SortBy: 'SortName',
|
||||
SortOrder: 'Ascending',
|
||||
IncludeItemTypes: 'Series',
|
||||
Recursive: true,
|
||||
Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
|
||||
StartIndex: 0
|
||||
},
|
||||
view: libraryBrowser.getSavedView(key) || 'Poster'
|
||||
};
|
||||
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
query: {
|
||||
SortBy: 'SortName',
|
||||
SortOrder: 'Ascending',
|
||||
IncludeItemTypes: 'Series',
|
||||
Recursive: true,
|
||||
Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
|
||||
StartIndex: 0
|
||||
},
|
||||
view: libraryBrowser.getSavedView(key) || 'Poster'
|
||||
};
|
||||
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
pageData.query['Limit'] = userSettings.libraryPageSize();
|
||||
}
|
||||
|
||||
pageData.query.ParentId = params.topParentId;
|
||||
libraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
pageData.query['Limit'] = userSettings.libraryPageSize();
|
||||
}
|
||||
|
||||
return pageData;
|
||||
pageData.query.ParentId = params.topParentId;
|
||||
libraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||
}
|
||||
|
||||
function getQuery(context) {
|
||||
return getPageData(context).query;
|
||||
}
|
||||
|
||||
function getSavedQueryKey(context) {
|
||||
if (!context.savedQueryKey) {
|
||||
context.savedQueryKey = libraryBrowser.getSavedQueryKey('series');
|
||||
}
|
||||
|
||||
return context.savedQueryKey;
|
||||
}
|
||||
|
||||
const onViewStyleChange = () => {
|
||||
const viewStyle = this.getCurrentViewStyle();
|
||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
|
||||
if (viewStyle == 'List') {
|
||||
itemsContainer.classList.add('vertical-list');
|
||||
itemsContainer.classList.remove('vertical-wrap');
|
||||
} else {
|
||||
itemsContainer.classList.remove('vertical-list');
|
||||
itemsContainer.classList.add('vertical-wrap');
|
||||
}
|
||||
|
||||
itemsContainer.innerHTML = '';
|
||||
};
|
||||
|
||||
const reloadItems = (page) => {
|
||||
loading.show();
|
||||
isLoading = true;
|
||||
const query = getQuery(page);
|
||||
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
|
||||
function onNextPageClick() {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
query.StartIndex += query.Limit;
|
||||
}
|
||||
reloadItems(tabContent);
|
||||
}
|
||||
|
||||
function onPreviousPageClick() {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
|
||||
}
|
||||
reloadItems(tabContent);
|
||||
}
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
this.alphaPicker?.updateControls(query);
|
||||
let html;
|
||||
const pagingHtml = libraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
showLimit: false,
|
||||
updatePageSizeSetting: false,
|
||||
addLayoutButton: false,
|
||||
sortButton: false,
|
||||
filterButton: false
|
||||
});
|
||||
const viewStyle = this.getCurrentViewStyle();
|
||||
if (viewStyle == 'Thumb') {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'backdrop',
|
||||
preferThumb: true,
|
||||
context: 'tvshows',
|
||||
overlayMoreButton: true,
|
||||
showTitle: true,
|
||||
centerText: true
|
||||
});
|
||||
} else if (viewStyle == 'ThumbCard') {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'backdrop',
|
||||
preferThumb: true,
|
||||
context: 'tvshows',
|
||||
cardLayout: true,
|
||||
showTitle: true,
|
||||
showYear: true,
|
||||
centerText: true
|
||||
});
|
||||
} else if (viewStyle == 'Banner') {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'banner',
|
||||
preferBanner: true,
|
||||
context: 'tvshows'
|
||||
});
|
||||
} else if (viewStyle == 'List') {
|
||||
html = listView.getListViewHtml({
|
||||
items: result.Items,
|
||||
context: 'tvshows',
|
||||
sortBy: query.SortBy
|
||||
});
|
||||
} else if (viewStyle == 'PosterCard') {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'portrait',
|
||||
context: 'tvshows',
|
||||
showTitle: true,
|
||||
showYear: true,
|
||||
centerText: true,
|
||||
cardLayout: true
|
||||
});
|
||||
} else {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'portrait',
|
||||
context: 'tvshows',
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
overlayMoreButton: true,
|
||||
showTitle: true,
|
||||
showYear: true
|
||||
});
|
||||
}
|
||||
|
||||
let elems = tabContent.querySelectorAll('.paging');
|
||||
|
||||
for (const elem of elems) {
|
||||
elem.innerHTML = pagingHtml;
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnNextPage');
|
||||
for (const elem of elems) {
|
||||
elem.addEventListener('click', onNextPageClick);
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
||||
for (const elem of elems) {
|
||||
elem.addEventListener('click', onPreviousPageClick);
|
||||
}
|
||||
|
||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
itemsContainer.innerHTML = html;
|
||||
imageLoader.lazyChildren(itemsContainer);
|
||||
libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
|
||||
loading.hide();
|
||||
isLoading = false;
|
||||
|
||||
import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
|
||||
autoFocuser.autoFocus(page);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const data = {};
|
||||
let isLoading = false;
|
||||
|
||||
this.showFilterMenu = function () {
|
||||
import('../../components/filterdialog/filterdialog').then(({ default: filterDialogFactory }) => {
|
||||
const filterDialog = new filterDialogFactory({
|
||||
query: getQuery(tabContent),
|
||||
mode: 'series',
|
||||
serverId: ApiClient.serverId()
|
||||
});
|
||||
Events.on(filterDialog, 'filterchange', function () {
|
||||
getQuery(tabContent).StartIndex = 0;
|
||||
reloadItems(tabContent);
|
||||
});
|
||||
filterDialog.show();
|
||||
});
|
||||
};
|
||||
|
||||
this.getCurrentViewStyle = function () {
|
||||
return getPageData(tabContent).view;
|
||||
};
|
||||
|
||||
const initPage = (tabElement) => {
|
||||
const alphaPickerElement = tabElement.querySelector('.alphaPicker');
|
||||
const itemsContainer = tabElement.querySelector('.itemsContainer');
|
||||
|
||||
alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
|
||||
const newValue = e.detail.value;
|
||||
const query = getQuery(tabElement);
|
||||
if (newValue === '#') {
|
||||
query.NameLessThan = 'A';
|
||||
delete query.NameStartsWith;
|
||||
} else {
|
||||
query.NameStartsWith = newValue;
|
||||
delete query.NameLessThan;
|
||||
}
|
||||
query.StartIndex = 0;
|
||||
reloadItems(tabElement);
|
||||
});
|
||||
this.alphaPicker = new AlphaPicker({
|
||||
element: alphaPickerElement,
|
||||
valueChangeEvent: 'click'
|
||||
});
|
||||
|
||||
tabElement.querySelector('.alphaPicker').classList.add('alphabetPicker-right');
|
||||
alphaPickerElement.classList.add('alphaPicker-fixed-right');
|
||||
itemsContainer.classList.add('padded-right-withalphapicker');
|
||||
|
||||
tabElement.querySelector('.btnFilter').addEventListener('click', () => {
|
||||
this.showFilterMenu();
|
||||
});
|
||||
tabElement.querySelector('.btnSort').addEventListener('click', function (e) {
|
||||
libraryBrowser.showSortMenu({
|
||||
items: [{
|
||||
name: globalize.translate('Name'),
|
||||
id: 'SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionRandom'),
|
||||
id: 'Random'
|
||||
}, {
|
||||
name: globalize.translate('OptionImdbRating'),
|
||||
id: 'CommunityRating,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionDateShowAdded'),
|
||||
id: 'DateCreated,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionDateEpisodeAdded'),
|
||||
id: 'DateLastContentAdded,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionDatePlayed'),
|
||||
id: 'SeriesDatePlayed,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionParentalRating'),
|
||||
id: 'OfficialRating,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionReleaseDate'),
|
||||
id: 'PremiereDate,SortName'
|
||||
}],
|
||||
callback: function () {
|
||||
getQuery(tabElement).StartIndex = 0;
|
||||
reloadItems(tabElement);
|
||||
},
|
||||
query: getQuery(tabElement),
|
||||
button: e.target
|
||||
});
|
||||
});
|
||||
const btnSelectView = tabElement.querySelector('.btnSelectView');
|
||||
btnSelectView.addEventListener('click', (e) => {
|
||||
libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
|
||||
});
|
||||
btnSelectView.addEventListener('layoutchange', function (e) {
|
||||
const viewStyle = e.detail.viewStyle;
|
||||
getPageData(tabElement).view = viewStyle;
|
||||
libraryBrowser.saveViewSetting(getSavedQueryKey(tabElement), viewStyle);
|
||||
getQuery(tabElement).StartIndex = 0;
|
||||
onViewStyleChange();
|
||||
reloadItems(tabElement);
|
||||
});
|
||||
};
|
||||
|
||||
initPage(tabContent);
|
||||
onViewStyleChange();
|
||||
|
||||
this.renderTab = () => {
|
||||
reloadItems(tabContent);
|
||||
this.alphaPicker?.updateControls(getQuery(tabContent));
|
||||
};
|
||||
return pageData;
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
function getQuery(context) {
|
||||
return getPageData(context).query;
|
||||
}
|
||||
|
||||
function getSavedQueryKey(context) {
|
||||
if (!context.savedQueryKey) {
|
||||
context.savedQueryKey = libraryBrowser.getSavedQueryKey('series');
|
||||
}
|
||||
|
||||
return context.savedQueryKey;
|
||||
}
|
||||
|
||||
const onViewStyleChange = () => {
|
||||
const viewStyle = this.getCurrentViewStyle();
|
||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
|
||||
if (viewStyle == 'List') {
|
||||
itemsContainer.classList.add('vertical-list');
|
||||
itemsContainer.classList.remove('vertical-wrap');
|
||||
} else {
|
||||
itemsContainer.classList.remove('vertical-list');
|
||||
itemsContainer.classList.add('vertical-wrap');
|
||||
}
|
||||
|
||||
itemsContainer.innerHTML = '';
|
||||
};
|
||||
|
||||
const reloadItems = (page) => {
|
||||
loading.show();
|
||||
isLoading = true;
|
||||
const query = getQuery(page);
|
||||
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
|
||||
function onNextPageClick() {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
query.StartIndex += query.Limit;
|
||||
}
|
||||
reloadItems(tabContent);
|
||||
}
|
||||
|
||||
function onPreviousPageClick() {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (userSettings.libraryPageSize() > 0) {
|
||||
query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
|
||||
}
|
||||
reloadItems(tabContent);
|
||||
}
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
this.alphaPicker?.updateControls(query);
|
||||
let html;
|
||||
const pagingHtml = libraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
showLimit: false,
|
||||
updatePageSizeSetting: false,
|
||||
addLayoutButton: false,
|
||||
sortButton: false,
|
||||
filterButton: false
|
||||
});
|
||||
const viewStyle = this.getCurrentViewStyle();
|
||||
if (viewStyle == 'Thumb') {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'backdrop',
|
||||
preferThumb: true,
|
||||
context: 'tvshows',
|
||||
overlayMoreButton: true,
|
||||
showTitle: true,
|
||||
centerText: true
|
||||
});
|
||||
} else if (viewStyle == 'ThumbCard') {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'backdrop',
|
||||
preferThumb: true,
|
||||
context: 'tvshows',
|
||||
cardLayout: true,
|
||||
showTitle: true,
|
||||
showYear: true,
|
||||
centerText: true
|
||||
});
|
||||
} else if (viewStyle == 'Banner') {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'banner',
|
||||
preferBanner: true,
|
||||
context: 'tvshows'
|
||||
});
|
||||
} else if (viewStyle == 'List') {
|
||||
html = listView.getListViewHtml({
|
||||
items: result.Items,
|
||||
context: 'tvshows',
|
||||
sortBy: query.SortBy
|
||||
});
|
||||
} else if (viewStyle == 'PosterCard') {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'portrait',
|
||||
context: 'tvshows',
|
||||
showTitle: true,
|
||||
showYear: true,
|
||||
centerText: true,
|
||||
cardLayout: true
|
||||
});
|
||||
} else {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'portrait',
|
||||
context: 'tvshows',
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
overlayMoreButton: true,
|
||||
showTitle: true,
|
||||
showYear: true
|
||||
});
|
||||
}
|
||||
|
||||
let elems = tabContent.querySelectorAll('.paging');
|
||||
|
||||
for (const elem of elems) {
|
||||
elem.innerHTML = pagingHtml;
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnNextPage');
|
||||
for (const elem of elems) {
|
||||
elem.addEventListener('click', onNextPageClick);
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
||||
for (const elem of elems) {
|
||||
elem.addEventListener('click', onPreviousPageClick);
|
||||
}
|
||||
|
||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
itemsContainer.innerHTML = html;
|
||||
imageLoader.lazyChildren(itemsContainer);
|
||||
libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
|
||||
loading.hide();
|
||||
isLoading = false;
|
||||
|
||||
import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
|
||||
autoFocuser.autoFocus(page);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const data = {};
|
||||
let isLoading = false;
|
||||
|
||||
this.showFilterMenu = function () {
|
||||
import('../../components/filterdialog/filterdialog').then(({ default: filterDialogFactory }) => {
|
||||
const filterDialog = new filterDialogFactory({
|
||||
query: getQuery(tabContent),
|
||||
mode: 'series',
|
||||
serverId: ApiClient.serverId()
|
||||
});
|
||||
Events.on(filterDialog, 'filterchange', function () {
|
||||
getQuery(tabContent).StartIndex = 0;
|
||||
reloadItems(tabContent);
|
||||
});
|
||||
filterDialog.show();
|
||||
});
|
||||
};
|
||||
|
||||
this.getCurrentViewStyle = function () {
|
||||
return getPageData(tabContent).view;
|
||||
};
|
||||
|
||||
const initPage = (tabElement) => {
|
||||
const alphaPickerElement = tabElement.querySelector('.alphaPicker');
|
||||
const itemsContainer = tabElement.querySelector('.itemsContainer');
|
||||
|
||||
alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
|
||||
const newValue = e.detail.value;
|
||||
const query = getQuery(tabElement);
|
||||
if (newValue === '#') {
|
||||
query.NameLessThan = 'A';
|
||||
delete query.NameStartsWith;
|
||||
} else {
|
||||
query.NameStartsWith = newValue;
|
||||
delete query.NameLessThan;
|
||||
}
|
||||
query.StartIndex = 0;
|
||||
reloadItems(tabElement);
|
||||
});
|
||||
this.alphaPicker = new AlphaPicker({
|
||||
element: alphaPickerElement,
|
||||
valueChangeEvent: 'click'
|
||||
});
|
||||
|
||||
tabElement.querySelector('.alphaPicker').classList.add('alphabetPicker-right');
|
||||
alphaPickerElement.classList.add('alphaPicker-fixed-right');
|
||||
itemsContainer.classList.add('padded-right-withalphapicker');
|
||||
|
||||
tabElement.querySelector('.btnFilter').addEventListener('click', () => {
|
||||
this.showFilterMenu();
|
||||
});
|
||||
tabElement.querySelector('.btnSort').addEventListener('click', function (e) {
|
||||
libraryBrowser.showSortMenu({
|
||||
items: [{
|
||||
name: globalize.translate('Name'),
|
||||
id: 'SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionRandom'),
|
||||
id: 'Random'
|
||||
}, {
|
||||
name: globalize.translate('OptionImdbRating'),
|
||||
id: 'CommunityRating,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionDateShowAdded'),
|
||||
id: 'DateCreated,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionDateEpisodeAdded'),
|
||||
id: 'DateLastContentAdded,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionDatePlayed'),
|
||||
id: 'SeriesDatePlayed,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionParentalRating'),
|
||||
id: 'OfficialRating,SortName'
|
||||
}, {
|
||||
name: globalize.translate('OptionReleaseDate'),
|
||||
id: 'PremiereDate,SortName'
|
||||
}],
|
||||
callback: function () {
|
||||
getQuery(tabElement).StartIndex = 0;
|
||||
reloadItems(tabElement);
|
||||
},
|
||||
query: getQuery(tabElement),
|
||||
button: e.target
|
||||
});
|
||||
});
|
||||
const btnSelectView = tabElement.querySelector('.btnSelectView');
|
||||
btnSelectView.addEventListener('click', (e) => {
|
||||
libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
|
||||
});
|
||||
btnSelectView.addEventListener('layoutchange', function (e) {
|
||||
const viewStyle = e.detail.viewStyle;
|
||||
getPageData(tabElement).view = viewStyle;
|
||||
libraryBrowser.saveViewSetting(getSavedQueryKey(tabElement), viewStyle);
|
||||
getQuery(tabElement).StartIndex = 0;
|
||||
onViewStyleChange();
|
||||
reloadItems(tabElement);
|
||||
});
|
||||
};
|
||||
|
||||
initPage(tabContent);
|
||||
onViewStyleChange();
|
||||
|
||||
this.renderTab = () => {
|
||||
reloadItems(tabContent);
|
||||
this.alphaPicker?.updateControls(getQuery(tabContent));
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -2,73 +2,70 @@ import loading from '../../components/loading/loading';
|
||||
import libraryBrowser from '../../scripts/libraryBrowser';
|
||||
import cardBuilder from '../../components/cardbuilder/cardBuilder';
|
||||
|
||||
/* eslint-disable indent */
|
||||
function getQuery(params) {
|
||||
const key = getSavedQueryKey();
|
||||
let pageData = data[key];
|
||||
|
||||
function getQuery(params) {
|
||||
const key = getSavedQueryKey();
|
||||
let pageData = data[key];
|
||||
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
query: {
|
||||
SortBy: 'SortName',
|
||||
SortOrder: 'Ascending',
|
||||
IncludeItemTypes: 'Series',
|
||||
Recursive: true,
|
||||
Fields: 'DateCreated,PrimaryImageAspectRatio',
|
||||
StartIndex: 0
|
||||
}
|
||||
};
|
||||
pageData.query.ParentId = params.topParentId;
|
||||
}
|
||||
|
||||
return pageData.query;
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
query: {
|
||||
SortBy: 'SortName',
|
||||
SortOrder: 'Ascending',
|
||||
IncludeItemTypes: 'Series',
|
||||
Recursive: true,
|
||||
Fields: 'DateCreated,PrimaryImageAspectRatio',
|
||||
StartIndex: 0
|
||||
}
|
||||
};
|
||||
pageData.query.ParentId = params.topParentId;
|
||||
}
|
||||
|
||||
function getSavedQueryKey() {
|
||||
return libraryBrowser.getSavedQueryKey('studios');
|
||||
}
|
||||
return pageData.query;
|
||||
}
|
||||
|
||||
function getPromise(context, params) {
|
||||
const query = getQuery(params);
|
||||
loading.show();
|
||||
return ApiClient.getStudios(ApiClient.getCurrentUserId(), query);
|
||||
}
|
||||
function getSavedQueryKey() {
|
||||
return libraryBrowser.getSavedQueryKey('studios');
|
||||
}
|
||||
|
||||
function reloadItems(context, params, promise) {
|
||||
promise.then(function (result) {
|
||||
const elem = context.querySelector('#items');
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: 'backdrop',
|
||||
preferThumb: true,
|
||||
showTitle: true,
|
||||
scalable: true,
|
||||
centerText: true,
|
||||
overlayMoreButton: true,
|
||||
context: 'tvshows'
|
||||
});
|
||||
loading.hide();
|
||||
function getPromise(context, params) {
|
||||
const query = getQuery(params);
|
||||
loading.show();
|
||||
return ApiClient.getStudios(ApiClient.getCurrentUserId(), query);
|
||||
}
|
||||
|
||||
import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
|
||||
autoFocuser.autoFocus(context);
|
||||
});
|
||||
function reloadItems(context, params, promise) {
|
||||
promise.then(function (result) {
|
||||
const elem = context.querySelector('#items');
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: 'backdrop',
|
||||
preferThumb: true,
|
||||
showTitle: true,
|
||||
scalable: true,
|
||||
centerText: true,
|
||||
overlayMoreButton: true,
|
||||
context: 'tvshows'
|
||||
});
|
||||
}
|
||||
loading.hide();
|
||||
|
||||
const data = {};
|
||||
import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
|
||||
autoFocuser.autoFocus(context);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export default function (view, params, tabContent) {
|
||||
let promise;
|
||||
const self = this;
|
||||
const data = {};
|
||||
|
||||
self.preRender = function () {
|
||||
promise = getPromise(view, params);
|
||||
};
|
||||
export default function (view, params, tabContent) {
|
||||
let promise;
|
||||
const self = this;
|
||||
|
||||
self.renderTab = function () {
|
||||
reloadItems(tabContent, params, promise);
|
||||
};
|
||||
}
|
||||
self.preRender = function () {
|
||||
promise = getPromise(view, params);
|
||||
};
|
||||
|
||||
self.renderTab = function () {
|
||||
reloadItems(tabContent, params, promise);
|
||||
};
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
||||
+120
-123
@@ -7,138 +7,135 @@ import globalize from '../../scripts/globalize';
|
||||
import '../../styles/scrollstyles.scss';
|
||||
import '../../elements/emby-itemscontainer/emby-itemscontainer';
|
||||
|
||||
/* eslint-disable indent */
|
||||
function getUpcomingPromise(context, params) {
|
||||
loading.show();
|
||||
const query = {
|
||||
Limit: 48,
|
||||
Fields: 'AirTime',
|
||||
UserId: ApiClient.getCurrentUserId(),
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
|
||||
EnableTotalRecordCount: false
|
||||
};
|
||||
query.ParentId = params.topParentId;
|
||||
return ApiClient.getJSON(ApiClient.getUrl('Shows/Upcoming', query));
|
||||
}
|
||||
|
||||
function getUpcomingPromise(context, params) {
|
||||
loading.show();
|
||||
const query = {
|
||||
Limit: 48,
|
||||
Fields: 'AirTime',
|
||||
UserId: ApiClient.getCurrentUserId(),
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
|
||||
EnableTotalRecordCount: false
|
||||
};
|
||||
query.ParentId = params.topParentId;
|
||||
return ApiClient.getJSON(ApiClient.getUrl('Shows/Upcoming', query));
|
||||
}
|
||||
function loadUpcoming(context, params, promise) {
|
||||
promise.then(function (result) {
|
||||
const items = result.Items;
|
||||
|
||||
function loadUpcoming(context, params, promise) {
|
||||
promise.then(function (result) {
|
||||
const items = result.Items;
|
||||
if (items.length) {
|
||||
context.querySelector('.noItemsMessage').style.display = 'none';
|
||||
} else {
|
||||
context.querySelector('.noItemsMessage').style.display = 'block';
|
||||
}
|
||||
|
||||
if (items.length) {
|
||||
context.querySelector('.noItemsMessage').style.display = 'none';
|
||||
} else {
|
||||
context.querySelector('.noItemsMessage').style.display = 'block';
|
||||
renderUpcoming(context.querySelector('#upcomingItems'), items);
|
||||
loading.hide();
|
||||
});
|
||||
}
|
||||
|
||||
function enableScrollX() {
|
||||
return !layoutManager.desktop;
|
||||
}
|
||||
|
||||
function getThumbShape() {
|
||||
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
|
||||
}
|
||||
|
||||
function renderUpcoming(elem, items) {
|
||||
const groups = [];
|
||||
let currentGroupName = '';
|
||||
let currentGroup = [];
|
||||
|
||||
for (let i = 0, length = items.length; i < length; i++) {
|
||||
const item = items[i];
|
||||
let dateText = '';
|
||||
|
||||
if (item.PremiereDate) {
|
||||
try {
|
||||
const premiereDate = datetime.parseISO8601Date(item.PremiereDate, true);
|
||||
dateText = datetime.isRelativeDay(premiereDate, -1) ? globalize.translate('Yesterday') : datetime.toLocaleDateString(premiereDate, {
|
||||
weekday: 'long',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('error parsing timestamp for upcoming tv shows');
|
||||
}
|
||||
}
|
||||
|
||||
if (dateText != currentGroupName) {
|
||||
if (currentGroup.length) {
|
||||
groups.push({
|
||||
name: currentGroupName,
|
||||
items: currentGroup
|
||||
});
|
||||
}
|
||||
|
||||
renderUpcoming(context.querySelector('#upcomingItems'), items);
|
||||
loading.hide();
|
||||
currentGroupName = dateText;
|
||||
currentGroup = [item];
|
||||
} else {
|
||||
currentGroup.push(item);
|
||||
}
|
||||
}
|
||||
|
||||
let html = '';
|
||||
|
||||
for (let i = 0, length = groups.length; i < length; i++) {
|
||||
const group = groups[i];
|
||||
html += '<div class="verticalSection">';
|
||||
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + group.name + '</h2>';
|
||||
let allowBottomPadding = true;
|
||||
|
||||
if (enableScrollX()) {
|
||||
allowBottomPadding = false;
|
||||
let scrollXClass = 'scrollX hiddenScrollX';
|
||||
|
||||
if (layoutManager.tv) {
|
||||
scrollXClass += ' smoothScrollX';
|
||||
}
|
||||
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer ' + scrollXClass + ' padded-left padded-right">';
|
||||
} else {
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">';
|
||||
}
|
||||
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: group.items,
|
||||
showLocationTypeIndicator: false,
|
||||
shape: getThumbShape(),
|
||||
showTitle: true,
|
||||
preferThumb: true,
|
||||
lazy: true,
|
||||
showDetailsMenu: true,
|
||||
centerText: true,
|
||||
showParentTitle: true,
|
||||
overlayText: false,
|
||||
allowBottomPadding: allowBottomPadding,
|
||||
cardLayout: false,
|
||||
overlayMoreButton: true,
|
||||
missingIndicator: false
|
||||
});
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
function enableScrollX() {
|
||||
return !layoutManager.desktop;
|
||||
}
|
||||
elem.innerHTML = html;
|
||||
imageLoader.lazyChildren(elem);
|
||||
}
|
||||
|
||||
function getThumbShape() {
|
||||
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
|
||||
}
|
||||
export default function (view, params, tabContent) {
|
||||
let upcomingPromise;
|
||||
const self = this;
|
||||
|
||||
function renderUpcoming(elem, items) {
|
||||
const groups = [];
|
||||
let currentGroupName = '';
|
||||
let currentGroup = [];
|
||||
self.preRender = function () {
|
||||
upcomingPromise = getUpcomingPromise(view, params);
|
||||
};
|
||||
|
||||
for (let i = 0, length = items.length; i < length; i++) {
|
||||
const item = items[i];
|
||||
let dateText = '';
|
||||
self.renderTab = function () {
|
||||
loadUpcoming(tabContent, params, upcomingPromise);
|
||||
};
|
||||
}
|
||||
|
||||
if (item.PremiereDate) {
|
||||
try {
|
||||
const premiereDate = datetime.parseISO8601Date(item.PremiereDate, true);
|
||||
dateText = datetime.isRelativeDay(premiereDate, -1) ? globalize.translate('Yesterday') : datetime.toLocaleDateString(premiereDate, {
|
||||
weekday: 'long',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('error parsing timestamp for upcoming tv shows');
|
||||
}
|
||||
}
|
||||
|
||||
if (dateText != currentGroupName) {
|
||||
if (currentGroup.length) {
|
||||
groups.push({
|
||||
name: currentGroupName,
|
||||
items: currentGroup
|
||||
});
|
||||
}
|
||||
|
||||
currentGroupName = dateText;
|
||||
currentGroup = [item];
|
||||
} else {
|
||||
currentGroup.push(item);
|
||||
}
|
||||
}
|
||||
|
||||
let html = '';
|
||||
|
||||
for (let i = 0, length = groups.length; i < length; i++) {
|
||||
const group = groups[i];
|
||||
html += '<div class="verticalSection">';
|
||||
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + group.name + '</h2>';
|
||||
let allowBottomPadding = true;
|
||||
|
||||
if (enableScrollX()) {
|
||||
allowBottomPadding = false;
|
||||
let scrollXClass = 'scrollX hiddenScrollX';
|
||||
|
||||
if (layoutManager.tv) {
|
||||
scrollXClass += ' smoothScrollX';
|
||||
}
|
||||
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer ' + scrollXClass + ' padded-left padded-right">';
|
||||
} else {
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">';
|
||||
}
|
||||
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: group.items,
|
||||
showLocationTypeIndicator: false,
|
||||
shape: getThumbShape(),
|
||||
showTitle: true,
|
||||
preferThumb: true,
|
||||
lazy: true,
|
||||
showDetailsMenu: true,
|
||||
centerText: true,
|
||||
showParentTitle: true,
|
||||
overlayText: false,
|
||||
allowBottomPadding: allowBottomPadding,
|
||||
cardLayout: false,
|
||||
overlayMoreButton: true,
|
||||
missingIndicator: false
|
||||
});
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
elem.innerHTML = html;
|
||||
imageLoader.lazyChildren(elem);
|
||||
}
|
||||
|
||||
export default function (view, params, tabContent) {
|
||||
let upcomingPromise;
|
||||
const self = this;
|
||||
|
||||
self.preRender = function () {
|
||||
upcomingPromise = getUpcomingPromise(view, params);
|
||||
};
|
||||
|
||||
self.renderTab = function () {
|
||||
loadUpcoming(tabContent, params, upcomingPromise);
|
||||
};
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
||||
Reference in New Issue
Block a user