Merge pull request #1174 from puschie286/es6-subtitlesettings

Migrate subtitlesettings to es6

package.json

@@ -121,12 +121,16 @@
           "src/components/playmenu.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
+          "src/components/settingshelper.js",
+          "src/components/subtitlesettings/subtitlesettings.js",
+          "src/components/subtitlesettings/subtitleappearancehelper.js",
           "src/components/shortcuts.js",
           "src/components/syncPlay/groupSelectionMenu.js",
           "src/components/syncPlay/playbackPermissionManager.js",
           "src/components/syncPlay/syncPlayManager.js",
           "src/components/syncPlay/timeSyncManager.js",
           "src/controllers/dashboard/logs.js",
+          "src/controllers/user/subtitles.js",
           "src/controllers/dashboard/plugins/repositories.js",
           "src/plugins/bookPlayer/plugin.js",
           "src/plugins/bookPlayer/tableOfContents.js",

src/components/settingshelper.js

@@ -0,0 +1,22 @@
+import globalize from 'globalize';
+
+/**
+ * Helper for handling settings.
+ * @module components/settingsHelper
+ */
+
+export function populateLanguages(select, languages) {
+    let html = '';
+
+    html += "<option value=''>" + globalize.translate('AnyLanguage') + '</option>';
+    for (let i = 0, length = languages.length; i < length; i++) {
+        const culture = languages[i];
+        html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
+    }
+
+    select.innerHTML = html;
+}
+
+export default {
+    populateLanguages: populateLanguages
+};

src/components/subtitlesettings/subtitleappearancehelper.js

