mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update music screens
This commit is contained in:
parent
af289c3e71
commit
42669c4089
6 changed files with 512 additions and 431 deletions
|
@ -70,17 +70,20 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pageTabContent ehsContent" id="collectionsTab" data-index="3">
|
<div class="pageTabContent ehsContent" id="collectionsTab" data-index="3">
|
||||||
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .25em;">
|
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
|
||||||
|
<div class="paging"></div>
|
||||||
<div class="listTopPaging">
|
<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>
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize"><i class="md-icon">add</i></button>
|
<button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize"><i class="md-icon">add</i></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="itemsContainer" style="text-align:center;"></div>
|
|
||||||
<div class="noItemsMessage" style="display: none; text-align: center;">
|
<div class="alphaPicker alphabetPicker vertical">
|
||||||
<p>${MessageNoCollectionsAvailable}</p>
|
</div>
|
||||||
|
|
||||||
|
<div class="itemsContainer itemsContainerWithAlphaPicker" style="text-align:center;">
|
||||||
|
</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>
|
</div>
|
||||||
<div class="pageTabContent ehsContent" id="genresTab" data-index="4">
|
<div class="pageTabContent ehsContent" id="genresTab" data-index="4">
|
||||||
|
|
|
@ -17,21 +17,21 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="playlists" style="display: none;" class="homePageSection">
|
<div id="playlists" class="homePageSection hide">
|
||||||
<h1 class="listHeader">${HeaderPlaylists}</h1>
|
<h1 class="listHeader">${HeaderPlaylists}</h1>
|
||||||
|
|
||||||
<div class="itemsContainer noautoinit" style="text-align:left;">
|
<div class="itemsContainer noautoinit" style="text-align:left;">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="recentlyPlayed" style="display: none;" class="homePageSection">
|
<div id="recentlyPlayed" class="homePageSection hide">
|
||||||
<h1 class="listHeader">${HeaderRecentlyPlayed}</h1>
|
<h1 class="listHeader">${HeaderRecentlyPlayed}</h1>
|
||||||
|
|
||||||
<div id="recentlyPlayedSongs" class="itemsContainer noautoinit" style="text-align:left;">
|
<div id="recentlyPlayedSongs" class="itemsContainer noautoinit" style="text-align:left;">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="topPlayed" style="display: none;" class="homePageSection">
|
<div id="topPlayed" class="homePageSection hide">
|
||||||
<h1 class="listHeader">${HeaderFrequentlyPlayed}</h1>
|
<h1 class="listHeader">${HeaderFrequentlyPlayed}</h1>
|
||||||
|
|
||||||
<div id="topPlayedSongs" class="itemsContainer noautoinit" style="text-align: left;">
|
<div id="topPlayedSongs" class="itemsContainer noautoinit" style="text-align: left;">
|
||||||
|
@ -41,13 +41,21 @@
|
||||||
<div class="favoriteSections homePageSection"></div>
|
<div class="favoriteSections homePageSection"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pageTabContent pageTabContent ehsContent" id="albumsTab" data-index="1">
|
<div class="pageTabContent pageTabContent ehsContent" id="albumsTab" 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 class="viewSettings">
|
|
||||||
<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 id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="pageTabContent pageTabContent ehsContent" id="albumArtistsTab" data-index="2">
|
<div class="pageTabContent pageTabContent ehsContent" id="albumArtistsTab" data-index="2">
|
||||||
<div class="alphaPicker alphabetPicker vertical">
|
<div class="alphaPicker alphabetPicker vertical">
|
||||||
|
@ -75,9 +83,8 @@
|
||||||
<div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
|
<div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pageTabContent pageTabContent ehsContent" id="genresTab" data-index="5">
|
<div class="pageTabContent pageTabContent ehsContent" id="genresTab" data-index="5">
|
||||||
<div class="viewSettings">
|
<div style="text-align: center; display: flex; align-items: center; justify-content: center;">
|
||||||
<div class="listTopPaging">
|
<button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="items" class="itemsContainer paddedItemsContainer"></div>
|
<div id="items" class="itemsContainer paddedItemsContainer"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,156 +1,209 @@
|
||||||
define(['jQuery'], function ($) {
|
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker'], function (events, libraryBrowser, imageLoader, alphaPicker) {
|
||||||
|
|
||||||
var data = {};
|
return function (view, params, tabContent) {
|
||||||
function getPageData() {
|
|
||||||
var key = getSavedQueryKey();
|
|
||||||
var pageData = data[key];
|
|
||||||
|
|
||||||
if (!pageData) {
|
var self = this;
|
||||||
pageData = data[key] = {
|
var pageSize = libraryBrowser.getDefaultPageSize();
|
||||||
query: {
|
|
||||||
SortBy: "SortName",
|
|
||||||
SortOrder: "Ascending",
|
|
||||||
IncludeItemTypes: "BoxSet",
|
|
||||||
Recursive: true,
|
|
||||||
Fields: "PrimaryImageAspectRatio,SortName,SyncInfo,CanDelete",
|
|
||||||
ImageTypeLimit: 1,
|
|
||||||
EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
|
|
||||||
StartIndex: 0,
|
|
||||||
Limit: LibraryBrowser.getDefaultPageSize()
|
|
||||||
},
|
|
||||||
view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Poster', 'Poster')
|
|
||||||
};
|
|
||||||
|
|
||||||
LibraryBrowser.loadSavedQueryValues(key, pageData.query);
|
var data = {};
|
||||||
|
|
||||||
|
function getPageData(context) {
|
||||||
|
var key = getSavedQueryKey(context);
|
||||||
|
var pageData = data[key];
|
||||||
|
|
||||||
|
if (!pageData) {
|
||||||
|
pageData = data[key] = {
|
||||||
|
query: {
|
||||||
|
SortBy: "SortName",
|
||||||
|
SortOrder: "Ascending",
|
||||||
|
IncludeItemTypes: "BoxSet",
|
||||||
|
Recursive: true,
|
||||||
|
Fields: "PrimaryImageAspectRatio,MediaSourceCount,SortName,SyncInfo",
|
||||||
|
ImageTypeLimit: 1,
|
||||||
|
EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
|
||||||
|
StartIndex: 0,
|
||||||
|
Limit: pageSize
|
||||||
|
},
|
||||||
|
view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Poster', 'Poster')
|
||||||
|
};
|
||||||
|
|
||||||
|
libraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||||
|
}
|
||||||
|
return pageData;
|
||||||
}
|
}
|
||||||
return pageData;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getQuery() {
|
function getQuery(context) {
|
||||||
|
|
||||||
return getPageData().query;
|
return getPageData(context).query;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSavedQueryKey() {
|
function getSavedQueryKey(context) {
|
||||||
|
|
||||||
return LibraryBrowser.getSavedQueryKey('collections');
|
if (!context.savedQueryKey) {
|
||||||
}
|
context.savedQueryKey = libraryBrowser.getSavedQueryKey('movies');
|
||||||
|
}
|
||||||
|
return context.savedQueryKey;
|
||||||
|
}
|
||||||
|
|
||||||
function reloadItems(page) {
|
function reloadItems(page) {
|
||||||
|
|
||||||
Dashboard.showLoadingMsg();
|
Dashboard.showLoadingMsg();
|
||||||
|
|
||||||
var query = getQuery();
|
var query = getQuery(page);
|
||||||
var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query);
|
|
||||||
var promise2 = Dashboard.getCurrentUser();
|
|
||||||
|
|
||||||
Promise.all([promise1, promise2]).then(function (responses) {
|
ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
|
||||||
|
|
||||||
var result = responses[0];
|
// Scroll back up so they can see the results from the beginning
|
||||||
var user = responses[1];
|
window.scrollTo(0, 0);
|
||||||
|
|
||||||
// Scroll back up so they can see the results from the beginning
|
updateFilterControls(page);
|
||||||
window.scrollTo(0, 0);
|
|
||||||
|
|
||||||
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
|
||||||
|
});
|
||||||
|
|
||||||
var view = getPageData().view;
|
var html;
|
||||||
|
var viewStyle = self.getCurrentViewStyle();
|
||||||
|
|
||||||
$('.listTopPaging', page).html(LibraryBrowser.getQueryPagingHtml({
|
if (viewStyle == "Thumb") {
|
||||||
startIndex: query.StartIndex,
|
|
||||||
limit: query.Limit,
|
|
||||||
totalRecordCount: result.TotalRecordCount,
|
|
||||||
viewButton: false,
|
|
||||||
sortButton: true,
|
|
||||||
showLimit: false,
|
|
||||||
updatePageSizeSetting: false,
|
|
||||||
addLayoutButton: true,
|
|
||||||
currentLayout: view
|
|
||||||
|
|
||||||
}));
|
html = libraryBrowser.getPosterViewHtml({
|
||||||
|
|
||||||
if (result.TotalRecordCount) {
|
|
||||||
|
|
||||||
if (view == "List") {
|
|
||||||
|
|
||||||
html = LibraryBrowser.getListViewHtml({
|
|
||||||
items: result.Items,
|
items: result.Items,
|
||||||
|
shape: "backdrop",
|
||||||
|
preferThumb: true,
|
||||||
|
context: 'movies',
|
||||||
|
lazy: true,
|
||||||
|
overlayPlayButton: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (viewStyle == "ThumbCard") {
|
||||||
|
|
||||||
|
html = libraryBrowser.getPosterViewHtml({
|
||||||
|
items: result.Items,
|
||||||
|
shape: "backdrop",
|
||||||
|
preferThumb: true,
|
||||||
|
context: 'movies',
|
||||||
|
lazy: true,
|
||||||
|
cardLayout: true,
|
||||||
|
showTitle: true,
|
||||||
|
showItemCounts: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (viewStyle == "Banner") {
|
||||||
|
|
||||||
|
html = libraryBrowser.getPosterViewHtml({
|
||||||
|
items: result.Items,
|
||||||
|
shape: "banner",
|
||||||
|
preferBanner: true,
|
||||||
|
context: 'movies',
|
||||||
|
lazy: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (viewStyle == "List") {
|
||||||
|
|
||||||
|
html = libraryBrowser.getListViewHtml({
|
||||||
|
items: result.Items,
|
||||||
|
context: 'movies',
|
||||||
sortBy: query.SortBy
|
sortBy: query.SortBy
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else if (view == "Poster") {
|
else if (viewStyle == "PosterCard") {
|
||||||
html = LibraryBrowser.getPosterViewHtml({
|
|
||||||
|
html = libraryBrowser.getPosterViewHtml({
|
||||||
items: result.Items,
|
items: result.Items,
|
||||||
shape: "auto",
|
shape: "portrait",
|
||||||
|
context: 'movies',
|
||||||
showTitle: true,
|
showTitle: true,
|
||||||
|
showYear: true,
|
||||||
|
lazy: true,
|
||||||
|
cardLayout: true,
|
||||||
|
showItemCounts: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
|
||||||
|
// Poster
|
||||||
|
html = libraryBrowser.getPosterViewHtml({
|
||||||
|
items: result.Items,
|
||||||
|
shape: "portrait",
|
||||||
|
context: 'movies',
|
||||||
centerText: true,
|
centerText: true,
|
||||||
lazy: true,
|
lazy: true,
|
||||||
overlayPlayButton: true
|
overlayPlayButton: true
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else if (view == "PosterCard") {
|
|
||||||
html = LibraryBrowser.getPosterViewHtml({
|
var i, length;
|
||||||
items: result.Items,
|
var elems = tabContent.querySelectorAll('.paging');
|
||||||
shape: "auto",
|
for (i = 0, length = elems.length; i < length; i++) {
|
||||||
showTitle: true,
|
elems[i].innerHTML = pagingHtml;
|
||||||
cardLayout: true,
|
|
||||||
lazy: true,
|
|
||||||
showItemCounts: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else if (view == "Thumb") {
|
|
||||||
html = LibraryBrowser.getPosterViewHtml({
|
|
||||||
items: result.Items,
|
|
||||||
shape: "backdrop",
|
|
||||||
showTitle: true,
|
|
||||||
centerText: true,
|
|
||||||
lazy: true,
|
|
||||||
preferThumb: true,
|
|
||||||
overlayPlayButton: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else if (view == "ThumbCard") {
|
|
||||||
html = LibraryBrowser.getPosterViewHtml({
|
|
||||||
items: result.Items,
|
|
||||||
shape: "backdrop",
|
|
||||||
showTitle: true,
|
|
||||||
lazy: true,
|
|
||||||
preferThumb: true,
|
|
||||||
cardLayout: true,
|
|
||||||
showItemCounts: true
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$('.noItemsMessage', page).hide();
|
function onNextPageClick() {
|
||||||
|
query.StartIndex += query.Limit;
|
||||||
|
reloadItems(tabContent);
|
||||||
|
}
|
||||||
|
|
||||||
} else {
|
function onPreviousPageClick() {
|
||||||
|
query.StartIndex -= query.Limit;
|
||||||
|
reloadItems(tabContent);
|
||||||
|
}
|
||||||
|
|
||||||
$('.noItemsMessage', page).show();
|
elems = tabContent.querySelectorAll('.btnNextPage');
|
||||||
}
|
for (i = 0, length = elems.length; i < length; i++) {
|
||||||
|
elems[i].addEventListener('click', onNextPageClick);
|
||||||
|
}
|
||||||
|
|
||||||
var elem = page.querySelector('.itemsContainer');
|
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
||||||
elem.innerHTML = html;
|
for (i = 0, length = elems.length; i < length; i++) {
|
||||||
ImageLoader.lazyChildren(elem);
|
elems[i].addEventListener('click', onPreviousPageClick);
|
||||||
|
}
|
||||||
|
|
||||||
$('.btnNextPage', page).on('click', function () {
|
if (!items.length) {
|
||||||
query.StartIndex += query.Limit;
|
html = '<p style="text-align:center;">' + Globalize.translate('MessageNoCollectionsAvailable') + '</p>';
|
||||||
reloadItems(page);
|
}
|
||||||
|
|
||||||
|
var itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||||
|
itemsContainer.innerHTML = html;
|
||||||
|
imageLoader.lazyChildren(itemsContainer);
|
||||||
|
|
||||||
|
libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
|
||||||
|
|
||||||
|
Dashboard.hideLoadingMsg();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.btnPreviousPage', page).on('click', function () {
|
self.alphaPicker = new alphaPicker({
|
||||||
query.StartIndex -= query.Limit;
|
element: alphaPickerElement,
|
||||||
reloadItems(page);
|
valueChangeEvent: 'click'
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
|
tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
|
||||||
getPageData().view = layout;
|
libraryBrowser.showSortMenu({
|
||||||
LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
|
|
||||||
reloadItems(page);
|
|
||||||
});
|
|
||||||
|
|
||||||
// On callback make sure to set StartIndex = 0
|
|
||||||
$('.btnSort', page).on('click', function () {
|
|
||||||
LibraryBrowser.showSortMenu({
|
|
||||||
items: [{
|
items: [{
|
||||||
name: Globalize.translate('OptionNameSort'),
|
name: Globalize.translate('OptionNameSort'),
|
||||||
id: 'SortName'
|
id: 'SortName'
|
||||||
|
@ -172,67 +225,57 @@
|
||||||
id: 'PremiereDate,SortName'
|
id: 'PremiereDate,SortName'
|
||||||
}],
|
}],
|
||||||
callback: function () {
|
callback: function () {
|
||||||
reloadItems(page);
|
getQuery(tabContent).StartIndex = 0;
|
||||||
|
reloadItems(tabContent);
|
||||||
},
|
},
|
||||||
query: query
|
query: getQuery(tabContent),
|
||||||
|
button: e.target
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
|
tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
|
||||||
|
|
||||||
Dashboard.hideLoadingMsg();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function initPage(tabContent) {
|
|
||||||
|
|
||||||
// The button is created dynamically
|
|
||||||
$('.btnNewCollection', tabContent).on('click', function () {
|
|
||||||
|
|
||||||
require(['collectionEditor'], function (collectionEditor) {
|
|
||||||
|
|
||||||
var serverId = ApiClient.serverInfo().Id;
|
|
||||||
new collectionEditor().show({
|
|
||||||
items: [],
|
|
||||||
serverId: serverId
|
|
||||||
});
|
|
||||||
|
|
||||||
|
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
|
||||||
});
|
});
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
pageIdOn('pageinit', 'boxsetsPage', function () {
|
tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
|
||||||
|
|
||||||
var page = this;
|
var viewStyle = e.detail.viewStyle;
|
||||||
|
|
||||||
var content = page;
|
getPageData(tabContent).view = viewStyle;
|
||||||
|
libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
|
||||||
|
getQuery(tabContent).StartIndex = 0;
|
||||||
|
reloadItems(tabContent);
|
||||||
|
});
|
||||||
|
|
||||||
initPage(content);
|
// The button is created dynamically
|
||||||
|
tabContent.querySelector('.btnNewCollection').addEventListener('click', function () {
|
||||||
|
|
||||||
});
|
require(['collectionEditor'], function (collectionEditor) {
|
||||||
pageIdOn('pagebeforeshow', 'boxsetsPage', function () {
|
|
||||||
|
|
||||||
var page = this;
|
var serverId = ApiClient.serverInfo().Id;
|
||||||
|
new collectionEditor().show({
|
||||||
|
items: [],
|
||||||
|
serverId: serverId
|
||||||
|
});
|
||||||
|
|
||||||
var content = page;
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
reloadItems(content);
|
self.getCurrentViewStyle = function () {
|
||||||
|
return getPageData(tabContent).view;
|
||||||
});
|
|
||||||
|
|
||||||
return function (view, params, tabContent) {
|
|
||||||
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
self.initTab = function () {
|
|
||||||
|
|
||||||
initPage(tabContent);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
initPage(tabContent);
|
||||||
|
|
||||||
self.renderTab = function () {
|
self.renderTab = function () {
|
||||||
|
|
||||||
reloadItems(tabContent);
|
reloadItems(tabContent);
|
||||||
|
updateFilterControls(tabContent);
|
||||||
|
};
|
||||||
|
|
||||||
|
self.destroy = function () {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
});
|
});
|
|
@ -1,10 +1,12 @@
|
||||||
define(['jQuery', '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 = {};
|
||||||
|
|
||||||
function getPageData(context) {
|
function getPageData(context) {
|
||||||
var key = getSavedQueryKey(context);
|
var key = getSavedQueryKey(context);
|
||||||
var pageData = data[key];
|
var pageData = data[key];
|
||||||
|
@ -16,17 +18,17 @@
|
||||||
SortOrder: "Ascending",
|
SortOrder: "Ascending",
|
||||||
IncludeItemTypes: "MusicAlbum",
|
IncludeItemTypes: "MusicAlbum",
|
||||||
Recursive: true,
|
Recursive: true,
|
||||||
Fields: "PrimaryImageAspectRatio,SortName,SyncInfo",
|
Fields: "PrimaryImageAspectRatio,MediaSourceCount,SortName,SyncInfo",
|
||||||
StartIndex: 0,
|
|
||||||
ImageTypeLimit: 1,
|
ImageTypeLimit: 1,
|
||||||
EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
|
EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
|
||||||
Limit: LibraryBrowser.getDefaultPageSize()
|
StartIndex: 0,
|
||||||
|
Limit: pageSize
|
||||||
},
|
},
|
||||||
view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Poster', 'Poster')
|
view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Poster', 'Poster')
|
||||||
};
|
};
|
||||||
|
|
||||||
pageData.query.ParentId = LibraryMenu.getTopParentId();
|
pageData.query.ParentId = params.topParentId;
|
||||||
LibraryBrowser.loadSavedQueryValues(key, pageData.query);
|
libraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||||
}
|
}
|
||||||
return pageData;
|
return pageData;
|
||||||
}
|
}
|
||||||
|
@ -39,7 +41,7 @@
|
||||||
function getSavedQueryKey(context) {
|
function getSavedQueryKey(context) {
|
||||||
|
|
||||||
if (!context.savedQueryKey) {
|
if (!context.savedQueryKey) {
|
||||||
context.savedQueryKey = LibraryBrowser.getSavedQueryKey('albums');
|
context.savedQueryKey = libraryBrowser.getSavedQueryKey('musicalbums');
|
||||||
}
|
}
|
||||||
return context.savedQueryKey;
|
return context.savedQueryKey;
|
||||||
}
|
}
|
||||||
|
@ -55,40 +57,33 @@
|
||||||
// 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 view = getPageData(page).view;
|
|
||||||
var pagingHtml = LibraryBrowser.getQueryPagingHtml({
|
var pagingHtml = LibraryBrowser.getQueryPagingHtml({
|
||||||
startIndex: query.StartIndex,
|
startIndex: query.StartIndex,
|
||||||
limit: query.Limit,
|
limit: query.Limit,
|
||||||
totalRecordCount: result.TotalRecordCount,
|
totalRecordCount: result.TotalRecordCount,
|
||||||
showLimit: false,
|
showLimit: false,
|
||||||
sortButton: true,
|
|
||||||
addLayoutButton: true,
|
|
||||||
currentLayout: view,
|
|
||||||
updatePageSizeSetting: false,
|
updatePageSizeSetting: false,
|
||||||
layouts: 'List,Poster,PosterCard,Timeline',
|
addLayoutButton: false,
|
||||||
filterButton: true
|
sortButton: false,
|
||||||
|
filterButton: false
|
||||||
});
|
});
|
||||||
|
|
||||||
page.querySelector('.listTopPaging').innerHTML = pagingHtml;
|
var html;
|
||||||
|
var viewStyle = self.getCurrentViewStyle();
|
||||||
|
|
||||||
updateFilterControls(page);
|
if (viewStyle == "List") {
|
||||||
|
|
||||||
if (view == "Poster") {
|
html = libraryBrowser.getListViewHtml({
|
||||||
html = LibraryBrowser.getPosterViewHtml({
|
|
||||||
items: result.Items,
|
items: result.Items,
|
||||||
shape: "square",
|
|
||||||
context: 'music',
|
context: 'music',
|
||||||
showTitle: true,
|
sortBy: query.SortBy
|
||||||
showParentTitle: true,
|
|
||||||
lazy: true,
|
|
||||||
centerText: true,
|
|
||||||
overlayPlayButton: true
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else if (view == "PosterCard") {
|
else if (viewStyle == "PosterCard") {
|
||||||
|
|
||||||
html = LibraryBrowser.getPosterViewHtml({
|
html = libraryBrowser.getPosterViewHtml({
|
||||||
items: result.Items,
|
items: result.Items,
|
||||||
shape: "square",
|
shape: "square",
|
||||||
context: 'music',
|
context: 'music',
|
||||||
|
@ -99,63 +94,107 @@
|
||||||
cardLayout: true
|
cardLayout: true
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else if (view == "List") {
|
else {
|
||||||
|
|
||||||
html = LibraryBrowser.getListViewHtml({
|
// Poster
|
||||||
items: result.Items,
|
html = libraryBrowser.getPosterViewHtml({
|
||||||
context: 'music',
|
|
||||||
sortBy: query.SortBy
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else if (view == "Timeline") {
|
|
||||||
html = LibraryBrowser.getPosterViewHtml({
|
|
||||||
items: result.Items,
|
items: result.Items,
|
||||||
shape: "square",
|
shape: "square",
|
||||||
context: 'music',
|
context: 'music',
|
||||||
showTitle: true,
|
showTitle: true,
|
||||||
showParentTitle: true,
|
showParentTitle: true,
|
||||||
timeline: true,
|
lazy: true,
|
||||||
lazy: true
|
centerText: true,
|
||||||
|
overlayPlayButton: true
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
var elem = page.querySelector('#items');
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
$('.btnNextPage', page).on('click', function () {
|
function onNextPageClick() {
|
||||||
query.StartIndex += query.Limit;
|
query.StartIndex += query.Limit;
|
||||||
reloadItems(page);
|
reloadItems(tabContent);
|
||||||
});
|
}
|
||||||
|
|
||||||
$('.btnPreviousPage', page).on('click', function () {
|
function onPreviousPageClick() {
|
||||||
query.StartIndex -= query.Limit;
|
query.StartIndex -= query.Limit;
|
||||||
reloadItems(page);
|
reloadItems(tabContent);
|
||||||
|
}
|
||||||
|
|
||||||
|
elems = tabContent.querySelectorAll('.btnNextPage');
|
||||||
|
for (i = 0, length = elems.length; i < length; i++) {
|
||||||
|
elems[i].addEventListener('click', onNextPageClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
||||||
|
for (i = 0, length = elems.length; i < length; i++) {
|
||||||
|
elems[i].addEventListener('click', onPreviousPageClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
var itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||||
|
itemsContainer.innerHTML = html;
|
||||||
|
imageLoader.lazyChildren(itemsContainer);
|
||||||
|
|
||||||
|
libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
|
||||||
|
|
||||||
|
Dashboard.hideLoadingMsg();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
self.showFilterMenu = function () {
|
||||||
|
|
||||||
|
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
|
||||||
|
|
||||||
|
var filterDialog = new filterDialogFactory({
|
||||||
|
query: getQuery(tabContent),
|
||||||
|
mode: 'albums'
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.btnFilter', page).on('click', function () {
|
Events.on(filterDialog, 'filterchange', function () {
|
||||||
showFilterMenu(page);
|
getQuery(tabContent).StartIndex = 0;
|
||||||
|
reloadItems(tabContent);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
|
filterDialog.show();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
if (layout == 'Timeline') {
|
function updateFilterControls(tabContent) {
|
||||||
getQuery(page).SortBy = 'ProductionYear,PremiereDate,SortName';
|
|
||||||
getQuery(page).SortOrder = 'Descending';
|
|
||||||
}
|
|
||||||
|
|
||||||
getPageData(page).view = layout;
|
var query = getQuery(tabContent);
|
||||||
LibraryBrowser.saveViewSetting(getSavedQueryKey(page), layout);
|
self.alphaPicker.value(query.NameStartsWithOrGreater);
|
||||||
reloadItems(page);
|
}
|
||||||
});
|
|
||||||
|
|
||||||
// On callback make sure to set StartIndex = 0
|
function initPage(tabContent) {
|
||||||
$('.btnSort', page).on('click', function () {
|
|
||||||
LibraryBrowser.showSortMenu({
|
var alphaPickerElement = tabContent.querySelector('.alphaPicker');
|
||||||
items: [{
|
alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
|
||||||
name: Globalize.translate('OptionNameSort'),
|
var newValue = e.detail.value;
|
||||||
id: 'SortName'
|
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('OptionAlbumArtist'),
|
name: Globalize.translate('OptionAlbumArtist'),
|
||||||
id: 'AlbumArtist,SortName'
|
id: 'AlbumArtist,SortName'
|
||||||
|
@ -176,59 +215,44 @@
|
||||||
name: Globalize.translate('OptionReleaseDate'),
|
name: Globalize.translate('OptionReleaseDate'),
|
||||||
id: 'ProductionYear,PremiereDate,SortName'
|
id: 'ProductionYear,PremiereDate,SortName'
|
||||||
}],
|
}],
|
||||||
callback: function () {
|
callback: function () {
|
||||||
reloadItems(page);
|
getQuery(tabContent).StartIndex = 0;
|
||||||
},
|
reloadItems(tabContent);
|
||||||
query: query
|
},
|
||||||
});
|
query: getQuery(tabContent),
|
||||||
|
button: e.target
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
LibraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
|
tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
|
||||||
Dashboard.hideLoadingMsg();
|
|
||||||
|
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.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 showFilterMenu(page) {
|
self.getCurrentViewStyle = function () {
|
||||||
|
return getPageData(tabContent).view;
|
||||||
|
};
|
||||||
|
|
||||||
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
|
initPage(tabContent);
|
||||||
|
|
||||||
var filterDialog = new filterDialogFactory({
|
|
||||||
query: getQuery(page),
|
|
||||||
mode: 'albums'
|
|
||||||
});
|
|
||||||
|
|
||||||
Events.on(filterDialog, 'filterchange', function () {
|
|
||||||
reloadItems(page);
|
|
||||||
});
|
|
||||||
|
|
||||||
filterDialog.show();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateFilterControls(page) {
|
|
||||||
|
|
||||||
var query = getQuery(page);
|
|
||||||
|
|
||||||
self.alphaPicker.value(query.NameStartsWithOrGreater);
|
|
||||||
}
|
|
||||||
|
|
||||||
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'
|
|
||||||
});
|
|
||||||
|
|
||||||
self.renderTab = function () {
|
self.renderTab = function () {
|
||||||
|
|
||||||
reloadItems(tabContent);
|
reloadItems(tabContent);
|
||||||
|
updateFilterControls(tabContent);
|
||||||
|
};
|
||||||
|
|
||||||
|
self.destroy = function () {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
});
|
});
|
|
@ -1,4 +1,4 @@
|
||||||
define(['jQuery'], function ($) {
|
define([], function () {
|
||||||
|
|
||||||
return function (view, params, tabContent) {
|
return function (view, params, tabContent) {
|
||||||
|
|
||||||
|
@ -17,13 +17,12 @@
|
||||||
IncludeItemTypes: "Audio,MusicVideo",
|
IncludeItemTypes: "Audio,MusicVideo",
|
||||||
Recursive: true,
|
Recursive: true,
|
||||||
Fields: "DateCreated,SyncInfo,ItemCounts",
|
Fields: "DateCreated,SyncInfo,ItemCounts",
|
||||||
StartIndex: 0,
|
StartIndex: 0
|
||||||
Limit: LibraryBrowser.getDefaultPageSize()
|
|
||||||
},
|
},
|
||||||
view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
|
view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
|
||||||
};
|
};
|
||||||
|
|
||||||
pageData.query.ParentId = LibraryMenu.getTopParentId();
|
pageData.query.ParentId = params.topParentId;
|
||||||
LibraryBrowser.loadSavedQueryValues(key, pageData.query);
|
LibraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||||
}
|
}
|
||||||
return pageData;
|
return pageData;
|
||||||
|
@ -42,42 +41,27 @@
|
||||||
function reloadItems(context) {
|
function reloadItems(context) {
|
||||||
|
|
||||||
Dashboard.showLoadingMsg();
|
Dashboard.showLoadingMsg();
|
||||||
|
|
||||||
var query = getQuery();
|
var query = getQuery();
|
||||||
|
|
||||||
ApiClient.getMusicGenres(Dashboard.getCurrentUserId(), query).then(function (result) {
|
ApiClient.getMusicGenres(Dashboard.getCurrentUserId(), query).then(function (result) {
|
||||||
|
|
||||||
// Scroll back up so they can see the results from the beginning
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
var view = getPageData().view;
|
var viewStyle = self.getCurrentViewStyle();
|
||||||
|
|
||||||
$('.listTopPaging', context).html(LibraryBrowser.getQueryPagingHtml({
|
if (viewStyle == "Thumb") {
|
||||||
startIndex: query.StartIndex,
|
|
||||||
limit: query.Limit,
|
|
||||||
totalRecordCount: result.TotalRecordCount,
|
|
||||||
showLimit: false,
|
|
||||||
updatePageSizeSetting: false,
|
|
||||||
addLayoutButton: true,
|
|
||||||
currentLayout: view
|
|
||||||
|
|
||||||
}));
|
|
||||||
|
|
||||||
if (view == "Thumb") {
|
|
||||||
html = LibraryBrowser.getPosterViewHtml({
|
html = LibraryBrowser.getPosterViewHtml({
|
||||||
items: result.Items,
|
items: result.Items,
|
||||||
shape: "backdrop",
|
shape: "backdrop",
|
||||||
preferThumb: true,
|
preferThumb: true,
|
||||||
showItemCounts: true,
|
|
||||||
context: 'music',
|
context: 'music',
|
||||||
lazy: true,
|
showItemCounts: true,
|
||||||
centerText: true,
|
centerText: true,
|
||||||
|
lazy: 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,
|
||||||
|
@ -86,18 +70,30 @@
|
||||||
context: 'music',
|
context: 'music',
|
||||||
showItemCounts: true,
|
showItemCounts: true,
|
||||||
cardLayout: true,
|
cardLayout: true,
|
||||||
|
showTitle: true,
|
||||||
|
lazy: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (viewStyle == "PosterCard") {
|
||||||
|
html = LibraryBrowser.getPosterViewHtml({
|
||||||
|
items: result.Items,
|
||||||
|
shape: "portrait",
|
||||||
|
context: 'music',
|
||||||
|
showItemCounts: true,
|
||||||
lazy: true,
|
lazy: true,
|
||||||
|
cardLayout: true,
|
||||||
showTitle: true
|
showTitle: true
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else if (view == "Poster") {
|
else if (viewStyle == "Poster") {
|
||||||
html = LibraryBrowser.getPosterViewHtml({
|
html = LibraryBrowser.getPosterViewHtml({
|
||||||
items: result.Items,
|
items: result.Items,
|
||||||
shape: "portrait",
|
shape: "portrait",
|
||||||
context: 'music',
|
context: 'music',
|
||||||
centerText: true,
|
centerText: true,
|
||||||
showItemCounts: true,
|
showItemCounts: true,
|
||||||
lazy: true
|
lazy: true,
|
||||||
|
overlayPlayButton: true
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -105,32 +101,40 @@
|
||||||
elem.innerHTML = html;
|
elem.innerHTML = html;
|
||||||
ImageLoader.lazyChildren(elem);
|
ImageLoader.lazyChildren(elem);
|
||||||
|
|
||||||
$('.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) {
|
|
||||||
getPageData().view = layout;
|
|
||||||
LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
|
|
||||||
reloadItems(context);
|
|
||||||
});
|
|
||||||
|
|
||||||
LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
|
LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
|
||||||
|
|
||||||
Dashboard.hideLoadingMsg();
|
Dashboard.hideLoadingMsg();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
self.getViewStyles = function () {
|
||||||
|
return 'Poster,PosterCard,Thumb,ThumbCard'.split(',');
|
||||||
|
};
|
||||||
|
|
||||||
|
self.getCurrentViewStyle = function () {
|
||||||
|
return getPageData(tabContent).view;
|
||||||
|
};
|
||||||
|
|
||||||
|
self.setCurrentViewStyle = function (viewStyle) {
|
||||||
|
getPageData(tabContent).view = viewStyle;
|
||||||
|
LibraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
|
||||||
|
reloadItems(tabContent);
|
||||||
|
};
|
||||||
|
|
||||||
|
self.enableViewSelection = true;
|
||||||
|
|
||||||
self.renderTab = function () {
|
self.renderTab = function () {
|
||||||
|
|
||||||
reloadItems(tabContent);
|
reloadItems(tabContent);
|
||||||
};
|
};
|
||||||
};
|
|
||||||
|
|
||||||
|
tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
|
||||||
|
|
||||||
|
LibraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles());
|
||||||
|
});
|
||||||
|
|
||||||
|
tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
|
||||||
|
|
||||||
|
self.setCurrentViewStyle(e.detail.viewStyle);
|
||||||
|
});
|
||||||
|
};
|
||||||
});
|
});
|
|
@ -1,4 +1,4 @@
|
||||||
define(['jQuery', 'libraryBrowser', 'scrollStyles'], function ($, libraryBrowser) {
|
define(['libraryBrowser', 'scrollStyles'], function (libraryBrowser) {
|
||||||
|
|
||||||
function itemsPerRow() {
|
function itemsPerRow() {
|
||||||
|
|
||||||
|
@ -71,12 +71,12 @@
|
||||||
|
|
||||||
ApiClient.getItems(Dashboard.getCurrentUserId(), options).then(function (result) {
|
ApiClient.getItems(Dashboard.getCurrentUserId(), options).then(function (result) {
|
||||||
|
|
||||||
var elem;
|
var elem = page.querySelector('#recentlyPlayed');
|
||||||
|
|
||||||
if (result.Items.length) {
|
if (result.Items.length) {
|
||||||
elem = $('#recentlyPlayed', page).show()[0];
|
elem.classList.remove('hide');
|
||||||
} else {
|
} else {
|
||||||
elem = $('#recentlyPlayed', page).hide()[0];
|
elem.classList.add('hide');
|
||||||
}
|
}
|
||||||
|
|
||||||
var itemsContainer = elem.querySelector('.itemsContainer');
|
var itemsContainer = elem.querySelector('.itemsContainer');
|
||||||
|
@ -117,12 +117,12 @@
|
||||||
|
|
||||||
ApiClient.getItems(Dashboard.getCurrentUserId(), options).then(function (result) {
|
ApiClient.getItems(Dashboard.getCurrentUserId(), options).then(function (result) {
|
||||||
|
|
||||||
var elem;
|
var elem = page.querySelector('#topPlayed');
|
||||||
|
|
||||||
if (result.Items.length) {
|
if (result.Items.length) {
|
||||||
elem = $('#topPlayed', page).show()[0];
|
elem.classList.remove('hide');
|
||||||
} else {
|
} else {
|
||||||
elem = $('#topPlayed', page).hide()[0];
|
elem.classList.add('hide');
|
||||||
}
|
}
|
||||||
|
|
||||||
var itemsContainer = elem.querySelector('.itemsContainer');
|
var itemsContainer = elem.querySelector('.itemsContainer');
|
||||||
|
@ -160,12 +160,12 @@
|
||||||
|
|
||||||
ApiClient.getItems(Dashboard.getCurrentUserId(), options).then(function (result) {
|
ApiClient.getItems(Dashboard.getCurrentUserId(), options).then(function (result) {
|
||||||
|
|
||||||
var elem;
|
var elem = page.querySelector('#playlists');
|
||||||
|
|
||||||
if (result.Items.length) {
|
if (result.Items.length) {
|
||||||
elem = $('#playlists', page).show()[0];
|
elem.classList.remove('hide');
|
||||||
} else {
|
} else {
|
||||||
elem = $('#playlists', page).hide()[0];
|
elem.classList.add('hide');
|
||||||
}
|
}
|
||||||
|
|
||||||
var itemsContainer = elem.querySelector('.itemsContainer');
|
var itemsContainer = elem.querySelector('.itemsContainer');
|
||||||
|
@ -252,13 +252,13 @@
|
||||||
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
|
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
|
||||||
|
|
||||||
var containers = tabContent.querySelectorAll('.itemsContainer');
|
var containers = tabContent.querySelectorAll('.itemsContainer');
|
||||||
if (enableScrollX()) {
|
|
||||||
$(containers).addClass('hiddenScrollX');
|
|
||||||
} else {
|
|
||||||
$(containers).removeClass('hiddenScrollX');
|
|
||||||
}
|
|
||||||
|
|
||||||
for (var i = 0, length = containers.length; i < length; i++) {
|
for (var i = 0, length = containers.length; i < length; i++) {
|
||||||
|
if (enableScrollX()) {
|
||||||
|
containers[i].classList.add('hiddenScrollX');
|
||||||
|
} else {
|
||||||
|
containers[i].classList.remove('hiddenScrollX');
|
||||||
|
}
|
||||||
|
|
||||||
LibraryBrowser.createCardMenus(containers[i]);
|
LibraryBrowser.createCardMenus(containers[i]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue