Move dashboard controllers to app dir

src/apps/dashboard/controllers/plugins/available/index.html

@@ -0,0 +1,17 @@
+<div id="pluginCatalogPage" data-role="page" class="page type-interior pluginConfigurationPage fullWidthContent" data-title="${TabCatalog}">
+    <div>
+        <div class="content-primary">
+            <div class="sectionTitleContainer flex align-items-center">
+                <h2 class="sectionTitle">${TabCatalog}</h2>
+                <a is="emby-linkbutton" class="fab" href="#/dashboard/plugins/repositories" style="margin-left:1em;" title="${Settings}">
+                    <span class="material-icons settings" aria-hidden="true"></span>
+                </a>
+            </div>
+            <div class="inputContainer">
+                <input id="txtSearchPlugins" name="txtSearchPlugins" type="text" is="emby-input" label="${Search}" />
+            </div>
+            <div id="noPlugins" class="hide">${MessageNoAvailablePlugins}</div>
+            <div id="pluginTiles" style="text-align:left;"></div>
+        </div>
+    </div>
+</div>

src/apps/dashboard/controllers/plugins/available/index.js

@@ -0,0 +1,163 @@
+import escapeHTML from 'escape-html';
+
+import { CATEGORY_LABELS } from 'apps/dashboard/features/plugins/constants/categoryLabels';
+import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
+import loading from 'components/loading/loading';
+import globalize from 'lib/globalize';
+
+import 'components/cardbuilder/card.scss';
+import 'elements/emby-button/emby-button';
+import 'elements/emby-checkbox/emby-checkbox';
+import 'elements/emby-select/emby-select';
+
+function reloadList(page) {
+    loading.show();
+    const promise1 = ApiClient.getAvailablePlugins();
+    const promise2 = ApiClient.getInstalledPlugins();
+    Promise.all([promise1, promise2]).then(function (responses) {
+        populateList({
+            catalogElement: page.querySelector('#pluginTiles'),
+            noItemsElement: page.querySelector('#noPlugins'),
+            availablePlugins: responses[0],
+            installedPlugins: responses[1]
+        });
+    });
+}
+
+function getHeaderText(category) {
+    const categoryKey = category.replaceAll(' ', '');
+
+    if (CATEGORY_LABELS[categoryKey]) {
+        return globalize.translate(CATEGORY_LABELS[categoryKey]);
+    }
+
+    console.warn('[AvailablePlugins] unmapped category label', category);
+    return category;
+}
+
+function populateList(options) {
+    const availablePlugins = options.availablePlugins;
+    const installedPlugins = options.installedPlugins;
+
+    availablePlugins.forEach(function (plugin, index, array) {
+        plugin.category = plugin.category || 'Other';
+        plugin.categoryDisplayName = getHeaderText(plugin.category);
+        array[index] = plugin;
+    });
+
+    availablePlugins.sort(function (a, b) {
+        if (a.category > b.category) {
+            return 1;
+        } else if (b.category > a.category) {
+            return -1;
+        }
+        if (a.name > b.name) {
+            return 1;
+        } else if (b.name > a.name) {
+            return -1;
+        }
+        return 0;
+    });
+
+    let currentCategory = null;
+    let html = '';
+
+    for (const plugin of availablePlugins) {
+        const category = plugin.categoryDisplayName;
+        if (category != currentCategory) {
+            if (currentCategory) {
+                html += '</div>';
+                html += '</div>';
+            }
+            html += '<div class="verticalSection">';
+            html += '<h2 class="sectionTitle sectionTitle-cards">' + escapeHTML(category) + '</h2>';
+            html += '<div class="itemsContainer vertical-wrap">';
+            currentCategory = category;
+        }
+        html += getPluginHtml(plugin, options, installedPlugins);
+    }
+    html += '</div>';
+    html += '</div>';
+
+    if (!availablePlugins.length && options.noItemsElement) {
+        options.noItemsElement.classList.remove('hide');
+    }
+
+    const searchBar = document.getElementById('txtSearchPlugins');
+    if (searchBar) {
+        searchBar.addEventListener('input', () => onSearchBarType(searchBar));
+    }
+
+    options.catalogElement.innerHTML = html;
+    loading.hide();
+}
+
+function onSearchBarType(searchBar) {
+    const filter = searchBar.value.toLowerCase();
+    for (const header of document.querySelectorAll('div .verticalSection')) {
+        // keep track of shown cards after each search
+        let shown = 0;
+        for (const card of header.querySelectorAll('div .card')) {
+            if (filter && filter != '' && !card.textContent.toLowerCase().includes(filter)) {
+                card.style.display = 'none';
+            } else {
+                card.style.display = 'unset';
+                shown++;
+            }
+        }
+        // hide title if no cards are shown
+        if (shown <= 0) {
+            header.style.display = 'none';
+        } else {
+            header.style.display = 'unset';
+        }
+    }
+}
+
+function getPluginHtml(plugin, options, installedPlugins) {
+    let html = '';
+    let href = plugin.externalUrl ? plugin.externalUrl :
+        `#/dashboard/plugins/${plugin.guid}?name=${encodeURIComponent(plugin.name)}`;
+
+    if (options.context) {
+        href += '&context=' + options.context;
+    }
+
+    const target = plugin.externalUrl ? ' target="_blank"' : '';
+    html += "<div class='card backdropCard'>";
+    html += '<div class="cardBox visualCardBox">';
+    html += '<div class="cardScalable visualCardBox-cardScalable">';
+    html += '<div class="cardPadder cardPadder-backdrop"></div>';
+    html += '<div class="cardContent">';
+    html += `<a class="cardImageContainer" is="emby-linkbutton" style="margin:0;padding:0" href="${href}" ${target}>`;
+
+    if (plugin.imageUrl) {
+        html += `<img src="${escapeHTML(plugin.imageUrl)}" style="width:100%" />`;
+    } else {
+        html += `<div class="cardImage flex align-items-center justify-content-center ${getDefaultBackgroundClass()}">`;
+        html += '<span class="cardImageIcon material-icons extension" aria-hidden="true"></span>';
+        html += '</div>';
+    }
+
+    html += '</a>';
+    html += '</div>';
+    html += '</div>';
+    html += '<div class="cardFooter">';
+    html += "<div class='cardText'>";
+    html += escapeHTML(plugin.name);
+    html += '</div>';
+    const installedPlugin = installedPlugins.find(installed => installed.Id === plugin.guid);
+    html += "<div class='cardText cardText-secondary'>";
+    html += installedPlugin ? globalize.translate('LabelVersionInstalled', installedPlugin.Version) : '&nbsp;';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    return html;
+}
+
+export default function (view) {
+    view.addEventListener('viewshow', function () {
+        reloadList(this);
+    });
+}