@@ -1,9 +1,11 @@
-define([], function () {
+/**
-    'use strict';
+ * Subtitle settings visual helper.
+ * @module components/subtitleSettings/subtitleAppearanceHelper
+ */
 
-    function getTextStyles(settings, isCue) {
+function getTextStyles(settings, isCue) {
 
-        var list = [];
+    let list = [];
 
     if (isCue) {
         switch (settings.textSize || '') {
@@ -72,12 +74,12 @@ define([], function () {
             break;
     }
 
-        var background = settings.textBackground || 'transparent';
+    const background = settings.textBackground || 'transparent';
     if (background) {
         list.push({ name: 'background-color', value: background });
     }
 
-        var textColor = settings.textColor || '#ffffff';
+    const textColor = settings.textColor || '#ffffff';
     if (textColor) {
         list.push({ name: 'color', value: textColor });
     }
@@ -115,34 +117,29 @@ define([], function () {
     }
 
     return list;
-    }
+}
 
-    function getWindowStyles(settings) {
+export function getStyles(settings, isCue) {
-
-        return [];
-    }
-
-    function getStyles(settings, isCue) {
 
     return {
         text: getTextStyles(settings, isCue),
-            window: getWindowStyles(settings)
+        window: []
     };
-    }
+}
 
-    function applyStyleList(styles, elem) {
+function applyStyleList(styles, elem) {
 
-        for (var i = 0, length = styles.length; i < length; i++) {
+    for (let i = 0, length = styles.length; i < length; i++) {
 
-            var style = styles[i];
+        let style = styles[i];
 
         elem.style[style.name] = style.value;
     }
-    }
+}
 
-    function applyStyles(elements, appearanceSettings) {
+export function applyStyles(elements, appearanceSettings) {
 
-        var styles = getStyles(appearanceSettings);
+    let styles = getStyles(appearanceSettings);
 
     if (elements.text) {
         applyStyleList(styles.text, elements.text);
@@ -150,10 +147,8 @@ define([], function () {
     if (elements.window) {
         applyStyleList(styles.window, elements.window);
     }
-    }
+}
-
+export default {
-    return {
     getStyles: getStyles,
     applyStyles: applyStyles
-    };
+};
-});

src/components/subtitlesettings/subtitlesettings.js

@@ -1,20 +1,27 @@
-define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loading', 'connectionManager', 'subtitleAppearanceHelper', 'dom', 'events', 'listViewStyle', 'emby-select', 'emby-input', 'emby-checkbox', 'flexStyles'], function (require, globalize, appSettings, appHost, focusManager, loading, connectionManager, subtitleAppearanceHelper, dom, events) {
+import require from 'require';
-    'use strict';
+import globalize from 'globalize';
+import appHost from 'apphost';
+import appSettings from 'appSettings';
+import focusManager from 'focusManager';
+import loading from 'loading';
+import connectionManager from 'connectionManager';
+import subtitleAppearanceHelper from 'subtitleAppearanceHelper';
+import settingsHelper from 'settingsHelper';
+import dom from 'dom';
+import events from 'events';
+import 'listViewStyle';
+import 'emby-select';
+import 'emby-input';
+import 'emby-checkbox';
+import 'flexStyles';
 
-    function populateLanguages(select, languages) {
+/**
-        var html = '';
+ * Subtitle settings.
+ * @module components/subtitleSettings/subtitleSettings
+ */
 
-        html += "<option value=''>" + globalize.translate('AnyLanguage') + '</option>';
+function getSubtitleAppearanceObject(context) {
-        for (var i = 0, length = languages.length; i < length; i++) {
+    let appearanceSettings = {};
-            var culture = languages[i];
-            html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
-        }
-
-        select.innerHTML = html;
-    }
-
-    function getSubtitleAppearanceObject(context) {
-        var appearanceSettings = {};
 
     appearanceSettings.textSize = context.querySelector('#selectTextSize').value;
     appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value;
@@ -23,9 +30,9 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
     appearanceSettings.textColor = context.querySelector('#inputTextColor').value;
 
     return appearanceSettings;
-    }
+}
 
-    function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
+function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
 
     apiClient.getCultures().then(function (allCultures) {
 
@@ -33,9 +40,9 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
             context.querySelector('.fldBurnIn').classList.remove('hide');
         }
 
-            var selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage');
+        let selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage');
 
-            populateLanguages(selectSubtitleLanguage, allCultures);
+        settingsHelper.populateLanguages(selectSubtitleLanguage, allCultures);
 
         selectSubtitleLanguage.value = user.Configuration.SubtitleLanguagePreference || '';
         context.querySelector('#selectSubtitlePlaybackMode').value = user.Configuration.SubtitleMode || '';
@@ -56,11 +63,11 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
 
         loading.hide();
     });
-    }
+}
 
-    function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient) {
+function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient) {
 
-        var appearanceSettings = userSettingsInstance.getSubtitleAppearanceSettings(appearanceKey);
+    let appearanceSettings = userSettingsInstance.getSubtitleAppearanceSettings(appearanceKey);
     appearanceSettings = Object.assign(appearanceSettings, getSubtitleAppearanceObject(context));
 
     userSettingsInstance.setSubtitleAppearanceSettings(appearanceSettings, appearanceKey);
@@ -69,9 +76,9 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
     user.Configuration.SubtitleMode = context.querySelector('#selectSubtitlePlaybackMode').value;
 
     return apiClient.updateUserConfiguration(user.Id, user.Configuration);
-    }
+}
 
-    function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
+function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
 
     loading.show();
 
@@ -94,60 +101,41 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
             loading.hide();
         });
     });
-    }
+}
 
