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

Use static imports for html templates

Browse source
This commit is contained in:
Bill Thornton 2020-11-25 00:17:24 -05:00
parent 75e1fc4605
commit d8f2cc1245
31 changed files with 1010 additions and 1041 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/components/accessSchedule/accessSchedule.js
View file

@ -12,6 +12,7 @@ import globalize from '../../scripts/globalize';
import '../../elements/emby-select/emby-select'; import '../../elements/emby-select/emby-select';
import '../../elements/emby-button/paper-icon-button-light'; import '../../elements/emby-button/paper-icon-button-light';
import '../formdialog.css'; import '../formdialog.css';
import template from './accessSchedule.template.html';
function getDisplayTime(hours) { function getDisplayTime(hours) {
let minutes = 0; let minutes = 0;
@ -60,33 +61,31 @@ import '../formdialog.css';
export function show(options) { export function show(options) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
import('./accessSchedule.template.html').then(({default: template}) => { const dlg = dialogHelper.createDialog({
const dlg = dialogHelper.createDialog({ removeOnClose: true,
removeOnClose: true, size: 'small'
size: 'small' });
}); dlg.classList.add('formDialog');
dlg.classList.add('formDialog'); let html = '';
let html = ''; html += globalize.translateHtml(template);
html += globalize.translateHtml(template); dlg.innerHTML = html;
dlg.innerHTML = html; populateHours(dlg);
populateHours(dlg); loadSchedule(dlg, options.schedule);
loadSchedule(dlg, options.schedule); dialogHelper.open(dlg);
dialogHelper.open(dlg); dlg.addEventListener('close', () => {
dlg.addEventListener('close', () => { if (dlg.submitted) {
if (dlg.submitted) { resolve(options.schedule);
resolve(options.schedule); } else {
} else { reject();
reject(); }
} });
}); dlg.querySelector('.btnCancel').addEventListener('click', () => {
dlg.querySelector('.btnCancel').addEventListener('click', () => { dialogHelper.close(dlg);
dialogHelper.close(dlg); });
}); dlg.querySelector('form').addEventListener('submit', event => {
dlg.querySelector('form').addEventListener('submit', event => { submitSchedule(dlg, options);
submitSchedule(dlg, options); event.preventDefault();
event.preventDefault(); return false;
return false;
});
}); });
}); });
} }

2
src/components/dialog/dialog.js
View file

@ -9,6 +9,7 @@ import '../../elements/emby-button/paper-icon-button-light';
import '../../elements/emby-input/emby-input'; import '../../elements/emby-input/emby-input';
import '../formdialog.css'; import '../formdialog.css';
import '../../assets/css/flexstyles.scss'; import '../../assets/css/flexstyles.scss';
import template from './dialog.template.html';
/* eslint-disable indent */ /* eslint-disable indent */
@ -128,7 +129,6 @@ import '../../assets/css/flexstyles.scss';
options = text; options = text;
} }
const { default: template } = await import('./dialog.template.html');
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
showDialog(options, template).then(resolve, reject); showDialog(options, template).then(resolve, reject);
}); });

4
src/components/displaySettings/displaySettings.js
View file

@ -13,6 +13,7 @@ import '../../elements/emby-checkbox/emby-checkbox';
import '../../elements/emby-button/emby-button'; import '../../elements/emby-button/emby-button';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import toast from '../toast/toast'; import toast from '../toast/toast';
import template from './displaySettings.template.html';
/* eslint-disable indent */ /* eslint-disable indent */
@ -197,8 +198,7 @@ import toast from '../toast/toast';
return false; return false;
} }
async function embed(options, self) { function embed(options, self) {
const { default: template } = await import('./displaySettings.template.html');
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) { if (options.enableSaveButton) {

41
src/components/filterdialog/filterdialog.js
View file

@ -6,6 +6,7 @@ import '../../elements/emby-checkbox/emby-checkbox';
import '../../elements/emby-collapse/emby-collapse'; import '../../elements/emby-collapse/emby-collapse';
import './style.css'; import './style.css';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import template from './filterdialog.template.html';
/* eslint-disable indent */ /* eslint-disable indent */
function renderOptions(context, selector, cssClass, items, isCheckedFn) { function renderOptions(context, selector, cssClass, items, isCheckedFn) {
@ -402,28 +403,26 @@ import ServerConnections from '../ServerConnections';
} }
show() { show() {
return import('./filterdialog.template.html').then(({default: template}) => { return new Promise((resolve) => {
return new Promise((resolve) => { const dlg = dialogHelper.createDialog({
const dlg = dialogHelper.createDialog({ removeOnClose: true,
removeOnClose: true, modal: false
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);
}
}); });
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);
}
}); });
} }
} }

112
src/components/filtermenu/filtermenu.js
View file

