diff --git a/src/components/homeScreenSettings/homeScreenSettings.js b/src/components/homeScreenSettings/homeScreenSettings.js index 3348348f2..513893540 100644 --- a/src/components/homeScreenSettings/homeScreenSettings.js +++ b/src/components/homeScreenSettings/homeScreenSettings.js @@ -75,26 +75,30 @@ import 'emby-checkbox'; value: 'suggestions' }); list.push({ - name: globalize.translate('Latest'), - value: 'latest' + name: globalize.translate('Upcoming'), + value: 'upcoming' }); list.push({ name: globalize.translate('Genres'), value: 'genres' }); list.push({ - name: globalize.translate('Favorites'), - value: 'favorites' + name: globalize.translate('Networks'), + value: 'networks' + }); + list.push({ + name: globalize.translate('Episodes'), + value: 'episodes' }); } else if (type === 'music') { list.push({ - name: globalize.translate('Suggestions'), - value: 'suggestions', + name: globalize.translate('Albums'), + value: 'albums', isDefault: true }); list.push({ - name: globalize.translate('Albums'), - value: 'albums' + name: globalize.translate('Suggestions'), + value: 'suggestions' }); list.push({ name: globalize.translate('HeaderAlbumArtists'), diff --git a/src/controllers/movies/movies.html b/src/controllers/movies/movies.html index dddda3f7f..ec2a975db 100644 --- a/src/controllers/movies/movies.html +++ b/src/controllers/movies/movies.html @@ -1,6 +1,6 @@
-
+
@@ -17,7 +17,7 @@
-
+

${HeaderContinueWatching}

@@ -43,7 +43,7 @@

${MessageNoMovieSuggestionsAvailable}

-
+
@@ -59,7 +59,7 @@
-
+
@@ -71,7 +71,7 @@
-
+
@@ -85,9 +85,7 @@
-
+
-
-
diff --git a/src/controllers/movies/moviesrecommended.js b/src/controllers/movies/moviesrecommended.js index a53fa6543..80e391c5e 100644 --- a/src/controllers/movies/moviesrecommended.js +++ b/src/controllers/movies/moviesrecommended.js @@ -320,11 +320,6 @@ import 'emby-button'; if (index === suggestionsTabIndex) { controller = this; - } else if (index === 6) { - controller = new controllerFactory(view, tabContent, { - collectionType: 'movies', - parentId: params.topParentId - }); } else if (index == 0 || index == 3) { controller = new controllerFactory(view, params, tabContent, { mode: index ? 'favorites' : 'movies' diff --git a/src/controllers/music/music.html b/src/controllers/music/music.html index 84d324857..43251226c 100644 --- a/src/controllers/music/music.html +++ b/src/controllers/music/music.html @@ -8,7 +8,26 @@ } } -
+
+
+
+ + + + + +
+ +
+
+ +
+
+
+
+
+
+
@@ -34,25 +53,6 @@
-
-
-
- - - - - -
- -
-
- -
-
-
-
-
-
@@ -85,7 +85,7 @@
-
+
@@ -105,6 +105,4 @@
-
-
diff --git a/src/controllers/music/musicrecommended.js b/src/controllers/music/musicrecommended.js index 580578e68..32137ccaa 100644 --- a/src/controllers/music/musicrecommended.js +++ b/src/controllers/music/musicrecommended.js @@ -177,9 +177,9 @@ import 'flexStyles'; function getTabs() { return [{ - name: globalize.translate('Suggestions') - }, { name: globalize.translate('Albums') + }, { + name: globalize.translate('Suggestions') }, { name: globalize.translate('HeaderAlbumArtists') }, { @@ -195,7 +195,7 @@ import 'flexStyles'; function getDefaultTabIndex(folderId) { switch (userSettings.get('landing-' + folderId)) { - case 'albums': + case 'suggestions': return 1; case 'albumartists': @@ -221,7 +221,7 @@ import 'flexStyles'; export default function (view, params) { function reload() { loading.show(); - const tabContent = view.querySelector(".pageTabContent[data-index='0']"); + const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']"); loadSuggestionsTab(view, tabContent, params.topParentId); } @@ -268,11 +268,11 @@ import 'flexStyles'; switch (index) { case 0: - depends = 'controllers/music/musicrecommended'; + depends = 'controllers/music/musicalbums'; break; case 1: - depends = 'controllers/music/musicalbums'; + depends = 'controllers/music/musicrecommended'; break; case 2: @@ -296,7 +296,7 @@ import 'flexStyles'; import(depends).then(({default: controllerFactory}) => { let tabContent; - if (index == 0) { + if (index == 1) { tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); this.tabContent = tabContent; } @@ -306,13 +306,8 @@ import 'flexStyles'; if (!controller) { tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); - if (index === 0) { + if (index === 1) { controller = this; - } else if (index === 7) { - controller = new controllerFactory(view, tabContent, { - collectionType: 'music', - parentId: params.topParentId - }); } else { controller = new controllerFactory(view, params, tabContent); } @@ -360,9 +355,10 @@ import 'flexStyles'; } let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId)); + const suggestionsTabIndex = 1; this.initTab = function () { - const tabContent = view.querySelector(".pageTabContent[data-index='0']"); + const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']"); const containers = tabContent.querySelectorAll('.itemsContainer'); for (let i = 0, length = containers.length; i < length; i++) { diff --git a/src/controllers/shows/tvlatest.js b/src/controllers/shows/tvlatest.js deleted file mode 100644 index 2f768f352..000000000 --- a/src/controllers/shows/tvlatest.js +++ /dev/null @@ -1,68 +0,0 @@ -import loading from 'loading'; -import groupedcards from 'components/groupedcards'; -import cardBuilder from 'cardBuilder'; -import imageLoader from 'imageLoader'; - -/* eslint-disable indent */ - - function getLatestPromise(context, params) { - loading.show(); - const userId = ApiClient.getCurrentUserId(); - const parentId = params.topParentId; - const options = { - IncludeItemTypes: 'Episode', - Limit: 30, - Fields: 'PrimaryImageAspectRatio,BasicSyncInfo', - ParentId: parentId, - ImageTypeLimit: 1, - EnableImageTypes: 'Primary,Backdrop,Thumb' - }; - return ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)); - } - - function loadLatest(context, params, promise) { - promise.then(function (items) { - let html = ''; - html += cardBuilder.getCardsHtml({ - items: items, - shape: 'backdrop', - preferThumb: true, - showTitle: true, - showSeriesYear: true, - showParentTitle: true, - overlayText: false, - cardLayout: false, - showUnplayedIndicator: false, - showChildCountIndicator: true, - centerText: true, - lazy: true, - overlayPlayButton: true, - lines: 2 - }); - const elem = context.querySelector('#latestEpisodes'); - elem.innerHTML = html; - imageLoader.lazyChildren(elem); - loading.hide(); - - import('autoFocuser').then(({default: autoFocuser}) => { - autoFocuser.autoFocus(context); - }); - }); - } - - export default function (view, params, tabContent) { - const self = this; - let latestPromise; - - self.preRender = function () { - latestPromise = getLatestPromise(view, params); - }; - - self.renderTab = function () { - loadLatest(tabContent, params, latestPromise); - }; - - tabContent.querySelector('#latestEpisodes').addEventListener('click', groupedcards); - } - -/* eslint-enable indent */ diff --git a/src/controllers/shows/tvrecommended.html b/src/controllers/shows/tvrecommended.html index b5b54a5eb..dbfac37b9 100644 --- a/src/controllers/shows/tvrecommended.html +++ b/src/controllers/shows/tvrecommended.html @@ -23,8 +23,15 @@
+
+
+

${HeaderLatestEpisodes}

+
-
+
+
+ +

${NextUp}

@@ -33,16 +40,7 @@
-
-
-
-

${HeaderLatestEpisodes}

-
-
-
-
-
-
+
-
+
-
+
-
+
@@ -69,6 +67,4 @@
-
-
diff --git a/src/controllers/shows/tvrecommended.js b/src/controllers/shows/tvrecommended.js index c58a2faad..db7bef2d5 100644 --- a/src/controllers/shows/tvrecommended.js +++ b/src/controllers/shows/tvrecommended.js @@ -20,8 +20,6 @@ import 'emby-button'; name: globalize.translate('Shows') }, { name: globalize.translate('Suggestions') - }, { - name: globalize.translate('TabLatest') }, { name: globalize.translate('TabUpcoming') }, { @@ -38,15 +36,18 @@ import 'emby-button'; case 'suggestions': return 1; - case 'latest': + case 'upcoming': return 2; - case 'favorites': - return 1; - case 'genres': + return 3; + + case 'networks': return 4; + case 'episodes': + return 5; + default: return 0; } @@ -70,102 +71,159 @@ import 'emby-button'; } } + function initSuggestedTab(page, tabContent) { + const containers = tabContent.querySelectorAll('.itemsContainer'); + + for (let i = 0, length = containers.length; i < length; i++) { + setScrollClasses(containers[i], enableScrollX()); + } + } + + function loadSuggestionsTab(view, params, tabContent) { + const parentId = params.topParentId; + const userId = ApiClient.getCurrentUserId(); + console.debug('loadSuggestionsTab'); + loadResume(tabContent, userId, parentId); + loadLatest(tabContent, userId, parentId); + loadNextUp(tabContent, userId, parentId); + } + + function loadResume(view, userId, parentId) { + const screenWidth = dom.getWindowSize().innerWidth; + const options = { + SortBy: 'DatePlayed', + SortOrder: 'Descending', + IncludeItemTypes: 'Episode', + Filters: 'IsResumable', + Limit: screenWidth >= 1920 ? 5 : screenWidth >= 1600 ? 5 : 3, + Recursive: true, + Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo', + CollapseBoxSetItems: false, + ParentId: parentId, + ImageTypeLimit: 1, + EnableImageTypes: 'Primary,Backdrop,Banner,Thumb', + EnableTotalRecordCount: false + }; + ApiClient.getItems(userId, options).then(function (result) { + if (result.Items.length) { + view.querySelector('#resumableSection').classList.remove('hide'); + } else { + view.querySelector('#resumableSection').classList.add('hide'); + } + + const allowBottomPadding = !enableScrollX(); + const container = view.querySelector('#resumableItems'); + cardBuilder.buildCards(result.Items, { + itemsContainer: container, + preferThumb: true, + shape: getThumbShape(), + scalable: true, + overlayPlayButton: true, + allowBottomPadding: allowBottomPadding, + cardLayout: false, + showTitle: true, + showYear: true, + centerText: true + }); + loading.hide(); + + import('autoFocuser').then(({default: autoFocuser}) => { + autoFocuser.autoFocus(view); + }); + }); + } + + function loadLatest(view, userId, parentId) { + const options = { + userId: userId, + IncludeItemTypes: 'Episode', + Limit: 30, + Fields: 'PrimaryImageAspectRatio,BasicSyncInfo', + ParentId: parentId, + ImageTypeLimit: 1, + EnableImageTypes: 'Primary,Backdrop,Thumb' + }; + ApiClient.getLatestItems(options).then(function (items) { + const section = view.querySelector('#latestItemsSection'); + const allowBottomPadding = !enableScrollX(); + const container = section.querySelector('#latestEpisodesItems'); + cardBuilder.buildCards(items, { + parentContainer: section, + itemsContainer: container, + items: items, + shape: 'backdrop', + preferThumb: true, + showTitle: true, + showSeriesYear: true, + showParentTitle: true, + overlayText: false, + cardLayout: false, + allowBottomPadding: allowBottomPadding, + showUnplayedIndicator: false, + showChildCountIndicator: true, + centerText: true, + lazy: true, + overlayPlayButton: true, + lines: 2 + }); + loading.hide(); + + import('autoFocuser').then(({default: autoFocuser}) => { + autoFocuser.autoFocus(view); + }); + }); + } + + function loadNextUp(view, userId, parentId) { + const query = { + userId: userId, + Limit: 24, + Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo', + ParentId: parentId, + ImageTypeLimit: 1, + EnableImageTypes: 'Primary,Backdrop,Thumb', + EnableTotalRecordCount: false + }; + query.ParentId = libraryMenu.getTopParentId(); + ApiClient.getNextUpEpisodes(query).then(function (result) { + if (result.Items.length) { + view.querySelector('.noNextUpItems').classList.add('hide'); + } else { + view.querySelector('.noNextUpItems').classList.remove('hide'); + } + + const section = view.querySelector('#nextUpItemsSection'); + const container = section.querySelector('#nextUpItems'); + cardBuilder.buildCards(result.Items, { + parentContainer: section, + itemsContainer: container, + preferThumb: true, + shape: 'backdrop', + scalable: true, + showTitle: true, + showParentTitle: true, + overlayText: false, + centerText: true, + overlayPlayButton: true, + cardLayout: false + }); + loading.hide(); + + import('autoFocuser').then(({default: autoFocuser}) => { + autoFocuser.autoFocus(view); + }); + }); + } + + function enableScrollX() { + return !layoutManager.desktop; + } + + function getThumbShape() { + return enableScrollX() ? 'overflowBackdrop' : 'backdrop'; + } + export default function (view, params) { - function reload() { - loading.show(); - loadResume(); - loadNextUp(); - } - - function loadNextUp() { - const query = { - Limit: 24, - Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo', - UserId: ApiClient.getCurrentUserId(), - ImageTypeLimit: 1, - EnableImageTypes: 'Primary,Backdrop,Thumb', - EnableTotalRecordCount: false - }; - query.ParentId = libraryMenu.getTopParentId(); - ApiClient.getNextUpEpisodes(query).then(function (result) { - if (result.Items.length) { - view.querySelector('.noNextUpItems').classList.add('hide'); - } else { - view.querySelector('.noNextUpItems').classList.remove('hide'); - } - - const container = view.querySelector('#nextUpItems'); - cardBuilder.buildCards(result.Items, { - itemsContainer: container, - preferThumb: true, - shape: 'backdrop', - scalable: true, - showTitle: true, - showParentTitle: true, - overlayText: false, - centerText: true, - overlayPlayButton: true, - cardLayout: false - }); - loading.hide(); - - import('autoFocuser').then(({default: autoFocuser}) => { - autoFocuser.autoFocus(view); - }); - }); - } - - function enableScrollX() { - return !layoutManager.desktop; - } - - function getThumbShape() { - return enableScrollX() ? 'overflowBackdrop' : 'backdrop'; - } - - function loadResume() { - const parentId = libraryMenu.getTopParentId(); - const screenWidth = dom.getWindowSize().innerWidth; - const limit = screenWidth >= 1600 ? 5 : 6; - const options = { - SortBy: 'DatePlayed', - SortOrder: 'Descending', - IncludeItemTypes: 'Episode', - Filters: 'IsResumable', - Limit: limit, - Recursive: true, - Fields: 'PrimaryImageAspectRatio,SeriesInfo,UserData,BasicSyncInfo', - ExcludeLocationTypes: 'Virtual', - ParentId: parentId, - ImageTypeLimit: 1, - EnableImageTypes: 'Primary,Backdrop,Thumb', - EnableTotalRecordCount: false - }; - ApiClient.getItems(ApiClient.getCurrentUserId(), options).then(function (result) { - if (result.Items.length) { - view.querySelector('#resumableSection').classList.remove('hide'); - } else { - view.querySelector('#resumableSection').classList.add('hide'); - } - - const allowBottomPadding = !enableScrollX(); - const container = view.querySelector('#resumableItems'); - cardBuilder.buildCards(result.Items, { - itemsContainer: container, - preferThumb: true, - shape: getThumbShape(), - scalable: true, - showTitle: true, - showParentTitle: true, - overlayText: false, - centerText: true, - overlayPlayButton: true, - allowBottomPadding: allowBottomPadding, - cardLayout: false - }); - }); - } - function onBeforeTabChange(e) { preLoadTab(view, parseInt(e.detail.selectedTabIndex)); } @@ -196,22 +254,18 @@ import 'emby-button'; break; case 2: - depends = 'controllers/shows/tvlatest'; - break; - - case 3: depends = 'controllers/shows/tvupcoming'; break; - case 4: + case 3: depends = 'controllers/shows/tvgenres'; break; - case 5: + case 4: depends = 'controllers/shows/tvstudios'; break; - case 6: + case 5: depends = 'controllers/shows/episodes'; break; } @@ -231,11 +285,6 @@ import 'emby-button'; if (index === 1) { controller = self; - } else if (index === 7) { - controller = new controllerFactory(view, tabContent, { - collectionType: 'tvshows', - parentId: params.topParentId - }); } else { controller = new controllerFactory(view, params, tabContent); } @@ -294,19 +343,20 @@ import 'emby-button'; const self = this; let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId)); + const suggestionsTabIndex = 1; self.initTab = function () { - const tabContent = self.tabContent; - setScrollClasses(tabContent.querySelector('#resumableItems'), enableScrollX()); + const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']"); + initSuggestedTab(view, tabContent); }; self.renderTab = function () { - reload(); + const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']"); + loadSuggestionsTab(view, params, tabContent); }; const tabControllers = []; let renderedTabs = []; - setScrollClasses(view.querySelector('#resumableItems'), enableScrollX()); view.addEventListener('viewshow', function (e) { initTabs(); if (!view.getAttribute('data-title')) {