mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update movie tabs
This commit is contained in:
Luke Pulverenti
parent
98fbc2497c
commit
746135c2f7
8 changed files with 651 additions and 662 deletions
|
|
@ -1,311 +1,314 @@
|
|||
define(['jQuery'], function ($) {
|
||||
|
||||
var data = {};
|
||||
return function (view, params, tabContent) {
|
||||
|
||||
function getPageData(context) {
|
||||
var key = getSavedQueryKey(context);
|
||||
var pageData = data[key];
|
||||
var self = this;
|
||||
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
query: {
|
||||
SortBy: "SortName",
|
||||
SortOrder: "Ascending",
|
||||
IncludeItemTypes: "Movie",
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio,SortName,MediaSourceCount,SyncInfo",
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
|
||||
StartIndex: 0,
|
||||
Limit: LibraryBrowser.getDefaultPageSize()
|
||||
},
|
||||
view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Poster', 'Poster')
|
||||
};
|
||||
var data = {};
|
||||
|
||||
pageData.query.ParentId = LibraryMenu.getTopParentId();
|
||||
LibraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||
function getPageData(context) {
|
||||
var key = getSavedQueryKey(context);
|
||||
var pageData = data[key];
|
||||
|
||||
if (!pageData) {
|
||||
pageData = data[key] = {
|
||||
query: {
|
||||
SortBy: "SortName",
|
||||
SortOrder: "Ascending",
|
||||
IncludeItemTypes: "Movie",
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio,SortName,MediaSourceCount,SyncInfo",
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
|
||||
StartIndex: 0,
|
||||
Limit: LibraryBrowser.getDefaultPageSize()
|
||||
},
|
||||
view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Poster', 'Poster')
|
||||
};
|
||||
|
||||
pageData.query.ParentId = params.topParentId;
|
||||
LibraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||
}
|
||||
return pageData;
|
||||
}
|
||||
return pageData;
|
||||
}
|
||||
|
||||
function getQuery(context) {
|
||||
function getQuery(context) {
|
||||
|
||||
return getPageData(context).query;
|
||||
}
|
||||
|
||||
function getSavedQueryKey(context) {
|
||||
|
||||
if (!context.savedQueryKey) {
|
||||
context.savedQueryKey = LibraryBrowser.getSavedQueryKey('movies');
|
||||
return getPageData(context).query;
|
||||
}
|
||||
return context.savedQueryKey;
|
||||
}
|
||||
|
||||
function reloadItems(context) {
|
||||
function getSavedQueryKey(context) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var userId = Dashboard.getCurrentUserId();
|
||||
|
||||
var query = getQuery(context);
|
||||
var view = getPageData(context).view;
|
||||
|
||||
ApiClient.getItems(userId, query).then(function (result) {
|
||||
|
||||
// Scroll back up so they can see the results from the beginning
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
var html = '';
|
||||
|
||||
var pagingHtml = LibraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
showLimit: false,
|
||||
updatePageSizeSetting: false,
|
||||
addLayoutButton: true,
|
||||
sortButton: true,
|
||||
currentLayout: view,
|
||||
layouts: 'Banner,List,Poster,PosterCard,Thumb,ThumbCard,Timeline',
|
||||
filterButton: true
|
||||
});
|
||||
|
||||
context.querySelector('.listTopPaging').innerHTML = pagingHtml;
|
||||
|
||||
updateFilterControls(context);
|
||||
|
||||
if (view == "Thumb") {
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
lazy: true,
|
||||
showDetailsMenu: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
if (!context.savedQueryKey) {
|
||||
context.savedQueryKey = LibraryBrowser.getSavedQueryKey('movies');
|
||||
}
|
||||
else if (view == "ThumbCard") {
|
||||
return context.savedQueryKey;
|
||||
}
|
||||
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
lazy: true,
|
||||
showTitle: true,
|
||||
cardLayout: true,
|
||||
showYear: true,
|
||||
showDetailsMenu: true
|
||||
function reloadItems(context) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var userId = Dashboard.getCurrentUserId();
|
||||
|
||||
var query = getQuery(context);
|
||||
var view = getPageData(context).view;
|
||||
|
||||
ApiClient.getItems(userId, query).then(function (result) {
|
||||
|
||||
// Scroll back up so they can see the results from the beginning
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
var html = '';
|
||||
|
||||
var pagingHtml = LibraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
showLimit: false,
|
||||
updatePageSizeSetting: false,
|
||||
addLayoutButton: true,
|
||||
sortButton: true,
|
||||
currentLayout: view,
|
||||
layouts: 'Banner,List,Poster,PosterCard,Thumb,ThumbCard,Timeline',
|
||||
filterButton: true
|
||||
});
|
||||
}
|
||||
else if (view == "Banner") {
|
||||
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "banner",
|
||||
preferBanner: true,
|
||||
lazy: true,
|
||||
showDetailsMenu: true
|
||||
});
|
||||
}
|
||||
else if (view == "List") {
|
||||
context.querySelector('.listTopPaging').innerHTML = pagingHtml;
|
||||
|
||||
html = LibraryBrowser.getListViewHtml({
|
||||
items: result.Items,
|
||||
sortBy: query.SortBy
|
||||
});
|
||||
}
|
||||
else if (view == "Poster") {
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
showDetailsMenu: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
else if (view == "PosterCard") {
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
showTitle: true,
|
||||
showYear: true,
|
||||
lazy: true,
|
||||
cardLayout: true,
|
||||
showDetailsMenu: true
|
||||
});
|
||||
}
|
||||
else if (view == "Timeline") {
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
showTitle: true,
|
||||
timeline: true,
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
showDetailsMenu: true
|
||||
});
|
||||
}
|
||||
updateFilterControls(context);
|
||||
|
||||
var elem = context.querySelector('.itemsContainer');
|
||||
elem.innerHTML = html + pagingHtml;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
if (view == "Thumb") {
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
lazy: true,
|
||||
showDetailsMenu: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
else if (view == "ThumbCard") {
|
||||
|
||||
$('.btnNextPage', context).on('click', function () {
|
||||
query.StartIndex += query.Limit;
|
||||
reloadItems(context);
|
||||
});
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
lazy: true,
|
||||
showTitle: true,
|
||||
cardLayout: true,
|
||||
showYear: true,
|
||||
showDetailsMenu: true
|
||||
});
|
||||
}
|
||||
else if (view == "Banner") {
|
||||
|
||||
$('.btnPreviousPage', context).on('click', function () {
|
||||
query.StartIndex -= query.Limit;
|
||||
reloadItems(context);
|
||||
});
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "banner",
|
||||
preferBanner: true,
|
||||
lazy: true,
|
||||
showDetailsMenu: true
|
||||
});
|
||||
}
|
||||
else if (view == "List") {
|
||||
|
||||
$('.btnChangeLayout', context).on('layoutchange', function (e, layout) {
|
||||
|
||||
if (layout == 'Timeline') {
|
||||
getQuery(context).SortBy = 'ProductionYear,PremiereDate,SortName';
|
||||
getQuery(context).SortOrder = 'Descending';
|
||||
html = LibraryBrowser.getListViewHtml({
|
||||
items: result.Items,
|
||||
sortBy: query.SortBy
|
||||
});
|
||||
}
|
||||
else if (view == "Poster") {
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
showDetailsMenu: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
else if (view == "PosterCard") {
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
showTitle: true,
|
||||
showYear: true,
|
||||
lazy: true,
|
||||
cardLayout: true,
|
||||
showDetailsMenu: true
|
||||
});
|
||||
}
|
||||
else if (view == "Timeline") {
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
showTitle: true,
|
||||
timeline: true,
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
showDetailsMenu: true
|
||||
});
|
||||
}
|
||||
|
||||
getPageData(context).view = layout;
|
||||
LibraryBrowser.saveViewSetting(getSavedQueryKey(context), layout);
|
||||
reloadItems(context);
|
||||
});
|
||||
var elem = context.querySelector('.itemsContainer');
|
||||
elem.innerHTML = html + pagingHtml;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
$('.btnFilter', context).on('click', function () {
|
||||
showFilterMenu(context);
|
||||
});
|
||||
|
||||
// On callback make sure to set StartIndex = 0
|
||||
$('.btnSort', context).on('click', function () {
|
||||
LibraryBrowser.showSortMenu({
|
||||
items: [{
|
||||
name: Globalize.translate('OptionNameSort'),
|
||||
id: 'SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionBudget'),
|
||||
id: 'Budget,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionImdbRating'),
|
||||
id: 'CommunityRating,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionCriticRating'),
|
||||
id: 'CriticRating,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionDateAdded'),
|
||||
id: 'DateCreated,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionDatePlayed'),
|
||||
id: 'DatePlayed,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionMetascore'),
|
||||
id: 'Metascore,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionParentalRating'),
|
||||
id: 'OfficialRating,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionPlayCount'),
|
||||
id: 'PlayCount,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionReleaseDate'),
|
||||
id: 'PremiereDate,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionRevenue'),
|
||||
id: 'Revenue,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionRuntime'),
|
||||
id: 'Runtime,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionVideoBitrate'),
|
||||
id: 'VideoBitRate,SortName'
|
||||
}],
|
||||
callback: function () {
|
||||
reloadItems(context);
|
||||
},
|
||||
query: query
|
||||
$('.btnNextPage', context).on('click', function () {
|
||||
query.StartIndex += query.Limit;
|
||||
reloadItems(context);
|
||||
});
|
||||
|
||||
$('.btnPreviousPage', context).on('click', function () {
|
||||
query.StartIndex -= query.Limit;
|
||||
reloadItems(context);
|
||||
});
|
||||
|
||||
$('.btnChangeLayout', context).on('layoutchange', function (e, layout) {
|
||||
|
||||
if (layout == 'Timeline') {
|
||||
getQuery(context).SortBy = 'ProductionYear,PremiereDate,SortName';
|
||||
getQuery(context).SortOrder = 'Descending';
|
||||
}
|
||||
|
||||
getPageData(context).view = layout;
|
||||
LibraryBrowser.saveViewSetting(getSavedQueryKey(context), layout);
|
||||
reloadItems(context);
|
||||
});
|
||||
|
||||
$('.btnFilter', context).on('click', function () {
|
||||
showFilterMenu(context);
|
||||
});
|
||||
|
||||
// On callback make sure to set StartIndex = 0
|
||||
$('.btnSort', context).on('click', function () {
|
||||
LibraryBrowser.showSortMenu({
|
||||
items: [{
|
||||
name: Globalize.translate('OptionNameSort'),
|
||||
id: 'SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionBudget'),
|
||||
id: 'Budget,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionImdbRating'),
|
||||
id: 'CommunityRating,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionCriticRating'),
|
||||
id: 'CriticRating,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionDateAdded'),
|
||||
id: 'DateCreated,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionDatePlayed'),
|
||||
id: 'DatePlayed,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionMetascore'),
|
||||
id: 'Metascore,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionParentalRating'),
|
||||
id: 'OfficialRating,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionPlayCount'),
|
||||
id: 'PlayCount,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionReleaseDate'),
|
||||
id: 'PremiereDate,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionRevenue'),
|
||||
id: 'Revenue,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionRuntime'),
|
||||
id: 'Runtime,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionVideoBitrate'),
|
||||
id: 'VideoBitRate,SortName'
|
||||
}],
|
||||
callback: function () {
|
||||
reloadItems(context);
|
||||
},
|
||||
query: query
|
||||
});
|
||||
});
|
||||
|
||||
LibraryBrowser.saveQueryValues(getSavedQueryKey(context), query);
|
||||
|
||||
LibraryBrowser.setLastRefreshed(context);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
|
||||
LibraryBrowser.saveQueryValues(getSavedQueryKey(context), query);
|
||||
function showFilterMenu(context) {
|
||||
|
||||
LibraryBrowser.setLastRefreshed(context);
|
||||
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
var filterDialog = new filterDialogFactory({
|
||||
query: getQuery(context),
|
||||
mode: 'movies'
|
||||
});
|
||||
|
||||
function showFilterMenu(context) {
|
||||
Events.on(filterDialog, 'filterchange', function () {
|
||||
reloadItems(context);
|
||||
});
|
||||
|
||||
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
|
||||
|
||||
var filterDialog = new filterDialogFactory({
|
||||
query: getQuery(context),
|
||||
mode: 'movies'
|
||||
filterDialog.show();
|
||||
});
|
||||
}
|
||||
|
||||
function updateFilterControls(context) {
|
||||
|
||||
var query = getQuery(context);
|
||||
|
||||
$('.alphabetPicker', context).alphaValue(query.NameStartsWithOrGreater);
|
||||
}
|
||||
|
||||
function initPage(context) {
|
||||
|
||||
$('.alphabetPicker', context).on('alphaselect', function (e, character) {
|
||||
|
||||
var query = getQuery(context);
|
||||
query.NameStartsWithOrGreater = character;
|
||||
query.StartIndex = 0;
|
||||
|
||||
reloadItems(context);
|
||||
|
||||
}).on('alphaclear', function (e) {
|
||||
|
||||
var query = getQuery(context);
|
||||
query.NameStartsWithOrGreater = '';
|
||||
|
||||
Events.on(filterDialog, 'filterchange', function () {
|
||||
reloadItems(context);
|
||||
});
|
||||
|
||||
filterDialog.show();
|
||||
});
|
||||
}
|
||||
$('.itemsContainer', context).on('needsrefresh', function () {
|
||||
|
||||
function updateFilterControls(context) {
|
||||
reloadItems(context);
|
||||
});
|
||||
}
|
||||
|
||||
var query = getQuery(context);
|
||||
self.initTab = function () {
|
||||
|
||||
$('.alphabetPicker', context).alphaValue(query.NameStartsWithOrGreater);
|
||||
}
|
||||
initPage(tabContent);
|
||||
};
|
||||
|
||||
function initPage(context) {
|
||||
self.renderTab = function () {
|
||||
|
||||
$('.alphabetPicker', context).on('alphaselect', function (e, character) {
|
||||
|
||||
var query = getQuery(context);
|
||||
query.NameStartsWithOrGreater = character;
|
||||
query.StartIndex = 0;
|
||||
|
||||
reloadItems(context);
|
||||
|
||||
}).on('alphaclear', function (e) {
|
||||
|
||||
var query = getQuery(context);
|
||||
query.NameStartsWithOrGreater = '';
|
||||
|
||||
reloadItems(context);
|
||||
});
|
||||
|
||||
$('.itemsContainer', context).on('needsrefresh', function () {
|
||||
|
||||
reloadItems(context);
|
||||
});
|
||||
}
|
||||
|
||||
window.MoviesPage.initMoviesTab = function (page, tabContent) {
|
||||
|
||||
initPage(tabContent);
|
||||
};
|
||||
|
||||
window.MoviesPage.renderMoviesTab = function (page, tabContent) {
|
||||
|
||||
if (LibraryBrowser.needsRefresh(tabContent)) {
|
||||
reloadItems(tabContent);
|
||||
updateFilterControls(tabContent);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue