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

move music tabs suggestions to the second position

This commit is contained in:
grafixeyehero 2020-09-14 00:04:55 +03:00
parent 5f56bb15c2
commit 71c44dccd6
4 changed files with 51 additions and 50 deletions

View file

@ -88,13 +88,13 @@ import 'emby-checkbox';
}); });
} else if (type === 'music') { } else if (type === 'music') {
list.push({ list.push({
name: globalize.translate('Suggestions'), name: globalize.translate('Albums'),
value: 'suggestions', value: 'albums',
isDefault: true isDefault: true
}); });
list.push({ list.push({
name: globalize.translate('Albums'), name: globalize.translate('Suggestions'),
value: 'albums' value: 'suggestions'
}); });
list.push({ list.push({
name: globalize.translate('HeaderAlbumArtists'), name: globalize.translate('HeaderAlbumArtists'),

View file

@ -8,7 +8,26 @@
} }
} }
</style> </style>
<div class="pageTabContent pageTabContent" id="suggestionsTab" data-index="0"> <div class="pageTabContent pageTabContent" id="albumsTab" data-index="0">
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div>
<button is="paper-icon-button-light" class="btnPlayAll musicglobalButton" title="${HeaderPlayAll}"><span class="material-icons play_arrow"></span></button>
<button is="paper-icon-button-light" class="btnShuffle musicglobalButton" title="${Shuffle}"><span class="material-icons shuffle"></span></button>
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
<button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list"></span></button>
</div>
<div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
</div>
<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
</div>
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div>
</div>
</div>
<div class="pageTabContent pageTabContent" id="suggestionsTab" data-index="1">
<div class="verticalSection"> <div class="verticalSection">
@ -34,25 +53,6 @@
<div class="favoriteSections verticalSection"></div> <div class="favoriteSections verticalSection"></div>
</div> </div>
<div class="pageTabContent pageTabContent" id="albumsTab" data-index="1">
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div>
<button is="paper-icon-button-light" class="btnPlayAll musicglobalButton" title="${HeaderPlayAll}"><span class="material-icons play_arrow"></span></button>
<button is="paper-icon-button-light" class="btnShuffle musicglobalButton" title="${Shuffle}"><span class="material-icons shuffle"></span></button>
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
<button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list"></span></button>
</div>
<div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
</div>
<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
</div>
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div>
</div>
</div>
<div class="pageTabContent" id="albumArtistsTab" data-index="2"> <div class="pageTabContent" id="albumArtistsTab" data-index="2">
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom"> <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div> <div class="paging"></div>

View file

@ -177,9 +177,9 @@ import 'flexStyles';
function getTabs() { function getTabs() {
return [{ return [{
name: globalize.translate('Suggestions')
}, {
name: globalize.translate('Albums') name: globalize.translate('Albums')
}, {
name: globalize.translate('Suggestions')
}, { }, {
name: globalize.translate('HeaderAlbumArtists') name: globalize.translate('HeaderAlbumArtists')
}, { }, {
@ -195,7 +195,7 @@ import 'flexStyles';
function getDefaultTabIndex(folderId) { function getDefaultTabIndex(folderId) {
switch (userSettings.get('landing-' + folderId)) { switch (userSettings.get('landing-' + folderId)) {
case 'albums': case 'suggestions':
return 1; return 1;
case 'albumartists': case 'albumartists':
@ -221,7 +221,7 @@ import 'flexStyles';
export default function (view, params) { export default function (view, params) {
function reload() { function reload() {
loading.show(); loading.show();
const tabContent = view.querySelector(".pageTabContent[data-index='0']"); const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
loadSuggestionsTab(view, tabContent, params.topParentId); loadSuggestionsTab(view, tabContent, params.topParentId);
} }
@ -268,11 +268,11 @@ import 'flexStyles';
switch (index) { switch (index) {
case 0: case 0:
depends = 'controllers/music/musicrecommended'; depends = 'controllers/music/musicalbums';
break; break;
case 1: case 1:
depends = 'controllers/music/musicalbums'; depends = 'controllers/music/musicrecommended';
break; break;
case 2: case 2:
@ -296,7 +296,7 @@ import 'flexStyles';
import(depends).then(({default: controllerFactory}) => { import(depends).then(({default: controllerFactory}) => {
let tabContent; let tabContent;
if (index == 0) { if (index == 1) {
tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
this.tabContent = tabContent; this.tabContent = tabContent;
} }
@ -306,7 +306,7 @@ import 'flexStyles';
if (!controller) { if (!controller) {
tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
if (index === 0) { if (index === 1) {
controller = this; controller = this;
} else if (index === 7) { } else if (index === 7) {
controller = new controllerFactory(view, tabContent, { controller = new controllerFactory(view, tabContent, {
@ -360,9 +360,10 @@ import 'flexStyles';
} }
let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId)); let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
const suggestionsTabIndex = 1;
this.initTab = function () { this.initTab = function () {
const tabContent = view.querySelector(".pageTabContent[data-index='0']"); const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
const containers = tabContent.querySelectorAll('.itemsContainer'); const containers = tabContent.querySelectorAll('.itemsContainer');
for (let i = 0, length = containers.length; i < length; i++) { for (let i = 0, length = containers.length; i < length; i++) {

View file

@ -66,16 +66,16 @@ import 'emby-button';
} }
function initSuggestedTab(page, tabContent) { function initSuggestedTab(page, tabContent) {
var containers = tabContent.querySelectorAll('.itemsContainer'); const containers = tabContent.querySelectorAll('.itemsContainer');
for (var i = 0, length = containers.length; i < length; i++) { for (let i = 0, length = containers.length; i < length; i++) {
setScrollClasses(containers[i], enableScrollX()); setScrollClasses(containers[i], enableScrollX());
} }
} }
function loadSuggestionsTab(view, params, tabContent) { function loadSuggestionsTab(view, params, tabContent) {
var parentId = params.topParentId; const parentId = params.topParentId;
var userId = ApiClient.getCurrentUserId(); const userId = ApiClient.getCurrentUserId();
console.debug('loadSuggestionsTab'); console.debug('loadSuggestionsTab');
loadResume(tabContent, userId, parentId); loadResume(tabContent, userId, parentId);
loadLatest(tabContent, userId, parentId); loadLatest(tabContent, userId, parentId);
@ -83,8 +83,8 @@ import 'emby-button';
} }
function loadResume(view, userId, parentId) { function loadResume(view, userId, parentId) {
var screenWidth = dom.getWindowSize().innerWidth; const screenWidth = dom.getWindowSize().innerWidth;
var options = { const options = {
SortBy: 'DatePlayed', SortBy: 'DatePlayed',
SortOrder: 'Descending', SortOrder: 'Descending',
IncludeItemTypes: 'Episode', IncludeItemTypes: 'Episode',
@ -105,8 +105,8 @@ import 'emby-button';
view.querySelector('#resumableSection').classList.add('hide'); view.querySelector('#resumableSection').classList.add('hide');
} }
var allowBottomPadding = !enableScrollX(); const allowBottomPadding = !enableScrollX();
var container = view.querySelector('#resumableItems'); const container = view.querySelector('#resumableItems');
cardBuilder.buildCards(result.Items, { cardBuilder.buildCards(result.Items, {
itemsContainer: container, itemsContainer: container,
preferThumb: true, preferThumb: true,
@ -128,7 +128,7 @@ import 'emby-button';
} }
function loadLatest(view, userId, parentId) { function loadLatest(view, userId, parentId) {
var options = { const options = {
userId: userId, userId: userId,
IncludeItemTypes: 'Episode', IncludeItemTypes: 'Episode',
Limit: 30, Limit: 30,
@ -138,9 +138,9 @@ import 'emby-button';
EnableImageTypes: 'Primary,Backdrop,Thumb' EnableImageTypes: 'Primary,Backdrop,Thumb'
}; };
ApiClient.getLatestItems(options).then(function (items) { ApiClient.getLatestItems(options).then(function (items) {
var section = view.querySelector('#latestItemsSection'); const section = view.querySelector('#latestItemsSection');
var allowBottomPadding = !enableScrollX(); const allowBottomPadding = !enableScrollX();
var container = section.querySelector('#latestEpisodesItems'); const container = section.querySelector('#latestEpisodesItems');
cardBuilder.buildCards(items, { cardBuilder.buildCards(items, {
parentContainer: section, parentContainer: section,
itemsContainer: container, itemsContainer: container,
@ -169,7 +169,7 @@ import 'emby-button';
} }
function loadNextUp(view, userId, parentId) { function loadNextUp(view, userId, parentId) {
var query = { const query = {
userId: userId, userId: userId,
Limit: 24, Limit: 24,
Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo', Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo',
@ -186,8 +186,8 @@ import 'emby-button';
view.querySelector('.noNextUpItems').classList.remove('hide'); view.querySelector('.noNextUpItems').classList.remove('hide');
} }
var section = view.querySelector('#nextUpItemsSection'); const section = view.querySelector('#nextUpItemsSection');
var container = section.querySelector('#nextUpItems'); const container = section.querySelector('#nextUpItems');
cardBuilder.buildCards(result.Items, { cardBuilder.buildCards(result.Items, {
parentContainer: section, parentContainer: section,
itemsContainer: container, itemsContainer: container,
@ -345,12 +345,12 @@ import 'emby-button';
const suggestionsTabIndex = 1; const suggestionsTabIndex = 1;
self.initTab = function () { self.initTab = function () {
var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']"); const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
initSuggestedTab(view, tabContent); initSuggestedTab(view, tabContent);
}; };
self.renderTab = function () { self.renderTab = function () {
var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']"); const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
loadSuggestionsTab(view, params, tabContent); loadSuggestionsTab(view, params, tabContent);
}; };