Merge pull request #1769 from Camc314/migrate-to-ES6-64

Migration of subtitleeditor and subtitlesync to ES6 modules

package.json

@@ -163,6 +163,8 @@
           "src/components/search/searchresults.js",
           "src/components/settingshelper.js",
           "src/components/shortcuts.js",
+          "src/components/subtitleeditor/subtitleeditor.js",
+          "src/components/subtitlesync/subtitlesync.js",
           "src/components/subtitlesettings/subtitleappearancehelper.js",
           "src/components/subtitlesettings/subtitlesettings.js",
           "src/components/syncPlay/groupSelectionMenu.js",

src/components/subtitleeditor/subtitleeditor.js

@@ -1,16 +1,27 @@
-define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', 'connectionManager', 'loading', 'focusManager', 'dom', 'apphost', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'css!./subtitleeditor', 'emby-button', 'flexStyles'], function (dialogHelper, require, layoutManager, globalize, userSettings, connectionManager, loading, focusManager, dom, appHost) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import layoutManager from 'layoutManager';
+import globalize from 'globalize';
+import * as userSettings from 'userSettings';
+import connectionManager from 'connectionManager';
+import loading from 'loading';
+import focusManager from 'focusManager';
+import dom from 'dom';
+import 'emby-select';
+import 'listViewStyle';
+import 'paper-icon-button-light';
+import 'css!./../formdialog';
+import 'material-icons';
+import 'css!./subtitleeditor';
+import 'emby-button';
+import 'flexStyles';
 
