mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update movies
This commit is contained in:
Luke Pulverenti
parent
c2abb7437e
commit
af289c3e71
2 changed files with 229 additions and 147 deletions
|
|
@ -54,14 +54,20 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="pageTabContent ehsContent" id="trailersTab" data-index="2">
|
||||
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
|
||||
<div class="paging"></div>
|
||||
<button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
|
||||
<button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
|
||||
</div>
|
||||
|
||||
<div class="alphaPicker alphabetPicker vertical">
|
||||
</div>
|
||||
<div class="viewSettings">
|
||||
<div class="listTopPaging">
|
||||
</div>
|
||||
|
||||
<div class="itemsContainer itemsContainerWithAlphaPicker">
|
||||
</div>
|
||||
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
|
||||
<div class="paging"></div>
|
||||
</div>
|
||||
<div class="itemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
|
||||
<p class="noItemsMessage" style="display:none;text-align:center;">${MessageNoTrailersFound}</p>
|
||||
</div>
|
||||
<div class="pageTabContent ehsContent" id="collectionsTab" data-index="3">
|
||||
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .25em;">
|
||||
|
|
|
|||
|
|
@ -1,103 +1,229 @@
|
|||
define(['jQuery', 'alphaPicker'], function ($, alphaPicker) {
|
||||
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker'], function (events, libraryBrowser, imageLoader, alphaPicker) {
|
||||
|
||||
var data = {};
|
||||
return function (view, params, tabContent) {
|
||||
|
||||
function getQuery(context) {
|
||||
var self = this;
|
||||
var pageSize = libraryBrowser.getDefaultPageSize();
|
||||
|
||||
var key = getSavedQueryKey(context);
|
||||
var pageData = data[key];
|
||||
var data = {};
|
||||
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
query: {
|
||||
SortBy: "SortName",
|
||||
SortOrder: "Ascending",
|
||||
IncludeItemTypes: "Trailer",
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio,SortName,MediaSourceCount,SyncInfo",
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
|
||||
StartIndex: 0,
|
||||
Limit: LibraryBrowser.getDefaultPageSize()
|
||||
function getPageData(context) {
|
||||
var key = getSavedQueryKey(context);
|
||||
var pageData = data[key];
|
||||
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
query: {
|
||||
SortBy: "SortName",
|
||||
SortOrder: "Ascending",
|
||||
IncludeItemTypes: "Trailer",
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio,MediaSourceCount,SortName,SyncInfo",
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
|
||||
StartIndex: 0,
|
||||
Limit: pageSize
|
||||
},
|
||||
view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Poster', 'Poster')
|
||||
};
|
||||
|
||||
libraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||
}
|
||||
return pageData;
|
||||
}
|
||||
|
||||
function getQuery(context) {
|
||||
|
||||
return getPageData(context).query;
|
||||
}
|
||||
|
||||
function getSavedQueryKey(context) {
|
||||
|
||||
if (!context.savedQueryKey) {
|
||||
context.savedQueryKey = libraryBrowser.getSavedQueryKey('trailers');
|
||||
}
|
||||
return context.savedQueryKey;
|
||||
}
|
||||
|
||||
function reloadItems(page) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var query = getQuery(page);
|
||||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
|
||||
|
||||
// Scroll back up so they can see the results from the beginning
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
updateFilterControls(page);
|
||||
|
||||
var pagingHtml = LibraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
showLimit: false,
|
||||
updatePageSizeSetting: false,
|
||||
addLayoutButton: false,
|
||||
sortButton: false,
|
||||
filterButton: false
|
||||
});
|
||||
|
||||
var html;
|
||||
var viewStyle = self.getCurrentViewStyle();
|
||||
|
||||
if (viewStyle == "Thumb") {
|
||||
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
context: 'movies',
|
||||
lazy: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
};
|
||||
else if (viewStyle == "ThumbCard") {
|
||||
|
||||
LibraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
context: 'movies',
|
||||
lazy: true,
|
||||
cardLayout: true,
|
||||
showTitle: true,
|
||||
showYear: true
|
||||
});
|
||||
}
|
||||
else if (viewStyle == "Banner") {
|
||||
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "banner",
|
||||
preferBanner: true,
|
||||
context: 'movies',
|
||||
lazy: true
|
||||
});
|
||||
}
|
||||
else if (viewStyle == "List") {
|
||||
|
||||
html = libraryBrowser.getListViewHtml({
|
||||
items: result.Items,
|
||||
context: 'movies',
|
||||
sortBy: query.SortBy
|
||||
});
|
||||
}
|
||||
else if (viewStyle == "PosterCard") {
|
||||
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
context: 'movies',
|
||||
showTitle: true,
|
||||
showYear: true,
|
||||
lazy: true,
|
||||
cardLayout: true
|
||||
});
|
||||
}
|
||||
else {
|
||||
|
||||
// Poster
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
context: 'movies',
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
|
||||
var i, length;
|
||||
var elems = tabContent.querySelectorAll('.paging');
|
||||
for (i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].innerHTML = pagingHtml;
|
||||
}
|
||||
|
||||
function onNextPageClick() {
|
||||
query.StartIndex += query.Limit;
|
||||
reloadItems(tabContent);
|
||||
}
|
||||
|
||||
function onPreviousPageClick() {
|
||||
query.StartIndex -= query.Limit;
|
||||
reloadItems(tabContent);
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnNextPage');
|
||||
for (i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onNextPageClick);
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
||||
for (i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onPreviousPageClick);
|
||||
}
|
||||
|
||||
if (!items.length) {
|
||||
html = '<p style="text-align:center;">' + Globalize.translate('MessageNoTrailersFound') + '</p>';
|
||||
}
|
||||
|
||||
var itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
itemsContainer.innerHTML = html;
|
||||
imageLoader.lazyChildren(itemsContainer);
|
||||
|
||||
libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
return pageData.query;
|
||||
}
|
||||
|
||||
function getSavedQueryKey(context) {
|
||||
self.showFilterMenu = function () {
|
||||
|
||||
if (!context.savedQueryKey) {
|
||||
context.savedQueryKey = LibraryBrowser.getSavedQueryKey('trailers');
|
||||
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
|
||||
|
||||
var filterDialog = new filterDialogFactory({
|
||||
query: getQuery(tabContent)
|
||||
});
|
||||
|
||||
Events.on(filterDialog, 'filterchange', function () {
|
||||
getQuery(tabContent).StartIndex = 0;
|
||||
reloadItems(tabContent);
|
||||
});
|
||||
|
||||
filterDialog.show();
|
||||
});
|
||||
}
|
||||
return context.savedQueryKey;
|
||||
}
|
||||
|
||||
function reloadItems(page) {
|
||||
function updateFilterControls(tabContent) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
var query = getQuery(tabContent);
|
||||
self.alphaPicker.value(query.NameStartsWithOrGreater);
|
||||
}
|
||||
|
||||
var query = getQuery(page);
|
||||
var userId = Dashboard.getCurrentUserId();
|
||||
function initPage(tabContent) {
|
||||
|
||||
ApiClient.getItems(userId, query).then(function (result) {
|
||||
|
||||
// Scroll back up so they can see the results from the beginning
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
if (result.Items.length) {
|
||||
$('.noItemsMessage', page).hide();
|
||||
}
|
||||
else {
|
||||
$('.noItemsMessage', page).show();
|
||||
}
|
||||
|
||||
var html = '';
|
||||
var pagingHtml = LibraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
sortButton: true,
|
||||
showLimit: false,
|
||||
updatePageSizeSetting: false,
|
||||
filterButton: true
|
||||
var alphaPickerElement = tabContent.querySelector('.alphaPicker');
|
||||
alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
|
||||
var newValue = e.detail.value;
|
||||
var query = getQuery(tabContent);
|
||||
query.NameStartsWithOrGreater = newValue;
|
||||
query.StartIndex = 0;
|
||||
reloadItems(tabContent);
|
||||
});
|
||||
|
||||
page.querySelector('.listTopPaging').innerHTML = pagingHtml;
|
||||
|
||||
updateFilterControls(page);
|
||||
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
lazy: true,
|
||||
showDetailsMenu: true,
|
||||
overlayPlayButton: true
|
||||
self.alphaPicker = new alphaPicker({
|
||||
element: alphaPickerElement,
|
||||
valueChangeEvent: 'click'
|
||||
});
|
||||
|
||||
var elem = page.querySelector('.itemsContainer');
|
||||
elem.innerHTML = html + pagingHtml;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
$('.btnNextPage', page).on('click', function () {
|
||||
query.StartIndex += query.Limit;
|
||||
reloadItems(page);
|
||||
tabContent.querySelector('.btnFilter').addEventListener('click', function () {
|
||||
self.showFilterMenu();
|
||||
});
|
||||
|
||||
$('.btnPreviousPage', page).on('click', function () {
|
||||
query.StartIndex -= query.Limit;
|
||||
reloadItems(page);
|
||||
});
|
||||
|
||||
$('.btnFilter', page).on('click', function () {
|
||||
showFilterMenu(page);
|
||||
});
|
||||
|
||||
// On callback make sure to set StartIndex = 0
|
||||
$('.btnSort', page).on('click', function () {
|
||||
LibraryBrowser.showSortMenu({
|
||||
tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
|
||||
libraryBrowser.showSortMenu({
|
||||
items: [{
|
||||
name: Globalize.translate('OptionNameSort'),
|
||||
id: 'SortName'
|
||||
|
|
@ -127,78 +253,28 @@
|
|||
id: 'PremiereDate,SortName'
|
||||
}],
|
||||
callback: function () {
|
||||
reloadItems(page);
|
||||
getQuery(tabContent).StartIndex = 0;
|
||||
reloadItems(tabContent);
|
||||
},
|
||||
query: query
|
||||
query: getQuery(tabContent),
|
||||
button: e.target
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
LibraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
|
||||
function showFilterMenu(page) {
|
||||
|
||||
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
|
||||
|
||||
var filterDialog = new filterDialogFactory({
|
||||
query: getQuery(page)
|
||||
});
|
||||
|
||||
Events.on(filterDialog, 'filterchange', function () {
|
||||
reloadItems(page);
|
||||
});
|
||||
|
||||
filterDialog.show();
|
||||
});
|
||||
}
|
||||
|
||||
function updateFilterControls(tabContent) {
|
||||
|
||||
var query = getQuery(tabContent);
|
||||
|
||||
self.alphaPicker.value(query.NameStartsWithOrGreater);
|
||||
}
|
||||
|
||||
function initPage(page, tabContent) {
|
||||
|
||||
var alphaPickerElement = tabContent.querySelector('.alphaPicker');
|
||||
alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
|
||||
var newValue = e.detail.value;
|
||||
var query = getQuery(tabContent);
|
||||
query.NameStartsWithOrGreater = newValue;
|
||||
query.StartIndex = 0;
|
||||
reloadItems(tabContent);
|
||||
});
|
||||
|
||||
self.alphaPicker = new alphaPicker({
|
||||
element: alphaPickerElement,
|
||||
valueChangeEvent: 'click'
|
||||
});
|
||||
|
||||
tabContent.querySelector('.itemsContainer').addEventListener('needsrefresh', function () {
|
||||
|
||||
reloadItems(tabContent);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
|
||||
var self = this;
|
||||
|
||||
self.initTab = function () {
|
||||
|
||||
initPage(view, tabContent);
|
||||
self.getCurrentViewStyle = function () {
|
||||
return getPageData(tabContent).view;
|
||||
};
|
||||
|
||||
initPage(tabContent);
|
||||
|
||||
self.renderTab = function () {
|
||||
|
||||
reloadItems(tabContent);
|
||||
updateFilterControls(tabContent);
|
||||
};
|
||||
};
|
||||
|
||||
self.destroy = function () {
|
||||
};
|
||||
};
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue