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

Migration of recordingeditor and recordingfields to ES6 modules

package.json

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

src/components/recordingcreator/recordingcreator.js

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

src/components/recordingcreator/recordingeditor.js

@@ -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('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
 
     loading.hide();
-    }
+}
 
-    function closeDialog(isDeleted) {
+function closeDialog(isDeleted) {
     recordingDeleted = isDeleted;
-
     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) {
         item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
@@ -49,35 +53,36 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 
     // Disable default form submission
     return false;
-    }
+}
 
-    function init(context) {
+function init(context) {
     context.querySelector('.btnCancel').addEventListener('click', function () {
         closeDialog(false);
     });
 
     context.querySelector('.btnCancelRecording').addEventListener('click', function () {
-            var apiClient = connectionManager.getApiClient(currentServerId);
+        const apiClient = connectionManager.getApiClient(currentServerId);
+
         deleteTimer(apiClient, currentItemId).then(function () {
             closeDialog(true);
         });
     });
 
     context.querySelector('form').addEventListener('submit', onSubmit);
-    }
+}
 
-    function reload(context, id) {
+function reload(context, id) {
     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();
     });
-    }
+}
 
-    function showEditor(itemId, serverId, options) {
+function showEditor(itemId, serverId, options) {
     return new Promise(function (resolve, reject) {
         recordingDeleted = false;
         currentServerId = serverId;
@@ -85,8 +90,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
         options = options || {};
         currentResolve = resolve;
 
-            require(['text!./recordingeditor.template.html'], function (template) {
+        import('text!./recordingeditor.template.html').then(({default: template}) => {
-                var dialogOptions = {
+            const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false
             };
@@ -95,7 +100,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');
@@ -105,7 +110,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
                 dlg.classList.add('dialog-fullscreen-lowres');
             }
 
-                var html = '';
+            let html = '';
 
             html += globalize.translateHtml(template, 'core');
 
@@ -143,9 +148,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
             dialogHelper.open(dlg);
         });
     });
-    }
+}
 
-    return {
+export default {
     show: showEditor
-    };
+};
-});

src/components/recordingcreator/recordingfields.js

@@ -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) {
         parent.querySelector('.recordSeriesContainer').classList.remove('hide');
     } else {
@@ -35,11 +42,11 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
         parent.querySelector('.singleRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
         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');
     return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
@@ -48,11 +55,11 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
         instance.SeriesTimerId = program.SeriesTimerId;
         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 (this.TimerId === data.Id) {
@@ -68,11 +75,11 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
     if (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 (this.SeriesTimerId === data.Id) {
@@ -88,51 +95,93 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
     if (refresh) {
         this.refresh();
     }
-    }
+}
 
-    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);
     }
 
-    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') {
         return;
     }
 
-        var self = this;
+    const self = this;
-        require(['recordingEditor'], function (recordingEditor) {
+    import('recordingEditor').then(({default: recordingEditor}) => {
         recordingEditor.show(self.TimerId, options.serverId, {
             enableCancel: false
         }).then(function () {
             self.changed = true;
         });
     });
-    }
+}
 
-    function onManageSeriesRecordingClick(e) {
+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
@@ -141,19 +190,19 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
             self.changed = true;
         });
     });
-    }
+}
 
-    function onRecordChange(e) {
+function onRecordChange(e) {
     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 (!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);
     });
-    }
+}
 
-    function onRecordSeriesChange(e) {
+function onRecordSeriesChange(e) {
     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) {
         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,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;
-});