-    loading = loading.default || loading;
+let currentItem;
-    focusManager = focusManager.default || focusManager;
+let hasChanges;
-
-    var currentItem;
-    var hasChanges;
 
 function downloadRemoteSubtitles(context, id) {
-        var url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
+    let url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
 
-        var apiClient = connectionManager.getApiClient(currentItem.ServerId);
+    let apiClient = connectionManager.getApiClient(currentItem.ServerId);
     apiClient.ajax({
 
         type: 'POST',
@@ -19,7 +30,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
     }).then(function () {
         hasChanges = true;
 
-            require(['toast'], function (toast) {
+        import('toast').then(({default: toast}) => {
             toast(globalize.translate('MessageDownloadQueued'));
         });
 
@@ -28,10 +39,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 }
 
 function deleteLocalSubtitle(context, index) {
-        var msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
+    let msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
 
-        require(['confirm'], function (confirm) {
+    import('confirm').then(({default: confirm}) => {
-            confirm.default({
+        confirm({
 
             title: globalize.translate('ConfirmDeletion'),
             text: msg,
@@ -41,10 +52,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
         }).then(function () {
             loading.show();
 
-                var itemId = currentItem.Id;
+            let itemId = currentItem.Id;
-                var url = 'Videos/' + itemId + '/Subtitles/' + index;
+            let url = 'Videos/' + itemId + '/Subtitles/' + index;
 
-                var apiClient = connectionManager.getApiClient(currentItem.ServerId);
+            let apiClient = connectionManager.getApiClient(currentItem.ServerId);
 
             apiClient.ajax({
 
@@ -60,13 +71,13 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 }
 
 function fillSubtitleList(context, item) {
-        var streams = item.MediaStreams || [];
+    let streams = item.MediaStreams || [];
 
-        var subs = streams.filter(function (s) {
+    let subs = streams.filter(function (s) {
         return s.Type === 'Subtitle';
     });
 
-        var html = '';
+    let html = '';
 
     if (subs.length) {
         html += '<h2>' + globalize.translate('MySubtitles') + '</h2>';
@@ -74,10 +85,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
         html += '<div>';
 
         html += subs.map(function (s) {
-                var itemHtml = '';
+            let itemHtml = '';
 
-                var tagName = layoutManager.tv ? 'button' : 'div';
+            let tagName = layoutManager.tv ? 'button' : 'div';
-                var className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border';
+            let className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border';
 
             if (layoutManager.tv) {
                 className += ' listItem-focusscale listItem-button';
@@ -116,7 +127,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
         html += '</div>';
     }
 
-        var elem = context.querySelector('.subtitleList');
+    let elem = context.querySelector('.subtitleList');
 
     if (subs.length) {
         elem.classList.remove('hide');
@@ -127,18 +138,18 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 }
 
 function fillLanguages(context, apiClient, languages) {
-        var selectLanguage = context.querySelector('#selectLanguage');
+    let selectLanguage = context.querySelector('#selectLanguage');
 
     selectLanguage.innerHTML = languages.map(function (l) {
         return '<option value="' + l.ThreeLetterISOLanguageName + '">' + l.DisplayName + '</option>';
     });
 
-        var lastLanguage = userSettings.get('subtitleeditor-language');
+    let lastLanguage = userSettings.get('subtitleeditor-language');
     if (lastLanguage) {
         selectLanguage.value = lastLanguage;
     } else {
         apiClient.getCurrentUser().then(function (user) {
-                var lang = user.Configuration.SubtitleLanguagePreference;
+            let lang = user.Configuration.SubtitleLanguagePreference;
 
             if (lang) {
                 selectLanguage.value = lang;
@@ -148,8 +159,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 }
 
 function renderSearchResults(context, results) {
-        var lastProvider = '';
+    let lastProvider = '';
-        var html = '';
+    let html = '';
 
     if (!results.length) {
         context.querySelector('.noSearchResults').classList.remove('hide');
@@ -160,10 +171,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 
     context.querySelector('.noSearchResults').classList.add('hide');
 
-        for (var i = 0, length = results.length; i < length; i++) {
+    for (let i = 0, length = results.length; i < length; i++) {
-            var result = results[i];
+        let result = results[i];
 
-            var provider = result.ProviderName;
+        let provider = result.ProviderName;
 
         if (provider !== lastProvider) {
             if (i > 0) {
@@ -174,8 +185,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
             lastProvider = provider;
         }
 
-            var tagName = layoutManager.tv ? 'button' : 'div';
+        let tagName = layoutManager.tv ? 'button' : 'div';
-            var className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
+        let className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
         if (layoutManager.tv) {
             className += ' listItem-focusscale listItem-button';
         }
@@ -184,7 +195,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 
         html += '<span class="listItemIcon material-icons closed_caption"></span>';
 
-            var bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
+        let bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
 
         html += '<div class="listItemBody ' + bodyClass + '">';
 
@@ -221,7 +232,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
         html += '</div>';
     }
 
-        var elem = context.querySelector('.subtitleResults');
+    let elem = context.querySelector('.subtitleResults');
     elem.innerHTML = html;
 
     loading.hide();
@@ -232,8 +243,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 
     loading.show();
 
-        var apiClient = connectionManager.getApiClient(currentItem.ServerId);
+    let apiClient = connectionManager.getApiClient(currentItem.ServerId);
-        var url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
+    let url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
 
     apiClient.getJSON(url).then(function (results) {
         renderSearchResults(context, results);
@@ -247,8 +258,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
         currentItem = item;
 
         fillSubtitleList(context, item);
-            var file = item.Path || '';
+        let file = item.Path || '';
-            var index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
+        let index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
         if (index > -1) {
             file = file.substring(index + 1);
         }
@@ -272,9 +283,9 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 }
 
 function onSearchSubmit(e) {
-        var form = this;
+    let form = this;
 
-        var lang = form.querySelector('#selectLanguage', form).value;
+    let lang = form.querySelector('#selectLanguage', form).value;
 
     searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
 
@@ -283,26 +294,26 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 }
 
 function onSubtitleListClick(e) {
-        var btnDelete = dom.parentWithClass(e.target, 'btnDelete');
+    let btnDelete = dom.parentWithClass(e.target, 'btnDelete');
     if (btnDelete) {
-            var index = btnDelete.getAttribute('data-index');
+        let index = btnDelete.getAttribute('data-index');
-            var context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
+        let context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
         deleteLocalSubtitle(context, index);
     }
 }
 
 function onSubtitleResultsClick(e) {
-        var subtitleId;
+    let subtitleId;
-        var context;
+    let context;
 
-        var btnOptions = dom.parentWithClass(e.target, 'btnOptions');
+    let btnOptions = dom.parentWithClass(e.target, 'btnOptions');
     if (btnOptions) {
         subtitleId = btnOptions.getAttribute('data-subid');
         context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog');
         showDownloadOptions(btnOptions, context, subtitleId);
     }
 
-        var btnDownload = dom.parentWithClass(e.target, 'btnDownload');
+    let btnDownload = dom.parentWithClass(e.target, 'btnDownload');
     if (btnDownload) {
         subtitleId = btnDownload.getAttribute('data-subid');
         context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog');
@@ -311,14 +322,14 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 }
 
 function showDownloadOptions(button, context, subtitleId) {
-        var items = [];
+    let items = [];
 
     items.push({
         name: globalize.translate('Download'),
         id: 'download'
     });
 
-        require(['actionsheet'], function (actionsheet) {
+    import('actionsheet').then(({default: actionsheet}) => {
         actionsheet.show({
             items: items,
             positionTo: button
@@ -336,9 +347,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 }
 
 function centerFocus(elem, horiz, on) {
-        require(['scrollHelper'], function (scrollHelper) {
+    import('scrollHelper').then(({default: scrollHelper}) => {
-            scrollHelper = scrollHelper.default || scrollHelper;
+        let fn = on ? 'on' : 'off';
-            var fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
 }
@@ -346,9 +356,9 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 function showEditorInternal(itemId, serverId, template) {
     hasChanges = false;
 
-        var apiClient = connectionManager.getApiClient(serverId);
+    let apiClient = connectionManager.getApiClient(serverId);
     return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
-            var dialogOptions = {
+        let dialogOptions = {
             removeOnClose: true,
             scrollY: false
         };
@@ -359,7 +369,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
             dialogOptions.size = 'small';
         }
 
-            var dlg = dialogHelper.createDialog(dialogOptions);
+        let dlg = dialogHelper.createDialog(dialogOptions);
 
         dlg.classList.add('formDialog');
         dlg.classList.add('subtitleEditorDialog');
@@ -370,7 +380,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 
         dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
 
-            var btnSubmit = dlg.querySelector('.btnSubmit');
+        let btnSubmit = dlg.querySelector('.btnSubmit');
 
         if (layoutManager.tv) {
             centerFocus(dlg.querySelector('.formDialogContent'), false, true);
@@ -379,7 +389,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
             btnSubmit.classList.add('hide');
         }
 
-            var editorContent = dlg.querySelector('.formDialogContent');
+        let editorContent = dlg.querySelector('.formDialogContent');
 
         dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
         dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
@@ -416,13 +426,12 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
     loading.show();
 
     return new Promise(function (resolve, reject) {
-            require(['text!./subtitleeditor.template.html'], function (template) {
+        import('text!./subtitleeditor.template.html').then(({default: template}) => {
             showEditorInternal(itemId, serverId, template).then(resolve, reject);
         });
     });
 }
 
-    return {
+export default {
     show: showEditor
 };
-});

src/components/subtitlesync/subtitlesync.js

@@ -1,16 +1,16 @@
-define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html', 'css!./subtitlesync'], function (playbackManager, layoutManager, template, css) {
+import playbackManager from 'playbackManager';
-    'use strict';
+import layoutManager from 'layoutManager';
+import template from 'text!./subtitlesync.template.html';
+import 'css!./subtitlesync';
 
-    playbackManager = playbackManager.default || playbackManager;
+let player;
-
+let subtitleSyncSlider;
-    var player;
+let subtitleSyncTextField;
-    var subtitleSyncSlider;
+let subtitleSyncCloseButton;
-    var subtitleSyncTextField;
+let subtitleSyncContainer;
-    var subtitleSyncCloseButton;
-    var subtitleSyncContainer;
 
 function init(instance) {
-        var parent = document.createElement('div');
+    const parent = document.createElement('div');
     document.body.appendChild(parent);
     parent.innerHTML = template;
 
@@ -41,7 +41,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
     subtitleSyncTextField.addEventListener('keydown', function (event) {
         if (event.key === 'Enter') {
             // if input key is enter search for float pattern
-                var inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
+            let inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
             if (inputOffset) {
                 inputOffset = inputOffset[0];
 
@@ -92,7 +92,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
     });
 
     subtitleSyncSlider.getBubbleHtml = function (value) {
-            var newOffset = getOffsetFromPercentage(value);
+        const newOffset = getOffsetFromPercentage(value);
         return '<h1 class="sliderBubbleText">' +
             (newOffset > 0 ? '+' : '') + parseFloat(newOffset) + 's' +
             '</h1>';
@@ -108,7 +108,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
 
 function getOffsetFromPercentage(value) {
     // convert percent to fraction
-        var offset = (value - 50) / 50;
+    let offset = (value - 50) / 50;
     // multiply by offset min/max range value (-x to +x) :
     offset *= 30;
     return offset.toFixed(1);
@@ -116,32 +116,33 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
 
 function getPercentageFromOffset(value) {
     // divide by offset min/max range value (-x to +x) :
-        var percentValue = value / 30;
+    let percentValue = value / 30;
     // convert fraction to percent
     percentValue *= 50;
     percentValue += 50;
     return Math.min(100, Math.max(0, percentValue.toFixed()));
 }
 
-    function SubtitleSync(currentPlayer) {
+class SubtitleSync {
+    constructor(currentPlayer) {
         player = currentPlayer;
         init(this);
     }
 
-    SubtitleSync.prototype.destroy = function() {
+    destroy() {
         SubtitleSync.prototype.toggle('forceToHide');
         if (player) {
             playbackManager.disableShowingSubtitleOffset(player);
             playbackManager.setSubtitleOffset(0, player);
         }
-        var elem = this.element;
+        const elem = this.element;
         if (elem) {
             elem.parentNode.removeChild(elem);
             this.element = null;
         }
-    };
+    }
 
-    SubtitleSync.prototype.toggle = function(action) {
+    toggle(action) {
         if (player && playbackManager.supportSubtitleOffset(player)) {
             /* eslint-disable no-fallthrough */
             switch (action) {
@@ -170,7 +171,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
             }
             /* eslint-enable no-fallthrough */
         }
-    };
+    }
+}
 
-    return SubtitleSync;
+export default SubtitleSync;
-});