milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Migration of recording editor and fields to ES6 modules

Browse source
This commit is contained in:
Cameron 2020-08-05 10:13:11 +01:00
parent a6cd54b661
commit 84b9dc95f6
4 changed files with 353 additions and 328 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -153,6 +153,8 @@
"src/components/playmenu.js",
"src/components/prompt/prompt.js",
"src/components/refreshdialog/refreshdialog.js",
"src/components/recordingcreator/recordingeditor.js",
"src/components/recordingcreator/recordingfields.js",
"src/components/sanatizefilename.js",
"src/components/scrollManager.js",
"src/plugins/htmlVideoPlayer/plugin.js",

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

@ -168,7 +168,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
reload(dlg, itemId, serverId);
currentRecordingFields = new recordingFields({
currentRecordingFields = new recordingFields.default({
parent: dlg.querySelector('.recordingFields'),
programId: itemId,
serverId: serverId

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

@ -1,13 +1,27 @@
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) {
'use strict';
import dialogHelper from 'dialogHelper';
import globalize from 'globalize';
import layoutManager from 'layoutManager';
import connectionManager from 'connectionManager';
import require from 'require';
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';
loading = loading.default || loading;
/*eslint prefer-const: "error"*/
var currentDialog;
var recordingDeleted = false;
var currentItemId;
var currentServerId;
var currentResolve;
let currentDialog;
let recordingDeleted = false;
let currentItemId;
let currentServerId;
let currentResolve;
function deleteTimer(apiClient, timerId) {
return new Promise(function (resolve, reject) {
@ -31,9 +45,9 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
}
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) {
item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
@ -53,7 +67,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
});
context.querySelector('.btnCancelRecording').addEventListener('click', function () {
var apiClient = connectionManager.getApiClient(currentServerId);
const apiClient = connectionManager.getApiClient(currentServerId);
deleteTimer(apiClient, currentItemId).then(function () {
closeDialog(true);
});
@ -66,7 +80,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
loading.show();
currentItemId = id;
var apiClient = connectionManager.getApiClient(currentServerId);
const apiClient = connectionManager.getApiClient(currentServerId);
apiClient.getLiveTvTimer(id).then(function (result) {
renderTimer(context, result, apiClient);
loading.hide();
@ -82,7 +96,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
currentResolve = resolve;
require(['text!./recordingeditor.template.html'], function (template) {
var dialogOptions = {
const dialogOptions = {
removeOnClose: true,
scrollY: false
};
@ -91,7 +105,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
dialogOptions.size = 'fullscreen';
}
var dlg = dialogHelper.createDialog(dialogOptions);
const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog');
dlg.classList.add('recordingDialog');
@ -101,7 +115,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
dlg.classList.add('dialog-fullscreen-lowres');
}
var html = '';
let html = '';
html += globalize.translateHtml(template, 'core');
@ -141,7 +155,6 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
});
}
return {
export default {
show: showEditor
};
});

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

@ -1,7 +1,16 @@
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) {
'use strict';
import globalize from 'globalize';
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';
loading = loading.default || loading;
/*eslint prefer-const: "error"*/
function loadData(parent, program, apiClient) {
if (program.IsSeries) {
@ -36,8 +45,8 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
}
function fetchData(instance) {
var options = instance.options;
var apiClient = connectionManager.getApiClient(options.serverId);
const options = instance.options;
const apiClient = connectionManager.getApiClient(options.serverId);
options.parent.querySelector('.recordingFields').classList.remove('hide');
return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
@ -49,8 +58,8 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
}
function onTimerChangedExternally(e, apiClient, data) {
var options = this.options;
var refresh = false;
const options = this.options;
let refresh = false;
if (data.Id) {
if (this.TimerId === data.Id) {
@ -69,8 +78,8 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
}
function onSeriesTimerChangedExternally(e, apiClient, data) {
var options = this.options;
var refresh = false;
const options = this.options;
let refresh = false;
if (data.Id) {
if (this.SeriesTimerId === data.Id) {
@ -88,31 +97,73 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
}
}
function RecordingEditor(options) {
class RecordingEditor {
constructor(options) {
this.options = options;
this.embed();
var timerChangedHandler = onTimerChangedExternally.bind(this);
const timerChangedHandler = onTimerChangedExternally.bind(this);
this.timerChangedHandler = timerChangedHandler;
events.on(serverNotifications, 'TimerCreated', timerChangedHandler);
events.on(serverNotifications, 'TimerCancelled', timerChangedHandler);
var seriesTimerChangedHandler = onSeriesTimerChangedExternally.bind(this);
const seriesTimerChangedHandler = onSeriesTimerChangedExternally.bind(this);
this.seriesTimerChangedHandler = seriesTimerChangedHandler;
events.on(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler);
events.on(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler);
}
embed() {
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) {
var options = this.options;
const options = this.options;
if (!this.TimerId || this.Status === 'Cancelled') {
return;
}
var self = this;
require(['recordingEditor'], function (recordingEditor) {
const self = this;
import('recordingEditor').then(({default: recordingEditor}) => {
recordingEditor.show(self.TimerId, options.serverId, {
enableCancel: false
}).then(function () {
@ -122,15 +173,15 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
}
function onManageSeriesRecordingClick(e) {
var options = this.options;
const options = this.options;
if (!this.SeriesTimerId) {
return;
}
var self = this;
const self = this;
require(['seriesRecordingEditor'], function (seriesRecordingEditor) {
import('seriesRecordingEditor').then(({default: seriesRecordingEditor}) => {
seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, {
enableCancel: false
@ -144,14 +195,14 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
function onRecordChange(e) {
this.changed = true;
var self = this;
var options = this.options;
var apiClient = connectionManager.getApiClient(options.serverId);
const self = this;
const options = this.options;
const apiClient = connectionManager.getApiClient(options.serverId);
var button = dom.parentWithTag(e.target, 'BUTTON');
var isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
const button = dom.parentWithTag(e.target, 'BUTTON');
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 (!hasEnabledTimer) {
@ -175,7 +226,7 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
}
function sendToast(msg) {
require(['toast'], function (toast) {
import('toast').then(({default: toast}) => {
toast(msg);
});
}
@ -183,17 +234,17 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
function onRecordSeriesChange(e) {
this.changed = true;
var self = this;
var options = this.options;
var apiClient = connectionManager.getApiClient(options.serverId);
const self = this;
const options = this.options;
const apiClient = connectionManager.getApiClient(options.serverId);
var button = dom.parentWithTag(e.target, 'BUTTON');
var isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
const button = dom.parentWithTag(e.target, 'BUTTON');
const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
if (isChecked) {
options.parent.querySelector('.recordSeriesContainer').classList.remove('hide');
if (!this.SeriesTimerId) {
var promise = this.TimerId ?
const promise = this.TimerId ?
recordingHelper.changeRecordingToSeries(apiClient, this.TimerId, options.programId) :
recordingHelper.createRecording(apiClient, options.programId, true);
promise.then(function () {
@ -210,45 +261,4 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
}
}
RecordingEditor.prototype.embed = function () {
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;
});
export default RecordingEditor;