Merge pull request #1771 from Camc314/migrate-to-ES6-68

Migration of themeMediaPLayer, viewSettings and notification to ES6 modules

package.json

@@ -142,6 +142,7 @@
           "src/components/metadataEditor/metadataEditor.js",
           "src/components/metadataEditor/personEditor.js",
           "src/components/multiSelect/multiSelect.js",
+          "src/components/notifications/notifications.js",
           "src/components/nowPlayingBar/nowPlayingBar.js",
           "src/components/playback/brightnessosd.js",
           "src/components/playback/mediasession.js",
@@ -187,6 +188,7 @@
           "src/components/syncPlay/playbackPermissionManager.js",
           "src/components/syncPlay/syncPlayManager.js",
           "src/components/syncPlay/timeSyncManager.js",
+          "src/components/themeMediaPlayer.js",
           "src/components/tabbedview/tabbedview.js",
           "src/components/viewManager/viewManager.js",
           "src/components/tvproviders/schedulesdirect.js",
@@ -194,6 +196,7 @@
           "src/components/toast/toast.js",
           "src/components/upnextdialog/upnextdialog.js",
           "src/components/viewContainer.js",
+          "src/components/viewSettings/viewSettings.js",
           "src/components/castSenderApi.js",
           "src/controllers/session/addServer/index.js",
           "src/controllers/session/forgotPassword/index.js",
@@ -221,8 +224,8 @@
           "src/controllers/dashboard/metadataImages.js",
           "src/controllers/dashboard/metadatanfo.js",
           "src/controllers/dashboard/networking.js",
-          "src/controllers/dashboard/notifications/notification.js",
+          "src/controllers/dashboard/notifications/notification/index.js",
-          "src/controllers/dashboard/notifications/notifications.js",
+          "src/controllers/dashboard/notifications/notifications/index.js",
           "src/controllers/dashboard/playback.js",
           "src/controllers/dashboard/plugins/add/index.js",
           "src/controllers/dashboard/plugins/installed/index.js",

src/components/notifications/notifications.js

