Migrate add, installed, available plugin pages to ES6

package.json

@@ -209,6 +209,9 @@
           "src/controllers/dashboard/notifications/notification.js",
           "src/controllers/dashboard/notifications/notifications.js",
           "src/controllers/dashboard/playback.js",
+          "src/controllers/dashboard/plugins/add/index.js",
+          "src/controllers/dashboard/plugins/installed/index.js",
+          "src/controllers/dashboard/plugins/available/index.js",
           "src/controllers/dashboard/plugins/repositories/index.js",
           "src/controllers/dashboard/scheduledtasks/scheduledtask.js",
           "src/controllers/dashboard/scheduledtasks/scheduledtasks.js",

src/controllers/dashboard/plugins/add/index.js

@@ -1,14 +1,14 @@
-define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'emby-button'], function ($, loading, libraryMenu, globalize, connectionManager) {
+import $ from 'jQuery';
-    'use strict';
+import loading from 'loading';
-
+import globalize from 'globalize';
-    loading = loading.default || loading;
+import 'emby-button';
 
 function populateHistory(packageInfo, page) {
-        var html = '';
+    let html = '';
-        var length = Math.min(packageInfo.versions.length, 10);
+    const length = Math.min(packageInfo.versions.length, 10);
 
-        for (var i = 0; i < length; i++) {
+    for (let i = 0; i < length; i++) {
-            var version = packageInfo.versions[i];
+        let version = packageInfo.versions[i];
         html += '<h2 style="margin:.5em 0;">' + version.version + '</h2>';
         html += '<div style="margin-bottom:1.5em;">' + version.changelog + '</div>';
     }
@@ -17,27 +17,27 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'e
 }
 
 function populateVersions(packageInfo, page, installedPlugin) {
-        var html = '';
+    let html = '';
 
-        for (var i = 0; i < packageInfo.versions.length; i++) {
+    for (let i = 0; i < packageInfo.versions.length; i++) {
-            var version = packageInfo.versions[i];
+        const version = packageInfo.versions[i];
         html += '<option value="' + version.version + '">' + version.version + '</option>';
     }
 
-        var selectmenu = $('#selectVersion', page).html(html);
+    const selectmenu = $('#selectVersion', page).html(html);
 
     if (!installedPlugin) {
         $('#pCurrentVersion', page).hide().html('');
     }
 
-        var packageVersion = packageInfo.versions[0];
+    const packageVersion = packageInfo.versions[0];
     if (packageVersion) {
         selectmenu.val(packageVersion.version);
     }
 }
 
 function renderPackage(pkg, installedPlugins, page) {
-        var installedPlugin = installedPlugins.filter(function (ip) {
+    const installedPlugin = installedPlugins.filter(function (ip) {
         return ip.Name == pkg.name;
     })[0];
 
@@ -58,7 +58,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'e
     $('#developer', page).html(pkg.owner);
 
     if (installedPlugin) {
-            var currentVersionText = globalize.translate('MessageYouHaveVersionInstalled', '<strong>' + installedPlugin.Version + '</strong>');
+        const currentVersionText = globalize.translate('MessageYouHaveVersionInstalled', '<strong>' + installedPlugin.Version + '</strong>');
         $('#pCurrentVersion', page).show().html(currentVersionText);
     } else {
         $('#pCurrentVersion', page).hide().html('');
@@ -68,34 +68,36 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'e
 }
 
 function alertText(options) {
-        require(['alert'], function ({default: alert}) {
+    import('alert').then(({default: alert}) => {
         alert(options);
     });
 }
 
 function performInstallation(page, name, guid, version) {
-        var developer = $('#developer', page).html().toLowerCase();
+    const developer = $('#developer', page).html().toLowerCase();
 
-        var alertCallback = function () {
+    const alertCallback = function () {
         loading.show();
         page.querySelector('#btnInstall').disabled = true;
-            ApiClient.installPlugin(name, guid, version).then(function () {
+        ApiClient.installPlugin(name, guid, version).then(() => {
             loading.hide();
             alertText(globalize.translate('MessagePluginInstalled'));
+        }).catch(() => {
+            alertText(globalize.translate('MessagePluginIntallError'));
         });
     };
 
     if (developer !== 'jellyfin') {
         loading.hide();
-            var msg = globalize.translate('MessagePluginInstallDisclaimer');
+        let msg = globalize.translate('MessagePluginInstallDisclaimer');
         msg += '<br/>';
         msg += '<br/>';
         msg += globalize.translate('PleaseConfirmPluginInstallation');
 
-            require(['confirm'], function (confirm) {
+        import('confirm').then(({default: confirm}) => {
             confirm.default(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () {
                 alertCallback();
-                }, function () {
+            }).catch(() => {
                 console.debug('plugin not installed');
             });
         });
@@ -104,40 +106,43 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'e
     }
 }
 
-    return function (view, params) {
+export default function(view, params) {
     $('.addPluginForm', view).on('submit', function () {
         loading.show();
-            var page = $(this).parents('#addPluginPage')[0];
+        const page = $(this).parents('#addPluginPage')[0];
-            var name = params.name;
+        const name = params.name;
-            var guid = params.guid;
+        const guid = params.guid;
         ApiClient.getInstalledPlugins().then(function (plugins) {
-                var installedPlugin = plugins.filter(function (plugin) {
+            const installedPlugin = plugins.filter(function (plugin) {
                 return plugin.Name == name;
             })[0];
 
-                var version = $('#selectVersion', page).val();
+            const version = $('#selectVersion', page).val();
-                if (installedPlugin && installedPlugin.Version === version) {
+            if (installedPlugin) {
+                if (installedPlugin.Version === version) {
                     loading.hide();
                     Dashboard.alert({
                         message: globalize.translate('MessageAlreadyInstalled'),
                         title: globalize.translate('HeaderPluginInstallation')
                     });
+                }
             } else {
                 performInstallation(page, name, guid, version);
             }
+        }).catch(() => {
+            alertText(globalize.translate('MessageGetInstalledPluginsError'));
         });
         return false;
     });
     view.addEventListener('viewshow', function () {
-            var page = this;
+        const page = this;
         loading.show();
-            var name = params.name;
+        const name = params.name;
-            var guid = params.guid;
+        const guid = params.guid;
-            var promise1 = ApiClient.getPackageInfo(name, guid);
+        const promise1 = ApiClient.getPackageInfo(name, guid);
-            var promise2 = ApiClient.getInstalledPlugins();
+        const promise2 = ApiClient.getInstalledPlugins();
         Promise.all([promise1, promise2]).then(function (responses) {
             renderPackage(responses[0], responses[1], page);
         });
     });
-    };
+}
-});

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

@@ -1,12 +1,15 @@
-define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby-checkbox', 'emby-select'], function (loading, libraryMenu, globalize) {
+import loading from 'loading';
-    'use strict';
+import libraryMenu from 'libraryMenu';
-
+import globalize from 'globalize';
-    loading = loading.default || loading;
+import 'cardStyle';
+import 'emby-button';
+import 'emby-checkbox';
+import 'emby-select';
 
 function reloadList(page) {
     loading.show();
-        var promise1 = ApiClient.getAvailablePlugins();
+    const promise1 = ApiClient.getAvailablePlugins();
-        var promise2 = ApiClient.getInstalledPlugins();
+    const promise2 = ApiClient.getInstalledPlugins();
     Promise.all([promise1, promise2]).then(function (responses) {
         populateList({
             catalogElement: page.querySelector('#pluginTiles'),
@@ -19,13 +22,13 @@ define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby
 
 function getHeaderText(category) {
     category = category.replace(' ', '');
-        if (category === 'Channel') {
+    if ('Channel' === category) {
         category = 'Channels';
-        } else if (category === 'Theme') {
+    } else if ('Theme' === category) {
         category = 'Themes';
-        } else if (category === 'LiveTV') {
+    } else if ('LiveTV' === category) {
         category = 'HeaderLiveTV';
-        } else if (category === 'ScreenSaver') {
+    } else if ('ScreenSaver' === category) {
         category = 'HeaderScreenSavers';
     }
 
@@ -33,8 +36,8 @@ define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby
 }
 
 function populateList(options) {
-        var availablePlugins = options.availablePlugins;
+    const availablePlugins = options.availablePlugins;
-        var installedPlugins = options.installedPlugins;
+    const installedPlugins = options.installedPlugins;
 
     availablePlugins.forEach(function (plugin, index, array) {
         plugin.category = plugin.category || 'General';
@@ -56,12 +59,12 @@ define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby
         return 0;
     });
 
-        var currentCategory = null;
+    let currentCategory = null;
-        var html = '';
+    let html = '';
 
-        for (var i = 0; i < availablePlugins.length; i++) {
+    for (let i = 0; i < availablePlugins.length; i++) {
-            var plugin = availablePlugins[i];
+        const plugin = availablePlugins[i];
-            var category = plugin.categoryDisplayName;
+        const category = plugin.categoryDisplayName;
         if (category != currentCategory) {
             if (currentCategory) {
                 html += '</div>';
@@ -86,14 +89,14 @@ define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby
 }
 
 function getPluginHtml(plugin, options, installedPlugins) {
-        var html = '';
+    let html = '';
-        var href = plugin.externalUrl ? plugin.externalUrl : 'addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid;
+    let href = plugin.externalUrl ? plugin.externalUrl : 'addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid;
 
     if (options.context) {
         href += '&context=' + options.context;
     }
 
-        var target = plugin.externalUrl ? ' target="_blank"' : '';
+    const target = plugin.externalUrl ? ' target="_blank"' : '';
     html += "<div class='card backdropCard'>";
     html += '<div class="cardBox visualCardBox">';
     html += '<div class="cardScalable visualCardBox-cardScalable">';
@@ -106,7 +109,7 @@ define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby
     html += "<div class='cardText'>";
     html += plugin.name;
     html += '</div>';
-        var installedPlugin = installedPlugins.filter(function (ip) {
+    const installedPlugin = installedPlugins.filter(function (ip) {
         return ip.Id == plugin.guid;
     })[0];
     html += "<div class='cardText cardText-secondary'>";
@@ -130,14 +133,9 @@ define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby
     }];
 }
 
-    window.PluginCatalog = {
+export default function (view) {
-        renderCatalog: populateList
-    };
-
-    return function (view, params) {
     view.addEventListener('viewshow', function () {
         libraryMenu.setTabs('plugins', 1, getTabs);
         reloadList(this);
     });
-    };
+}
-});

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

@@ -1,17 +1,19 @@
-define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'], function (loading, libraryMenu, dom, globalize) {
+import loading from 'loading';
-    'use strict';
+import libraryMenu from 'libraryMenu';
-
+import dom from 'dom';
-    loading = loading.default || loading;
+import globalize from 'globalize';
+import 'cardStyle';
+import 'emby-button';
 
 function deletePlugin(page, uniqueid, name) {
-        var msg = globalize.translate('UninstallPluginConfirmation', name);
+    const msg = globalize.translate('UninstallPluginConfirmation', name);
 
-        require(['confirm'], function (confirm) {
+    import('confirm').then(({default: confirm}) => {
         confirm.default({
-                title: globalize.translate('HeaderUninstallPlugin'),
+            title: globalize.translate('UninstallPluginHeader'),
             text: msg,
             primary: 'delete',
-                confirmText: globalize.translate('HeaderUninstallPlugin')
+            confirmText: globalize.translate('UninstallPluginHeader')
         }).then(function () {
             loading.show();
             ApiClient.uninstallPlugin(uniqueid).then(function () {
@@ -23,7 +25,7 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
 
 function showNoConfigurationMessage() {
     Dashboard.alert({
-            message: globalize.translate('MessageNoPluginConfiguration')
+        message: globalize.translate('NoPluginConfigurationMessage')
     });
 }
 
@@ -34,11 +36,11 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
 }
 
 function getPluginCardHtml(plugin, pluginConfigurationPages) {
-        var configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
+    const configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
         return pluginConfigurationPage.PluginId == plugin.Id;
     })[0];
-        var configPageUrl = configPage ? Dashboard.getConfigurationPageUrl(configPage.Name) : null;
+    const configPageUrl = configPage ? Dashboard.getConfigurationPageUrl(configPage.Name) : null;
-        var html = '';
+    let html = '';
     html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' data-removable='" + plugin.CanUninstall + "' class='card backdropCard'>";
     html += '<div class="cardBox visualCardBox">';
     html += '<div class="cardScalable">';
@@ -82,11 +84,11 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
         return -1;
     });
 
-        var html = plugins.map(function (p) {
+    let html = plugins.map(function (p) {
         return getPluginCardHtml(p, pluginConfigurationPages);
     }).join('');
 
-        var installedPluginsElement = page.querySelector('.installedPlugins');
+    const installedPluginsElement = page.querySelector('.installedPlugins');
     installedPluginsElement.removeEventListener('click', onInstalledPluginsClick);
     installedPluginsElement.addEventListener('click', onInstalledPluginsClick);
 
@@ -97,7 +99,7 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
         html += '<div class="centerMessage">';
         html += '<h1>' + globalize.translate('MessageNoPluginsInstalled') + '</h1>';
         html += '<p><a is="emby-linkbutton" class="button-link" href="availableplugins.html">';
-            html += globalize.translate('MessageBrowsePluginCatalog');
+        html += globalize.translate('BrowsePluginCatalogMessage');
         html += '</a></p>';
         html += '</div>';
     }
@@ -107,12 +109,12 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
 }
 
 function showPluginMenu(page, elem) {
-        var card = dom.parentWithClass(elem, 'card');
+    const card = dom.parentWithClass(elem, 'card');
-        var id = card.getAttribute('data-id');
+    const id = card.getAttribute('data-id');
-        var name = card.getAttribute('data-name');
+    const name = card.getAttribute('data-name');
-        var removable = card.getAttribute('data-removable');
+    const removable = card.getAttribute('data-removable');
-        var configHref = card.querySelector('.cardContent').getAttribute('href');
+    const configHref = card.querySelector('.cardContent').getAttribute('href');
-        var menuItems = [];
+    const menuItems = [];
 
     if (configHref) {
         menuItems.push({
@@ -130,7 +132,7 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
         });
     }
 
-        require(['actionsheet'], function (actionsheet) {
+    import('actionsheet').then(({default: actionsheet}) => {
         actionsheet.show({
             items: menuItems,
             positionTo: elem,
@@ -174,7 +176,7 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
     } else if (dom.parentWithClass(e.target, 'connectModePluginCard')) {
         showConnectMessage();
     } else {
-            var btnCardMenu = dom.parentWithClass(e.target, 'btnCardMenu');
+        const btnCardMenu = dom.parentWithClass(e.target, 'btnCardMenu');
         if (btnCardMenu) {
             showPluginMenu(dom.parentWithClass(btnCardMenu, 'page'), btnCardMenu);
         }
@@ -189,4 +191,3 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
 window.PluginsPage = {
     renderPlugins: renderPlugins
 };
-});

src/strings/en-us.json

@@ -1282,6 +1282,8 @@
     "PleaseRestartServerName": "Please restart Jellyfin Server - {0}.",
     "PleaseSelectTwoItems": "Please select at least two items.",
     "MessagePluginInstalled": "The plugin has been successfully installed. Jellyfin Server will need to be restarted for changes to take effect.",
+    "MessagePluginIntallError": "An error occured while installing the plugin.",
+    "MessageGetInstalledPluginsError": "An error occured while getting the list of currently installed plugins.",
     "PreferEmbeddedTitlesOverFileNames": "Prefer embedded titles over filenames",
     "PreferEmbeddedTitlesOverFileNamesHelp": "This determines the default display title when no internet metadata or local metadata is available.",
     "PreferEmbeddedEpisodeInfosOverFileNamesHelp": "This uses the episode information from the embedded metadata if available.",