2020-05-05 23:56:43 +02:00
|
|
|
define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings, globalize) {
|
2020-05-05 23:51:00 +02:00
|
|
|
'use strict';
|
2019-11-06 13:43:39 +03:00
|
|
|
|
|
|
|
return function (view, params, tabContent) {
|
2018-10-23 01:05:09 +03:00
|
|
|
function playAll() {
|
2019-11-06 13:43:39 +03:00
|
|
|
ApiClient.getItem(ApiClient.getCurrentUserId(), params.topParentId).then(function (item) {
|
2018-10-23 01:05:09 +03:00
|
|
|
playbackManager.play({
|
|
|
|
items: [item]
|
2019-11-06 13:43:39 +03:00
|
|
|
});
|
|
|
|
});
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function shuffle() {
|
2019-11-06 13:43:39 +03:00
|
|
|
ApiClient.getItem(ApiClient.getCurrentUserId(), params.topParentId).then(function (item) {
|
2018-10-23 01:05:09 +03:00
|
|
|
getQuery();
|
2019-11-06 13:43:39 +03:00
|
|
|
playbackManager.shuffle(item, null);
|
|
|
|
});
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function getPageData() {
|
|
|
|
var key = getSavedQueryKey();
|
2019-11-06 13:43:39 +03:00
|
|
|
|
|
|
|
if (!pageData) {
|
|
|
|
pageData = {
|
|
|
|
query: {
|
2020-05-05 23:51:00 +02:00
|
|
|
SortBy: 'SortName',
|
|
|
|
SortOrder: 'Ascending',
|
|
|
|
IncludeItemTypes: 'MusicAlbum',
|
2019-11-06 13:43:39 +03:00
|
|
|
Recursive: true,
|
2020-05-05 23:51:00 +02:00
|
|
|
Fields: 'PrimaryImageAspectRatio,SortName,BasicSyncInfo',
|
2019-11-06 13:43:39 +03:00
|
|
|
ImageTypeLimit: 1,
|
2020-05-05 23:51:00 +02:00
|
|
|
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
|
2020-04-03 23:19:21 +02:00
|
|
|
StartIndex: 0
|
2019-11-06 13:43:39 +03:00
|
|
|
},
|
2020-05-05 23:51:00 +02:00
|
|
|
view: libraryBrowser.getSavedView(key) || 'Poster'
|
2019-11-06 13:43:39 +03:00
|
|
|
};
|
2020-04-03 22:48:34 +02:00
|
|
|
|
|
|
|
if (userSettings.libraryPageSize() > 0) {
|
|
|
|
pageData.query['Limit'] = userSettings.libraryPageSize();
|
|
|
|
}
|
|
|
|
|
2019-11-06 13:43:39 +03:00
|
|
|
pageData.query.ParentId = params.topParentId;
|
|
|
|
libraryBrowser.loadSavedQueryValues(key, pageData.query);
|
|
|
|
}
|
|
|
|
|
|
|
|
return pageData;
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function getQuery() {
|
2019-11-06 13:43:39 +03:00
|
|
|
return getPageData().query;
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function getSavedQueryKey() {
|
2019-11-06 13:43:39 +03:00
|
|
|
if (!savedQueryKey) {
|
2020-05-05 23:51:00 +02:00
|
|
|
savedQueryKey = libraryBrowser.getSavedQueryKey('musicalbums');
|
2019-11-06 13:43:39 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
return savedQueryKey;
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function onViewStyleChange() {
|
2019-11-06 13:43:39 +03:00
|
|
|
var viewStyle = self.getCurrentViewStyle();
|
2020-05-05 23:51:00 +02:00
|
|
|
var itemsContainer = tabContent.querySelector('.itemsContainer');
|
2019-11-06 13:43:39 +03:00
|
|
|
|
2020-05-05 23:51:00 +02:00
|
|
|
if ('List' == viewStyle) {
|
|
|
|
itemsContainer.classList.add('vertical-list');
|
|
|
|
itemsContainer.classList.remove('vertical-wrap');
|
2019-11-06 13:43:39 +03:00
|
|
|
} else {
|
2020-05-05 23:51:00 +02:00
|
|
|
itemsContainer.classList.remove('vertical-list');
|
|
|
|
itemsContainer.classList.add('vertical-wrap');
|
2019-11-06 13:43:39 +03:00
|
|
|
}
|
|
|
|
|
2020-05-05 23:51:00 +02:00
|
|
|
itemsContainer.innerHTML = '';
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function reloadItems(page) {
|
|
|
|
loading.show();
|
2019-01-10 22:51:06 +00:00
|
|
|
isLoading = true;
|
2018-10-23 01:05:09 +03:00
|
|
|
var query = getQuery();
|
2019-11-06 13:43:39 +03:00
|
|
|
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
|
2018-10-23 01:05:09 +03:00
|
|
|
function onNextPageClick() {
|
2019-11-06 13:43:39 +03:00
|
|
|
if (isLoading) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-04-03 22:48:34 +02:00
|
|
|
if (userSettings.libraryPageSize() > 0) {
|
|
|
|
query.StartIndex += query.Limit;
|
|
|
|
}
|
2019-11-06 13:43:39 +03:00
|
|
|
reloadItems(tabContent);
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function onPreviousPageClick() {
|
2019-11-06 13:43:39 +03:00
|
|
|
if (isLoading) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-04-03 22:48:34 +02:00
|
|
|
if (userSettings.libraryPageSize() > 0) {
|
|
|
|
query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
|
|
|
|
}
|
2019-11-06 13:43:39 +03:00
|
|
|
reloadItems(tabContent);
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
2019-11-06 13:43:39 +03:00
|
|
|
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
updateFilterControls(page);
|
|
|
|
var html;
|
|
|
|
var pagingHtml = libraryBrowser.getQueryPagingHtml({
|
|
|
|
startIndex: query.StartIndex,
|
|
|
|
limit: query.Limit,
|
|
|
|
totalRecordCount: result.TotalRecordCount,
|
|
|
|
showLimit: false,
|
|
|
|
updatePageSizeSetting: false,
|
|
|
|
addLayoutButton: false,
|
|
|
|
sortButton: false,
|
|
|
|
filterButton: false
|
2018-10-23 01:05:09 +03:00
|
|
|
});
|
2019-11-06 13:43:39 +03:00
|
|
|
var viewStyle = self.getCurrentViewStyle();
|
2020-05-05 23:51:00 +02:00
|
|
|
if (viewStyle == 'List') {
|
2019-11-06 13:43:39 +03:00
|
|
|
html = listView.getListViewHtml({
|
|
|
|
items: result.Items,
|
2020-05-05 23:51:00 +02:00
|
|
|
context: 'music',
|
2019-11-06 13:43:39 +03:00
|
|
|
sortBy: query.SortBy,
|
|
|
|
addToListButton: true
|
|
|
|
});
|
2020-05-05 23:51:00 +02:00
|
|
|
} else if (viewStyle == 'PosterCard') {
|
2019-11-06 13:43:39 +03:00
|
|
|
html = cardBuilder.getCardsHtml({
|
|
|
|
items: result.Items,
|
2020-05-05 23:51:00 +02:00
|
|
|
shape: 'square',
|
|
|
|
context: 'music',
|
2019-11-06 13:43:39 +03:00
|
|
|
showTitle: true,
|
|
|
|
coverImage: true,
|
|
|
|
showParentTitle: true,
|
|
|
|
lazy: true,
|
|
|
|
cardLayout: true
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
html = cardBuilder.getCardsHtml({
|
|
|
|
items: result.Items,
|
2020-05-05 23:51:00 +02:00
|
|
|
shape: 'square',
|
|
|
|
context: 'music',
|
2019-11-06 13:43:39 +03:00
|
|
|
showTitle: true,
|
|
|
|
showParentTitle: true,
|
|
|
|
lazy: true,
|
|
|
|
centerText: true,
|
|
|
|
overlayPlayButton: true
|
|
|
|
});
|
|
|
|
}
|
|
|
|
var i;
|
|
|
|
var length;
|
2020-05-05 23:51:00 +02:00
|
|
|
var elems = tabContent.querySelectorAll('.paging');
|
2019-11-06 13:43:39 +03:00
|
|
|
|
|
|
|
for (i = 0, length = elems.length; i < length; i++) {
|
|
|
|
elems[i].innerHTML = pagingHtml;
|
|
|
|
}
|
|
|
|
|
2020-05-05 23:51:00 +02:00
|
|
|
elems = tabContent.querySelectorAll('.btnNextPage');
|
2019-11-06 13:43:39 +03:00
|
|
|
for (i = 0, length = elems.length; i < length; i++) {
|
2020-05-05 23:51:00 +02:00
|
|
|
elems[i].addEventListener('click', onNextPageClick);
|
2019-11-06 13:43:39 +03:00
|
|
|
}
|
|
|
|
|
2020-05-05 23:51:00 +02:00
|
|
|
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
2019-11-06 13:43:39 +03:00
|
|
|
for (i = 0, length = elems.length; i < length; i++) {
|
2020-05-05 23:51:00 +02:00
|
|
|
elems[i].addEventListener('click', onPreviousPageClick);
|
2019-11-06 13:43:39 +03:00
|
|
|
}
|
|
|
|
|
2020-05-05 23:51:00 +02:00
|
|
|
var itemsContainer = tabContent.querySelector('.itemsContainer');
|
2019-01-10 22:51:06 +00:00
|
|
|
itemsContainer.innerHTML = html;
|
|
|
|
imageLoader.lazyChildren(itemsContainer);
|
|
|
|
libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
|
|
|
|
loading.hide();
|
|
|
|
isLoading = false;
|
2019-11-02 20:38:58 +03:00
|
|
|
|
2020-05-05 23:51:00 +02:00
|
|
|
require(['autoFocuser'], function (autoFocuser) {
|
2019-11-02 20:38:58 +03:00
|
|
|
autoFocuser.autoFocus(tabContent);
|
|
|
|
});
|
2019-11-06 13:43:39 +03:00
|
|
|
});
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function updateFilterControls(tabContent) {
|
|
|
|
var query = getQuery();
|
2019-11-06 13:43:39 +03:00
|
|
|
self.alphaPicker.value(query.NameStartsWithOrGreater);
|
2018-10-23 01:05:09 +03:00
|
|
|
}
|
2019-11-06 13:43:39 +03:00
|
|
|
|
|
|
|
var savedQueryKey;
|
|
|
|
var pageData;
|
|
|
|
var self = this;
|
|
|
|
var isLoading = false;
|
|
|
|
|
|
|
|
self.showFilterMenu = function () {
|
2020-05-05 23:51:00 +02:00
|
|
|
require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
|
2019-11-06 13:43:39 +03:00
|
|
|
var filterDialog = new filterDialogFactory({
|
|
|
|
query: getQuery(),
|
2020-05-05 23:51:00 +02:00
|
|
|
mode: 'albums',
|
2019-11-06 13:43:39 +03:00
|
|
|
serverId: ApiClient.serverId()
|
|
|
|
});
|
2020-05-05 23:51:00 +02:00
|
|
|
events.on(filterDialog, 'filterchange', function () {
|
2019-11-06 13:43:39 +03:00
|
|
|
getQuery().StartIndex = 0;
|
|
|
|
reloadItems(tabContent);
|
|
|
|
});
|
|
|
|
filterDialog.show();
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
self.getCurrentViewStyle = function () {
|
|
|
|
return getPageData().view;
|
|
|
|
};
|
|
|
|
|
|
|
|
function initPage(tabContent) {
|
2020-05-05 23:51:00 +02:00
|
|
|
var alphaPickerElement = tabContent.querySelector('.alphaPicker');
|
|
|
|
var itemsContainer = tabContent.querySelector('.itemsContainer');
|
2019-11-06 13:43:39 +03:00
|
|
|
|
2020-05-05 23:51:00 +02:00
|
|
|
alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
|
2019-11-06 13:43:39 +03:00
|
|
|
var newValue = e.detail.value;
|
|
|
|
var query = getQuery();
|
|
|
|
query.NameStartsWithOrGreater = newValue;
|
|
|
|
query.StartIndex = 0;
|
|
|
|
reloadItems(tabContent);
|
|
|
|
});
|
|
|
|
self.alphaPicker = new alphaPicker({
|
|
|
|
element: alphaPickerElement,
|
2020-05-05 23:51:00 +02:00
|
|
|
valueChangeEvent: 'click'
|
2019-11-06 13:43:39 +03:00
|
|
|
});
|
2020-01-21 22:21:03 +03:00
|
|
|
|
2020-05-05 23:51:00 +02:00
|
|
|
tabContent.querySelector('.alphaPicker').classList.add('alphabetPicker-right');
|
|
|
|
alphaPickerElement.classList.add('alphaPicker-fixed-right');
|
|
|
|
itemsContainer.classList.add('padded-right-withalphapicker');
|
2019-11-06 13:43:39 +03:00
|
|
|
|
2020-05-05 23:51:00 +02:00
|
|
|
tabContent.querySelector('.btnFilter').addEventListener('click', function () {
|
2019-11-06 13:43:39 +03:00
|
|
|
self.showFilterMenu();
|
|
|
|
});
|
2020-05-05 23:51:00 +02:00
|
|
|
tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
|
2019-11-06 13:43:39 +03:00
|
|
|
libraryBrowser.showSortMenu({
|
|
|
|
items: [{
|
2020-05-05 23:56:43 +02:00
|
|
|
name: globalize.translate('OptionNameSort'),
|
2020-05-05 23:51:00 +02:00
|
|
|
id: 'SortName'
|
2019-11-06 13:43:39 +03:00
|
|
|
}, {
|
2020-05-05 23:56:43 +02:00
|
|
|
name: globalize.translate('OptionAlbumArtist'),
|
2020-05-05 23:51:00 +02:00
|
|
|
id: 'AlbumArtist,SortName'
|
2019-11-06 13:43:39 +03:00
|
|
|
}, {
|
2020-05-05 23:56:43 +02:00
|
|
|
name: globalize.translate('OptionCommunityRating'),
|
2020-05-05 23:51:00 +02:00
|
|
|
id: 'CommunityRating,SortName'
|
2019-11-06 13:43:39 +03:00
|
|
|
}, {
|
2020-05-05 23:56:43 +02:00
|
|
|
name: globalize.translate('OptionCriticRating'),
|
2020-05-05 23:51:00 +02:00
|
|
|
id: 'CriticRating,SortName'
|
2019-11-06 13:43:39 +03:00
|
|
|
}, {
|
2020-05-05 23:56:43 +02:00
|
|
|
name: globalize.translate('OptionDateAdded'),
|
2020-05-05 23:51:00 +02:00
|
|
|
id: 'DateCreated,SortName'
|
2019-11-06 13:43:39 +03:00
|
|
|
}, {
|
2020-05-05 23:56:43 +02:00
|
|
|
name: globalize.translate('OptionReleaseDate'),
|
2020-05-05 23:51:00 +02:00
|
|
|
id: 'ProductionYear,PremiereDate,SortName'
|
2019-12-05 10:21:26 +00:00
|
|
|
}, {
|
2020-05-05 23:56:43 +02:00
|
|
|
name: globalize.translate('OptionRandom'),
|
2020-05-05 23:51:00 +02:00
|
|
|
id: 'Random,SortName'
|
2019-11-06 13:43:39 +03:00
|
|
|
}],
|
|
|
|
callback: function () {
|
|
|
|
getQuery().StartIndex = 0;
|
|
|
|
reloadItems(tabContent);
|
|
|
|
},
|
|
|
|
query: getQuery(),
|
|
|
|
button: e.target
|
2018-10-23 01:05:09 +03:00
|
|
|
});
|
2019-11-06 13:43:39 +03:00
|
|
|
});
|
2020-05-05 23:51:00 +02:00
|
|
|
var btnSelectView = tabContent.querySelector('.btnSelectView');
|
|
|
|
btnSelectView.addEventListener('click', function (e) {
|
|
|
|
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
|
2019-11-06 13:43:39 +03:00
|
|
|
});
|
2020-05-05 23:51:00 +02:00
|
|
|
btnSelectView.addEventListener('layoutchange', function (e) {
|
2019-11-06 13:43:39 +03:00
|
|
|
var viewStyle = e.detail.viewStyle;
|
|
|
|
getPageData().view = viewStyle;
|
|
|
|
libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle);
|
|
|
|
getQuery().StartIndex = 0;
|
|
|
|
onViewStyleChange();
|
|
|
|
reloadItems(tabContent);
|
|
|
|
});
|
2020-05-05 23:51:00 +02:00
|
|
|
tabContent.querySelector('.btnPlayAll').addEventListener('click', playAll);
|
|
|
|
tabContent.querySelector('.btnShuffle').addEventListener('click', shuffle);
|
2019-11-06 13:43:39 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
initPage(tabContent);
|
|
|
|
onViewStyleChange();
|
|
|
|
|
|
|
|
self.renderTab = function () {
|
|
|
|
reloadItems(tabContent);
|
|
|
|
updateFilterControls(tabContent);
|
|
|
|
};
|
|
|
|
|
|
|
|
self.destroy = function () {};
|
|
|
|
};
|
2019-01-10 22:51:06 +00:00
|
|
|
});
|