-    function onSubmit(e) {
+function onSubtitleModeChange(e) {
-        var self = this;
-        var apiClient = connectionManager.getApiClient(self.options.serverId);
-        var userId = self.options.userId;
-        var userSettings = self.options.userSettings;
 
-        userSettings.setUserInfo(userId, apiClient).then(function () {
+    let view = dom.parentWithClass(e.target, 'subtitlesettings');
-            var enableSaveConfirmation = self.options.enableSaveConfirmation;
-            save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
-        });
 
-        // Disable default form submission
+    let subtitlesHelp = view.querySelectorAll('.subtitlesHelp');
-        if (e) {
+    for (let i = 0, length = subtitlesHelp.length; i < length; i++) {
-            e.preventDefault();
-        }
-
-        return false;
-    }
-
-    function onSubtitleModeChange(e) {
-
-        var view = dom.parentWithClass(e.target, 'subtitlesettings');
-
-        var subtitlesHelp = view.querySelectorAll('.subtitlesHelp');
-        for (var i = 0, length = subtitlesHelp.length; i < length; i++) {
         subtitlesHelp[i].classList.add('hide');
     }
     view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide');
-    }
+}
 
-    function onAppearanceFieldChange(e) {
+function onAppearanceFieldChange(e) {
 
-        var view = dom.parentWithClass(e.target, 'subtitlesettings');
+    let view = dom.parentWithClass(e.target, 'subtitlesettings');
 
-        var appearanceSettings = getSubtitleAppearanceObject(view);
+    let appearanceSettings = getSubtitleAppearanceObject(view);
 
-        var elements = {
+    let elements = {
         window: view.querySelector('.subtitleappearance-preview-window'),
         text: view.querySelector('.subtitleappearance-preview-text')
     };
 
     subtitleAppearanceHelper.applyStyles(elements, appearanceSettings);
-    }
+}
 
-    function embed(options, self) {
+function embed(options, self) {
 
     require(['text!./subtitlesettings.template.html'], function (template) {
 
         options.element.classList.add('subtitlesettings');
         options.element.innerHTML = globalize.translateDocument(template, 'core');
 
-            options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
+        options.element.querySelector('form').addEventListener('submit', self.onSubmit.bind(self));
 
         options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange);
         options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange);
@@ -170,44 +158,64 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
             focusManager.autoFocus(options.element);
         }
     });
-    }
+}
 
-    function SubtitleSettings(options) {
+export class SubtitleSettings {
+
+    constructor(options) {
 
         this.options = options;
 
         embed(options, this);
     }
 
-    SubtitleSettings.prototype.loadData = function () {
+    loadData() {
-
+        let self = this;
-        var self = this;
+        let context = self.options.element;
-        var context = self.options.element;
 
         loading.show();
 
-        var userId = self.options.userId;
+        let userId = self.options.userId;
-        var apiClient = connectionManager.getApiClient(self.options.serverId);
+        let apiClient = connectionManager.getApiClient(self.options.serverId);
-        var userSettings = self.options.userSettings;
+        let userSettings = self.options.userSettings;
 
         apiClient.getUser(userId).then(function (user) {
             userSettings.setUserInfo(userId, apiClient).then(function () {
                 self.dataLoaded = true;
 
-                var appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey);
+                let appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey);
 
                 loadForm(context, user, userSettings, appearanceSettings, apiClient);
             });
         });
-    };
+    }
 
-    SubtitleSettings.prototype.submit = function () {
+    submit() {
-        onSubmit.call(this);
+        this.onSubmit(null);
-    };
+    }
 
-    SubtitleSettings.prototype.destroy = function () {
+    destroy() {
         this.options = null;
-    };
+    }
 
-    return SubtitleSettings;
+    onSubmit(e) {
-});
+        const self = this;
+        let apiClient = connectionManager.getApiClient(self.options.serverId);
+        let userId = self.options.userId;
+        let userSettings = self.options.userSettings;
+
+        userSettings.setUserInfo(userId, apiClient).then(function () {
+
+            let enableSaveConfirmation = self.options.enableSaveConfirmation;
+            save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
+        });
+
+        // Disable default form submission
+        if (e) {
+            e.preventDefault();
+        }
+        return false;
+    }
+}
+
+export default SubtitleSettings;

src/controllers/user/subtitles.js

