406 lines
13 KiB
JavaScript
406 lines
13 KiB
JavaScript
import browser from '../../scripts/browser';
|
|
import layoutManager from '../../components/layoutManager';
|
|
import * as userSettings from '../../scripts/settings/userSettings';
|
|
import inputManager from '../../scripts/inputManager';
|
|
import loading from '../../components/loading/loading';
|
|
import cardBuilder from '../../components/cardbuilder/cardBuilder';
|
|
import dom from '../../scripts/dom';
|
|
import imageLoader from '../../components/images/imageLoader';
|
|
import libraryMenu from '../../scripts/libraryMenu';
|
|
import * as mainTabsManager from '../../components/maintabsmanager';
|
|
import globalize from '../../scripts/globalize';
|
|
import '../../assets/css/scrollstyles.css';
|
|
import '../../elements/emby-itemscontainer/emby-itemscontainer';
|
|
import '../../elements/emby-tabs/emby-tabs';
|
|
import '../../elements/emby-button/emby-button';
|
|
import '../../assets/css/flexstyles.scss';
|
|
import Dashboard from '../../scripts/clientUtils';
|
|
|
|
/* eslint-disable indent */
|
|
|
|
function itemsPerRow() {
|
|
const screenWidth = dom.getWindowSize().innerWidth;
|
|
|
|
if (screenWidth >= 1920) {
|
|
return 9;
|
|
}
|
|
|
|
if (screenWidth >= 1200) {
|
|
return 12;
|
|
}
|
|
|
|
if (screenWidth >= 1000) {
|
|
return 10;
|
|
}
|
|
|
|
return 8;
|
|
}
|
|
|
|
function enableScrollX() {
|
|
return !layoutManager.desktop;
|
|
}
|
|
|
|
function getSquareShape() {
|
|
return enableScrollX() ? 'overflowSquare' : 'square';
|
|
}
|
|
|
|
function loadLatest(page, parentId) {
|
|
loading.show();
|
|
const userId = ApiClient.getCurrentUserId();
|
|
const options = {
|
|
IncludeItemTypes: 'Audio',
|
|
Limit: enableScrollX() ? 3 * itemsPerRow() : 2 * itemsPerRow(),
|
|
Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
|
|
ParentId: parentId,
|
|
ImageTypeLimit: 1,
|
|
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
|
|
EnableTotalRecordCount: false
|
|
};
|
|
ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
|
|
const elem = page.querySelector('#recentlyAddedSongs');
|
|
elem.innerHTML = cardBuilder.getCardsHtml({
|
|
items: items,
|
|
showUnplayedIndicator: false,
|
|
showLatestItemsPopup: false,
|
|
shape: getSquareShape(),
|
|
showTitle: true,
|
|
showParentTitle: true,
|
|
lazy: true,
|
|
centerText: true,
|
|
overlayPlayButton: true,
|
|
allowBottomPadding: !enableScrollX(),
|
|
cardLayout: false,
|
|
coverImage: true
|
|
});
|
|
imageLoader.lazyChildren(elem);
|
|
loading.hide();
|
|
|
|
import('../../components/autoFocuser').then(({default: autoFocuser}) => {
|
|
autoFocuser.autoFocus(page);
|
|
});
|
|
});
|
|
}
|
|
|
|
function loadRecentlyPlayed(page, parentId) {
|
|
const options = {
|
|
SortBy: 'DatePlayed',
|
|
SortOrder: 'Descending',
|
|
IncludeItemTypes: 'Audio',
|
|
Limit: itemsPerRow(),
|
|
Recursive: true,
|
|
Fields: 'PrimaryImageAspectRatio,AudioInfo',
|
|
Filters: 'IsPlayed',
|
|
ParentId: parentId,
|
|
ImageTypeLimit: 1,
|
|
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
|
|
EnableTotalRecordCount: false
|
|
};
|
|
ApiClient.getItems(ApiClient.getCurrentUserId(), options).then(function (result) {
|
|
const elem = page.querySelector('#recentlyPlayed');
|
|
|
|
if (result.Items.length) {
|
|
elem.classList.remove('hide');
|
|
} else {
|
|
elem.classList.add('hide');
|
|
}
|
|
|
|
const itemsContainer = elem.querySelector('.itemsContainer');
|
|
itemsContainer.innerHTML = cardBuilder.getCardsHtml({
|
|
items: result.Items,
|
|
showUnplayedIndicator: false,
|
|
shape: getSquareShape(),
|
|
showTitle: true,
|
|
showParentTitle: true,
|
|
action: 'instantmix',
|
|
lazy: true,
|
|
centerText: true,
|
|
overlayMoreButton: true,
|
|
allowBottomPadding: !enableScrollX(),
|
|
cardLayout: false,
|
|
coverImage: true
|
|
});
|
|
imageLoader.lazyChildren(itemsContainer);
|
|
});
|
|
}
|
|
|
|
function loadFrequentlyPlayed(page, parentId) {
|
|
const options = {
|
|
SortBy: 'PlayCount',
|
|
SortOrder: 'Descending',
|
|
IncludeItemTypes: 'Audio',
|
|
Limit: itemsPerRow(),
|
|
Recursive: true,
|
|
Fields: 'PrimaryImageAspectRatio,AudioInfo',
|
|
Filters: 'IsPlayed',
|
|
ParentId: parentId,
|
|
ImageTypeLimit: 1,
|
|
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
|
|
EnableTotalRecordCount: false
|
|
};
|
|
ApiClient.getItems(ApiClient.getCurrentUserId(), options).then(function (result) {
|
|
const elem = page.querySelector('#topPlayed');
|
|
|
|
if (result.Items.length) {
|
|
elem.classList.remove('hide');
|
|
} else {
|
|
elem.classList.add('hide');
|
|
}
|
|
|
|
const itemsContainer = elem.querySelector('.itemsContainer');
|
|
itemsContainer.innerHTML = cardBuilder.getCardsHtml({
|
|
items: result.Items,
|
|
showUnplayedIndicator: false,
|
|
shape: getSquareShape(),
|
|
showTitle: true,
|
|
showParentTitle: true,
|
|
action: 'instantmix',
|
|
lazy: true,
|
|
centerText: true,
|
|
overlayMoreButton: true,
|
|
allowBottomPadding: !enableScrollX(),
|
|
cardLayout: false,
|
|
coverImage: true
|
|
});
|
|
imageLoader.lazyChildren(itemsContainer);
|
|
});
|
|
}
|
|
|
|
function loadSuggestionsTab(page, tabContent, parentId) {
|
|
console.debug('loadSuggestionsTab');
|
|
loadLatest(tabContent, parentId);
|
|
loadRecentlyPlayed(tabContent, parentId);
|
|
loadFrequentlyPlayed(tabContent, parentId);
|
|
|
|
import('../../components/favoriteitems').then(({default: favoriteItems}) => {
|
|
favoriteItems.render(tabContent, ApiClient.getCurrentUserId(), parentId, ['favoriteArtists', 'favoriteAlbums', 'favoriteSongs']);
|
|
});
|
|
}
|
|
|
|
function getTabs() {
|
|
return [{
|
|
name: globalize.translate('Albums')
|
|
}, {
|
|
name: globalize.translate('Suggestions')
|
|
}, {
|
|
name: globalize.translate('HeaderAlbumArtists')
|
|
}, {
|
|
name: globalize.translate('Artists')
|
|
}, {
|
|
name: globalize.translate('Playlists')
|
|
}, {
|
|
name: globalize.translate('Songs')
|
|
}, {
|
|
name: globalize.translate('Genres')
|
|
}];
|
|
}
|
|
|
|
function getDefaultTabIndex(folderId) {
|
|
switch (userSettings.get('landing-' + folderId)) {
|
|
case 'suggestions':
|
|
return 1;
|
|
|
|
case 'albumartists':
|
|
return 2;
|
|
|
|
case 'artists':
|
|
return 3;
|
|
|
|
case 'playlists':
|
|
return 4;
|
|
|
|
case 'songs':
|
|
return 5;
|
|
|
|
case 'genres':
|
|
return 6;
|
|
|
|
default:
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
export default function (view, params) {
|
|
function reload() {
|
|
loading.show();
|
|
const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
|
|
loadSuggestionsTab(view, tabContent, params.topParentId);
|
|
}
|
|
|
|
function enableScrollX() {
|
|
return browser.mobile;
|
|
}
|
|
|
|
function setScrollClasses(elem, scrollX) {
|
|
if (scrollX) {
|
|
elem.classList.add('hiddenScrollX');
|
|
|
|
if (layoutManager.tv) {
|
|
elem.classList.add('smoothScrollX');
|
|
}
|
|
|
|
elem.classList.add('scrollX');
|
|
elem.classList.remove('vertical-wrap');
|
|
} else {
|
|
elem.classList.remove('hiddenScrollX');
|
|
elem.classList.remove('smoothScrollX');
|
|
elem.classList.remove('scrollX');
|
|
elem.classList.add('vertical-wrap');
|
|
}
|
|
}
|
|
|
|
function onBeforeTabChange(e) {
|
|
preLoadTab(view, parseInt(e.detail.selectedTabIndex));
|
|
}
|
|
|
|
function onTabChange(e) {
|
|
loadTab(view, parseInt(e.detail.selectedTabIndex));
|
|
}
|
|
|
|
function getTabContainers() {
|
|
return view.querySelectorAll('.pageTabContent');
|
|
}
|
|
|
|
function initTabs() {
|
|
mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange);
|
|
}
|
|
|
|
const getTabController = (page, index, callback) => {
|
|
let depends;
|
|
|
|
switch (index) {
|
|
case 0:
|
|
depends = 'musicalbums';
|
|
break;
|
|
|
|
case 1:
|
|
depends = 'musicrecommended';
|
|
break;
|
|
|
|
case 2:
|
|
case 3:
|
|
depends = 'musicartists';
|
|
break;
|
|
|
|
case 4:
|
|
depends = 'musicplaylists';
|
|
break;
|
|
|
|
case 5:
|
|
depends = 'songs';
|
|
break;
|
|
|
|
case 6:
|
|
depends = 'musicgenres';
|
|
break;
|
|
}
|
|
|
|
import(`../music/${depends}`).then(({default: controllerFactory}) => {
|
|
let tabContent;
|
|
|
|
if (index == 1) {
|
|
tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
|
|
this.tabContent = tabContent;
|
|
}
|
|
|
|
let controller = tabControllers[index];
|
|
|
|
if (!controller) {
|
|
tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
|
|
|
|
if (index === 1) {
|
|
controller = this;
|
|
} else {
|
|
controller = new controllerFactory(view, params, tabContent);
|
|
}
|
|
|
|
if (index == 2) {
|
|
controller.mode = 'albumartists';
|
|
} else if (index == 3) {
|
|
controller.mode = 'artists';
|
|
}
|
|
|
|
tabControllers[index] = controller;
|
|
if (controller.initTab) {
|
|
controller.initTab();
|
|
}
|
|
}
|
|
|
|
callback(controller);
|
|
});
|
|
};
|
|
|
|
function preLoadTab(page, index) {
|
|
getTabController(page, index, function (controller) {
|
|
if (renderedTabs.indexOf(index) == -1 && controller.preRender) {
|
|
controller.preRender();
|
|
}
|
|
});
|
|
}
|
|
|
|
function loadTab(page, index) {
|
|
currentTabIndex = index;
|
|
getTabController(page, index, function (controller) {
|
|
if (renderedTabs.indexOf(index) == -1) {
|
|
renderedTabs.push(index);
|
|
controller.renderTab();
|
|
}
|
|
});
|
|
}
|
|
|
|
function onInputCommand(e) {
|
|
switch (e.detail.command) {
|
|
case 'search':
|
|
e.preventDefault();
|
|
Dashboard.navigate('search.html?collectionType=music&parentId=' + params.topParentId);
|
|
}
|
|
}
|
|
|
|
let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
|
|
const suggestionsTabIndex = 1;
|
|
|
|
this.initTab = function () {
|
|
const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
|
|
const containers = tabContent.querySelectorAll('.itemsContainer');
|
|
|
|
for (let i = 0, length = containers.length; i < length; i++) {
|
|
setScrollClasses(containers[i], enableScrollX());
|
|
}
|
|
};
|
|
|
|
this.renderTab = function () {
|
|
reload();
|
|
};
|
|
|
|
const tabControllers = [];
|
|
const renderedTabs = [];
|
|
view.addEventListener('viewshow', function (e) {
|
|
initTabs();
|
|
if (!view.getAttribute('data-title')) {
|
|
const parentId = params.topParentId;
|
|
|
|
if (parentId) {
|
|
ApiClient.getItem(ApiClient.getCurrentUserId(), parentId).then(function (item) {
|
|
view.setAttribute('data-title', item.Name);
|
|
libraryMenu.setTitle(item.Name);
|
|
});
|
|
} else {
|
|
view.setAttribute('data-title', globalize.translate('TabMusic'));
|
|
libraryMenu.setTitle(globalize.translate('TabMusic'));
|
|
}
|
|
}
|
|
|
|
inputManager.on(window, onInputCommand);
|
|
});
|
|
view.addEventListener('viewbeforehide', function (e) {
|
|
inputManager.off(window, onInputCommand);
|
|
});
|
|
view.addEventListener('viewdestroy', function (e) {
|
|
tabControllers.forEach(function (t) {
|
|
if (t.destroy) {
|
|
t.destroy();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
/* eslint-enable indent */
|