Refactor DirectoryBrowser class

src/components/directorybrowser/directorybrowser.js

@@ -243,70 +243,70 @@ import alert from '../alert';
         }
     }
 
-    class directoryBrowser {
+    let systemInfo;
-        constructor() {
+    class DirectoryBrowser {
-            let currentDialog;
+        currentDialog;
-            this.show = options => {
+        constructor() {}
-                options = options || {};
-                const fileOptions = {
-                    includeDirectories: true
-                };
-                if (options.includeDirectories != null) {
-                    fileOptions.includeDirectories = options.includeDirectories;
-                }
-                if (options.includeFiles != null) {
-                    fileOptions.includeFiles = options.includeFiles;
-                }
-                Promise.all([getSystemInfo(), getDefaultPath(options)]).then(
-                    responses => {
-                        const systemInfo = responses[0];
-                        const initialPath = responses[1];
-                        const dlg = dialogHelper.createDialog({
-                            size: 'small',
-                            removeOnClose: true,
-                            scrollY: false
-                        });
-                        dlg.classList.add('ui-body-a');
-                        dlg.classList.add('background-theme-a');
-                        dlg.classList.add('directoryPicker');
-                        dlg.classList.add('formDialog');
 
-                        let html = '';
+        show = options => {
-                        html += '<div class="formDialogHeader">';
+            options = options || {};
-                        html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
+            const fileOptions = {
-                        html += '<h3 class="formDialogHeaderTitle">';
+                includeDirectories: true
-                        html += options.header || globalize.translate('HeaderSelectPath');
+            };
-                        html += '</h3>';
+            if (options.includeDirectories != null) {
-                        html += '</div>';
+                fileOptions.includeDirectories = options.includeDirectories;
-                        html += getEditorHtml(options, systemInfo);
+            }
-                        dlg.innerHTML = html;
+            if (options.includeFiles != null) {
-                        initEditor(dlg, options, fileOptions);
+                fileOptions.includeFiles = options.includeFiles;
-                        dlg.addEventListener('close', onDialogClosed);
+            }
-                        dialogHelper.open(dlg);
+            Promise.all([getSystemInfo(), getDefaultPath(options)]).then(
-                        dlg.querySelector('.btnCloseDialog').addEventListener('click', () => {
+                responses => {
-                            dialogHelper.close(dlg);
+                    const systemInfo = responses[0];
-                        });
+                    const initialPath = responses[1];
-                        currentDialog = dlg;
+                    const dlg = dialogHelper.createDialog({
-                        dlg.querySelector('#txtDirectoryPickerPath').value = initialPath;
+                        size: 'small',
-                        const txtNetworkPath = dlg.querySelector('#txtNetworkPath');
+                        removeOnClose: true,
-                        if (txtNetworkPath) {
+                        scrollY: false
-                            txtNetworkPath.value = options.networkSharePath || '';
+                    });
-                        }
+                    dlg.classList.add('ui-body-a');
-                        if (!options.pathReadOnly) {
+                    dlg.classList.add('background-theme-a');
-                            refreshDirectoryBrowser(dlg, initialPath, fileOptions, true);
+                    dlg.classList.add('directoryPicker');
-                        }
+                    dlg.classList.add('formDialog');
+
+                    let html = '';
+                    html += '<div class="formDialogHeader">';
+                    html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
+                    html += '<h3 class="formDialogHeaderTitle">';
+                    html += options.header || globalize.translate('HeaderSelectPath');
+                    html += '</h3>';
+                    html += '</div>';
+                    html += getEditorHtml(options, systemInfo);
+                    dlg.innerHTML = html;
+                    initEditor(dlg, options, fileOptions);
+                    dlg.addEventListener('close', onDialogClosed);
+                    dialogHelper.open(dlg);
+                    dlg.querySelector('.btnCloseDialog').addEventListener('click', () => {
+                        dialogHelper.close(dlg);
+                    });
+                    this.currentDialog = dlg;
+                    dlg.querySelector('#txtDirectoryPickerPath').value = initialPath;
+                    const txtNetworkPath = dlg.querySelector('#txtNetworkPath');
+                    if (txtNetworkPath) {
+                        txtNetworkPath.value = options.networkSharePath || '';
+                    }
+                    if (!options.pathReadOnly) {
+                        refreshDirectoryBrowser(dlg, initialPath, fileOptions, true);
                     }
-                );
-            };
-            this.close = () => {
-                if (currentDialog) {
-                    dialogHelper.close(currentDialog);
                 }
-            };
+            );
-        }
+        };
+
+        close = () => {
+            if (this.currentDialog) {
+                dialogHelper.close(this.currentDialog);
+            }
+        };
     }
 
-    let systemInfo;
-
 /* eslint-enable indent */
-export default directoryBrowser;
+export {DirectoryBrowser};

src/components/mediaLibraryCreator/mediaLibraryCreator.js

@@ -102,8 +102,8 @@ import template from './mediaLibraryCreator.template.html';
     function onAddButtonClick() {
         const page = dom.parentWithClass(this, 'dlg-librarycreator');
 
-        import('../directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
+        import('../directorybrowser/directorybrowser').then((Module) => {
-            const picker = new directoryBrowser();
+            const picker = new Module.DirectoryBrowser();
             picker.show({
                 enableNetworkSharePath: true,
                 callback: function (path, networkSharePath) {

src/components/mediaLibraryEditor/mediaLibraryEditor.js

@@ -162,8 +162,8 @@ import template from './mediaLibraryEditor.template.html';
     }
 
     function showDirectoryBrowser(context, originalPath, networkPath) {
-        import('../directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
+        import('../directorybrowser/directorybrowser').then((Module) => {
-            const picker = new directoryBrowser();
+            const picker = new Module.DirectoryBrowser();
             picker.show({
                 enableNetworkSharePath: true,
                 pathReadOnly: originalPath != null,

src/components/tvproviders/xmltv.js

@@ -145,8 +145,8 @@ export default function (page, providerId, options) {
     function onSelectPathClick(e) {
         const page = $(e.target).parents('.xmltvForm')[0];
 
-        import('../directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
+        import('../directorybrowser/directorybrowser').then((Module) => {
-            const picker = new directoryBrowser();
+            const picker = new Module.DirectoryBrowser();
             picker.show({
                 includeFiles: true,
                 callback: function (path) {

src/controllers/dashboard/encodingsettings.js

@@ -217,8 +217,8 @@ import alert from '../../components/alert';
             setDecodingCodecsVisible(page, this.value);
         });
         $('#btnSelectEncoderPath', page).on('click.selectDirectory', function () {
-            import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
+            import('../../components/directorybrowser/directorybrowser').then((Module) => {
-                const picker = new directoryBrowser();
+                const picker = new Module.DirectoryBrowser();
                 picker.show({
                     includeFiles: true,
                     callback: function (path) {
@@ -232,8 +232,8 @@ import alert from '../../components/alert';
             });
         });
         $('#btnSelectTranscodingTempPath', page).on('click.selectDirectory', function () {
-            import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
+            import('../../components/directorybrowser/directorybrowser').then((Module) => {
-                const picker = new directoryBrowser();
+                const picker = new Module.DirectoryBrowser();
                 picker.show({
                     callback: function (path) {
                         if (path) {
@@ -249,8 +249,8 @@ import alert from '../../components/alert';
             });
         });
         $('#btnSelectFallbackFontPath', page).on('click.selectDirectory', function () {
-            import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
+            import('../../components/directorybrowser/directorybrowser').then((Module) => {
-                const picker = new directoryBrowser();
+                const picker = new Module.DirectoryBrowser();
                 picker.show({
                     includeDirectories: true,
                     callback: function (path) {

src/controllers/dashboard/general.js

@@ -53,8 +53,8 @@ import alert from '../../components/alert';
     const brandingConfigKey = 'branding';
     export default function (view) {
         $('#btnSelectCachePath', view).on('click.selectDirectory', function () {
-            import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
+            import('../../components/directorybrowser/directorybrowser').then((Module) => {
-                const picker = new directoryBrowser();
+                const picker = new Module.DirectoryBrowser();
                 picker.show({
                     callback: function (path) {
                         if (path) {
@@ -70,8 +70,8 @@ import alert from '../../components/alert';
             });
         });
         $('#btnSelectMetadataPath', view).on('click.selectDirectory', function () {
-            import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
+            import('../../components/directorybrowser/directorybrowser').then((Module) => {
-                const picker = new directoryBrowser();
+                const picker = new Module.DirectoryBrowser();
                 picker.show({
                     path: $('#txtMetadataPath', view).val(),
                     networkSharePath: $('#txtMetadataNetworkPath', view).val(),

src/controllers/dashboard/networking.js

@@ -181,8 +181,8 @@ import alert from '../../components/alert';
             }
         });
         view.querySelector('#btnSelectCertPath').addEventListener('click', function () {
-            import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
+            import('../../components/directorybrowser/directorybrowser').then((Module) => {
-                const picker = new directoryBrowser();
+                const picker = new Module.DirectoryBrowser();
                 picker.show({
                     includeFiles: true,
                     includeDirectories: true,

src/controllers/livetvsettings.js

@@ -60,8 +60,8 @@ $(document).on('pageinit', '#liveTvSettingsPage', function () {
     const page = this;
     $('.liveTvSettingsForm').off('submit', onSubmit).on('submit', onSubmit);
     $('#btnSelectRecordingPath', page).on('click.selectDirectory', function () {
-        import('../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
+        import('../components/directorybrowser/directorybrowser').then((Module) => {
-            const picker = new directoryBrowser();
+            const picker = new Module.DirectoryBrowser();
             picker.show({
                 callback: function (path) {
                     if (path) {
@@ -75,8 +75,8 @@ $(document).on('pageinit', '#liveTvSettingsPage', function () {
         });
     });
     $('#btnSelectMovieRecordingPath', page).on('click.selectDirectory', function () {
-        import('../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
+        import('../components/directorybrowser/directorybrowser').then((Module) => {
-            const picker = new directoryBrowser();
+            const picker = new Module.DirectoryBrowser();
             picker.show({
                 callback: function (path) {
                     if (path) {
@@ -90,8 +90,8 @@ $(document).on('pageinit', '#liveTvSettingsPage', function () {
         });
     });
     $('#btnSelectSeriesRecordingPath', page).on('click.selectDirectory', function () {
-        import('../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
+        import('../components/directorybrowser/directorybrowser').then((Module) => {
-            const picker = new directoryBrowser();
+            const picker = new Module.DirectoryBrowser();
             picker.show({
                 callback: function (path) {
                     if (path) {
@@ -105,8 +105,8 @@ $(document).on('pageinit', '#liveTvSettingsPage', function () {
         });
     });
     $('#btnSelectPostProcessorPath', page).on('click.selectDirectory', function () {
-        import('../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
+        import('../components/directorybrowser/directorybrowser').then((Module) => {
-            const picker = new directoryBrowser();
+            const picker = new Module.DirectoryBrowser();
             picker.show({
                 includeFiles: true,
                 callback: function (path) {

src/controllers/livetvtuner.js

@@ -212,8 +212,8 @@ export default function (view, params) {
         });
     });
     view.querySelector('.btnSelectPath').addEventListener('click', function () {
-        import('../components/directorybrowser/directorybrowser').then(({default: directorybrowser}) => {
+        import('../components/directorybrowser/directorybrowser').then((Module) => {
-            const picker = new directorybrowser();
+            const picker = new Module.DirectoryBrowser();
             picker.show({
                 includeFiles: true,
                 callback: function (path) {

src/scripts/clientUtils.js

@@ -7,7 +7,7 @@ import baseConfirm from '../components/confirm/confirm';
 import globalize from '../scripts/globalize';
 import * as webSettings from './settings/webSettings';
 import datetime from '../scripts/datetime';
-import directorybrowser from '../components/directorybrowser/directorybrowser';
+import { DirectoryBrowser } from '../components/directorybrowser/directorybrowser';
 import dialogHelper from '../components/dialogHelper/dialogHelper';
 import { Events } from 'jellyfin-apiclient';
 
@@ -217,7 +217,7 @@ const Dashboard = {
     showLoadingMsg,
     datetime,
     Events,
-    directorybrowser,
+    DirectoryBrowser,
     dialogHelper
 };