@@ -1,52 +1,63 @@
-define(['subtitleSettings', 'userSettings', 'autoFocuser'], function (SubtitleSettings, userSettings, autoFocuser) {
+import subtitleSettings from 'subtitleSettings';
-    'use strict';
+import {UserSettings, currentSettings as userSettings} from 'userSettings';
+import autoFocuser from 'autoFocuser';
 
-    // Shortcuts
+export class SubtitleController {
-    const UserSettings = userSettings.UserSettings;
+    constructor(view, params) {
+        this.userId = params.userId || ApiClient.getCurrentUserId();
+        this.currentSettings = this.userId === ApiClient.getCurrentUserId() ? userSettings : new UserSettings();
+        this.hasChanges = false;
+        this.subtitleSettingsInstance = null;
+        this.view = view;
 
-    return function (view, params) {
+        view.addEventListener('viewshow', this.viewShow.bind(this));
-        function onBeforeUnload(e) {
+        view.addEventListener('change', this.change.bind(this));
-            if (hasChanges) {
+        view.addEventListener('viewbeforehide', this.viewBeforeHide.bind(this));
-                e.returnValue = 'You currently have unsaved changes. Are you sure you wish to leave?';
+        view.addEventListener('viewdestroy', this.viewDestroy.bind(this));
-            }
     }
 
-        var subtitleSettingsInstance;
+    viewShow() {
-        var hasChanges;
+        window.addEventListener('beforeunload', this.beforeUnload.bind(this));
-        var userId = params.userId || ApiClient.getCurrentUserId();
-        var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new UserSettings();
-        view.addEventListener('viewshow', function () {
-            window.addEventListener('beforeunload', onBeforeUnload);
 
-            if (subtitleSettingsInstance) {
+        if (this.subtitleSettingsInstance) {
-                subtitleSettingsInstance.loadData();
+            this.subtitleSettingsInstance.loadData();
         } else {
-                subtitleSettingsInstance = new SubtitleSettings({
+            this.subtitleSettingsInstance = new subtitleSettings({
                 serverId: ApiClient.serverId(),
-                    userId: userId,
+                userId: this.userId,
-                    element: view.querySelector('.settingsContainer'),
+                element: this.view.querySelector('.settingsContainer'),
-                    userSettings: currentSettings,
+                userSettings: this.currentSettings,
                 enableSaveButton: false,
                 enableSaveConfirmation: false,
                 autoFocus: autoFocuser.isEnabled()
             });
         }
-        });
+    }
-        view.addEventListener('change', function () {
-            hasChanges = true;
-        });
-        view.addEventListener('viewbeforehide', function () {
-            hasChanges = false;
 
-            if (subtitleSettingsInstance) {
+    viewDestroy() {
-                subtitleSettingsInstance.submit();
+        if (this.subtitleSettingsInstance) {
+            this.subtitleSettingsInstance.destroy();
+            this.subtitleSettingsInstance = null;
         }
-        });
-        view.addEventListener('viewdestroy', function () {
-            if (subtitleSettingsInstance) {
-                subtitleSettingsInstance.destroy();
-                subtitleSettingsInstance = null;
     }
-        });
+
-    };
+    viewBeforeHide() {
-});
+        this.hasChanges = false;
+
+        if (this.subtitleSettingsInstance) {
+            this.subtitleSettingsInstance.submit();
+        }
+    }
+
+    change() {
+        this.hasChanges = true;
+    }
+
+    beforeUnload(e) {
+        if (this.hasChanges) {
+            e.returnValue = 'You currently have unsaved changes. Are you sure you wish to leave?';
+        }
+    }
+}
+
+export default SubtitleController;

src/scripts/site.js

@@ -817,6 +817,7 @@ var AppInfo = {};
         define('upNextDialog', [componentsPath + '/upnextdialog/upnextdialog'], returnFirstDependency);
         define('subtitleAppearanceHelper', [componentsPath + '/subtitlesettings/subtitleappearancehelper'], returnFirstDependency);
         define('subtitleSettings', [componentsPath + '/subtitlesettings/subtitlesettings'], returnFirstDependency);
+        define('settingsHelper', [componentsPath + '/settingshelper'], returnFirstDependency);
         define('displaySettings', [componentsPath + '/displaySettings/displaySettings'], returnFirstDependency);
         define('playbackSettings', [componentsPath + '/playbackSettings/playbackSettings'], returnFirstDependency);
         define('homescreenSettings', [componentsPath + '/homeScreenSettings/homeScreenSettings'], returnFirstDependency);