Merge pull request #1750 from Camc314/migrate-to-ES6-60

Migration of recordingbutton and recordingcreator to ES6 modules

package.json

@@ -157,6 +157,8 @@
           "src/components/playlisteditor/playlisteditor.js",
           "src/components/playmenu.js",
           "src/components/prompt/prompt.js",
+          "src/components/recordingcreator/recordingbutton.js",
+          "src/components/recordingcreator/recordingcreator.js",
           "src/components/recordingcreator/seriesrecordingeditor.js",
           "src/components/recordingcreator/recordinghelper.js",
           "src/components/refreshdialog/refreshdialog.js",

src/components/recordingcreator/recordingbutton.js

@@ -1,19 +1,21 @@
-define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields'], function (globalize, connectionManager, require, loading, appHost, dom, recordingHelper, events) {
+import connectionManager from 'connectionManager';
-    'use strict';
+import dom from 'dom';
-
+import recordingHelper from 'recordingHelper';
-    recordingHelper = recordingHelper.default || recordingHelper;
+import 'paper-icon-button-light';
+import 'emby-button';
+import 'css!./recordingfields';
 
 function onRecordingButtonClick(e) {
-        var item = this.item;
+    const item = this.item;
 
     if (item) {
-            var serverId = item.ServerId;
+        const serverId = item.ServerId;
-            var programId = item.Id;
+        const programId = item.Id;
-            var timerId = item.TimerId;
+        const timerId = item.TimerId;
-            var timerStatus = item.Status;
+        const timerStatus = item.Status;
-            var seriesTimerId = item.SeriesTimerId;
+        const seriesTimerId = item.SeriesTimerId;
 
-            var instance = this;
+        const instance = this;
 
         recordingHelper.toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId).then(function () {
             instance.refresh(serverId, programId);
@@ -22,16 +24,17 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
 }
 
 function setButtonIcon(button, icon) {
-        var inner = button.querySelector('.material-icons');
+    const inner = button.querySelector('.material-icons');
     inner.classList.remove('fiber_smart_record');
     inner.classList.remove('fiber_manual_record');
     inner.classList.add(icon);
 }
 
-    function RecordingButton(options) {
+class RecordingButton {
+    constructor(options) {
         this.options = options;
 
-        var button = options.button;
+        const button = options.button;
 
         setButtonIcon(button, 'fiber_manual_record');
 
@@ -41,7 +44,7 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
             this.refresh(options.itemId, options.serverId);
         }
 
-        var clickFn = onRecordingButtonClick.bind(this);
+        const clickFn = onRecordingButtonClick.bind(this);
         this.clickFn = clickFn;
 
         dom.addEventListener(button, 'click', clickFn, {
@@ -49,8 +52,49 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
         });
     }
 
+    refresh(serverId, itemId) {
+        const apiClient = connectionManager.getApiClient(serverId);
+        const self = this;
+        apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
+            self.refreshItem(item);
+        });
+    }
+
+    refreshItem(item) {
+        const options = this.options;
+        const button = options.button;
+        this.item = item;
+        setButtonIcon(button, getIndicatorIcon(item));
+
+        if (item.TimerId && (item.Status || 'Cancelled') !== 'Cancelled') {
+            button.classList.add('recordingIcon-active');
+        } else {
+            button.classList.remove('recordingIcon-active');
+        }
+    }
+
+    destroy() {
+        const options = this.options;
+
+        if (options) {
+            const button = options.button;
+
+            const clickFn = this.clickFn;
+
+            if (clickFn) {
+                dom.removeEventListener(button, 'click', clickFn, {
+                    passive: true
+                });
+            }
+        }
+
+        this.options = null;
+        this.item = null;
+    }
+}
+
 function getIndicatorIcon(item) {
-        var status;
+    let status;
 
     if (item.Type === 'SeriesTimer') {
         return 'fiber_smart_record';
@@ -71,45 +115,4 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
     return 'fiber_manual_record';
 }
 
-    RecordingButton.prototype.refresh = function (serverId, itemId) {
+export default RecordingButton;
-        var apiClient = connectionManager.getApiClient(serverId);
-        var self = this;
-        apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
-            self.refreshItem(item);
-        });
-    };
-
-    RecordingButton.prototype.refreshItem = function (item) {
-        var options = this.options;
-        var button = options.button;
-        this.item = item;
-        setButtonIcon(button, getIndicatorIcon(item));
-
-        if (item.TimerId && (item.Status || 'Cancelled') !== 'Cancelled') {
-            button.classList.add('recordingIcon-active');
-        } else {
-            button.classList.remove('recordingIcon-active');
-        }
-    };
-
-    RecordingButton.prototype.destroy = function () {
-        var options = this.options;
-
-        if (options) {
-            var button = options.button;
-
-            var clickFn = this.clickFn;
-
-            if (clickFn) {
-                dom.removeEventListener(button, 'click', clickFn, {
-                    passive: true
-                });
-            }
-        }
-
-        this.options = null;
-        this.item = null;
-    };
-
-    return RecordingButton;
-});