@ -14,6 +14,8 @@ import 'material-design-icons-iconfont';
import '../formdialog.css'; import '../formdialog.css';
import '../../assets/css/flexstyles.scss'; import '../../assets/css/flexstyles.scss';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import template from './filtermenu.template.html';
function onSubmit(e) { function onSubmit(e) {
e.preventDefault(); e.preventDefault();
@ -210,75 +212,73 @@ function loadDynamicFilters(context, options) {
class FilterMenu { class FilterMenu {
show(options) { show(options) {
return new Promise( (resolve, reject) => { return new Promise( (resolve, reject) => {
import('./filtermenu.template.html').then(({ default: template }) => { const dialogOptions = {
const dialogOptions = { removeOnClose: true,
removeOnClose: true, scrollY: false
scrollY: false };
}; if (layoutManager.tv) {
if (layoutManager.tv) { dialogOptions.size = 'fullscreen';
dialogOptions.size = 'fullscreen'; } else {
dialogOptions.size = 'small';
}
const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog');
let html = '';
html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">${Filters}</h3>';
html += '</div>';
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 { } 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 += '<div class="formDialogHeader">'; let submitted;
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">${Filters}</h3>';
html += '</div>'; dlg.querySelector('form').addEventListener('change', function () {
submitted = true;
}, true);
html += template; dialogHelper.open(dlg).then( function() {
bindCheckboxInput(dlg, false);
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);
});
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.formDialogContent'), false, true); centerFocus(dlg.querySelector('.formDialogContent'), false, false);
} }
let submitted; if (submitted) {
//if (!options.onChange) {
dlg.querySelector('form').addEventListener('change', function () { saveValues(dlg, options.settings, options.settingsKey);
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();
//}
}
return resolve(); return resolve();
}); //}
}
return resolve();
}); });
}); });
} }

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