src/apps/dashboard/controllers/plugins/installed/index.html

@@ -0,0 +1,13 @@
+<div id="pluginsPage" data-role="page" class="page type-interior pluginConfigurationPage fullWidthContent" data-title="${TabPlugins}">
+    <div>
+        <div class="content-primary">
+            <div class="sectionTitleContainer flex align-items-center">
+                <h2 class="sectionTitle">${TabMyPlugins}</h2>
+            </div>
+            <div class="inputContainer">
+                <input id="txtSearchPlugins" name="txtSearchPlugins" type="text" is="emby-input" label="${Search}" />
+            </div>
+            <div class="installedPlugins"></div>
+        </div>
+    </div>
+</div>

src/apps/dashboard/controllers/plugins/installed/index.js

@@ -0,0 +1,251 @@
+import loading from 'components/loading/loading';
+import dom from 'scripts/dom';
+import globalize from 'lib/globalize';
+import 'components/cardbuilder/card.scss';
+import 'elements/emby-button/emby-button';
+import Dashboard, { pageIdOn } from 'utils/dashboard';
+import confirm from 'components/confirm/confirm';
+import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
+
+function deletePlugin(page, uniqueid, version, name) {
+    const msg = globalize.translate('UninstallPluginConfirmation', name);
+
+    confirm({
+        title: globalize.translate('HeaderUninstallPlugin'),
+        text: msg,
+        primary: 'delete',
+        confirmText: globalize.translate('HeaderUninstallPlugin')
+    }).then(function () {
+        loading.show();
+        ApiClient.uninstallPluginByVersion(uniqueid, version).then(function () {
+            reloadList(page);
+        });
+    });
+}
+
+function enablePlugin(page, uniqueid, version) {
+    loading.show();
+    ApiClient.enablePlugin(uniqueid, version).then(function () {
+        reloadList(page);
+    });
+}
+
+function disablePlugin(page, uniqueid, version) {
+    loading.show();
+    ApiClient.disablePlugin(uniqueid, version).then(function () {
+        reloadList(page);
+    });
+}
+
+function showNoConfigurationMessage() {
+    Dashboard.alert({
+        message: globalize.translate('MessageNoPluginConfiguration')
+    });
+}
+
+function showConnectMessage() {
+    Dashboard.alert({
+        message: globalize.translate('MessagePluginConfigurationRequiresLocalAccess')
+    });
+}
+
+function getPluginCardHtml(plugin, pluginConfigurationPages) {
+    const configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
+        return pluginConfigurationPage.PluginId == plugin.Id;
+    })[0];
+
+    const configPageUrl = configPage ? Dashboard.getPluginUrl(configPage.Name) : null;
+    let html = '';
+
+    html += `<div data-id='${plugin.Id}' data-version='${plugin.Version}' data-name='${plugin.Name}' data-removable='${plugin.CanUninstall}' data-status='${plugin.Status}' class='card backdropCard'>`;
+    html += '<div class="cardBox visualCardBox">';
+    html += '<div class="cardScalable">';
+    html += '<div class="cardPadder cardPadder-backdrop"></div>';
+    html += '<div class="cardContent">';
+    if (configPageUrl) {
+        html += `<a class="cardImageContainer" is="emby-linkbutton" style="margin:0;padding:0" href="${configPageUrl}">`;
+    } else {
+        html += '<div class="cardImageContainer noConfigPluginCard noHoverEffect emby-button" style="margin:0;padding:0">';
+    }
+
+    if (plugin.HasImage) {
+        const imageUrl = ApiClient.getUrl(`/Plugins/${plugin.Id}/${plugin.Version}/Image`);
+        html += `<img src="${imageUrl}" style="width:100%" />`;
+    } else {
+        html += `<div class="cardImage flex align-items-center justify-content-center ${getDefaultBackgroundClass()}">`;
+        html += '<span class="cardImageIcon material-icons extension" aria-hidden="true"></span>';
+        html += '</div>';
+    }
+    html += configPageUrl ? '</a>' : '</div>';
+    html += '</div>';
+    html += '</div>';
+    html += '<div class="cardFooter">';
+
+    if (configPage || plugin.CanUninstall) {
+        if (globalize.getIsRTL()) {
+            html += '<div style="text-align:left; float:left;padding-top:5px;">';
+        } else {
+            html += '<div style="text-align:right; float:right;padding-top:5px;">';
+        }
+        html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
+        html += '</div>';
+    }
+
+    html += '<div class="cardText">';
+    html += `${plugin.Name}<span class='cardText cardText-secondary'>${plugin.Version}</span>`;
+    html += '</div>';
+    html += `<div class="cardText">${globalize.translate('LabelStatus')} ${plugin.Status}</div>`;
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    return html;
+}
+
+function renderPlugins(page, plugins) {
+    ApiClient.getJSON(ApiClient.getUrl('web/configurationpages') + '?pageType=PluginConfiguration').then(function (configPages) {
+        populateList(page, plugins, configPages);
+    });
+}
+
+function populateList(page, plugins, pluginConfigurationPages) {
+    plugins = plugins.sort(function (plugin1, plugin2) {
+        if (plugin1.Name > plugin2.Name) {
+            return 1;
+        }
+        return -1;
+    });
+
+    let html = plugins.map(function (p) {
+        return getPluginCardHtml(p, pluginConfigurationPages);
+    }).join('');
+
+    const installedPluginsElement = page.querySelector('.installedPlugins');
+    installedPluginsElement.removeEventListener('click', onInstalledPluginsClick);
+    installedPluginsElement.addEventListener('click', onInstalledPluginsClick);
+
+    if (plugins.length) {
+        installedPluginsElement.classList.add('itemsContainer');
+        installedPluginsElement.classList.add('vertical-wrap');
+    } else {
+        html += '<div class="centerMessage">';
+        html += '<h1>' + globalize.translate('MessageNoPluginsInstalled') + '</h1>';
+        html += '<p><a is="emby-linkbutton" class="button-link" href="#/dashboard/plugins/catalog">';
+        html += globalize.translate('MessageBrowsePluginCatalog');
+        html += '</a></p>';
+        html += '</div>';
+    }
+
+    // add search box listener
+    const searchBar = page.querySelector('#txtSearchPlugins');
+    if (searchBar) {
+        searchBar.addEventListener('input', () => onFilterType(page, searchBar));
+    }
+
+    installedPluginsElement.innerHTML = html;
+    loading.hide();
+}
+
+function showPluginMenu(page, elem) {
+    const card = dom.parentWithClass(elem, 'card');
+    const id = card.getAttribute('data-id');
+    const name = card.getAttribute('data-name');
+    const removable = card.getAttribute('data-removable');
+    const configHref = card.querySelector('.cardImageContainer').getAttribute('href');
+    const status = card.getAttribute('data-status');
+    const version = card.getAttribute('data-version');
+    const menuItems = [];
+
+    if (configHref) {
+        menuItems.push({
+            name: globalize.translate('Settings'),
+            id: 'open',
+            icon: 'mode_edit'
+        });
+    }
+
+    if (removable === 'true') {
+        if (status === 'Disabled') {
+            menuItems.push({
+                name: globalize.translate('EnablePlugin'),
+                id: 'enable',
+                icon: 'check_circle_outline'
+            });
+        }
+
+        if (status === 'Active') {
+            menuItems.push({
+                name: globalize.translate('DisablePlugin'),
+                id: 'disable',
+                icon: 'do_not_disturb'
+            });
+        }
+
+        menuItems.push({
+            name: globalize.translate('ButtonUninstall'),
+            id: 'delete',
+            icon: 'delete'
+        });
+    }
+
+    import('components/actionSheet/actionSheet').then((actionsheet) => {
+        actionsheet.show({
+            items: menuItems,
+            positionTo: elem,
+            callback: function (resultId) {
+                switch (resultId) {
+                    case 'open':
+                        Dashboard.navigate(configHref);
+                        break;
+                    case 'delete':
+                        deletePlugin(page, id, version, name);
+                        break;
+                    case 'enable':
+                        enablePlugin(page, id, version);
+                        break;
+                    case 'disable':
+                        disablePlugin(page, id, version);
+                        break;
+                }
+            }
+        });
+    });
+}
+
+function reloadList(page) {
+    loading.show();
+    ApiClient.getInstalledPlugins().then(function (plugins) {
+        renderPlugins(page, plugins);
+    });
+}
+
+function onInstalledPluginsClick(e) {
+    if (dom.parentWithClass(e.target, 'noConfigPluginCard')) {
+        showNoConfigurationMessage();
+    } else if (dom.parentWithClass(e.target, 'connectModePluginCard')) {
+        showConnectMessage();
+    } else {
+        const btnCardMenu = dom.parentWithClass(e.target, 'btnCardMenu');
+        if (btnCardMenu) {
+            showPluginMenu(dom.parentWithClass(btnCardMenu, 'page'), btnCardMenu);
+        }
+    }
+}
+
+function onFilterType(page, searchBar) {
+    const filter = searchBar.value.toLowerCase();
+    for (const card of page.querySelectorAll('.card')) {
+        if (filter && filter != '' && !card.textContent.toLowerCase().includes(filter)) {
+            card.style.display = 'none';
+        } else {
+            card.style.display = 'unset';
+        }
+    }
+}
+
+pageIdOn('pageshow', 'pluginsPage', function () {
+    reloadList(this);
+});
+
+window.PluginsPage = {
+    renderPlugins: renderPlugins
+};

