Migration of recording editor and fields to ES6 modules

package.json

@@ -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",

src/components/recordingcreator/recordingcreator.js

@@ -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

src/components/recordingcreator/recordingeditor.js

@@ -1,147 +1,160 @@
-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 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;
+let currentDialog;
-    var recordingDeleted = false;
+let recordingDeleted = false;
-    var currentItemId;
+let currentItemId;
-    var currentServerId;
+let currentServerId;
-    var currentResolve;
+let currentResolve;
 
-    function deleteTimer(apiClient, timerId) {
+function deleteTimer(apiClient, timerId) {
-        return new Promise(function (resolve, reject) {
+    return new Promise(function (resolve, reject) {
-            require(['recordingHelper'], function (recordingHelper) {
+        require(['recordingHelper'], function (recordingHelper) {
-                recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
+            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();
+}
+
+function closeDialog(isDeleted) {
+    recordingDeleted = isDeleted;
+
+    dialogHelper.close(currentDialog);
+}
+
+function onSubmit(e) {
+    const form = this;
+
+    const apiClient = connectionManager.getApiClient(currentServerId);
+
+    apiClient.getLiveTvTimer(currentItemId).then(function (item) {
+        item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
+        item.PostPaddingSeconds = form.querySelector('#txtPostPaddingMinutes').value * 60;
+        apiClient.updateLiveTvTimer(item).then(currentResolve);
+    });
+
+    e.preventDefault();
+
+    // Disable default form submission
+    return false;
+}
+
+function init(context) {
+    context.querySelector('.btnCancel').addEventListener('click', function () {
+        closeDialog(false);
+    });
+
+    context.querySelector('.btnCancelRecording').addEventListener('click', function () {
+        const apiClient = connectionManager.getApiClient(currentServerId);
+        deleteTimer(apiClient, currentItemId).then(function () {
+            closeDialog(true);
+        });
+    });
+
+    context.querySelector('form').addEventListener('submit', onSubmit);
+}
+
+function reload(context, id) {
+    loading.show();
+    currentItemId = id;
+
+    const apiClient = connectionManager.getApiClient(currentServerId);
+    apiClient.getLiveTvTimer(id).then(function (result) {
+        renderTimer(context, result, apiClient);
         loading.hide();
-    }
+    });
+}
 
-    function closeDialog(isDeleted) {
+function showEditor(itemId, serverId, options) {
-        recordingDeleted = isDeleted;
+    return new Promise(function (resolve, reject) {
-
+        recordingDeleted = false;
-        dialogHelper.close(currentDialog);
+        currentServerId = serverId;
-    }
-
-    function onSubmit(e) {
-        var form = this;
-
-        var apiClient = connectionManager.getApiClient(currentServerId);
-
-        apiClient.getLiveTvTimer(currentItemId).then(function (item) {
-            item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
-            item.PostPaddingSeconds = form.querySelector('#txtPostPaddingMinutes').value * 60;
-            apiClient.updateLiveTvTimer(item).then(currentResolve);
-        });
-
-        e.preventDefault();
-
-        // Disable default form submission
-        return false;
-    }
-
-    function init(context) {
-        context.querySelector('.btnCancel').addEventListener('click', function () {
-            closeDialog(false);
-        });
-
-        context.querySelector('.btnCancelRecording').addEventListener('click', function () {
-            var apiClient = connectionManager.getApiClient(currentServerId);
-            deleteTimer(apiClient, currentItemId).then(function () {
-                closeDialog(true);
-            });
-        });
-
-        context.querySelector('form').addEventListener('submit', onSubmit);
-    }
-
-    function reload(context, id) {
         loading.show();
-        currentItemId = id;
+        options = options || {};
+        currentResolve = resolve;
 
-        var apiClient = connectionManager.getApiClient(currentServerId);
+        require(['text!./recordingeditor.template.html'], function (template) {
-        apiClient.getLiveTvTimer(id).then(function (result) {
+            const dialogOptions = {
-            renderTimer(context, result, apiClient);
+                removeOnClose: true,
-            loading.hide();
+                scrollY: false
-        });
+            };
-    }
 
-    function showEditor(itemId, serverId, options) {
+            if (layoutManager.tv) {
-        return new Promise(function (resolve, reject) {
+                dialogOptions.size = 'fullscreen';
-            recordingDeleted = false;
+            }
-            currentServerId = serverId;
-            loading.show();
-            options = options || {};
-            currentResolve = resolve;
 
-            require(['text!./recordingeditor.template.html'], function (template) {
+            const dlg = dialogHelper.createDialog(dialogOptions);
-                var dialogOptions = {
-                    removeOnClose: true,
-                    scrollY: false
-                };
 
-                if (layoutManager.tv) {
+            dlg.classList.add('formDialog');
-                    dialogOptions.size = 'fullscreen';
+            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();
                 }
-
-                var 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');
-                }
-
-                var 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);
             });
-        });
-    }
 
-    return {
+            dlg.addEventListener('close', function () {
-        show: showEditor
+                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);
+        });
+    });
+}
+
+export default {
+    show: showEditor
+};

src/components/recordingcreator/recordingfields.js

@@ -1,221 +1,126 @@
-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';
 
-    loading = loading.default || loading;
+/*eslint prefer-const: "error"*/
 
-    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 {
+        parent.querySelector('.recordSeriesContainer').classList.add('hide');
+    }
+
+    if (program.SeriesTimerId) {
+        parent.querySelector('.btnManageSeriesRecording').classList.remove('hide');
+        parent.querySelector('.seriesRecordingButton .recordingIcon').classList.add('recordingIcon-active');
+        parent.querySelector('.seriesRecordingButton .buttonText').innerHTML = globalize.translate('CancelSeries');
+    } else {
+        parent.querySelector('.btnManageSeriesRecording').classList.add('hide');
+        parent.querySelector('.seriesRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
+        parent.querySelector('.seriesRecordingButton .buttonText').innerHTML = globalize.translate('RecordSeries');
+    }
+
+    if (program.TimerId && program.Status !== 'Cancelled') {
+        parent.querySelector('.btnManageRecording').classList.remove('hide');
+        parent.querySelector('.singleRecordingButton .recordingIcon').classList.add('recordingIcon-active');
+        if (program.Status === 'InProgress') {
+            parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('StopRecording');
         } else {
-            parent.querySelector('.recordSeriesContainer').classList.add('hide');
+            parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('DoNotRecord');
         }
+    } else {
+        parent.querySelector('.btnManageRecording').classList.add('hide');
+        parent.querySelector('.singleRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
+        parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('Record');
+    }
+}
 
-        if (program.SeriesTimerId) {
+function fetchData(instance) {
-            parent.querySelector('.btnManageSeriesRecording').classList.remove('hide');
+    const options = instance.options;
-            parent.querySelector('.seriesRecordingButton .recordingIcon').classList.add('recordingIcon-active');
+    const apiClient = connectionManager.getApiClient(options.serverId);
-            parent.querySelector('.seriesRecordingButton .buttonText').innerHTML = globalize.translate('CancelSeries');
+
-        } else {
+    options.parent.querySelector('.recordingFields').classList.remove('hide');
-            parent.querySelector('.btnManageSeriesRecording').classList.add('hide');
+    return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
-            parent.querySelector('.seriesRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
+        instance.TimerId = program.TimerId;
-            parent.querySelector('.seriesRecordingButton .buttonText').innerHTML = globalize.translate('RecordSeries');
+        instance.Status = program.Status;
+        instance.SeriesTimerId = program.SeriesTimerId;
+        loadData(options.parent, program, apiClient);
+    });
+}
+
+function onTimerChangedExternally(e, apiClient, data) {
+    const options = this.options;
+    let refresh = false;
+
+    if (data.Id) {
+        if (this.TimerId === data.Id) {
+            refresh = true;
         }
-
+    }
-        if (program.TimerId && program.Status !== 'Cancelled') {
+    if (data.ProgramId && options) {
-            parent.querySelector('.btnManageRecording').classList.remove('hide');
+        if (options.programId === data.ProgramId) {
-            parent.querySelector('.singleRecordingButton .recordingIcon').classList.add('recordingIcon-active');
+            refresh = true;
-            if (program.Status === 'InProgress') {
-                parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('StopRecording');
-            } else {
-                parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('DoNotRecord');
-            }
-        } else {
-            parent.querySelector('.btnManageRecording').classList.add('hide');
-            parent.querySelector('.singleRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
-            parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('Record');
         }
     }
 
-    function fetchData(instance) {
+    if (refresh) {
-        var options = instance.options;
+        this.refresh();
-        var apiClient = connectionManager.getApiClient(options.serverId);
-
-        options.parent.querySelector('.recordingFields').classList.remove('hide');
-        return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
-            instance.TimerId = program.TimerId;
-            instance.Status = program.Status;
-            instance.SeriesTimerId = program.SeriesTimerId;
-            loadData(options.parent, program, apiClient);
-        });
     }
+}
 
-    function onTimerChangedExternally(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.TimerId === data.Id) {
+        if (this.SeriesTimerId === data.Id) {
-                refresh = true;
+            refresh = true;
-            }
         }
-        if (data.ProgramId && options) {
+    }
-            if (options.programId === data.ProgramId) {
+    if (data.ProgramId && options) {
-                refresh = true;
+        if (options.programId === data.ProgramId) {
-            }
+            refresh = true;
-        }
-
-        if (refresh) {
-            this.refresh();
         }
     }
 
-    function onSeriesTimerChangedExternally(e, apiClient, data) {
+    if (refresh) {
-        var options = this.options;
+        this.refresh();
-        var refresh = false;
-
-        if (data.Id) {
-            if (this.SeriesTimerId === data.Id) {
-                refresh = true;
-            }
-        }
-        if (data.ProgramId && options) {
-            if (options.programId === data.ProgramId) {
-                refresh = true;
-            }
-        }
-
-        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;
-        if (!this.TimerId || this.Status === 'Cancelled') {
-            return;
-        }
-
-        var self = this;
-        require(['recordingEditor'], function (recordingEditor) {
-            recordingEditor.show(self.TimerId, options.serverId, {
-                enableCancel: false
-            }).then(function () {
-                self.changed = true;
-            });
-        });
-    }
-
-    function onManageSeriesRecordingClick(e) {
-        var options = this.options;
-
-        if (!this.SeriesTimerId) {
-            return;
-        }
-
-        var self = this;
-
-        require(['seriesRecordingEditor'], function (seriesRecordingEditor) {
-            seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, {
-
-                enableCancel: false
-
-            }).then(function () {
-                self.changed = true;
-            });
-        });
-    }
-
-    function onRecordChange(e) {
-        this.changed = true;
-
-        var self = this;
-        var options = this.options;
-        var apiClient = connectionManager.getApiClient(options.serverId);
-
-        var button = dom.parentWithTag(e.target, 'BUTTON');
-        var isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
-
-        var hasEnabledTimer = this.TimerId && this.Status !== 'Cancelled';
-
-        if (isChecked) {
-            if (!hasEnabledTimer) {
-                loading.show();
-                recordingHelper.createRecording(apiClient, options.programId, false).then(function () {
-                    events.trigger(self, 'recordingchanged');
-                    fetchData(self);
-                    loading.hide();
-                });
-            }
-        } else {
-            if (hasEnabledTimer) {
-                loading.show();
-                recordingHelper.cancelTimer(apiClient, this.TimerId, true).then(function () {
-                    events.trigger(self, 'recordingchanged');
-                    fetchData(self);
-                    loading.hide();
-                });
-            }
-        }
-    }
-
-    function sendToast(msg) {
-        require(['toast'], function (toast) {
-            toast(msg);
-        });
-    }
-
-    function onRecordSeriesChange(e) {
-        this.changed = true;
-
-        var self = this;
-        var options = this.options;
-        var apiClient = connectionManager.getApiClient(options.serverId);
-
-        var button = dom.parentWithTag(e.target, 'BUTTON');
-        var 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 ?
-                    recordingHelper.changeRecordingToSeries(apiClient, this.TimerId, options.programId) :
-                    recordingHelper.createRecording(apiClient, options.programId, true);
-                promise.then(function () {
-                    fetchData(self);
-                });
-            }
-        } else {
-            if (this.SeriesTimerId) {
-                apiClient.cancelLiveTvSeriesTimer(this.SeriesTimerId).then(function () {
-                    sendToast(globalize.translate('RecordingCancelled'));
-                    fetchData(self);
-                });
-            }
-        }
-    }
-
-    RecordingEditor.prototype.embed = function () {
-        var self = this;
         return new Promise(function (resolve, reject) {
-            require(['text!./recordingfields.template.html'], function (template) {
+            import('text!./recordingfields.template.html').then(({default: template}) => {
-                var options = self.options;
+                const options = self.options;
-                var context = options.parent;
+                const context = options.parent;
                 context.innerHTML = globalize.translateHtml(template, 'core');
 
                 context.querySelector('.singleRecordingButton').addEventListener('click', onRecordChange.bind(self));
@@ -226,29 +131,134 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
                 fetchData(self).then(resolve);
             });
         });
-    };
+    }
 
-    RecordingEditor.prototype.hasChanged = function () {
+    hasChanged() {
         return this.changed;
-    };
+    }
 
-    RecordingEditor.prototype.refresh = function () {
+    refresh() {
         fetchData(this);
-    };
+    }
 
-    RecordingEditor.prototype.destroy = function () {
+    destroy() {
-        var timerChangedHandler = this.timerChangedHandler;
+        const timerChangedHandler = this.timerChangedHandler;
         this.timerChangedHandler = null;
 
         events.off(serverNotifications, 'TimerCreated', timerChangedHandler);
         events.off(serverNotifications, 'TimerCancelled', timerChangedHandler);
 
-        var seriesTimerChangedHandler = this.seriesTimerChangedHandler;
+        const seriesTimerChangedHandler = this.seriesTimerChangedHandler;
         this.seriesTimerChangedHandler = null;
 
         events.off(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler);
         events.off(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler);
-    };
+    }
+}
 
-    return RecordingEditor;
+function onManageRecordingClick(e) {
-});
+    const options = this.options;
+    if (!this.TimerId || this.Status === 'Cancelled') {
+        return;
+    }
+
+    const self = this;
+    import('recordingEditor').then(({default: recordingEditor}) => {
+        recordingEditor.show(self.TimerId, options.serverId, {
+            enableCancel: false
+        }).then(function () {
+            self.changed = true;
+        });
+    });
+}
+
+function onManageSeriesRecordingClick(e) {
+    const options = this.options;
+
+    if (!this.SeriesTimerId) {
+        return;
+    }
+
+    const self = this;
+
+    import('seriesRecordingEditor').then(({default: seriesRecordingEditor}) => {
+        seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, {
+
+            enableCancel: false
+
+        }).then(function () {
+            self.changed = true;
+        });
+    });
+}
+
+function onRecordChange(e) {
+    this.changed = true;
+
+    const self = this;
+    const options = this.options;
+    const apiClient = connectionManager.getApiClient(options.serverId);
+
+    const button = dom.parentWithTag(e.target, 'BUTTON');
+    const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
+
+    const hasEnabledTimer = this.TimerId && this.Status !== 'Cancelled';
+
+    if (isChecked) {
+        if (!hasEnabledTimer) {
+            loading.show();
+            recordingHelper.createRecording(apiClient, options.programId, false).then(function () {
+                events.trigger(self, 'recordingchanged');
+                fetchData(self);
+                loading.hide();
+            });
+        }
+    } else {
+        if (hasEnabledTimer) {
+            loading.show();
+            recordingHelper.cancelTimer(apiClient, this.TimerId, true).then(function () {
+                events.trigger(self, 'recordingchanged');
+                fetchData(self);
+                loading.hide();
+            });
+        }
+    }
+}
+
+function sendToast(msg) {
+    import('toast').then(({default: toast}) => {
+        toast(msg);
+    });
+}
+
+function onRecordSeriesChange(e) {
+    this.changed = true;
+
+    const self = this;
+    const options = this.options;
+    const apiClient = connectionManager.getApiClient(options.serverId);
+
+    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) {
+            const promise = this.TimerId ?
+                recordingHelper.changeRecordingToSeries(apiClient, this.TimerId, options.programId) :
+                recordingHelper.createRecording(apiClient, options.programId, true);
+            promise.then(function () {
+                fetchData(self);
+            });
+        }
+    } else {
+        if (this.SeriesTimerId) {
+            apiClient.cancelLiveTvSeriesTimer(this.SeriesTimerId).then(function () {
+                sendToast(globalize.translate('RecordingCancelled'));
+                fetchData(self);
+            });
+        }
+    }
+}
+
+export default RecordingEditor;