@ -7,6 +7,7 @@ import '../../elements/emby-checkbox/emby-checkbox';
import '../../elements/emby-radio/emby-radio'; import '../../elements/emby-radio/emby-radio';
import '../formdialog.css'; import '../formdialog.css';
import 'material-design-icons-iconfont'; import 'material-design-icons-iconfont';
import template from './guide-settings.template.html';
function saveCategories(context, options) { function saveCategories(context, options) {
const categories = []; const categories = [];
@ -88,59 +89,57 @@ function showEditor(options) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
let settingsChanged = false; let settingsChanged = false;
import('./guide-settings.template.html').then(({ default: template }) => { const dialogOptions = {
const dialogOptions = { removeOnClose: true,
removeOnClose: true, scrollY: false
scrollY: false };
};
if (layoutManager.tv) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} else { } else {
dialogOptions.size = 'small'; 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 () { dlg.addEventListener('change', function () {
settingsChanged = true; 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('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);
}); });
} }

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

@ -25,6 +25,8 @@ import '../../elements/emby-scroller/emby-scroller';
import '../../assets/css/flexstyles.scss'; import '../../assets/css/flexstyles.scss';
import 'webcomponents.js/webcomponents-lite'; import 'webcomponents.js/webcomponents-lite';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import template from './tvguide.template.html';
function showViewSettings(instance) { function showViewSettings(instance) {
import('./guide-settings').then(({default: guideSettingsDialog}) => { 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'); programGrid = context.querySelector('.programGrid');
const timeslotHeaders = context.querySelector('.timeslotHeaders'); const timeslotHeaders = context.querySelector('.timeslotHeaders');
if (layoutManager.tv) { if (layoutManager.tv) {
dom.addEventListener(context.querySelector('.guideVerticalScroller'), 'focus', onScrollerFocus, { dom.addEventListener(context.querySelector('.guideVerticalScroller'), 'focus', onScrollerFocus, {
capture: true, 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);
}, {
passive: true passive: true
}); });
} else if (layoutManager.desktop) {
timeslotHeaders.classList.add('timeslotHeaders-desktop');
}
dom.addEventListener(timeslotHeaders, 'scroll', function () { if (browser.iOS || browser.osx) {
onTimeslotHeadersScroll(context, this); context.querySelector('.channelsContainer').classList.add('noRubberBanding');
}, {
passive: true
});
programGrid.addEventListener('click', onProgramGridClick); programGrid.classList.add('noRubberBanding');
}
context.querySelector('.btnNextPage').addEventListener('click', function () { dom.addEventListener(programGrid, 'scroll', function (e) {
currentStartIndex += currentChannelLimit; onProgramGridScroll(context, this, timeslotHeaders);
reloadPage(context); }, {
restartAutoRefresh(); passive: true
});
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(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; export default Guide;

36
src/components/homeScreenSettings/homeScreenSettings.js
View file

@ -11,6 +11,7 @@ import '../../elements/emby-select/emby-select';
import '../../elements/emby-checkbox/emby-checkbox'; import '../../elements/emby-checkbox/emby-checkbox';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import toast from '../toast/toast'; import toast from '../toast/toast';
import template from './homeScreenSettings.template.html';
/* eslint-disable indent */ /* eslint-disable indent */
@ -418,29 +419,28 @@ import toast from '../toast/toast';
} }
function embed(options, self) { function embed(options, self) {
return import('./homeScreenSettings.template.html').then(({default: template}) => { let workingTemplate = template;
for (let i = 1; i <= numConfigurableSections; i++) { for (let i = 1; i <= numConfigurableSections; i++) {
template = template.replace(`{section${i}label}`, globalize.translate('LabelHomeScreenSectionValue', 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('.viewOrderList').addEventListener('click', onSectionOrderListClick);
options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
options.element.addEventListener('change', onChange); options.element.addEventListener('change', onChange);
if (options.enableSaveButton) { if (options.enableSaveButton) {
options.element.querySelector('.btnSave').classList.remove('hide'); options.element.querySelector('.btnSave').classList.remove('hide');
} }
if (layoutManager.tv) { if (layoutManager.tv) {
options.element.querySelector('.selectTVHomeScreenContainer').classList.remove('hide'); options.element.querySelector('.selectTVHomeScreenContainer').classList.remove('hide');
} else { } else {
options.element.querySelector('.selectTVHomeScreenContainer').classList.add('hide'); options.element.querySelector('.selectTVHomeScreenContainer').classList.add('hide');
} }
self.loadData(options.autoFocus); self.loadData(options.autoFocus);
});
} }
class HomeScreenSettings { class HomeScreenSettings {

53
src/components/imageDownloader/imageDownloader.js
View file

@ -13,6 +13,7 @@ import '../../elements/emby-button/emby-button';
import '../formdialog.css'; import '../formdialog.css';
import '../cardbuilder/card.css'; import '../cardbuilder/card.css';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import template from './imageDownloader.template.html';
/* eslint-disable indent */ /* eslint-disable indent */
@ -316,44 +317,42 @@ import ServerConnections from '../ServerConnections';
function showEditor(itemId, serverId, itemType) { function showEditor(itemId, serverId, itemType) {
loading.show(); loading.show();
import('./imageDownloader.template.html').then(({default: template}) => { const apiClient = ServerConnections.getApiClient(serverId);
const apiClient = ServerConnections.getApiClient(serverId);
currentItemId = itemId; currentItemId = itemId;
currentItemType = itemType; currentItemType = itemType;
const dialogOptions = { const dialogOptions = {
removeOnClose: true removeOnClose: true
}; };
if (layoutManager.tv) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} else { } else {
dialogOptions.size = 'small'; 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) { if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg, false); scrollHelper.centerFocus.on(dlg, false);
} }
// Has to be assigned a z-index after the call to .open() // Has to be assigned a z-index after the call to .open()
dlg.addEventListener('close', onDialogClosed); dlg.addEventListener('close', onDialogClosed);
dialogHelper.open(dlg); dialogHelper.open(dlg);
const editorContent = dlg.querySelector('.formDialogContent'); const editorContent = dlg.querySelector('.formDialogContent');
initEditor(editorContent, apiClient); initEditor(editorContent, apiClient);
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', function () {
dialogHelper.close(dlg); dialogHelper.close(dlg);
});
reloadBrowsableImages(editorContent, apiClient);
}); });
reloadBrowsableImages(editorContent, apiClient);
} }
function onDialogClosed() { function onDialogClosed() {

67
src/components/imageUploader/imageUploader.js
View file

@ -17,6 +17,7 @@ import '../formdialog.css';
import './style.css'; import './style.css';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import toast from '../toast/toast'; import toast from '../toast/toast';
import template from './imageUploader.template.html';
let currentItemId; let currentItemId;
let currentServerId; let currentServerId;
@ -128,49 +129,47 @@ import toast from '../toast/toast';
function showEditor(options, resolve) { function showEditor(options, resolve) {
options = options || {}; options = options || {};
return import('./imageUploader.template.html').then(({default: template}) => { currentItemId = options.itemId;
currentItemId = options.itemId; currentServerId = options.serverId;
currentServerId = options.serverId;
const dialogOptions = { const dialogOptions = {
removeOnClose: true 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) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; scrollHelper.centerFocus.off(dlg, false);
} else {
dialogOptions.size = 'small';
} }
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) { dlg.querySelector('#selectImageType').value = options.imageType || 'Primary';
scrollHelper.centerFocus.on(dlg, false);
}
// Has to be assigned a z-index after the call to .open() dlg.querySelector('.btnCancel').addEventListener('click', () => {
dlg.addEventListener('close', () => { dialogHelper.close(dlg);
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);
});
}); });
} }

79
src/components/imageeditor/imageeditor.js
View file

@ -16,6 +16,7 @@ import './imageeditor.css';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import alert from '../alert'; import alert from '../alert';
import confirm from '../confirm/confirm'; import confirm from '../confirm/confirm';
import template from './imageeditor.template.html';
/* eslint-disable indent */ /* eslint-disable indent */
@ -419,53 +420,51 @@ import confirm from '../confirm/confirm';
loading.show(); loading.show();
import('./imageeditor.template.html').then(({default: template}) => { const apiClient = ServerConnections.getApiClient(serverId);
const apiClient = ServerConnections.getApiClient(serverId); apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { const dialogOptions = {
const dialogOptions = { removeOnClose: true
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) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; scrollHelper.centerFocus.off(dlg, false);
}
loading.hide();
if (hasChanges) {
resolve();
} else { } 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'); dlg.querySelector('.btnCancel').addEventListener('click', function () {
dialogHelper.close(dlg);
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);
});
}); });
}); });
} }

7
src/components/itemMediaInfo/itemMediaInfo.js
View file

