Migration of subtitleeditor to ES6 module

package.json

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

src/components/subtitleeditor/subtitleeditor.js

@@ -1,426 +1,437 @@
-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;
+let hasChanges;
 
-    var currentItem;
+function downloadRemoteSubtitles(context, id) {
-    var hasChanges;
+    let url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
 
-    function downloadRemoteSubtitles(context, id) {
+    let apiClient = connectionManager.getApiClient(currentItem.ServerId);
-        var url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
+    apiClient.ajax({
 
-        var apiClient = connectionManager.getApiClient(currentItem.ServerId);
+        type: 'POST',
-        apiClient.ajax({
+        url: apiClient.getUrl(url)
 
-            type: 'POST',
+    }).then(function () {
-            url: apiClient.getUrl(url)
+        hasChanges = true;
+
+        import('toast').then(({default: toast}) => {
+            toast(globalize.translate('MessageDownloadQueued'));
+        });
+
+        focusManager.autoFocus(context);
+    });
+}
+
+function deleteLocalSubtitle(context, index) {
+    let msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
+
+    import('confirm').then(({default: confirm}) => {
+        confirm({
+
+            title: globalize.translate('ConfirmDeletion'),
+            text: msg,
+            confirmText: globalize.translate('Delete'),
+            primary: 'delete'
 
         }).then(function () {
-            hasChanges = true;
+            loading.show();
 
-            require(['toast'], function (toast) {
+            let itemId = currentItem.Id;
-                toast(globalize.translate('MessageDownloadQueued'));
+            let url = 'Videos/' + itemId + '/Subtitles/' + index;
-            });
 
-            focusManager.autoFocus(context);
+            let apiClient = connectionManager.getApiClient(currentItem.ServerId);
-        });
-    }
 
-    function deleteLocalSubtitle(context, index) {
+            apiClient.ajax({
-        var msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
 
-        require(['confirm'], function (confirm) {
+                type: 'DELETE',
-            confirm.default({
+                url: apiClient.getUrl(url)
-
-                title: globalize.translate('ConfirmDeletion'),
-                text: msg,
-                confirmText: globalize.translate('Delete'),
-                primary: 'delete'
 
             }).then(function () {
-                loading.show();
+                hasChanges = true;
-
+                reload(context, apiClient, itemId);
-                var itemId = currentItem.Id;
-                var url = 'Videos/' + itemId + '/Subtitles/' + index;
-
-                var apiClient = connectionManager.getApiClient(currentItem.ServerId);
-
-                apiClient.ajax({
-
-                    type: 'DELETE',
-                    url: apiClient.getUrl(url)
-
-                }).then(function () {
-                    hasChanges = true;
-                    reload(context, apiClient, itemId);
-                });
             });
         });
-    }
+    });
+}
 
-    function fillSubtitleList(context, item) {
+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';
+        return s.Type === 'Subtitle';
-        });
+    });
 
-        var html = '';
+    let html = '';
 
-        if (subs.length) {
+    if (subs.length) {
-            html += '<h2>' + globalize.translate('MySubtitles') + '</h2>';
+        html += '<h2>' + globalize.translate('MySubtitles') + '</h2>';
 
-            html += '<div>';
+        html += '<div>';
 
-            html += subs.map(function (s) {
+        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';
-                }
-
-                className += ' listItem-noborder';
-
-                itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">';
-
-                itemHtml += '<span class="listItemIcon material-icons closed_caption"></span>';
-
-                itemHtml += '<div class="listItemBody two-line">';
-
-                itemHtml += '<div>';
-                itemHtml += s.DisplayTitle || '';
-                itemHtml += '</div>';
-
-                if (s.Path) {
-                    itemHtml += '<div class="secondary listItemBodyText">' + (s.Path) + '</div>';
-                }
-
-                itemHtml += '</a>';
-                itemHtml += '</div>';
-
-                if (!layoutManager.tv) {
-                    if (s.Path) {
-                        itemHtml += '<button is="paper-icon-button-light" data-index="' + s.Index + '" title="' + globalize.translate('Delete') + '" class="btnDelete listItemButton"><span class="material-icons delete"></span></button>';
-                    }
-                }
-
-                itemHtml += '</' + tagName + '>';
-
-                return itemHtml;
-            }).join('');
-
-            html += '</div>';
-        }
-
-        var elem = context.querySelector('.subtitleList');
-
-        if (subs.length) {
-            elem.classList.remove('hide');
-        } else {
-            elem.classList.add('hide');
-        }
-        elem.innerHTML = html;
-    }
-
-    function fillLanguages(context, apiClient, languages) {
-        var selectLanguage = context.querySelector('#selectLanguage');
-
-        selectLanguage.innerHTML = languages.map(function (l) {
-            return '<option value="' + l.ThreeLetterISOLanguageName + '">' + l.DisplayName + '</option>';
-        });
-
-        var lastLanguage = userSettings.get('subtitleeditor-language');
-        if (lastLanguage) {
-            selectLanguage.value = lastLanguage;
-        } else {
-            apiClient.getCurrentUser().then(function (user) {
-                var lang = user.Configuration.SubtitleLanguagePreference;
-
-                if (lang) {
-                    selectLanguage.value = lang;
-                }
-            });
-        }
-    }
-
-    function renderSearchResults(context, results) {
-        var lastProvider = '';
-        var html = '';
-
-        if (!results.length) {
-            context.querySelector('.noSearchResults').classList.remove('hide');
-            context.querySelector('.subtitleResults').innerHTML = '';
-            loading.hide();
-            return;
-        }
-
-        context.querySelector('.noSearchResults').classList.add('hide');
-
-        for (var i = 0, length = results.length; i < length; i++) {
-            var result = results[i];
-
-            var provider = result.ProviderName;
-
-            if (provider !== lastProvider) {
-                if (i > 0) {
-                    html += '</div>';
-                }
-                html += '<h2>' + provider + '</h2>';
-                html += '<div>';
-                lastProvider = provider;
-            }
-
-            var tagName = layoutManager.tv ? 'button' : 'div';
-            var className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
             if (layoutManager.tv) {
                 className += ' listItem-focusscale listItem-button';
             }
 
-            html += '<' + tagName + ' class="' + className + '" data-subid="' + result.Id + '">';
+            className += ' listItem-noborder';
 
-            html += '<span class="listItemIcon material-icons closed_caption"></span>';
+            itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">';
 
-            var bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
+            itemHtml += '<span class="listItemIcon material-icons closed_caption"></span>';
 
-            html += '<div class="listItemBody ' + bodyClass + '">';
+            itemHtml += '<div class="listItemBody two-line">';
 
-            html += '<div>' + (result.Name) + '</div>';
+            itemHtml += '<div>';
-            html += '<div class="secondary listItemBodyText">';
+            itemHtml += s.DisplayTitle || '';
+            itemHtml += '</div>';
 
-            if (result.Format) {
+            if (s.Path) {
-                html += '<span style="margin-right:1em;">' + globalize.translate('FormatValue', result.Format) + '</span>';
+                itemHtml += '<div class="secondary listItemBodyText">' + (s.Path) + '</div>';
             }
 
-            if (result.DownloadCount != null) {
+            itemHtml += '</a>';
-                html += '<span>' + globalize.translate('DownloadsValue', result.DownloadCount) + '</span>';
+            itemHtml += '</div>';
-            }
-            html += '</div>';
-
-            if (result.Comment) {
-                html += '<div class="secondary listItemBodyText">' + (result.Comment) + '</div>';
-            }
-
-            if (result.IsHashMatch) {
-                html += '<div class="secondary listItemBodyText"><div class="inline-flex align-items-center justify-content-center" style="background:#3388cc;color:#fff;padding: .3em 1em;border-radius:1000em;">' + globalize.translate('PerfectMatch') + '</div></div>';
-            }
-
-            html += '</div>';
 
             if (!layoutManager.tv) {
-                html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" class="btnDownload listItemButton"><span class="material-icons file_download"></span></button>';
+                if (s.Path) {
+                    itemHtml += '<button is="paper-icon-button-light" data-index="' + s.Index + '" title="' + globalize.translate('Delete') + '" class="btnDelete listItemButton"><span class="material-icons delete"></span></button>';
+                }
             }
 
-            html += '</' + tagName + '>';
+            itemHtml += '</' + tagName + '>';
+
+            return itemHtml;
+        }).join('');
+
+        html += '</div>';
+    }
+
+    let elem = context.querySelector('.subtitleList');
+
+    if (subs.length) {
+        elem.classList.remove('hide');
+    } else {
+        elem.classList.add('hide');
+    }
+    elem.innerHTML = html;
+}
+
+function fillLanguages(context, apiClient, languages) {
+    let selectLanguage = context.querySelector('#selectLanguage');
+
+    selectLanguage.innerHTML = languages.map(function (l) {
+        return '<option value="' + l.ThreeLetterISOLanguageName + '">' + l.DisplayName + '</option>';
+    });
+
+    let lastLanguage = userSettings.get('subtitleeditor-language');
+    if (lastLanguage) {
+        selectLanguage.value = lastLanguage;
+    } else {
+        apiClient.getCurrentUser().then(function (user) {
+            let lang = user.Configuration.SubtitleLanguagePreference;
+
+            if (lang) {
+                selectLanguage.value = lang;
+            }
+        });
+    }
+}
+
+function renderSearchResults(context, results) {
+    let lastProvider = '';
+    let html = '';
+
+    if (!results.length) {
+        context.querySelector('.noSearchResults').classList.remove('hide');
+        context.querySelector('.subtitleResults').innerHTML = '';
+        loading.hide();
+        return;
+    }
+
+    context.querySelector('.noSearchResults').classList.add('hide');
+
+    for (let i = 0, length = results.length; i < length; i++) {
+        let result = results[i];
+
+        let provider = result.ProviderName;
+
+        if (provider !== lastProvider) {
+            if (i > 0) {
+                html += '</div>';
+            }
+            html += '<h2>' + provider + '</h2>';
+            html += '<div>';
+            lastProvider = provider;
         }
 
-        if (results.length) {
+        let tagName = layoutManager.tv ? 'button' : 'div';
-            html += '</div>';
+        let className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
+        if (layoutManager.tv) {
+            className += ' listItem-focusscale listItem-button';
         }
 
-        var elem = context.querySelector('.subtitleResults');
+        html += '<' + tagName + ' class="' + className + '" data-subid="' + result.Id + '">';
-        elem.innerHTML = html;
+
+        html += '<span class="listItemIcon material-icons closed_caption"></span>';
+
+        let bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
+
+        html += '<div class="listItemBody ' + bodyClass + '">';
+
+        html += '<div>' + (result.Name) + '</div>';
+        html += '<div class="secondary listItemBodyText">';
+
+        if (result.Format) {
+            html += '<span style="margin-right:1em;">' + globalize.translate('FormatValue', result.Format) + '</span>';
+        }
+
+        if (result.DownloadCount != null) {
+            html += '<span>' + globalize.translate('DownloadsValue', result.DownloadCount) + '</span>';
+        }
+        html += '</div>';
+
+        if (result.Comment) {
+            html += '<div class="secondary listItemBodyText">' + (result.Comment) + '</div>';
+        }
+
+        if (result.IsHashMatch) {
+            html += '<div class="secondary listItemBodyText"><div class="inline-flex align-items-center justify-content-center" style="background:#3388cc;color:#fff;padding: .3em 1em;border-radius:1000em;">' + globalize.translate('PerfectMatch') + '</div></div>';
+        }
+
+        html += '</div>';
+
+        if (!layoutManager.tv) {
+            html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" class="btnDownload listItemButton"><span class="material-icons file_download"></span></button>';
+        }
+
+        html += '</' + tagName + '>';
+    }
+
+    if (results.length) {
+        html += '</div>';
+    }
+
+    let elem = context.querySelector('.subtitleResults');
+    elem.innerHTML = html;
+
+    loading.hide();
+}
+
+function searchForSubtitles(context, language) {
+    userSettings.set('subtitleeditor-language', language);
+
+    loading.show();
+
+    let apiClient = connectionManager.getApiClient(currentItem.ServerId);
+    let url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
+
+    apiClient.getJSON(url).then(function (results) {
+        renderSearchResults(context, results);
+    });
+}
+
+function reload(context, apiClient, itemId) {
+    context.querySelector('.noSearchResults').classList.add('hide');
+
+    function onGetItem(item) {
+        currentItem = item;
+
+        fillSubtitleList(context, item);
+        let file = item.Path || '';
+        let index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
+        if (index > -1) {
+            file = file.substring(index + 1);
+        }
+
+        if (file) {
+            context.querySelector('.pathValue').innerHTML = file;
+            context.querySelector('.originalFile').classList.remove('hide');
+        } else {
+            context.querySelector('.pathValue').innerHTML = '';
+            context.querySelector('.originalFile').classList.add('hide');
+        }
 
         loading.hide();
     }
 
-    function searchForSubtitles(context, language) {
+    if (typeof itemId === 'string') {
-        userSettings.set('subtitleeditor-language', language);
+        apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(onGetItem);
+    } else {
+        onGetItem(itemId);
+    }
+}
 
-        loading.show();
+function onSearchSubmit(e) {
+    let form = this;
 
-        var apiClient = connectionManager.getApiClient(currentItem.ServerId);
+    let lang = form.querySelector('#selectLanguage', form).value;
-        var url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
 
-        apiClient.getJSON(url).then(function (results) {
+    searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
-            renderSearchResults(context, results);
+
-        });
+    e.preventDefault();
+    return false;
+}
+
+function onSubtitleListClick(e) {
+    let btnDelete = dom.parentWithClass(e.target, 'btnDelete');
+    if (btnDelete) {
+        let index = btnDelete.getAttribute('data-index');
+        let context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
+        deleteLocalSubtitle(context, index);
+    }
+}
+
+function onSubtitleResultsClick(e) {
+    let subtitleId;
+    let context;
+
+    let btnOptions = dom.parentWithClass(e.target, 'btnOptions');
+    if (btnOptions) {
+        subtitleId = btnOptions.getAttribute('data-subid');
+        context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog');
+        showDownloadOptions(btnOptions, context, subtitleId);
     }
 
-    function reload(context, apiClient, itemId) {
+    let btnDownload = dom.parentWithClass(e.target, 'btnDownload');
-        context.querySelector('.noSearchResults').classList.add('hide');
+    if (btnDownload) {
+        subtitleId = btnDownload.getAttribute('data-subid');
+        context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog');
+        downloadRemoteSubtitles(context, subtitleId);
+    }
+}
 
-        function onGetItem(item) {
+function showDownloadOptions(button, context, subtitleId) {
-            currentItem = item;
+    let items = [];
 
-            fillSubtitleList(context, item);
+    items.push({
-            var file = item.Path || '';
+        name: globalize.translate('Download'),
-            var index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
+        id: 'download'
-            if (index > -1) {
+    });
-                file = file.substring(index + 1);
+
+    import('actionsheet').then(({default: actionsheet}) => {
+        actionsheet.show({
+            items: items,
+            positionTo: button
+
+        }).then(function (id) {
+            switch (id) {
+                case 'download':
+                    downloadRemoteSubtitles(context, subtitleId);
+                    break;
+                default:
+                    break;
             }
+        });
+    });
+}
 
-            if (file) {
+function centerFocus(elem, horiz, on) {
-                context.querySelector('.pathValue').innerHTML = file;
+    import('scrollHelper').then(({default: scrollHelper}) => {
-                context.querySelector('.originalFile').classList.remove('hide');
+        let fn = on ? 'on' : 'off';
-            } else {
+        scrollHelper.centerFocus[fn](elem, horiz);
-                context.querySelector('.pathValue').innerHTML = '';
+    });
-                context.querySelector('.originalFile').classList.add('hide');
+}
-            }
 
-            loading.hide();
+function showEditorInternal(itemId, serverId, template) {
-        }
+    hasChanges = false;
 
-        if (typeof itemId === 'string') {
+    let apiClient = connectionManager.getApiClient(serverId);
-            apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(onGetItem);
+    return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
+        let dialogOptions = {
+            removeOnClose: true,
+            scrollY: false
+        };
+
+        if (layoutManager.tv) {
+            dialogOptions.size = 'fullscreen';
         } else {
-            onGetItem(itemId);
+            dialogOptions.size = 'small';
-        }
-    }
-
-    function onSearchSubmit(e) {
-        var form = this;
-
-        var lang = form.querySelector('#selectLanguage', form).value;
-
-        searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
-
-        e.preventDefault();
-        return false;
-    }
-
-    function onSubtitleListClick(e) {
-        var btnDelete = dom.parentWithClass(e.target, 'btnDelete');
-        if (btnDelete) {
-            var index = btnDelete.getAttribute('data-index');
-            var context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
-            deleteLocalSubtitle(context, index);
-        }
-    }
-
-    function onSubtitleResultsClick(e) {
-        var subtitleId;
-        var context;
-
-        var 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 dlg = dialogHelper.createDialog(dialogOptions);
-        if (btnDownload) {
+
-            subtitleId = btnDownload.getAttribute('data-subid');
+        dlg.classList.add('formDialog');
-            context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog');
+        dlg.classList.add('subtitleEditorDialog');
-            downloadRemoteSubtitles(context, subtitleId);
+
+        dlg.innerHTML = globalize.translateHtml(template, 'core');
+
+        dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('File');
+
+        dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
+
+        let btnSubmit = dlg.querySelector('.btnSubmit');
+
+        if (layoutManager.tv) {
+            centerFocus(dlg.querySelector('.formDialogContent'), false, true);
+            dlg.querySelector('.btnSearchSubtitles').classList.add('hide');
+        } else {
+            btnSubmit.classList.add('hide');
         }
-    }
 
-    function showDownloadOptions(button, context, subtitleId) {
+        let editorContent = dlg.querySelector('.formDialogContent');
-        var items = [];
 
-        items.push({
+        dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
-            name: globalize.translate('Download'),
+        dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
-            id: 'download'
+
+        apiClient.getCultures().then(function (languages) {
+            fillLanguages(editorContent, apiClient, languages);
         });
 
-        require(['actionsheet'], function (actionsheet) {
+        dlg.querySelector('.btnCancel').addEventListener('click', function () {
-            actionsheet.show({
+            dialogHelper.close(dlg);
-                items: items,
-                positionTo: button
-
-            }).then(function (id) {
-                switch (id) {
-                    case 'download':
-                        downloadRemoteSubtitles(context, subtitleId);
-                        break;
-                    default:
-                        break;
-                }
-            });
         });
-    }
-
-    function centerFocus(elem, horiz, on) {
-        require(['scrollHelper'], function (scrollHelper) {
-            var fn = on ? 'on' : 'off';
-            scrollHelper.centerFocus[fn](elem, horiz);
-        });
-    }
-
-    function showEditorInternal(itemId, serverId, template) {
-        hasChanges = false;
-
-        var apiClient = connectionManager.getApiClient(serverId);
-        return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
-            var dialogOptions = {
-                removeOnClose: true,
-                scrollY: false
-            };
-
-            if (layoutManager.tv) {
-                dialogOptions.size = 'fullscreen';
-            } else {
-                dialogOptions.size = 'small';
-            }
-
-            var dlg = dialogHelper.createDialog(dialogOptions);
-
-            dlg.classList.add('formDialog');
-            dlg.classList.add('subtitleEditorDialog');
-
-            dlg.innerHTML = globalize.translateHtml(template, 'core');
-
-            dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('File');
-
-            dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
-
-            var btnSubmit = dlg.querySelector('.btnSubmit');
-
-            if (layoutManager.tv) {
-                centerFocus(dlg.querySelector('.formDialogContent'), false, true);
-                dlg.querySelector('.btnSearchSubtitles').classList.add('hide');
-            } else {
-                btnSubmit.classList.add('hide');
-            }
-
-            var editorContent = dlg.querySelector('.formDialogContent');
-
-            dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
-            dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
-
-            apiClient.getCultures().then(function (languages) {
-                fillLanguages(editorContent, apiClient, languages);
-            });
-
-            dlg.querySelector('.btnCancel').addEventListener('click', function () {
-                dialogHelper.close(dlg);
-            });
-
-            return new Promise(function (resolve, reject) {
-                dlg.addEventListener('close', function () {
-                    if (layoutManager.tv) {
-                        centerFocus(dlg.querySelector('.formDialogContent'), false, false);
-                    }
-
-                    if (hasChanges) {
-                        resolve();
-                    } else {
-                        reject();
-                    }
-                });
-
-                dialogHelper.open(dlg);
-
-                reload(editorContent, apiClient, item);
-            });
-        });
-    }
-
-    function showEditor(itemId, serverId) {
-        loading.show();
 
         return new Promise(function (resolve, reject) {
-            require(['text!./subtitleeditor.template.html'], function (template) {
+            dlg.addEventListener('close', function () {
-                showEditorInternal(itemId, serverId, template).then(resolve, reject);
+                if (layoutManager.tv) {
-            });
+                    centerFocus(dlg.querySelector('.formDialogContent'), false, false);
-        });
+                }
-    }
 
-    return {
+                if (hasChanges) {
-        show: showEditor
+                    resolve();
-    };
+                } else {
-});
+                    reject();
+                }
+            });
+
+            dialogHelper.open(dlg);
+
+            reload(editorContent, apiClient, item);
+        });
+    });
+}
+
+function showEditor(itemId, serverId) {
+    loading.show();
+
+    return new Promise(function (resolve, reject) {
+        import('text!./subtitleeditor.template.html').then(({default: template}) => {
+            showEditorInternal(itemId, serverId, template).then(resolve, reject);
+        });
+    });
+}
+
+export default {
+    show: showEditor
+};