jellyfin-web/src/components/directorybrowser/directorybrowser.js

import loading from 'loading';
import dialogHelper from 'dialogHelper';
import dom from 'dom';
import globalize from 'globalize';
import 'listViewStyle';
import 'emby-input';
import 'paper-icon-button-light';
import 'css!./directorybrowser';
import 'formDialogStyle';
import 'emby-button';

/* eslint-disable indent */

    function getSystemInfo() {
        return systemInfo ? Promise.resolve(systemInfo) : ApiClient.getPublicSystemInfo().then(
            info => {
                systemInfo = info;
                return info;
            }
        );
    }

    function onDialogClosed() {
        loading.hide();
    }

    function refreshDirectoryBrowser(page, path, fileOptions, updatePathOnError) {
        if (path && typeof path !== 'string') {
            throw new Error('invalid path');
        }

        loading.show();

        const promises = [];

        if (path === 'Network') {
            promises.push(ApiClient.getNetworkDevices());
        } else {
            if (path) {
                promises.push(ApiClient.getDirectoryContents(path, fileOptions));
                promises.push(ApiClient.getParentPath(path));
            } else {
                promises.push(ApiClient.getDrives());
            }
        }

        Promise.all(promises).then(
            responses => {
                const folders = responses[0];
                const parentPath = responses[1] || '';
                let html = '';

                page.querySelector('.results').scrollTop = 0;
                page.querySelector('#txtDirectoryPickerPath').value = path || '';

                if (path) {
                    html += getItem('lnkPath lnkDirectory', '', parentPath, '...');
                }
                for (let i = 0, length = folders.length; i < length; i++) {
                    const folder = folders[i];
                    const cssClass = folder.Type === 'File' ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory';
                    html += getItem(cssClass, folder.Type, folder.Path, folder.Name);
                }

                if (!path) {
                    html += getItem('lnkPath lnkDirectory', '', 'Network', globalize.translate('ButtonNetwork'));
                }

                page.querySelector('.results').innerHTML = html;
                loading.hide();
            }, () => {
                if (updatePathOnError) {
                    page.querySelector('#txtDirectoryPickerPath').value = '';
                    page.querySelector('.results').innerHTML = '';
                    loading.hide();
                }
            }
        );
    }

    function getItem(cssClass, type, path, name) {
        let html = '';
        html += `<div class="listItem listItem-border ${cssClass}" data-type="${type}" data-path="${path}">`;
        html += '<div class="listItemBody" style="padding-left:0;padding-top:.5em;padding-bottom:.5em;">';
        html += '<div class="listItemBodyText">';
        html += name;
        html += '</div>';
        html += '</div>';
        html += '<span class="material-icons arrow_forward" style="font-size:inherit;"></span>';
        html += '</div>';
        return html;
    }

    function getEditorHtml(options, systemInfo) {
        let html = '';
        html += '<div class="formDialogContent scrollY">';
        html += '<div class="dialogContentInner dialog-content-centered" style="padding-top:2em;">';
        if (!options.pathReadOnly) {
            const instruction = options.instruction ? `${options.instruction}<br/><br/>` : '';
            html += '<div class="infoBanner" style="margin-bottom:1.5em;">';
            html += instruction;
            if (systemInfo.OperatingSystem.toLowerCase() === 'bsd') {
                html += '<br/>';
                html += '<br/>';
                html += globalize.translate('MessageDirectoryPickerBSDInstruction');
                html += '<br/>';
            } else if (systemInfo.OperatingSystem.toLowerCase() === 'linux') {
                html += '<br/>';
                html += '<br/>';
                html += globalize.translate('MessageDirectoryPickerLinuxInstruction');
                html += '<br/>';
            }
            html += '</div>';
        }
        html += '<form style="margin:auto;">';
        html += '<div class="inputContainer" style="display: flex; align-items: center;">';
        html += '<div style="flex-grow:1;">';
        let labelKey;
        if (options.includeFiles !== true) {
            labelKey = 'LabelFolder';
        } else {
            labelKey = 'LabelPath';
        }
        const readOnlyAttribute = options.pathReadOnly ? ' readonly' : '';
        html += `<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ${readOnlyAttribute} label="${globalize.translate(labelKey)}"/>`;
        html += '</div>';
        if (!readOnlyAttribute) {
            html += `<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="${globalize.translate('ButtonRefresh')}"><span class="material-icons search"></span></button>`;
        }
        html += '</div>';
        if (!readOnlyAttribute) {
            html += '<div class="results paperList" style="max-height: 200px; overflow-y: auto;"></div>';
        }
        if (options.enableNetworkSharePath) {
            html += '<div class="inputContainer" style="margin-top:2em;">';
            html += `<input is="emby-input" id="txtNetworkPath" type="text" label="${globalize.translate('LabelOptionalNetworkPath')}"/>`;
            html += '<div class="fieldDescription">';
            html += globalize.translate('LabelOptionalNetworkPathHelp', '<b>\\\\server</b>', '<b>\\\\192.168.1.101</b>');
            html += '</div>';
            html += '</div>';
        }
        html += '<div class="formDialogFooter">';
        html += `<button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">${globalize.translate('ButtonOk')}</button>`;
        html += '</div>';
        html += '</form>';
        html += '</div>';
        html += '</div>';
        html += '</div>';

        return html;
    }

    function alertText(text) {
        alertTextWithOptions({
            text: text
        });
    }

    function alertTextWithOptions(options) {
        import('alert').then(({default: alert}) => {
            alert(options);
        });
    }

    function validatePath(path, validateWriteable, apiClient) {
        return apiClient.ajax({
            type: 'POST',
            url: apiClient.getUrl('Environment/ValidatePath'),
            data: {
                ValidateWriteable: validateWriteable,
                Path: path
            }
        }).catch(response => {
            if (response) {
                if (response.status === 404) {
                    alertText(globalize.translate('PathNotFound'));
                    return Promise.reject();
                }
                if (response.status === 500) {
                    if (validateWriteable) {
                        alertText(globalize.translate('WriteAccessRequired'));
                    } else {
                        alertText(globalize.translate('PathNotFound'));
                    }
                    return Promise.reject();
                }
            }
            return Promise.resolve();
        });
    }

    function initEditor(content, options, fileOptions) {
        content.addEventListener('click', e => {
            const lnkPath = dom.parentWithClass(e.target, 'lnkPath');
            if (lnkPath) {
                const path = lnkPath.getAttribute('data-path');
                if (lnkPath.classList.contains('lnkFile')) {
                    content.querySelector('#txtDirectoryPickerPath').value = path;
                } else {
                    refreshDirectoryBrowser(content, path, fileOptions, true);
                }
            }
        });

        content.addEventListener('click', e => {
            if (dom.parentWithClass(e.target, 'btnRefreshDirectories')) {
                const path = content.querySelector('#txtDirectoryPickerPath').value;
                refreshDirectoryBrowser(content, path, fileOptions);
            }
        });

        content.addEventListener('change', e => {
            const txtDirectoryPickerPath = dom.parentWithTag(e.target, 'INPUT');
            if (txtDirectoryPickerPath && txtDirectoryPickerPath.id === 'txtDirectoryPickerPath') {
                refreshDirectoryBrowser(content, txtDirectoryPickerPath.value, fileOptions);
            }
        });

        content.querySelector('form').addEventListener('submit', function(e) {
            if (options.callback) {
                let networkSharePath = this.querySelector('#txtNetworkPath');
                networkSharePath = networkSharePath ? networkSharePath.value : null;
                const path = this.querySelector('#txtDirectoryPickerPath').value;
                validatePath(path, options.validateWriteable, ApiClient).then(options.callback(path, networkSharePath));
            }
            e.preventDefault();
            e.stopPropagation();
            return false;
        });
    }

    function getDefaultPath(options) {
        if (options.path) {
            return Promise.resolve(options.path);
        } else {
            return ApiClient.getJSON(ApiClient.getUrl('Environment/DefaultDirectoryBrowser')).then(
                result => {
                    return result.Path || '';
                }, () => {
                    return '';
                }
            );
        }
    }

    class directoryBrowser {
        constructor() {
            let currentDialog;
            this.show = options => {
                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 = '';
                        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);
                        });
                        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);
                }
            };
        }
    }

    let systemInfo;

/* eslint-enable indent */
export default directoryBrowser;