@ -17,6 +17,7 @@ import '../formdialog.css';
import 'material-design-icons-iconfont'; import 'material-design-icons-iconfont';
import '../../assets/css/flexstyles.scss'; import '../../assets/css/flexstyles.scss';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import template from './itemMediaInfo.template.html';
function setMediaInfo(user, page, item) { function setMediaInfo(user, page, item) {
let html = item.MediaSources.map(version => { let html = item.MediaSources.map(version => {
@ -194,10 +195,8 @@ import ServerConnections from '../ServerConnections';
export function show(itemId, serverId) { export function show(itemId, serverId) {
loading.show(); loading.show();
return import('./itemMediaInfo.template.html').then(({default: template}) => { return new Promise((resolve, reject) => {
return new Promise((resolve, reject) => { loadMediaInfo(itemId, serverId, template).then(resolve, reject);
loadMediaInfo(itemId, serverId, template).then(resolve, reject);
});
}); });
} }

177
src/components/itemidentifier/itemidentifier.js
View file

@ -20,6 +20,7 @@ import 'material-design-icons-iconfont';
import '../cardbuilder/card.css'; import '../cardbuilder/card.css';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import toast from '../toast/toast'; import toast from '../toast/toast';
import template from './itemidentifier.template.html';
const enableFocusTransform = !browser.slow && !browser.edge; const enableFocusTransform = !browser.slow && !browser.edge;
@ -334,89 +335,12 @@ import toast from '../toast/toast';
function showEditor(itemId) { function showEditor(itemId) {
loading.show(); loading.show();
return import('./itemidentifier.template.html').then(({default: template}) => { const apiClient = getApiClient();
const apiClient = getApiClient();
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => { apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
currentItem = item; currentItem = item;
currentItemType = currentItem.Type; 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 = { const dialogOptions = {
size: 'small', size: 'small',
removeOnClose: true, removeOnClose: true,
@ -437,15 +361,22 @@ import toast from '../toast/toast';
dlg.innerHTML = html; dlg.innerHTML = html;
// Has to be assigned a z-index after the call to .open()
dlg.addEventListener('close', onDialogClosed);
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false); 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', () => { dlg.querySelector('.txtPath').innerHTML = item.Path || '';
dialogHelper.close(dlg);
}); dialogHelper.open(dlg);
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => { dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => {
e.preventDefault(); e.preventDefault();
@ -453,19 +384,85 @@ import toast from '../toast/toast';
return false; return false;
}); });
dlg.addEventListener('close', () => { dlg.querySelector('.identifyOptionsForm').addEventListener('submit', e => {
loading.hide(); e.preventDefault();
const foundItem = hasChanges ? currentSearchResult : null; submitIdentficationResult(dlg);
return false;
});
resolveFunc(foundItem); dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg);
}); });
dlg.classList.add('identifyDialog'); 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) { function showIdentificationFormFindNew(dlg, itemName, itemYear, itemType) {
dlg.querySelector('#txtLookupName').value = itemName; dlg.querySelector('#txtLookupName').value = itemName;

3
src/components/libraryoptionseditor/libraryoptionseditor.js
View file

@ -10,6 +10,7 @@ import dom from '../../scripts/dom';
import '../../elements/emby-checkbox/emby-checkbox'; import '../../elements/emby-checkbox/emby-checkbox';
import '../../elements/emby-select/emby-select'; import '../../elements/emby-select/emby-select';
import '../../elements/emby-input/emby-input'; import '../../elements/emby-input/emby-input';
import template from './libraryoptionseditor.template.html';
function populateLanguages(parent) { function populateLanguages(parent) {
return ApiClient.getCultures().then(languages => { return ApiClient.getCultures().then(languages => {
@ -363,8 +364,6 @@ import '../../elements/emby-input/emby-input';
const isNewLibrary = libraryOptions === null; const isNewLibrary = libraryOptions === null;
isNewLibrary && parent.classList.add('newlibrary'); isNewLibrary && parent.classList.add('newlibrary');
const { default: template } = await import('./libraryoptionseditor.template.html');
parent.innerHTML = globalize.translateHtml(template); parent.innerHTML = globalize.translateHtml(template);
populateRefreshInterval(parent.querySelector('#selectAutoRefreshInterval')); populateRefreshInterval(parent.querySelector('#selectAutoRefreshInterval'));
const promises = [populateLanguages(parent), populateCountries(parent.querySelector('#selectCountry'))]; const promises = [populateLanguages(parent), populateCountries(parent.querySelector('#selectCountry'))];

41
src/components/mediaLibraryCreator/mediaLibraryCreator.js
View file

@ -21,6 +21,7 @@ import '../formdialog.css';
import '../../assets/css/flexstyles.scss'; import '../../assets/css/flexstyles.scss';
import toast from '../toast/toast'; import toast from '../toast/toast';
import alert from '../alert'; import alert from '../alert';
import template from './mediaLibraryCreator.template.html';
function onAddLibrary() { function onAddLibrary() {
if (isCreating) { if (isCreating) {
@ -191,28 +192,26 @@ export class showEditor {
currentOptions = options; currentOptions = options;
currentResolve = resolve; currentResolve = resolve;
hasChanges = false; hasChanges = false;
import('./mediaLibraryCreator.template.html').then(({default: template}) => { const dlg = dialogHelper.createDialog({
const dlg = dialogHelper.createDialog({ size: 'small',
size: 'small', modal: false,
modal: false, removeOnClose: true,
removeOnClose: true, scrollY: false
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);
}); });
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);
}); });
} }
} }

39
src/components/mediaLibraryEditor/mediaLibraryEditor.js
View file

@ -19,6 +19,7 @@ import '../../elements/emby-toggle/emby-toggle';
import '../../assets/css/flexstyles.scss'; import '../../assets/css/flexstyles.scss';
import toast from '../toast/toast'; import toast from '../toast/toast';
import confirm from '../confirm/confirm'; import confirm from '../confirm/confirm';
import template from './mediaLibraryEditor.template.html';
function onEditLibrary() { function onEditLibrary() {
if (isCreating) { if (isCreating) {
@ -201,27 +202,25 @@ export class showEditor {
currentOptions = options; currentOptions = options;
currentDeferred = deferred; currentDeferred = deferred;
hasChanges = false; hasChanges = false;
import('./mediaLibraryEditor.template.html').then(({default: template}) => { const dlg = dialogHelper.createDialog({
const dlg = dialogHelper.createDialog({ size: 'small',
size: 'small', modal: false,
modal: false, removeOnClose: true,
removeOnClose: true, scrollY: false
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);
}); });
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(); return deferred.promise();
} }
} }

93
src/components/metadataEditor/metadataEditor.js
View file

@ -19,6 +19,7 @@ import '../../assets/css/flexstyles.scss';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import toast from '../toast/toast'; import toast from '../toast/toast';
import { appRouter } from '../appRouter'; import { appRouter } from '../appRouter';
import template from './metadataEditor.template.html';
/* eslint-disable indent */ /* eslint-disable indent */
@ -1028,48 +1029,46 @@ import { appRouter } from '../appRouter';
function show(itemId, serverId, resolve, reject) { function show(itemId, serverId, resolve, reject) {
loading.show(); loading.show();
import('./metadataEditor.template.html').then(({default: template}) => { const dialogOptions = {
const dialogOptions = { removeOnClose: true,
removeOnClose: true, scrollY: false
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) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; centerFocus(dlg.querySelector('.formDialogContent'), false, false);
} else {
dialogOptions.size = 'small';
} }
const dlg = dialogHelper.createDialog(dialogOptions); resolve();
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);
}); });
currentContext = dlg;
init(dlg, ServerConnections.getApiClient(serverId));
reload(dlg, itemId, serverId);
} }
export default { export default {
@ -1083,21 +1082,19 @@ import { appRouter } from '../appRouter';
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
loading.show(); 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('.formDialogFooter').classList.remove('formDialogFooter');
elem.querySelector('.btnClose').classList.add('hide'); elem.querySelector('.btnClose').classList.add('hide');
elem.querySelector('.btnHeaderSave').classList.remove('hide'); elem.querySelector('.btnHeaderSave').classList.remove('hide');
elem.querySelector('.btnCancel').classList.add('hide'); elem.querySelector('.btnCancel').classList.add('hide');
currentContext = elem; currentContext = elem;
init(elem, ServerConnections.getApiClient(serverId)); init(elem, ServerConnections.getApiClient(serverId));
reload(elem, itemId, serverId); reload(elem, itemId, serverId);
focusManager.autoFocus(elem); focusManager.autoFocus(elem);
});
}); });
} }
}; };

