mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-17 10:58:20 -07:00
Merge pull request #2122 from thornbill/static-html-imports
Use static imports for html templates
This commit is contained in:
Bill Thornton
GitHub
commit
6235c138e9
@ -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;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -9,10 +9,11 @@ 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 */
|
||||
|
||||
function showDialog(options, template) {
|
||||
function showDialog(options) {
|
||||
const dialogOptions = {
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
@ -117,7 +118,7 @@ import '../../assets/css/flexstyles.scss';
|
||||
});
|
||||
}
|
||||
|
||||
export async function show(text, title) {
|
||||
export function show(text, title) {
|
||||
let options;
|
||||
if (typeof text === 'string') {
|
||||
options = {
|
||||
@ -128,10 +129,7 @@ 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);
|
||||
});
|
||||
return showDialog(options);
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,6 +14,7 @@ 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 +211,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 += '<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 {
|
||||
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">';
|
||||
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>';
|
||||
let submitted;
|
||||
|
||||
html += '</div>';
|
||||
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();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -25,6 +25,7 @@ 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}) => {
|
||||
@ -142,7 +143,6 @@ function Guide(options) {
|
||||
let autoRefreshInterval;
|
||||
let programCells;
|
||||
let lastFocusDirection;
|
||||
let programGrid;
|
||||
|
||||
self.refresh = function () {
|
||||
currentDate = null;
|
||||
@ -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);
|
||||
@ -1092,107 +1092,105 @@ function Guide(options) {
|
||||
}
|
||||
}
|
||||
|
||||
import('./tvguide.template.html').then(({default: template}) => {
|
||||
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');
|
||||
|
||||
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, {
|
||||
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(guideContext.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) {
|
||||
guideContext.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(guideContext, this, timeslotHeaders);
|
||||
}, {
|
||||
passive: true
|
||||
});
|
||||
|
||||
dom.addEventListener(timeslotHeaders, 'scroll', function () {
|
||||
onTimeslotHeadersScroll(guideContext, this);
|
||||
}, {
|
||||
passive: true
|
||||
});
|
||||
|
||||
programGrid.addEventListener('click', onProgramGridClick);
|
||||
|
||||
guideContext.querySelector('.btnNextPage').addEventListener('click', function () {
|
||||
currentStartIndex += currentChannelLimit;
|
||||
reloadPage(guideContext);
|
||||
restartAutoRefresh();
|
||||
});
|
||||
|
||||
guideContext.querySelector('.btnPreviousPage').addEventListener('click', function () {
|
||||
currentStartIndex = Math.max(currentStartIndex - currentChannelLimit, 0);
|
||||
reloadPage(guideContext);
|
||||
restartAutoRefresh();
|
||||
});
|
||||
|
||||
guideContext.querySelector('.btnGuideViewSettings').addEventListener('click', function () {
|
||||
showViewSettings(self);
|
||||
restartAutoRefresh();
|
||||
});
|
||||
|
||||
guideContext.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(guideContext, date, scrollToTimeMs, scrollToTimeMs, startTimeOfDayMs, false);
|
||||
}
|
||||
});
|
||||
|
||||
setScrollEvents(guideContext, true);
|
||||
itemShortcuts.on(guideContext);
|
||||
|
||||
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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -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 => {
|
||||
@ -162,7 +163,7 @@ import ServerConnections from '../ServerConnections';
|
||||
return `<span class="mediaInfoLabel">${label}</span><span class="mediaInfoAttribute">${value}</span>`;
|
||||
}
|
||||
|
||||
function loadMediaInfo(itemId, serverId, template) {
|
||||
function loadMediaInfo(itemId, serverId) {
|
||||
const apiClient = ServerConnections.getApiClient(serverId);
|
||||
return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
|
||||
const dialogOptions = {
|
||||
@ -194,11 +195,7 @@ 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 loadMediaInfo(itemId, serverId);
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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'))];
|
||||
|
||||
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@ -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
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 (() => {
|
||||
@ -27,7 +28,7 @@ export default (() => {
|
||||
txtInput.value = options.value || '';
|
||||
}
|
||||
|
||||
function showDialog(options, template) {
|
||||
function showDialog(options) {
|
||||
const dialogOptions = {
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
@ -116,17 +117,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
|
||||
};
|
||||
}
|
||||
return showDialog(options);
|
||||
};
|
||||
}
|
||||
})();
|
||||
|
||||
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -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('<input ', '<input readonly ');
|
||||
}
|
||||
if (browser.tizen || browser.orsay) {
|
||||
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) {
|
||||
const alphaPickerElement = elem.querySelector('.alphaPicker');
|
||||
if (layoutManager.tv) {
|
||||
const alphaPickerElement = elem.querySelector('.alphaPicker');
|
||||
|
||||
elem.querySelector('.alphaPicker').classList.remove('hide');
|
||||
initAlphaPicker(alphaPickerElement, instance);
|
||||
}
|
||||
elem.querySelector('.alphaPicker').classList.remove('hide');
|
||||
initAlphaPicker(alphaPickerElement, instance);
|
||||
}
|
||||
|
||||
txtSearch.addEventListener('input', onSearchInput.bind(instance));
|
||||
txtSearch.addEventListener('input', onSearchInput.bind(instance));
|
||||
|
||||
instance.focus();
|
||||
});
|
||||
instance.focus();
|
||||
}
|
||||
|
||||
class SearchFields {
|
||||
|
||||
@ -6,6 +6,7 @@ import '../../elements/emby-scroller/emby-scroller';
|
||||
import '../../elements/emby-itemscontainer/emby-itemscontainer';
|
||||
import '../../elements/emby-button/emby-button';
|
||||
import ServerConnections from '../ServerConnections';
|
||||
import template from './searchresults.template.html';
|
||||
|
||||
/* eslint-disable indent */
|
||||
|
||||
@ -585,19 +586,18 @@ import ServerConnections from '../ServerConnections';
|
||||
}
|
||||
|
||||
function embed(elem, instance, options) {
|
||||
import('./searchresults.template.html').then(({default: template}) => {
|
||||
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 {
|
||||
|
||||
@ -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 += '<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) {
|
||||
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 += '<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);
|
||||
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();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -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;
|
||||
@ -374,7 +375,7 @@ function onOpenUploadMenu(e) {
|
||||
});
|
||||
}
|
||||
|
||||
function showEditorInternal(itemId, serverId, template) {
|
||||
function showEditorInternal(itemId, serverId) {
|
||||
hasChanges = false;
|
||||
|
||||
const apiClient = ServerConnections.getApiClient(serverId);
|
||||
@ -453,11 +454,7 @@ function showEditorInternal(itemId, serverId, template) {
|
||||
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);
|
||||
});
|
||||
});
|
||||
return showEditorInternal(itemId, serverId);
|
||||
}
|
||||
|
||||
export default {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 += '<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 {
|
||||
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">';
|
||||
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>';
|
||||
if (layoutManager.tv) {
|
||||
centerFocus(dlg.querySelector('.formDialogContent'), false, true);
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
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();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user