From 45250e454042407aec5bc899334c309020368c69 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Thu, 8 Oct 2015 15:12:53 -0400 Subject: [PATCH] make tv guide standalone component --- dashboard-ui/components/tvguide/tvguide.js | 521 ++++++++++++++++++ .../components/tvguide/tvguide.template.html | 19 + dashboard-ui/css/livetv.css | 4 + dashboard-ui/css/mediaplayer-video.css | 14 + dashboard-ui/livetv.html | 19 - dashboard-ui/scripts/livetvcomponents.js | 8 + dashboard-ui/scripts/livetvguide.js | 506 +---------------- dashboard-ui/scripts/mediaplayer-video.js | 33 ++ dashboard-ui/scripts/site.js | 3 +- 9 files changed, 614 insertions(+), 513 deletions(-) create mode 100644 dashboard-ui/components/tvguide/tvguide.js create mode 100644 dashboard-ui/components/tvguide/tvguide.template.html diff --git a/dashboard-ui/components/tvguide/tvguide.js b/dashboard-ui/components/tvguide/tvguide.js new file mode 100644 index 000000000..3a9b7325b --- /dev/null +++ b/dashboard-ui/components/tvguide/tvguide.js @@ -0,0 +1,521 @@ +define(['livetvcss', 'scripts/livetvcomponents'], function () { + + return function (options) { + + var self = this; + + self.refresh = function () { + reloadPage(options.element); + }; + + // 30 mins + var cellCurationMinutes = 30; + var cellDurationMs = cellCurationMinutes * 60 * 1000; + var msPerDay = 86400000; + + var currentDate; + + var defaultChannels = 50; + var channelLimit = 1000; + + var channelQuery = { + + StartIndex: 0, + Limit: defaultChannels, + EnableFavoriteSorting: true + }; + + var channelsPromise; + + function normalizeDateToTimeslot(date) { + + var minutesOffset = date.getMinutes() - cellCurationMinutes; + + if (minutesOffset >= 0) { + + date.setHours(date.getHours(), cellCurationMinutes, 0, 0); + + } else { + + date.setHours(date.getHours(), 0, 0, 0); + } + + return date; + } + + function reloadChannels(page) { + channelsPromise = null; + reloadGuide(page); + } + + function reloadGuide(page) { + + Dashboard.showModalLoadingMsg(); + + channelQuery.UserId = Dashboard.getCurrentUserId(); + + channelQuery.Limit = Math.min(channelQuery.Limit || defaultChannels, channelLimit); + channelQuery.AddCurrentProgram = false; + + channelsPromise = channelsPromise || ApiClient.getLiveTvChannels(channelQuery); + + var date = currentDate; + + var nextDay = new Date(date.getTime() + msPerDay - 1); + Logger.log(nextDay); + channelsPromise.done(function (channelsResult) { + + ApiClient.getLiveTvPrograms({ + UserId: Dashboard.getCurrentUserId(), + MaxStartDate: nextDay.toISOString(), + MinEndDate: date.toISOString(), + channelIds: channelsResult.Items.map(function (c) { + return c.Id; + }).join(','), + ImageTypeLimit: 1, + EnableImageTypes: "Primary" + + }).done(function (programsResult) { + + renderGuide(page, date, channelsResult.Items, programsResult.Items); + + Dashboard.hideModalLoadingMsg(); + + LibraryBrowser.setLastRefreshed(page); + + }); + + if (options.enablePaging !== false) { + var channelPagingHtml = LibraryBrowser.getQueryPagingHtml({ + startIndex: channelQuery.StartIndex, + limit: channelQuery.Limit, + totalRecordCount: channelsResult.TotalRecordCount, + updatePageSizeSetting: false, + showLimit: true + }); + + var channelPaging = page.querySelector('.channelPaging'); + channelPaging.innerHTML = channelPagingHtml; + $(channelPaging); + } + + Events.on(page.querySelector('.btnNextPage'), 'click', function () { + channelQuery.StartIndex += channelQuery.Limit; + reloadChannels(page); + }); + + Events.on(page.querySelector('.btnPreviousPage'), 'click', function () { + channelQuery.StartIndex -= channelQuery.Limit; + reloadChannels(page); + }); + + Events.on(page.querySelector('#selectPageSize'), 'change', function () { + channelQuery.Limit = parseInt(this.value); + channelQuery.StartIndex = 0; + reloadChannels(page); + }); + }); + } + + function getTimeslotHeadersHtml(startDate, endDateTime) { + + var html = ''; + + // clone + startDate = new Date(startDate.getTime()); + + html += '
'; + + while (startDate.getTime() < endDateTime) { + + html += '
'; + html += '
'; + + html += LibraryBrowser.getDisplayTime(startDate); + html += '
'; + html += '
'; + + // Add 30 mins + startDate.setTime(startDate.getTime() + cellDurationMs); + } + html += '
'; + + return html; + } + + function parseDates(program) { + + if (!program.StartDateLocal) { + try { + + program.StartDateLocal = parseISO8601Date(program.StartDate, { toLocal: true }); + + } catch (err) { + + } + + } + + if (!program.EndDateLocal) { + try { + + program.EndDateLocal = parseISO8601Date(program.EndDate, { toLocal: true }); + + } catch (err) { + + } + + } + + return null; + } + + function getChannelProgramsHtml(page, date, channel, programs) { + + var html = ''; + + var startMs = date.getTime(); + var endMs = startMs + msPerDay - 1; + + programs = programs.filter(function (curr) { + return curr.ChannelId == channel.Id; + }); + + html += '
'; + + for (var i = 0, length = programs.length; i < length; i++) { + + var program = programs[i]; + + if (program.ChannelId != channel.Id) { + continue; + } + + parseDates(program); + + if (program.EndDateLocal.getTime() < startMs) { + continue; + } + + if (program.StartDateLocal.getTime() > endMs) { + break; + } + + var renderStartMs = Math.max(program.StartDateLocal.getTime(), startMs); + var startPercent = (program.StartDateLocal.getTime() - startMs) / msPerDay; + startPercent *= 100; + startPercent = Math.max(startPercent, 0); + + var renderEndMs = Math.min(program.EndDateLocal.getTime(), endMs); + var endPercent = (renderEndMs - renderStartMs) / msPerDay; + endPercent *= 100; + + html += '
'; + + var cssClass = "programCellInner"; + var addAccent = true; + + if (program.IsKids) { + cssClass += " childProgramInfo"; + } else if (program.IsSports) { + cssClass += " sportsProgramInfo"; + } else if (program.IsNews) { + cssClass += " newsProgramInfo"; + } else if (program.IsMovie) { + cssClass += " movieProgramInfo"; + } + else { + cssClass += " plainProgramInfo"; + addAccent = false; + } + + html += ''; + + html += '
'; + html += program.Name; + html += '
'; + + html += '
'; + if (program.IsLive) { + html += '' + Globalize.translate('LabelLiveProgram') + '  '; + } + else if (program.IsPremiere) { + html += '' + Globalize.translate('LabelPremiereProgram') + '  '; + } + else if (program.IsSeries && !program.IsRepeat) { + html += '' + Globalize.translate('LabelNewProgram') + '  '; + } + + html += LibraryBrowser.getDisplayTime(program.StartDateLocal); + html += ' - '; + html += LibraryBrowser.getDisplayTime(program.EndDateLocal); + + if (program.SeriesTimerId) { + html += '
'; + html += '
'; + html += '
'; + } + else if (program.TimerId) { + + html += '
'; + } + html += '
'; + + if (addAccent) { + html += '
'; + } + + html += ''; + + html += '
'; + } + + html += '
'; + + return html; + } + + function renderPrograms(page, date, channels, programs) { + + var html = []; + + for (var i = 0, length = channels.length; i < length; i++) { + + html.push(getChannelProgramsHtml(page, date, channels[i], programs)); + } + + var programGrid = page.querySelector('.programGrid'); + programGrid.innerHTML = html.join(''); + + $(programGrid).scrollTop(0).scrollLeft(0); + + if (options.enableHoverMenu) { + $(programGrid).createGuideHoverMenu('.programCellInner'); + } + } + + function renderChannelHeaders(page, channels) { + + var html = ''; + + for (var i = 0, length = channels.length; i < length; i++) { + + var channel = channels[i]; + + html += '
'; + + html += '
'; + html += ''; + + var hasChannelImage = channel.ImageTags.Primary; + var cssClass = hasChannelImage ? 'guideChannelInfo guideChannelInfoWithImage' : 'guideChannelInfo'; + + html += '
' + channel.Name + '
' + channel.Number + '
'; + + if (hasChannelImage) { + + var url = ApiClient.getScaledImageUrl(channel.Id, { + maxHeight: 35, + maxWidth: 60, + tag: channel.ImageTags.Primary, + type: "Primary" + }); + + html += '
'; + } + + html += ''; + html += '
'; + + html += '
'; + } + + var channelList = page.querySelector('.channelList'); + channelList.innerHTML = html; + ImageLoader.lazyChildren(channelList); + } + + function renderGuide(page, date, channels, programs) { + + renderChannelHeaders(page, channels); + + var startDate = date; + var endDate = new Date(startDate.getTime() + msPerDay); + page.querySelector('.timeslotHeaders').innerHTML = getTimeslotHeadersHtml(startDate, endDate); + renderPrograms(page, date, channels, programs); + } + + var gridScrolling = false; + var headersScrolling = false; + function onProgramGridScroll(page, elem) { + + if (!headersScrolling) { + gridScrolling = true; + + $(page.querySelector('.timeslotHeaders')).scrollLeft($(elem).scrollLeft()); + gridScrolling = false; + } + } + + function onTimeslotHeadersScroll(page, elem) { + + if (!gridScrolling) { + headersScrolling = true; + $(page.querySelector('.programGrid')).scrollLeft($(elem).scrollLeft()); + headersScrolling = false; + } + } + + function changeDate(page, date) { + + currentDate = normalizeDateToTimeslot(date); + + reloadGuide(page); + + var text = LibraryBrowser.getFutureDateText(date); + text = '' + text.replace(' ', ' '); + page.querySelector('.currentDate').innerHTML = text; + } + + var dateOptions = []; + + function setDateRange(page, guideInfo) { + + var today = new Date(); + today.setHours(today.getHours(), 0, 0, 0); + + var start = parseISO8601Date(guideInfo.StartDate, { toLocal: true }); + var end = parseISO8601Date(guideInfo.EndDate, { toLocal: true }); + + start.setHours(0, 0, 0, 0); + end.setHours(0, 0, 0, 0); + + if (start.getTime() >= end.getTime()) { + end.setDate(start.getDate() + 1); + } + + start = new Date(Math.max(today, start)); + + dateOptions = []; + + while (start <= end) { + + dateOptions.push({ + name: LibraryBrowser.getFutureDateText(start), + id: start.getTime(), + ironIcon: 'today' + }); + + start.setDate(start.getDate() + 1); + start.setHours(0, 0, 0, 0); + } + + var date = new Date(); + + if (currentDate) { + date.setTime(currentDate.getTime()); + } + + changeDate(page, date); + } + + function reloadPageAfterValidation(page, limit) { + + channelLimit = limit; + + ApiClient.getLiveTvGuideInfo().done(function (guideInfo) { + + setDateRange(page, guideInfo); + }); + } + + function reloadPage(page) { + + $('.guideRequiresUnlock', page).hide(); + + RegistrationServices.validateFeature('livetv').done(function () { + Dashboard.showModalLoadingMsg(); + + reloadPageAfterValidation(page, 1000); + }).fail(function () { + + Dashboard.showModalLoadingMsg(); + + var limit = 5; + $('.guideRequiresUnlock', page).show(); + $('.unlockText', page).html(Globalize.translate('MessageLiveTvGuideRequiresUnlock', limit)); + + reloadPageAfterValidation(page, limit); + }); + } + + function selectDate(page) { + + require(['actionsheet'], function () { + + ActionSheetElement.show({ + items: dateOptions, + showCancel: true, + title: Globalize.translate('HeaderSelectDate'), + callback: function (id) { + + var date = new Date(); + date.setTime(parseInt(id)); + changeDate(page, date); + } + }); + + }); + } + + ApiClient.ajax({ + + type: 'GET', + url: 'components/tvguide/tvguide.template.html' + + }).done(function (template) { + + var tabContent = options.element; + tabContent.innerHTML = template; + + Events.on(tabContent.querySelector('.programGrid'), 'scroll', function () { + + onProgramGridScroll(tabContent, this); + }); + + if ($.browser.mobile) { + tabContent.querySelector('.tvGuide').classList.add('mobileGuide'); + } else { + + tabContent.querySelector('.tvGuide').classList.remove('mobileGuide'); + + Events.on(tabContent.querySelector('.timeslotHeaders'), 'scroll', function () { + + onTimeslotHeadersScroll(tabContent, this); + }); + } + + if (AppInfo.enableHeadRoom && options.enableHeadRoom) { + requirejs(["thirdparty/headroom"], function () { + + // construct an instance of Headroom, passing the element + var headroom = new Headroom(tabContent.querySelector('.tvGuideHeader')); + // initialise + headroom.init(); + }); + } + + $('.btnUnlockGuide', tabContent).on('click', function () { + + reloadPage(tabContent); + }); + + $('.btnSelectDate', tabContent).on('click', function () { + + selectDate(tabContent); + }); + + self.refresh(); + }); + }; +}); \ No newline at end of file diff --git a/dashboard-ui/components/tvguide/tvguide.template.html b/dashboard-ui/components/tvguide/tvguide.template.html new file mode 100644 index 000000000..cfd25509c --- /dev/null +++ b/dashboard-ui/components/tvguide/tvguide.template.html @@ -0,0 +1,19 @@ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/dashboard-ui/css/livetv.css b/dashboard-ui/css/livetv.css index 273b0f206..3703ad806 100644 --- a/dashboard-ui/css/livetv.css +++ b/dashboard-ui/css/livetv.css @@ -2,6 +2,10 @@ background: #161616; } +.tvGuide { + text-align: left; +} + .tvGuideHeader { white-space: nowrap; position: fixed; diff --git a/dashboard-ui/css/mediaplayer-video.css b/dashboard-ui/css/mediaplayer-video.css index 3f63c0834..dafafb6fa 100644 --- a/dashboard-ui/css/mediaplayer-video.css +++ b/dashboard-ui/css/mediaplayer-video.css @@ -75,6 +75,20 @@ padding: 1.5em 1em 2em 1em; } +.guide { + height: 400px; + overflow: auto; + background-color: #000 !important; +} + + .guide .tvGuideHeader { + position: static !important; + } + + .guide .programContainer { + margin-top: 0 !important; + } + #videoPlayer .nowPlayingImage img { height: auto !important; max-width: 180px; diff --git a/dashboard-ui/livetv.html b/dashboard-ui/livetv.html index 9ddce1083..8e7193aa3 100644 --- a/dashboard-ui/livetv.html +++ b/dashboard-ui/livetv.html @@ -67,25 +67,6 @@
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
diff --git a/dashboard-ui/scripts/livetvcomponents.js b/dashboard-ui/scripts/livetvcomponents.js index f690f8985..e34a5c704 100644 --- a/dashboard-ui/scripts/livetvcomponents.js +++ b/dashboard-ui/scripts/livetvcomponents.js @@ -349,6 +349,13 @@ }); } + function onHoverOut() { + if (showOverlayTimeout) { + clearTimeout(showOverlayTimeout); + showOverlayTimeout = null; + } + } + function onHoverIn() { if (showOverlayTimeout) { @@ -385,6 +392,7 @@ } return this.on('mouseenter', childSelector, onHoverIn) + .on('mouseleave', childSelector, onHoverOut) .on('click', childSelector, onProgramClicked); }; diff --git a/dashboard-ui/scripts/livetvguide.js b/dashboard-ui/scripts/livetvguide.js index 2f3742fe4..c6c69d6f9 100644 --- a/dashboard-ui/scripts/livetvguide.js +++ b/dashboard-ui/scripts/livetvguide.js @@ -1,504 +1,24 @@ (function ($, document) { - // 30 mins - var cellCurationMinutes = 30; - var cellDurationMs = cellCurationMinutes * 60 * 1000; - var msPerDay = 86400000; - - var currentDate; - - var defaultChannels = 50; - var channelLimit = 1000; - - var channelQuery = { - - StartIndex: 0, - Limit: defaultChannels, - EnableFavoriteSorting: true - }; - - var channelsPromise; - - function normalizeDateToTimeslot(date) { - - var minutesOffset = date.getMinutes() - cellCurationMinutes; - - if (minutesOffset >= 0) { - - date.setHours(date.getHours(), cellCurationMinutes, 0, 0); - - } else { - - date.setHours(date.getHours(), 0, 0, 0); - } - - return date; - } - - function reloadChannels(page) { - channelsPromise = null; - reloadGuide(page); - } - - function reloadGuide(page) { - - Dashboard.showModalLoadingMsg(); - - channelQuery.UserId = Dashboard.getCurrentUserId(); - - channelQuery.Limit = Math.min(channelQuery.Limit || defaultChannels, channelLimit); - channelQuery.AddCurrentProgram = false; - - channelsPromise = channelsPromise || ApiClient.getLiveTvChannels(channelQuery); - - var date = currentDate; - - var nextDay = new Date(date.getTime() + msPerDay - 1); - Logger.log(nextDay); - channelsPromise.done(function (channelsResult) { - - ApiClient.getLiveTvPrograms({ - UserId: Dashboard.getCurrentUserId(), - MaxStartDate: nextDay.toISOString(), - MinEndDate: date.toISOString(), - channelIds: channelsResult.Items.map(function (c) { - return c.Id; - }).join(','), - ImageTypeLimit: 1, - EnableImageTypes: "Primary" - - }).done(function (programsResult) { - - renderGuide(page, date, channelsResult.Items, programsResult.Items); - - Dashboard.hideModalLoadingMsg(); - - LibraryBrowser.setLastRefreshed(page); - - }); - - var channelPagingHtml = LibraryBrowser.getQueryPagingHtml({ - startIndex: channelQuery.StartIndex, - limit: channelQuery.Limit, - totalRecordCount: channelsResult.TotalRecordCount, - updatePageSizeSetting: false, - showLimit: true - }); - - var channelPaging = page.querySelector('.channelPaging'); - channelPaging.innerHTML = channelPagingHtml; - $(channelPaging).trigger('create'); - - Events.on(page.querySelector('.btnNextPage'), 'click', function () { - channelQuery.StartIndex += channelQuery.Limit; - reloadChannels(page); - }); - - Events.on(page.querySelector('.btnPreviousPage'), 'click', function () { - channelQuery.StartIndex -= channelQuery.Limit; - reloadChannels(page); - }); - - Events.on(page.querySelector('#selectPageSize'), 'change', function () { - channelQuery.Limit = parseInt(this.value); - channelQuery.StartIndex = 0; - reloadChannels(page); - }); - }); - } - - function getTimeslotHeadersHtml(startDate, endDateTime) { - - var html = ''; - - // clone - startDate = new Date(startDate.getTime()); - - html += '
'; - - while (startDate.getTime() < endDateTime) { - - html += '
'; - html += '
'; - - html += LibraryBrowser.getDisplayTime(startDate); - html += '
'; - html += '
'; - - // Add 30 mins - startDate.setTime(startDate.getTime() + cellDurationMs); - } - html += '
'; - - return html; - } - - function parseDates(program) { - - if (!program.StartDateLocal) { - try { - - program.StartDateLocal = parseISO8601Date(program.StartDate, { toLocal: true }); - - } catch (err) { - - } - - } - - if (!program.EndDateLocal) { - try { - - program.EndDateLocal = parseISO8601Date(program.EndDate, { toLocal: true }); - - } catch (err) { - - } - - } - - return null; - } - - function getChannelProgramsHtml(page, date, channel, programs) { - - var html = ''; - - var startMs = date.getTime(); - var endMs = startMs + msPerDay - 1; - - programs = programs.filter(function (curr) { - return curr.ChannelId == channel.Id; - }); - - html += '
'; - - for (var i = 0, length = programs.length; i < length; i++) { - - var program = programs[i]; - - if (program.ChannelId != channel.Id) { - continue; - } - - parseDates(program); - - if (program.EndDateLocal.getTime() < startMs) { - continue; - } - - if (program.StartDateLocal.getTime() > endMs) { - break; - } - - var renderStartMs = Math.max(program.StartDateLocal.getTime(), startMs); - var startPercent = (program.StartDateLocal.getTime() - startMs) / msPerDay; - startPercent *= 100; - startPercent = Math.max(startPercent, 0); - - var renderEndMs = Math.min(program.EndDateLocal.getTime(), endMs); - var endPercent = (renderEndMs - renderStartMs) / msPerDay; - endPercent *= 100; - - html += '
'; - - var cssClass = "programCellInner"; - var addAccent = true; - - if (program.IsKids) { - cssClass += " childProgramInfo"; - } else if (program.IsSports) { - cssClass += " sportsProgramInfo"; - } else if (program.IsNews) { - cssClass += " newsProgramInfo"; - } else if (program.IsMovie) { - cssClass += " movieProgramInfo"; - } - else { - cssClass += " plainProgramInfo"; - addAccent = false; - } - - html += ''; - - html += '
'; - html += program.Name; - html += '
'; - - html += '
'; - if (program.IsLive) { - html += '' + Globalize.translate('LabelLiveProgram') + '  '; - } - else if (program.IsPremiere) { - html += '' + Globalize.translate('LabelPremiereProgram') + '  '; - } - else if (program.IsSeries && !program.IsRepeat) { - html += '' + Globalize.translate('LabelNewProgram') + '  '; - } - - html += LibraryBrowser.getDisplayTime(program.StartDateLocal); - html += ' - '; - html += LibraryBrowser.getDisplayTime(program.EndDateLocal); - - if (program.SeriesTimerId) { - html += '
'; - html += '
'; - html += '
'; - } - else if (program.TimerId) { - - html += '
'; - } - html += '
'; - - if (addAccent) { - html += '
'; - } - - html += ''; - - html += '
'; - } - - html += '
'; - - return html; - } - - function renderPrograms(page, date, channels, programs) { - - var html = []; - - for (var i = 0, length = channels.length; i < length; i++) { - - html.push(getChannelProgramsHtml(page, date, channels[i], programs)); - } - - var programGrid = page.querySelector('.programGrid'); - programGrid.innerHTML = html.join(''); - - $(programGrid).scrollTop(0).scrollLeft(0) - .createGuideHoverMenu('.programCellInner'); - } - - function renderChannelHeaders(page, channels) { - - var html = ''; - - for (var i = 0, length = channels.length; i < length; i++) { - - var channel = channels[i]; - - html += '
'; - - html += '
'; - html += ''; - - var hasChannelImage = channel.ImageTags.Primary; - var cssClass = hasChannelImage ? 'guideChannelInfo guideChannelInfoWithImage' : 'guideChannelInfo'; - - html += '
' + channel.Name + '
' + channel.Number + '
'; - - if (hasChannelImage) { - - var url = ApiClient.getScaledImageUrl(channel.Id, { - maxHeight: 35, - maxWidth: 60, - tag: channel.ImageTags.Primary, - type: "Primary" - }); - - html += '
'; - } - - html += ''; - html += '
'; - - html += '
'; - } - - var channelList = page.querySelector('.channelList'); - channelList.innerHTML = html; - ImageLoader.lazyChildren(channelList); - } - - function renderGuide(page, date, channels, programs) { - - renderChannelHeaders(page, channels); - - var startDate = date; - var endDate = new Date(startDate.getTime() + msPerDay); - page.querySelector('.timeslotHeaders').innerHTML = getTimeslotHeadersHtml(startDate, endDate); - renderPrograms(page, date, channels, programs); - } - - var gridScrolling = false; - var headersScrolling = false; - function onProgramGridScroll(page, elem) { - - if (!headersScrolling) { - gridScrolling = true; - - $(page.querySelector('.timeslotHeaders')).scrollLeft($(elem).scrollLeft()); - gridScrolling = false; - } - } - - function onTimeslotHeadersScroll(page, elem) { - - if (!gridScrolling) { - headersScrolling = true; - $(page.querySelector('.programGrid')).scrollLeft($(elem).scrollLeft()); - headersScrolling = false; - } - } - - function changeDate(page, date) { - - currentDate = normalizeDateToTimeslot(date); - - reloadGuide(page); - - var text = LibraryBrowser.getFutureDateText(date); - text = '' + text.replace(' ', ' '); - page.querySelector('.currentDate').innerHTML = text; - } - - var dateOptions = []; - - function setDateRange(page, guideInfo) { - - var today = new Date(); - today.setHours(today.getHours(), 0, 0, 0); - - var start = parseISO8601Date(guideInfo.StartDate, { toLocal: true }); - var end = parseISO8601Date(guideInfo.EndDate, { toLocal: true }); - - start.setHours(0, 0, 0, 0); - end.setHours(0, 0, 0, 0); - - if (start.getTime() >= end.getTime()) { - end.setDate(start.getDate() + 1); - } - - start = new Date(Math.max(today, start)); - - dateOptions = []; - - while (start <= end) { - - dateOptions.push({ - name: LibraryBrowser.getFutureDateText(start), - id: start.getTime(), - ironIcon: 'today' - }); - - start.setDate(start.getDate() + 1); - start.setHours(0, 0, 0, 0); - } - - var date = new Date(); - - if (currentDate) { - date.setTime(currentDate.getTime()); - } - - changeDate(page, date); - } - - function reloadPageAfterValidation(page, limit) { - - channelLimit = limit; - - ApiClient.getLiveTvGuideInfo().done(function (guideInfo) { - - setDateRange(page, guideInfo); - }); - } - - function reloadPage(page) { - - $('.guideRequiresUnlock', page).hide(); - - RegistrationServices.validateFeature('livetv').done(function () { - Dashboard.showModalLoadingMsg(); - - reloadPageAfterValidation(page, 1000); - }).fail(function () { - - Dashboard.showModalLoadingMsg(); - - var limit = 5; - $('.guideRequiresUnlock', page).show(); - $('.unlockText', page).html(Globalize.translate('MessageLiveTvGuideRequiresUnlock', limit)); - - reloadPageAfterValidation(page, limit); - }); - } - - function selectDate(page) { - - require(['actionsheet'], function () { - - ActionSheetElement.show({ - items: dateOptions, - showCancel: true, - title: Globalize.translate('HeaderSelectDate'), - callback: function (id) { - - var date = new Date(); - date.setTime(parseInt(id)); - changeDate(page, date); - } - }); - - }); - } - window.LiveTvPage.initGuideTab = function (page, tabContent) { - Events.on(tabContent.querySelector('.programGrid'), 'scroll', function () { - - onProgramGridScroll(tabContent, this); - }); - - if ($.browser.mobile) { - tabContent.querySelector('.tvGuide').classList.add('mobileGuide'); - } else { - - tabContent.querySelector('.tvGuide').classList.remove('mobileGuide'); - - Events.on(tabContent.querySelector('.timeslotHeaders'), 'scroll', function () { - - onTimeslotHeadersScroll(tabContent, this); - }); - } - - if (AppInfo.enableHeadRoom) { - requirejs(["thirdparty/headroom"], function () { - - // construct an instance of Headroom, passing the element - var headroom = new Headroom(tabContent.querySelector('.tvGuideHeader')); - // initialise - headroom.init(); - }); - } - - $('.btnUnlockGuide', tabContent).on('click', function () { - - reloadPage(tabContent); - }); - - $('.btnSelectDate', tabContent).on('click', function () { - - selectDate(tabContent); - }); }; window.LiveTvPage.renderGuideTab = function (page, tabContent) { - if (LibraryBrowser.needsRefresh(tabContent)) { - reloadPage(tabContent); + if (page.guideInstance) { + if (LibraryBrowser.needsRefresh(tabContent)) { + page.guideInstance.refresh(); + } + } else { + require(['tvguide'], function (tvguide) { + + page.guideInstance = new tvguide({ + element: tabContent, + enableHeadRoom: true, + enableHoverMenu: true + }); + }); } }; diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index 35c3f6d93..7e43f10e4 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -626,6 +626,35 @@ } }; + self.toggleGuide = function () { + + var button = document.querySelector('.mediaButton.guideButton'); + var nowPlayingInfo = document.querySelector('.videoControls .guide'); + + if (button.classList.contains('active')) { + button.classList.remove('active'); + document.querySelector('.videoControls').classList.add('hiddenOnIdle'); + + fadeOutDown(nowPlayingInfo); + + } else { + button.classList.add('active'); + document.querySelector('.videoControls').classList.remove('hiddenOnIdle'); + nowPlayingInfo.classList.remove('hide'); + fadeInUp(nowPlayingInfo); + + if (!self.guideInstance) { + require(['tvguide'], function (tvguide) { + + self.guideInstance = new tvguide({ + element: nowPlayingInfo, + enablePaging: false + }); + }); + } + } + }; + function fadeInUp(elem) { var keyframes = [ { transform: 'translate3d(0, 100%, 0)', offset: 0 }, @@ -682,6 +711,9 @@ html += '
'; html += ''; // nowPlayingInfo + html += '
'; + html += '
'; // guide + html += '
'; html += ''; @@ -701,6 +733,7 @@ html += ''; html += ''; + //html += ''; html += '
'; html += ''; // videoControls diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index ca0bbe053..819265f92 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -2023,7 +2023,8 @@ var AppInfo = {}; } var paths = { - velocity: "bower_components/velocity/velocity.min" + velocity: "bower_components/velocity/velocity.min", + tvguide: 'components/tvguide/tvguide' }; if (Dashboard.isRunningInCordova()) {