@@ -1,8 +1,7 @@
-define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'require'], function (serverNotifications, playbackManager, events, globalize, require) {
+import serverNotifications from 'serverNotifications';
-    'use strict';
+import playbackManager from 'playbackManager';
-
+import events from 'events';
-    playbackManager = playbackManager.default || playbackManager;
+import globalize from 'globalize';
-    serverNotifications = serverNotifications.default || serverNotifications;
 
 function onOneDocumentClick() {
     document.removeEventListener('click', onOneDocumentClick);
@@ -18,7 +17,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
 document.addEventListener('click', onOneDocumentClick);
 document.addEventListener('keydown', onOneDocumentClick);
 
-    var serviceWorkerRegistration;
+let serviceWorkerRegistration;
 
 function closeAfter(notification, timeoutMs) {
     setTimeout(function () {
@@ -32,7 +31,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
 
 function resetRegistration() {
     /* eslint-disable-next-line compat/compat */
-        var serviceWorker = navigator.serviceWorker;
+    let serviceWorker = navigator.serviceWorker;
     if (serviceWorker) {
         serviceWorker.ready.then(function (registration) {
             serviceWorkerRegistration = registration;
@@ -48,7 +47,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
 
 function showNonPersistentNotification(title, options, timeoutMs) {
     try {
-            var notif = new Notification(title, options); /* eslint-disable-line compat/compat */
+        let notif = new Notification(title, options); /* eslint-disable-line compat/compat */
 
         if (notif.show) {
             notif.show();
@@ -68,7 +67,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
 }
 
 function showNotification(options, timeoutMs, apiClient) {
-        var title = options.title;
+    let title = options.title;
 
     options.data = options.data || {};
     options.data.serverId = apiClient.serverInfo().Id;
@@ -90,13 +89,13 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
         return;
     }
 
-        var body = item.Name;
+    let body = item.Name;
 
     if (item.SeriesName) {
         body = item.SeriesName + ' - ' + body;
     }
 
-        var notification = {
+    let notification = {
         title: 'New ' + item.Type,
         body: body,
         vibrate: true,
@@ -104,7 +103,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
         data: {}
     };
 
-        var imageTags = item.ImageTags || {};
+    let imageTags = item.ImageTags || {};
 
     if (imageTags.Primary) {
         notification.icon = apiClient.getScaledImageUrl(item.Id, {
@@ -118,7 +117,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
 }
 
 function onLibraryChanged(data, apiClient) {
-        var newItems = data.ItemsAdded;
+    let newItems = data.ItemsAdded;
 
     if (!newItems.length) {
         return;
@@ -141,17 +140,17 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
         EnableTotalRecordCount: false
 
     }).then(function (result) {
-            var items = result.Items;
+        let items = result.Items;
 
-            for (var i = 0, length = items.length ; i < length; i++) {
+        for (const item of items) {
-                showNewItemNotification(items[i], apiClient);
+            showNewItemNotification(item, apiClient);
         }
     });
 }
 
 function getIconUrl(name) {
     name = name || 'notificationicon.png';
-        return require.toUrl('.').split('?')[0] + '/' + name;
+    return './components/notifications/' + name;
 }
 
 function showPackageInstallNotification(apiClient, installation, status) {
@@ -160,7 +159,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
             return;
         }
 
-            var notification = {
+        let notification = {
             tag: 'install' + installation.Id,
             data: {}
         };
@@ -189,12 +188,12 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
         }
 
         if (status === 'progress') {
-                var percentComplete = Math.round(installation.PercentComplete || 0);
+            let percentComplete = Math.round(installation.PercentComplete || 0);
 
             notification.body = percentComplete + '% complete.';
         }
 
-            var timeout = status === 'cancelled' ? 5000 : 0;
+        let timeout = status === 'cancelled' ? 5000 : 0;
 
         showNotification(notification, timeout, apiClient);
     });
@@ -221,8 +220,8 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
 });
 
 events.on(serverNotifications, 'ServerShuttingDown', function (e, apiClient, data) {
-        var serverId = apiClient.serverInfo().Id;
+    let serverId = apiClient.serverInfo().Id;
-        var notification = {
+    let notification = {
         tag: 'restart' + serverId,
         title: globalize.translate('ServerNameIsShuttingDown', apiClient.serverInfo().Name)
     };
@@ -230,8 +229,8 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
 });
 
 events.on(serverNotifications, 'ServerRestarting', function (e, apiClient, data) {
-        var serverId = apiClient.serverInfo().Id;
+    let serverId = apiClient.serverInfo().Id;
-        var notification = {
+    let notification = {
         tag: 'restart' + serverId,
         title: globalize.translate('ServerNameIsRestarting', apiClient.serverInfo().Name)
     };
@@ -239,8 +238,8 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
 });
 
 events.on(serverNotifications, 'RestartRequired', function (e, apiClient) {
-        var serverId = apiClient.serverInfo().Id;
+    let serverId = apiClient.serverInfo().Id;
-        var notification = {
+    let notification = {
         tag: 'restart' + serverId,
         title: globalize.translate('PleaseRestartServerName', apiClient.serverInfo().Name)
     };
@@ -256,4 +255,4 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
 
     showNotification(notification, 0, apiClient);
 });
-});
+

src/components/themeMediaPlayer.js

@@ -1,13 +1,12 @@
-define(['playbackManager', 'userSettings', 'connectionManager'], function (playbackManager, userSettings, connectionManager) {
+import playbackManager from 'playbackManager';
-    'use strict';
+import * as userSettings from 'userSettings';
+import connectionManager from 'connectionManager';
 
-    playbackManager = playbackManager.default || playbackManager;
+let currentOwnerId;
-
+let currentThemeIds = [];
-    var currentOwnerId;
-    var currentThemeIds = [];
 
 function playThemeMedia(items, ownerId) {
-        var currentThemeItems = items.filter(function (i) {
+    const currentThemeItems = items.filter(function (i) {
         return enabled(i.MediaType);
     });
 
@@ -50,7 +49,7 @@ define(['playbackManager', 'userSettings', 'connectionManager'], function (playb
     return userSettings.enableThemeSongs();
 }
 
-    var excludeTypes = ['CollectionFolder', 'UserView', 'Program', 'SeriesTimer', 'Person', 'TvChannel', 'Channel'];
+const excludeTypes = ['CollectionFolder', 'UserView', 'Program', 'SeriesTimer', 'Person', 'TvChannel', 'Channel'];
 
 function loadThemeMedia(item) {
     if (item.CollectionType) {
@@ -63,12 +62,12 @@ define(['playbackManager', 'userSettings', 'connectionManager'], function (playb
         return;
     }
 
-        var apiClient = connectionManager.getApiClient(item.ServerId);
+    const apiClient = connectionManager.getApiClient(item.ServerId);
     apiClient.getThemeMedia(apiClient.getCurrentUserId(), item.Id, true).then(function (themeMediaResult) {
-            var ownerId = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.OwnerId : themeMediaResult.ThemeSongsResult.OwnerId;
+        const ownerId = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.OwnerId : themeMediaResult.ThemeSongsResult.OwnerId;
 
         if (ownerId !== currentOwnerId) {
-                var items = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.Items : themeMediaResult.ThemeSongsResult.Items;
+            const items = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.Items : themeMediaResult.ThemeSongsResult.Items;
 
             playThemeMedia(items, ownerId);
         }
@@ -76,15 +75,15 @@ define(['playbackManager', 'userSettings', 'connectionManager'], function (playb
 }
 
 document.addEventListener('viewshow', function (e) {
-        var state = e.detail.state || {};
+    const state = e.detail.state || {};
-        var item = state.item;
+    const item = state.item;
 
     if (item && item.ServerId) {
         loadThemeMedia(item);
         return;
     }
 
-        var viewOptions = e.detail.options || {};
+    const viewOptions = e.detail.options || {};
 
     if (viewOptions.supportsThemeMedia) {
         // Do nothing here, allow it to keep playing
@@ -94,10 +93,9 @@ define(['playbackManager', 'userSettings', 'connectionManager'], function (playb
 }, true);
 
 Events.on(playbackManager, 'playbackstart', function (e, player) {
-        var item = playbackManager.currentItem(player);
+    const item = playbackManager.currentItem(player);
     // User played something manually
     if (currentThemeIds.indexOf(item.Id) == -1) {
         currentOwnerId = null;
     }
 });
-});

src/components/viewSettings/viewSettings.js

@@ -1,7 +1,15 @@
-define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'userSettings', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dialogHelper, loading, appHost, layoutManager, connectionManager, appRouter, globalize, userSettings) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import layoutManager from 'layoutManager';
-
+import globalize from 'globalize';
-    layoutManager = layoutManager.default || layoutManager;
+import * as userSettings from 'userSettings';
+import 'emby-checkbox';
+import 'emby-input';
+import 'paper-icon-button-light';
+import 'emby-select';
+import 'material-icons';
+import 'css!./../formdialog';
+import 'emby-button';
+import 'flexStyles';
 
 function onSubmit(e) {
     e.preventDefault();
@@ -11,34 +19,33 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
 function initEditor(context, settings) {
     context.querySelector('form').addEventListener('submit', onSubmit);
 
-        var elems = context.querySelectorAll('.viewSetting-checkboxContainer');
+    const elems = context.querySelectorAll('.viewSetting-checkboxContainer');
 
-        for (var i = 0, length = elems.length; i < length; i++) {
+    for (const elem of elems) {
-            elems[i].querySelector('input').checked = settings[elems[i].getAttribute('data-settingname')] || false;
+        elem.querySelector('input').checked = settings[elem.getAttribute('data-settingname')] || false;
     }
 
     context.querySelector('.selectImageType').value = settings.imageType || 'primary';
 }
 
 function saveValues(context, settings, settingsKey) {
-        var elems = context.querySelectorAll('.viewSetting-checkboxContainer');
+    const elems = context.querySelectorAll('.viewSetting-checkboxContainer');
-        for (var i = 0, length = elems.length; i < length; i++) {
+    for (const elem of elems) {
-            userSettings.set(settingsKey + '-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input').checked);
+        userSettings.set(settingsKey + '-' + elem.getAttribute('data-settingname'), elem.querySelector('input').checked);
     }
 
     userSettings.set(settingsKey + '-imageType', context.querySelector('.selectImageType').value);
 }
 
 function centerFocus(elem, horiz, on) {
-        require(['scrollHelper'], function (scrollHelper) {
+    import('scrollHelper').then(({default: scrollHelper}) => {
-            scrollHelper = scrollHelper.default || scrollHelper;
+        const fn = on ? 'on' : 'off';
-            var fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
 }
 
 function showIfAllowed(context, selector, visible) {
-        var elem = context.querySelector(selector);
+    const elem = context.querySelector(selector);
 
     if (visible && !elem.classList.contains('hiddenFromViewSettings')) {
         elem.classList.remove('hide');
@@ -47,14 +54,13 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
     }
 }
 
-    function ViewSettings() {
+class ViewSettings {
-
+    constructor() {
     }
-
+    show(options) {
-    ViewSettings.prototype.show = function (options) {
         return new Promise(function (resolve, reject) {
-            require(['text!./viewSettings.template.html'], function (template) {
+            import('text!./viewSettings.template.html').then(({default: template}) => {
-                var dialogOptions = {
+                const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
                 };
@@ -65,11 +71,11 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
                     dialogOptions.size = 'small';
                 }
 
-                var dlg = dialogHelper.createDialog(dialogOptions);
+                const dlg = dialogHelper.createDialog(dialogOptions);
 
                 dlg.classList.add('formDialog');
 
-                var html = '';
+                let html = '';
 
                 html += '<div class="formDialogHeader">';
                 html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
@@ -81,14 +87,14 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
 
                 dlg.innerHTML = globalize.translateHtml(html, 'core');
 
-                var settingElements = dlg.querySelectorAll('.viewSetting');
+                const settingElements = dlg.querySelectorAll('.viewSetting');
-                for (var i = 0, length = settingElements.length; i < length; i++) {
+                for (const settingElement of settingElements) {
-                    if (options.visibleSettings.indexOf(settingElements[i].getAttribute('data-settingname')) === -1) {
+                    if (options.visibleSettings.indexOf(settingElement.getAttribute('data-settingname')) === -1) {
-                        settingElements[i].classList.add('hide');
+                        settingElement.classList.add('hide');
-                        settingElements[i].classList.add('hiddenFromViewSettings');
+                        settingElement.classList.add('hiddenFromViewSettings');
                     } else {
-                        settingElements[i].classList.remove('hide');
+                        settingElement.classList.remove('hide');
-                        settingElements[i].classList.remove('hiddenFromViewSettings');
+                        settingElement.classList.remove('hiddenFromViewSettings');
                     }
                 }
 
@@ -107,7 +113,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
                     centerFocus(dlg.querySelector('.formDialogContent'), false, true);
                 }
 
-                var submitted;
+                let submitted;
 
                 dlg.querySelector('.selectImageType').dispatchEvent(new CustomEvent('change', {}));
 
@@ -130,7 +136,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
                 });
             });
         });
-    };
+    }
+}
 
-    return ViewSettings;
+export default ViewSettings;
-});