Merge remote-tracking branch 'upstream/master' into apphost-es6

src/components/guide/guide-settings.js

@@ -1,150 +1,149 @@
-define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectionManager', 'require', 'loading', 'scrollHelper', 'emby-checkbox', 'emby-radio', 'css!./../formdialog', 'material-icons'], function (dialogHelper, globalize, userSettings, layoutManager, connectionManager, require, loading, scrollHelper) {
-    'use strict';
+import dialogHelper from 'dialogHelper';
+import globalize from 'globalize';
+import * as userSettings from 'userSettings';
+import layoutManager from 'layoutManager';
+import scrollHelper from 'scrollHelper';
+import 'emby-checkbox';
+import 'emby-radio';
+import 'css!./../formdialog';
+import 'material-icons';
 
-    layoutManager = layoutManager.default || layoutManager;
-    scrollHelper = scrollHelper.default || scrollHelper;
+function saveCategories(context, options) {
+    const categories = [];
 
-    function saveCategories(context, options) {
-        var categories = [];
+    const chkCategorys = context.querySelectorAll('.chkCategory');
+    for (const chkCategory of chkCategorys) {
+        const type = chkCategory.getAttribute('data-type');
 
-        var chkCategorys = context.querySelectorAll('.chkCategory');
-        for (var i = 0, length = chkCategorys.length; i < length; i++) {
-            var type = chkCategorys[i].getAttribute('data-type');
-
-            if (chkCategorys[i].checked) {
-                categories.push(type);
-            }
-        }
-
-        if (categories.length >= 4) {
-            categories.push('series');
-        }
-
-        // differentiate between none and all
-        categories.push('all');
-        options.categories = categories;
-    }
-
-    function loadCategories(context, options) {
-        var selectedCategories = options.categories || [];
-
-        var chkCategorys = context.querySelectorAll('.chkCategory');
-        for (var i = 0, length = chkCategorys.length; i < length; i++) {
-            var type = chkCategorys[i].getAttribute('data-type');
-
-            chkCategorys[i].checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1;
+        if (chkCategory.checked) {
+            categories.push(type);
         }
     }
 
-    function save(context) {
-        var i;
-        var length;
+    if (categories.length >= 4) {
+        categories.push('series');
+    }
 
-        var chkIndicators = context.querySelectorAll('.chkIndicator');
-        for (i = 0, length = chkIndicators.length; i < length; i++) {
-            var type = chkIndicators[i].getAttribute('data-type');
-            userSettings.set('guide-indicator-' + type, chkIndicators[i].checked);
+    // differentiate between none and all
+    categories.push('all');
+    options.categories = categories;
+}
+
+function loadCategories(context, options) {
+    const selectedCategories = options.categories || [];
+
+    const chkCategorys = context.querySelectorAll('.chkCategory');
+    for (const chkCategory of chkCategorys) {
+        const type = chkCategory.getAttribute('data-type');
+
+        chkCategory.checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1;
+    }
+}
+
+function save(context) {
+    const chkIndicators = context.querySelectorAll('.chkIndicator');
+
+    for (const chkIndicator of chkIndicators) {
+        const type = chkIndicator.getAttribute('data-type');
+        userSettings.set('guide-indicator-' + type, chkIndicator.checked);
+    }
+
+    userSettings.set('guide-colorcodedbackgrounds', context.querySelector('.chkColorCodedBackgrounds').checked);
+    userSettings.set('livetv-favoritechannelsattop', context.querySelector('.chkFavoriteChannelsAtTop').checked);
+
+    const sortBys = context.querySelectorAll('.chkSortOrder');
+    for (const sortBy of sortBys) {
+        if (sortBy.checked) {
+            userSettings.set('livetv-channelorder', sortBy.value);
+            break;
         }
+    }
+}
 
-        userSettings.set('guide-colorcodedbackgrounds', context.querySelector('.chkColorCodedBackgrounds').checked);
-        userSettings.set('livetv-favoritechannelsattop', context.querySelector('.chkFavoriteChannelsAtTop').checked);
+function load(context) {
+    const chkIndicators = context.querySelectorAll('.chkIndicator');
 
-        var sortBys = context.querySelectorAll('.chkSortOrder');
-        for (i = 0, length = sortBys.length; i < length; i++) {
-            if (sortBys[i].checked) {
-                userSettings.set('livetv-channelorder', sortBys[i].value);
-                break;
-            }
+    for (const chkIndicator of chkIndicators) {
+        const type = chkIndicator.getAttribute('data-type');
+
+        if (chkIndicator.getAttribute('data-default') === 'true') {
+            chkIndicator.checked = userSettings.get('guide-indicator-' + type) !== 'false';
+        } else {
+            chkIndicator.checked = userSettings.get('guide-indicator-' + type) === 'true';
         }
     }
 
-    function load(context) {
-        var i;
-        var length;
+    context.querySelector('.chkColorCodedBackgrounds').checked = userSettings.get('guide-colorcodedbackgrounds') === 'true';
+    context.querySelector('.chkFavoriteChannelsAtTop').checked = userSettings.get('livetv-favoritechannelsattop') !== 'false';
 
-        var chkIndicators = context.querySelectorAll('.chkIndicator');
-        for (i = 0, length = chkIndicators.length; i < length; i++) {
-            var type = chkIndicators[i].getAttribute('data-type');
+    const sortByValue = userSettings.get('livetv-channelorder') || 'Number';
 
-            if (chkIndicators[i].getAttribute('data-default') === 'true') {
-                chkIndicators[i].checked = userSettings.get('guide-indicator-' + type) !== 'false';
+    const sortBys = context.querySelectorAll('.chkSortOrder');
+    for (const sortBy of sortBys) {
+        sortBy.checked = sortBy.value === sortByValue;
+    }
+}
+
+function showEditor(options) {
+    return new Promise(function (resolve, reject) {
+        let settingsChanged = false;
+
+        import('text!./guide-settings.template.html').then(({ default: template }) => {
+            const dialogOptions = {
+                removeOnClose: true,
+                scrollY: false
+            };
+
+            if (layoutManager.tv) {
+                dialogOptions.size = 'fullscreen';
             } else {
-                chkIndicators[i].checked = userSettings.get('guide-indicator-' + type) === 'true';
+                dialogOptions.size = 'small';
             }
-        }
 
-        context.querySelector('.chkColorCodedBackgrounds').checked = userSettings.get('guide-colorcodedbackgrounds') === 'true';
-        context.querySelector('.chkFavoriteChannelsAtTop').checked = userSettings.get('livetv-favoritechannelsattop') !== 'false';
+            const dlg = dialogHelper.createDialog(dialogOptions);
 
-        var sortByValue = userSettings.get('livetv-channelorder') || 'Number';
+            dlg.classList.add('formDialog');
 
-        var sortBys = context.querySelectorAll('.chkSortOrder');
-        for (i = 0, length = sortBys.length; i < length; i++) {
-            sortBys[i].checked = sortBys[i].value === sortByValue;
-        }
-    }
+            let html = '';
 
-    function showEditor(options) {
-        return new Promise(function (resolve, reject) {
-            var settingsChanged = false;
+            html += globalize.translateHtml(template, 'core');
 
-            require(['text!./guide-settings.template.html'], function (template) {
-                var dialogOptions = {
-                    removeOnClose: true,
-                    scrollY: false
-                };
+            dlg.innerHTML = html;
 
-                if (layoutManager.tv) {
-                    dialogOptions.size = 'fullscreen';
-                } else {
-                    dialogOptions.size = 'small';
-                }
-
-                var dlg = dialogHelper.createDialog(dialogOptions);
-
-                dlg.classList.add('formDialog');
-
-                var html = '';
-
-                html += globalize.translateHtml(template, 'core');
-
-                dlg.innerHTML = html;
-
-                dlg.addEventListener('change', function () {
-                    settingsChanged = true;
-                });
-
-                dlg.addEventListener('close', function () {
-                    if (layoutManager.tv) {
-                        scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
-                    }
-
-                    save(dlg);
-                    saveCategories(dlg, options);
-
-                    if (settingsChanged) {
-                        resolve();
-                    } else {
-                        reject();
-                    }
-                });
-
-                dlg.querySelector('.btnCancel').addEventListener('click', function () {
-                    dialogHelper.close(dlg);
-                });
-
-                if (layoutManager.tv) {
-                    scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
-                }
-
-                load(dlg);
-                loadCategories(dlg, options);
-                dialogHelper.open(dlg);
+            dlg.addEventListener('change', function () {
+                settingsChanged = true;
             });
-        });
-    }
 
-    return {
-        show: showEditor
-    };
-});
+            dlg.addEventListener('close', function () {
+                if (layoutManager.tv) {
+                    scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
+                }
+
+                save(dlg);
+                saveCategories(dlg, options);
+
+                if (settingsChanged) {
+                    resolve();
+                } else {
+                    reject();
+                }
+            });
+
+            dlg.querySelector('.btnCancel').addEventListener('click', function () {
+                dialogHelper.close(dlg);
+            });
+
+            if (layoutManager.tv) {
+                scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+            }
+
+            load(dlg);
+            loadCategories(dlg, options);
+            dialogHelper.open(dlg);
+        });
+    });
+}
+
+export default {
+    show: showEditor
+};

src/components/imageDownloader/imageDownloader.js

@@ -8,7 +8,6 @@ import browser from 'browser';
 import layoutManager from 'layoutManager';
 import scrollHelper from 'scrollHelper';
 import globalize from 'globalize';
-import require from 'require';
 import 'emby-checkbox';
 import 'paper-icon-button-light';
 import 'emby-button';
@@ -317,7 +316,7 @@ import 'cardStyle';
     function showEditor(itemId, serverId, itemType) {
         loading.show();
 
-        require(['text!./imageDownloader.template.html'], function (template) {
+        import('text!./imageDownloader.template.html').then(({default: template}) => {
             const apiClient = connectionManager.getApiClient(serverId);
 
             currentItemId = itemId;

src/components/metadataEditor/metadataEditor.js

@@ -6,7 +6,6 @@ import loading from 'loading';
 import focusManager from 'focusManager';
 import connectionManager from 'connectionManager';
 import globalize from 'globalize';
-import require from 'require';
 import shell from 'shell';
 import 'emby-checkbox';
 import 'emby-input';
@@ -37,7 +36,7 @@ import 'flexStyles';
 
     function submitUpdatedItem(form, item) {
         function afterContentTypeUpdated() {
-            require(['toast'], function (toast) {
+            import('toast').then(({default: toast}) => {
                 toast(globalize.translate('MessageItemSaved'));
             });
 
@@ -227,7 +226,7 @@ import 'flexStyles';
     }
 
     function editPerson(context, person, index) {
-        require(['personEditor'], function (personEditor) {
+        import('personEditor').then(({default: personEditor}) => {
             personEditor.show(person).then(function (updatedPerson) {
                 const isNew = index === -1;
 
@@ -246,14 +245,14 @@ import 'flexStyles';
         if (parentId) {
             reload(context, parentId, item.ServerId);
         } else {
-            require(['appRouter'], function (appRouter) {
+            import('appRouter').then(({default: appRouter}) => {
                 appRouter.goHome();
             });
         }
     }
 
     function showMoreMenu(context, button, user) {
-        require(['itemContextMenu'], function (itemContextMenu) {
+        import('itemContextMenu').then(({default: itemContextMenu}) => {
             var item = currentItem;
 
             itemContextMenu.show({

src/components/recordingcreator/recordingbutton.js

@@ -1,37 +1,40 @@
-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) {
-    'use strict';
+import connectionManager from 'connectionManager';
+import dom from 'dom';
+import recordingHelper from 'recordingHelper';
+import 'paper-icon-button-light';
+import 'emby-button';
+import 'css!./recordingfields';
 
-    recordingHelper = recordingHelper.default || recordingHelper;
+function onRecordingButtonClick(e) {
+    const item = this.item;
 
-    function onRecordingButtonClick(e) {
-        var item = this.item;
+    if (item) {
+        const serverId = item.ServerId;
+        const programId = item.Id;
+        const timerId = item.TimerId;
+        const timerStatus = item.Status;
+        const seriesTimerId = item.SeriesTimerId;
 
-        if (item) {
-            var serverId = item.ServerId;
-            var programId = item.Id;
-            var timerId = item.TimerId;
-            var timerStatus = item.Status;
-            var seriesTimerId = item.SeriesTimerId;
+        const instance = this;
 
-            var instance = this;
-
-            recordingHelper.toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId).then(function () {
-                instance.refresh(serverId, programId);
-            });
-        }
+        recordingHelper.toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId).then(function () {
+            instance.refresh(serverId, programId);
+        });
     }
+}
 
-    function setButtonIcon(button, icon) {
-        var inner = button.querySelector('.material-icons');
-        inner.classList.remove('fiber_smart_record');
-        inner.classList.remove('fiber_manual_record');
-        inner.classList.add(icon);
-    }
+function setButtonIcon(button, icon) {
+    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,39 +52,17 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
         });
     }
 
-    function getIndicatorIcon(item) {
-        var status;
-
-        if (item.Type === 'SeriesTimer') {
-            return 'fiber_smart_record';
-        } else if (item.TimerId || item.SeriesTimerId) {
-            status = item.Status || 'Cancelled';
-        } else if (item.Type === 'Timer') {
-            status = item.Status;
-        } else {
-            return 'fiber_manual_record';
-        }
-
-        if (item.SeriesTimerId) {
-            if (status !== 'Cancelled') {
-                return 'fiber_smart_record';
-            }
-        }
-
-        return 'fiber_manual_record';
-    }
-
-    RecordingButton.prototype.refresh = function (serverId, itemId) {
-        var apiClient = connectionManager.getApiClient(serverId);
-        var self = this;
+    refresh(serverId, itemId) {
+        const apiClient = connectionManager.getApiClient(serverId);
+        const 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;
+    refreshItem(item) {
+        const options = this.options;
+        const button = options.button;
         this.item = item;
         setButtonIcon(button, getIndicatorIcon(item));
 
@@ -90,15 +71,15 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
         } else {
             button.classList.remove('recordingIcon-active');
         }
-    };
+    }
 
-    RecordingButton.prototype.destroy = function () {
-        var options = this.options;
+    destroy() {
+        const options = this.options;
 
         if (options) {
-            var button = options.button;
+            const button = options.button;
 
-            var clickFn = this.clickFn;
+            const clickFn = this.clickFn;
 
             if (clickFn) {
                 dom.removeEventListener(button, 'click', clickFn, {
@@ -109,7 +90,29 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
 
         this.options = null;
         this.item = null;
-    };
+    }
+}
 
-    return RecordingButton;
-});
+function getIndicatorIcon(item) {
+    let status;
+
+    if (item.Type === 'SeriesTimer') {
+        return 'fiber_smart_record';
+    } else if (item.TimerId || item.SeriesTimerId) {
+        status = item.Status || 'Cancelled';
+    } else if (item.Type === 'Timer') {
+        status = item.Status;
+    } else {
+        return 'fiber_manual_record';
+    }
+
+    if (item.SeriesTimerId) {
+        if (status !== 'Cancelled') {
+            return 'fiber_smart_record';
+        }
+    }
+
+    return 'fiber_manual_record';
+}
+
+export default RecordingButton;

src/components/recordingcreator/recordingcreator.js

@@ -1,190 +1,204 @@
-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) {
-    'use strict';
+import dialogHelper from 'dialogHelper';
+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;
-    scrollHelper = scrollHelper.default || scrollHelper;
+let currentDialog;
+let closeAction;
+let currentRecordingFields;
 
-    var currentDialog;
-    var closeAction;
-    var currentRecordingFields;
+function closeDialog() {
+    dialogHelper.close(currentDialog);
+}
 
-    function closeDialog() {
-        dialogHelper.close(currentDialog);
+function init(context) {
+    context.querySelector('.btnPlay').addEventListener('click', function () {
+        closeAction = 'play';
+        closeDialog();
+    });
+
+    context.querySelector('.btnCancel').addEventListener('click', function () {
+        closeAction = null;
+        closeDialog();
+    });
+}
+
+function getImageUrl(item, apiClient, imageHeight) {
+    const imageTags = item.ImageTags || {};
+
+    if (item.PrimaryImageTag) {
+        imageTags.Primary = item.PrimaryImageTag;
     }
 
-    function init(context) {
-        context.querySelector('.btnPlay').addEventListener('click', function () {
-            closeAction = 'play';
-            closeDialog();
+    if (imageTags.Primary) {
+        return apiClient.getScaledImageUrl(item.Id, {
+            type: 'Primary',
+            maxHeight: imageHeight,
+            tag: item.ImageTags.Primary
         });
-
-        context.querySelector('.btnCancel').addEventListener('click', function () {
-            closeAction = null;
-            closeDialog();
+    } else if (imageTags.Thumb) {
+        return apiClient.getScaledImageUrl(item.Id, {
+            type: 'Thumb',
+            maxHeight: imageHeight,
+            tag: item.ImageTags.Thumb
         });
     }
 
-    function getImageUrl(item, apiClient, imageHeight) {
-        var imageTags = item.ImageTags || {};
+    return null;
+}
 
-        if (item.PrimaryImageTag) {
-            imageTags.Primary = item.PrimaryImageTag;
+function renderRecording(context, defaultTimer, program, apiClient, refreshRecordingStateOnly) {
+    if (!refreshRecordingStateOnly) {
+        const imgUrl = getImageUrl(program, apiClient, 200);
+        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" />';
+            imageContainer.classList.remove('hide');
+
+            imageLoader.lazyChildren(imageContainer);
+        } else {
+            imageContainer.innerHTML = '';
+            imageContainer.classList.add('hide');
         }
 
-        if (imageTags.Primary) {
-            return apiClient.getScaledImageUrl(item.Id, {
-                type: 'Primary',
-                maxHeight: imageHeight,
-                tag: item.ImageTags.Primary
-            });
-        } else if (imageTags.Thumb) {
-            return apiClient.getScaledImageUrl(item.Id, {
-                type: 'Thumb',
-                maxHeight: imageHeight,
-                tag: item.ImageTags.Thumb
-            });
+        context.querySelector('.recordingDialog-itemName').innerHTML = program.Name;
+        context.querySelector('.formDialogHeaderTitle').innerHTML = program.Name;
+        context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
+        context.querySelector('.itemOverview').innerHTML = program.Overview || '';
+
+        const formDialogFooter = context.querySelector('.formDialogFooter');
+        const now = new Date();
+        if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) {
+            formDialogFooter.classList.remove('hide');
+        } else {
+            formDialogFooter.classList.add('hide');
         }
 
-        return null;
+        context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
     }
 
-    function renderRecording(context, defaultTimer, program, apiClient, refreshRecordingStateOnly) {
-        if (!refreshRecordingStateOnly) {
-            var imgUrl = getImageUrl(program, apiClient, 200);
-            var imageContainer = context.querySelector('.recordingDialog-imageContainer');
+    context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program, {
+    });
 
-            if (imgUrl) {
-                imageContainer.innerHTML = '<img src="' + require.toUrl('.').split('?')[0] + '/empty.png" data-src="' + imgUrl + '" class="recordingDialog-img lazy" />';
-                imageContainer.classList.remove('hide');
+    loading.hide();
+}
 
-                imageLoader.lazyChildren(imageContainer);
-            } else {
-                imageContainer.innerHTML = '';
-                imageContainer.classList.add('hide');
-            }
+function reload(context, programId, serverId, refreshRecordingStateOnly) {
+    loading.show();
 
-            context.querySelector('.recordingDialog-itemName').innerHTML = program.Name;
-            context.querySelector('.formDialogHeaderTitle').innerHTML = program.Name;
-            context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
-            context.querySelector('.itemOverview').innerHTML = program.Overview || '';
+    const apiClient = connectionManager.getApiClient(serverId);
 
-            var formDialogFooter = context.querySelector('.formDialogFooter');
-            var now = new Date();
-            if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) {
-                formDialogFooter.classList.remove('hide');
-            } else {
-                formDialogFooter.classList.add('hide');
-            }
+    const promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
+    const promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
 
-            context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
-        }
+    Promise.all([promise1, promise2]).then(function (responses) {
+        const defaults = responses[0];
+        const program = responses[1];
 
-        context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program, {
-        });
+        renderRecording(context, defaults, program, apiClient, refreshRecordingStateOnly);
+    });
+}
 
-        loading.hide();
-    }
+function executeCloseAction(action, programId, serverId) {
+    if (action === 'play') {
+        import('playbackManager').then(({default: playbackManager}) => {
+            const apiClient = connectionManager.getApiClient(serverId);
 
-    function reload(context, programId, serverId, refreshRecordingStateOnly) {
-        loading.show();
-
-        var apiClient = connectionManager.getApiClient(serverId);
-
-        var promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
-        var promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
-
-        Promise.all([promise1, promise2]).then(function (responses) {
-            var defaults = responses[0];
-            var program = responses[1];
-
-            renderRecording(context, defaults, program, apiClient, refreshRecordingStateOnly);
-        });
-    }
-
-    function executeCloseAction(action, programId, serverId) {
-        if (action === 'play') {
-            require(['playbackManager'], function (playbackManager) {
-                var apiClient = connectionManager.getApiClient(serverId);
-
-                apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
-                    playbackManager.default.play({
-                        ids: [item.ChannelId],
-                        serverId: serverId
-                    });
-                });
-            });
-            return;
-        }
-    }
-
-    function showEditor(itemId, serverId) {
-        return new Promise(function (resolve, reject) {
-            closeAction = null;
-
-            loading.show();
-
-            require(['text!./recordingcreator.template.html'], function (template) {
-                var dialogOptions = {
-                    removeOnClose: true,
-                    scrollY: false
-                };
-
-                if (layoutManager.tv) {
-                    dialogOptions.size = 'fullscreen';
-                } else {
-                    dialogOptions.size = 'small';
-                }
-
-                var dlg = dialogHelper.createDialog(dialogOptions);
-
-                dlg.classList.add('formDialog');
-                dlg.classList.add('recordingDialog');
-
-                var html = '';
-
-                html += globalize.translateHtml(template, 'core');
-
-                dlg.innerHTML = html;
-
-                currentDialog = dlg;
-
-                function onRecordingChanged() {
-                    reload(dlg, itemId, serverId, true);
-                }
-
-                dlg.addEventListener('close', function () {
-                    events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged);
-                    executeCloseAction(closeAction, itemId, serverId);
-
-                    if (currentRecordingFields && currentRecordingFields.hasChanged()) {
-                        resolve();
-                    } else {
-                        reject();
-                    }
-                });
-
-                if (layoutManager.tv) {
-                    scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
-                }
-
-                init(dlg);
-
-                reload(dlg, itemId, serverId);
-
-                currentRecordingFields = new recordingFields({
-                    parent: dlg.querySelector('.recordingFields'),
-                    programId: itemId,
+            apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
+                playbackManager.play({
+                    ids: [item.ChannelId],
                     serverId: serverId
                 });
-
-                events.on(currentRecordingFields, 'recordingchanged', onRecordingChanged);
-
-                dialogHelper.open(dlg);
             });
         });
+        return;
     }
+}
 
-    return {
-        show: showEditor
-    };
-});
+function showEditor(itemId, serverId) {
+    return new Promise(function (resolve, reject) {
+        closeAction = null;
+
+        loading.show();
+
+        import('text!./recordingcreator.template.html').then(({default: template}) => {
+            const dialogOptions = {
+                removeOnClose: true,
+                scrollY: false
+            };
+
+            if (layoutManager.tv) {
+                dialogOptions.size = 'fullscreen';
+            } else {
+                dialogOptions.size = 'small';
+            }
+
+            const dlg = dialogHelper.createDialog(dialogOptions);
+
+            dlg.classList.add('formDialog');
+            dlg.classList.add('recordingDialog');
+
+            let html = '';
+
+            html += globalize.translateHtml(template, 'core');
+
+            dlg.innerHTML = html;
+
+            currentDialog = dlg;
+
+            function onRecordingChanged() {
+                reload(dlg, itemId, serverId, true);
+            }
+
+            dlg.addEventListener('close', function () {
+                events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged);
+                executeCloseAction(closeAction, itemId, serverId);
+
+                if (currentRecordingFields && currentRecordingFields.hasChanged()) {
+                    resolve();
+                } else {
+                    reject();
+                }
+            });
+
+            if (layoutManager.tv) {
+                scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+            }
+
+            init(dlg);
+
+            reload(dlg, itemId, serverId);
+
+            currentRecordingFields = new recordingFields({
+                parent: dlg.querySelector('.recordingFields'),
+                programId: itemId,
+                serverId: serverId
+            });
+
+            events.on(currentRecordingFields, 'recordingchanged', onRecordingChanged);
+
+            dialogHelper.open(dlg);
+        });
+    });
+}
+
+export default {
+    show: showEditor
+};

src/components/tabbedview/tabbedview.js

@@ -1,32 +1,33 @@
-define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (backdrop, mainTabsManager, layoutManager) {
-    'use strict';
+import backdrop from 'backdrop';
+import * as mainTabsManager from 'mainTabsManager';
+import layoutManager from 'layoutManager';
+import 'emby-tabs';
 
-    layoutManager = layoutManager.default || layoutManager;
+function onViewDestroy(e) {
+    var tabControllers = this.tabControllers;
 
-    function onViewDestroy(e) {
-        var tabControllers = this.tabControllers;
+    if (tabControllers) {
+        tabControllers.forEach(function (t) {
+            if (t.destroy) {
+                t.destroy();
+            }
+        });
 
-        if (tabControllers) {
-            tabControllers.forEach(function (t) {
-                if (t.destroy) {
-                    t.destroy();
-                }
-            });
-
-            this.tabControllers = null;
-        }
-
-        this.view = null;
-        this.params = null;
-        this.currentTabController = null;
-        this.initialTabIndex = null;
+        this.tabControllers = null;
     }
 
-    function onBeforeTabChange() {
+    this.view = null;
+    this.params = null;
+    this.currentTabController = null;
+    this.initialTabIndex = null;
+}
 
-    }
+function onBeforeTabChange() {
 
-    function TabbedView(view, params) {
+}
+
+class TabbedView {
+    constructor(view, params) {
         this.tabControllers = [];
         this.view = view;
         this.params = params;
@@ -87,7 +88,7 @@ define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (
         view.addEventListener('viewdestroy', onViewDestroy.bind(this));
     }
 
-    TabbedView.prototype.onResume = function (options) {
+    onResume(options) {
         this.setTitle();
         backdrop.clearBackdrop();
 
@@ -98,19 +99,18 @@ define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (
         } else if (currentTabController && currentTabController.onResume) {
             currentTabController.onResume({});
         }
-    };
+    }
 
-    TabbedView.prototype.onPause = function () {
+    onPause() {
         var currentTabController = this.currentTabController;
 
         if (currentTabController && currentTabController.onPause) {
             currentTabController.onPause();
         }
-    };
-
-    TabbedView.prototype.setTitle = function () {
+    }
+    setTitle() {
         Emby.Page.setTitle('');
-    };
+    }
+}
 
-    return TabbedView;
-});
+export default TabbedView;