137
src/components/metadataEditor/personEditor.js
View file

@ -6,6 +6,7 @@ import '../../elements/emby-button/paper-icon-button-light';
import '../../elements/emby-input/emby-input'; import '../../elements/emby-input/emby-input';
import '../../elements/emby-select/emby-select'; import '../../elements/emby-select/emby-select';
import '../formdialog.css'; import '../formdialog.css';
import template from './personEditor.template.html';
/* eslint-disable indent */ /* eslint-disable indent */
@ -18,80 +19,78 @@ import '../formdialog.css';
function show(person) { function show(person) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
import('./personEditor.template.html').then(({default: template}) => { const dialogOptions = {
const dialogOptions = { removeOnClose: true,
removeOnClose: true, scrollY: false
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) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; centerFocus(dlg.querySelector('.formDialogContent'), false, false);
}
if (submitted) {
resolve(person);
} else { } 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
}));
}); });
} }

21
src/components/playbackSettings/playbackSettings.js
View file

@ -10,6 +10,7 @@ import '../../elements/emby-select/emby-select';
import '../../elements/emby-checkbox/emby-checkbox'; import '../../elements/emby-checkbox/emby-checkbox';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import toast from '../toast/toast'; import toast from '../toast/toast';
import template from './playbackSettings.template.html';
/* eslint-disable indent */ /* eslint-disable indent */
@ -278,21 +279,19 @@ import toast from '../toast/toast';
} }
function embed(options, self) { 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) { if (options.enableSaveButton) {
options.element.querySelector('.btnSave').classList.remove('hide'); options.element.querySelector('.btnSave').classList.remove('hide');
} }
self.loadData(); self.loadData();
if (options.autoFocus) { if (options.autoFocus) {
focusManager.autoFocus(options.element); focusManager.autoFocus(options.element);
} }
});
} }
class PlaybackSettings { class PlaybackSettings {

17
src/components/prompt/prompt.js
View file

@ -9,6 +9,7 @@ import '../../elements/emby-button/emby-button';
import '../../elements/emby-button/paper-icon-button-light'; import '../../elements/emby-button/paper-icon-button-light';
import '../../elements/emby-input/emby-input'; import '../../elements/emby-input/emby-input';
import '../formdialog.css'; import '../formdialog.css';
import template from './prompt.template.html';
/* eslint-disable indent */ /* eslint-disable indent */
export default (() => { export default (() => {
@ -117,15 +118,13 @@ export default (() => {
} else { } else {
return options => { return options => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
import('./prompt.template.html').then(({default: template}) => { if (typeof options === 'string') {
if (typeof options === 'string') { options = {
options = { title: '',
title: '', text: options
text: options };
}; }
} showDialog(options, template).then(resolve, reject);
showDialog(options, template).then(resolve, reject);
});
}); });
}; };
} }

107
src/components/recordingcreator/recordingcreator.js
View file

@ -18,6 +18,7 @@ import './recordingcreator.css';
import 'material-design-icons-iconfont'; import 'material-design-icons-iconfont';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import { playbackManager } from '../playback/playbackmanager'; import { playbackManager } from '../playback/playbackmanager';
import template from './recordingcreator.template.html';
let currentDialog; let currentDialog;
let closeAction; let closeAction;
@ -136,64 +137,62 @@ function showEditor(itemId, serverId) {
loading.show(); loading.show();
import('./recordingcreator.template.html').then(({ default: template }) => { const dialogOptions = {
const dialogOptions = { removeOnClose: true,
removeOnClose: true, scrollY: false
scrollY: false };
};
if (layoutManager.tv) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; 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 { } 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);
}); });
} }

