~ convert subtitlesettings to class

~ use base import name instead of relative file path
~ fix "new" calling

Signed-off-by: Christoph Potas <christoph286@googlemail.com>

package.json

@@ -92,6 +92,7 @@
           "src/components/cardbuilder/cardBuilder.js",
           "src/components/subtitlesettings/subtitlesettings.js",
           "src/components/subtitlesettings/subtitleappearancehelper.js",
+          "src/components/settingshelper.js",
           "src/scripts/dom.js",
           "src/components/filedownloader.js",
           "src/scripts/filesystem.js",

src/components/settingshelper.js

@@ -0,0 +1,24 @@
+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,3 +1,7 @@
+/**
+ * Subtitle settings visual helper
+ * @module components/subtitleSettings/subtitleAppearanceHelper
+ */
 function getTextStyles(settings, isCue) {
 
     let list = [];

src/components/subtitlesettings/subtitlesettings.js

@@ -4,9 +4,9 @@ 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 playbacksettings from 'playbacksettings';
+import connectionManager from 'connectionManager';
+import subtitleAppearanceHelper from 'subtitleAppearanceHelper';
+import settingsHelper from '../settingshelper';
 import dom from 'dom';
 import events from 'events';
 import 'listViewStyle';
@@ -15,6 +15,11 @@ import 'emby-input';
 import 'emby-checkbox';
 import 'flexStyles';
 
+/**
+ * Subtitle settings
+ * @module components/subtitleSettings/subtitleSettings
+ */
+
 function getSubtitleAppearanceObject(context) {
     let appearanceSettings = {};
 
@@ -37,7 +42,7 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
 
         let selectSubtitleLanguage = context.querySelector( '#selectSubtitleLanguage' );
 
-        playbacksettings.populateLanguages(selectSubtitleLanguage, allCultures);
+        settingsHelper.populateLanguages(selectSubtitleLanguage, allCultures);
 
         selectSubtitleLanguage.value = user.Configuration.SubtitleLanguagePreference || "";
         context.querySelector('#selectSubtitlePlaybackMode').value = user.Configuration.SubtitleMode || "";
@@ -73,7 +78,7 @@ function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient)
     return apiClient.updateUserConfiguration(user.Id, user.Configuration);
 }
 
-export function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
+function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
 
     loading.show();
 
@@ -123,14 +128,14 @@ function onAppearanceFieldChange(e) {
     subtitleAppearanceHelper.applyStyles(elements, appearanceSettings);
 }
 
-export 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', playbacksettings.OnSubmit.bind(self));
+        options.element.querySelector('form').addEventListener('submit', self.onSubmit );
 
         options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange);
         options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange);
@@ -155,15 +160,16 @@ export function embed(options, self) {
     });
 }
 
-export function SubtitleSettings(options) {
+export class SubtitleSettings {
+
+    constructor(options) {
 
         this.options = options;
 
         embed(options, this);
-}
-
-SubtitleSettings.prototype.loadData = function () {
+    }
 
+    loadData() {
         let self = this;
         let context = self.options.element;
 
@@ -182,18 +188,34 @@ SubtitleSettings.prototype.loadData = function () {
                 loadForm(context, user, userSettings, appearanceSettings, apiClient);
             });
         });
-};
+    }
 
-SubtitleSettings.prototype.submit = function () {
-    playbacksettings.onSubmit.call(this);
-};
+    submit() {
+        this.onSubmit( null );
+    }
 
-SubtitleSettings.prototype.destroy = function () {
+    destroy() {
         this.options = null;
-};
+    }
 
-export default {
-    save: save,
-    embed: embed,
-    SubtitleSettings: 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

@@ -18,7 +18,7 @@ define(["subtitleSettings", "userSettings", "autoFocuser"], function (SubtitleSe
             if (subtitleSettingsInstance) {
                 subtitleSettingsInstance.loadData();
             } else {
-                subtitleSettingsInstance = new SubtitleSettings({
+                subtitleSettingsInstance = new SubtitleSettings.default({
                     serverId: ApiClient.serverId(),
                     userId: userId,
                     element: view.querySelector(".settingsContainer"),