1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
jellyfin-web/src/controllers/music/musicartists.js

247 lines
9.2 KiB
JavaScript
Raw Normal View History

import loading from 'loading';
import events from 'events';
import libraryBrowser from 'libraryBrowser';
import imageLoader from 'imageLoader';
import AlphaPicker from 'alphaPicker';
import listView from 'listView';
import cardBuilder from 'cardBuilder';
import * as userSettings from 'userSettings';
import 'emby-itemscontainer';
/* eslint-disable indent */
export default function (view, params, tabContent) {
2018-10-23 01:05:09 +03:00
function getPageData(context) {
const key = getSavedQueryKey(context);
let pageData = data[key];
if (!pageData) {
const queryValues = {
2020-05-05 23:51:00 +02:00
SortBy: 'SortName',
SortOrder: 'Ascending',
Recursive: true,
2020-05-05 23:51:00 +02:00
Fields: 'PrimaryImageAspectRatio,SortName,BasicSyncInfo',
StartIndex: 0,
ImageTypeLimit: 1,
2020-05-05 23:51:00 +02:00
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb'
};
if (userSettings.libraryPageSize() > 0) {
queryValues['Limit'] = userSettings.libraryPageSize();
}
pageData = data[key] = {
query: queryValues,
2020-05-05 23:51:00 +02:00
view: libraryBrowser.getSavedView(key) || 'Poster'
};
pageData.query.ParentId = params.topParentId;
libraryBrowser.loadSavedQueryValues(key, pageData.query);
}
return pageData;
2018-10-23 01:05:09 +03:00
}
function getQuery(context) {
return getPageData(context).query;
2018-10-23 01:05:09 +03:00
}
function getSavedQueryKey(context) {
if (!context.savedQueryKey) {
context.savedQueryKey = libraryBrowser.getSavedQueryKey(self.mode);
}
return context.savedQueryKey;
2018-10-23 01:05:09 +03:00
}
function onViewStyleChange() {
const viewStyle = self.getCurrentViewStyle();
const itemsContainer = tabContent.querySelector('.itemsContainer');
2020-07-30 16:07:13 +02:00
if (viewStyle == 'List') {
2020-05-05 23:51:00 +02:00
itemsContainer.classList.add('vertical-list');
itemsContainer.classList.remove('vertical-wrap');
} else {
2020-05-05 23:51:00 +02:00
itemsContainer.classList.remove('vertical-list');
itemsContainer.classList.add('vertical-wrap');
}
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;
const query = getQuery(page);
const promise = self.mode == 'albumartists' ?
ApiClient.getAlbumArtists(ApiClient.getCurrentUserId(), query) :
ApiClient.getArtists(ApiClient.getCurrentUserId(), query);
promise.then(function (result) {
2018-10-23 01:05:09 +03:00
function onNextPageClick() {
if (isLoading) {
return;
}
if (userSettings.libraryPageSize() > 0) {
query.StartIndex += query.Limit;
}
reloadItems(tabContent);
2018-10-23 01:05:09 +03:00
}
function onPreviousPageClick() {
if (isLoading) {
return;
}
if (userSettings.libraryPageSize() > 0) {
query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
}
reloadItems(tabContent);
2018-10-23 01:05:09 +03:00
}
window.scrollTo(0, 0);
updateFilterControls(page);
let html;
const 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
});
const viewStyle = self.getCurrentViewStyle();
2020-05-05 23:51:00 +02:00
if (viewStyle == 'List') {
html = listView.getListViewHtml({
items: result.Items,
sortBy: query.SortBy
});
2020-05-05 23:51:00 +02:00
} else if (viewStyle == 'PosterCard') {
html = cardBuilder.getCardsHtml({
items: result.Items,
2020-05-05 23:51:00 +02:00
shape: 'square',
context: 'music',
showTitle: true,
coverImage: true,
cardLayout: true
});
} else {
html = cardBuilder.getCardsHtml({
items: result.Items,
2020-05-05 23:51:00 +02:00
shape: 'square',
context: 'music',
showTitle: true,
coverImage: true,
lazy: true,
centerText: true,
overlayPlayButton: true
});
}
let elems = tabContent.querySelectorAll('.paging');
for (let i = 0, length = elems.length; i < length; i++) {
elems[i].innerHTML = pagingHtml;
}
2020-05-05 23:51:00 +02:00
elems = tabContent.querySelectorAll('.btnNextPage');
for (let i = 0, length = elems.length; i < length; i++) {
2020-05-05 23:51:00 +02:00
elems[i].addEventListener('click', onNextPageClick);
}
2020-05-05 23:51:00 +02:00
elems = tabContent.querySelectorAll('.btnPreviousPage');
for (let i = 0, length = elems.length; i < length; i++) {
2020-05-05 23:51:00 +02:00
elems[i].addEventListener('click', onPreviousPageClick);
}
const itemsContainer = tabContent.querySelector('.itemsContainer');
2019-01-10 22:51:06 +00:00
itemsContainer.innerHTML = html;
imageLoader.lazyChildren(itemsContainer);
libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
loading.hide();
isLoading = false;
2019-11-02 20:38:58 +03:00
import('autoFocuser').then(({default: autoFocuser}) => {
2019-11-02 20:38:58 +03:00
autoFocuser.autoFocus(tabContent);
});
});
2018-10-23 01:05:09 +03:00
}
function updateFilterControls(tabContent) {
const query = getQuery(tabContent);
self.alphaPicker.value(query.NameStartsWithOrGreater);
2018-10-23 01:05:09 +03:00
}
const self = this;
const data = {};
let isLoading = false;
self.showFilterMenu = function () {
import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
const filterDialog = new filterDialogFactory({
query: getQuery(tabContent),
mode: self.mode,
serverId: ApiClient.serverId()
2018-10-23 01:05:09 +03:00
});
2020-05-05 23:51:00 +02:00
events.on(filterDialog, 'filterchange', function () {
getQuery(tabContent).StartIndex = 0;
reloadItems(tabContent);
});
filterDialog.show();
});
};
self.getCurrentViewStyle = function () {
return getPageData(tabContent).view;
};
function initPage(tabContent) {
const alphaPickerElement = tabContent.querySelector('.alphaPicker');
const itemsContainer = tabContent.querySelector('.itemsContainer');
2020-05-05 23:51:00 +02:00
alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
const newValue = e.detail.value;
const query = getQuery(tabContent);
query.NameStartsWithOrGreater = newValue;
query.StartIndex = 0;
reloadItems(tabContent);
});
self.alphaPicker = new AlphaPicker({
element: alphaPickerElement,
2020-05-05 23:51:00 +02:00
valueChangeEvent: 'click'
});
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');
2020-05-05 23:51:00 +02:00
tabContent.querySelector('.btnFilter').addEventListener('click', function () {
self.showFilterMenu();
});
const btnSelectView = tabContent.querySelector('.btnSelectView');
2020-05-05 23:51:00 +02:00
btnSelectView.addEventListener('click', function (e) {
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
});
2020-05-05 23:51:00 +02:00
btnSelectView.addEventListener('layoutchange', function (e) {
const viewStyle = e.detail.viewStyle;
getPageData(tabContent).view = viewStyle;
libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
getQuery(tabContent).StartIndex = 0;
onViewStyleChange();
reloadItems(tabContent);
});
}
initPage(tabContent);
onViewStyleChange();
self.renderTab = function () {
reloadItems(tabContent);
updateFilterControls(tabContent);
};
self.destroy = function () {};
}
/* eslint-enable indent */