diff --git a/package.json b/package.json index 0c8bdd799c..ba249644ff 100644 --- a/package.json +++ b/package.json @@ -259,6 +259,7 @@ "src/controllers/searchpage.js", "src/controllers/livetv/livetvguide.js", "src/controllers/livetvtuner.js", + "src/controllers/livetv/livetvsuggested.js", "src/controllers/livetvstatus.js", "src/controllers/livetvguideprovider.js", "src/controllers/livetvsettings.js", diff --git a/src/controllers/livetv/livetvsuggested.js b/src/controllers/livetv/livetvsuggested.js index fa06e99b7d..4a20d02fcf 100644 --- a/src/controllers/livetv/livetvsuggested.js +++ b/src/controllers/livetv/livetvsuggested.js @@ -1,392 +1,397 @@ -define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize', 'libraryBrowser', 'mainTabsManager', 'cardBuilder', 'apphost', 'imageLoader', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (layoutManager, userSettings, inputManager, loading, globalize, libraryBrowser, mainTabsManager, cardBuilder, appHost, imageLoader) { - 'use strict'; +import layoutManager from 'layoutManager'; +import * as userSettings from 'userSettings'; +import inputManager from 'inputManager'; +import loading from 'loading'; +import globalize from 'globalize'; +import * as mainTabsManager from 'mainTabsManager'; +import cardBuilder from 'cardBuilder'; +import imageLoader from 'imageLoader'; +import 'scrollStyles'; +import 'emby-itemscontainer'; +import 'emby-tabs'; +import 'emby-button'; - loading = loading.default || loading; - layoutManager = layoutManager.default || layoutManager; +function enableScrollX() { + return !layoutManager.desktop; +} - function enableScrollX() { - return !layoutManager.desktop; +function getBackdropShape() { + if (enableScrollX()) { + return 'overflowBackdrop'; + } + return 'backdrop'; +} + +function getPortraitShape() { + if (enableScrollX()) { + return 'overflowPortrait'; + } + return 'portrait'; +} + +function getLimit() { + if (enableScrollX()) { + return 12; } - function getBackdropShape() { - if (enableScrollX()) { - return 'overflowBackdrop'; - } - return 'backdrop'; + return 9; +} + +function loadRecommendedPrograms(page) { + loading.show(); + let limit = getLimit(); + + if (enableScrollX()) { + limit *= 2; } - function getPortraitShape() { - if (enableScrollX()) { - return 'overflowPortrait'; - } - return 'portrait'; - } + ApiClient.getLiveTvRecommendedPrograms({ + userId: Dashboard.getCurrentUserId(), + IsAiring: true, + limit: limit, + ImageTypeLimit: 1, + EnableImageTypes: 'Primary,Thumb,Backdrop', + EnableTotalRecordCount: false, + Fields: 'ChannelInfo,PrimaryImageAspectRatio' + }).then(function (result) { + renderItems(page, result.Items, 'activeProgramItems', 'play', { + showAirDateTime: false, + showAirEndTime: true + }); + loading.hide(); - function getLimit() { - if (enableScrollX()) { - return 12; - } + import('autoFocuser').then(({default: autoFocuser}) => { + autoFocuser.autoFocus(page); + }); + }); +} - return 9; - } - - function loadRecommendedPrograms(page) { - loading.show(); - var limit = getLimit(); - - if (enableScrollX()) { - limit *= 2; - } - - ApiClient.getLiveTvRecommendedPrograms({ +function reload(page, enableFullRender) { + if (enableFullRender) { + loadRecommendedPrograms(page); + ApiClient.getLiveTvPrograms({ userId: Dashboard.getCurrentUserId(), - IsAiring: true, - limit: limit, - ImageTypeLimit: 1, - EnableImageTypes: 'Primary,Thumb,Backdrop', + HasAired: false, + limit: getLimit(), + IsMovie: false, + IsSports: false, + IsKids: false, + IsNews: false, + IsSeries: true, EnableTotalRecordCount: false, - Fields: 'ChannelInfo,PrimaryImageAspectRatio' + Fields: 'ChannelInfo,PrimaryImageAspectRatio', + EnableImageTypes: 'Primary,Thumb' }).then(function (result) { - renderItems(page, result.Items, 'activeProgramItems', 'play', { - showAirDateTime: false, - showAirEndTime: true + renderItems(page, result.Items, 'upcomingEpisodeItems'); + }); + ApiClient.getLiveTvPrograms({ + userId: Dashboard.getCurrentUserId(), + HasAired: false, + limit: getLimit(), + IsMovie: true, + EnableTotalRecordCount: false, + Fields: 'ChannelInfo', + EnableImageTypes: 'Primary,Thumb' + }).then(function (result) { + renderItems(page, result.Items, 'upcomingTvMovieItems', null, { + shape: getPortraitShape(), + preferThumb: null, + showParentTitle: false }); - loading.hide(); - - require(['autoFocuser'], function (autoFocuser) { - autoFocuser.autoFocus(page); + }); + ApiClient.getLiveTvPrograms({ + userId: Dashboard.getCurrentUserId(), + HasAired: false, + limit: getLimit(), + IsSports: true, + EnableTotalRecordCount: false, + Fields: 'ChannelInfo,PrimaryImageAspectRatio', + EnableImageTypes: 'Primary,Thumb' + }).then(function (result) { + renderItems(page, result.Items, 'upcomingSportsItems'); + }); + ApiClient.getLiveTvPrograms({ + userId: Dashboard.getCurrentUserId(), + HasAired: false, + limit: getLimit(), + IsKids: true, + EnableTotalRecordCount: false, + Fields: 'ChannelInfo,PrimaryImageAspectRatio', + EnableImageTypes: 'Primary,Thumb' + }).then(function (result) { + renderItems(page, result.Items, 'upcomingKidsItems'); + }); + ApiClient.getLiveTvPrograms({ + userId: Dashboard.getCurrentUserId(), + HasAired: false, + limit: getLimit(), + IsNews: true, + EnableTotalRecordCount: false, + Fields: 'ChannelInfo,PrimaryImageAspectRatio', + EnableImageTypes: 'Primary,Thumb' + }).then(function (result) { + renderItems(page, result.Items, 'upcomingNewsItems', null, { + showParentTitleOrTitle: true, + showTitle: false, + showParentTitle: false }); }); } +} - function reload(page, enableFullRender) { - if (enableFullRender) { - loadRecommendedPrograms(page); - ApiClient.getLiveTvPrograms({ - userId: Dashboard.getCurrentUserId(), - HasAired: false, - limit: getLimit(), - IsMovie: false, - IsSports: false, - IsKids: false, - IsNews: false, - IsSeries: true, - EnableTotalRecordCount: false, - Fields: 'ChannelInfo,PrimaryImageAspectRatio', - EnableImageTypes: 'Primary,Thumb' - }).then(function (result) { - renderItems(page, result.Items, 'upcomingEpisodeItems'); - }); - ApiClient.getLiveTvPrograms({ - userId: Dashboard.getCurrentUserId(), - HasAired: false, - limit: getLimit(), - IsMovie: true, - EnableTotalRecordCount: false, - Fields: 'ChannelInfo', - EnableImageTypes: 'Primary,Thumb' - }).then(function (result) { - renderItems(page, result.Items, 'upcomingTvMovieItems', null, { - shape: getPortraitShape(), - preferThumb: null, - showParentTitle: false - }); - }); - ApiClient.getLiveTvPrograms({ - userId: Dashboard.getCurrentUserId(), - HasAired: false, - limit: getLimit(), - IsSports: true, - EnableTotalRecordCount: false, - Fields: 'ChannelInfo,PrimaryImageAspectRatio', - EnableImageTypes: 'Primary,Thumb' - }).then(function (result) { - renderItems(page, result.Items, 'upcomingSportsItems'); - }); - ApiClient.getLiveTvPrograms({ - userId: Dashboard.getCurrentUserId(), - HasAired: false, - limit: getLimit(), - IsKids: true, - EnableTotalRecordCount: false, - Fields: 'ChannelInfo,PrimaryImageAspectRatio', - EnableImageTypes: 'Primary,Thumb' - }).then(function (result) { - renderItems(page, result.Items, 'upcomingKidsItems'); - }); - ApiClient.getLiveTvPrograms({ - userId: Dashboard.getCurrentUserId(), - HasAired: false, - limit: getLimit(), - IsNews: true, - EnableTotalRecordCount: false, - Fields: 'ChannelInfo,PrimaryImageAspectRatio', - EnableImageTypes: 'Primary,Thumb' - }).then(function (result) { - renderItems(page, result.Items, 'upcomingNewsItems', null, { - showParentTitleOrTitle: true, - showTitle: false, - showParentTitle: false - }); - }); +function renderItems(page, items, sectionClass, overlayButton, cardOptions) { + const html = cardBuilder.getCardsHtml(Object.assign({ + items: items, + preferThumb: 'auto', + inheritThumb: false, + shape: enableScrollX() ? 'autooverflow' : 'auto', + defaultShape: getBackdropShape(), + showParentTitle: true, + showTitle: true, + centerText: true, + coverImage: true, + overlayText: false, + lazy: true, + overlayPlayButton: overlayButton === 'play', + overlayMoreButton: overlayButton === 'more', + overlayInfoButton: overlayButton === 'info', + allowBottomPadding: !enableScrollX(), + showAirTime: true, + showAirDateTime: true + }, cardOptions || {})); + const elem = page.querySelector('.' + sectionClass); + elem.innerHTML = html; + imageLoader.lazyChildren(elem); +} + +function getTabs() { + return [{ + name: globalize.translate('Programs') + }, { + name: globalize.translate('TabGuide') + }, { + name: globalize.translate('TabChannels') + }, { + name: globalize.translate('TabRecordings') + }, { + name: globalize.translate('HeaderSchedule') + }, { + name: globalize.translate('TabSeries') + }]; +} + +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 getDefaultTabIndex(folderId) { + if (userSettings.get('landing-' + folderId) === 'guide') { + return 1; } - function renderItems(page, items, sectionClass, overlayButton, cardOptions) { - var html = cardBuilder.getCardsHtml(Object.assign({ - items: items, - preferThumb: 'auto', - inheritThumb: false, - shape: enableScrollX() ? 'autooverflow' : 'auto', - defaultShape: getBackdropShape(), - showParentTitle: true, - showTitle: true, - centerText: true, - coverImage: true, - overlayText: false, - lazy: true, - overlayPlayButton: overlayButton === 'play', - overlayMoreButton: overlayButton === 'more', - overlayInfoButton: overlayButton === 'info', - allowBottomPadding: !enableScrollX(), - showAirTime: true, - showAirDateTime: true - }, cardOptions || {})); - var elem = page.querySelector('.' + sectionClass); - elem.innerHTML = html; - imageLoader.lazyChildren(elem); + return 0; +} + +export default function (view, params) { + function enableFullRender() { + return new Date().getTime() - lastFullRender > 3e5; } - function getTabs() { - return [{ - name: globalize.translate('Programs') - }, { - name: globalize.translate('TabGuide') - }, { - name: globalize.translate('TabChannels') - }, { - name: globalize.translate('TabRecordings') - }, { - name: globalize.translate('HeaderSchedule') - }, { - name: globalize.translate('TabSeries') - }]; + function onBeforeTabChange(evt) { + preLoadTab(view, parseInt(evt.detail.selectedTabIndex)); } - function setScrollClasses(elem, scrollX) { - if (scrollX) { - elem.classList.add('hiddenScrollX'); + function onTabChange(evt) { + const previousTabController = tabControllers[parseInt(evt.detail.previousIndex)]; - if (layoutManager.tv) { - elem.classList.add('smoothScrollX'); + if (previousTabController && previousTabController.onHide) { + previousTabController.onHide(); + } + + loadTab(view, parseInt(evt.detail.selectedTabIndex)); + } + + function getTabContainers() { + return view.querySelectorAll('.pageTabContent'); + } + + function initTabs() { + mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange); + } + + function getTabController(page, index, callback) { + let depends; + + // TODO int is a little hard to read + switch (index) { + case 0: + depends = 'controllers/livetv/livetvsuggested'; + break; + + case 1: + depends = 'controllers/livetv/livetvguide'; + break; + + case 2: + depends = 'controllers/livetv/livetvchannels'; + break; + + case 3: + depends = 'controllers/livetv/livetvrecordings'; + break; + + case 4: + depends = 'controllers/livetv/livetvschedule'; + break; + + case 5: + depends = 'controllers/livetv/livetvseriestimers'; + break; + } + + import(depends).then(({default: controllerFactory}) => { + let tabContent; + + if (index === 0) { + tabContent = view.querySelector(`.pageTabContent[data-index="${index}"]`); + self.tabContent = tabContent; } - 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'); - } - } + let controller = tabControllers[index]; - function getDefaultTabIndex(folderId) { - if (userSettings.get('landing-' + folderId) === 'guide') { - return 1; - } + if (!controller) { + tabContent = view.querySelector(`.pageTabContent[data-index="${index}"]`); - return 0; - } - - return function (view, params) { - function enableFullRender() { - return new Date().getTime() - lastFullRender > 3e5; - } - - function onBeforeTabChange(evt) { - preLoadTab(view, parseInt(evt.detail.selectedTabIndex)); - } - - function onTabChange(evt) { - var previousTabController = tabControllers[parseInt(evt.detail.previousIndex)]; - - if (previousTabController && previousTabController.onHide) { - previousTabController.onHide(); - } - - loadTab(view, parseInt(evt.detail.selectedTabIndex)); - } - - function getTabContainers() { - return view.querySelectorAll('.pageTabContent'); - } - - function initTabs() { - mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange); - } - - function getTabController(page, index, callback) { - var depends = []; - - // TODO int is a little hard to read - switch (index) { - case 0: - break; - - case 1: - depends.push('controllers/livetv/livetvguide'); - break; - - case 2: - depends.push('controllers/livetv/livetvchannels'); - break; - - case 3: - depends.push('controllers/livetv/livetvrecordings'); - break; - - case 4: - depends.push('controllers/livetv/livetvschedule'); - break; - - case 5: - depends.push('controllers/livetv/livetvseriestimers'); - break; - } - - require(depends, function (controllerFactory) { - controllerFactory = controllerFactory.default || controllerFactory; - - var tabContent; - - if (index == 0) { - tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); - self.tabContent = tabContent; + if (index === 0) { + controller = self; + } else if (index === 6) { + controller = new controllerFactory(view, tabContent, { + collectionType: 'livetv' + }); + } else { + controller = new controllerFactory(view, params, tabContent); } - var controller = tabControllers[index]; + tabControllers[index] = controller; - if (!controller) { - tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); + if (controller.initTab) { + controller.initTab(); + } + } - if (index === 0) { - controller = self; - } else if (index === 6) { - controller = new controllerFactory(view, tabContent, { - collectionType: 'livetv' - }); - } else { - controller = new controllerFactory(view, params, tabContent); - } + callback(controller); + }); + } - tabControllers[index] = controller; + function preLoadTab(page, index) { + getTabController(page, index, function (controller) { + if (renderedTabs.indexOf(index) === -1 && controller.preRender) { + controller.preRender(); + } + }); + } - if (controller.initTab) { - controller.initTab(); - } + function loadTab(page, index) { + currentTabIndex = index; + getTabController(page, index, function (controller) { + initialTabIndex = null; + + if (renderedTabs.indexOf(index) === -1) { + if (index === 1) { + renderedTabs.push(index); } - callback(controller); - }); + controller.renderTab(); + } else if (controller.onShow) { + controller.onShow(); + } + + currentTabController = controller; + }); + } + + function onInputCommand(evt) { + if (evt.detail.command === 'search') { + evt.preventDefault(); + Dashboard.navigate('search.html?collectionType=livetv'); } + } - function preLoadTab(page, index) { - getTabController(page, index, function (controller) { - if (renderedTabs.indexOf(index) === -1 && controller.preRender) { - controller.preRender(); - } - }); + let isViewRestored; + const self = this; + let currentTabIndex = parseInt(params.tab || getDefaultTabIndex('livetv')); + let initialTabIndex = currentTabIndex; + let lastFullRender = 0; + [].forEach.call(view.querySelectorAll('.sectionTitleTextButton-programs'), function (link) { + const href = link.href; + + if (href) { + link.href = href + '&serverId=' + ApiClient.serverId(); } + }); - function loadTab(page, index) { - currentTabIndex = index; - getTabController(page, index, function (controller) { - initialTabIndex = null; + self.initTab = function () { + const tabContent = view.querySelector('.pageTabContent[data-index="0"]'); + const containers = tabContent.querySelectorAll('.itemsContainer'); - if (renderedTabs.indexOf(index) == -1) { - if (index === 1) { - renderedTabs.push(index); - } - - controller.renderTab(); - } else if (controller.onShow) { - controller.onShow(); - } - - currentTabController = controller; - }); + for (let i = 0, length = containers.length; i < length; i++) { + setScrollClasses(containers[i], enableScrollX()); } - - function onInputCommand(evt) { - if (evt.detail.command === 'search') { - evt.preventDefault(); - Dashboard.navigate('search.html?collectionType=livetv'); - } - } - - var isViewRestored; - var self = this; - var currentTabIndex = parseInt(params.tab || getDefaultTabIndex('livetv')); - var initialTabIndex = currentTabIndex; - var lastFullRender = 0; - [].forEach.call(view.querySelectorAll('.sectionTitleTextButton-programs'), function (link) { - var href = link.href; - - if (href) { - link.href = href + '&serverId=' + ApiClient.serverId(); - } - }); - - self.initTab = function () { - var tabContent = view.querySelector(".pageTabContent[data-index='0']"); - var containers = tabContent.querySelectorAll('.itemsContainer'); - - for (var i = 0, length = containers.length; i < length; i++) { - setScrollClasses(containers[i], enableScrollX()); - } - }; - - self.renderTab = function () { - var tabContent = view.querySelector(".pageTabContent[data-index='0']"); - - if (enableFullRender()) { - reload(tabContent, true); - lastFullRender = new Date().getTime(); - } else { - reload(tabContent); - } - }; - - var currentTabController; - var tabControllers = []; - var renderedTabs = []; - view.addEventListener('viewbeforeshow', function (evt) { - isViewRestored = evt.detail.isRestored; - initTabs(); - }); - view.addEventListener('viewshow', function (evt) { - isViewRestored = evt.detail.isRestored; - - if (!isViewRestored) { - mainTabsManager.selectedTabIndex(initialTabIndex); - } - - inputManager.on(window, onInputCommand); - }); - view.addEventListener('viewbeforehide', function (e) { - if (currentTabController && currentTabController.onHide) { - currentTabController.onHide(); - } - - inputManager.off(window, onInputCommand); - }); - view.addEventListener('viewdestroy', function (evt) { - tabControllers.forEach(function (tabController) { - if (tabController.destroy) { - tabController.destroy(); - } - }); - }); }; -}); + + self.renderTab = function () { + const tabContent = view.querySelector('.pageTabContent[data-index="0"]'); + + if (enableFullRender()) { + reload(tabContent, true); + lastFullRender = new Date().getTime(); + } else { + reload(tabContent); + } + }; + + let currentTabController; + const tabControllers = []; + const renderedTabs = []; + view.addEventListener('viewbeforeshow', function (evt) { + isViewRestored = evt.detail.isRestored; + initTabs(); + }); + view.addEventListener('viewshow', function (evt) { + isViewRestored = evt.detail.isRestored; + + if (!isViewRestored) { + mainTabsManager.selectedTabIndex(initialTabIndex); + } + + inputManager.on(window, onInputCommand); + }); + view.addEventListener('viewbeforehide', function () { + if (currentTabController && currentTabController.onHide) { + currentTabController.onHide(); + } + + inputManager.off(window, onInputCommand); + }); + view.addEventListener('viewdestroy', function () { + tabControllers.forEach(function (tabController) { + if (tabController.destroy) { + tabController.destroy(); + } + }); + }); +}