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

Merge pull request #1761 from Camc314/migrate-to-ES6-61

Migration of recordingeditor and recordingfields to ES6 modules
This commit is contained in:
dkanada 2020-08-16 19:16:52 +09:00 committed by GitHub
commit 5e53170cf6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 348 additions and 334 deletions

View file

@ -165,6 +165,8 @@
"src/components/recordingcreator/seriesrecordingeditor.js", "src/components/recordingcreator/seriesrecordingeditor.js",
"src/components/recordingcreator/recordinghelper.js", "src/components/recordingcreator/recordinghelper.js",
"src/components/refreshdialog/refreshdialog.js", "src/components/refreshdialog/refreshdialog.js",
"src/components/recordingcreator/recordingeditor.js",
"src/components/recordingcreator/recordingfields.js",
"src/components/qualityOptions.js", "src/components/qualityOptions.js",
"src/components/remotecontrol/remotecontrol.js", "src/components/remotecontrol/remotecontrol.js",
"src/components/sanatizefilename.js", "src/components/sanatizefilename.js",

View file

@ -118,7 +118,7 @@ function reload(context, programId, serverId, refreshRecordingStateOnly) {
function executeCloseAction(action, programId, serverId) { function executeCloseAction(action, programId, serverId) {
if (action === 'play') { if (action === 'play') {
import('playbackManager').then(({default: playbackManager}) => { import('playbackManager').then(({ default: playbackManager }) => {
const apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) { apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
@ -138,7 +138,7 @@ function showEditor(itemId, serverId) {
loading.show(); loading.show();
import('text!./recordingcreator.template.html').then(({default: template}) => { import('text!./recordingcreator.template.html').then(({ default: template }) => {
const dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false

View file

@ -1,43 +1,47 @@
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'scrollStyles', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader) { import dialogHelper from 'dialogHelper';
'use strict'; import globalize from 'globalize';
import layoutManager from 'layoutManager';
import connectionManager from 'connectionManager';
import loading from 'loading';
import scrollHelper from 'scrollHelper';
import 'scrollStyles';
import 'emby-button';
import 'emby-collapse';
import 'emby-input';
import 'paper-icon-button-light';
import 'css!./../formdialog';
import 'css!./recordingcreator';
import 'material-icons';
import 'flexStyles';
scrollHelper = scrollHelper.default || scrollHelper; let currentDialog;
loading = loading.default || loading; let recordingDeleted = false;
layoutManager = layoutManager.default || layoutManager; let currentItemId;
let currentServerId;
let currentResolve;
var currentDialog; function deleteTimer(apiClient, timerId) {
var recordingDeleted = false; return import('recordingHelper').then(({ default: recordingHelper }) => {
var currentItemId; recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId());
var currentServerId;
var currentResolve;
function deleteTimer(apiClient, timerId) {
return new Promise(function (resolve, reject) {
require(['recordingHelper'], function (recordingHelper) {
recordingHelper = recordingHelper.default || recordingHelper;
recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
}); });
}); }
}
function renderTimer(context, item, apiClient) { function renderTimer(context, item, apiClient) {
context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60; context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60; context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
loading.hide(); loading.hide();
} }
function closeDialog(isDeleted) { function closeDialog(isDeleted) {
recordingDeleted = isDeleted; recordingDeleted = isDeleted;
dialogHelper.close(currentDialog); dialogHelper.close(currentDialog);
} }
function onSubmit(e) { function onSubmit(e) {
var form = this; const form = this;
var apiClient = connectionManager.getApiClient(currentServerId); const apiClient = connectionManager.getApiClient(currentServerId);
apiClient.getLiveTvTimer(currentItemId).then(function (item) { apiClient.getLiveTvTimer(currentItemId).then(function (item) {
item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60; item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
@ -49,35 +53,36 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
// Disable default form submission // Disable default form submission
return false; return false;
} }
function init(context) { function init(context) {
context.querySelector('.btnCancel').addEventListener('click', function () { context.querySelector('.btnCancel').addEventListener('click', function () {
closeDialog(false); closeDialog(false);
}); });
context.querySelector('.btnCancelRecording').addEventListener('click', function () { context.querySelector('.btnCancelRecording').addEventListener('click', function () {
var apiClient = connectionManager.getApiClient(currentServerId); const apiClient = connectionManager.getApiClient(currentServerId);
deleteTimer(apiClient, currentItemId).then(function () { deleteTimer(apiClient, currentItemId).then(function () {
closeDialog(true); closeDialog(true);
}); });
}); });
context.querySelector('form').addEventListener('submit', onSubmit); context.querySelector('form').addEventListener('submit', onSubmit);
} }
function reload(context, id) { function reload(context, id) {
loading.show(); loading.show();
currentItemId = id; currentItemId = id;
var apiClient = connectionManager.getApiClient(currentServerId); const apiClient = connectionManager.getApiClient(currentServerId);
apiClient.getLiveTvTimer(id).then(function (result) { apiClient.getLiveTvTimer(id).then(function (result) {
renderTimer(context, result, apiClient); renderTimer(context, result, apiClient);
loading.hide(); loading.hide();
}); });
} }
function showEditor(itemId, serverId, options) { function showEditor(itemId, serverId, options) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
recordingDeleted = false; recordingDeleted = false;
currentServerId = serverId; currentServerId = serverId;
@ -85,8 +90,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
options = options || {}; options = options || {};
currentResolve = resolve; currentResolve = resolve;
require(['text!./recordingeditor.template.html'], function (template) { import('text!./recordingeditor.template.html').then(({default: template}) => {
var dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -95,7 +100,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.classList.add('recordingDialog'); dlg.classList.add('recordingDialog');
@ -105,7 +110,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
dlg.classList.add('dialog-fullscreen-lowres'); dlg.classList.add('dialog-fullscreen-lowres');
} }
var html = ''; let html = '';
html += globalize.translateHtml(template, 'core'); html += globalize.translateHtml(template, 'core');
@ -143,9 +148,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
dialogHelper.open(dlg); dialogHelper.open(dlg);
}); });
}); });
} }
return { export default {
show: showEditor show: showEditor
}; };
});

View file

@ -1,11 +1,18 @@
define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields', 'flexStyles'], function (globalize, connectionManager, serverNotifications, require, loading, appHost, dom, recordingHelper, events) { import globalize from 'globalize';
'use strict'; import connectionManager from 'connectionManager';
import serverNotifications from 'serverNotifications';
import loading from 'loading';
import dom from 'dom';
import recordingHelper from 'recordingHelper';
import events from 'events';
import 'paper-icon-button-light';
import 'emby-button';
import 'css!./recordingfields';
import 'flexStyles';
serverNotifications = serverNotifications.default || serverNotifications; /*eslint prefer-const: "error"*/
recordingHelper = recordingHelper.default || recordingHelper;
loading = loading.default || loading;
function loadData(parent, program, apiClient) { function loadData(parent, program, apiClient) {
if (program.IsSeries) { if (program.IsSeries) {
parent.querySelector('.recordSeriesContainer').classList.remove('hide'); parent.querySelector('.recordSeriesContainer').classList.remove('hide');
} else { } else {
@ -35,11 +42,11 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
parent.querySelector('.singleRecordingButton .recordingIcon').classList.remove('recordingIcon-active'); parent.querySelector('.singleRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('Record'); parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('Record');
} }
} }
function fetchData(instance) { function fetchData(instance) {
var options = instance.options; const options = instance.options;
var apiClient = connectionManager.getApiClient(options.serverId); const apiClient = connectionManager.getApiClient(options.serverId);
options.parent.querySelector('.recordingFields').classList.remove('hide'); options.parent.querySelector('.recordingFields').classList.remove('hide');
return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) { return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
@ -48,11 +55,11 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
instance.SeriesTimerId = program.SeriesTimerId; instance.SeriesTimerId = program.SeriesTimerId;
loadData(options.parent, program, apiClient); loadData(options.parent, program, apiClient);
}); });
} }
function onTimerChangedExternally(e, apiClient, data) { function onTimerChangedExternally(e, apiClient, data) {
var options = this.options; const options = this.options;
var refresh = false; let refresh = false;
if (data.Id) { if (data.Id) {
if (this.TimerId === data.Id) { if (this.TimerId === data.Id) {
@ -68,11 +75,11 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
if (refresh) { if (refresh) {
this.refresh(); this.refresh();
} }
} }
function onSeriesTimerChangedExternally(e, apiClient, data) { function onSeriesTimerChangedExternally(e, apiClient, data) {
var options = this.options; const options = this.options;
var refresh = false; let refresh = false;
if (data.Id) { if (data.Id) {
if (this.SeriesTimerId === data.Id) { if (this.SeriesTimerId === data.Id) {
@ -88,51 +95,93 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
if (refresh) { if (refresh) {
this.refresh(); this.refresh();
} }
} }
function RecordingEditor(options) { class RecordingEditor {
constructor(options) {
this.options = options; this.options = options;
this.embed(); this.embed();
var timerChangedHandler = onTimerChangedExternally.bind(this); const timerChangedHandler = onTimerChangedExternally.bind(this);
this.timerChangedHandler = timerChangedHandler; this.timerChangedHandler = timerChangedHandler;
events.on(serverNotifications, 'TimerCreated', timerChangedHandler); events.on(serverNotifications, 'TimerCreated', timerChangedHandler);
events.on(serverNotifications, 'TimerCancelled', timerChangedHandler); events.on(serverNotifications, 'TimerCancelled', timerChangedHandler);
var seriesTimerChangedHandler = onSeriesTimerChangedExternally.bind(this); const seriesTimerChangedHandler = onSeriesTimerChangedExternally.bind(this);
this.seriesTimerChangedHandler = seriesTimerChangedHandler; this.seriesTimerChangedHandler = seriesTimerChangedHandler;
events.on(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler); events.on(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler);
events.on(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler); events.on(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler);
} }
function onManageRecordingClick(e) { embed() {
var options = this.options; const self = this;
return new Promise(function (resolve, reject) {
import('text!./recordingfields.template.html').then(({default: template}) => {
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));
fetchData(self).then(resolve);
});
});
}
hasChanged() {
return this.changed;
}
refresh() {
fetchData(this);
}
destroy() {
const timerChangedHandler = this.timerChangedHandler;
this.timerChangedHandler = null;
events.off(serverNotifications, 'TimerCreated', timerChangedHandler);
events.off(serverNotifications, 'TimerCancelled', timerChangedHandler);
const seriesTimerChangedHandler = this.seriesTimerChangedHandler;
this.seriesTimerChangedHandler = null;
events.off(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler);
events.off(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler);
}
}
function onManageRecordingClick(e) {
const options = this.options;
if (!this.TimerId || this.Status === 'Cancelled') { if (!this.TimerId || this.Status === 'Cancelled') {
return; return;
} }
var self = this; const self = this;
require(['recordingEditor'], function (recordingEditor) { import('recordingEditor').then(({default: recordingEditor}) => {
recordingEditor.show(self.TimerId, options.serverId, { recordingEditor.show(self.TimerId, options.serverId, {
enableCancel: false enableCancel: false
}).then(function () { }).then(function () {
self.changed = true; self.changed = true;
}); });
}); });
} }
function onManageSeriesRecordingClick(e) { function onManageSeriesRecordingClick(e) {
var options = this.options; const options = this.options;
if (!this.SeriesTimerId) { if (!this.SeriesTimerId) {
return; return;
} }
var self = this; const self = this;
require(['seriesRecordingEditor'], function (seriesRecordingEditor) { import('seriesRecordingEditor').then(({default: seriesRecordingEditor}) => {
seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, { seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, {
enableCancel: false enableCancel: false
@ -141,19 +190,19 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
self.changed = true; self.changed = true;
}); });
}); });
} }
function onRecordChange(e) { function onRecordChange(e) {
this.changed = true; this.changed = true;
var self = this; const self = this;
var options = this.options; const options = this.options;
var apiClient = connectionManager.getApiClient(options.serverId); const apiClient = connectionManager.getApiClient(options.serverId);
var button = dom.parentWithTag(e.target, 'BUTTON'); const button = dom.parentWithTag(e.target, 'BUTTON');
var isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active'); const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
var hasEnabledTimer = this.TimerId && this.Status !== 'Cancelled'; const hasEnabledTimer = this.TimerId && this.Status !== 'Cancelled';
if (isChecked) { if (isChecked) {
if (!hasEnabledTimer) { if (!hasEnabledTimer) {
@ -174,28 +223,28 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
}); });
} }
} }
} }
function sendToast(msg) { function sendToast(msg) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(msg); toast(msg);
}); });
} }
function onRecordSeriesChange(e) { function onRecordSeriesChange(e) {
this.changed = true; this.changed = true;
var self = this; const self = this;
var options = this.options; const options = this.options;
var apiClient = connectionManager.getApiClient(options.serverId); const apiClient = connectionManager.getApiClient(options.serverId);
var button = dom.parentWithTag(e.target, 'BUTTON'); const button = dom.parentWithTag(e.target, 'BUTTON');
var isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active'); const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
if (isChecked) { if (isChecked) {
options.parent.querySelector('.recordSeriesContainer').classList.remove('hide'); options.parent.querySelector('.recordSeriesContainer').classList.remove('hide');
if (!this.SeriesTimerId) { if (!this.SeriesTimerId) {
var promise = this.TimerId ? const promise = this.TimerId ?
recordingHelper.changeRecordingToSeries(apiClient, this.TimerId, options.programId) : recordingHelper.changeRecordingToSeries(apiClient, this.TimerId, options.programId) :
recordingHelper.createRecording(apiClient, options.programId, true); recordingHelper.createRecording(apiClient, options.programId, true);
promise.then(function () { promise.then(function () {
@ -210,47 +259,6 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
}); });
} }
} }
} }
RecordingEditor.prototype.embed = function () { export default RecordingEditor;
var self = this;
return new Promise(function (resolve, reject) {
require(['text!./recordingfields.template.html'], function (template) {
var options = self.options;
var 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));
fetchData(self).then(resolve);
});
});
};
RecordingEditor.prototype.hasChanged = function () {
return this.changed;
};
RecordingEditor.prototype.refresh = function () {
fetchData(this);
};
RecordingEditor.prototype.destroy = function () {
var timerChangedHandler = this.timerChangedHandler;
this.timerChangedHandler = null;
events.off(serverNotifications, 'TimerCreated', timerChangedHandler);
events.off(serverNotifications, 'TimerCancelled', timerChangedHandler);
var seriesTimerChangedHandler = this.seriesTimerChangedHandler;
this.seriesTimerChangedHandler = null;
events.off(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler);
events.off(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler);
};
return RecordingEditor;
});