From d8f2cc1245a8a7e6624ff22434bee640a5a32e9d Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Wed, 25 Nov 2020 00:17:24 -0500 Subject: [PATCH 1/5] Use static imports for html templates --- .../accessSchedule/accessSchedule.js | 53 +++-- src/components/dialog/dialog.js | 2 +- .../displaySettings/displaySettings.js | 4 +- src/components/filterdialog/filterdialog.js | 41 ++-- src/components/filtermenu/filtermenu.js | 112 +++++------ src/components/guide/guide-settings.js | 89 +++++---- src/components/guide/guide.js | 182 +++++++++--------- .../homeScreenSettings/homeScreenSettings.js | 36 ++-- .../imageDownloader/imageDownloader.js | 53 +++-- src/components/imageUploader/imageUploader.js | 67 ++++--- src/components/imageeditor/imageeditor.js | 79 ++++---- src/components/itemMediaInfo/itemMediaInfo.js | 7 +- .../itemidentifier/itemidentifier.js | 177 +++++++++-------- .../libraryoptionseditor.js | 3 +- .../mediaLibraryCreator.js | 41 ++-- .../mediaLibraryEditor/mediaLibraryEditor.js | 39 ++-- .../metadataEditor/metadataEditor.js | 93 +++++---- src/components/metadataEditor/personEditor.js | 137 +++++++------ .../playbackSettings/playbackSettings.js | 21 +- src/components/prompt/prompt.js | 17 +- .../recordingcreator/recordingcreator.js | 107 +++++----- .../recordingcreator/recordingeditor.js | 107 +++++----- .../recordingcreator/recordingfields.js | 19 +- .../recordingcreator/seriesrecordingeditor.js | 159 ++++++++------- src/components/search/searchfields.js | 31 ++- src/components/search/searchresults.js | 20 +- src/components/sortmenu/sortmenu.js | 103 +++++----- .../subtitleeditor/subtitleeditor.js | 5 +- .../subtitlesettings/subtitlesettings.js | 97 +++++----- src/components/viewSettings/viewSettings.js | 119 ++++++------ .../emby-progressring/emby-progressring.js | 31 ++- 31 files changed, 1010 insertions(+), 1041 deletions(-) diff --git a/src/components/accessSchedule/accessSchedule.js b/src/components/accessSchedule/accessSchedule.js index 9e0e3d5cf9..15053060d5 100644 --- a/src/components/accessSchedule/accessSchedule.js +++ b/src/components/accessSchedule/accessSchedule.js @@ -12,6 +12,7 @@ import globalize from '../../scripts/globalize'; import '../../elements/emby-select/emby-select'; import '../../elements/emby-button/paper-icon-button-light'; import '../formdialog.css'; +import template from './accessSchedule.template.html'; function getDisplayTime(hours) { let minutes = 0; @@ -60,33 +61,31 @@ import '../formdialog.css'; export function show(options) { return new Promise((resolve, reject) => { - import('./accessSchedule.template.html').then(({default: template}) => { - const dlg = dialogHelper.createDialog({ - removeOnClose: true, - size: 'small' - }); - dlg.classList.add('formDialog'); - let html = ''; - html += globalize.translateHtml(template); - dlg.innerHTML = html; - populateHours(dlg); - loadSchedule(dlg, options.schedule); - dialogHelper.open(dlg); - dlg.addEventListener('close', () => { - if (dlg.submitted) { - resolve(options.schedule); - } else { - reject(); - } - }); - dlg.querySelector('.btnCancel').addEventListener('click', () => { - dialogHelper.close(dlg); - }); - dlg.querySelector('form').addEventListener('submit', event => { - submitSchedule(dlg, options); - event.preventDefault(); - return false; - }); + const dlg = dialogHelper.createDialog({ + removeOnClose: true, + size: 'small' + }); + dlg.classList.add('formDialog'); + let html = ''; + html += globalize.translateHtml(template); + dlg.innerHTML = html; + populateHours(dlg); + loadSchedule(dlg, options.schedule); + dialogHelper.open(dlg); + dlg.addEventListener('close', () => { + if (dlg.submitted) { + resolve(options.schedule); + } else { + reject(); + } + }); + dlg.querySelector('.btnCancel').addEventListener('click', () => { + dialogHelper.close(dlg); + }); + dlg.querySelector('form').addEventListener('submit', event => { + submitSchedule(dlg, options); + event.preventDefault(); + return false; }); }); } diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js index ee97fff8a1..ce0a8487bd 100644 --- a/src/components/dialog/dialog.js +++ b/src/components/dialog/dialog.js @@ -9,6 +9,7 @@ import '../../elements/emby-button/paper-icon-button-light'; import '../../elements/emby-input/emby-input'; import '../formdialog.css'; import '../../assets/css/flexstyles.scss'; +import template from './dialog.template.html'; /* eslint-disable indent */ @@ -128,7 +129,6 @@ import '../../assets/css/flexstyles.scss'; options = text; } - const { default: template } = await import('./dialog.template.html'); return new Promise((resolve, reject) => { showDialog(options, template).then(resolve, reject); }); diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js index 9d7292547d..289fa40d50 100644 --- a/src/components/displaySettings/displaySettings.js +++ b/src/components/displaySettings/displaySettings.js @@ -13,6 +13,7 @@ import '../../elements/emby-checkbox/emby-checkbox'; import '../../elements/emby-button/emby-button'; import ServerConnections from '../ServerConnections'; import toast from '../toast/toast'; +import template from './displaySettings.template.html'; /* eslint-disable indent */ @@ -197,8 +198,7 @@ import toast from '../toast/toast'; return false; } - async function embed(options, self) { - const { default: template } = await import('./displaySettings.template.html'); + function embed(options, self) { options.element.innerHTML = globalize.translateHtml(template, 'core'); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); if (options.enableSaveButton) { diff --git a/src/components/filterdialog/filterdialog.js b/src/components/filterdialog/filterdialog.js index c8b81066d2..77026e72d7 100644 --- a/src/components/filterdialog/filterdialog.js +++ b/src/components/filterdialog/filterdialog.js @@ -6,6 +6,7 @@ import '../../elements/emby-checkbox/emby-checkbox'; import '../../elements/emby-collapse/emby-collapse'; import './style.css'; import ServerConnections from '../ServerConnections'; +import template from './filterdialog.template.html'; /* eslint-disable indent */ function renderOptions(context, selector, cssClass, items, isCheckedFn) { @@ -402,28 +403,26 @@ import ServerConnections from '../ServerConnections'; } show() { - return import('./filterdialog.template.html').then(({default: template}) => { - return new Promise((resolve) => { - const dlg = dialogHelper.createDialog({ - removeOnClose: true, - modal: false - }); - dlg.classList.add('ui-body-a'); - dlg.classList.add('background-theme-a'); - dlg.classList.add('formDialog'); - dlg.classList.add('filterDialog'); - dlg.innerHTML = globalize.translateHtml(template); - setVisibility(dlg, this.options); - dialogHelper.open(dlg); - dlg.addEventListener('close', resolve); - updateFilterControls(dlg, this.options); - this.bindEvents(dlg); - if (enableDynamicFilters(this.options.mode)) { - dlg.classList.add('dynamicFilterDialog'); - const apiClient = ServerConnections.getApiClient(this.options.serverId); - loadDynamicFilters(dlg, apiClient, apiClient.getCurrentUserId(), this.options.query); - } + return new Promise((resolve) => { + const dlg = dialogHelper.createDialog({ + removeOnClose: true, + modal: false }); + dlg.classList.add('ui-body-a'); + dlg.classList.add('background-theme-a'); + dlg.classList.add('formDialog'); + dlg.classList.add('filterDialog'); + dlg.innerHTML = globalize.translateHtml(template); + setVisibility(dlg, this.options); + dialogHelper.open(dlg); + dlg.addEventListener('close', resolve); + updateFilterControls(dlg, this.options); + this.bindEvents(dlg); + if (enableDynamicFilters(this.options.mode)) { + dlg.classList.add('dynamicFilterDialog'); + const apiClient = ServerConnections.getApiClient(this.options.serverId); + loadDynamicFilters(dlg, apiClient, apiClient.getCurrentUserId(), this.options.query); + } }); } } diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js index f4f6ef2d9b..3df956f0af 100644 --- a/src/components/filtermenu/filtermenu.js +++ b/src/components/filtermenu/filtermenu.js @@ -14,6 +14,8 @@ import 'material-design-icons-iconfont'; import '../formdialog.css'; import '../../assets/css/flexstyles.scss'; import ServerConnections from '../ServerConnections'; +import template from './filtermenu.template.html'; + function onSubmit(e) { e.preventDefault(); @@ -210,75 +212,73 @@ function loadDynamicFilters(context, options) { class FilterMenu { show(options) { return new Promise( (resolve, reject) => { - import('./filtermenu.template.html').then(({ default: template }) => { - const dialogOptions = { - removeOnClose: true, - scrollY: false - }; - if (layoutManager.tv) { - dialogOptions.size = 'fullscreen'; + const dialogOptions = { + removeOnClose: true, + scrollY: false + }; + if (layoutManager.tv) { + dialogOptions.size = 'fullscreen'; + } else { + dialogOptions.size = 'small'; + } + + const dlg = dialogHelper.createDialog(dialogOptions); + + dlg.classList.add('formDialog'); + + let html = ''; + + html += '
'; + html += ''; + html += '

${Filters}

'; + + html += '
'; + + html += template; + + dlg.innerHTML = globalize.translateHtml(html, 'core'); + + const settingElements = dlg.querySelectorAll('.viewSetting'); + for (let i = 0, length = settingElements.length; i < length; i++) { + if (options.visibleSettings.indexOf(settingElements[i].getAttribute('data-settingname')) === -1) { + settingElements[i].classList.add('hide'); } else { - dialogOptions.size = 'small'; + settingElements[i].classList.remove('hide'); } + } - const dlg = dialogHelper.createDialog(dialogOptions); + initEditor(dlg, options.settings); + loadDynamicFilters(dlg, options); - dlg.classList.add('formDialog'); + bindCheckboxInput(dlg, true); + dlg.querySelector('.btnCancel').addEventListener('click', function () { + dialogHelper.close(dlg); + }); - let html = ''; + if (layoutManager.tv) { + centerFocus(dlg.querySelector('.formDialogContent'), false, true); + } - html += '
'; - html += ''; - html += '

${Filters}

'; + let submitted; - html += '
'; + dlg.querySelector('form').addEventListener('change', function () { + submitted = true; + }, true); - html += template; - - dlg.innerHTML = globalize.translateHtml(html, 'core'); - - const settingElements = dlg.querySelectorAll('.viewSetting'); - for (let i = 0, length = settingElements.length; i < length; i++) { - if (options.visibleSettings.indexOf(settingElements[i].getAttribute('data-settingname')) === -1) { - settingElements[i].classList.add('hide'); - } else { - settingElements[i].classList.remove('hide'); - } - } - - initEditor(dlg, options.settings); - loadDynamicFilters(dlg, options); - - bindCheckboxInput(dlg, true); - dlg.querySelector('.btnCancel').addEventListener('click', function () { - dialogHelper.close(dlg); - }); + dialogHelper.open(dlg).then( function() { + bindCheckboxInput(dlg, false); if (layoutManager.tv) { - centerFocus(dlg.querySelector('.formDialogContent'), false, true); + centerFocus(dlg.querySelector('.formDialogContent'), false, false); } - let submitted; - - dlg.querySelector('form').addEventListener('change', function () { - submitted = true; - }, true); - - dialogHelper.open(dlg).then( function() { - bindCheckboxInput(dlg, false); - - if (layoutManager.tv) { - centerFocus(dlg.querySelector('.formDialogContent'), false, false); - } - - if (submitted) { - //if (!options.onChange) { - saveValues(dlg, options.settings, options.settingsKey); - return resolve(); - //} - } + if (submitted) { + //if (!options.onChange) { + saveValues(dlg, options.settings, options.settingsKey); return resolve(); - }); + //} + } + return resolve(); }); }); } diff --git a/src/components/guide/guide-settings.js b/src/components/guide/guide-settings.js index 8132ac3bb3..03e3c48c3a 100644 --- a/src/components/guide/guide-settings.js +++ b/src/components/guide/guide-settings.js @@ -7,6 +7,7 @@ import '../../elements/emby-checkbox/emby-checkbox'; import '../../elements/emby-radio/emby-radio'; import '../formdialog.css'; import 'material-design-icons-iconfont'; +import template from './guide-settings.template.html'; function saveCategories(context, options) { const categories = []; @@ -88,59 +89,57 @@ function showEditor(options) { return new Promise(function (resolve, reject) { let settingsChanged = false; - import('./guide-settings.template.html').then(({ default: template }) => { - const dialogOptions = { - removeOnClose: true, - scrollY: false - }; + const dialogOptions = { + removeOnClose: true, + scrollY: false + }; - if (layoutManager.tv) { - dialogOptions.size = 'fullscreen'; - } else { - dialogOptions.size = 'small'; - } + if (layoutManager.tv) { + dialogOptions.size = 'fullscreen'; + } else { + dialogOptions.size = 'small'; + } - const dlg = dialogHelper.createDialog(dialogOptions); + const dlg = dialogHelper.createDialog(dialogOptions); - dlg.classList.add('formDialog'); + dlg.classList.add('formDialog'); - let html = ''; + let html = ''; - html += globalize.translateHtml(template, 'core'); + html += globalize.translateHtml(template, 'core'); - dlg.innerHTML = html; + dlg.innerHTML = html; - dlg.addEventListener('change', function () { - settingsChanged = true; - }); - - dlg.addEventListener('close', function () { - if (layoutManager.tv) { - scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false); - } - - save(dlg); - saveCategories(dlg, options); - - if (settingsChanged) { - resolve(); - } else { - reject(); - } - }); - - dlg.querySelector('.btnCancel').addEventListener('click', function () { - dialogHelper.close(dlg); - }); - - if (layoutManager.tv) { - scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false); - } - - load(dlg); - loadCategories(dlg, options); - dialogHelper.open(dlg); + dlg.addEventListener('change', function () { + settingsChanged = true; }); + + dlg.addEventListener('close', function () { + if (layoutManager.tv) { + scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false); + } + + save(dlg); + saveCategories(dlg, options); + + if (settingsChanged) { + resolve(); + } else { + reject(); + } + }); + + dlg.querySelector('.btnCancel').addEventListener('click', function () { + dialogHelper.close(dlg); + }); + + if (layoutManager.tv) { + scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false); + } + + load(dlg); + loadCategories(dlg, options); + dialogHelper.open(dlg); }); } diff --git a/src/components/guide/guide.js b/src/components/guide/guide.js index 7ae0b8409f..9bb13e4f26 100644 --- a/src/components/guide/guide.js +++ b/src/components/guide/guide.js @@ -25,6 +25,8 @@ import '../../elements/emby-scroller/emby-scroller'; import '../../assets/css/flexstyles.scss'; import 'webcomponents.js/webcomponents-lite'; import ServerConnections from '../ServerConnections'; +import template from './tvguide.template.html'; + function showViewSettings(instance) { import('./guide-settings').then(({default: guideSettingsDialog}) => { @@ -1092,107 +1094,105 @@ function Guide(options) { } } - import('./tvguide.template.html').then(({default: template}) => { - const 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'); - const timeslotHeaders = context.querySelector('.timeslotHeaders'); + programGrid = context.querySelector('.programGrid'); + const timeslotHeaders = context.querySelector('.timeslotHeaders'); - if (layoutManager.tv) { - dom.addEventListener(context.querySelector('.guideVerticalScroller'), 'focus', onScrollerFocus, { - capture: true, - passive: true - }); - } else if (layoutManager.desktop) { - timeslotHeaders.classList.add('timeslotHeaders-desktop'); - } - - if (browser.iOS || browser.osx) { - context.querySelector('.channelsContainer').classList.add('noRubberBanding'); - - programGrid.classList.add('noRubberBanding'); - } - - dom.addEventListener(programGrid, 'scroll', function (e) { - onProgramGridScroll(context, this, timeslotHeaders); - }, { + if (layoutManager.tv) { + dom.addEventListener(context.querySelector('.guideVerticalScroller'), 'focus', onScrollerFocus, { + capture: true, passive: true }); + } else if (layoutManager.desktop) { + timeslotHeaders.classList.add('timeslotHeaders-desktop'); + } - dom.addEventListener(timeslotHeaders, 'scroll', function () { - onTimeslotHeadersScroll(context, this); - }, { - passive: true - }); + if (browser.iOS || browser.osx) { + context.querySelector('.channelsContainer').classList.add('noRubberBanding'); - programGrid.addEventListener('click', onProgramGridClick); + programGrid.classList.add('noRubberBanding'); + } - context.querySelector('.btnNextPage').addEventListener('click', function () { - currentStartIndex += currentChannelLimit; - reloadPage(context); - restartAutoRefresh(); - }); - - context.querySelector('.btnPreviousPage').addEventListener('click', function () { - currentStartIndex = Math.max(currentStartIndex - currentChannelLimit, 0); - reloadPage(context); - restartAutoRefresh(); - }); - - context.querySelector('.btnGuideViewSettings').addEventListener('click', function () { - showViewSettings(self); - restartAutoRefresh(); - }); - - context.querySelector('.guideDateTabs').addEventListener('tabchange', function (e) { - const allTabButtons = e.target.querySelectorAll('.guide-date-tab-button'); - - const tabButton = allTabButtons[parseInt(e.detail.selectedTabIndex)]; - if (tabButton) { - const previousButton = e.detail.previousIndex == null ? null : allTabButtons[parseInt(e.detail.previousIndex)]; - - const date = new Date(); - date.setTime(parseInt(tabButton.getAttribute('data-date'))); - - const scrollWidth = programGrid.scrollWidth; - let scrollToTimeMs; - if (scrollWidth) { - scrollToTimeMs = (programGrid.scrollLeft / scrollWidth) * msPerDay; - } else { - scrollToTimeMs = 0; - } - - if (previousButton) { - const previousDate = new Date(); - previousDate.setTime(parseInt(previousButton.getAttribute('data-date'))); - - scrollToTimeMs += (previousDate.getHours() * 60 * 60 * 1000); - scrollToTimeMs += (previousDate.getMinutes() * 60 * 1000); - } - - let startTimeOfDayMs = (date.getHours() * 60 * 60 * 1000); - startTimeOfDayMs += (date.getMinutes() * 60 * 1000); - - changeDate(context, date, scrollToTimeMs, scrollToTimeMs, startTimeOfDayMs, false); - } - }); - - setScrollEvents(context, true); - itemShortcuts.on(context); - - Events.trigger(self, 'load'); - - Events.on(serverNotifications, 'TimerCreated', onTimerCreated); - Events.on(serverNotifications, 'SeriesTimerCreated', onSeriesTimerCreated); - Events.on(serverNotifications, 'TimerCancelled', onTimerCancelled); - Events.on(serverNotifications, 'SeriesTimerCancelled', onSeriesTimerCancelled); - - self.refresh(); + dom.addEventListener(programGrid, 'scroll', function (e) { + onProgramGridScroll(context, this, timeslotHeaders); + }, { + passive: true }); + + dom.addEventListener(timeslotHeaders, 'scroll', function () { + onTimeslotHeadersScroll(context, this); + }, { + passive: true + }); + + programGrid.addEventListener('click', onProgramGridClick); + + context.querySelector('.btnNextPage').addEventListener('click', function () { + currentStartIndex += currentChannelLimit; + reloadPage(context); + restartAutoRefresh(); + }); + + context.querySelector('.btnPreviousPage').addEventListener('click', function () { + currentStartIndex = Math.max(currentStartIndex - currentChannelLimit, 0); + reloadPage(context); + restartAutoRefresh(); + }); + + context.querySelector('.btnGuideViewSettings').addEventListener('click', function () { + showViewSettings(self); + restartAutoRefresh(); + }); + + context.querySelector('.guideDateTabs').addEventListener('tabchange', function (e) { + const allTabButtons = e.target.querySelectorAll('.guide-date-tab-button'); + + const tabButton = allTabButtons[parseInt(e.detail.selectedTabIndex)]; + if (tabButton) { + const previousButton = e.detail.previousIndex == null ? null : allTabButtons[parseInt(e.detail.previousIndex)]; + + const date = new Date(); + date.setTime(parseInt(tabButton.getAttribute('data-date'))); + + const scrollWidth = programGrid.scrollWidth; + let scrollToTimeMs; + if (scrollWidth) { + scrollToTimeMs = (programGrid.scrollLeft / scrollWidth) * msPerDay; + } else { + scrollToTimeMs = 0; + } + + if (previousButton) { + const previousDate = new Date(); + previousDate.setTime(parseInt(previousButton.getAttribute('data-date'))); + + scrollToTimeMs += (previousDate.getHours() * 60 * 60 * 1000); + scrollToTimeMs += (previousDate.getMinutes() * 60 * 1000); + } + + let startTimeOfDayMs = (date.getHours() * 60 * 60 * 1000); + startTimeOfDayMs += (date.getMinutes() * 60 * 1000); + + changeDate(context, date, scrollToTimeMs, scrollToTimeMs, startTimeOfDayMs, false); + } + }); + + setScrollEvents(context, true); + itemShortcuts.on(context); + + Events.trigger(self, 'load'); + + Events.on(serverNotifications, 'TimerCreated', onTimerCreated); + Events.on(serverNotifications, 'SeriesTimerCreated', onSeriesTimerCreated); + Events.on(serverNotifications, 'TimerCancelled', onTimerCancelled); + Events.on(serverNotifications, 'SeriesTimerCancelled', onSeriesTimerCancelled); + + self.refresh(); } export default Guide; diff --git a/src/components/homeScreenSettings/homeScreenSettings.js b/src/components/homeScreenSettings/homeScreenSettings.js index 89edf29486..5898844434 100644 --- a/src/components/homeScreenSettings/homeScreenSettings.js +++ b/src/components/homeScreenSettings/homeScreenSettings.js @@ -11,6 +11,7 @@ import '../../elements/emby-select/emby-select'; import '../../elements/emby-checkbox/emby-checkbox'; import ServerConnections from '../ServerConnections'; import toast from '../toast/toast'; +import template from './homeScreenSettings.template.html'; /* eslint-disable indent */ @@ -418,29 +419,28 @@ import toast from '../toast/toast'; } function embed(options, self) { - return import('./homeScreenSettings.template.html').then(({default: template}) => { - for (let i = 1; i <= numConfigurableSections; i++) { - template = template.replace(`{section${i}label}`, globalize.translate('LabelHomeScreenSectionValue', i)); - } + let workingTemplate = template; + for (let i = 1; i <= numConfigurableSections; i++) { + workingTemplate = workingTemplate.replace(`{section${i}label}`, globalize.translate('LabelHomeScreenSectionValue', i)); + } - options.element.innerHTML = globalize.translateHtml(template, 'core'); + options.element.innerHTML = globalize.translateHtml(workingTemplate, 'core'); - options.element.querySelector('.viewOrderList').addEventListener('click', onSectionOrderListClick); - options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); - options.element.addEventListener('change', onChange); + options.element.querySelector('.viewOrderList').addEventListener('click', onSectionOrderListClick); + options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); + options.element.addEventListener('change', onChange); - if (options.enableSaveButton) { - options.element.querySelector('.btnSave').classList.remove('hide'); - } + if (options.enableSaveButton) { + options.element.querySelector('.btnSave').classList.remove('hide'); + } - if (layoutManager.tv) { - options.element.querySelector('.selectTVHomeScreenContainer').classList.remove('hide'); - } else { - options.element.querySelector('.selectTVHomeScreenContainer').classList.add('hide'); - } + if (layoutManager.tv) { + options.element.querySelector('.selectTVHomeScreenContainer').classList.remove('hide'); + } else { + options.element.querySelector('.selectTVHomeScreenContainer').classList.add('hide'); + } - self.loadData(options.autoFocus); - }); + self.loadData(options.autoFocus); } class HomeScreenSettings { diff --git a/src/components/imageDownloader/imageDownloader.js b/src/components/imageDownloader/imageDownloader.js index 18dd849aec..e501a808c9 100644 --- a/src/components/imageDownloader/imageDownloader.js +++ b/src/components/imageDownloader/imageDownloader.js @@ -13,6 +13,7 @@ import '../../elements/emby-button/emby-button'; import '../formdialog.css'; import '../cardbuilder/card.css'; import ServerConnections from '../ServerConnections'; +import template from './imageDownloader.template.html'; /* eslint-disable indent */ @@ -316,44 +317,42 @@ import ServerConnections from '../ServerConnections'; function showEditor(itemId, serverId, itemType) { loading.show(); - import('./imageDownloader.template.html').then(({default: template}) => { - const apiClient = ServerConnections.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); - currentItemId = itemId; - currentItemType = itemType; + currentItemId = itemId; + currentItemType = itemType; - const dialogOptions = { - removeOnClose: true - }; + const dialogOptions = { + removeOnClose: true + }; - if (layoutManager.tv) { - dialogOptions.size = 'fullscreen'; - } else { - dialogOptions.size = 'small'; - } + if (layoutManager.tv) { + dialogOptions.size = 'fullscreen'; + } else { + dialogOptions.size = 'small'; + } - const dlg = dialogHelper.createDialog(dialogOptions); + const dlg = dialogHelper.createDialog(dialogOptions); - dlg.innerHTML = globalize.translateHtml(template, 'core'); + dlg.innerHTML = globalize.translateHtml(template, 'core'); - if (layoutManager.tv) { - scrollHelper.centerFocus.on(dlg, false); - } + if (layoutManager.tv) { + scrollHelper.centerFocus.on(dlg, false); + } - // Has to be assigned a z-index after the call to .open() - dlg.addEventListener('close', onDialogClosed); + // Has to be assigned a z-index after the call to .open() + dlg.addEventListener('close', onDialogClosed); - dialogHelper.open(dlg); + dialogHelper.open(dlg); - const editorContent = dlg.querySelector('.formDialogContent'); - initEditor(editorContent, apiClient); + const editorContent = dlg.querySelector('.formDialogContent'); + initEditor(editorContent, apiClient); - dlg.querySelector('.btnCancel').addEventListener('click', function () { - dialogHelper.close(dlg); - }); - - reloadBrowsableImages(editorContent, apiClient); + dlg.querySelector('.btnCancel').addEventListener('click', function () { + dialogHelper.close(dlg); }); + + reloadBrowsableImages(editorContent, apiClient); } function onDialogClosed() { diff --git a/src/components/imageUploader/imageUploader.js b/src/components/imageUploader/imageUploader.js index 10beff5cab..15a2d5cbbc 100644 --- a/src/components/imageUploader/imageUploader.js +++ b/src/components/imageUploader/imageUploader.js @@ -17,6 +17,7 @@ import '../formdialog.css'; import './style.css'; import ServerConnections from '../ServerConnections'; import toast from '../toast/toast'; +import template from './imageUploader.template.html'; let currentItemId; let currentServerId; @@ -128,49 +129,47 @@ import toast from '../toast/toast'; function showEditor(options, resolve) { options = options || {}; - return import('./imageUploader.template.html').then(({default: template}) => { - currentItemId = options.itemId; - currentServerId = options.serverId; + currentItemId = options.itemId; + currentServerId = options.serverId; - const dialogOptions = { - removeOnClose: true - }; + const dialogOptions = { + removeOnClose: true + }; + if (layoutManager.tv) { + dialogOptions.size = 'fullscreen'; + } else { + dialogOptions.size = 'small'; + } + + const dlg = dialogHelper.createDialog(dialogOptions); + + dlg.classList.add('formDialog'); + + dlg.innerHTML = globalize.translateHtml(template, 'core'); + + if (layoutManager.tv) { + scrollHelper.centerFocus.on(dlg, false); + } + + // Has to be assigned a z-index after the call to .open() + dlg.addEventListener('close', () => { if (layoutManager.tv) { - dialogOptions.size = 'fullscreen'; - } else { - dialogOptions.size = 'small'; + scrollHelper.centerFocus.off(dlg, false); } - const dlg = dialogHelper.createDialog(dialogOptions); + loading.hide(); + resolve(hasChanges); + }); - dlg.classList.add('formDialog'); + dialogHelper.open(dlg); - dlg.innerHTML = globalize.translateHtml(template, 'core'); + initEditor(dlg); - if (layoutManager.tv) { - scrollHelper.centerFocus.on(dlg, false); - } + dlg.querySelector('#selectImageType').value = options.imageType || 'Primary'; - // Has to be assigned a z-index after the call to .open() - dlg.addEventListener('close', () => { - if (layoutManager.tv) { - scrollHelper.centerFocus.off(dlg, false); - } - - loading.hide(); - resolve(hasChanges); - }); - - dialogHelper.open(dlg); - - initEditor(dlg); - - dlg.querySelector('#selectImageType').value = options.imageType || 'Primary'; - - dlg.querySelector('.btnCancel').addEventListener('click', () => { - dialogHelper.close(dlg); - }); + dlg.querySelector('.btnCancel').addEventListener('click', () => { + dialogHelper.close(dlg); }); } diff --git a/src/components/imageeditor/imageeditor.js b/src/components/imageeditor/imageeditor.js index 69e9bcb8c7..60fbddbaad 100644 --- a/src/components/imageeditor/imageeditor.js +++ b/src/components/imageeditor/imageeditor.js @@ -16,6 +16,7 @@ import './imageeditor.css'; import ServerConnections from '../ServerConnections'; import alert from '../alert'; import confirm from '../confirm/confirm'; +import template from './imageeditor.template.html'; /* eslint-disable indent */ @@ -419,53 +420,51 @@ import confirm from '../confirm/confirm'; loading.show(); - import('./imageeditor.template.html').then(({default: template}) => { - const apiClient = ServerConnections.getApiClient(serverId); - apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { - const dialogOptions = { - removeOnClose: true - }; + const apiClient = ServerConnections.getApiClient(serverId); + apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { + const dialogOptions = { + removeOnClose: true + }; + if (layoutManager.tv) { + dialogOptions.size = 'fullscreen'; + } else { + dialogOptions.size = 'small'; + } + + const dlg = dialogHelper.createDialog(dialogOptions); + + dlg.classList.add('formDialog'); + + dlg.innerHTML = globalize.translateHtml(template, 'core'); + + if (layoutManager.tv) { + scrollHelper.centerFocus.on(dlg, false); + } + + initEditor(dlg, options); + + // Has to be assigned a z-index after the call to .open() + dlg.addEventListener('close', function () { if (layoutManager.tv) { - dialogOptions.size = 'fullscreen'; + scrollHelper.centerFocus.off(dlg, false); + } + + loading.hide(); + + if (hasChanges) { + resolve(); } else { - dialogOptions.size = 'small'; + reject(); } + }); - const dlg = dialogHelper.createDialog(dialogOptions); + dialogHelper.open(dlg); - dlg.classList.add('formDialog'); + reload(dlg, item); - dlg.innerHTML = globalize.translateHtml(template, 'core'); - - if (layoutManager.tv) { - scrollHelper.centerFocus.on(dlg, false); - } - - initEditor(dlg, options); - - // Has to be assigned a z-index after the call to .open() - dlg.addEventListener('close', function () { - if (layoutManager.tv) { - scrollHelper.centerFocus.off(dlg, false); - } - - loading.hide(); - - if (hasChanges) { - resolve(); - } else { - reject(); - } - }); - - dialogHelper.open(dlg); - - reload(dlg, item); - - dlg.querySelector('.btnCancel').addEventListener('click', function () { - dialogHelper.close(dlg); - }); + dlg.querySelector('.btnCancel').addEventListener('click', function () { + dialogHelper.close(dlg); }); }); } diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js index 2094bcdacc..cef371992d 100644 --- a/src/components/itemMediaInfo/itemMediaInfo.js +++ b/src/components/itemMediaInfo/itemMediaInfo.js @@ -17,6 +17,7 @@ import '../formdialog.css'; import 'material-design-icons-iconfont'; import '../../assets/css/flexstyles.scss'; import ServerConnections from '../ServerConnections'; +import template from './itemMediaInfo.template.html'; function setMediaInfo(user, page, item) { let html = item.MediaSources.map(version => { @@ -194,10 +195,8 @@ import ServerConnections from '../ServerConnections'; export function show(itemId, serverId) { loading.show(); - return import('./itemMediaInfo.template.html').then(({default: template}) => { - return new Promise((resolve, reject) => { - loadMediaInfo(itemId, serverId, template).then(resolve, reject); - }); + return new Promise((resolve, reject) => { + loadMediaInfo(itemId, serverId, template).then(resolve, reject); }); } diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js index 382226478f..e23c09ac46 100644 --- a/src/components/itemidentifier/itemidentifier.js +++ b/src/components/itemidentifier/itemidentifier.js @@ -20,6 +20,7 @@ import 'material-design-icons-iconfont'; import '../cardbuilder/card.css'; import ServerConnections from '../ServerConnections'; import toast from '../toast/toast'; +import template from './itemidentifier.template.html'; const enableFocusTransform = !browser.slow && !browser.edge; @@ -334,89 +335,12 @@ import toast from '../toast/toast'; function showEditor(itemId) { loading.show(); - return import('./itemidentifier.template.html').then(({default: template}) => { - const apiClient = getApiClient(); + const apiClient = getApiClient(); - apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => { - currentItem = item; - currentItemType = currentItem.Type; + apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => { + currentItem = item; + currentItemType = currentItem.Type; - const dialogOptions = { - size: 'small', - removeOnClose: true, - scrollY: false - }; - - if (layoutManager.tv) { - dialogOptions.size = 'fullscreen'; - } - - const dlg = dialogHelper.createDialog(dialogOptions); - - dlg.classList.add('formDialog'); - dlg.classList.add('recordingDialog'); - - let html = ''; - html += globalize.translateHtml(template, 'core'); - - dlg.innerHTML = html; - - // Has to be assigned a z-index after the call to .open() - dlg.addEventListener('close', onDialogClosed); - - if (layoutManager.tv) { - scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false); - } - - if (item.Path) { - dlg.querySelector('.fldPath').classList.remove('hide'); - } else { - dlg.querySelector('.fldPath').classList.add('hide'); - } - - dlg.querySelector('.txtPath').innerHTML = item.Path || ''; - - dialogHelper.open(dlg); - - dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => { - e.preventDefault(); - searchForIdentificationResults(dlg); - return false; - }); - - dlg.querySelector('.identifyOptionsForm').addEventListener('submit', e => { - e.preventDefault(); - submitIdentficationResult(dlg); - return false; - }); - - dlg.querySelector('.btnCancel').addEventListener('click', () => { - dialogHelper.close(dlg); - }); - - dlg.classList.add('identifyDialog'); - - showIdentificationForm(dlg, item); - loading.hide(); - }); - }); - } - - function onDialogClosed() { - loading.hide(); - if (hasChanges) { - currentResolve(); - } else { - currentReject(); - } - } - - // TODO investigate where this was used - function showEditorFindNew(itemName, itemYear, itemType, resolveFunc) { - currentItem = null; - currentItemType = itemType; - - return import('./itemidentifier.template.html').then(({default: template}) => { const dialogOptions = { size: 'small', removeOnClose: true, @@ -437,15 +361,22 @@ import toast from '../toast/toast'; dlg.innerHTML = html; + // Has to be assigned a z-index after the call to .open() + dlg.addEventListener('close', onDialogClosed); + if (layoutManager.tv) { scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false); } - dialogHelper.open(dlg); + if (item.Path) { + dlg.querySelector('.fldPath').classList.remove('hide'); + } else { + dlg.querySelector('.fldPath').classList.add('hide'); + } - dlg.querySelector('.btnCancel').addEventListener('click', () => { - dialogHelper.close(dlg); - }); + dlg.querySelector('.txtPath').innerHTML = item.Path || ''; + + dialogHelper.open(dlg); dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => { e.preventDefault(); @@ -453,19 +384,85 @@ import toast from '../toast/toast'; return false; }); - dlg.addEventListener('close', () => { - loading.hide(); - const foundItem = hasChanges ? currentSearchResult : null; + dlg.querySelector('.identifyOptionsForm').addEventListener('submit', e => { + e.preventDefault(); + submitIdentficationResult(dlg); + return false; + }); - resolveFunc(foundItem); + dlg.querySelector('.btnCancel').addEventListener('click', () => { + dialogHelper.close(dlg); }); dlg.classList.add('identifyDialog'); - showIdentificationFormFindNew(dlg, itemName, itemYear, itemType); + showIdentificationForm(dlg, item); + loading.hide(); }); } + function onDialogClosed() { + loading.hide(); + if (hasChanges) { + currentResolve(); + } else { + currentReject(); + } + } + + // TODO investigate where this was used + function showEditorFindNew(itemName, itemYear, itemType, resolveFunc) { + currentItem = null; + currentItemType = itemType; + + const dialogOptions = { + size: 'small', + removeOnClose: true, + scrollY: false + }; + + if (layoutManager.tv) { + dialogOptions.size = 'fullscreen'; + } + + const dlg = dialogHelper.createDialog(dialogOptions); + + dlg.classList.add('formDialog'); + dlg.classList.add('recordingDialog'); + + let html = ''; + html += globalize.translateHtml(template, 'core'); + + dlg.innerHTML = html; + + if (layoutManager.tv) { + scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false); + } + + dialogHelper.open(dlg); + + dlg.querySelector('.btnCancel').addEventListener('click', () => { + dialogHelper.close(dlg); + }); + + dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => { + e.preventDefault(); + searchForIdentificationResults(dlg); + return false; + }); + + dlg.addEventListener('close', () => { + loading.hide(); + const foundItem = hasChanges ? currentSearchResult : null; + + resolveFunc(foundItem); + }); + + dlg.classList.add('identifyDialog'); + + showIdentificationFormFindNew(dlg, itemName, itemYear, itemType); + } + function showIdentificationFormFindNew(dlg, itemName, itemYear, itemType) { dlg.querySelector('#txtLookupName').value = itemName; diff --git a/src/components/libraryoptionseditor/libraryoptionseditor.js b/src/components/libraryoptionseditor/libraryoptionseditor.js index 9b20cfff25..91a45a7f3a 100644 --- a/src/components/libraryoptionseditor/libraryoptionseditor.js +++ b/src/components/libraryoptionseditor/libraryoptionseditor.js @@ -10,6 +10,7 @@ import dom from '../../scripts/dom'; import '../../elements/emby-checkbox/emby-checkbox'; import '../../elements/emby-select/emby-select'; import '../../elements/emby-input/emby-input'; +import template from './libraryoptionseditor.template.html'; function populateLanguages(parent) { return ApiClient.getCultures().then(languages => { @@ -363,8 +364,6 @@ import '../../elements/emby-input/emby-input'; const isNewLibrary = libraryOptions === null; isNewLibrary && parent.classList.add('newlibrary'); - const { default: template } = await import('./libraryoptionseditor.template.html'); - parent.innerHTML = globalize.translateHtml(template); populateRefreshInterval(parent.querySelector('#selectAutoRefreshInterval')); const promises = [populateLanguages(parent), populateCountries(parent.querySelector('#selectCountry'))]; diff --git a/src/components/mediaLibraryCreator/mediaLibraryCreator.js b/src/components/mediaLibraryCreator/mediaLibraryCreator.js index 60803945dc..c50a5ab25a 100644 --- a/src/components/mediaLibraryCreator/mediaLibraryCreator.js +++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.js @@ -21,6 +21,7 @@ import '../formdialog.css'; import '../../assets/css/flexstyles.scss'; import toast from '../toast/toast'; import alert from '../alert'; +import template from './mediaLibraryCreator.template.html'; function onAddLibrary() { if (isCreating) { @@ -191,28 +192,26 @@ export class showEditor { currentOptions = options; currentResolve = resolve; hasChanges = false; - import('./mediaLibraryCreator.template.html').then(({default: template}) => { - const dlg = dialogHelper.createDialog({ - size: 'small', - modal: false, - removeOnClose: true, - scrollY: false - }); - dlg.classList.add('ui-body-a'); - dlg.classList.add('background-theme-a'); - dlg.classList.add('dlg-librarycreator'); - dlg.classList.add('formDialog'); - dlg.innerHTML = globalize.translateHtml(template); - initEditor(dlg, options.collectionTypeOptions); - dlg.addEventListener('close', onDialogClosed); - dialogHelper.open(dlg); - dlg.querySelector('.btnCancel').addEventListener('click', () => { - dialogHelper.close(dlg); - }); - pathInfos = []; - renderPaths(dlg); - initLibraryOptions(dlg); + const dlg = dialogHelper.createDialog({ + size: 'small', + modal: false, + removeOnClose: true, + scrollY: false }); + dlg.classList.add('ui-body-a'); + dlg.classList.add('background-theme-a'); + dlg.classList.add('dlg-librarycreator'); + dlg.classList.add('formDialog'); + dlg.innerHTML = globalize.translateHtml(template); + initEditor(dlg, options.collectionTypeOptions); + dlg.addEventListener('close', onDialogClosed); + dialogHelper.open(dlg); + dlg.querySelector('.btnCancel').addEventListener('click', () => { + dialogHelper.close(dlg); + }); + pathInfos = []; + renderPaths(dlg); + initLibraryOptions(dlg); }); } } diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.js b/src/components/mediaLibraryEditor/mediaLibraryEditor.js index 1cb6e26ac7..dede7afa77 100644 --- a/src/components/mediaLibraryEditor/mediaLibraryEditor.js +++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.js @@ -19,6 +19,7 @@ import '../../elements/emby-toggle/emby-toggle'; import '../../assets/css/flexstyles.scss'; import toast from '../toast/toast'; import confirm from '../confirm/confirm'; +import template from './mediaLibraryEditor.template.html'; function onEditLibrary() { if (isCreating) { @@ -201,27 +202,25 @@ export class showEditor { currentOptions = options; currentDeferred = deferred; hasChanges = false; - import('./mediaLibraryEditor.template.html').then(({default: template}) => { - const dlg = dialogHelper.createDialog({ - size: 'small', - modal: false, - removeOnClose: true, - scrollY: false - }); - dlg.classList.add('dlg-libraryeditor'); - dlg.classList.add('ui-body-a'); - dlg.classList.add('background-theme-a'); - dlg.classList.add('formDialog'); - dlg.innerHTML = globalize.translateHtml(template); - dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.library.Name; - initEditor(dlg, options); - dlg.addEventListener('close', onDialogClosed); - dialogHelper.open(dlg); - dlg.querySelector('.btnCancel').addEventListener('click', () => { - dialogHelper.close(dlg); - }); - refreshLibraryFromServer(dlg); + const dlg = dialogHelper.createDialog({ + size: 'small', + modal: false, + removeOnClose: true, + scrollY: false }); + dlg.classList.add('dlg-libraryeditor'); + dlg.classList.add('ui-body-a'); + dlg.classList.add('background-theme-a'); + dlg.classList.add('formDialog'); + dlg.innerHTML = globalize.translateHtml(template); + dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.library.Name; + initEditor(dlg, options); + dlg.addEventListener('close', onDialogClosed); + dialogHelper.open(dlg); + dlg.querySelector('.btnCancel').addEventListener('click', () => { + dialogHelper.close(dlg); + }); + refreshLibraryFromServer(dlg); return deferred.promise(); } } diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js index 71bf1bc00b..ff1654a3c5 100644 --- a/src/components/metadataEditor/metadataEditor.js +++ b/src/components/metadataEditor/metadataEditor.js @@ -19,6 +19,7 @@ import '../../assets/css/flexstyles.scss'; import ServerConnections from '../ServerConnections'; import toast from '../toast/toast'; import { appRouter } from '../appRouter'; +import template from './metadataEditor.template.html'; /* eslint-disable indent */ @@ -1028,48 +1029,46 @@ import { appRouter } from '../appRouter'; function show(itemId, serverId, resolve, reject) { loading.show(); - import('./metadataEditor.template.html').then(({default: template}) => { - const dialogOptions = { - removeOnClose: true, - scrollY: false - }; + const dialogOptions = { + removeOnClose: true, + scrollY: false + }; + if (layoutManager.tv) { + dialogOptions.size = 'fullscreen'; + } else { + dialogOptions.size = 'small'; + } + + const dlg = dialogHelper.createDialog(dialogOptions); + + dlg.classList.add('formDialog'); + + let html = ''; + + html += globalize.translateHtml(template, 'core'); + + dlg.innerHTML = html; + + if (layoutManager.tv) { + centerFocus(dlg.querySelector('.formDialogContent'), false, true); + } + + dialogHelper.open(dlg); + + dlg.addEventListener('close', function () { if (layoutManager.tv) { - dialogOptions.size = 'fullscreen'; - } else { - dialogOptions.size = 'small'; + centerFocus(dlg.querySelector('.formDialogContent'), false, false); } - const dlg = dialogHelper.createDialog(dialogOptions); - - dlg.classList.add('formDialog'); - - let html = ''; - - html += globalize.translateHtml(template, 'core'); - - dlg.innerHTML = html; - - if (layoutManager.tv) { - centerFocus(dlg.querySelector('.formDialogContent'), false, true); - } - - dialogHelper.open(dlg); - - dlg.addEventListener('close', function () { - if (layoutManager.tv) { - centerFocus(dlg.querySelector('.formDialogContent'), false, false); - } - - resolve(); - }); - - currentContext = dlg; - - init(dlg, ServerConnections.getApiClient(serverId)); - - reload(dlg, itemId, serverId); + resolve(); }); + + currentContext = dlg; + + init(dlg, ServerConnections.getApiClient(serverId)); + + reload(dlg, itemId, serverId); } export default { @@ -1083,21 +1082,19 @@ import { appRouter } from '../appRouter'; return new Promise(function (resolve, reject) { loading.show(); - import('./metadataEditor.template.html').then(({default: template}) => { - elem.innerHTML = globalize.translateHtml(template, 'core'); + elem.innerHTML = globalize.translateHtml(template, 'core'); - elem.querySelector('.formDialogFooter').classList.remove('formDialogFooter'); - elem.querySelector('.btnClose').classList.add('hide'); - elem.querySelector('.btnHeaderSave').classList.remove('hide'); - elem.querySelector('.btnCancel').classList.add('hide'); + elem.querySelector('.formDialogFooter').classList.remove('formDialogFooter'); + elem.querySelector('.btnClose').classList.add('hide'); + elem.querySelector('.btnHeaderSave').classList.remove('hide'); + elem.querySelector('.btnCancel').classList.add('hide'); - currentContext = elem; + currentContext = elem; - init(elem, ServerConnections.getApiClient(serverId)); - reload(elem, itemId, serverId); + init(elem, ServerConnections.getApiClient(serverId)); + reload(elem, itemId, serverId); - focusManager.autoFocus(elem); - }); + focusManager.autoFocus(elem); }); } }; diff --git a/src/components/metadataEditor/personEditor.js b/src/components/metadataEditor/personEditor.js index f64f7330d7..5c3b406bd6 100644 --- a/src/components/metadataEditor/personEditor.js +++ b/src/components/metadataEditor/personEditor.js @@ -6,6 +6,7 @@ import '../../elements/emby-button/paper-icon-button-light'; import '../../elements/emby-input/emby-input'; import '../../elements/emby-select/emby-select'; import '../formdialog.css'; +import template from './personEditor.template.html'; /* eslint-disable indent */ @@ -18,80 +19,78 @@ import '../formdialog.css'; function show(person) { return new Promise(function (resolve, reject) { - import('./personEditor.template.html').then(({default: template}) => { - const dialogOptions = { - removeOnClose: true, - scrollY: false - }; + const dialogOptions = { + removeOnClose: true, + scrollY: false + }; + if (layoutManager.tv) { + dialogOptions.size = 'fullscreen'; + } else { + dialogOptions.size = 'small'; + } + + const dlg = dialogHelper.createDialog(dialogOptions); + + dlg.classList.add('formDialog'); + + let html = ''; + let submitted = false; + + html += globalize.translateHtml(template, 'core'); + + dlg.innerHTML = html; + + dlg.querySelector('.txtPersonName', dlg).value = person.Name || ''; + dlg.querySelector('.selectPersonType', dlg).value = person.Type || ''; + dlg.querySelector('.txtPersonRole', dlg).value = person.Role || ''; + + if (layoutManager.tv) { + centerFocus(dlg.querySelector('.formDialogContent'), false, true); + } + + dialogHelper.open(dlg); + + dlg.addEventListener('close', function () { if (layoutManager.tv) { - dialogOptions.size = 'fullscreen'; + centerFocus(dlg.querySelector('.formDialogContent'), false, false); + } + + if (submitted) { + resolve(person); } else { - dialogOptions.size = 'small'; + reject(); } - - const dlg = dialogHelper.createDialog(dialogOptions); - - dlg.classList.add('formDialog'); - - let html = ''; - let submitted = false; - - html += globalize.translateHtml(template, 'core'); - - dlg.innerHTML = html; - - dlg.querySelector('.txtPersonName', dlg).value = person.Name || ''; - dlg.querySelector('.selectPersonType', dlg).value = person.Type || ''; - dlg.querySelector('.txtPersonRole', dlg).value = person.Role || ''; - - if (layoutManager.tv) { - centerFocus(dlg.querySelector('.formDialogContent'), false, true); - } - - dialogHelper.open(dlg); - - dlg.addEventListener('close', function () { - if (layoutManager.tv) { - centerFocus(dlg.querySelector('.formDialogContent'), false, false); - } - - if (submitted) { - resolve(person); - } else { - reject(); - } - }); - - dlg.querySelector('.selectPersonType').addEventListener('change', function (e) { - if (this.value === 'Actor') { - dlg.querySelector('.fldRole').classList.remove('hide'); - } else { - dlg.querySelector('.fldRole').classList.add('hide'); - } - }); - - dlg.querySelector('.btnCancel').addEventListener('click', function (e) { - dialogHelper.close(dlg); - }); - - dlg.querySelector('form').addEventListener('submit', function (e) { - submitted = true; - - person.Name = dlg.querySelector('.txtPersonName', dlg).value; - person.Type = dlg.querySelector('.selectPersonType', dlg).value; - person.Role = dlg.querySelector('.txtPersonRole', dlg).value || null; - - dialogHelper.close(dlg); - - e.preventDefault(); - return false; - }); - - dlg.querySelector('.selectPersonType').dispatchEvent(new CustomEvent('change', { - bubbles: true - })); }); + + dlg.querySelector('.selectPersonType').addEventListener('change', function (e) { + if (this.value === 'Actor') { + dlg.querySelector('.fldRole').classList.remove('hide'); + } else { + dlg.querySelector('.fldRole').classList.add('hide'); + } + }); + + dlg.querySelector('.btnCancel').addEventListener('click', function (e) { + dialogHelper.close(dlg); + }); + + dlg.querySelector('form').addEventListener('submit', function (e) { + submitted = true; + + person.Name = dlg.querySelector('.txtPersonName', dlg).value; + person.Type = dlg.querySelector('.selectPersonType', dlg).value; + person.Role = dlg.querySelector('.txtPersonRole', dlg).value || null; + + dialogHelper.close(dlg); + + e.preventDefault(); + return false; + }); + + dlg.querySelector('.selectPersonType').dispatchEvent(new CustomEvent('change', { + bubbles: true + })); }); } diff --git a/src/components/playbackSettings/playbackSettings.js b/src/components/playbackSettings/playbackSettings.js index 6e6fa73647..0e52ae5a35 100644 --- a/src/components/playbackSettings/playbackSettings.js +++ b/src/components/playbackSettings/playbackSettings.js @@ -10,6 +10,7 @@ import '../../elements/emby-select/emby-select'; import '../../elements/emby-checkbox/emby-checkbox'; import ServerConnections from '../ServerConnections'; import toast from '../toast/toast'; +import template from './playbackSettings.template.html'; /* eslint-disable indent */ @@ -278,21 +279,19 @@ import toast from '../toast/toast'; } function embed(options, self) { - return import('./playbackSettings.template.html').then(({default: template}) => { - options.element.innerHTML = globalize.translateHtml(template, 'core'); + options.element.innerHTML = globalize.translateHtml(template, 'core'); - options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); + options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); - if (options.enableSaveButton) { - options.element.querySelector('.btnSave').classList.remove('hide'); - } + if (options.enableSaveButton) { + options.element.querySelector('.btnSave').classList.remove('hide'); + } - self.loadData(); + self.loadData(); - if (options.autoFocus) { - focusManager.autoFocus(options.element); - } - }); + if (options.autoFocus) { + focusManager.autoFocus(options.element); + } } class PlaybackSettings { diff --git a/src/components/prompt/prompt.js b/src/components/prompt/prompt.js index c2c52bd41c..04391101f0 100644 --- a/src/components/prompt/prompt.js +++ b/src/components/prompt/prompt.js @@ -9,6 +9,7 @@ import '../../elements/emby-button/emby-button'; import '../../elements/emby-button/paper-icon-button-light'; import '../../elements/emby-input/emby-input'; import '../formdialog.css'; +import template from './prompt.template.html'; /* eslint-disable indent */ export default (() => { @@ -117,15 +118,13 @@ export default (() => { } else { return options => { return new Promise((resolve, reject) => { - import('./prompt.template.html').then(({default: template}) => { - if (typeof options === 'string') { - options = { - title: '', - text: options - }; - } - showDialog(options, template).then(resolve, reject); - }); + if (typeof options === 'string') { + options = { + title: '', + text: options + }; + } + showDialog(options, template).then(resolve, reject); }); }; } diff --git a/src/components/recordingcreator/recordingcreator.js b/src/components/recordingcreator/recordingcreator.js index a1545348ae..0b8e3d8307 100644 --- a/src/components/recordingcreator/recordingcreator.js +++ b/src/components/recordingcreator/recordingcreator.js @@ -18,6 +18,7 @@ import './recordingcreator.css'; import 'material-design-icons-iconfont'; import ServerConnections from '../ServerConnections'; import { playbackManager } from '../playback/playbackmanager'; +import template from './recordingcreator.template.html'; let currentDialog; let closeAction; @@ -136,64 +137,62 @@ function showEditor(itemId, serverId) { loading.show(); - import('./recordingcreator.template.html').then(({ default: template }) => { - const dialogOptions = { - removeOnClose: true, - scrollY: false - }; + const dialogOptions = { + removeOnClose: true, + scrollY: false + }; - if (layoutManager.tv) { - dialogOptions.size = 'fullscreen'; + if (layoutManager.tv) { + dialogOptions.size = 'fullscreen'; + } else { + dialogOptions.size = 'small'; + } + + const dlg = dialogHelper.createDialog(dialogOptions); + + dlg.classList.add('formDialog'); + dlg.classList.add('recordingDialog'); + + let html = ''; + + html += globalize.translateHtml(template, 'core'); + + dlg.innerHTML = html; + + currentDialog = dlg; + + function onRecordingChanged() { + reload(dlg, itemId, serverId, true); + } + + dlg.addEventListener('close', function () { + Events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged); + executeCloseAction(closeAction, itemId, serverId); + + if (currentRecordingFields && currentRecordingFields.hasChanged()) { + resolve(); } else { - dialogOptions.size = 'small'; + reject(); } - - const dlg = dialogHelper.createDialog(dialogOptions); - - dlg.classList.add('formDialog'); - dlg.classList.add('recordingDialog'); - - let html = ''; - - html += globalize.translateHtml(template, 'core'); - - dlg.innerHTML = html; - - currentDialog = dlg; - - function onRecordingChanged() { - reload(dlg, itemId, serverId, true); - } - - dlg.addEventListener('close', function () { - Events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged); - executeCloseAction(closeAction, itemId, serverId); - - if (currentRecordingFields && currentRecordingFields.hasChanged()) { - resolve(); - } else { - reject(); - } - }); - - if (layoutManager.tv) { - scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false); - } - - init(dlg); - - reload(dlg, itemId, serverId); - - currentRecordingFields = new recordingFields({ - parent: dlg.querySelector('.recordingFields'), - programId: itemId, - serverId: serverId - }); - - Events.on(currentRecordingFields, 'recordingchanged', onRecordingChanged); - - dialogHelper.open(dlg); }); + + if (layoutManager.tv) { + scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false); + } + + init(dlg); + + reload(dlg, itemId, serverId); + + currentRecordingFields = new recordingFields({ + parent: dlg.querySelector('.recordingFields'), + programId: itemId, + serverId: serverId + }); + + Events.on(currentRecordingFields, 'recordingchanged', onRecordingChanged); + + dialogHelper.open(dlg); }); } diff --git a/src/components/recordingcreator/recordingeditor.js b/src/components/recordingcreator/recordingeditor.js index 740321fa45..8ebb3c966e 100644 --- a/src/components/recordingcreator/recordingeditor.js +++ b/src/components/recordingcreator/recordingeditor.js @@ -14,6 +14,7 @@ import './recordingcreator.css'; import 'material-design-icons-iconfont'; import '../../assets/css/flexstyles.scss'; import ServerConnections from '../ServerConnections'; +import template from './recordingeditor.template.html'; let currentDialog; let recordingDeleted = false; @@ -91,63 +92,61 @@ function showEditor(itemId, serverId, options) { options = options || {}; currentResolve = resolve; - import('./recordingeditor.template.html').then(({default: template}) => { - const dialogOptions = { - removeOnClose: true, - scrollY: false - }; + const dialogOptions = { + removeOnClose: true, + scrollY: false + }; - if (layoutManager.tv) { - dialogOptions.size = 'fullscreen'; + if (layoutManager.tv) { + dialogOptions.size = 'fullscreen'; + } + + const dlg = dialogHelper.createDialog(dialogOptions); + + dlg.classList.add('formDialog'); + dlg.classList.add('recordingDialog'); + + if (!layoutManager.tv) { + dlg.style['min-width'] = '20%'; + dlg.classList.add('dialog-fullscreen-lowres'); + } + + let html = ''; + + html += globalize.translateHtml(template, 'core'); + + dlg.innerHTML = html; + + if (options.enableCancel === false) { + dlg.querySelector('.formDialogFooter').classList.add('hide'); + } + + currentDialog = dlg; + + dlg.addEventListener('closing', function () { + if (!recordingDeleted) { + dlg.querySelector('.btnSubmit').click(); } - - const dlg = dialogHelper.createDialog(dialogOptions); - - dlg.classList.add('formDialog'); - dlg.classList.add('recordingDialog'); - - if (!layoutManager.tv) { - dlg.style['min-width'] = '20%'; - dlg.classList.add('dialog-fullscreen-lowres'); - } - - let html = ''; - - html += globalize.translateHtml(template, 'core'); - - dlg.innerHTML = html; - - if (options.enableCancel === false) { - dlg.querySelector('.formDialogFooter').classList.add('hide'); - } - - currentDialog = dlg; - - dlg.addEventListener('closing', function () { - if (!recordingDeleted) { - dlg.querySelector('.btnSubmit').click(); - } - }); - - dlg.addEventListener('close', function () { - if (recordingDeleted) { - resolve({ - updated: true, - deleted: true - }); - } - }); - - if (layoutManager.tv) { - scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false); - } - - init(dlg); - - reload(dlg, itemId); - - dialogHelper.open(dlg); }); + + dlg.addEventListener('close', function () { + if (recordingDeleted) { + resolve({ + updated: true, + deleted: true + }); + } + }); + + if (layoutManager.tv) { + scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false); + } + + init(dlg); + + reload(dlg, itemId); + + dialogHelper.open(dlg); }); } diff --git a/src/components/recordingcreator/recordingfields.js b/src/components/recordingcreator/recordingfields.js index 49843fec81..134ae6221d 100644 --- a/src/components/recordingcreator/recordingfields.js +++ b/src/components/recordingcreator/recordingfields.js @@ -10,6 +10,7 @@ import './recordingfields.css'; import '../../assets/css/flexstyles.scss'; import ServerConnections from '../ServerConnections'; import toast from '../toast/toast'; +import template from './recordingfields.template.html'; /*eslint prefer-const: "error"*/ @@ -119,18 +120,16 @@ class RecordingEditor { embed() { const self = this; return new Promise(function (resolve, reject) { - import('./recordingfields.template.html').then(({default: template}) => { - const options = self.options; - const context = options.parent; - context.innerHTML = globalize.translateHtml(template, 'core'); + const options = self.options; + const context = options.parent; + context.innerHTML = globalize.translateHtml(template, 'core'); - context.querySelector('.singleRecordingButton').addEventListener('click', onRecordChange.bind(self)); - context.querySelector('.seriesRecordingButton').addEventListener('click', onRecordSeriesChange.bind(self)); - context.querySelector('.btnManageRecording').addEventListener('click', onManageRecordingClick.bind(self)); - context.querySelector('.btnManageSeriesRecording').addEventListener('click', onManageSeriesRecordingClick.bind(self)); + context.querySelector('.singleRecordingButton').addEventListener('click', onRecordChange.bind(self)); + context.querySelector('.seriesRecordingButton').addEventListener('click', onRecordSeriesChange.bind(self)); + context.querySelector('.btnManageRecording').addEventListener('click', onManageRecordingClick.bind(self)); + context.querySelector('.btnManageSeriesRecording').addEventListener('click', onManageSeriesRecordingClick.bind(self)); - fetchData(self).then(resolve); - }); + fetchData(self).then(resolve); }); } diff --git a/src/components/recordingcreator/seriesrecordingeditor.js b/src/components/recordingcreator/seriesrecordingeditor.js index c0dbd74a62..0014a9343e 100644 --- a/src/components/recordingcreator/seriesrecordingeditor.js +++ b/src/components/recordingcreator/seriesrecordingeditor.js @@ -15,6 +15,7 @@ import './recordingcreator.css'; import 'material-design-icons-iconfont'; import '../../assets/css/flexstyles.scss'; import ServerConnections from '../ServerConnections'; +import template from './seriesrecordingeditor.template.html'; /*eslint prefer-const: "error"*/ @@ -151,7 +152,46 @@ function embed(itemId, serverId, options) { loading.show(); options = options || {}; - import('./seriesrecordingeditor.template.html').then(({ default: template }) => { + const dialogOptions = { + removeOnClose: true, + scrollY: false + }; + + if (layoutManager.tv) { + dialogOptions.size = 'fullscreen'; + } else { + dialogOptions.size = 'small'; + } + + const dlg = options.context; + + dlg.classList.add('hide'); + dlg.innerHTML = globalize.translateHtml(template, 'core'); + + dlg.querySelector('.formDialogHeader').classList.add('hide'); + dlg.querySelector('.formDialogFooter').classList.add('hide'); + dlg.querySelector('.formDialogContent').className = ''; + dlg.querySelector('.dialogContentInner').className = ''; + dlg.classList.remove('hide'); + + dlg.removeEventListener('change', onFieldChange); + dlg.addEventListener('change', onFieldChange); + + currentDialog = dlg; + + init(dlg); + + reload(dlg, itemId); +} + +function showEditor(itemId, serverId, options) { + return new Promise(function (resolve, reject) { + recordingUpdated = false; + recordingDeleted = false; + currentServerId = serverId; + loading.show(); + options = options || {}; + const dialogOptions = { removeOnClose: true, scrollY: false @@ -163,96 +203,53 @@ function embed(itemId, serverId, options) { dialogOptions.size = 'small'; } - const dlg = options.context; + const dlg = dialogHelper.createDialog(dialogOptions); - dlg.classList.add('hide'); - dlg.innerHTML = globalize.translateHtml(template, 'core'); + dlg.classList.add('formDialog'); + dlg.classList.add('recordingDialog'); - dlg.querySelector('.formDialogHeader').classList.add('hide'); - dlg.querySelector('.formDialogFooter').classList.add('hide'); - dlg.querySelector('.formDialogContent').className = ''; - dlg.querySelector('.dialogContentInner').className = ''; - dlg.classList.remove('hide'); + if (!layoutManager.tv) { + dlg.style['min-width'] = '20%'; + } - dlg.removeEventListener('change', onFieldChange); - dlg.addEventListener('change', onFieldChange); + let html = ''; + + html += globalize.translateHtml(template, 'core'); + + dlg.innerHTML = html; + + if (options.enableCancel === false) { + dlg.querySelector('.formDialogFooter').classList.add('hide'); + } currentDialog = dlg; + dlg.addEventListener('closing', function () { + if (!recordingDeleted) { + this.querySelector('.btnSubmit').click(); + } + }); + + dlg.addEventListener('close', function () { + if (recordingUpdated) { + resolve({ + updated: true, + deleted: recordingDeleted + }); + } else { + reject(); + } + }); + + if (layoutManager.tv) { + scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false); + } + init(dlg); reload(dlg, itemId); - }); -} -function showEditor(itemId, serverId, options) { - return new Promise(function (resolve, reject) { - recordingUpdated = false; - recordingDeleted = false; - currentServerId = serverId; - loading.show(); - options = options || {}; - - import('./seriesrecordingeditor.template.html').then(({ default: template }) => { - const dialogOptions = { - removeOnClose: true, - scrollY: false - }; - - if (layoutManager.tv) { - dialogOptions.size = 'fullscreen'; - } else { - dialogOptions.size = 'small'; - } - - const dlg = dialogHelper.createDialog(dialogOptions); - - dlg.classList.add('formDialog'); - dlg.classList.add('recordingDialog'); - - if (!layoutManager.tv) { - dlg.style['min-width'] = '20%'; - } - - let html = ''; - - html += globalize.translateHtml(template, 'core'); - - dlg.innerHTML = html; - - if (options.enableCancel === false) { - dlg.querySelector('.formDialogFooter').classList.add('hide'); - } - - currentDialog = dlg; - - dlg.addEventListener('closing', function () { - if (!recordingDeleted) { - this.querySelector('.btnSubmit').click(); - } - }); - - dlg.addEventListener('close', function () { - if (recordingUpdated) { - resolve({ - updated: true, - deleted: recordingDeleted - }); - } else { - reject(); - } - }); - - if (layoutManager.tv) { - scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false); - } - - init(dlg); - - reload(dlg, itemId); - - dialogHelper.open(dlg); - }); + dialogHelper.open(dlg); }); } diff --git a/src/components/search/searchfields.js b/src/components/search/searchfields.js index 2bf5c03051..67364c33b2 100644 --- a/src/components/search/searchfields.js +++ b/src/components/search/searchfields.js @@ -7,6 +7,7 @@ import '../../elements/emby-input/emby-input'; import '../../assets/css/flexstyles.scss'; import 'material-design-icons-iconfont'; import './searchfields.css'; +import template from './searchfields.template.html'; /* eslint-disable indent */ @@ -61,30 +62,28 @@ import './searchfields.css'; } function embed(elem, instance, options) { - import('./searchfields.template.html').then(({default: template}) => { - let html = globalize.translateHtml(template, 'core'); + let html = globalize.translateHtml(template, 'core'); - if (browser.tizen || browser.orsay) { - html = html.replace(' { - if (!enableScrollX()) { - template = replaceAll(template, 'data-horizontal="true"', 'data-horizontal="false"'); - template = replaceAll(template, 'itemsContainer scrollSlider', 'itemsContainer scrollSlider vertical-wrap'); - } + let workingTemplate = template; + if (!enableScrollX()) { + workingTemplate = replaceAll(workingTemplate, 'data-horizontal="true"', 'data-horizontal="false"'); + workingTemplate = replaceAll(workingTemplate, 'itemsContainer scrollSlider', 'itemsContainer scrollSlider vertical-wrap'); + } - const html = globalize.translateHtml(template, 'core'); + const html = globalize.translateHtml(workingTemplate, 'core'); - elem.innerHTML = html; + elem.innerHTML = html; - elem.classList.add('searchResults'); - instance.search(''); - }); + elem.classList.add('searchResults'); + instance.search(''); } class SearchResults { diff --git a/src/components/sortmenu/sortmenu.js b/src/components/sortmenu/sortmenu.js index 0ec21d3b77..c8eaf80b7f 100644 --- a/src/components/sortmenu/sortmenu.js +++ b/src/components/sortmenu/sortmenu.js @@ -8,6 +8,7 @@ import 'material-design-icons-iconfont'; import '../formdialog.css'; import '../../elements/emby-button/emby-button'; import '../../assets/css/flexstyles.scss'; +import template from './sortmenu.template.html'; function onSubmit(e) { e.preventDefault(); @@ -44,64 +45,62 @@ function saveValues(context, settingsKey) { class SortMenu { show(options) { return new Promise(function (resolve, reject) { - import('./sortmenu.template.html').then(({default: template}) => { - const dialogOptions = { - removeOnClose: true, - scrollY: false - }; + const dialogOptions = { + removeOnClose: true, + scrollY: false + }; + if (layoutManager.tv) { + dialogOptions.size = 'fullscreen'; + } else { + dialogOptions.size = 'small'; + } + + const dlg = dialogHelper.createDialog(dialogOptions); + + dlg.classList.add('formDialog'); + + let html = ''; + + html += '
'; + html += ''; + html += '

${Sort}

'; + + html += '
'; + + html += template; + + dlg.innerHTML = globalize.translateHtml(html, 'core'); + + fillSortBy(dlg, options.sortOptions); + initEditor(dlg, options.settings); + + dlg.querySelector('.btnCancel').addEventListener('click', function () { + dialogHelper.close(dlg); + }); + + if (layoutManager.tv) { + centerFocus(dlg.querySelector('.formDialogContent'), false, true); + } + + let submitted; + + dlg.querySelector('form').addEventListener('change', function () { + submitted = true; + }, true); + + dialogHelper.open(dlg).then(function () { if (layoutManager.tv) { - dialogOptions.size = 'fullscreen'; - } else { - dialogOptions.size = 'small'; + centerFocus(dlg.querySelector('.formDialogContent'), false, false); } - const dlg = dialogHelper.createDialog(dialogOptions); - - dlg.classList.add('formDialog'); - - let html = ''; - - html += '
'; - html += ''; - html += '

${Sort}

'; - - html += '
'; - - html += template; - - dlg.innerHTML = globalize.translateHtml(html, 'core'); - - fillSortBy(dlg, options.sortOptions); - initEditor(dlg, options.settings); - - dlg.querySelector('.btnCancel').addEventListener('click', function () { - dialogHelper.close(dlg); - }); - - if (layoutManager.tv) { - centerFocus(dlg.querySelector('.formDialogContent'), false, true); + if (submitted) { + saveValues(dlg, options.settingsKey); + resolve(); + return; } - let submitted; - - dlg.querySelector('form').addEventListener('change', function () { - submitted = true; - }, true); - - dialogHelper.open(dlg).then(function () { - if (layoutManager.tv) { - centerFocus(dlg.querySelector('.formDialogContent'), false, false); - } - - if (submitted) { - saveValues(dlg, options.settingsKey); - resolve(); - return; - } - - reject(); - }); + reject(); }); }); } diff --git a/src/components/subtitleeditor/subtitleeditor.js b/src/components/subtitleeditor/subtitleeditor.js index 980a5ef735..fdbda7e649 100644 --- a/src/components/subtitleeditor/subtitleeditor.js +++ b/src/components/subtitleeditor/subtitleeditor.js @@ -17,6 +17,7 @@ import '../../assets/css/flexstyles.scss'; import ServerConnections from '../ServerConnections'; import toast from '../toast/toast'; import confirm from '../confirm/confirm'; +import template from './subtitleeditor.template.html'; let currentItem; let hasChanges; @@ -454,9 +455,7 @@ function showEditor(itemId, serverId) { loading.show(); return new Promise(function (resolve, reject) { - import('./subtitleeditor.template.html').then(({default: template}) => { - showEditorInternal(itemId, serverId, template).then(resolve, reject); - }); + showEditorInternal(itemId, serverId, template).then(resolve, reject); }); } diff --git a/src/components/subtitlesettings/subtitlesettings.js b/src/components/subtitlesettings/subtitlesettings.js index f49734b143..d348ae6359 100644 --- a/src/components/subtitlesettings/subtitlesettings.js +++ b/src/components/subtitlesettings/subtitlesettings.js @@ -17,6 +17,7 @@ import '../../assets/css/flexstyles.scss'; import './subtitlesettings.css'; import ServerConnections from '../ServerConnections'; import toast from '../toast/toast'; +import template from './subtitlesettings.template.html'; /** * Subtitle settings. @@ -158,63 +159,61 @@ function hideSubtitlePreview(persistent) { } function embed(options, self) { - import('./subtitlesettings.template.html').then(({default: template}) => { - options.element.classList.add('subtitlesettings'); - options.element.innerHTML = globalize.translateHtml(template, 'core'); + options.element.classList.add('subtitlesettings'); + options.element.innerHTML = globalize.translateHtml(template, 'core'); - options.element.querySelector('form').addEventListener('submit', self.onSubmit.bind(self)); + options.element.querySelector('form').addEventListener('submit', self.onSubmit.bind(self)); - options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange); - options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange); - options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange); - options.element.querySelector('#selectFont').addEventListener('change', onAppearanceFieldChange); - options.element.querySelector('#inputTextColor').addEventListener('change', onAppearanceFieldChange); - options.element.querySelector('#inputTextBackground').addEventListener('change', onAppearanceFieldChange); + options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange); + options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange); + options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange); + options.element.querySelector('#selectFont').addEventListener('change', onAppearanceFieldChange); + options.element.querySelector('#inputTextColor').addEventListener('change', onAppearanceFieldChange); + options.element.querySelector('#inputTextBackground').addEventListener('change', onAppearanceFieldChange); - if (options.enableSaveButton) { - options.element.querySelector('.btnSave').classList.remove('hide'); + if (options.enableSaveButton) { + options.element.querySelector('.btnSave').classList.remove('hide'); + } + + if (appHost.supports('subtitleappearancesettings')) { + options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide'); + + self._fullPreview = options.element.querySelector('.subtitleappearance-fullpreview'); + self._refFullPreview = 0; + + const sliderVerticalPosition = options.element.querySelector('#sliderVerticalPosition'); + sliderVerticalPosition.addEventListener('input', onAppearanceFieldChange); + sliderVerticalPosition.addEventListener('input', () => showSubtitlePreview.call(self)); + + const eventPrefix = window.PointerEvent ? 'pointer' : 'mouse'; + sliderVerticalPosition.addEventListener(`${eventPrefix}enter`, () => showSubtitlePreview.call(self, true)); + sliderVerticalPosition.addEventListener(`${eventPrefix}leave`, () => hideSubtitlePreview.call(self, true)); + + if (layoutManager.tv) { + sliderVerticalPosition.addEventListener('focus', () => showSubtitlePreview.call(self, true)); + sliderVerticalPosition.addEventListener('blur', () => hideSubtitlePreview.call(self, true)); + + // Give CustomElements time to attach + setTimeout(() => { + sliderVerticalPosition.classList.add('focusable'); + sliderVerticalPosition.enableKeyboardDragging(); + }, 0); } - if (appHost.supports('subtitleappearancesettings')) { - options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide'); - - self._fullPreview = options.element.querySelector('.subtitleappearance-fullpreview'); - self._refFullPreview = 0; - - const sliderVerticalPosition = options.element.querySelector('#sliderVerticalPosition'); - sliderVerticalPosition.addEventListener('input', onAppearanceFieldChange); - sliderVerticalPosition.addEventListener('input', () => showSubtitlePreview.call(self)); - - const eventPrefix = window.PointerEvent ? 'pointer' : 'mouse'; - sliderVerticalPosition.addEventListener(`${eventPrefix}enter`, () => showSubtitlePreview.call(self, true)); - sliderVerticalPosition.addEventListener(`${eventPrefix}leave`, () => hideSubtitlePreview.call(self, true)); - - if (layoutManager.tv) { - sliderVerticalPosition.addEventListener('focus', () => showSubtitlePreview.call(self, true)); - sliderVerticalPosition.addEventListener('blur', () => hideSubtitlePreview.call(self, true)); - - // Give CustomElements time to attach - setTimeout(() => { - sliderVerticalPosition.classList.add('focusable'); - sliderVerticalPosition.enableKeyboardDragging(); - }, 0); + options.element.querySelector('.chkPreview').addEventListener('change', (e) => { + if (e.target.checked) { + showSubtitlePreview.call(self, true); + } else { + hideSubtitlePreview.call(self, true); } + }); + } - options.element.querySelector('.chkPreview').addEventListener('change', (e) => { - if (e.target.checked) { - showSubtitlePreview.call(self, true); - } else { - hideSubtitlePreview.call(self, true); - } - }); - } + self.loadData(); - self.loadData(); - - if (options.autoFocus) { - focusManager.autoFocus(options.element); - } - }); + if (options.autoFocus) { + focusManager.autoFocus(options.element); + } } export class SubtitleSettings { diff --git a/src/components/viewSettings/viewSettings.js b/src/components/viewSettings/viewSettings.js index 0f32f4f6ac..46bc3864ee 100644 --- a/src/components/viewSettings/viewSettings.js +++ b/src/components/viewSettings/viewSettings.js @@ -10,6 +10,7 @@ import '../../elements/emby-select/emby-select'; import 'material-design-icons-iconfont'; import '../formdialog.css'; import '../../assets/css/flexstyles.scss'; +import template from './viewSettings.template.html'; function onSubmit(e) { e.preventDefault(); @@ -59,81 +60,79 @@ class ViewSettings { } show(options) { return new Promise(function (resolve, reject) { - import('./viewSettings.template.html').then(({default: template}) => { - const dialogOptions = { - removeOnClose: true, - scrollY: false - }; + const dialogOptions = { + removeOnClose: true, + scrollY: false + }; - if (layoutManager.tv) { - dialogOptions.size = 'fullscreen'; + if (layoutManager.tv) { + dialogOptions.size = 'fullscreen'; + } else { + dialogOptions.size = 'small'; + } + + const dlg = dialogHelper.createDialog(dialogOptions); + + dlg.classList.add('formDialog'); + + let html = ''; + + html += '
'; + html += ''; + html += '

${Settings}

'; + + html += '
'; + + html += template; + + dlg.innerHTML = globalize.translateHtml(html, 'core'); + + const settingElements = dlg.querySelectorAll('.viewSetting'); + for (const settingElement of settingElements) { + if (options.visibleSettings.indexOf(settingElement.getAttribute('data-settingname')) === -1) { + settingElement.classList.add('hide'); + settingElement.classList.add('hiddenFromViewSettings'); } else { - dialogOptions.size = 'small'; + settingElement.classList.remove('hide'); + settingElement.classList.remove('hiddenFromViewSettings'); } + } - const dlg = dialogHelper.createDialog(dialogOptions); + initEditor(dlg, options.settings); - dlg.classList.add('formDialog'); + dlg.querySelector('.selectImageType').addEventListener('change', function () { + showIfAllowed(dlg, '.chkTitleContainer', this.value !== 'list'); + showIfAllowed(dlg, '.chkYearContainer', this.value !== 'list'); + }); - let html = ''; + dlg.querySelector('.btnCancel').addEventListener('click', function () { + dialogHelper.close(dlg); + }); - html += '
'; - html += ''; - html += '

${Settings}

'; + if (layoutManager.tv) { + centerFocus(dlg.querySelector('.formDialogContent'), false, true); + } - html += '
'; + let submitted; - html += template; + dlg.querySelector('.selectImageType').dispatchEvent(new CustomEvent('change', {})); - dlg.innerHTML = globalize.translateHtml(html, 'core'); - - const settingElements = dlg.querySelectorAll('.viewSetting'); - for (const settingElement of settingElements) { - if (options.visibleSettings.indexOf(settingElement.getAttribute('data-settingname')) === -1) { - settingElement.classList.add('hide'); - settingElement.classList.add('hiddenFromViewSettings'); - } else { - settingElement.classList.remove('hide'); - settingElement.classList.remove('hiddenFromViewSettings'); - } - } - - initEditor(dlg, options.settings); - - dlg.querySelector('.selectImageType').addEventListener('change', function () { - showIfAllowed(dlg, '.chkTitleContainer', this.value !== 'list'); - showIfAllowed(dlg, '.chkYearContainer', this.value !== 'list'); - }); - - dlg.querySelector('.btnCancel').addEventListener('click', function () { - dialogHelper.close(dlg); - }); + dlg.querySelector('form').addEventListener('change', function () { + submitted = true; + }, true); + dialogHelper.open(dlg).then(function () { if (layoutManager.tv) { - centerFocus(dlg.querySelector('.formDialogContent'), false, true); + centerFocus(dlg.querySelector('.formDialogContent'), false, false); } - let submitted; + if (submitted) { + saveValues(dlg, options.settings, options.settingsKey); + resolve(); + return; + } - dlg.querySelector('.selectImageType').dispatchEvent(new CustomEvent('change', {})); - - dlg.querySelector('form').addEventListener('change', function () { - submitted = true; - }, true); - - dialogHelper.open(dlg).then(function () { - if (layoutManager.tv) { - centerFocus(dlg.querySelector('.formDialogContent'), false, false); - } - - if (submitted) { - saveValues(dlg, options.settings, options.settingsKey); - resolve(); - return; - } - - reject(); - }); + reject(); }); }); } diff --git a/src/elements/emby-progressring/emby-progressring.js b/src/elements/emby-progressring/emby-progressring.js index af463ebe4e..40dbd064b3 100644 --- a/src/elements/emby-progressring/emby-progressring.js +++ b/src/elements/emby-progressring/emby-progressring.js @@ -1,5 +1,6 @@ import './emby-progressring.css'; import 'webcomponents.js/webcomponents-lite'; +import template from './emby-progressring.template.html'; /* eslint-disable indent */ @@ -9,28 +10,26 @@ import 'webcomponents.js/webcomponents-lite'; this.classList.add('progressring'); const instance = this; - import('./emby-progressring.template.html').then(({default: template}) => { - instance.innerHTML = template; + instance.innerHTML = template; - if (window.MutationObserver) { - // create an observer instance - const observer = new MutationObserver(function (mutations) { - mutations.forEach(function (mutation) { - instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0')); - }); + if (window.MutationObserver) { + // create an observer instance + const observer = new MutationObserver(function (mutations) { + mutations.forEach(function (mutation) { + instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0')); }); + }); - // configuration of the observer: - const config = { attributes: true, childList: false, characterData: false }; + // configuration of the observer: + const config = { attributes: true, childList: false, characterData: false }; - // pass in the target node, as well as the observer options - observer.observe(instance, config); + // pass in the target node, as well as the observer options + observer.observe(instance, config); - instance.observer = observer; - } + instance.observer = observer; + } - instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0')); - }); + instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0')); }; EmbyProgressRing.setProgress = function (progress) { From 1a0789f7b99242432385e2ae73711053f069da6a Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Wed, 25 Nov 2020 00:40:53 -0500 Subject: [PATCH 2/5] Fix lint errors --- src/components/filtermenu/filtermenu.js | 1 - src/components/guide/guide.js | 4 +--- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js index 3df956f0af..37d7860c02 100644 --- a/src/components/filtermenu/filtermenu.js +++ b/src/components/filtermenu/filtermenu.js @@ -16,7 +16,6 @@ import '../../assets/css/flexstyles.scss'; import ServerConnections from '../ServerConnections'; import template from './filtermenu.template.html'; - function onSubmit(e) { e.preventDefault(); return false; diff --git a/src/components/guide/guide.js b/src/components/guide/guide.js index 9bb13e4f26..d7d56d960b 100644 --- a/src/components/guide/guide.js +++ b/src/components/guide/guide.js @@ -27,7 +27,6 @@ import 'webcomponents.js/webcomponents-lite'; import ServerConnections from '../ServerConnections'; import template from './tvguide.template.html'; - function showViewSettings(instance) { import('./guide-settings').then(({default: guideSettingsDialog}) => { guideSettingsDialog.show(instance.categoryOptions).then(function () { @@ -144,7 +143,6 @@ function Guide(options) { let autoRefreshInterval; let programCells; let lastFocusDirection; - let programGrid; self.refresh = function () { currentDate = null; @@ -1100,7 +1098,7 @@ function Guide(options) { context.innerHTML = globalize.translateHtml(template, 'core'); - programGrid = context.querySelector('.programGrid'); + const programGrid = context.querySelector('.programGrid'); const timeslotHeaders = context.querySelector('.timeslotHeaders'); if (layoutManager.tv) { From 2d97a56f51da94d52fe83a6eb3995ca1616e4686 Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Wed, 25 Nov 2020 10:28:41 -0500 Subject: [PATCH 3/5] Fix code smells --- src/components/dialog/dialog.js | 6 ++-- src/components/guide/guide.js | 36 +++++++++---------- src/components/itemMediaInfo/itemMediaInfo.js | 6 ++-- src/components/prompt/prompt.js | 18 +++++----- .../subtitleeditor/subtitleeditor.js | 6 ++-- 5 files changed, 32 insertions(+), 40 deletions(-) diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js index ce0a8487bd..f1475be979 100644 --- a/src/components/dialog/dialog.js +++ b/src/components/dialog/dialog.js @@ -13,7 +13,7 @@ import template from './dialog.template.html'; /* eslint-disable indent */ - function showDialog(options, template) { + function showDialog(options) { const dialogOptions = { removeOnClose: true, scrollY: false @@ -129,9 +129,7 @@ import template from './dialog.template.html'; options = text; } - return new Promise((resolve, reject) => { - showDialog(options, template).then(resolve, reject); - }); + return showDialog(options); } /* eslint-enable indent */ diff --git a/src/components/guide/guide.js b/src/components/guide/guide.js index d7d56d960b..5320a7288e 100644 --- a/src/components/guide/guide.js +++ b/src/components/guide/guide.js @@ -1092,17 +1092,17 @@ function Guide(options) { } } - const context = options.element; + const guideContext = options.element; - context.classList.add('tvguide'); + guideContext.classList.add('tvguide'); - context.innerHTML = globalize.translateHtml(template, 'core'); + guideContext.innerHTML = globalize.translateHtml(template, 'core'); - const programGrid = context.querySelector('.programGrid'); - const timeslotHeaders = context.querySelector('.timeslotHeaders'); + const programGrid = guideContext.querySelector('.programGrid'); + const timeslotHeaders = guideContext.querySelector('.timeslotHeaders'); if (layoutManager.tv) { - dom.addEventListener(context.querySelector('.guideVerticalScroller'), 'focus', onScrollerFocus, { + dom.addEventListener(guideContext.querySelector('.guideVerticalScroller'), 'focus', onScrollerFocus, { capture: true, passive: true }); @@ -1111,43 +1111,43 @@ function Guide(options) { } if (browser.iOS || browser.osx) { - context.querySelector('.channelsContainer').classList.add('noRubberBanding'); + guideContext.querySelector('.channelsContainer').classList.add('noRubberBanding'); programGrid.classList.add('noRubberBanding'); } dom.addEventListener(programGrid, 'scroll', function (e) { - onProgramGridScroll(context, this, timeslotHeaders); + onProgramGridScroll(guideContext, this, timeslotHeaders); }, { passive: true }); dom.addEventListener(timeslotHeaders, 'scroll', function () { - onTimeslotHeadersScroll(context, this); + onTimeslotHeadersScroll(guideContext, this); }, { passive: true }); programGrid.addEventListener('click', onProgramGridClick); - context.querySelector('.btnNextPage').addEventListener('click', function () { + guideContext.querySelector('.btnNextPage').addEventListener('click', function () { currentStartIndex += currentChannelLimit; - reloadPage(context); + reloadPage(guideContext); restartAutoRefresh(); }); - context.querySelector('.btnPreviousPage').addEventListener('click', function () { + guideContext.querySelector('.btnPreviousPage').addEventListener('click', function () { currentStartIndex = Math.max(currentStartIndex - currentChannelLimit, 0); - reloadPage(context); + reloadPage(guideContext); restartAutoRefresh(); }); - context.querySelector('.btnGuideViewSettings').addEventListener('click', function () { + guideContext.querySelector('.btnGuideViewSettings').addEventListener('click', function () { showViewSettings(self); restartAutoRefresh(); }); - context.querySelector('.guideDateTabs').addEventListener('tabchange', function (e) { + guideContext.querySelector('.guideDateTabs').addEventListener('tabchange', function (e) { const allTabButtons = e.target.querySelectorAll('.guide-date-tab-button'); const tabButton = allTabButtons[parseInt(e.detail.selectedTabIndex)]; @@ -1176,12 +1176,12 @@ function Guide(options) { let startTimeOfDayMs = (date.getHours() * 60 * 60 * 1000); startTimeOfDayMs += (date.getMinutes() * 60 * 1000); - changeDate(context, date, scrollToTimeMs, scrollToTimeMs, startTimeOfDayMs, false); + changeDate(guideContext, date, scrollToTimeMs, scrollToTimeMs, startTimeOfDayMs, false); } }); - setScrollEvents(context, true); - itemShortcuts.on(context); + setScrollEvents(guideContext, true); + itemShortcuts.on(guideContext); Events.trigger(self, 'load'); diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js index cef371992d..37e28ec4d5 100644 --- a/src/components/itemMediaInfo/itemMediaInfo.js +++ b/src/components/itemMediaInfo/itemMediaInfo.js @@ -163,7 +163,7 @@ import template from './itemMediaInfo.template.html'; return `${label}${value}`; } - function loadMediaInfo(itemId, serverId, template) { + function loadMediaInfo(itemId, serverId) { const apiClient = ServerConnections.getApiClient(serverId); return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => { const dialogOptions = { @@ -195,9 +195,7 @@ import template from './itemMediaInfo.template.html'; export function show(itemId, serverId) { loading.show(); - return new Promise((resolve, reject) => { - loadMediaInfo(itemId, serverId, template).then(resolve, reject); - }); + return loadMediaInfo(itemId, serverId); } /* eslint-enable indent */ diff --git a/src/components/prompt/prompt.js b/src/components/prompt/prompt.js index 04391101f0..1a919ca025 100644 --- a/src/components/prompt/prompt.js +++ b/src/components/prompt/prompt.js @@ -28,7 +28,7 @@ export default (() => { txtInput.value = options.value || ''; } - function showDialog(options, template) { + function showDialog(options) { const dialogOptions = { removeOnClose: true, scrollY: false @@ -117,15 +117,13 @@ export default (() => { }; } else { return options => { - return new Promise((resolve, reject) => { - if (typeof options === 'string') { - options = { - title: '', - text: options - }; - } - showDialog(options, template).then(resolve, reject); - }); + if (typeof options === 'string') { + options = { + title: '', + text: options + }; + } + return showDialog(options); }; } })(); diff --git a/src/components/subtitleeditor/subtitleeditor.js b/src/components/subtitleeditor/subtitleeditor.js index fdbda7e649..5e026538e3 100644 --- a/src/components/subtitleeditor/subtitleeditor.js +++ b/src/components/subtitleeditor/subtitleeditor.js @@ -375,7 +375,7 @@ function onOpenUploadMenu(e) { }); } -function showEditorInternal(itemId, serverId, template) { +function showEditorInternal(itemId, serverId) { hasChanges = false; const apiClient = ServerConnections.getApiClient(serverId); @@ -454,9 +454,7 @@ function showEditorInternal(itemId, serverId, template) { function showEditor(itemId, serverId) { loading.show(); - return new Promise(function (resolve, reject) { - showEditorInternal(itemId, serverId, template).then(resolve, reject); - }); + return showEditorInternal(itemId, serverId); } export default { From 7c46427761e82bd63b0a7a7b7aa7e6a77bca7acd Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Wed, 25 Nov 2020 10:34:49 -0500 Subject: [PATCH 4/5] Fix another code smell --- src/components/guide/guide.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/guide/guide.js b/src/components/guide/guide.js index 5320a7288e..2bc2e966b0 100644 --- a/src/components/guide/guide.js +++ b/src/components/guide/guide.js @@ -772,13 +772,13 @@ function Guide(options) { let lastGridScroll = 0; let lastHeaderScroll = 0; let scrollXPct = 0; - function onProgramGridScroll(context, elem, timeslotHeaders) { + function onProgramGridScroll(context, elem, headers) { if ((new Date().getTime() - lastHeaderScroll) >= 1000) { lastGridScroll = new Date().getTime(); const scrollLeft = elem.scrollLeft; scrollXPct = (scrollLeft * 100) / elem.scrollWidth; - nativeScrollTo(timeslotHeaders, scrollLeft, true); + nativeScrollTo(headers, scrollLeft, true); } updateProgramCellsOnScroll(elem, programCells); From db6cfba9c7df06ee391546595ccb019c14ede293 Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Wed, 25 Nov 2020 15:13:03 -0500 Subject: [PATCH 5/5] Remove unneeded async --- src/components/dialog/dialog.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js index f1475be979..5d32abc596 100644 --- a/src/components/dialog/dialog.js +++ b/src/components/dialog/dialog.js @@ -118,7 +118,7 @@ import template from './dialog.template.html'; }); } - export async function show(text, title) { + export function show(text, title) { let options; if (typeof text === 'string') { options = {