mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-18 03:18:19 -07:00
Merge pull request #3741 from murphy52589/shuffle-all-songs
Add shuffle to songs page
This commit is contained in:
Bill Thornton
GitHub
commit
0e49497b46
@ -92,6 +92,7 @@
|
|||||||
<div class="pageTabContent" id="songsTab" data-index="5">
|
<div class="pageTabContent" id="songsTab" data-index="5">
|
||||||
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
|
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
|
||||||
<div class="paging"></div>
|
<div class="paging"></div>
|
||||||
|
<button is="paper-icon-button-light" class="btnShuffle autoSize" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button>
|
||||||
<button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
|
<button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
|
||||||
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
|
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -8,197 +8,204 @@ import * as userSettings from '../../scripts/settings/userSettings';
|
|||||||
import globalize from '../../scripts/globalize';
|
import globalize from '../../scripts/globalize';
|
||||||
import '../../elements/emby-itemscontainer/emby-itemscontainer';
|
import '../../elements/emby-itemscontainer/emby-itemscontainer';
|
||||||
import Dashboard from '../../utils/dashboard';
|
import Dashboard from '../../utils/dashboard';
|
||||||
|
import {playbackManager} from '../../components/playback/playbackmanager';
|
||||||
|
|
||||||
/* eslint-disable indent */
|
export default function (view, params, tabContent) {
|
||||||
|
function getPageData(context) {
|
||||||
|
const key = getSavedQueryKey(context);
|
||||||
|
let pageData = data[key];
|
||||||
|
|
||||||
export default function (view, params, tabContent) {
|
if (!pageData) {
|
||||||
function getPageData(context) {
|
pageData = data[key] = {
|
||||||
const key = getSavedQueryKey(context);
|
query: {
|
||||||
let pageData = data[key];
|
SortBy: 'Album,SortName',
|
||||||
|
SortOrder: 'Ascending',
|
||||||
if (!pageData) {
|
IncludeItemTypes: 'Audio',
|
||||||
pageData = data[key] = {
|
Recursive: true,
|
||||||
query: {
|
Fields: 'AudioInfo,ParentId',
|
||||||
SortBy: 'Album,SortName',
|
StartIndex: 0,
|
||||||
SortOrder: 'Ascending',
|
ImageTypeLimit: 1,
|
||||||
IncludeItemTypes: 'Audio',
|
EnableImageTypes: 'Primary'
|
||||||
Recursive: true,
|
|
||||||
Fields: 'AudioInfo,ParentId',
|
|
||||||
StartIndex: 0,
|
|
||||||
ImageTypeLimit: 1,
|
|
||||||
EnableImageTypes: 'Primary'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (userSettings.libraryPageSize() > 0) {
|
|
||||||
pageData.query['Limit'] = userSettings.libraryPageSize();
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
pageData.query.ParentId = params.topParentId;
|
if (userSettings.libraryPageSize() > 0) {
|
||||||
libraryBrowser.loadSavedQueryValues(key, pageData.query);
|
pageData.query['Limit'] = userSettings.libraryPageSize();
|
||||||
}
|
}
|
||||||
|
|
||||||
return pageData;
|
pageData.query.ParentId = params.topParentId;
|
||||||
|
libraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getQuery(context) {
|
return pageData;
|
||||||
return getPageData(context).query;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getSavedQueryKey(context) {
|
|
||||||
if (!context.savedQueryKey) {
|
|
||||||
context.savedQueryKey = libraryBrowser.getSavedQueryKey('songs');
|
|
||||||
}
|
|
||||||
|
|
||||||
return context.savedQueryKey;
|
|
||||||
}
|
|
||||||
|
|
||||||
function reloadItems(page) {
|
|
||||||
loading.show();
|
|
||||||
isLoading = true;
|
|
||||||
const query = getQuery(page);
|
|
||||||
ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
|
|
||||||
function onNextPageClick() {
|
|
||||||
if (isLoading) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (userSettings.libraryPageSize() > 0) {
|
|
||||||
query.StartIndex += query.Limit;
|
|
||||||
}
|
|
||||||
reloadItems(tabContent);
|
|
||||||
}
|
|
||||||
|
|
||||||
function onPreviousPageClick() {
|
|
||||||
if (isLoading) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (userSettings.libraryPageSize() > 0) {
|
|
||||||
query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
|
|
||||||
}
|
|
||||||
reloadItems(tabContent);
|
|
||||||
}
|
|
||||||
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
const pagingHtml = libraryBrowser.getQueryPagingHtml({
|
|
||||||
startIndex: query.StartIndex,
|
|
||||||
limit: query.Limit,
|
|
||||||
totalRecordCount: result.TotalRecordCount,
|
|
||||||
showLimit: false,
|
|
||||||
updatePageSizeSetting: false,
|
|
||||||
addLayoutButton: false,
|
|
||||||
sortButton: false,
|
|
||||||
filterButton: false
|
|
||||||
});
|
|
||||||
const html = listView.getListViewHtml({
|
|
||||||
items: result.Items,
|
|
||||||
action: 'playallfromhere',
|
|
||||||
smallIcon: true,
|
|
||||||
artist: true,
|
|
||||||
addToListButton: true
|
|
||||||
});
|
|
||||||
let elems = tabContent.querySelectorAll('.paging');
|
|
||||||
|
|
||||||
for (let i = 0, length = elems.length; i < length; i++) {
|
|
||||||
elems[i].innerHTML = pagingHtml;
|
|
||||||
}
|
|
||||||
|
|
||||||
elems = tabContent.querySelectorAll('.btnNextPage');
|
|
||||||
for (let i = 0, length = elems.length; i < length; i++) {
|
|
||||||
elems[i].addEventListener('click', onNextPageClick);
|
|
||||||
}
|
|
||||||
|
|
||||||
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
|
||||||
for (let i = 0, length = elems.length; i < length; i++) {
|
|
||||||
elems[i].addEventListener('click', onPreviousPageClick);
|
|
||||||
}
|
|
||||||
|
|
||||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
|
||||||
itemsContainer.innerHTML = html;
|
|
||||||
imageLoader.lazyChildren(itemsContainer);
|
|
||||||
libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
|
|
||||||
loading.hide();
|
|
||||||
isLoading = false;
|
|
||||||
|
|
||||||
import('../../components/autoFocuser').then(({default: autoFocuser}) => {
|
|
||||||
autoFocuser.autoFocus(page);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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: 'songs',
|
|
||||||
serverId: ApiClient.serverId()
|
|
||||||
});
|
|
||||||
Events.on(filterDialog, 'filterchange', function () {
|
|
||||||
getQuery(tabContent).StartIndex = 0;
|
|
||||||
reloadItems(tabContent);
|
|
||||||
});
|
|
||||||
filterDialog.show();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
self.getCurrentViewStyle = function () {
|
|
||||||
return getPageData(tabContent).view;
|
|
||||||
};
|
|
||||||
|
|
||||||
function initPage(tabContent) {
|
|
||||||
tabContent.querySelector('.btnFilter').addEventListener('click', function () {
|
|
||||||
self.showFilterMenu();
|
|
||||||
});
|
|
||||||
tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
|
|
||||||
libraryBrowser.showSortMenu({
|
|
||||||
items: [{
|
|
||||||
name: globalize.translate('OptionTrackName'),
|
|
||||||
id: 'Name'
|
|
||||||
}, {
|
|
||||||
name: globalize.translate('Album'),
|
|
||||||
id: 'Album,SortName'
|
|
||||||
}, {
|
|
||||||
name: globalize.translate('AlbumArtist'),
|
|
||||||
id: 'AlbumArtist,Album,SortName'
|
|
||||||
}, {
|
|
||||||
name: globalize.translate('Artist'),
|
|
||||||
id: 'Artist,Album,SortName'
|
|
||||||
}, {
|
|
||||||
name: globalize.translate('OptionDateAdded'),
|
|
||||||
id: 'DateCreated,SortName'
|
|
||||||
}, {
|
|
||||||
name: globalize.translate('OptionDatePlayed'),
|
|
||||||
id: 'DatePlayed,SortName'
|
|
||||||
}, {
|
|
||||||
name: globalize.translate('OptionPlayCount'),
|
|
||||||
id: 'PlayCount,SortName'
|
|
||||||
}, {
|
|
||||||
name: globalize.translate('OptionReleaseDate'),
|
|
||||||
id: 'PremiereDate,AlbumArtist,Album,SortName'
|
|
||||||
}, {
|
|
||||||
name: globalize.translate('Runtime'),
|
|
||||||
id: 'Runtime,AlbumArtist,Album,SortName'
|
|
||||||
}],
|
|
||||||
callback: function () {
|
|
||||||
getQuery(tabContent).StartIndex = 0;
|
|
||||||
reloadItems(tabContent);
|
|
||||||
},
|
|
||||||
query: getQuery(tabContent),
|
|
||||||
button: e.target
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
initPage(tabContent);
|
|
||||||
|
|
||||||
self.renderTab = function () {
|
|
||||||
reloadItems(tabContent);
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* eslint-enable indent */
|
function getQuery(context) {
|
||||||
|
return getPageData(context).query;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSavedQueryKey(context) {
|
||||||
|
if (!context.savedQueryKey) {
|
||||||
|
context.savedQueryKey = libraryBrowser.getSavedQueryKey('songs');
|
||||||
|
}
|
||||||
|
|
||||||
|
return context.savedQueryKey;
|
||||||
|
}
|
||||||
|
|
||||||
|
function reloadItems(page) {
|
||||||
|
loading.show();
|
||||||
|
isLoading = true;
|
||||||
|
const query = getQuery(page);
|
||||||
|
ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
|
||||||
|
function onNextPageClick() {
|
||||||
|
if (isLoading) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (userSettings.libraryPageSize() > 0) {
|
||||||
|
query.StartIndex += query.Limit;
|
||||||
|
}
|
||||||
|
reloadItems(tabContent);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onPreviousPageClick() {
|
||||||
|
if (isLoading) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (userSettings.libraryPageSize() > 0) {
|
||||||
|
query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
|
||||||
|
}
|
||||||
|
reloadItems(tabContent);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
const pagingHtml = libraryBrowser.getQueryPagingHtml({
|
||||||
|
startIndex: query.StartIndex,
|
||||||
|
limit: query.Limit,
|
||||||
|
totalRecordCount: result.TotalRecordCount,
|
||||||
|
showLimit: false,
|
||||||
|
updatePageSizeSetting: false,
|
||||||
|
addLayoutButton: false,
|
||||||
|
sortButton: false,
|
||||||
|
filterButton: false
|
||||||
|
});
|
||||||
|
const html = listView.getListViewHtml({
|
||||||
|
items: result.Items,
|
||||||
|
action: 'playallfromhere',
|
||||||
|
smallIcon: true,
|
||||||
|
artist: true,
|
||||||
|
addToListButton: true
|
||||||
|
});
|
||||||
|
let elems = tabContent.querySelectorAll('.paging');
|
||||||
|
|
||||||
|
for (let i = 0, length = elems.length; i < length; i++) {
|
||||||
|
elems[i].innerHTML = pagingHtml;
|
||||||
|
}
|
||||||
|
|
||||||
|
elems = tabContent.querySelectorAll('.btnNextPage');
|
||||||
|
for (let i = 0, length = elems.length; i < length; i++) {
|
||||||
|
elems[i].addEventListener('click', onNextPageClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
||||||
|
for (let i = 0, length = elems.length; i < length; i++) {
|
||||||
|
elems[i].addEventListener('click', onPreviousPageClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||||
|
itemsContainer.innerHTML = html;
|
||||||
|
imageLoader.lazyChildren(itemsContainer);
|
||||||
|
libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
|
||||||
|
|
||||||
|
tabContent.querySelector('.btnShuffle').classList.toggle('hide', result.TotalRecordCount < 1);
|
||||||
|
|
||||||
|
loading.hide();
|
||||||
|
isLoading = false;
|
||||||
|
|
||||||
|
import('../../components/autoFocuser').then(({default: autoFocuser}) => {
|
||||||
|
autoFocuser.autoFocus(page);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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: 'songs',
|
||||||
|
serverId: ApiClient.serverId()
|
||||||
|
});
|
||||||
|
Events.on(filterDialog, 'filterchange', function () {
|
||||||
|
getQuery(tabContent).StartIndex = 0;
|
||||||
|
reloadItems(tabContent);
|
||||||
|
});
|
||||||
|
filterDialog.show();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
function shuffle() {
|
||||||
|
ApiClient.getItem(ApiClient.getCurrentUserId(), params.topParentId).then(function (item) {
|
||||||
|
playbackManager.shuffle(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
self.getCurrentViewStyle = function () {
|
||||||
|
return getPageData(tabContent).view;
|
||||||
|
};
|
||||||
|
|
||||||
|
function initPage(tabContent) {
|
||||||
|
tabContent.querySelector('.btnFilter').addEventListener('click', function () {
|
||||||
|
self.showFilterMenu();
|
||||||
|
});
|
||||||
|
tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
|
||||||
|
libraryBrowser.showSortMenu({
|
||||||
|
items: [{
|
||||||
|
name: globalize.translate('OptionTrackName'),
|
||||||
|
id: 'Name'
|
||||||
|
}, {
|
||||||
|
name: globalize.translate('Album'),
|
||||||
|
id: 'Album,SortName'
|
||||||
|
}, {
|
||||||
|
name: globalize.translate('AlbumArtist'),
|
||||||
|
id: 'AlbumArtist,Album,SortName'
|
||||||
|
}, {
|
||||||
|
name: globalize.translate('Artist'),
|
||||||
|
id: 'Artist,Album,SortName'
|
||||||
|
}, {
|
||||||
|
name: globalize.translate('OptionDateAdded'),
|
||||||
|
id: 'DateCreated,SortName'
|
||||||
|
}, {
|
||||||
|
name: globalize.translate('OptionDatePlayed'),
|
||||||
|
id: 'DatePlayed,SortName'
|
||||||
|
}, {
|
||||||
|
name: globalize.translate('OptionPlayCount'),
|
||||||
|
id: 'PlayCount,SortName'
|
||||||
|
}, {
|
||||||
|
name: globalize.translate('OptionReleaseDate'),
|
||||||
|
id: 'PremiereDate,AlbumArtist,Album,SortName'
|
||||||
|
}, {
|
||||||
|
name: globalize.translate('Runtime'),
|
||||||
|
id: 'Runtime,AlbumArtist,Album,SortName'
|
||||||
|
}],
|
||||||
|
callback: function () {
|
||||||
|
getQuery(tabContent).StartIndex = 0;
|
||||||
|
reloadItems(tabContent);
|
||||||
|
},
|
||||||
|
query: getQuery(tabContent),
|
||||||
|
button: e.target
|
||||||
|
});
|
||||||
|
});
|
||||||
|
tabContent.querySelector('.btnShuffle').addEventListener('click', shuffle);
|
||||||
|
}
|
||||||
|
|
||||||
|
initPage(tabContent);
|
||||||
|
|
||||||
|
self.renderTab = function () {
|
||||||
|
reloadItems(tabContent);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user