src/apps/dashboard/controllers/plugins/repositories/index.html

@@ -0,0 +1,19 @@
+<div id="repositories" data-role="page" class="page type-interior fullWidthContent" data-title="${TabRepositories}">
+    <div>
+        <div class="content-primary">
+            <div class="sectionTitleContainer flex align-items-center">
+                <h2 class="sectionTitle">${TabRepositories}</h2>
+                <button is="emby-button" type="button" class="fab btnNewRepository submit" style="margin-left:1em;" title="${Add}">
+                    <span class="material-icons add" aria-hidden="true"></span>
+                </button>
+            </div>
+
+            <div id="repositories"></div>
+
+            <div id="none" class="noItemsMessage centerMessage hide">
+                <h1>${MessageNoRepositories}</h1>
+                <p>${MessageAddRepository}</p>
+            </div>
+        </div>
+    </div>
+</div>

src/apps/dashboard/controllers/plugins/repositories/index.js

@@ -0,0 +1,190 @@
+import loading from 'components/loading/loading';
+import globalize from 'lib/globalize';
+import dialogHelper from 'components/dialogHelper/dialogHelper';
+import confirm from 'components/confirm/confirm';
+
+import 'elements/emby-button/emby-button';
+import 'elements/emby-checkbox/emby-checkbox';
+import 'elements/emby-select/emby-select';
+
+import 'components/formdialog.scss';
+import 'components/listview/listview.scss';
+
+let repositories = [];
+
+function reloadList(page) {
+    loading.show();
+    ApiClient.getJSON(ApiClient.getUrl('Repositories')).then(list => {
+        repositories = list;
+        populateList({
+            listElement: page.querySelector('#repositories'),
+            noneElement: page.querySelector('#none'),
+            repositories: repositories
+        });
+    }).catch(e => {
+        console.error('error loading repositories', e);
+        page.querySelector('#none').classList.remove('hide');
+        loading.hide();
+    });
+}
+
+function saveList(page) {
+    loading.show();
+    ApiClient.ajax({
+        type: 'POST',
+        url: ApiClient.getUrl('Repositories'),
+        data: JSON.stringify(repositories),
+        contentType: 'application/json'
+    }).then(() => {
+        reloadList(page);
+    }).catch(e => {
+        console.error('error saving repositories', e);
+        loading.hide();
+    });
+}
+
+function populateList(options) {
+    const paperList = document.createElement('div');
+    paperList.className = 'paperList';
+
+    options.repositories.forEach(repo => {
+        paperList.appendChild(getRepositoryElement(repo));
+    });
+
+    if (!options.repositories.length) {
+        options.noneElement.classList.remove('hide');
+    } else {
+        options.noneElement.classList.add('hide');
+    }
+
+    options.listElement.innerHTML = '';
+    options.listElement.appendChild(paperList);
+    loading.hide();
+}
+
+function getRepositoryElement(repository) {
+    const listItem = document.createElement('div');
+    listItem.className = 'listItem listItem-border';
+
+    const repoLink = document.createElement('a', 'emby-linkbutton');
+    repoLink.classList.add('clearLink', 'listItemIconContainer');
+    repoLink.style.margin = '0';
+    repoLink.style.padding = '0';
+    repoLink.rel = 'noopener noreferrer';
+    repoLink.target = '_blank';
+    repoLink.href = repository.Url;
+    repoLink.innerHTML = '<span class="material-icons listItemIcon open_in_new" aria-hidden="true"></span>';
+    listItem.appendChild(repoLink);
+
+    const body = document.createElement('div');
+    body.className = 'listItemBody two-line';
+
+    const name = document.createElement('h3');
+    name.className = 'listItemBodyText';
+    name.innerText = repository.Name;
+    body.appendChild(name);
+
+    const url = document.createElement('div');
+    url.className = 'listItemBodyText secondary';
+    url.innerText = repository.Url;
+    body.appendChild(url);
+
+    listItem.appendChild(body);
+
+    const button = document.createElement('button', 'paper-icon-button-light');
+    button.type = 'button';
+    button.classList.add('btnDelete');
+    button.id = repository.Url;
+    button.title = globalize.translate('Delete');
+    button.innerHTML = '<span class="material-icons delete" aria-hidden="true"></span>';
+    listItem.appendChild(button);
+
+    return listItem;
+}
+
+export default function(view) {
+    view.addEventListener('viewshow', function () {
+        reloadList(this);
+
+        const save = this;
+        $('#repositories', view).on('click', '.btnDelete', function() {
+            const button = this;
+            repositories = repositories.filter(function (r) {
+                return r.Url !== button.id;
+            });
+
+            saveList(save);
+        });
+    });
+
+    view.querySelector('.btnNewRepository').addEventListener('click', () => {
+        const dialog = dialogHelper.createDialog({
+            scrollY: false,
+            size: 'large',
+            modal: false,
+            removeOnClose: true
+        });
+
+        let html = '';
+
+        html += '<div class="formDialogHeader">';
+        html += `<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${globalize.translate('ButtonBack')}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>`;
+        html += `<h3 class="formDialogHeaderTitle">${globalize.translate('HeaderNewRepository')}</h3>`;
+        html += '</div>';
+        html += '<form class="newPluginForm" style="margin:4em">';
+        html += '<div class="inputContainer">';
+        html += `<input is="emby-input" id="txtRepositoryName" label="${globalize.translate('LabelRepositoryName')}" type="text" required />`;
+        html += `<div class="fieldDescription">${globalize.translate('LabelRepositoryNameHelp')}</div>`;
+        html += '</div>';
+        html += '<div class="inputContainer">';
+        html += `<input is="emby-input" id="txtRepositoryUrl" label="${globalize.translate('LabelRepositoryUrl')}" type="url" required />`;
+        html += `<div class="fieldDescription">${globalize.translate('LabelRepositoryUrlHelp')}</div>`;
+        html += '</div>';
+        html += `<button is="emby-button" type="submit" class="raised button-submit block"><span>${globalize.translate('Save')}</span></button>`;
+        html += '</div>';
+        html += '</form>';
+
+        dialog.innerHTML = html;
+        dialog.querySelector('.btnCancel').addEventListener('click', () => {
+            dialogHelper.close(dialog);
+        });
+
+        dialog.querySelector('.newPluginForm').addEventListener('submit', e => {
+            e.preventDefault();
+
+            const repositoryUrl = dialog.querySelector('#txtRepositoryUrl').value.toLowerCase();
+
+            const alertCallback = function () {
+                repositories.push({
+                    Name: dialog.querySelector('#txtRepositoryName').value,
+                    Url: dialog.querySelector('#txtRepositoryUrl').value,
+                    Enabled: true
+                });
+                saveList(view);
+                dialogHelper.close(dialog);
+            };
+
+            // Check the repository URL for the official Jellyfin repository domain, or
+            // present the warning for 3rd party plugins.
+            if (!repositoryUrl.startsWith('https://repo.jellyfin.org/')) {
+                let msg = globalize.translate('MessageRepositoryInstallDisclaimer');
+                msg += '<br/>';
+                msg += '<br/>';
+                msg += globalize.translate('PleaseConfirmRepositoryInstallation');
+
+                confirm(msg, globalize.translate('HeaderConfirmRepositoryInstallation')).then(function () {
+                    alertCallback();
+                }).catch(() => {
+                    console.debug('repository not installed');
+                    dialogHelper.close(dialog);
+                });
+            } else {
+                alertCallback();
+            }
+
+            return false;
+        });
+
+        dialogHelper.open(dialog);
+    });
+}