diff --git a/dashboard-ui/livetv.html b/dashboard-ui/livetv.html index 45e978a896..de77b5c242 100644 --- a/dashboard-ui/livetv.html +++ b/dashboard-ui/livetv.html @@ -1,4 +1,4 @@ -
+
diff --git a/dashboard-ui/scripts/livetvchannels.js b/dashboard-ui/scripts/livetvchannels.js index 016be14667..1006fc83ea 100644 --- a/dashboard-ui/scripts/livetvchannels.js +++ b/dashboard-ui/scripts/livetvchannels.js @@ -1,122 +1,126 @@ -define(['jQuery'], function ($) { - - var data = {}; - - function getPageData(context) { - var key = getSavedQueryKey(context); - var pageData = data[key]; - - if (!pageData) { - pageData = data[key] = { - query: { - StartIndex: 0, - EnableFavoriteSorting: true, - Limit: LibraryBrowser.getDefaultPageSize() - } - }; - - LibraryBrowser.loadSavedQueryValues(key, pageData.query); - } - return pageData; - } - - function getQuery(context) { - - return getPageData(context).query; - } - - function getSavedQueryKey(context) { - - if (!context.savedQueryKey) { - context.savedQueryKey = LibraryBrowser.getSavedQueryKey('channels'); - } - return context.savedQueryKey; - } - - function getChannelsHtml(channels) { - - return LibraryBrowser.getPosterViewHtml({ - items: channels, - shape: "square", - showTitle: true, - lazy: true, - cardLayout: true, - showDetailsMenu: true - }); - } - - function renderChannels(page, result) { - - var query = getQuery(page); - - $('.listTopPaging', page).html(LibraryBrowser.getQueryPagingHtml({ - startIndex: query.StartIndex, - limit: query.Limit, - totalRecordCount: result.TotalRecordCount, - showLimit: false, - updatePageSizeSetting: false, - filterButton: true - })); - - var html = getChannelsHtml(result.Items); - - var elem = page.querySelector('#items'); - elem.innerHTML = html; - ImageLoader.lazyChildren(elem); - - $('.btnNextPage', page).on('click', function () { - query.StartIndex += query.Limit; - reloadItems(page); - }); - - $('.btnPreviousPage', page).on('click', function () { - query.StartIndex -= query.Limit; - reloadItems(page); - }); - - $('.btnFilter', page).on('click', function () { - showFilterMenu(page); - }); - - LibraryBrowser.saveQueryValues(getSavedQueryKey(page), query); - } - - function showFilterMenu(page) { - - require(['components/filterdialog/filterdialog'], function (filterDialogFactory) { - - var filterDialog = new filterDialogFactory({ - query: getQuery(page), - mode: 'livetvchannels' - }); - - Events.on(filterDialog, 'filterchange', function () { - reloadItems(page); - }); - - filterDialog.show(); - }); - } - - function reloadItems(page) { - - Dashboard.showLoadingMsg(); - - var query = getQuery(page); - - query.UserId = Dashboard.getCurrentUserId(); - - ApiClient.getLiveTvChannels(query).then(function (result) { - - renderChannels(page, result); - - Dashboard.hideLoadingMsg(); - }); - } - - window.LiveTvPage.renderChannelsTab = function (page, tabContent) { - - reloadItems(tabContent); - }; - +define(['jQuery'], function ($) { + + return function (view, params, tabContent) { + + var self = this; + var data = {}; + + function getPageData(context) { + var key = getSavedQueryKey(context); + var pageData = data[key]; + + if (!pageData) { + pageData = data[key] = { + query: { + StartIndex: 0, + EnableFavoriteSorting: true, + Limit: LibraryBrowser.getDefaultPageSize() + } + }; + + LibraryBrowser.loadSavedQueryValues(key, pageData.query); + } + return pageData; + } + + function getQuery(context) { + + return getPageData(context).query; + } + + function getSavedQueryKey(context) { + + if (!context.savedQueryKey) { + context.savedQueryKey = LibraryBrowser.getSavedQueryKey('channels'); + } + return context.savedQueryKey; + } + + function getChannelsHtml(channels) { + + return LibraryBrowser.getPosterViewHtml({ + items: channels, + shape: "square", + showTitle: true, + lazy: true, + cardLayout: true, + showDetailsMenu: true + }); + } + + function renderChannels(context, result) { + + var query = getQuery(context); + + $('.listTopPaging', context).html(LibraryBrowser.getQueryPagingHtml({ + startIndex: query.StartIndex, + limit: query.Limit, + totalRecordCount: result.TotalRecordCount, + showLimit: false, + updatePageSizeSetting: false, + filterButton: true + })); + + var html = getChannelsHtml(result.Items); + + var elem = context.querySelector('#items'); + elem.innerHTML = html; + ImageLoader.lazyChildren(elem); + + $('.btnNextPage', context).on('click', function () { + query.StartIndex += query.Limit; + reloadItems(context); + }); + + $('.btnPreviousPage', context).on('click', function () { + query.StartIndex -= query.Limit; + reloadItems(context); + }); + + $('.btnFilter', context).on('click', function () { + showFilterMenu(context); + }); + + LibraryBrowser.saveQueryValues(getSavedQueryKey(context), query); + } + + function showFilterMenu(context) { + + require(['components/filterdialog/filterdialog'], function (filterDialogFactory) { + + var filterDialog = new filterDialogFactory({ + query: getQuery(context), + mode: 'livetvchannels' + }); + + Events.on(filterDialog, 'filterchange', function () { + reloadItems(context); + }); + + filterDialog.show(); + }); + } + + function reloadItems(context) { + + Dashboard.showLoadingMsg(); + + var query = getQuery(context); + + query.UserId = Dashboard.getCurrentUserId(); + + ApiClient.getLiveTvChannels(query).then(function (result) { + + renderChannels(context, result); + + Dashboard.hideLoadingMsg(); + }); + } + + self.renderTab = function () { + + reloadItems(tabContent); + }; + }; + }); \ No newline at end of file diff --git a/dashboard-ui/scripts/livetvguide.js b/dashboard-ui/scripts/livetvguide.js index d13286fddb..37f5dc286e 100644 --- a/dashboard-ui/scripts/livetvguide.js +++ b/dashboard-ui/scripts/livetvguide.js @@ -1,17 +1,15 @@ -define(['tvguide'], function (tvguide) { - - window.LiveTvPage.initGuideTab = function (page, tabContent) { - - }; - - window.LiveTvPage.renderGuideTab = function (page, tabContent) { - - if (!page.guideInstance) { - - page.guideInstance = new tvguide({ - element: tabContent - }); - } - }; - +define(['tvguide'], function (tvguide) { + + return function (view, params, tabContent) { + + var self = this; + var guideInstance; + self.renderTab = function () { + if (!guideInstance) { + guideInstance = new tvguide({ + element: tabContent + }); + } + }; + }; }); \ No newline at end of file diff --git a/dashboard-ui/scripts/livetvrecordings.js b/dashboard-ui/scripts/livetvrecordings.js index 0c87aaa064..76d69490da 100644 --- a/dashboard-ui/scripts/livetvrecordings.js +++ b/dashboard-ui/scripts/livetvrecordings.js @@ -1,170 +1,170 @@ -define(['jQuery'], function ($) { - - function getRecordingGroupHtml(group) { - - var html = ''; - - html += ''; - - html += ''; - - html += ''; - html += ''; - - html += '
'; - html += group.Name; - html += '
'; - - html += '
'; - if (group.RecordingCount == 1) { - html += Globalize.translate('ValueItemCount', group.RecordingCount); - } else { - html += Globalize.translate('ValueItemCountPlural', group.RecordingCount); - } - html += '
'; - - html += '
'; - html += '
'; - html += '
'; - - return html; - } - - function renderRecordingGroups(page, groups) { - - if (groups.length) { - $('#recordingGroups', page).show(); - } else { - $('#recordingGroups', page).hide(); - } - - var html = ''; - - html += '
'; - - for (var i = 0, length = groups.length; i < length; i++) { - - html += getRecordingGroupHtml(groups[i]); - } - - html += '
'; - - page.querySelector('#recordingGroupItems').innerHTML = html; - - Dashboard.hideLoadingMsg(); - } - - function renderRecordings(elem, recordings) { - - if (recordings.length) { - elem.classList.remove('hide'); - } else { - elem.classList.add('hide'); - } - - var recordingItems = elem.querySelector('.recordingItems'); - recordingItems.innerHTML = LibraryBrowser.getPosterViewHtml({ - items: recordings, - shape: "auto", - showTitle: true, - showParentTitle: true, - centerText: true, - coverImage: true, - lazy: true, - overlayPlayButton: true - - }); - - ImageLoader.lazyChildren(recordingItems); - } - - function renderActiveRecordings(page) { - - ApiClient.getLiveTvRecordings({ - - userId: Dashboard.getCurrentUserId(), - IsInProgress: true, - Fields: 'CanDelete' - - }).then(function (result) { - - renderRecordings(page.querySelector('#activeRecordings'), result.Items); - - }); - } - - function renderLatestRecordings(page) { - - ApiClient.getLiveTvRecordings({ - - userId: Dashboard.getCurrentUserId(), - limit: 4, - IsInProgress: false, - Fields: 'CanDelete,PrimaryImageAspectRatio' - - }).then(function (result) { - - renderRecordings(page.querySelector('#latestRecordings'), result.Items); - }); - } - - function renderTimers(page, timers) { - - LiveTvHelpers.getTimersHtml(timers).then(function (html) { - - var elem = page.querySelector('#upcomingRecordings'); - - if (html) { - elem.classList.remove('hide'); - } else { - elem.classList.add('hide'); - } - - elem.querySelector('.recordingItems').innerHTML = html; - - ImageLoader.lazyChildren(elem); - $(elem).createCardMenus(); - }); - } - - function renderUpcomingRecordings(page) { - - ApiClient.getLiveTvTimers().then(function (result) { - - renderTimers(page, result.Items); - }); - } - - function reload(page) { - - Dashboard.showLoadingMsg(); - - renderUpcomingRecordings(page); - renderActiveRecordings(page); - renderLatestRecordings(page); - - ApiClient.getLiveTvRecordingGroups({ - - userId: Dashboard.getCurrentUserId() - - }).then(function (result) { - - require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () { - renderRecordingGroups(page, result.Items); - }); - }); - } - - window.LiveTvPage.initRecordingsTab = function (page, tabContent) { - - tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () { - reload(tabContent); - }); - }; - - window.LiveTvPage.renderRecordingsTab = function (page, tabContent) { - - reload(tabContent); - }; - +define(['jQuery', 'scripts/livetvcomponents'], function ($) { + + function getRecordingGroupHtml(group) { + + var html = ''; + + html += ''; + + html += ''; + + html += ''; + html += ''; + + html += '
'; + html += group.Name; + html += '
'; + + html += '
'; + if (group.RecordingCount == 1) { + html += Globalize.translate('ValueItemCount', group.RecordingCount); + } else { + html += Globalize.translate('ValueItemCountPlural', group.RecordingCount); + } + html += '
'; + + html += '
'; + html += '
'; + html += '
'; + + return html; + } + + function renderRecordingGroups(context, groups) { + + if (groups.length) { + $('#recordingGroups', context).show(); + } else { + $('#recordingGroups', context).hide(); + } + + var html = ''; + + html += '
'; + + for (var i = 0, length = groups.length; i < length; i++) { + + html += getRecordingGroupHtml(groups[i]); + } + + html += '
'; + + context.querySelector('#recordingGroupItems').innerHTML = html; + + Dashboard.hideLoadingMsg(); + } + + function renderRecordings(elem, recordings) { + + if (recordings.length) { + elem.classList.remove('hide'); + } else { + elem.classList.add('hide'); + } + + var recordingItems = elem.querySelector('.recordingItems'); + recordingItems.innerHTML = LibraryBrowser.getPosterViewHtml({ + items: recordings, + shape: "auto", + showTitle: true, + showParentTitle: true, + centerText: true, + coverImage: true, + lazy: true, + overlayPlayButton: true + + }); + + ImageLoader.lazyChildren(recordingItems); + } + + function renderActiveRecordings(context) { + + ApiClient.getLiveTvRecordings({ + + userId: Dashboard.getCurrentUserId(), + IsInProgress: true, + Fields: 'CanDelete' + + }).then(function (result) { + + renderRecordings(context.querySelector('#activeRecordings'), result.Items); + + }); + } + + function renderLatestRecordings(context) { + + ApiClient.getLiveTvRecordings({ + + userId: Dashboard.getCurrentUserId(), + limit: 4, + IsInProgress: false, + Fields: 'CanDelete,PrimaryImageAspectRatio' + + }).then(function (result) { + + renderRecordings(context.querySelector('#latestRecordings'), result.Items); + }); + } + + function renderTimers(context, timers) { + + LiveTvHelpers.getTimersHtml(timers).then(function (html) { + + var elem = context.querySelector('#upcomingRecordings'); + + if (html) { + elem.classList.remove('hide'); + } else { + elem.classList.add('hide'); + } + + elem.querySelector('.recordingItems').innerHTML = html; + + ImageLoader.lazyChildren(elem); + $(elem).createCardMenus(); + }); + } + + function renderUpcomingRecordings(context) { + + ApiClient.getLiveTvTimers().then(function (result) { + + renderTimers(context, result.Items); + }); + } + + function reload(context) { + + Dashboard.showLoadingMsg(); + + renderUpcomingRecordings(context); + renderActiveRecordings(context); + renderLatestRecordings(context); + + ApiClient.getLiveTvRecordingGroups({ + + userId: Dashboard.getCurrentUserId() + + }).then(function (result) { + + require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () { + renderRecordingGroups(context, result.Items); + }); + }); + } + + return function (view, params, tabContent) { + + var self = this; + tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () { + reload(tabContent); + }); + + self.renderTab = function () { + reload(tabContent); + }; + }; + }); \ No newline at end of file diff --git a/dashboard-ui/scripts/livetvseriestimers.js b/dashboard-ui/scripts/livetvseriestimers.js index f1dd1dc6da..2f8f6ed81c 100644 --- a/dashboard-ui/scripts/livetvseriestimers.js +++ b/dashboard-ui/scripts/livetvseriestimers.js @@ -1,119 +1,123 @@ -define(['datetime', 'jQuery', 'paper-icon-button-light'], function (datetime, $) { - - var query = { - - SortBy: "SortName", - SortOrder: "Ascending" - }; - - function deleteSeriesTimer(page, id) { - - require(['confirm'], function (confirm) { - - confirm(Globalize.translate('MessageConfirmSeriesCancellation'), Globalize.translate('HeaderConfirmSeriesCancellation')).then(function () { - - Dashboard.showLoadingMsg(); - - ApiClient.cancelLiveTvSeriesTimer(id).then(function () { - - require(['toast'], function (toast) { - toast(Globalize.translate('MessageSeriesCancelled')); - }); - - reload(page); - }); - }); - }); - } - - function renderTimers(page, timers) { - - var html = ''; - - if (timers.length) { - html += ''; - } - - var elem = $('#items', page).html(html); - - $('.btnCancelSeries', elem).on('click', function () { - - deleteSeriesTimer(page, this.getAttribute('data-seriestimerid')); - - }); - - Dashboard.hideLoadingMsg(); - } - - function reload(page) { - - Dashboard.showLoadingMsg(); - - ApiClient.getLiveTvSeriesTimers(query).then(function (result) { - - require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () { - renderTimers(page, result.Items); - }); - }); - } - - window.LiveTvPage.renderSeriesTimersTab = function (page, tabContent) { - - reload(tabContent); - }; - +define(['datetime', 'jQuery', 'paper-icon-button-light'], function (datetime, $) { + + var query = { + + SortBy: "SortName", + SortOrder: "Ascending" + }; + + function deleteSeriesTimer(context, id) { + + require(['confirm'], function (confirm) { + + confirm(Globalize.translate('MessageConfirmSeriesCancellation'), Globalize.translate('HeaderConfirmSeriesCancellation')).then(function () { + + Dashboard.showLoadingMsg(); + + ApiClient.cancelLiveTvSeriesTimer(id).then(function () { + + require(['toast'], function (toast) { + toast(Globalize.translate('MessageSeriesCancelled')); + }); + + reload(context); + }); + }); + }); + } + + function renderTimers(context, timers) { + + var html = ''; + + if (timers.length) { + html += ''; + } + + var elem = $('#items', context).html(html); + + $('.btnCancelSeries', elem).on('click', function () { + + deleteSeriesTimer(context, this.getAttribute('data-seriestimerid')); + + }); + + Dashboard.hideLoadingMsg(); + } + + function reload(context) { + + Dashboard.showLoadingMsg(); + + ApiClient.getLiveTvSeriesTimers(query).then(function (result) { + + require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () { + renderTimers(context, result.Items); + }); + }); + } + + return function (view, params, tabContent) { + + var self = this; + self.renderTab = function () { + + reload(tabContent); + }; + }; + }); \ No newline at end of file diff --git a/dashboard-ui/scripts/livetvsuggested.js b/dashboard-ui/scripts/livetvsuggested.js index 84522948ce..b0fd39a7b6 100644 --- a/dashboard-ui/scripts/livetvsuggested.js +++ b/dashboard-ui/scripts/livetvsuggested.js @@ -125,106 +125,110 @@ ImageLoader.lazyChildren(elem); } - function initSuggestedTab(page, tabContent) { + return function (view, params) { - if (enableScrollX()) { - $('.itemsContainer', tabContent).addClass('hiddenScrollX').createCardMenus(); - } else { - $('.itemsContainer', tabContent).removeClass('hiddenScrollX').createCardMenus(); - } - } + var self = this; - function renderSuggestedTab(page, tabContent) { + self.initTab = function () { - reload(tabContent); - } + var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']'); + if (enableScrollX()) { + $('.itemsContainer', tabContent).addClass('hiddenScrollX').createCardMenus(); + } else { + $('.itemsContainer', tabContent).removeClass('hiddenScrollX').createCardMenus(); + } + }; - function loadTab(page, index) { + self.renderTab = function () { + var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']'); + reload(tabContent); + }; - var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']'); - var depends = []; - var scope = 'LiveTvPage'; - var renderMethod = ''; - var initMethod = ''; + var tabControllers = []; + var renderedTabs = []; - var viewMenuBar = document.querySelector('.viewMenuBar'); + function loadTab(page, index) { - switch (index) { + var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']'); + var depends = []; - case 0: - renderMethod = 'renderSuggestedTab'; - initMethod = 'initSuggestedTab'; - break; - case 1: - depends.push('registrationservices'); - depends.push('scripts/livetvguide'); - renderMethod = 'renderGuideTab'; - initMethod = 'initGuideTab'; - break; - case 2: - depends.push('scripts/livetvchannels'); - depends.push('paper-icon-item'); - depends.push('paper-item-body'); - renderMethod = 'renderChannelsTab'; - break; - case 3: - depends.push('scripts/livetvrecordings'); - initMethod = 'initRecordingsTab'; - renderMethod = 'renderRecordingsTab'; - break; - case 4: - depends.push('scripts/livetvseriestimers'); - renderMethod = 'renderSeriesTimersTab'; - break; - default: - break; - } + switch (index) { - require(depends, function () { - - if (initMethod && !tabContent.initComplete) { - - window[scope][initMethod](page, tabContent); - tabContent.initComplete = true; + case 0: + break; + case 1: + depends.push('scripts/livetvguide'); + break; + case 2: + depends.push('scripts/livetvchannels'); + depends.push('paper-icon-item'); + depends.push('paper-item-body'); + break; + case 3: + depends.push('scripts/livetvrecordings'); + break; + case 4: + depends.push('scripts/livetvseriestimers'); + break; + default: + break; } - window[scope][renderMethod](page, tabContent); + require(depends, function (controllerFactory) { - }); - } + if (index == 0) { + self.tabContent = tabContent; + } + var controller = tabControllers[index]; + if (!controller) { + controller = index ? new controllerFactory(view, params, tabContent) : self; + tabControllers[index] = controller; - pageIdOn('pageinit', "liveTvSuggestedPage", function () { + if (controller.initTab) { + controller.initTab(); + } + } - var page = this; + if (renderedTabs.indexOf(index) == -1) { + renderedTabs.push(index); + controller.renderTab(); + } + }); + } - var mdlTabs = page.querySelector('.libraryViewNav'); + var mdlTabs = view.querySelector('.libraryViewNav'); - libraryBrowser.configurePaperLibraryTabs(page, mdlTabs, page.querySelectorAll('.pageTabContent')); + var baseUrl = 'tv.html'; + var topParentId = params.topParentId; + if (topParentId) { + baseUrl += '?topParentId=' + topParentId; + } + + libraryBrowser.configurePaperLibraryTabs(view, mdlTabs, view.querySelectorAll('.pageTabContent')); mdlTabs.addEventListener('tabchange', function (e) { - loadTab(page, parseInt(e.detail.selectedTabIndex)); + loadTab(view, parseInt(e.detail.selectedTabIndex)); }); - }); - pageIdOn('viewshow', "liveTvSuggestedPage", function () { + view.addEventListener('viewshow', function (e) { - var page = this; + // Needed on the guide tab + // Ideally this should be moved to the guide tab on show/hide + document.body.classList.add('autoScrollY'); + }); - // Needed on the guide tab - // Ideally this should be moved to the guide tab on show/hide - document.body.classList.add('autoScrollY'); - }); + view.addEventListener('viewbeforehide', function (e) { - pageIdOn('viewbeforehide', "liveTvSuggestedPage", function () { + document.body.classList.remove('autoScrollY'); + }); - var page = this; + view.addEventListener('viewdestroy', function (e) { - document.body.classList.remove('autoScrollY'); - }); - - window.LiveTvPage = { - renderSuggestedTab: renderSuggestedTab, - initSuggestedTab: initSuggestedTab + tabControllers.forEach(function (t) { + if (t.destroy) { + t.destroy(); + } + }); + }); }; - }); \ No newline at end of file diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index b8180bddf4..3adb61c62d 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -2613,7 +2613,8 @@ var AppInfo = {}; defineRoute({ path: '/livetv.html', - dependencies: ['paper-button'], + dependencies: ['paper-button', 'livetvcss', 'paper-checkbox'], + controller: 'scripts/livetvsuggested', autoFocus: false });