src/components/recordingcreator/recordingcreator.js

@@ -1,12 +1,27 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'datetime', 'imageLoader', 'recordingFields', 'events', 'emby-checkbox', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, datetime, imageLoader, recordingFields, events) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import globalize from 'globalize';
+import layoutManager from 'layoutManager';
+import mediaInfo from 'mediaInfo';
+import connectionManager from 'connectionManager';
+import require from 'require';
+import loading from 'loading';
+import scrollHelper from 'scrollHelper';
+import datetime from 'datetime';
+import imageLoader from 'imageLoader';
+import recordingFields from 'recordingFields';
+import events from 'events';
+import 'emby-checkbox';
+import 'emby-button';
+import 'emby-collapse';
+import 'emby-input';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'css!./recordingcreator';
+import 'material-icons';
 
-    layoutManager = layoutManager.default || layoutManager;
+let currentDialog;
-    scrollHelper = scrollHelper.default || scrollHelper;
+let closeAction;
-
+let currentRecordingFields;
-    var currentDialog;
-    var closeAction;
-    var currentRecordingFields;
 
 function closeDialog() {
     dialogHelper.close(currentDialog);
@@ -25,7 +40,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 }
 
 function getImageUrl(item, apiClient, imageHeight) {
-        var imageTags = item.ImageTags || {};
+    const imageTags = item.ImageTags || {};
 
     if (item.PrimaryImageTag) {
         imageTags.Primary = item.PrimaryImageTag;
@@ -50,8 +65,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 
 function renderRecording(context, defaultTimer, program, apiClient, refreshRecordingStateOnly) {
     if (!refreshRecordingStateOnly) {
-            var imgUrl = getImageUrl(program, apiClient, 200);
+        const imgUrl = getImageUrl(program, apiClient, 200);
-            var imageContainer = context.querySelector('.recordingDialog-imageContainer');
+        const imageContainer = context.querySelector('.recordingDialog-imageContainer');
 
         if (imgUrl) {
             imageContainer.innerHTML = '<img src="' + require.toUrl('.').split('?')[0] + '/empty.png" data-src="' + imgUrl + '" class="recordingDialog-img lazy" />';
@@ -68,8 +83,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
         context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
         context.querySelector('.itemOverview').innerHTML = program.Overview || '';
 
-            var formDialogFooter = context.querySelector('.formDialogFooter');
+        const formDialogFooter = context.querySelector('.formDialogFooter');
-            var now = new Date();
+        const now = new Date();
         if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) {
             formDialogFooter.classList.remove('hide');
         } else {
@@ -88,14 +103,14 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 function reload(context, programId, serverId, refreshRecordingStateOnly) {
     loading.show();
 
-        var apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = connectionManager.getApiClient(serverId);
 
-        var promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
+    const promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
-        var promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
+    const promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
 
     Promise.all([promise1, promise2]).then(function (responses) {
-            var defaults = responses[0];
+        const defaults = responses[0];
-            var program = responses[1];
+        const program = responses[1];
 
         renderRecording(context, defaults, program, apiClient, refreshRecordingStateOnly);
     });
@@ -103,11 +118,11 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 
 function executeCloseAction(action, programId, serverId) {
     if (action === 'play') {
-            require(['playbackManager'], function (playbackManager) {
+        import('playbackManager').then(({default: playbackManager}) => {
-                var apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = connectionManager.getApiClient(serverId);
 
             apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
-                    playbackManager.default.play({
+                playbackManager.play({
                     ids: [item.ChannelId],
                     serverId: serverId
                 });
@@ -123,8 +138,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
 
         loading.show();
 
-            require(['text!./recordingcreator.template.html'], function (template) {
+        import('text!./recordingcreator.template.html').then(({default: template}) => {
-                var dialogOptions = {
+            const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false
             };
@@ -135,12 +150,12 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
                 dialogOptions.size = 'small';
             }
 
-                var dlg = dialogHelper.createDialog(dialogOptions);
+            const dlg = dialogHelper.createDialog(dialogOptions);
 
             dlg.classList.add('formDialog');
             dlg.classList.add('recordingDialog');
 
-                var html = '';
+            let html = '';
 
             html += globalize.translateHtml(template, 'core');
 
@@ -184,7 +199,6 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
     });
 }
 
-    return {
+export default {
     show: showEditor
 };
-});