2020-03-29 20:22:38 +02:00
|
|
|
define(["loading", "layoutManager", "userSettings", "events", "libraryBrowser", "alphaPicker", "listView", "cardBuilder", "globalize", "emby-itemscontainer"], function (loading, layoutManager, userSettings, events, libraryBrowser, alphaPicker, listView, cardBuilder, globalize) {
|
2018-10-23 01:05:09 +03:00
|
|
|
"use strict";
|
2019-11-06 13:43:39 +03:00
|
|
|
|
|
|
|
return function (view, params, tabContent, options) {
|
2018-10-23 01:05:09 +03:00
|
|
|
function onViewStyleChange() {
|
2019-01-12 19:35:58 +00:00
|
|
|
if (self.getCurrentViewStyle() == "List") {
|
|
|
|
itemsContainer.classList.add("vertical-list");
|
|
|
|
itemsContainer.classList.remove("vertical-wrap");
|
|
|
|
} else {
|
|
|
|
itemsContainer.classList.remove("vertical-list");
|
|
|
|
itemsContainer.classList.add("vertical-wrap");
|
|
|
|
}
|
2019-11-06 13:43:39 +03:00
|
|
|
|
2019-01-12 19:35:58 +00:00
|
|
|
itemsContainer.innerHTML = "";
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function updateFilterControls() {
|
2019-11-06 13:43:39 +03:00
|
|
|
if (self.alphaPicker) {
|
|
|
|
self.alphaPicker.value(query.NameStartsWithOrGreater);
|
|
|
|
}
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function fetchData() {
|
2019-01-10 22:51:06 +00:00
|
|
|
isLoading = true;
|
|
|
|
loading.show();
|
2019-11-06 13:43:39 +03:00
|
|
|
return ApiClient.getItems(ApiClient.getCurrentUserId(), query);
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function afterRefresh(result) {
|
|
|
|
function onNextPageClick() {
|
2019-11-06 13:43:39 +03:00
|
|
|
if (isLoading) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-03-21 00:26:55 +01:00
|
|
|
if (userSettings.libraryPageSize() > 0) {
|
|
|
|
query.StartIndex += query.Limit;
|
|
|
|
}
|
2019-01-10 22:51:06 +00:00
|
|
|
itemsContainer.refreshItems();
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function onPreviousPageClick() {
|
2019-11-06 13:43:39 +03:00
|
|
|
if (isLoading) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-04-04 15:45:57 +02:00
|
|
|
if (userSettings.libraryPageSize() > 0) {
|
|
|
|
query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
|
|
|
|
}
|
2019-01-10 22:51:06 +00:00
|
|
|
itemsContainer.refreshItems();
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
2019-11-06 13:43:39 +03:00
|
|
|
|
2019-01-10 22:51:06 +00:00
|
|
|
window.scrollTo(0, 0);
|
|
|
|
updateFilterControls();
|
2019-11-06 13:43:39 +03:00
|
|
|
var pagingHtml = libraryBrowser.getQueryPagingHtml({
|
|
|
|
startIndex: query.StartIndex,
|
|
|
|
limit: query.Limit,
|
|
|
|
totalRecordCount: result.TotalRecordCount,
|
|
|
|
showLimit: false,
|
|
|
|
updatePageSizeSetting: false,
|
|
|
|
addLayoutButton: false,
|
|
|
|
sortButton: false,
|
|
|
|
filterButton: false
|
|
|
|
});
|
|
|
|
var i;
|
|
|
|
var length;
|
|
|
|
var elems = tabContent.querySelectorAll(".paging");
|
|
|
|
|
|
|
|
for (i = 0, length = elems.length; i < length; i++) {
|
2019-01-10 22:51:06 +00:00
|
|
|
elems[i].innerHTML = pagingHtml;
|
2019-11-06 13:43:39 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
elems = tabContent.querySelectorAll(".btnNextPage");
|
|
|
|
for (i = 0, length = elems.length; i < length; i++) {
|
2019-01-10 22:51:06 +00:00
|
|
|
elems[i].addEventListener("click", onNextPageClick);
|
2019-11-06 13:43:39 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
elems = tabContent.querySelectorAll(".btnPreviousPage");
|
|
|
|
for (i = 0, length = elems.length; i < length; i++) {
|
|
|
|
elems[i].addEventListener("click", onPreviousPageClick);
|
|
|
|
}
|
|
|
|
|
2019-01-10 22:51:06 +00:00
|
|
|
isLoading = false;
|
|
|
|
loading.hide();
|
2019-11-02 20:38:58 +03:00
|
|
|
|
|
|
|
require(["autoFocuser"], function (autoFocuser) {
|
|
|
|
autoFocuser.autoFocus(tabContent);
|
|
|
|
});
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function getItemsHtml(items) {
|
2019-11-06 13:43:39 +03:00
|
|
|
var html;
|
2018-10-23 01:05:09 +03:00
|
|
|
var viewStyle = self.getCurrentViewStyle();
|
2019-11-06 13:43:39 +03:00
|
|
|
|
|
|
|
if (viewStyle == "Thumb") {
|
|
|
|
html = cardBuilder.getCardsHtml({
|
|
|
|
items: items,
|
|
|
|
shape: "backdrop",
|
|
|
|
preferThumb: true,
|
|
|
|
context: "movies",
|
|
|
|
lazy: true,
|
|
|
|
overlayPlayButton: true,
|
|
|
|
showTitle: true,
|
|
|
|
showYear: true,
|
|
|
|
centerText: true
|
|
|
|
});
|
|
|
|
} else if (viewStyle == "ThumbCard") {
|
|
|
|
html = cardBuilder.getCardsHtml({
|
|
|
|
items: items,
|
|
|
|
shape: "backdrop",
|
|
|
|
preferThumb: true,
|
|
|
|
context: "movies",
|
|
|
|
lazy: true,
|
|
|
|
cardLayout: true,
|
|
|
|
showTitle: true,
|
|
|
|
showYear: true,
|
|
|
|
centerText: true
|
|
|
|
});
|
|
|
|
} else if (viewStyle == "Banner") {
|
|
|
|
html = cardBuilder.getCardsHtml({
|
|
|
|
items: items,
|
|
|
|
shape: "banner",
|
|
|
|
preferBanner: true,
|
|
|
|
context: "movies",
|
|
|
|
lazy: true
|
|
|
|
});
|
|
|
|
} else if (viewStyle == "List") {
|
|
|
|
html = listView.getListViewHtml({
|
|
|
|
items: items,
|
|
|
|
context: "movies",
|
|
|
|
sortBy: query.SortBy
|
|
|
|
});
|
|
|
|
} else if (viewStyle == "PosterCard") {
|
|
|
|
html = cardBuilder.getCardsHtml({
|
|
|
|
items: items,
|
|
|
|
shape: "portrait",
|
|
|
|
context: "movies",
|
|
|
|
showTitle: true,
|
|
|
|
showYear: true,
|
|
|
|
centerText: true,
|
|
|
|
lazy: true,
|
|
|
|
cardLayout: true
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
html = cardBuilder.getCardsHtml({
|
|
|
|
items: items,
|
|
|
|
shape: "portrait",
|
|
|
|
context: "movies",
|
|
|
|
overlayPlayButton: true,
|
|
|
|
showTitle: true,
|
|
|
|
showYear: true,
|
|
|
|
centerText: true
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
return html;
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function initPage(tabContent) {
|
2019-01-12 19:35:58 +00:00
|
|
|
itemsContainer.fetchData = fetchData;
|
|
|
|
itemsContainer.getItemsHtml = getItemsHtml;
|
|
|
|
itemsContainer.afterRefresh = afterRefresh;
|
2018-10-23 01:05:09 +03:00
|
|
|
var alphaPickerElement = tabContent.querySelector(".alphaPicker");
|
2019-11-06 13:43:39 +03:00
|
|
|
|
2019-01-12 19:35:58 +00:00
|
|
|
if (alphaPickerElement) {
|
2019-11-06 13:43:39 +03:00
|
|
|
alphaPickerElement.addEventListener("alphavaluechanged", function (e) {
|
2019-01-12 19:35:58 +00:00
|
|
|
var newValue = e.detail.value;
|
|
|
|
query.NameStartsWithOrGreater = newValue;
|
|
|
|
query.StartIndex = 0;
|
|
|
|
itemsContainer.refreshItems();
|
|
|
|
});
|
|
|
|
self.alphaPicker = new alphaPicker({
|
|
|
|
element: alphaPickerElement,
|
|
|
|
valueChangeEvent: "click"
|
|
|
|
});
|
2019-11-06 13:43:39 +03:00
|
|
|
|
2020-01-26 00:20:01 +03:00
|
|
|
tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right");
|
2020-01-22 19:42:43 +03:00
|
|
|
alphaPickerElement.classList.add("alphaPicker-fixed-right");
|
|
|
|
itemsContainer.classList.add("padded-right-withalphapicker");
|
2019-01-12 19:35:58 +00:00
|
|
|
}
|
2019-11-06 13:43:39 +03:00
|
|
|
|
2018-10-23 01:05:09 +03:00
|
|
|
var btnFilter = tabContent.querySelector(".btnFilter");
|
2019-11-06 13:43:39 +03:00
|
|
|
|
|
|
|
if (btnFilter) {
|
|
|
|
btnFilter.addEventListener("click", function () {
|
|
|
|
self.showFilterMenu();
|
|
|
|
});
|
|
|
|
}
|
2018-10-23 01:05:09 +03:00
|
|
|
var btnSort = tabContent.querySelector(".btnSort");
|
2019-11-06 13:43:39 +03:00
|
|
|
|
|
|
|
if (btnSort) {
|
|
|
|
btnSort.addEventListener("click", function (e) {
|
|
|
|
libraryBrowser.showSortMenu({
|
|
|
|
items: [{
|
2020-03-26 14:25:16 +01:00
|
|
|
name: globalize.translate("OptionNameSort"),
|
2019-11-06 13:43:39 +03:00
|
|
|
id: "SortName,ProductionYear"
|
|
|
|
}, {
|
2020-03-26 14:25:16 +01:00
|
|
|
name: globalize.translate("OptionImdbRating"),
|
2019-11-06 13:43:39 +03:00
|
|
|
id: "CommunityRating,SortName,ProductionYear"
|
|
|
|
}, {
|
2020-03-26 14:25:16 +01:00
|
|
|
name: globalize.translate("OptionCriticRating"),
|
2019-11-06 13:43:39 +03:00
|
|
|
id: "CriticRating,SortName,ProductionYear"
|
|
|
|
}, {
|
2020-03-26 14:25:16 +01:00
|
|
|
name: globalize.translate("OptionDateAdded"),
|
2019-11-06 13:43:39 +03:00
|
|
|
id: "DateCreated,SortName,ProductionYear"
|
|
|
|
}, {
|
2020-03-26 14:25:16 +01:00
|
|
|
name: globalize.translate("OptionDatePlayed"),
|
2019-11-06 13:43:39 +03:00
|
|
|
id: "DatePlayed,SortName,ProductionYear"
|
|
|
|
}, {
|
2020-03-26 14:25:16 +01:00
|
|
|
name: globalize.translate("OptionParentalRating"),
|
2019-11-06 13:43:39 +03:00
|
|
|
id: "OfficialRating,SortName,ProductionYear"
|
|
|
|
}, {
|
2020-03-26 14:25:16 +01:00
|
|
|
name: globalize.translate("OptionPlayCount"),
|
2019-11-06 13:43:39 +03:00
|
|
|
id: "PlayCount,SortName,ProductionYear"
|
|
|
|
}, {
|
2020-03-26 14:25:16 +01:00
|
|
|
name: globalize.translate("OptionReleaseDate"),
|
2019-11-06 13:43:39 +03:00
|
|
|
id: "PremiereDate,SortName,ProductionYear"
|
|
|
|
}, {
|
2020-03-26 14:25:16 +01:00
|
|
|
name: globalize.translate("OptionRuntime"),
|
2019-11-06 13:43:39 +03:00
|
|
|
id: "Runtime,SortName,ProductionYear"
|
|
|
|
}],
|
|
|
|
callback: function () {
|
|
|
|
query.StartIndex = 0;
|
|
|
|
userSettings.saveQuerySettings(savedQueryKey, query);
|
|
|
|
itemsContainer.refreshItems();
|
|
|
|
},
|
|
|
|
query: query,
|
|
|
|
button: e.target
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
2018-10-23 01:05:09 +03:00
|
|
|
var btnSelectView = tabContent.querySelector(".btnSelectView");
|
2019-11-06 13:43:39 +03:00
|
|
|
btnSelectView.addEventListener("click", function (e) {
|
|
|
|
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), "Banner,List,Poster,PosterCard,Thumb,ThumbCard".split(","));
|
|
|
|
});
|
|
|
|
btnSelectView.addEventListener("layoutchange", function (e) {
|
2018-10-23 01:05:09 +03:00
|
|
|
var viewStyle = e.detail.viewStyle;
|
2019-01-12 19:35:58 +00:00
|
|
|
userSettings.set(savedViewKey, viewStyle);
|
|
|
|
query.StartIndex = 0;
|
|
|
|
onViewStyleChange();
|
|
|
|
itemsContainer.refreshItems();
|
2019-11-06 13:43:39 +03:00
|
|
|
});
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
2019-11-06 13:43:39 +03:00
|
|
|
|
|
|
|
var self = this;
|
|
|
|
var itemsContainer = tabContent.querySelector(".itemsContainer");
|
|
|
|
var savedQueryKey = params.topParentId + "-" + options.mode;
|
|
|
|
var savedViewKey = savedQueryKey + "-view";
|
|
|
|
var query = {
|
|
|
|
SortBy: "SortName,ProductionYear",
|
|
|
|
SortOrder: "Ascending",
|
|
|
|
IncludeItemTypes: "Movie",
|
|
|
|
Recursive: true,
|
|
|
|
Fields: "PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo",
|
|
|
|
ImageTypeLimit: 1,
|
|
|
|
EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
|
|
|
|
StartIndex: 0,
|
|
|
|
ParentId: params.topParentId
|
|
|
|
};
|
2020-03-21 00:26:55 +01:00
|
|
|
|
|
|
|
if (userSettings.libraryPageSize() > 0) {
|
|
|
|
query['Limit'] = userSettings.libraryPageSize();
|
|
|
|
}
|
|
|
|
|
2019-11-06 13:43:39 +03:00
|
|
|
var isLoading = false;
|
|
|
|
|
|
|
|
if (options.mode === "favorites") {
|
|
|
|
query.IsFavorite = true;
|
|
|
|
}
|
|
|
|
|
2019-01-10 22:51:06 +00:00
|
|
|
query = userSettings.loadQuerySettings(savedQueryKey, query);
|
2019-11-06 13:43:39 +03:00
|
|
|
|
|
|
|
self.showFilterMenu = function () {
|
|
|
|
require(["components/filterdialog/filterdialog"], function (filterDialogFactory) {
|
2018-10-23 01:05:09 +03:00
|
|
|
var filterDialog = new filterDialogFactory({
|
|
|
|
query: query,
|
|
|
|
mode: "movies",
|
|
|
|
serverId: ApiClient.serverId()
|
|
|
|
});
|
2019-11-06 13:43:39 +03:00
|
|
|
events.on(filterDialog, "filterchange", function () {
|
|
|
|
query.StartIndex = 0;
|
|
|
|
itemsContainer.refreshItems();
|
|
|
|
});
|
|
|
|
filterDialog.show();
|
|
|
|
});
|
2019-01-12 19:35:58 +00:00
|
|
|
};
|
2019-11-06 13:43:39 +03:00
|
|
|
|
|
|
|
self.getCurrentViewStyle = function () {
|
|
|
|
return userSettings.get(savedViewKey) || "Poster";
|
2019-01-12 19:35:58 +00:00
|
|
|
};
|
2019-11-06 13:43:39 +03:00
|
|
|
|
|
|
|
self.initTab = function () {
|
2019-01-12 19:35:58 +00:00
|
|
|
initPage(tabContent);
|
|
|
|
onViewStyleChange();
|
|
|
|
};
|
2019-11-06 13:43:39 +03:00
|
|
|
|
|
|
|
self.renderTab = function () {
|
2019-01-12 19:35:58 +00:00
|
|
|
itemsContainer.refreshItems();
|
|
|
|
updateFilterControls();
|
|
|
|
};
|
2019-11-06 13:43:39 +03:00
|
|
|
|
|
|
|
self.destroy = function () {
|
|
|
|
itemsContainer = null;
|
|
|
|
};
|
|
|
|
};
|
2019-01-10 22:51:06 +00:00
|
|
|
});
|