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,182 +1,181 @@
-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';
+import globalize from 'globalize';
 
-    playbackManager = playbackManager.default || playbackManager;
+function onOneDocumentClick() {
-    serverNotifications = serverNotifications.default || serverNotifications;
+    document.removeEventListener('click', onOneDocumentClick);
+    document.removeEventListener('keydown', onOneDocumentClick);
 
-    function onOneDocumentClick() {
+    // don't request notification permissions if they're already granted or denied
-        document.removeEventListener('click', onOneDocumentClick);
+    if (window.Notification && window.Notification.permission === 'default') {
-        document.removeEventListener('keydown', onOneDocumentClick);
-
-        // don't request notification permissions if they're already granted or denied
-        if (window.Notification && window.Notification.permission === 'default') {
-            /* eslint-disable-next-line compat/compat */
-            Notification.requestPermission();
-        }
-    }
-
-    document.addEventListener('click', onOneDocumentClick);
-    document.addEventListener('keydown', onOneDocumentClick);
-
-    var serviceWorkerRegistration;
-
-    function closeAfter(notification, timeoutMs) {
-        setTimeout(function () {
-            if (notification.close) {
-                notification.close();
-            } else if (notification.cancel) {
-                notification.cancel();
-            }
-        }, timeoutMs);
-    }
-
-    function resetRegistration() {
         /* eslint-disable-next-line compat/compat */
-        var serviceWorker = navigator.serviceWorker;
+        Notification.requestPermission();
-        if (serviceWorker) {
+    }
-            serviceWorker.ready.then(function (registration) {
+}
-                serviceWorkerRegistration = registration;
+
-            });
+document.addEventListener('click', onOneDocumentClick);
+document.addEventListener('keydown', onOneDocumentClick);
+
+let serviceWorkerRegistration;
+
+function closeAfter(notification, timeoutMs) {
+    setTimeout(function () {
+        if (notification.close) {
+            notification.close();
+        } else if (notification.cancel) {
+            notification.cancel();
+        }
+    }, timeoutMs);
+}
+
+function resetRegistration() {
+    /* eslint-disable-next-line compat/compat */
+    let serviceWorker = navigator.serviceWorker;
+    if (serviceWorker) {
+        serviceWorker.ready.then(function (registration) {
+            serviceWorkerRegistration = registration;
+        });
+    }
+}
+
+resetRegistration();
+
+function showPersistentNotification(title, options, timeoutMs) {
+    serviceWorkerRegistration.showNotification(title, options);
+}
+
+function showNonPersistentNotification(title, options, timeoutMs) {
+    try {
+        let notif = new Notification(title, options); /* eslint-disable-line compat/compat */
+
+        if (notif.show) {
+            notif.show();
+        }
+
+        if (timeoutMs) {
+            closeAfter(notif, timeoutMs);
+        }
+    } catch (err) {
+        if (options.actions) {
+            options.actions = [];
+            showNonPersistentNotification(title, options, timeoutMs);
+        } else {
+            throw err;
         }
     }
+}
+
+function showNotification(options, timeoutMs, apiClient) {
+    let title = options.title;
+
+    options.data = options.data || {};
+    options.data.serverId = apiClient.serverInfo().Id;
+    options.icon = options.icon || getIconUrl();
+    options.badge = options.badge || getIconUrl('badge.png');
 
     resetRegistration();
 
-    function showPersistentNotification(title, options, timeoutMs) {
+    if (serviceWorkerRegistration) {
-        serviceWorkerRegistration.showNotification(title, options);
+        showPersistentNotification(title, options, timeoutMs);
+        return;
     }
 
-    function showNonPersistentNotification(title, options, timeoutMs) {
+    showNonPersistentNotification(title, options, timeoutMs);
-        try {
+}
-            var notif = new Notification(title, options); /* eslint-disable-line compat/compat */
 
-            if (notif.show) {
+function showNewItemNotification(item, apiClient) {
-                notif.show();
+    if (playbackManager.isPlayingLocally(['Video'])) {
-            }
+        return;
-
-            if (timeoutMs) {
-                closeAfter(notif, timeoutMs);
-            }
-        } catch (err) {
-            if (options.actions) {
-                options.actions = [];
-                showNonPersistentNotification(title, options, timeoutMs);
-            } else {
-                throw err;
-            }
-        }
     }
 
-    function showNotification(options, timeoutMs, apiClient) {
+    let body = item.Name;
-        var title = options.title;
 
-        options.data = options.data || {};
+    if (item.SeriesName) {
-        options.data.serverId = apiClient.serverInfo().Id;
+        body = item.SeriesName + ' - ' + body;
-        options.icon = options.icon || getIconUrl();
-        options.badge = options.badge || getIconUrl('badge.png');
-
-        resetRegistration();
-
-        if (serviceWorkerRegistration) {
-            showPersistentNotification(title, options, timeoutMs);
-            return;
-        }
-
-        showNonPersistentNotification(title, options, timeoutMs);
     }
 
-    function showNewItemNotification(item, apiClient) {
+    let notification = {
-        if (playbackManager.isPlayingLocally(['Video'])) {
+        title: 'New ' + item.Type,
-            return;
+        body: body,
-        }
+        vibrate: true,
+        tag: 'newItem' + item.Id,
+        data: {}
+    };
 
-        var body = item.Name;
+    let imageTags = item.ImageTags || {};
 
-        if (item.SeriesName) {
+    if (imageTags.Primary) {
-            body = item.SeriesName + ' - ' + body;
+        notification.icon = apiClient.getScaledImageUrl(item.Id, {
-        }
+            width: 80,
-
+            tag: imageTags.Primary,
-        var notification = {
+            type: 'Primary'
-            title: 'New ' + item.Type,
-            body: body,
-            vibrate: true,
-            tag: 'newItem' + item.Id,
-            data: {}
-        };
-
-        var imageTags = item.ImageTags || {};
-
-        if (imageTags.Primary) {
-            notification.icon = apiClient.getScaledImageUrl(item.Id, {
-                width: 80,
-                tag: imageTags.Primary,
-                type: 'Primary'
-            });
-        }
-
-        showNotification(notification, 15000, apiClient);
-    }
-
-    function onLibraryChanged(data, apiClient) {
-        var newItems = data.ItemsAdded;
-
-        if (!newItems.length) {
-            return;
-        }
-
-        // Don't put a massive number of Id's onto the query string
-        if (newItems.length > 12) {
-            newItems.length = 12;
-        }
-
-        apiClient.getItems(apiClient.getCurrentUserId(), {
-
-            Recursive: true,
-            Limit: 3,
-            Filters: 'IsNotFolder',
-            SortBy: 'DateCreated',
-            SortOrder: 'Descending',
-            Ids: newItems.join(','),
-            MediaTypes: 'Audio,Video',
-            EnableTotalRecordCount: false
-
-        }).then(function (result) {
-            var items = result.Items;
-
-            for (var i = 0, length = items.length ; i < length; i++) {
-                showNewItemNotification(items[i], apiClient);
-            }
         });
     }
 
-    function getIconUrl(name) {
+    showNotification(notification, 15000, apiClient);
-        name = name || 'notificationicon.png';
+}
-        return require.toUrl('.').split('?')[0] + '/' + name;
+
+function onLibraryChanged(data, apiClient) {
+    let newItems = data.ItemsAdded;
+
+    if (!newItems.length) {
+        return;
     }
 
-    function showPackageInstallNotification(apiClient, installation, status) {
+    // Don't put a massive number of Id's onto the query string
-        apiClient.getCurrentUser().then(function (user) {
+    if (newItems.length > 12) {
-            if (!user.Policy.IsAdministrator) {
+        newItems.length = 12;
-                return;
+    }
-            }
 
-            var notification = {
+    apiClient.getItems(apiClient.getCurrentUserId(), {
-                tag: 'install' + installation.Id,
-                data: {}
-            };
 
-            if (status === 'completed') {
+        Recursive: true,
-                notification.title = globalize.translate('PackageInstallCompleted', installation.Name, installation.Version);
+        Limit: 3,
-                notification.vibrate = true;
+        Filters: 'IsNotFolder',
-            } else if (status === 'cancelled') {
+        SortBy: 'DateCreated',
-                notification.title = globalize.translate('PackageInstallCancelled', installation.Name, installation.Version);
+        SortOrder: 'Descending',
-            } else if (status === 'failed') {
+        Ids: newItems.join(','),
-                notification.title = globalize.translate('PackageInstallFailed', installation.Name, installation.Version);
+        MediaTypes: 'Audio,Video',
-                notification.vibrate = true;
+        EnableTotalRecordCount: false
-            } else if (status === 'progress') {
-                notification.title = globalize.translate('InstallingPackage', installation.Name, installation.Version);
 
-                notification.actions =
+    }).then(function (result) {
+        let items = result.Items;
+
+        for (const item of items) {
+            showNewItemNotification(item, apiClient);
+        }
+    });
+}
+
+function getIconUrl(name) {
+    name = name || 'notificationicon.png';
+    return './components/notifications/' + name;
+}
+
+function showPackageInstallNotification(apiClient, installation, status) {
+    apiClient.getCurrentUser().then(function (user) {
+        if (!user.Policy.IsAdministrator) {
+            return;
+        }
+
+        let notification = {
+            tag: 'install' + installation.Id,
+            data: {}
+        };
+
+        if (status === 'completed') {
+            notification.title = globalize.translate('PackageInstallCompleted', installation.Name, installation.Version);
+            notification.vibrate = true;
+        } else if (status === 'cancelled') {
+            notification.title = globalize.translate('PackageInstallCancelled', installation.Name, installation.Version);
+        } else if (status === 'failed') {
+            notification.title = globalize.translate('PackageInstallFailed', installation.Name, installation.Version);
+            notification.vibrate = true;
+        } else if (status === 'progress') {
+            notification.title = globalize.translate('InstallingPackage', installation.Name, installation.Version);
+
+            notification.actions =
                 [
                     {
                         action: 'cancel-install',
@@ -185,67 +184,67 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
                     }
                 ];
 
-                notification.data.id = installation.id;
+            notification.data.id = installation.id;
-            }
+        }
 
-            if (status === 'progress') {
+        if (status === 'progress') {
-                var percentComplete = Math.round(installation.PercentComplete || 0);
+            let percentComplete = Math.round(installation.PercentComplete || 0);
 
-                notification.body = percentComplete + '% complete.';
+            notification.body = percentComplete + '% complete.';
-            }
+        }
 
-            var timeout = status === 'cancelled' ? 5000 : 0;
+        let timeout = status === 'cancelled' ? 5000 : 0;
 
-            showNotification(notification, timeout, apiClient);
+        showNotification(notification, timeout, apiClient);
-        });
-    }
-
-    events.on(serverNotifications, 'LibraryChanged', function (e, apiClient, data) {
-        onLibraryChanged(data, apiClient);
     });
+}
 
-    events.on(serverNotifications, 'PackageInstallationCompleted', function (e, apiClient, data) {
+events.on(serverNotifications, 'LibraryChanged', function (e, apiClient, data) {
-        showPackageInstallNotification(apiClient, data, 'completed');
+    onLibraryChanged(data, apiClient);
-    });
+});
 
-    events.on(serverNotifications, 'PackageInstallationFailed', function (e, apiClient, data) {
+events.on(serverNotifications, 'PackageInstallationCompleted', function (e, apiClient, data) {
-        showPackageInstallNotification(apiClient, data, 'failed');
+    showPackageInstallNotification(apiClient, data, 'completed');
-    });
+});
 
-    events.on(serverNotifications, 'PackageInstallationCancelled', function (e, apiClient, data) {
+events.on(serverNotifications, 'PackageInstallationFailed', function (e, apiClient, data) {
-        showPackageInstallNotification(apiClient, data, 'cancelled');
+    showPackageInstallNotification(apiClient, data, 'failed');
-    });
+});
 
-    events.on(serverNotifications, 'PackageInstalling', function (e, apiClient, data) {
+events.on(serverNotifications, 'PackageInstallationCancelled', function (e, apiClient, data) {
-        showPackageInstallNotification(apiClient, data, 'progress');
+    showPackageInstallNotification(apiClient, data, 'cancelled');
-    });
+});
 
-    events.on(serverNotifications, 'ServerShuttingDown', function (e, apiClient, data) {
+events.on(serverNotifications, 'PackageInstalling', function (e, apiClient, data) {
-        var serverId = apiClient.serverInfo().Id;
+    showPackageInstallNotification(apiClient, data, 'progress');
-        var notification = {
+});
-            tag: 'restart' + serverId,
-            title: globalize.translate('ServerNameIsShuttingDown', apiClient.serverInfo().Name)
-        };
-        showNotification(notification, 0, apiClient);
-    });
 
-    events.on(serverNotifications, 'ServerRestarting', function (e, apiClient, data) {
+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,
+        tag: 'restart' + serverId,
-            title: globalize.translate('ServerNameIsRestarting', apiClient.serverInfo().Name)
+        title: globalize.translate('ServerNameIsShuttingDown', apiClient.serverInfo().Name)
-        };
+    };
-        showNotification(notification, 0, apiClient);
+    showNotification(notification, 0, apiClient);
-    });
+});
 
-    events.on(serverNotifications, 'RestartRequired', function (e, apiClient) {
+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,
+        tag: 'restart' + serverId,
-            title: globalize.translate('PleaseRestartServerName', apiClient.serverInfo().Name)
+        title: globalize.translate('ServerNameIsRestarting', apiClient.serverInfo().Name)
-        };
+    };
+    showNotification(notification, 0, apiClient);
+});
 
-        notification.actions =
+events.on(serverNotifications, 'RestartRequired', function (e, apiClient) {
+    let serverId = apiClient.serverInfo().Id;
+    let notification = {
+        tag: 'restart' + serverId,
+        title: globalize.translate('PleaseRestartServerName', apiClient.serverInfo().Name)
+    };
+
+    notification.actions =
         [
             {
                 action: 'restart',
@@ -254,6 +253,6 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
             }
         ];
 
-        showNotification(notification, 0, apiClient);
+    showNotification(notification, 0, apiClient);
-    });
 });
+

src/components/themeMediaPlayer.js

@@ -1,103 +1,101 @@
-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;
+function playThemeMedia(items, ownerId) {
-    var currentThemeIds = [];
+    const currentThemeItems = items.filter(function (i) {
+        return enabled(i.MediaType);
+    });
 
-    function playThemeMedia(items, ownerId) {
+    if (currentThemeItems.length) {
-        var currentThemeItems = items.filter(function (i) {
+        // Stop if a theme song from another ownerId
-            return enabled(i.MediaType);
+        // Leave it alone if anything else (e.g user playing a movie)
+        if (!currentOwnerId && playbackManager.isPlaying()) {
+            return;
+        }
+
+        currentThemeIds = currentThemeItems.map(function (i) {
+            return i.Id;
         });
 
-        if (currentThemeItems.length) {
+        playbackManager.play({
-            // Stop if a theme song from another ownerId
+            items: currentThemeItems,
-            // Leave it alone if anything else (e.g user playing a movie)
+            fullscreen: false,
-            if (!currentOwnerId && playbackManager.isPlaying()) {
+            enableRemotePlayers: false
-                return;
+        }).then(function () {
-            }
+            currentOwnerId = ownerId;
-
-            currentThemeIds = currentThemeItems.map(function (i) {
-                return i.Id;
-            });
-
-            playbackManager.play({
-                items: currentThemeItems,
-                fullscreen: false,
-                enableRemotePlayers: false
-            }).then(function () {
-                currentOwnerId = ownerId;
-            });
-        } else {
-            stopIfPlaying();
-        }
-    }
-
-    function stopIfPlaying() {
-        if (currentOwnerId) {
-            playbackManager.stop();
-        }
-
-        currentOwnerId = null;
-    }
-
-    function enabled(mediaType) {
-        if (mediaType === 'Video') {
-            return userSettings.enableThemeVideos();
-        }
-
-        return userSettings.enableThemeSongs();
-    }
-
-    var excludeTypes = ['CollectionFolder', 'UserView', 'Program', 'SeriesTimer', 'Person', 'TvChannel', 'Channel'];
-
-    function loadThemeMedia(item) {
-        if (item.CollectionType) {
-            stopIfPlaying();
-            return;
-        }
-
-        if (excludeTypes.indexOf(item.Type) !== -1) {
-            stopIfPlaying();
-            return;
-        }
-
-        var 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;
-
-            if (ownerId !== currentOwnerId) {
-                var items = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.Items : themeMediaResult.ThemeSongsResult.Items;
-
-                playThemeMedia(items, ownerId);
-            }
         });
+    } else {
+        stopIfPlaying();
+    }
+}
+
+function stopIfPlaying() {
+    if (currentOwnerId) {
+        playbackManager.stop();
     }
 
-    document.addEventListener('viewshow', function (e) {
+    currentOwnerId = null;
-        var state = e.detail.state || {};
+}
-        var item = state.item;
 
-        if (item && item.ServerId) {
+function enabled(mediaType) {
-            loadThemeMedia(item);
+    if (mediaType === 'Video') {
-            return;
+        return userSettings.enableThemeVideos();
-        }
+    }
 
-        var viewOptions = e.detail.options || {};
+    return userSettings.enableThemeSongs();
+}
 
-        if (viewOptions.supportsThemeMedia) {
+const excludeTypes = ['CollectionFolder', 'UserView', 'Program', 'SeriesTimer', 'Person', 'TvChannel', 'Channel'];
-            // Do nothing here, allow it to keep playing
-        } else {
-            playThemeMedia([], null);
-        }
-    }, true);
 
-    Events.on(playbackManager, 'playbackstart', function (e, player) {
+function loadThemeMedia(item) {
-        var item = playbackManager.currentItem(player);
+    if (item.CollectionType) {
-        // User played something manually
+        stopIfPlaying();
-        if (currentThemeIds.indexOf(item.Id) == -1) {
+        return;
-            currentOwnerId = null;
+    }
+
+    if (excludeTypes.indexOf(item.Type) !== -1) {
+        stopIfPlaying();
+        return;
+    }
+
+    const apiClient = connectionManager.getApiClient(item.ServerId);
+    apiClient.getThemeMedia(apiClient.getCurrentUserId(), item.Id, true).then(function (themeMediaResult) {
+        const ownerId = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.OwnerId : themeMediaResult.ThemeSongsResult.OwnerId;
+
+        if (ownerId !== currentOwnerId) {
+            const items = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.Items : themeMediaResult.ThemeSongsResult.Items;
+
+            playThemeMedia(items, ownerId);
         }
     });
+}
+
+document.addEventListener('viewshow', function (e) {
+    const state = e.detail.state || {};
+    const item = state.item;
+
+    if (item && item.ServerId) {
+        loadThemeMedia(item);
+        return;
+    }
+
+    const viewOptions = e.detail.options || {};
+
+    if (viewOptions.supportsThemeMedia) {
+        // Do nothing here, allow it to keep playing
+    } else {
+        playThemeMedia([], null);
+    }
+}, true);
+
+Events.on(playbackManager, 'playbackstart', function (e, player) {
+    const item = playbackManager.currentItem(player);
+    // User played something manually
+    if (currentThemeIds.indexOf(item.Id) == -1) {
+        currentOwnerId = null;
+    }
 });

src/components/viewSettings/viewSettings.js

@@ -1,60 +1,66 @@
-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';
+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';
 
-    layoutManager = layoutManager.default || layoutManager;
+function onSubmit(e) {
+    e.preventDefault();
+    return false;
+}
 
-    function onSubmit(e) {
+function initEditor(context, settings) {
-        e.preventDefault();
+    context.querySelector('form').addEventListener('submit', onSubmit);
-        return false;
+
+    const elems = context.querySelectorAll('.viewSetting-checkboxContainer');
+
+    for (const elem of elems) {
+        elem.querySelector('input').checked = settings[elem.getAttribute('data-settingname')] || false;
     }
 
-    function initEditor(context, settings) {
+    context.querySelector('.selectImageType').value = settings.imageType || 'primary';
-        context.querySelector('form').addEventListener('submit', onSubmit);
+}
 
-        var elems = context.querySelectorAll('.viewSetting-checkboxContainer');
+function saveValues(context, settings, settingsKey) {
-
+    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;
+        userSettings.set(settingsKey + '-' + elem.getAttribute('data-settingname'), elem.querySelector('input').checked);
-        }
-
-        context.querySelector('.selectImageType').value = settings.imageType || 'primary';
     }
 
-    function saveValues(context, settings, settingsKey) {
+    userSettings.set(settingsKey + '-imageType', context.querySelector('.selectImageType').value);
-        var elems = context.querySelectorAll('.viewSetting-checkboxContainer');
+}
-        for (var i = 0, length = elems.length; i < length; i++) {
-            userSettings.set(settingsKey + '-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input').checked);
-        }
 
-        userSettings.set(settingsKey + '-imageType', context.querySelector('.selectImageType').value);
+function centerFocus(elem, horiz, on) {
+    import('scrollHelper').then(({default: scrollHelper}) => {
+        const fn = on ? 'on' : 'off';
+        scrollHelper.centerFocus[fn](elem, horiz);
+    });
+}
+
+function showIfAllowed(context, selector, visible) {
+    const elem = context.querySelector(selector);
+
+    if (visible && !elem.classList.contains('hiddenFromViewSettings')) {
+        elem.classList.remove('hide');
+    } else {
+        elem.classList.add('hide');
     }
+}
 
-    function centerFocus(elem, horiz, on) {
+class ViewSettings {
-        require(['scrollHelper'], function (scrollHelper) {
+    constructor() {
-            scrollHelper = scrollHelper.default || scrollHelper;
-            var fn = on ? 'on' : 'off';
-            scrollHelper.centerFocus[fn](elem, horiz);
-        });
     }
-
+    show(options) {
-    function showIfAllowed(context, selector, visible) {
-        var elem = context.querySelector(selector);
-
-        if (visible && !elem.classList.contains('hiddenFromViewSettings')) {
-            elem.classList.remove('hide');
-        } else {
-            elem.classList.add('hide');
-        }
-    }
-
-    function ViewSettings() {
-
-    }
-
-    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;
-});