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

update movie page

Browse source
This commit is contained in:
Luke Pulverenti 2016-06-17 14:40:57 -04:00
parent aa83844d85
commit c2abb7437e
2 changed files with 140 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

16
dashboard-ui/movies.html
View file

@ -37,13 +37,21 @@
</div> </div>
</div> </div>
<div class="pageTabContent ehsContent" id="moviesTab" data-index="1"> <div class="pageTabContent ehsContent" id="moviesTab" data-index="1">
<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="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
<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 class="alphaPicker alphabetPicker vertical">
</div> </div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .25em;">
<div class="listTopPaging"> <div class="itemsContainer itemsContainerWithAlphaPicker">
</div> </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>
<div class="itemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
</div> </div>
<div class="pageTabContent ehsContent" id="trailersTab" data-index="2"> <div class="pageTabContent ehsContent" id="trailersTab" data-index="2">
<div class="alphaPicker alphabetPicker vertical"> <div class="alphaPicker alphabetPicker vertical">

274
dashboard-ui/scripts/movies.js
View file

@ -1,8 +1,9 @@
define(['alphaPicker'], function (alphaPicker) { define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker'], function (events, libraryBrowser, imageLoader, alphaPicker) {
return function (view, params, tabContent) { return function (view, params, tabContent) {
var self = this; var self = this;
var pageSize = libraryBrowser.getDefaultPageSize();
var data = {}; var data = {};
@ -17,17 +18,17 @@
SortOrder: "Ascending", SortOrder: "Ascending",
IncludeItemTypes: "Movie", IncludeItemTypes: "Movie",
Recursive: true, Recursive: true,
Fields: "PrimaryImageAspectRatio,SortName,MediaSourceCount,SyncInfo", Fields: "PrimaryImageAspectRatio,MediaSourceCount,SortName,SyncInfo",
ImageTypeLimit: 1, ImageTypeLimit: 1,
EnableImageTypes: "Primary,Backdrop,Banner,Thumb", EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
StartIndex: 0, StartIndex: 0,
Limit: LibraryBrowser.getDefaultPageSize() Limit: pageSize
}, },
view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Poster', 'Poster') view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Poster', 'Poster')
}; };
pageData.query.ParentId = params.topParentId; pageData.query.ParentId = params.topParentId;
LibraryBrowser.loadSavedQueryValues(key, pageData.query); libraryBrowser.loadSavedQueryValues(key, pageData.query);
} }
return pageData; return pageData;
} }
@ -40,26 +41,23 @@
function getSavedQueryKey(context) { function getSavedQueryKey(context) {
if (!context.savedQueryKey) { if (!context.savedQueryKey) {
context.savedQueryKey = LibraryBrowser.getSavedQueryKey('movies'); context.savedQueryKey = libraryBrowser.getSavedQueryKey('movies');
} }
return context.savedQueryKey; return context.savedQueryKey;
} }
function reloadItems(context) { function reloadItems(page) {
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
var userId = Dashboard.getCurrentUserId(); var query = getQuery(page);
var query = getQuery(context); ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
var view = getPageData(context).view;
ApiClient.getItems(userId, query).then(function (result) {
// Scroll back up so they can see the results from the beginning // Scroll back up so they can see the results from the beginning
window.scrollTo(0, 0); window.scrollTo(0, 0);
var html = ''; updateFilterControls(page);
var pagingHtml = LibraryBrowser.getQueryPagingHtml({ var pagingHtml = LibraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex, startIndex: query.StartIndex,
@ -67,93 +65,86 @@
totalRecordCount: result.TotalRecordCount, totalRecordCount: result.TotalRecordCount,
showLimit: false, showLimit: false,
updatePageSizeSetting: false, updatePageSizeSetting: false,
addLayoutButton: true, addLayoutButton: false,
sortButton: true, sortButton: false,
currentLayout: view, filterButton: false
layouts: 'Banner,List,Poster,PosterCard,Thumb,ThumbCard,Timeline',
filterButton: true
}); });
context.querySelector('.listTopPaging').innerHTML = pagingHtml; var html;
var viewStyle = self.getCurrentViewStyle();
updateFilterControls(context); if (viewStyle == "Thumb") {
if (view == "Thumb") { html = libraryBrowser.getPosterViewHtml({
html = LibraryBrowser.getPosterViewHtml({
items: result.Items, items: result.Items,
shape: "backdrop", shape: "backdrop",
preferThumb: true, preferThumb: true,
context: 'movies',
lazy: true, lazy: true,
showDetailsMenu: true,
overlayPlayButton: true overlayPlayButton: true
}); });
} }
else if (view == "ThumbCard") { else if (viewStyle == "ThumbCard") {
html = LibraryBrowser.getPosterViewHtml({ html = libraryBrowser.getPosterViewHtml({
items: result.Items, items: result.Items,
shape: "backdrop", shape: "backdrop",
preferThumb: true, preferThumb: true,
context: 'movies',
lazy: true, lazy: true,
showTitle: true,
cardLayout: true, cardLayout: true,
showYear: true, showTitle: true,
showDetailsMenu: true showYear: true
}); });
} }
else if (view == "Banner") { else if (viewStyle == "Banner") {
html = LibraryBrowser.getPosterViewHtml({ html = libraryBrowser.getPosterViewHtml({
items: result.Items, items: result.Items,
shape: "banner", shape: "banner",
preferBanner: true, preferBanner: true,
lazy: true, context: 'movies',
showDetailsMenu: true lazy: true
}); });
} }
else if (view == "List") { else if (viewStyle == "List") {
html = LibraryBrowser.getListViewHtml({ html = libraryBrowser.getListViewHtml({
items: result.Items, items: result.Items,
context: 'movies',
sortBy: query.SortBy sortBy: query.SortBy
}); });
} }
else if (view == "Poster") { else if (viewStyle == "PosterCard") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items, html = libraryBrowser.getPosterViewHtml({
shape: "portrait",
centerText: true,
lazy: true,
showDetailsMenu: true,
overlayPlayButton: true
});
}
else if (view == "PosterCard") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items, items: result.Items,
shape: "portrait", shape: "portrait",
context: 'movies',
showTitle: true, showTitle: true,
showYear: true, showYear: true,
lazy: true, lazy: true,
cardLayout: true, cardLayout: true
showDetailsMenu: true
}); });
} }
else if (view == "Timeline") { else {
html = LibraryBrowser.getPosterViewHtml({
// Poster
html = libraryBrowser.getPosterViewHtml({
items: result.Items, items: result.Items,
shape: "portrait", shape: "portrait",
showTitle: true, context: 'movies',
timeline: true,
centerText: true, centerText: true,
lazy: true, lazy: true,
showDetailsMenu: true overlayPlayButton: true
}); });
} }
var elem = context.querySelector('.itemsContainer'); var i, length;
elem.innerHTML = html + pagingHtml; var elems = tabContent.querySelectorAll('.paging');
ImageLoader.lazyChildren(elem); for (i = 0, length = elems.length; i < length; i++) {
elems[i].innerHTML = pagingHtml;
}
function onNextPageClick() { function onNextPageClick() {
query.StartIndex += query.Limit; query.StartIndex += query.Limit;
@ -165,7 +156,6 @@
reloadItems(tabContent); reloadItems(tabContent);
} }
var elems, i, length;
elems = tabContent.querySelectorAll('.btnNextPage'); elems = tabContent.querySelectorAll('.btnNextPage');
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onNextPageClick); elems[i].addEventListener('click', onNextPageClick);
@ -176,38 +166,66 @@
elems[i].addEventListener('click', onPreviousPageClick); elems[i].addEventListener('click', onPreviousPageClick);
} }
function onChangeLayout(e) { var itemsContainer = tabContent.querySelector('.itemsContainer');
var layout = e.detail.viewStyle; itemsContainer.innerHTML = html;
if (layout == 'Timeline') { imageLoader.lazyChildren(itemsContainer);
getQuery(context).SortBy = 'ProductionYear,PremiereDate,SortName';
getQuery(context).SortOrder = 'Descending';
}
getPageData(context).view = layout; libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
LibraryBrowser.saveViewSetting(getSavedQueryKey(context), layout);
reloadItems(context);
}
elems = tabContent.querySelectorAll('.btnChangeLayout'); Dashboard.hideLoadingMsg();
for (i = 0, length = elems.length; i < length; i++) { });
elems[i].addEventListener('layoutchange', onChangeLayout); }
}
function onFilterClick() { self.showFilterMenu = function () {
showFilterMenu(context);
}
elems = tabContent.querySelectorAll('.btnFilter'); require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onFilterClick);
}
function onSortClick() { var filterDialog = new filterDialogFactory({
LibraryBrowser.showSortMenu({ query: getQuery(tabContent),
items: [{ mode: 'movies'
name: Globalize.translate('OptionNameSort'), });
id: 'SortName'
}, Events.on(filterDialog, 'filterchange', function () {
getQuery(tabContent).StartIndex = 0;
reloadItems(tabContent);
});
filterDialog.show();
});
}
function updateFilterControls(tabContent) {
var query = getQuery(tabContent);
self.alphaPicker.value(query.NameStartsWithOrGreater);
}
function initPage(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('.btnFilter').addEventListener('click', function () {
self.showFilterMenu();
});
tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
libraryBrowser.showSortMenu({
items: [{
name: Globalize.translate('OptionNameSort'),
id: 'SortName'
},
{ {
name: Globalize.translate('OptionBudget'), name: Globalize.translate('OptionBudget'),
id: 'Budget,SortName' id: 'Budget,SortName'
@ -256,80 +274,44 @@
name: Globalize.translate('OptionVideoBitrate'), name: Globalize.translate('OptionVideoBitrate'),
id: 'VideoBitRate,SortName' id: 'VideoBitRate,SortName'
}], }],
callback: function () { callback: function () {
reloadItems(context); getQuery(tabContent).StartIndex = 0;
}, reloadItems(tabContent);
query: query },
}); query: getQuery(tabContent),
} button: e.target
elems = tabContent.querySelectorAll('.btnSort');
for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onSortClick);
}
LibraryBrowser.saveQueryValues(getSavedQueryKey(context), query);
Dashboard.hideLoadingMsg();
});
}
function showFilterMenu(context) {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
var filterDialog = new filterDialogFactory({
query: getQuery(context),
mode: 'movies'
}); });
});
Events.on(filterDialog, 'filterchange', function () { tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
reloadItems(context);
});
filterDialog.show(); libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
});
tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
var viewStyle = e.detail.viewStyle;
getPageData(tabContent).view = viewStyle;
libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
getQuery(tabContent).StartIndex = 0;
reloadItems(tabContent);
}); });
} }
function updateFilterControls(context) { self.getCurrentViewStyle = function () {
return getPageData(tabContent).view;
var query = getQuery(context);
self.alphaPicker.value(query.NameStartsWithOrGreater);
}
function initPage(context) {
var alphaPickerElement = context.querySelector('.alphaPicker');
alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
var newValue = e.detail.value;
var query = getQuery(context);
query.NameStartsWithOrGreater = newValue;
query.StartIndex = 0;
reloadItems(context);
});
self.alphaPicker = new alphaPicker({
element: alphaPickerElement,
valueChangeEvent: 'click'
});
context.querySelector('.itemsContainer').addEventListener('needsrefresh', function () {
reloadItems(context);
});
}
self.initTab = function () {
initPage(tabContent);
}; };
initPage(tabContent);
self.renderTab = function () { self.renderTab = function () {
reloadItems(tabContent); reloadItems(tabContent);
updateFilterControls(tabContent); updateFilterControls(tabContent);
}; };
};
self.destroy = function () {
};
};
}); });