107
src/components/recordingcreator/recordingeditor.js
View file

@ -14,6 +14,7 @@ import './recordingcreator.css';
import 'material-design-icons-iconfont'; import 'material-design-icons-iconfont';
import '../../assets/css/flexstyles.scss'; import '../../assets/css/flexstyles.scss';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import template from './recordingeditor.template.html';
let currentDialog; let currentDialog;
let recordingDeleted = false; let recordingDeleted = false;
@ -91,63 +92,61 @@ function showEditor(itemId, serverId, options) {
options = options || {}; options = options || {};
currentResolve = resolve; currentResolve = resolve;
import('./recordingeditor.template.html').then(({default: template}) => { const dialogOptions = {
const dialogOptions = { removeOnClose: true,
removeOnClose: true, scrollY: false
scrollY: false };
};
if (layoutManager.tv) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; 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);
}); });
} }

19
src/components/recordingcreator/recordingfields.js
View file

@ -10,6 +10,7 @@ import './recordingfields.css';
import '../../assets/css/flexstyles.scss'; import '../../assets/css/flexstyles.scss';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import toast from '../toast/toast'; import toast from '../toast/toast';
import template from './recordingfields.template.html';
/*eslint prefer-const: "error"*/ /*eslint prefer-const: "error"*/
@ -119,18 +120,16 @@ class RecordingEditor {
embed() { embed() {
const self = this; const self = this;
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
import('./recordingfields.template.html').then(({default: template}) => { const options = self.options;
const options = self.options; const context = options.parent;
const context = options.parent; context.innerHTML = globalize.translateHtml(template, 'core');
context.innerHTML = globalize.translateHtml(template, 'core');
context.querySelector('.singleRecordingButton').addEventListener('click', onRecordChange.bind(self)); context.querySelector('.singleRecordingButton').addEventListener('click', onRecordChange.bind(self));
context.querySelector('.seriesRecordingButton').addEventListener('click', onRecordSeriesChange.bind(self)); context.querySelector('.seriesRecordingButton').addEventListener('click', onRecordSeriesChange.bind(self));
context.querySelector('.btnManageRecording').addEventListener('click', onManageRecordingClick.bind(self)); context.querySelector('.btnManageRecording').addEventListener('click', onManageRecordingClick.bind(self));
context.querySelector('.btnManageSeriesRecording').addEventListener('click', onManageSeriesRecordingClick.bind(self)); context.querySelector('.btnManageSeriesRecording').addEventListener('click', onManageSeriesRecordingClick.bind(self));
fetchData(self).then(resolve); fetchData(self).then(resolve);
});
}); });
} }

159
src/components/recordingcreator/seriesrecordingeditor.js
View file

@ -15,6 +15,7 @@ import './recordingcreator.css';
import 'material-design-icons-iconfont'; import 'material-design-icons-iconfont';
import '../../assets/css/flexstyles.scss'; import '../../assets/css/flexstyles.scss';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import template from './seriesrecordingeditor.template.html';
/*eslint prefer-const: "error"*/ /*eslint prefer-const: "error"*/
@ -151,7 +152,46 @@ function embed(itemId, serverId, options) {
loading.show(); loading.show();
options = options || {}; 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 = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -163,96 +203,53 @@ function embed(itemId, serverId, options) {
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
const dlg = options.context; const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('hide'); dlg.classList.add('formDialog');
dlg.innerHTML = globalize.translateHtml(template, 'core'); dlg.classList.add('recordingDialog');
dlg.querySelector('.formDialogHeader').classList.add('hide'); if (!layoutManager.tv) {
dlg.querySelector('.formDialogFooter').classList.add('hide'); dlg.style['min-width'] = '20%';
dlg.querySelector('.formDialogContent').className = ''; }
dlg.querySelector('.dialogContentInner').className = '';
dlg.classList.remove('hide');
dlg.removeEventListener('change', onFieldChange); let html = '';
dlg.addEventListener('change', onFieldChange);
html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html;
if (options.enableCancel === false) {
dlg.querySelector('.formDialogFooter').classList.add('hide');
}
currentDialog = dlg; 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); init(dlg);
reload(dlg, itemId); reload(dlg, itemId);
});
}
function showEditor(itemId, serverId, options) { dialogHelper.open(dlg);
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);
});
}); });
} }

