mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Migration of guide and guide-settings to ES6 modules

Browse source
This commit is contained in:
Cameron 2020-08-05 09:00:24 +01:00
parent b5fab608c1
commit fbb98bdd2f
4 changed files with 1294 additions and 1266 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -111,6 +111,8 @@
"src/components/fetchhelper.js", "src/components/fetchhelper.js",
"src/components/filterdialog/filterdialog.js", "src/components/filterdialog/filterdialog.js",
"src/components/groupedcards.js", "src/components/groupedcards.js",
"src/components/guide/guide.js",
"src/components/guide/guide-settings.js",
"src/components/homeScreenSettings/homeScreenSettings.js", "src/components/homeScreenSettings/homeScreenSettings.js",
"src/components/homesections/homesections.js", "src/components/homesections/homesections.js",
"src/components/htmlMediaHelper.js", "src/components/htmlMediaHelper.js",

62
src/components/guide/guide-settings.js
View file

@ -1,12 +1,19 @@
define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectionManager', 'require', 'loading', 'scrollHelper', 'emby-checkbox', 'emby-radio', 'css!./../formdialog', 'material-icons'], function (dialogHelper, globalize, userSettings, layoutManager, connectionManager, require, loading, scrollHelper) { import dialogHelper from 'dialogHelper';
'use strict'; import globalize from 'globalize';
import * as userSettings from 'userSettings';
import layoutManager from 'layoutManager';
import scrollHelper from 'scrollHelper';
import 'emby-checkbox';
import 'emby-radio';
import 'css!./../formdialog';
import 'material-icons';
function saveCategories(context, options) { function saveCategories(context, options) {
var categories = []; const categories = [];
var chkCategorys = context.querySelectorAll('.chkCategory'); const chkCategorys = context.querySelectorAll('.chkCategory');
for (var i = 0, length = chkCategorys.length; i < length; i++) { for (let i = 0, length = chkCategorys.length; i < length; i++) {
var type = chkCategorys[i].getAttribute('data-type'); const type = chkCategorys[i].getAttribute('data-type');
if (chkCategorys[i].checked) { if (chkCategorys[i].checked) {
categories.push(type); categories.push(type);
@ -23,30 +30,30 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
} }
function loadCategories(context, options) { function loadCategories(context, options) {
var selectedCategories = options.categories || []; const selectedCategories = options.categories || [];
var chkCategorys = context.querySelectorAll('.chkCategory'); const chkCategorys = context.querySelectorAll('.chkCategory');
for (var i = 0, length = chkCategorys.length; i < length; i++) { for (let i = 0, length = chkCategorys.length; i < length; i++) {
var type = chkCategorys[i].getAttribute('data-type'); const type = chkCategorys[i].getAttribute('data-type');
chkCategorys[i].checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1; chkCategorys[i].checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1;
} }
} }
function save(context) { function save(context) {
var i; let i;
var length; let length;
var chkIndicators = context.querySelectorAll('.chkIndicator'); const chkIndicators = context.querySelectorAll('.chkIndicator');
for (i = 0, length = chkIndicators.length; i < length; i++) { for (i = 0, length = chkIndicators.length; i < length; i++) {
var type = chkIndicators[i].getAttribute('data-type'); const type = chkIndicators[i].getAttribute('data-type');
userSettings.set('guide-indicator-' + type, chkIndicators[i].checked); userSettings.set('guide-indicator-' + type, chkIndicators[i].checked);
} }
userSettings.set('guide-colorcodedbackgrounds', context.querySelector('.chkColorCodedBackgrounds').checked); userSettings.set('guide-colorcodedbackgrounds', context.querySelector('.chkColorCodedBackgrounds').checked);
userSettings.set('livetv-favoritechannelsattop', context.querySelector('.chkFavoriteChannelsAtTop').checked); userSettings.set('livetv-favoritechannelsattop', context.querySelector('.chkFavoriteChannelsAtTop').checked);
var sortBys = context.querySelectorAll('.chkSortOrder'); const sortBys = context.querySelectorAll('.chkSortOrder');
for (i = 0, length = sortBys.length; i < length; i++) { for (i = 0, length = sortBys.length; i < length; i++) {
if (sortBys[i].checked) { if (sortBys[i].checked) {
userSettings.set('livetv-channelorder', sortBys[i].value); userSettings.set('livetv-channelorder', sortBys[i].value);
@ -56,12 +63,12 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
} }
function load(context) { function load(context) {
var i; let i;
var length; let length;
var chkIndicators = context.querySelectorAll('.chkIndicator'); const chkIndicators = context.querySelectorAll('.chkIndicator');
for (i = 0, length = chkIndicators.length; i < length; i++) { for (i = 0, length = chkIndicators.length; i < length; i++) {
var type = chkIndicators[i].getAttribute('data-type'); const type = chkIndicators[i].getAttribute('data-type');
if (chkIndicators[i].getAttribute('data-default') === 'true') { if (chkIndicators[i].getAttribute('data-default') === 'true') {
chkIndicators[i].checked = userSettings.get('guide-indicator-' + type) !== 'false'; chkIndicators[i].checked = userSettings.get('guide-indicator-' + type) !== 'false';
@ -73,9 +80,9 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
context.querySelector('.chkColorCodedBackgrounds').checked = userSettings.get('guide-colorcodedbackgrounds') === 'true'; context.querySelector('.chkColorCodedBackgrounds').checked = userSettings.get('guide-colorcodedbackgrounds') === 'true';
context.querySelector('.chkFavoriteChannelsAtTop').checked = userSettings.get('livetv-favoritechannelsattop') !== 'false'; context.querySelector('.chkFavoriteChannelsAtTop').checked = userSettings.get('livetv-favoritechannelsattop') !== 'false';
var sortByValue = userSettings.get('livetv-channelorder') || 'Number'; const sortByValue = userSettings.get('livetv-channelorder') || 'Number';
var sortBys = context.querySelectorAll('.chkSortOrder'); const sortBys = context.querySelectorAll('.chkSortOrder');
for (i = 0, length = sortBys.length; i < length; i++) { for (i = 0, length = sortBys.length; i < length; i++) {
sortBys[i].checked = sortBys[i].value === sortByValue; sortBys[i].checked = sortBys[i].value === sortByValue;
} }
@ -83,10 +90,10 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
function showEditor(options) { function showEditor(options) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
var settingsChanged = false; let settingsChanged = false;
require(['text!./guide-settings.template.html'], function (template) { import('text!./guide-settings.template.html').then(({default: template}) => {
var dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -97,11 +104,11 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
var html = ''; let html = '';
html += globalize.translateHtml(template, 'core'); html += globalize.translateHtml(template, 'core');
@ -141,7 +148,6 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
}); });
} }
return { export default {
show: showEditor show: showEditor
}; };
});

396
src/components/guide/guide.js
View file

@ -1,12 +1,33 @@
define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', 'scrollHelper', 'serverNotifications', 'loading', 'datetime', 'focusManager', 'playbackManager', 'userSettings', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'dom', 'css!./guide.css', 'programStyles', 'material-icons', 'scrollStyles', 'emby-programcell', 'emby-button', 'paper-icon-button-light', 'emby-tabs', 'emby-scroller', 'flexStyles', 'webcomponents'], function (require, inputManager, browser, globalize, connectionManager, scrollHelper, serverNotifications, loading, datetime, focusManager, playbackManager, userSettings, imageLoader, events, layoutManager, itemShortcuts, dom) { import inputManager from 'inputManager';
'use strict'; import browser from 'browser';
import globalize from 'globalize';
playbackManager = playbackManager.default || playbackManager; import connectionManager from 'connectionManager';
browser = browser.default || browser; import scrollHelper from 'scrollHelper';
loading = loading.default || loading; import serverNotifications from 'serverNotifications';
import loading from 'loading';
import datetime from 'datetime';
import focusManager from 'focusManager';
import playbackManager from 'playbackManager';
import * as userSettings from 'userSettings';
import imageLoader from 'imageLoader';
import events from 'events';
import layoutManager from 'layoutManager';
import itemShortcuts from 'itemShortcuts';
import dom from 'dom';
import 'css!./guide.css';
import 'programStyles';
import 'material-icons';
import 'scrollStyles';
import 'emby-programcell';
import 'emby-button';
import 'paper-icon-button-light';
import 'emby-tabs';
import 'emby-scroller';
import 'flexStyles';
import 'webcomponents';
function showViewSettings(instance) { function showViewSettings(instance) {
require(['guide-settings-dialog'], function (guideSettingsDialog) { import('guide-settings-dialog').then(({default: guideSettingsDialog}) => {
guideSettingsDialog.show(instance.categoryOptions).then(function () { guideSettingsDialog.show(instance.categoryOptions).then(function () {
instance.refresh(); instance.refresh();
}); });
@ -14,30 +35,30 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function updateProgramCellOnScroll(cell, scrollPct) { function updateProgramCellOnScroll(cell, scrollPct) {
var left = cell.posLeft; let left = cell.posLeft;
if (!left) { if (!left) {
left = parseFloat(cell.style.left.replace('%', '')); left = parseFloat(cell.style.left.replace('%', ''));
cell.posLeft = left; cell.posLeft = left;
} }
var width = cell.posWidth; let width = cell.posWidth;
if (!width) { if (!width) {
width = parseFloat(cell.style.width.replace('%', '')); width = parseFloat(cell.style.width.replace('%', ''));
cell.posWidth = width; cell.posWidth = width;
} }
var right = left + width; const right = left + width;
var newPct = Math.max(Math.min(scrollPct, right), left); const newPct = Math.max(Math.min(scrollPct, right), left);
var offset = newPct - left; const offset = newPct - left;
var pctOfWidth = (offset / width) * 100; const pctOfWidth = (offset / width) * 100;
var guideProgramName = cell.guideProgramName; let guideProgramName = cell.guideProgramName;
if (!guideProgramName) { if (!guideProgramName) {
guideProgramName = cell.querySelector('.guideProgramName'); guideProgramName = cell.querySelector('.guideProgramName');
cell.guideProgramName = guideProgramName; cell.guideProgramName = guideProgramName;
} }
var caret = cell.caret; let caret = cell.caret;
if (!caret) { if (!caret) {
caret = cell.querySelector('.guide-programNameCaret'); caret = cell.querySelector('.guide-programNameCaret');
cell.caret = caret; cell.caret = caret;
@ -54,7 +75,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
} }
var isUpdatingProgramCellScroll = false; let isUpdatingProgramCellScroll = false;
function updateProgramCellsOnScroll(programGrid, programCells) { function updateProgramCellsOnScroll(programGrid, programCells) {
if (isUpdatingProgramCellScroll) { if (isUpdatingProgramCellScroll) {
return; return;
@ -63,11 +84,11 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
isUpdatingProgramCellScroll = true; isUpdatingProgramCellScroll = true;
requestAnimationFrame(function () { requestAnimationFrame(function () {
var scrollLeft = programGrid.scrollLeft; const scrollLeft = programGrid.scrollLeft;
var scrollPct = scrollLeft ? (scrollLeft / programGrid.scrollWidth) * 100 : 0; const scrollPct = scrollLeft ? (scrollLeft / programGrid.scrollWidth) * 100 : 0;
for (var i = 0, length = programCells.length; i < length; i++) { for (let i = 0, length = programCells.length; i < length; i++) {
updateProgramCellOnScroll(programCells[i], scrollPct); updateProgramCellOnScroll(programCells[i], scrollPct);
} }
@ -80,17 +101,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
return; return;
} }
var programCell = dom.parentWithClass(e.target, 'programCell'); const programCell = dom.parentWithClass(e.target, 'programCell');
if (programCell) { if (programCell) {
var startDate = programCell.getAttribute('data-startdate'); let startDate = programCell.getAttribute('data-startdate');
var endDate = programCell.getAttribute('data-enddate'); let endDate = programCell.getAttribute('data-enddate');
startDate = datetime.parseISO8601Date(startDate, { toLocal: true }).getTime(); startDate = datetime.parseISO8601Date(startDate, { toLocal: true }).getTime();
endDate = datetime.parseISO8601Date(endDate, { toLocal: true }).getTime(); endDate = datetime.parseISO8601Date(endDate, { toLocal: true }).getTime();
var now = new Date().getTime(); const now = new Date().getTime();
if (now >= startDate && now < endDate) { if (now >= startDate && now < endDate) {
var channelId = programCell.getAttribute('data-channelid'); const channelId = programCell.getAttribute('data-channelid');
var serverId = programCell.getAttribute('data-serverid'); const serverId = programCell.getAttribute('data-serverid');
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -104,24 +125,24 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function Guide(options) { function Guide(options) {
var self = this; const self = this;
var items = {}; let items = {};
self.options = options; self.options = options;
self.categoryOptions = { categories: [] }; self.categoryOptions = { categories: [] };
// 30 mins // 30 mins
var cellCurationMinutes = 30; const cellCurationMinutes = 30;
var cellDurationMs = cellCurationMinutes * 60 * 1000; const cellDurationMs = cellCurationMinutes * 60 * 1000;
var msPerDay = 86400000; const msPerDay = 86400000;
var currentDate; let currentDate;
var currentStartIndex = 0; let currentStartIndex = 0;
var currentChannelLimit = 0; let currentChannelLimit = 0;
var autoRefreshInterval; let autoRefreshInterval;
var programCells; let programCells;
var lastFocusDirection; let lastFocusDirection;
var programGrid; let programGrid;
self.refresh = function () { self.refresh = function () {
currentDate = null; currentDate = null;
@ -157,7 +178,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
function restartAutoRefresh() { function restartAutoRefresh() {
stopAutoRefresh(); stopAutoRefresh();
var intervalMs = 60000 * 15; // (minutes) const intervalMs = 60000 * 15; // (minutes)
autoRefreshInterval = setInterval(function () { autoRefreshInterval = setInterval(function () {
self.refresh(); self.refresh();
@ -172,7 +193,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function normalizeDateToTimeslot(date) { function normalizeDateToTimeslot(date) {
var minutesOffset = date.getMinutes() - cellCurationMinutes; const minutesOffset = date.getMinutes() - cellCurationMinutes;
if (minutesOffset >= 0) { if (minutesOffset >= 0) {
date.setHours(date.getHours(), cellCurationMinutes, 0, 0); date.setHours(date.getHours(), cellCurationMinutes, 0, 0);
@ -192,9 +213,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function reloadGuide(context, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) { function reloadGuide(context, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
var apiClient = connectionManager.getApiClient(options.serverId); const apiClient = connectionManager.getApiClient(options.serverId);
var channelQuery = { const channelQuery = {
StartIndex: 0, StartIndex: 0,
EnableFavoriteSorting: userSettings.get('livetv-favoritechannelsattop') !== 'false' EnableFavoriteSorting: userSettings.get('livetv-favoritechannelsattop') !== 'false'
@ -202,7 +223,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
channelQuery.UserId = apiClient.getCurrentUserId(); channelQuery.UserId = apiClient.getCurrentUserId();
var channelLimit = 500; const channelLimit = 500;
currentChannelLimit = channelLimit; currentChannelLimit = channelLimit;
showLoading(); showLoading();
@ -213,12 +234,12 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
channelQuery.EnableUserData = false; channelQuery.EnableUserData = false;
channelQuery.EnableImageTypes = 'Primary'; channelQuery.EnableImageTypes = 'Primary';
var categories = self.categoryOptions.categories || []; const categories = self.categoryOptions.categories || [];
var displayMovieContent = !categories.length || categories.indexOf('movies') !== -1; const displayMovieContent = !categories.length || categories.indexOf('movies') !== -1;
var displaySportsContent = !categories.length || categories.indexOf('sports') !== -1; const displaySportsContent = !categories.length || categories.indexOf('sports') !== -1;
var displayNewsContent = !categories.length || categories.indexOf('news') !== -1; const displayNewsContent = !categories.length || categories.indexOf('news') !== -1;
var displayKidsContent = !categories.length || categories.indexOf('kids') !== -1; const displayKidsContent = !categories.length || categories.indexOf('kids') !== -1;
var displaySeriesContent = !categories.length || categories.indexOf('series') !== -1; const displaySeriesContent = !categories.length || categories.indexOf('series') !== -1;
if (displayMovieContent && displaySportsContent && displayNewsContent && displayKidsContent) { if (displayMovieContent && displaySportsContent && displayNewsContent && displayKidsContent) {
channelQuery.IsMovie = null; channelQuery.IsMovie = null;
@ -252,19 +273,19 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
channelQuery.SortOrder = null; channelQuery.SortOrder = null;
} }
var date = newStartDate; let date = newStartDate;
// Add one second to avoid getting programs that are just ending // Add one second to avoid getting programs that are just ending
date = new Date(date.getTime() + 1000); date = new Date(date.getTime() + 1000);
// Subtract to avoid getting programs that are starting when the grid ends // Subtract to avoid getting programs that are starting when the grid ends
var nextDay = new Date(date.getTime() + msPerDay - 2000); const nextDay = new Date(date.getTime() + msPerDay - 2000);
// Normally we'd want to just let responsive css handle this, // Normally we'd want to just let responsive css handle this,
// but since mobile browsers are often underpowered, // but since mobile browsers are often underpowered,
// it can help performance to get them out of the markup // it can help performance to get them out of the markup
var allowIndicators = dom.getWindowSize().innerWidth >= 600; const allowIndicators = dom.getWindowSize().innerWidth >= 600;
var renderOptions = { const renderOptions = {
showHdIcon: allowIndicators && userSettings.get('guide-indicator-hd') === 'true', showHdIcon: allowIndicators && userSettings.get('guide-indicator-hd') === 'true',
showLiveIndicator: allowIndicators && userSettings.get('guide-indicator-live') !== 'false', showLiveIndicator: allowIndicators && userSettings.get('guide-indicator-live') !== 'false',
showPremiereIndicator: allowIndicators && userSettings.get('guide-indicator-premiere') !== 'false', showPremiereIndicator: allowIndicators && userSettings.get('guide-indicator-premiere') !== 'false',
@ -274,8 +295,8 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
}; };
apiClient.getLiveTvChannels(channelQuery).then(function (channelsResult) { apiClient.getLiveTvChannels(channelQuery).then(function (channelsResult) {
var btnPreviousPage = context.querySelector('.btnPreviousPage'); const btnPreviousPage = context.querySelector('.btnPreviousPage');
var btnNextPage = context.querySelector('.btnNextPage'); const btnNextPage = context.querySelector('.btnNextPage');
if (channelsResult.TotalRecordCount > channelLimit) { if (channelsResult.TotalRecordCount > channelLimit) {
context.querySelector('.guideOptions').classList.remove('hide'); context.querySelector('.guideOptions').classList.remove('hide');
@ -298,9 +319,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
context.querySelector('.guideOptions').classList.add('hide'); context.querySelector('.guideOptions').classList.add('hide');
} }
var programFields = []; const programFields = [];
var programQuery = { const programQuery = {
UserId: apiClient.getCurrentUserId(), UserId: apiClient.getCurrentUserId(),
MaxStartDate: nextDay.toISOString(), MaxStartDate: nextDay.toISOString(),
MinEndDate: date.toISOString(), MinEndDate: date.toISOString(),
@ -344,7 +365,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function getTimeslotHeadersHtml(startDate, endDateTime) { function getTimeslotHeadersHtml(startDate, endDateTime) {
var html = ''; let html = '';
// clone // clone
startDate = new Date(startDate.getTime()); startDate = new Date(startDate.getTime());
@ -385,7 +406,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function getTimerIndicator(item) { function getTimerIndicator(item) {
var status; let status;
if (item.Type === 'SeriesTimer') { if (item.Type === 'SeriesTimer') {
return '<span class="material-icons programIcon seriesTimerIcon fiber_smart_record"></span>'; return '<span class="material-icons programIcon seriesTimerIcon fiber_smart_record"></span>';
@ -409,30 +430,30 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) { function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) {
var html = ''; let html = '';
var startMs = date.getTime(); const startMs = date.getTime();
var endMs = startMs + msPerDay - 1; const endMs = startMs + msPerDay - 1;
var outerCssClass = layoutManager.tv ? 'channelPrograms channelPrograms-tv' : 'channelPrograms'; const outerCssClass = layoutManager.tv ? 'channelPrograms channelPrograms-tv' : 'channelPrograms';
html += '<div class="' + outerCssClass + '" data-channelid="' + channel.Id + '">'; html += '<div class="' + outerCssClass + '" data-channelid="' + channel.Id + '">';
var clickAction = layoutManager.tv ? 'link' : 'programdialog'; const clickAction = layoutManager.tv ? 'link' : 'programdialog';
var categories = self.categoryOptions.categories || []; const categories = self.categoryOptions.categories || [];
var displayMovieContent = !categories.length || categories.indexOf('movies') !== -1; const displayMovieContent = !categories.length || categories.indexOf('movies') !== -1;
var displaySportsContent = !categories.length || categories.indexOf('sports') !== -1; const displaySportsContent = !categories.length || categories.indexOf('sports') !== -1;
var displayNewsContent = !categories.length || categories.indexOf('news') !== -1; const displayNewsContent = !categories.length || categories.indexOf('news') !== -1;
var displayKidsContent = !categories.length || categories.indexOf('kids') !== -1; const displayKidsContent = !categories.length || categories.indexOf('kids') !== -1;
var displaySeriesContent = !categories.length || categories.indexOf('series') !== -1; const displaySeriesContent = !categories.length || categories.indexOf('series') !== -1;
var enableColorCodedBackgrounds = userSettings.get('guide-colorcodedbackgrounds') === 'true'; const enableColorCodedBackgrounds = userSettings.get('guide-colorcodedbackgrounds') === 'true';
var programsFound; let programsFound;
var now = new Date().getTime(); const now = new Date().getTime();
for (var i = listInfo.startIndex, length = programs.length; i < length; i++) { for (let i = listInfo.startIndex, length = programs.length; i < length; i++) {
var program = programs[i]; const program = programs[i];
if (program.ChannelId !== channel.Id) { if (program.ChannelId !== channel.Id) {
if (programsFound) { if (programsFound) {
@ -447,8 +468,8 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
parseDates(program); parseDates(program);
var startDateLocalMs = program.StartDateLocal.getTime(); const startDateLocalMs = program.StartDateLocal.getTime();
var endDateLocalMs = program.EndDateLocal.getTime(); const endDateLocalMs = program.EndDateLocal.getTime();
if (endDateLocalMs < startMs) { if (endDateLocalMs < startMs) {
continue; continue;
@ -460,18 +481,18 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
items[program.Id] = program; items[program.Id] = program;
var renderStartMs = Math.max(startDateLocalMs, startMs); const renderStartMs = Math.max(startDateLocalMs, startMs);
var startPercent = (startDateLocalMs - startMs) / msPerDay; let startPercent = (startDateLocalMs - startMs) / msPerDay;
startPercent *= 100; startPercent *= 100;
startPercent = Math.max(startPercent, 0); startPercent = Math.max(startPercent, 0);
var renderEndMs = Math.min(endDateLocalMs, endMs); const renderEndMs = Math.min(endDateLocalMs, endMs);
var endPercent = (renderEndMs - renderStartMs) / msPerDay; let endPercent = (renderEndMs - renderStartMs) / msPerDay;
endPercent *= 100; endPercent *= 100;
var cssClass = 'programCell itemAction'; let cssClass = 'programCell itemAction';
var accentCssClass = null; let accentCssClass = null;
var displayInnerContent = true; let displayInnerContent = true;
if (program.IsKids) { if (program.IsKids) {
displayInnerContent = displayKidsContent; displayInnerContent = displayKidsContent;
@ -499,7 +520,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
cssClass += ' programCell-active'; cssClass += ' programCell-active';
} }
var timerAttributes = ''; let timerAttributes = '';
if (program.TimerId) { if (program.TimerId) {
timerAttributes += ' data-timerid="' + program.TimerId + '"'; timerAttributes += ' data-timerid="' + program.TimerId + '"';
} }
@ -507,12 +528,12 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
timerAttributes += ' data-seriestimerid="' + program.SeriesTimerId + '"'; timerAttributes += ' data-seriestimerid="' + program.SeriesTimerId + '"';
} }
var isAttribute = endPercent >= 2 ? ' is="emby-programcell"' : ''; const isAttribute = endPercent >= 2 ? ' is="emby-programcell"' : '';
html += '<button' + isAttribute + ' data-action="' + clickAction + '"' + timerAttributes + ' data-channelid="' + program.ChannelId + '" data-id="' + program.Id + '" data-serverid="' + program.ServerId + '" data-startdate="' + program.StartDate + '" data-enddate="' + program.EndDate + '" data-type="' + program.Type + '" class="' + cssClass + '" style="left:' + startPercent + '%;width:' + endPercent + '%;">'; html += '<button' + isAttribute + ' data-action="' + clickAction + '"' + timerAttributes + ' data-channelid="' + program.ChannelId + '" data-id="' + program.Id + '" data-serverid="' + program.ServerId + '" data-startdate="' + program.StartDate + '" data-enddate="' + program.EndDate + '" data-type="' + program.Type + '" class="' + cssClass + '" style="left:' + startPercent + '%;width:' + endPercent + '%;">';
if (displayInnerContent) { if (displayInnerContent) {
var guideProgramNameClass = 'guideProgramName'; const guideProgramNameClass = 'guideProgramName';
html += '<div class="' + guideProgramNameClass + '">'; html += '<div class="' + guideProgramNameClass + '">';
@ -520,7 +541,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
html += '<div class="guideProgramNameText">' + program.Name; html += '<div class="guideProgramNameText">' + program.Name;
var indicatorHtml = null; let indicatorHtml = null;
if (program.IsLive && options.showLiveIndicator) { if (program.IsLive && options.showLiveIndicator) {
indicatorHtml = '<span class="liveTvProgram guideProgramIndicator">' + globalize.translate('Live') + '</span>'; indicatorHtml = '<span class="liveTvProgram guideProgramIndicator">' + globalize.translate('Live') + '</span>';
} else if (program.IsPremiere && options.showPremiereIndicator) { } else if (program.IsPremiere && options.showPremiereIndicator) {
@ -565,19 +586,19 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function renderChannelHeaders(context, channels, apiClient) { function renderChannelHeaders(context, channels, apiClient) {
var html = ''; let html = '';
for (var i = 0, length = channels.length; i < length; i++) { for (let i = 0, length = channels.length; i < length; i++) {
var channel = channels[i]; const channel = channels[i];
var hasChannelImage = channel.ImageTags.Primary; const hasChannelImage = channel.ImageTags.Primary;
var cssClass = 'guide-channelHeaderCell itemAction'; let cssClass = 'guide-channelHeaderCell itemAction';
if (layoutManager.tv) { if (layoutManager.tv) {
cssClass += ' guide-channelHeaderCell-tv'; cssClass += ' guide-channelHeaderCell-tv';
} }
var title = []; const title = [];
if (channel.ChannelNumber) { if (channel.ChannelNumber) {
title.push(channel.ChannelNumber); title.push(channel.ChannelNumber);
} }
@ -588,7 +609,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
html += '<button title="' + title.join(' ') + '" type="button" class="' + cssClass + '"' + ' data-action="link" data-isfolder="' + channel.IsFolder + '" data-id="' + channel.Id + '" data-serverid="' + channel.ServerId + '" data-type="' + channel.Type + '">'; html += '<button title="' + title.join(' ') + '" type="button" class="' + cssClass + '"' + ' data-action="link" data-isfolder="' + channel.IsFolder + '" data-id="' + channel.Id + '" data-serverid="' + channel.ServerId + '" data-type="' + channel.Type + '">';
if (hasChannelImage) { if (hasChannelImage) {
var url = apiClient.getScaledImageUrl(channel.Id, { const url = apiClient.getScaledImageUrl(channel.Id, {
maxHeight: 220, maxHeight: 220,
tag: channel.ImageTags.Primary, tag: channel.ImageTags.Primary,
type: 'Primary' type: 'Primary'
@ -608,19 +629,19 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
html += '</button>'; html += '</button>';
} }
var channelList = context.querySelector('.channelsContainer'); const channelList = context.querySelector('.channelsContainer');
channelList.innerHTML = html; channelList.innerHTML = html;
imageLoader.lazyChildren(channelList); imageLoader.lazyChildren(channelList);
} }
function renderPrograms(context, date, channels, programs, options) { function renderPrograms(context, date, channels, programs, options) {
var listInfo = { const listInfo = {
startIndex: 0 startIndex: 0
}; };
var html = []; const html = [];
for (var i = 0, length = channels.length; i < length; i++) { for (let i = 0, length = channels.length; i < length; i++) {
html.push(getChannelProgramsHtml(context, date, channels[i], programs, options, listInfo)); html.push(getChannelProgramsHtml(context, date, channels[i], programs, options, listInfo));
} }
@ -632,17 +653,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function getProgramSortOrder(program, channels) { function getProgramSortOrder(program, channels) {
var channelId = program.ChannelId; const channelId = program.ChannelId;
var channelIndex = -1; let channelIndex = -1;
for (var i = 0, length = channels.length; i < length; i++) { for (let i = 0, length = channels.length; i < length; i++) {
if (channelId === channels[i].Id) { if (channelId === channels[i].Id) {
channelIndex = i; channelIndex = i;
break; break;
} }
} }
var start = datetime.parseISO8601Date(program.StartDate, { toLocal: true }); const start = datetime.parseISO8601Date(program.StartDate, { toLocal: true });
return (channelIndex * 10000000) + (start.getTime() / 60000); return (channelIndex * 10000000) + (start.getTime() / 60000);
} }
@ -652,9 +673,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
return getProgramSortOrder(a, channels) - getProgramSortOrder(b, channels); return getProgramSortOrder(a, channels) - getProgramSortOrder(b, channels);
}); });
var activeElement = document.activeElement; const activeElement = document.activeElement;
var itemId = activeElement && activeElement.getAttribute ? activeElement.getAttribute('data-id') : null; const itemId = activeElement && activeElement.getAttribute ? activeElement.getAttribute('data-id') : null;
var channelRowId = null; let channelRowId = null;
if (activeElement) { if (activeElement) {
channelRowId = dom.parentWithClass(activeElement, 'channelPrograms'); channelRowId = dom.parentWithClass(activeElement, 'channelPrograms');
@ -663,8 +684,8 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
renderChannelHeaders(context, channels, apiClient); renderChannelHeaders(context, channels, apiClient);
var startDate = date; const startDate = date;
var endDate = new Date(startDate.getTime() + msPerDay); const endDate = new Date(startDate.getTime() + msPerDay);
context.querySelector('.timeslotHeaders').innerHTML = getTimeslotHeadersHtml(startDate, endDate); context.querySelector('.timeslotHeaders').innerHTML = getTimeslotHeadersHtml(startDate, endDate);
items = {}; items = {};
renderPrograms(context, date, channels, programs, renderOptions); renderPrograms(context, date, channels, programs, renderOptions);
@ -679,17 +700,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
function scrollProgramGridToTimeMs(context, scrollToTimeMs, startTimeOfDayMs) { function scrollProgramGridToTimeMs(context, scrollToTimeMs, startTimeOfDayMs) {
scrollToTimeMs -= startTimeOfDayMs; scrollToTimeMs -= startTimeOfDayMs;
var pct = scrollToTimeMs / msPerDay; const pct = scrollToTimeMs / msPerDay;
programGrid.scrollTop = 0; programGrid.scrollTop = 0;
var scrollPos = pct * programGrid.scrollWidth; const scrollPos = pct * programGrid.scrollWidth;
nativeScrollTo(programGrid, scrollPos, true); nativeScrollTo(programGrid, scrollPos, true);
} }
function focusProgram(context, itemId, channelRowId, focusToTimeMs, startTimeOfDayMs) { function focusProgram(context, itemId, channelRowId, focusToTimeMs, startTimeOfDayMs) {
var focusElem; let focusElem;
if (itemId) { if (itemId) {
focusElem = context.querySelector('[data-id="' + itemId + '"]'); focusElem = context.querySelector('[data-id="' + itemId + '"]');
} }
@ -697,7 +718,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
if (focusElem) { if (focusElem) {
focusManager.focus(focusElem); focusManager.focus(focusElem);
} else { } else {
var autoFocusParent; let autoFocusParent;
if (channelRowId) { if (channelRowId) {
autoFocusParent = context.querySelector('[data-channelid="' + channelRowId + '"]'); autoFocusParent = context.querySelector('[data-channelid="' + channelRowId + '"]');
@ -709,14 +730,14 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
focusToTimeMs -= startTimeOfDayMs; focusToTimeMs -= startTimeOfDayMs;
var pct = (focusToTimeMs / msPerDay) * 100; const pct = (focusToTimeMs / msPerDay) * 100;
var programCell = autoFocusParent.querySelector('.programCell'); let programCell = autoFocusParent.querySelector('.programCell');
while (programCell) { while (programCell) {
var left = (programCell.style.left || '').replace('%', ''); let left = (programCell.style.left || '').replace('%', '');
left = left ? parseFloat(left) : 0; left = left ? parseFloat(left) : 0;
var width = (programCell.style.width || '').replace('%', ''); let width = (programCell.style.width || '').replace('%', '');
width = width ? parseFloat(width) : 0; width = width ? parseFloat(width) : 0;
if (left >= pct || (left + width) >= pct) { if (left >= pct || (left + width) >= pct) {
@ -749,14 +770,14 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
} }
var lastGridScroll = 0; let lastGridScroll = 0;
var lastHeaderScroll = 0; let lastHeaderScroll = 0;
var scrollXPct = 0; let scrollXPct = 0;
function onProgramGridScroll(context, elem, timeslotHeaders) { function onProgramGridScroll(context, elem, timeslotHeaders) {
if ((new Date().getTime() - lastHeaderScroll) >= 1000) { if ((new Date().getTime() - lastHeaderScroll) >= 1000) {
lastGridScroll = new Date().getTime(); lastGridScroll = new Date().getTime();
var scrollLeft = elem.scrollLeft; const scrollLeft = elem.scrollLeft;
scrollXPct = (scrollLeft * 100) / elem.scrollWidth; scrollXPct = (scrollLeft * 100) / elem.scrollWidth;
nativeScrollTo(timeslotHeaders, scrollLeft, true); nativeScrollTo(timeslotHeaders, scrollLeft, true);
} }
@ -772,17 +793,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function changeDate(page, date, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) { function changeDate(page, date, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
var newStartDate = normalizeDateToTimeslot(date); const newStartDate = normalizeDateToTimeslot(date);
currentDate = newStartDate; currentDate = newStartDate;
reloadGuide(page, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender); reloadGuide(page, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender);
} }
function getDateTabText(date, isActive, tabIndex) { function getDateTabText(date, isActive, tabIndex) {
var cssClass = isActive ? 'emby-tab-button guide-date-tab-button emby-tab-button-active' : 'emby-tab-button guide-date-tab-button'; const cssClass = isActive ? 'emby-tab-button guide-date-tab-button emby-tab-button-active' : 'emby-tab-button guide-date-tab-button';
var html = '<button is="emby-button" class="' + cssClass + '" data-index="' + tabIndex + '" data-date="' + date.getTime() + '">'; let html = '<button is="emby-button" class="' + cssClass + '" data-index="' + tabIndex + '" data-date="' + date.getTime() + '">';
var tabText = datetime.toLocaleDateString(date, { weekday: 'short' }); let tabText = datetime.toLocaleDateString(date, { weekday: 'short' });
tabText += '<br/>'; tabText += '<br/>';
tabText += date.getDate(); tabText += date.getDate();
@ -793,12 +814,12 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function setDateRange(page, guideInfo) { function setDateRange(page, guideInfo) {
var today = new Date(); const today = new Date();
var nowHours = today.getHours(); const nowHours = today.getHours();
today.setHours(nowHours, 0, 0, 0); today.setHours(nowHours, 0, 0, 0);
var start = datetime.parseISO8601Date(guideInfo.StartDate, { toLocal: true }); let start = datetime.parseISO8601Date(guideInfo.StartDate, { toLocal: true });
var end = datetime.parseISO8601Date(guideInfo.EndDate, { toLocal: true }); const end = datetime.parseISO8601Date(guideInfo.EndDate, { toLocal: true });
start.setHours(nowHours, 0, 0, 0); start.setHours(nowHours, 0, 0, 0);
end.setHours(0, 0, 0, 0); end.setHours(0, 0, 0, 0);
@ -809,11 +830,11 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
start = new Date(Math.max(today, start)); start = new Date(Math.max(today, start));
var dateTabsHtml = ''; let dateTabsHtml = '';
var tabIndex = 0; let tabIndex = 0;
// TODO: Use date-fns // TODO: Use date-fns
var date = new Date(); const date = new Date();
if (currentDate) { if (currentDate) {
date.setTime(currentDate.getTime()); date.setTime(currentDate.getTime());
@ -821,11 +842,11 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
date.setHours(nowHours, 0, 0, 0); date.setHours(nowHours, 0, 0, 0);
var startTimeOfDayMs = (start.getHours() * 60 * 60 * 1000); let startTimeOfDayMs = (start.getHours() * 60 * 60 * 1000);
startTimeOfDayMs += start.getMinutes() * 60 * 1000; startTimeOfDayMs += start.getMinutes() * 60 * 1000;
while (start <= end) { while (start <= end) {
var isActive = date.getDate() === start.getDate() && date.getMonth() === start.getMonth() && date.getFullYear() === start.getFullYear(); const isActive = date.getDate() === start.getDate() && date.getMonth() === start.getMonth() && date.getFullYear() === start.getFullYear();
dateTabsHtml += getDateTabText(start, isActive, tabIndex); dateTabsHtml += getDateTabText(start, isActive, tabIndex);
@ -837,23 +858,23 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
page.querySelector('.emby-tabs-slider').innerHTML = dateTabsHtml; page.querySelector('.emby-tabs-slider').innerHTML = dateTabsHtml;
page.querySelector('.guideDateTabs').refresh(); page.querySelector('.guideDateTabs').refresh();
var newDate = new Date(); const newDate = new Date();
var newDateHours = newDate.getHours(); const newDateHours = newDate.getHours();
var scrollToTimeMs = newDateHours * 60 * 60 * 1000; let scrollToTimeMs = newDateHours * 60 * 60 * 1000;
var minutes = newDate.getMinutes(); const minutes = newDate.getMinutes();
if (minutes >= 30) { if (minutes >= 30) {
scrollToTimeMs += 30 * 60 * 1000; scrollToTimeMs += 30 * 60 * 1000;
} }
var focusToTimeMs = ((newDateHours * 60) + minutes) * 60 * 1000; const focusToTimeMs = ((newDateHours * 60) + minutes) * 60 * 1000;
changeDate(page, date, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, layoutManager.tv); changeDate(page, date, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, layoutManager.tv);
} }
function reloadPage(page) { function reloadPage(page) {
showLoading(); showLoading();
var apiClient = connectionManager.getApiClient(options.serverId); const apiClient = connectionManager.getApiClient(options.serverId);
apiClient.getLiveTvGuideInfo().then(function (guideInfo) { apiClient.getLiveTvGuideInfo().then(function (guideInfo) {
setDateRange(page, guideInfo); setDateRange(page, guideInfo);
@ -861,18 +882,18 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function getChannelProgramsFocusableElements(container) { function getChannelProgramsFocusableElements(container) {
var elements = container.querySelectorAll('.programCell'); const elements = container.querySelectorAll('.programCell');
var list = []; const list = [];
// add 1 to avoid programs that are out of view to the left // add 1 to avoid programs that are out of view to the left
var currentScrollXPct = scrollXPct + 1; const currentScrollXPct = scrollXPct + 1;
for (var i = 0, length = elements.length; i < length; i++) { for (let i = 0, length = elements.length; i < length; i++) {
var elem = elements[i]; const elem = elements[i];
var left = (elem.style.left || '').replace('%', ''); let left = (elem.style.left || '').replace('%', '');
left = left ? parseFloat(left) : 0; left = left ? parseFloat(left) : 0;
var width = (elem.style.width || '').replace('%', ''); let width = (elem.style.width || '').replace('%', '');
width = width ? parseFloat(width) : 0; width = width ? parseFloat(width) : 0;
if ((left + width) >= currentScrollXPct) { if ((left + width) >= currentScrollXPct) {
@ -884,12 +905,12 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function onInputCommand(e) { function onInputCommand(e) {
var target = e.target; const target = e.target;
var programCell = dom.parentWithClass(target, 'programCell'); const programCell = dom.parentWithClass(target, 'programCell');
var container; let container;
var channelPrograms; let channelPrograms;
var focusableElements; let focusableElements;
var newRow; let newRow;
switch (e.detail.command) { switch (e.detail.command) {
case 'up': case 'up':
@ -973,14 +994,14 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function onScrollerFocus(e) { function onScrollerFocus(e) {
var target = e.target; const target = e.target;
var programCell = dom.parentWithClass(target, 'programCell'); const programCell = dom.parentWithClass(target, 'programCell');
if (programCell) { if (programCell) {
var focused = target; const focused = target;
var id = focused.getAttribute('data-id'); const id = focused.getAttribute('data-id');
var item = items[id]; const item = items[id];
if (item) { if (item) {
events.trigger(self, 'focus', [ events.trigger(self, 'focus', [
@ -999,9 +1020,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
scrollHelper.toCenter(programGrid, programCell, true, true); scrollHelper.toCenter(programGrid, programCell, true, true);
} }
} else if (lastFocusDirection === 'up' || lastFocusDirection === 'down') { } else if (lastFocusDirection === 'up' || lastFocusDirection === 'down') {
var verticalScroller = dom.parentWithClass(target, 'guideVerticalScroller'); const verticalScroller = dom.parentWithClass(target, 'guideVerticalScroller');
if (verticalScroller) { if (verticalScroller) {
var focusedElement = programCell || dom.parentWithTag(target, 'BUTTON'); const focusedElement = programCell || dom.parentWithTag(target, 'BUTTON');
verticalScroller.toCenter(focusedElement, true); verticalScroller.toCenter(focusedElement, true);
} }
} }
@ -1009,7 +1030,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
function setScrollEvents(view, enabled) { function setScrollEvents(view, enabled) {
if (layoutManager.tv) { if (layoutManager.tv) {
var guideVerticalScroller = view.querySelector('.guideVerticalScroller'); const guideVerticalScroller = view.querySelector('.guideVerticalScroller');
if (enabled) { if (enabled) {
inputManager.on(guideVerticalScroller, onInputCommand); inputManager.on(guideVerticalScroller, onInputCommand);
@ -1020,16 +1041,16 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function onTimerCreated(e, apiClient, data) { function onTimerCreated(e, apiClient, data) {
var programId = data.ProgramId; const programId = data.ProgramId;
// This could be null, not supported by all tv providers // This could be null, not supported by all tv providers
var newTimerId = data.Id; const newTimerId = data.Id;
// find guide cells by program id, ensure timer icon // find guide cells by program id, ensure timer icon
var cells = options.element.querySelectorAll('.programCell[data-id="' + programId + '"]'); const cells = options.element.querySelectorAll('.programCell[data-id="' + programId + '"]');
for (var i = 0, length = cells.length; i < length; i++) { for (let i = 0, length = cells.length; i < length; i++) {
var cell = cells[i]; const cell = cells[i];
var icon = cell.querySelector('.timerIcon'); const icon = cell.querySelector('.timerIcon');
if (!icon) { if (!icon) {
cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<span class="timerIcon material-icons programIcon fiber_manual_record"></span>'); cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<span class="timerIcon material-icons programIcon fiber_manual_record"></span>');
} }
@ -1044,12 +1065,12 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function onTimerCancelled(e, apiClient, data) { function onTimerCancelled(e, apiClient, data) {
var id = data.Id; const id = data.Id;
// find guide cells by timer id, remove timer icon // find guide cells by timer id, remove timer icon
var cells = options.element.querySelectorAll('.programCell[data-timerid="' + id + '"]'); const cells = options.element.querySelectorAll('.programCell[data-timerid="' + id + '"]');
for (var i = 0, length = cells.length; i < length; i++) { for (let i = 0, length = cells.length; i < length; i++) {
var cell = cells[i]; const cell = cells[i];
var icon = cell.querySelector('.timerIcon'); const icon = cell.querySelector('.timerIcon');
if (icon) { if (icon) {
icon.parentNode.removeChild(icon); icon.parentNode.removeChild(icon);
} }
@ -1058,12 +1079,12 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function onSeriesTimerCancelled(e, apiClient, data) { function onSeriesTimerCancelled(e, apiClient, data) {
var id = data.Id; const id = data.Id;
// find guide cells by timer id, remove timer icon // find guide cells by timer id, remove timer icon
var cells = options.element.querySelectorAll('.programCell[data-seriestimerid="' + id + '"]'); const cells = options.element.querySelectorAll('.programCell[data-seriestimerid="' + id + '"]');
for (var i = 0, length = cells.length; i < length; i++) { for (let i = 0, length = cells.length; i < length; i++) {
var cell = cells[i]; const cell = cells[i];
var icon = cell.querySelector('.seriesTimerIcon'); const icon = cell.querySelector('.seriesTimerIcon');
if (icon) { if (icon) {
icon.parentNode.removeChild(icon); icon.parentNode.removeChild(icon);
} }
@ -1071,15 +1092,15 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
} }
require(['text!./tvguide.template.html'], function (template) { import('text!./tvguide.template.html').then(({default: template}) => {
var context = options.element; const context = options.element;
context.classList.add('tvguide'); context.classList.add('tvguide');
context.innerHTML = globalize.translateHtml(template, 'core'); context.innerHTML = globalize.translateHtml(template, 'core');
programGrid = context.querySelector('.programGrid'); programGrid = context.querySelector('.programGrid');
var timeslotHeaders = context.querySelector('.timeslotHeaders'); const timeslotHeaders = context.querySelector('.timeslotHeaders');
if (layoutManager.tv) { if (layoutManager.tv) {
dom.addEventListener(context.querySelector('.guideVerticalScroller'), 'focus', onScrollerFocus, { dom.addEventListener(context.querySelector('.guideVerticalScroller'), 'focus', onScrollerFocus, {
@ -1128,17 +1149,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
}); });
context.querySelector('.guideDateTabs').addEventListener('tabchange', function (e) { context.querySelector('.guideDateTabs').addEventListener('tabchange', function (e) {
var allTabButtons = e.target.querySelectorAll('.guide-date-tab-button'); const allTabButtons = e.target.querySelectorAll('.guide-date-tab-button');
var tabButton = allTabButtons[parseInt(e.detail.selectedTabIndex)]; const tabButton = allTabButtons[parseInt(e.detail.selectedTabIndex)];
if (tabButton) { if (tabButton) {
var previousButton = e.detail.previousIndex == null ? null : allTabButtons[parseInt(e.detail.previousIndex)]; const previousButton = e.detail.previousIndex == null ? null : allTabButtons[parseInt(e.detail.previousIndex)];
var date = new Date(); const date = new Date();
date.setTime(parseInt(tabButton.getAttribute('data-date'))); date.setTime(parseInt(tabButton.getAttribute('data-date')));
var scrollWidth = programGrid.scrollWidth; const scrollWidth = programGrid.scrollWidth;
var scrollToTimeMs; let scrollToTimeMs;
if (scrollWidth) { if (scrollWidth) {
scrollToTimeMs = (programGrid.scrollLeft / scrollWidth) * msPerDay; scrollToTimeMs = (programGrid.scrollLeft / scrollWidth) * msPerDay;
} else { } else {
@ -1146,14 +1167,14 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
if (previousButton) { if (previousButton) {
var previousDate = new Date(); const previousDate = new Date();
previousDate.setTime(parseInt(previousButton.getAttribute('data-date'))); previousDate.setTime(parseInt(previousButton.getAttribute('data-date')));
scrollToTimeMs += (previousDate.getHours() * 60 * 60 * 1000); scrollToTimeMs += (previousDate.getHours() * 60 * 60 * 1000);
scrollToTimeMs += (previousDate.getMinutes() * 60 * 1000); scrollToTimeMs += (previousDate.getMinutes() * 60 * 1000);
} }
var startTimeOfDayMs = (date.getHours() * 60 * 60 * 1000); let startTimeOfDayMs = (date.getHours() * 60 * 60 * 1000);
startTimeOfDayMs += (date.getMinutes() * 60 * 1000); startTimeOfDayMs += (date.getMinutes() * 60 * 1000);
changeDate(context, date, scrollToTimeMs, scrollToTimeMs, startTimeOfDayMs, false); changeDate(context, date, scrollToTimeMs, scrollToTimeMs, startTimeOfDayMs, false);
@ -1174,5 +1195,4 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
}); });
} }
return Guide; export default Guide;
});

2
src/controllers/livetv/livetvguide.js
View file

@ -7,7 +7,7 @@ define(['tvguide'], function (tvguide) {
self.renderTab = function () { self.renderTab = function () {
if (!guideInstance) { if (!guideInstance) {
guideInstance = new tvguide({ guideInstance = new tvguide.default({
element: tabContent, element: tabContent,
serverId: ApiClient.serverId() serverId: ApiClient.serverId()
}); });