31
src/components/search/searchfields.js
View file

@ -7,6 +7,7 @@ import '../../elements/emby-input/emby-input';
import '../../assets/css/flexstyles.scss'; import '../../assets/css/flexstyles.scss';
import 'material-design-icons-iconfont'; import 'material-design-icons-iconfont';
import './searchfields.css'; import './searchfields.css';
import template from './searchfields.template.html';
/* eslint-disable indent */ /* eslint-disable indent */
@ -61,30 +62,28 @@ import './searchfields.css';
} }
function embed(elem, instance, options) { 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) { if (browser.tizen || browser.orsay) {
html = html.replace('<input ', '<input readonly '); html = html.replace('<input ', '<input readonly ');
} }
elem.innerHTML = html; elem.innerHTML = html;
elem.classList.add('searchFields'); elem.classList.add('searchFields');
const txtSearch = elem.querySelector('.searchfields-txtSearch'); const txtSearch = elem.querySelector('.searchfields-txtSearch');
if (layoutManager.tv) { if (layoutManager.tv) {
const alphaPickerElement = elem.querySelector('.alphaPicker'); const alphaPickerElement = elem.querySelector('.alphaPicker');
elem.querySelector('.alphaPicker').classList.remove('hide'); elem.querySelector('.alphaPicker').classList.remove('hide');
initAlphaPicker(alphaPickerElement, instance); initAlphaPicker(alphaPickerElement, instance);
} }
txtSearch.addEventListener('input', onSearchInput.bind(instance)); txtSearch.addEventListener('input', onSearchInput.bind(instance));
instance.focus(); instance.focus();
});
} }
class SearchFields { class SearchFields {

20
src/components/search/searchresults.js
View file

@ -6,6 +6,7 @@ import '../../elements/emby-scroller/emby-scroller';
import '../../elements/emby-itemscontainer/emby-itemscontainer'; import '../../elements/emby-itemscontainer/emby-itemscontainer';
import '../../elements/emby-button/emby-button'; import '../../elements/emby-button/emby-button';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import template from './searchresults.template.html';
/* eslint-disable indent */ /* eslint-disable indent */
@ -585,19 +586,18 @@ import ServerConnections from '../ServerConnections';
} }
function embed(elem, instance, options) { function embed(elem, instance, options) {
import('./searchresults.template.html').then(({default: template}) => { let workingTemplate = template;
if (!enableScrollX()) { if (!enableScrollX()) {
template = replaceAll(template, 'data-horizontal="true"', 'data-horizontal="false"'); workingTemplate = replaceAll(workingTemplate, 'data-horizontal="true"', 'data-horizontal="false"');
template = replaceAll(template, 'itemsContainer scrollSlider', 'itemsContainer scrollSlider vertical-wrap'); 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'); elem.classList.add('searchResults');
instance.search(''); instance.search('');
});
} }
class SearchResults { class SearchResults {

103
src/components/sortmenu/sortmenu.js
View file

@ -8,6 +8,7 @@ import 'material-design-icons-iconfont';
import '../formdialog.css'; import '../formdialog.css';
import '../../elements/emby-button/emby-button'; import '../../elements/emby-button/emby-button';
import '../../assets/css/flexstyles.scss'; import '../../assets/css/flexstyles.scss';
import template from './sortmenu.template.html';
function onSubmit(e) { function onSubmit(e) {
e.preventDefault(); e.preventDefault();
@ -44,64 +45,62 @@ function saveValues(context, settingsKey) {
class SortMenu { class SortMenu {
show(options) { show(options) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
import('./sortmenu.template.html').then(({default: template}) => { const dialogOptions = {
const dialogOptions = { removeOnClose: true,
removeOnClose: true, scrollY: false
scrollY: false };
};
if (layoutManager.tv) {
dialogOptions.size = 'fullscreen';
} else {
dialogOptions.size = 'small';
}
const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog');
let html = '';
html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">${Sort}</h3>';
html += '</div>';
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) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; centerFocus(dlg.querySelector('.formDialogContent'), false, false);
} else {
dialogOptions.size = 'small';
} }
const dlg = dialogHelper.createDialog(dialogOptions); if (submitted) {
saveValues(dlg, options.settingsKey);
dlg.classList.add('formDialog'); resolve();
return;
let html = '';
html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">${Sort}</h3>';
html += '</div>';
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; reject();
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();
});
}); });
}); });
} }

5
src/components/subtitleeditor/subtitleeditor.js
View file

@ -17,6 +17,7 @@ import '../../assets/css/flexstyles.scss';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import toast from '../toast/toast'; import toast from '../toast/toast';
import confirm from '../confirm/confirm'; import confirm from '../confirm/confirm';
import template from './subtitleeditor.template.html';
let currentItem; let currentItem;
let hasChanges; let hasChanges;
@ -454,9 +455,7 @@ function showEditor(itemId, serverId) {
loading.show(); loading.show();
return new Promise(function (resolve, reject) { 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);
});
}); });
} }

97
src/components/subtitlesettings/subtitlesettings.js
View file

@ -17,6 +17,7 @@ import '../../assets/css/flexstyles.scss';
import './subtitlesettings.css'; import './subtitlesettings.css';
import ServerConnections from '../ServerConnections'; import ServerConnections from '../ServerConnections';
import toast from '../toast/toast'; import toast from '../toast/toast';
import template from './subtitlesettings.template.html';
/** /**
* Subtitle settings. * Subtitle settings.
@ -158,63 +159,61 @@ function hideSubtitlePreview(persistent) {
} }
function embed(options, self) { function embed(options, self) {
import('./subtitlesettings.template.html').then(({default: template}) => { options.element.classList.add('subtitlesettings');
options.element.classList.add('subtitlesettings'); options.element.innerHTML = globalize.translateHtml(template, 'core');
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('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange);
options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#selectFont').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#selectFont').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#inputTextColor').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#inputTextColor').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#inputTextBackground').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#inputTextBackground').addEventListener('change', onAppearanceFieldChange);
if (options.enableSaveButton) { if (options.enableSaveButton) {
options.element.querySelector('.btnSave').classList.remove('hide'); 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('.chkPreview').addEventListener('change', (e) => {
options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide'); if (e.target.checked) {
showSubtitlePreview.call(self, true);
self._fullPreview = options.element.querySelector('.subtitleappearance-fullpreview'); } else {
self._refFullPreview = 0; hideSubtitlePreview.call(self, true);
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) => { self.loadData();
if (e.target.checked) {
showSubtitlePreview.call(self, true);
} else {
hideSubtitlePreview.call(self, true);
}
});
}
self.loadData(); if (options.autoFocus) {
focusManager.autoFocus(options.element);
if (options.autoFocus) { }
focusManager.autoFocus(options.element);
}
});
} }
export class SubtitleSettings { export class SubtitleSettings {

119
src/components/viewSettings/viewSettings.js
View file

@ -10,6 +10,7 @@ import '../../elements/emby-select/emby-select';
import 'material-design-icons-iconfont'; import 'material-design-icons-iconfont';
import '../formdialog.css'; import '../formdialog.css';
import '../../assets/css/flexstyles.scss'; import '../../assets/css/flexstyles.scss';
import template from './viewSettings.template.html';
function onSubmit(e) { function onSubmit(e) {
e.preventDefault(); e.preventDefault();
@ -59,81 +60,79 @@ class ViewSettings {
} }
show(options) { show(options) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
import('./viewSettings.template.html').then(({default: template}) => { const dialogOptions = {
const dialogOptions = { removeOnClose: true,
removeOnClose: true, scrollY: false
scrollY: false };
};
if (layoutManager.tv) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} else {
dialogOptions.size = 'small';
}
const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog');
let html = '';
html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">${Settings}</h3>';
html += '</div>';
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 { } 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 += '<div class="formDialogHeader">'; if (layoutManager.tv) {
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>'; centerFocus(dlg.querySelector('.formDialogContent'), false, true);
html += '<h3 class="formDialogHeaderTitle">${Settings}</h3>'; }
html += '</div>'; let submitted;
html += template; dlg.querySelector('.selectImageType').dispatchEvent(new CustomEvent('change', {}));
dlg.innerHTML = globalize.translateHtml(html, 'core'); dlg.querySelector('form').addEventListener('change', function () {
submitted = true;
const settingElements = dlg.querySelectorAll('.viewSetting'); }, true);
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);
});
dialogHelper.open(dlg).then(function () {
if (layoutManager.tv) { 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', {})); reject();
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();
});
}); });
}); });
} }

31
src/elements/emby-progressring/emby-progressring.js
View file

@ -1,5 +1,6 @@
import './emby-progressring.css'; import './emby-progressring.css';
import 'webcomponents.js/webcomponents-lite'; import 'webcomponents.js/webcomponents-lite';
import template from './emby-progressring.template.html';
/* eslint-disable indent */ /* eslint-disable indent */
@ -9,28 +10,26 @@ import 'webcomponents.js/webcomponents-lite';
this.classList.add('progressring'); this.classList.add('progressring');
const instance = this; const instance = this;
import('./emby-progressring.template.html').then(({default: template}) => { instance.innerHTML = template;
instance.innerHTML = template;
if (window.MutationObserver) { if (window.MutationObserver) {
// create an observer instance // create an observer instance
const observer = new MutationObserver(function (mutations) { const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) { mutations.forEach(function (mutation) {
instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0')); instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0'));
});
}); });
});
// configuration of the observer: // configuration of the observer:
const config = { attributes: true, childList: false, characterData: false }; const config = { attributes: true, childList: false, characterData: false };
// pass in the target node, as well as the observer options // pass in the target node, as well as the observer options
observer.observe(instance, config); 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) { EmbyProgressRing.setProgress = function (progress) {