Merge branch 'master' into migrate-to-ES6-46

package.json

@@ -160,7 +160,11 @@
           "src/components/refreshdialog/refreshdialog.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
+          "src/components/slideshow/slideshow.js",
+          "src/components/sortmenu/sortmenu.js",
           "src/plugins/htmlVideoPlayer/plugin.js",
+          "src/plugins/logoScreensaver/plugin.js",
+          "src/plugins/playAccessValidation/plugin.js",
           "src/components/search/searchfields.js",
           "src/components/search/searchresults.js",
           "src/components/settingshelper.js",
@@ -203,13 +207,16 @@
           "src/controllers/music/musicplaylists.js",
           "src/controllers/music/musicrecommended.js",
           "src/controllers/music/songs.js",
-          "src/controllers/dashboard/mediaLibrary.js",
+          "src/controllers/dashboard/library.js",
           "src/controllers/dashboard/metadataImages.js",
           "src/controllers/dashboard/metadatanfo.js",
           "src/controllers/dashboard/networking.js",
           "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/components/sortmenu/sortmenu.js

@@ -1,50 +1,51 @@
-define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'globalize', 'userSettings', 'emby-select', 'paper-icon-button-light', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dom, focusManager, dialogHelper, loading, layoutManager, connectionManager, globalize, userSettings) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import layoutManager from 'layoutManager';
+import globalize from 'globalize';
+import * as userSettings from 'userSettings';
+import 'emby-select';
+import 'paper-icon-button-light';
+import 'material-icons';
+import 'css!./../formdialog';
+import 'emby-button';
+import 'flexStyles';
 
-    layoutManager = layoutManager.default || layoutManager;
+function onSubmit(e) {
-    focusManager = focusManager.default || focusManager;
+    e.preventDefault();
+    return false;
+}
 
-    function onSubmit(e) {
+function initEditor(context, settings) {
-        e.preventDefault();
+    context.querySelector('form').addEventListener('submit', onSubmit);
-        return false;
-    }
 
-    function initEditor(context, settings) {
+    context.querySelector('.selectSortOrder').value = settings.sortOrder;
-        context.querySelector('form').addEventListener('submit', onSubmit);
+    context.querySelector('.selectSortBy').value = settings.sortBy;
+}
 
-        context.querySelector('.selectSortOrder').value = settings.sortOrder;
+function centerFocus(elem, horiz, on) {
-        context.querySelector('.selectSortBy').value = settings.sortBy;
+    import('scrollHelper').then(({default: scrollHelper}) => {
-    }
+        const fn = on ? 'on' : 'off';
+        scrollHelper.centerFocus[fn](elem, horiz);
+    });
+}
 
-    function centerFocus(elem, horiz, on) {
+function fillSortBy(context, options) {
-        require(['scrollHelper'], function (scrollHelper) {
+    const selectSortBy = context.querySelector('.selectSortBy');
-            scrollHelper = scrollHelper.default || scrollHelper;
-            var fn = on ? 'on' : 'off';
-            scrollHelper.centerFocus[fn](elem, horiz);
-        });
-    }
 
-    function fillSortBy(context, options) {
+    selectSortBy.innerHTML = options.map(function (o) {
-        var selectSortBy = context.querySelector('.selectSortBy');
+        return '<option value="' + o.value + '">' + o.name + '</option>';
+    }).join('');
+}
 
-        selectSortBy.innerHTML = options.map(function (o) {
+function saveValues(context, settingsKey) {
-            return '<option value="' + o.value + '">' + o.name + '</option>';
+    userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
-        }).join('');
+    userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
-    }
+}
 
-    function saveValues(context, settings, settingsKey) {
+class SortMenu {
-        userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
+    show(options) {
-        userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
-    }
-
-    function SortMenu() {
-
-    }
-
-    SortMenu.prototype.show = function (options) {
         return new Promise(function (resolve, reject) {
-            require(['text!./sortmenu.template.html'], function (template) {
+            import('text!./sortmenu.template.html').then(({default: template}) => {
-                var dialogOptions = {
+                const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
                 };
@@ -55,11 +56,11 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                     dialogOptions.size = 'small';
                 }
 
-                var dlg = dialogHelper.createDialog(dialogOptions);
+                const dlg = dialogHelper.createDialog(dialogOptions);
 
                 dlg.classList.add('formDialog');
 
-                var html = '';
+                let html = '';
 
                 html += '<div class="formDialogHeader">';
                 html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
@@ -82,7 +83,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                     centerFocus(dlg.querySelector('.formDialogContent'), false, true);
                 }
 
-                var submitted;
+                let submitted;
 
                 dlg.querySelector('form').addEventListener('change', function () {
                     submitted = true;
@@ -94,7 +95,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                     }
 
                     if (submitted) {
-                        saveValues(dlg, options.settings, options.settingsKey);
+                        saveValues(dlg, options.settingsKey);
                         resolve();
                         return;
                     }
@@ -103,7 +104,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                 });
             });
         });
-    };
+    }
+}
 
-    return SortMenu;
+export default SortMenu;
-});

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

@@ -1,143 +1,146 @@
-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';
+import 'emby-button';
 
-    loading = loading.default || loading;
+function populateHistory(packageInfo, page) {
+    let html = '';
+    const length = Math.min(packageInfo.versions.length, 10);
 
-    function populateHistory(packageInfo, page) {
+    for (let i = 0; i < length; i++) {
-        var html = '';
+        let version = packageInfo.versions[i];
-        var length = Math.min(packageInfo.versions.length, 10);
+        html += '<h2 style="margin:.5em 0;">' + version.version + '</h2>';
-
+        html += '<div style="margin-bottom:1.5em;">' + version.changelog + '</div>';
-        for (var i = 0; i < length; i++) {
-            var version = packageInfo.versions[i];
-            html += '<h2 style="margin:.5em 0;">' + version.version + '</h2>';
-            html += '<div style="margin-bottom:1.5em;">' + version.changelog + '</div>';
-        }
-
-        $('#revisionHistory', page).html(html);
     }
 
-    function populateVersions(packageInfo, page, installedPlugin) {
+    $('#revisionHistory', page).html(html);
-        var html = '';
+}
 
-        for (var i = 0; i < packageInfo.versions.length; i++) {
+function populateVersions(packageInfo, page, installedPlugin) {
-            var version = packageInfo.versions[i];
+    let html = '';
-            html += '<option value="' + version.version + '">' + version.version + '</option>';
-        }
 
-        var selectmenu = $('#selectVersion', page).html(html);
+    for (let i = 0; i < packageInfo.versions.length; i++) {
-
+        const version = packageInfo.versions[i];
-        if (!installedPlugin) {
+        html += '<option value="' + version.version + '">' + version.version + '</option>';
-            $('#pCurrentVersion', page).hide().html('');
-        }
-
-        var packageVersion = packageInfo.versions[0];
-        if (packageVersion) {
-            selectmenu.val(packageVersion.version);
-        }
     }
 
-    function renderPackage(pkg, installedPlugins, page) {
+    const selectmenu = $('#selectVersion', page).html(html);
-        var installedPlugin = installedPlugins.filter(function (ip) {
-            return ip.Name == pkg.name;
-        })[0];
 
-        populateVersions(pkg, page, installedPlugin);
+    if (!installedPlugin) {
-        populateHistory(pkg, page);
+        $('#pCurrentVersion', page).hide().html('');
-
-        $('.pluginName', page).html(pkg.name);
-        $('#btnInstallDiv', page).removeClass('hide');
-        $('#pSelectVersion', page).removeClass('hide');
-
-        if (pkg.overview) {
-            $('#overview', page).show().html(pkg.overview);
-        } else {
-            $('#overview', page).hide();
-        }
-
-        $('#description', page).html(pkg.description);
-        $('#developer', page).html(pkg.owner);
-
-        if (installedPlugin) {
-            var currentVersionText = globalize.translate('MessageYouHaveVersionInstalled', '<strong>' + installedPlugin.Version + '</strong>');
-            $('#pCurrentVersion', page).show().html(currentVersionText);
-        } else {
-            $('#pCurrentVersion', page).hide().html('');
-        }
-
-        loading.hide();
     }
 
-    function alertText(options) {
+    const packageVersion = packageInfo.versions[0];
-        require(['alert'], function ({default: alert}) {
+    if (packageVersion) {
-            alert(options);
+        selectmenu.val(packageVersion.version);
-        });
+    }
+}
+
+function renderPackage(pkg, installedPlugins, page) {
+    const installedPlugin = installedPlugins.filter(function (ip) {
+        return ip.Name == pkg.name;
+    })[0];
+
+    populateVersions(pkg, page, installedPlugin);
+    populateHistory(pkg, page);
+
+    $('.pluginName', page).html(pkg.name);
+    $('#btnInstallDiv', page).removeClass('hide');
+    $('#pSelectVersion', page).removeClass('hide');
+
+    if (pkg.overview) {
+        $('#overview', page).show().html(pkg.overview);
+    } else {
+        $('#overview', page).hide();
     }
 
-    function performInstallation(page, name, guid, version) {
+    $('#description', page).html(pkg.description);
-        var developer = $('#developer', page).html().toLowerCase();
+    $('#developer', page).html(pkg.owner);
 
-        var alertCallback = function () {
+    if (installedPlugin) {
-            loading.show();
+        const currentVersionText = globalize.translate('MessageYouHaveVersionInstalled', '<strong>' + installedPlugin.Version + '</strong>');
-            page.querySelector('#btnInstall').disabled = true;
+        $('#pCurrentVersion', page).show().html(currentVersionText);
-            ApiClient.installPlugin(name, guid, version).then(function () {
+    } else {
-                loading.hide();
+        $('#pCurrentVersion', page).hide().html('');
-                alertText(globalize.translate('MessagePluginInstalled'));
+    }
-            });
-        };
 
-        if (developer !== 'jellyfin') {
+    loading.hide();
+}
+
+function alertText(options) {
+    import('alert').then(({default: alert}) => {
+        alert(options);
+    });
+}
+
+function performInstallation(page, name, guid, version) {
+    const developer = $('#developer', page).html().toLowerCase();
+
+    const alertCallback = function () {
+        loading.show();
+        page.querySelector('#btnInstall').disabled = true;
+        ApiClient.installPlugin(name, guid, version).then(() => {
             loading.hide();
-            var msg = globalize.translate('MessagePluginInstallDisclaimer');
+            alertText(globalize.translate('MessagePluginInstalled'));
-            msg += '<br/>';
+        }).catch(() => {
-            msg += '<br/>';
+            alertText(globalize.translate('MessagePluginInstallError'));
-            msg += globalize.translate('PleaseConfirmPluginInstallation');
-
-            require(['confirm'], function (confirm) {
-                confirm.default(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () {
-                    alertCallback();
-                }, function () {
-                    console.debug('plugin not installed');
-                });
-            });
-        } else {
-            alertCallback();
-        }
-    }
-
-    return function (view, params) {
-        $('.addPluginForm', view).on('submit', function () {
-            loading.show();
-            var page = $(this).parents('#addPluginPage')[0];
-            var name = params.name;
-            var guid = params.guid;
-            ApiClient.getInstalledPlugins().then(function (plugins) {
-                var installedPlugin = plugins.filter(function (plugin) {
-                    return plugin.Name == name;
-                })[0];
-
-                var version = $('#selectVersion', page).val();
-                if (installedPlugin && installedPlugin.Version === version) {
-                    loading.hide();
-                    Dashboard.alert({
-                        message: globalize.translate('MessageAlreadyInstalled'),
-                        title: globalize.translate('HeaderPluginInstallation')
-                    });
-                } else {
-                    performInstallation(page, name, guid, version);
-                }
-            });
-            return false;
-        });
-        view.addEventListener('viewshow', function () {
-            var page = this;
-            loading.show();
-            var name = params.name;
-            var guid = params.guid;
-            var promise1 = ApiClient.getPackageInfo(name, guid);
-            var promise2 = ApiClient.getInstalledPlugins();
-            Promise.all([promise1, promise2]).then(function (responses) {
-                renderPackage(responses[0], responses[1], page);
-            });
         });
     };
-});
+
+    if (developer !== 'jellyfin') {
+        loading.hide();
+        let msg = globalize.translate('MessagePluginInstallDisclaimer');
+        msg += '<br/>';
+        msg += '<br/>';
+        msg += globalize.translate('PleaseConfirmPluginInstallation');
+
+        import('confirm').then(({default: confirm}) => {
+            confirm(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () {
+                alertCallback();
+            }).catch(() => {
+                console.debug('plugin not installed');
+            });
+        });
+    } else {
+        alertCallback();
+    }
+}
+
+export default function(view, params) {
+    $('.addPluginForm', view).on('submit', function () {
+        loading.show();
+        const page = $(this).parents('#addPluginPage')[0];
+        const name = params.name;
+        const guid = params.guid;
+        ApiClient.getInstalledPlugins().then(function (plugins) {
+            const installedPlugin = plugins.filter(function (plugin) {
+                return plugin.Name == name;
+            })[0];
+
+            const version = $('#selectVersion', page).val();
+            if (installedPlugin && 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 () {
+        const page = this;
+        loading.show();
+        const name = params.name;
+        const guid = params.guid;
+        const promise1 = ApiClient.getPackageInfo(name, guid);
+        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,144 +1,142 @@
-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';
+import 'cardStyle';
+import 'emby-button';
+import 'emby-checkbox';
+import 'emby-select';
 
-    libraryMenu = libraryMenu.default || libraryMenu;
+function reloadList(page) {
-    loading = loading.default || loading;
+    loading.show();
-
+    const promise1 = ApiClient.getAvailablePlugins();
-    function reloadList(page) {
+    const promise2 = ApiClient.getInstalledPlugins();
-        loading.show();
+    Promise.all([promise1, promise2]).then(function (responses) {
-        var promise1 = ApiClient.getAvailablePlugins();
+        populateList({
-        var promise2 = ApiClient.getInstalledPlugins();
+            catalogElement: page.querySelector('#pluginTiles'),
-        Promise.all([promise1, promise2]).then(function (responses) {
+            noItemsElement: page.querySelector('#noPlugins'),
-            populateList({
+            availablePlugins: responses[0],
-                catalogElement: page.querySelector('#pluginTiles'),
+            installedPlugins: responses[1]
-                noItemsElement: page.querySelector('#noPlugins'),
-                availablePlugins: responses[0],
-                installedPlugins: responses[1]
-            });
         });
+    });
+}
+
+function getHeaderText(category) {
+    category = category.replace(' ', '');
+    // TODO: Replace with switch
+    if (category === 'Channel') {
+        category = 'Channels';
+    } else if (category === 'Theme') {
+        category = 'Themes';
+    } else if (category === 'LiveTV') {
+        category = 'HeaderLiveTV';
+    } else if (category === 'ScreenSaver') {
+        category = 'HeaderScreenSavers';
     }
 
-    function getHeaderText(category) {
+    return globalize.translate(category);
-        category = category.replace(' ', '');
+}
-        if (category === 'Channel') {
+
-            category = 'Channels';
+function populateList(options) {
-        } else if (category === 'Theme') {
+    const availablePlugins = options.availablePlugins;
-            category = 'Themes';
+    const installedPlugins = options.installedPlugins;
-        } else if (category === 'LiveTV') {
+
-            category = 'HeaderLiveTV';
+    availablePlugins.forEach(function (plugin, index, array) {
-        } else if (category === 'ScreenSaver') {
+        plugin.category = plugin.category || 'General';
-            category = 'HeaderScreenSavers';
+        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;
+    });
 
-        return globalize.translate(category);
+    let currentCategory = null;
-    }
+    let html = '';
 
-    function populateList(options) {
+    for (let i = 0; i < availablePlugins.length; i++) {
-        var availablePlugins = options.availablePlugins;
+        const plugin = availablePlugins[i];
-        var installedPlugins = options.installedPlugins;
+        const category = plugin.categoryDisplayName;
-
+        if (category != currentCategory) {
-        availablePlugins.forEach(function (plugin, index, array) {
+            if (currentCategory) {
-            plugin.category = plugin.category || 'General';
+                html += '</div>';
-            plugin.categoryDisplayName = getHeaderText(plugin.category);
+                html += '</div>';
-            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) {
+            html += '<div class="verticalSection">';
-                return 1;
+            html += '<h2 class="sectionTitle sectionTitle-cards">' + category + '</h2>';
-            } else if (b.name > a.name) {
+            html += '<div class="itemsContainer vertical-wrap">';
-                return -1;
+            currentCategory = category;
-            }
-            return 0;
-        });
-
-        var currentCategory = null;
-        var html = '';
-
-        for (var i = 0; i < availablePlugins.length; i++) {
-            var plugin = availablePlugins[i];
-            var category = plugin.categoryDisplayName;
-            if (category != currentCategory) {
-                if (currentCategory) {
-                    html += '</div>';
-                    html += '</div>';
-                }
-                html += '<div class="verticalSection">';
-                html += '<h2 class="sectionTitle sectionTitle-cards">' + category + '</h2>';
-                html += '<div class="itemsContainer vertical-wrap">';
-                currentCategory = category;
-            }
-            html += getPluginHtml(plugin, options, installedPlugins);
         }
-        html += '</div>';
+        html += getPluginHtml(plugin, options, installedPlugins);
-        html += '</div>';
+    }
+    html += '</div>';
+    html += '</div>';
 
-        if (!availablePlugins.length && options.noItemsElement) {
+    if (!availablePlugins.length && options.noItemsElement) {
-            options.noItemsElement.classList.remove('hide');
+        options.noItemsElement.classList.remove('hide');
-        }
-
-        options.catalogElement.innerHTML = html;
-        loading.hide();
     }
 
-    function getPluginHtml(plugin, options, installedPlugins) {
+    options.catalogElement.innerHTML = html;
-        var html = '';
+    loading.hide();
-        var href = plugin.externalUrl ? plugin.externalUrl : 'addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid;
+}
 
-        if (options.context) {
+function getPluginHtml(plugin, options, installedPlugins) {
-            href += '&context=' + options.context;
+    let html = '';
-        }
+    let href = plugin.externalUrl ? plugin.externalUrl : 'addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid;
 
-        var target = plugin.externalUrl ? ' target="_blank"' : '';
+    if (options.context) {
-        html += "<div class='card backdropCard'>";
+        href += '&context=' + options.context;
-        html += '<div class="cardBox visualCardBox">';
-        html += '<div class="cardScalable visualCardBox-cardScalable">';
-        html += '<div class="cardPadder cardPadder-backdrop"></div>';
-        html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + href + '"' + target + '>';
-        html += '<span class="cardImageIcon material-icons folder"></span>';
-        html += '</a>';
-        html += '</div>';
-        html += '<div class="cardFooter">';
-        html += "<div class='cardText'>";
-        html += plugin.name;
-        html += '</div>';
-        var installedPlugin = installedPlugins.filter(function (ip) {
-            return ip.Id == plugin.guid;
-        })[0];
-        html += "<div class='cardText cardText-secondary'>";
-        html += installedPlugin ? globalize.translate('LabelVersionInstalled', installedPlugin.Version) : '&nbsp;';
-        html += '</div>';
-        html += '</div>';
-        html += '</div>';
-        return html += '</div>';
     }
 
-    function getTabs() {
+    const target = plugin.externalUrl ? ' target="_blank"' : '';
-        return [{
+    html += "<div class='card backdropCard'>";
-            href: 'installedplugins.html',
+    html += '<div class="cardBox visualCardBox">';
-            name: globalize.translate('TabMyPlugins')
+    html += '<div class="cardScalable visualCardBox-cardScalable">';
-        }, {
+    html += '<div class="cardPadder cardPadder-backdrop"></div>';
-            href: 'availableplugins.html',
+    html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + href + '"' + target + '>';
-            name: globalize.translate('TabCatalog')
+    html += '<span class="cardImageIcon material-icons folder"></span>';
-        }, {
+    html += '</a>';
-            href: 'repositories.html',
+    html += '</div>';
-            name: globalize.translate('TabRepositories')
+    html += '<div class="cardFooter">';
-        }];
+    html += "<div class='cardText'>";
-    }
+    html += plugin.name;
+    html += '</div>';
+    const installedPlugin = installedPlugins.filter(function (ip) {
+        return ip.Id == plugin.guid;
+    })[0];
+    html += "<div class='cardText cardText-secondary'>";
+    html += installedPlugin ? globalize.translate('LabelVersionInstalled', installedPlugin.Version) : '&nbsp;';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    return html += '</div>';
+}
 
-    window.PluginCatalog = {
+function getTabs() {
-        renderCatalog: populateList
+    return [{
-    };
+        href: 'installedplugins.html',
+        name: globalize.translate('TabMyPlugins')
+    }, {
+        href: 'availableplugins.html',
+        name: globalize.translate('TabCatalog')
+    }, {
+        href: 'repositories.html',
+        name: globalize.translate('TabRepositories')
+    }];
+}
 
-    return function (view, params) {
+export default function (view) {
-        view.addEventListener('viewshow', function () {
+    view.addEventListener('viewshow', function () {
-            libraryMenu.setTabs('plugins', 1, getTabs);
+        libraryMenu.setTabs('plugins', 1, getTabs);
-            reloadList(this);
+        reloadList(this);
-        });
+    });
-    };
+}
-});

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

@@ -1,193 +1,193 @@
-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';
+import globalize from 'globalize';
+import 'cardStyle';
+import 'emby-button';
 
-    libraryMenu = libraryMenu.default || libraryMenu;
+function deletePlugin(page, uniqueid, name) {
-    loading = loading.default || loading;
+    const msg = globalize.translate('UninstallPluginConfirmation', name);
 
-    function deletePlugin(page, uniqueid, name) {
+    import('confirm').then(({default: confirm}) => {
-        var msg = globalize.translate('UninstallPluginConfirmation', name);
+        confirm.default({
-
+            title: globalize.translate('HeaderUninstallPlugin'),
-        require(['confirm'], function (confirm) {
+            text: msg,
-            confirm.default({
+            primary: 'delete',
-                title: globalize.translate('HeaderUninstallPlugin'),
+            confirmText: globalize.translate('HeaderUninstallPlugin')
-                text: msg,
+        }).then(function () {
-                primary: 'delete',
+            loading.show();
-                confirmText: globalize.translate('HeaderUninstallPlugin')
+            ApiClient.uninstallPlugin(uniqueid).then(function () {
-            }).then(function () {
+                reloadList(page);
-                loading.show();
-                ApiClient.uninstallPlugin(uniqueid).then(function () {
-                    reloadList(page);
-                });
             });
         });
-    }
+    });
+}
 
-    function showNoConfigurationMessage() {
+function showNoConfigurationMessage() {
-        Dashboard.alert({
+    Dashboard.alert({
-            message: globalize.translate('MessageNoPluginConfiguration')
+        message: globalize.translate('MessageNoPluginConfiguration')
-        });
+    });
-    }
+}
 
-    function showConnectMessage() {
+function showConnectMessage() {
-        Dashboard.alert({
+    Dashboard.alert({
-            message: globalize.translate('MessagePluginConfigurationRequiresLocalAccess')
+        message: globalize.translate('MessagePluginConfigurationRequiresLocalAccess')
-        });
+    });
-    }
+}
 
-    function getPluginCardHtml(plugin, pluginConfigurationPages) {
+function getPluginCardHtml(plugin, pluginConfigurationPages) {
-        var configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
+    const configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
-            return pluginConfigurationPage.PluginId == plugin.Id;
+        return pluginConfigurationPage.PluginId == plugin.Id;
-        })[0];
+    })[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 data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' data-removable='" + plugin.CanUninstall + "' class='card backdropCard'>";
-        html += '<div class="cardBox visualCardBox">';
+    html += '<div class="cardBox visualCardBox">';
-        html += '<div class="cardScalable">';
+    html += '<div class="cardScalable">';
-        html += '<div class="cardPadder cardPadder-backdrop"></div>';
+    html += '<div class="cardPadder cardPadder-backdrop"></div>';
-        html += configPageUrl ? '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + configPageUrl + '">' : '<div class="cardContent noConfigPluginCard noHoverEffect cardImageContainer emby-button">';
+    html += configPageUrl ? '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + configPageUrl + '">' : '<div class="cardContent noConfigPluginCard noHoverEffect cardImageContainer emby-button">';
-        html += '<span class="cardImageIcon material-icons folder"></span>';
+    html += '<span class="cardImageIcon material-icons folder"></span>';
-        html += configPageUrl ? '</a>' : '</div>';
+    html += configPageUrl ? '</a>' : '</div>';
+    html += '</div>';
+    html += '<div class="cardFooter">';
+
+    if (configPage || plugin.CanUninstall) {
+        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"></span></button>';
         html += '</div>';
-        html += '<div class="cardFooter">';
+    }
 
-        if (configPage || plugin.CanUninstall) {
+    html += "<div class='cardText'>";
-            html += '<div style="text-align:right; float:right;padding-top:5px;">';
+    html += configPage && configPage.DisplayName ? configPage.DisplayName : plugin.Name;
-            html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert"></span></button>';
+    html += '</div>';
-            html += '</div>';
+    html += "<div class='cardText cardText-secondary'>";
+    html += plugin.Version;
+    html += '</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;
         }
 
-        html += "<div class='cardText'>";
+        return -1;
-        html += configPage && configPage.DisplayName ? configPage.DisplayName : plugin.Name;
-        html += '</div>';
-        html += "<div class='cardText cardText-secondary'>";
-        html += plugin.Version;
-        html += '</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;
-        });
-
-        var html = plugins.map(function (p) {
-            return getPluginCardHtml(p, pluginConfigurationPages);
-        }).join('');
-
-        var 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="availableplugins.html">';
-            html += globalize.translate('MessageBrowsePluginCatalog');
-            html += '</a></p>';
-            html += '</div>';
-        }
-
-        installedPluginsElement.innerHTML = html;
-        loading.hide();
-    }
-
-    function showPluginMenu(page, elem) {
-        var card = dom.parentWithClass(elem, 'card');
-        var id = card.getAttribute('data-id');
-        var name = card.getAttribute('data-name');
-        var removable = card.getAttribute('data-removable');
-        var configHref = card.querySelector('.cardContent').getAttribute('href');
-        var menuItems = [];
-
-        if (configHref) {
-            menuItems.push({
-                name: globalize.translate('ButtonSettings'),
-                id: 'open',
-                icon: 'mode_edit'
-            });
-        }
-
-        if (removable === 'true') {
-            menuItems.push({
-                name: globalize.translate('ButtonUninstall'),
-                id: 'delete',
-                icon: 'delete'
-            });
-        }
-
-        require(['actionsheet'], function (actionsheet) {
-            actionsheet.show({
-                items: menuItems,
-                positionTo: elem,
-                callback: function (resultId) {
-                    switch (resultId) {
-                        case 'open':
-                            Dashboard.navigate(configHref);
-                            break;
-                        case 'delete':
-                            deletePlugin(page, id, name);
-                            break;
-                    }
-                }
-            });
-        });
-    }
-
-    function reloadList(page) {
-        loading.show();
-        ApiClient.getInstalledPlugins().then(function (plugins) {
-            renderPlugins(page, plugins);
-        });
-    }
-
-    function getTabs() {
-        return [{
-            href: 'installedplugins.html',
-            name: globalize.translate('TabMyPlugins')
-        }, {
-            href: 'availableplugins.html',
-            name: globalize.translate('TabCatalog')
-        }, {
-            href: 'repositories.html',
-            name: globalize.translate('TabRepositories')
-        }];
-    }
-
-    function onInstalledPluginsClick(e) {
-        if (dom.parentWithClass(e.target, 'noConfigPluginCard')) {
-            showNoConfigurationMessage();
-        } else if (dom.parentWithClass(e.target, 'connectModePluginCard')) {
-            showConnectMessage();
-        } else {
-            var btnCardMenu = dom.parentWithClass(e.target, 'btnCardMenu');
-            if (btnCardMenu) {
-                showPluginMenu(dom.parentWithClass(btnCardMenu, 'page'), btnCardMenu);
-            }
-        }
-    }
-
-    pageIdOn('pageshow', 'pluginsPage', function () {
-        libraryMenu.setTabs('plugins', 0, getTabs);
-        reloadList(this);
     });
 
-    window.PluginsPage = {
+    let html = plugins.map(function (p) {
-        renderPlugins: renderPlugins
+        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="availableplugins.html">';
+        html += globalize.translate('MessageBrowsePluginCatalog');
+        html += '</a></p>';
+        html += '</div>';
+    }
+
+    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('.cardContent').getAttribute('href');
+    const menuItems = [];
+
+    if (configHref) {
+        menuItems.push({
+            name: globalize.translate('ButtonSettings'),
+            id: 'open',
+            icon: 'mode_edit'
+        });
+    }
+
+    if (removable === 'true') {
+        menuItems.push({
+            name: globalize.translate('ButtonUninstall'),
+            id: 'delete',
+            icon: 'delete'
+        });
+    }
+
+    import('actionsheet').then(({default: actionsheet}) => {
+        actionsheet.show({
+            items: menuItems,
+            positionTo: elem,
+            callback: function (resultId) {
+                switch (resultId) {
+                    case 'open':
+                        Dashboard.navigate(configHref);
+                        break;
+                    case 'delete':
+                        deletePlugin(page, id, name);
+                        break;
+                }
+            }
+        });
+    });
+}
+
+function reloadList(page) {
+    loading.show();
+    ApiClient.getInstalledPlugins().then(function (plugins) {
+        renderPlugins(page, plugins);
+    });
+}
+
+function getTabs() {
+    return [{
+        href: 'installedplugins.html',
+        name: globalize.translate('TabMyPlugins')
+    }, {
+        href: 'availableplugins.html',
+        name: globalize.translate('TabCatalog')
+    }, {
+        href: 'repositories.html',
+        name: globalize.translate('TabRepositories')
+    }];
+}
+
+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);
+        }
+    }
+}
+
+pageIdOn('pageshow', 'pluginsPage', function () {
+    libraryMenu.setTabs('plugins', 0, getTabs);
+    reloadList(this);
 });
+
+window.PluginsPage = {
+    renderPlugins: renderPlugins
+};

src/index.html

@@ -137,8 +137,7 @@
         }
 
         @media screen
-            and (min-device-width: 992px)
+            and (min-device-width: 992px) {
-            and (-webkit-min-device-pixel-ratio: 1) {
             .splashLogo {
                 background-image: url(assets/img/banner-light.png);
             }

src/plugins/logoScreensaver/plugin.js

@@ -1,165 +1,165 @@
-define(['pluginManager'], function (pluginManager) {
+import pluginManager from 'pluginManager';
-    return function () {
-        var self = this;
 
-        self.name = 'Logo ScreenSaver';
+export default function () {
-        self.type = 'screensaver';
+    const self = this;
-        self.id = 'logoscreensaver';
-        self.supportsAnonymous = true;
 
-        var interval;
+    self.name = 'Logo ScreenSaver';
+    self.type = 'screensaver';
+    self.id = 'logoscreensaver';
+    self.supportsAnonymous = true;
 
-        function animate() {
+    let interval;
-            var animations = [
 
-                bounceInLeft,
+    function animate() {
-                bounceInRight,
+        const animations = [
-                swing,
-                tada,
-                wobble,
-                rotateIn,
-                rotateOut
-            ];
 
-            var elem = document.querySelector('.logoScreenSaverImage');
+            bounceInLeft,
+            bounceInRight,
+            swing,
+            tada,
+            wobble,
+            rotateIn,
+            rotateOut
+        ];
 
-            if (elem && elem.animate) {
+        const elem = document.querySelector('.logoScreenSaverImage');
-                var random = getRandomInt(0, animations.length - 1);
 
-                animations[random](elem, 1);
+        if (elem && elem.animate) {
+            const random = getRandomInt(0, animations.length - 1);
+
+            animations[random](elem, 1);
+        }
+    }
+
+    function getRandomInt(min, max) {
+        return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+    function bounceInLeft(elem, iterations) {
+        const keyframes = [
+            { transform: 'translate3d(-3000px, 0, 0)', opacity: '0', offset: 0 },
+            { transform: 'translate3d(25px, 0, 0)', opacity: '1', offset: 0.6 },
+            { transform: 'translate3d(-100px, 0, 0)', offset: 0.75 },
+            { transform: 'translate3d(5px, 0, 0)', offset: 0.9 },
+            { transform: 'none', opacity: '1', offset: 1 }];
+        const timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
+        return elem.animate(keyframes, timing);
+    }
+
+    function bounceInRight(elem, iterations) {
+        const keyframes = [
+            { transform: 'translate3d(3000px, 0, 0)', opacity: '0', offset: 0 },
+            { transform: 'translate3d(-25px, 0, 0)', opacity: '1', offset: 0.6 },
+            { transform: 'translate3d(100px, 0, 0)', offset: 0.75 },
+            { transform: 'translate3d(-5px, 0, 0)', offset: 0.9 },
+            { transform: 'none', opacity: '1', offset: 1 }];
+        const timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
+        return elem.animate(keyframes, timing);
+    }
+
+    function swing(elem, iterations) {
+        const keyframes = [
+            { transform: 'translate(0%)', offset: 0 },
+            { transform: 'rotate3d(0, 0, 1, 15deg)', offset: 0.2 },
+            { transform: 'rotate3d(0, 0, 1, -10deg)', offset: 0.4 },
+            { transform: 'rotate3d(0, 0, 1, 5deg)', offset: 0.6 },
+            { transform: 'rotate3d(0, 0, 1, -5deg)', offset: 0.8 },
+            { transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1 }];
+        const timing = { duration: 900, iterations: iterations };
+        return elem.animate(keyframes, timing);
+    }
+
+    function tada(elem, iterations) {
+        const keyframes = [
+            { transform: 'scale3d(1, 1, 1)', offset: 0 },
+            { transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)', offset: 0.1 },
+            { transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)', offset: 0.2 },
+            { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.3 },
+            { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.4 },
+            { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.5 },
+            { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.6 },
+            { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.7 },
+            { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.8 },
+            { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.9 },
+            { transform: 'scale3d(1, 1, 1)', offset: 1 }];
+        const timing = { duration: 900, iterations: iterations };
+        return elem.animate(keyframes, timing);
+    }
+
+    function wobble(elem, iterations) {
+        const keyframes = [
+            { transform: 'translate(0%)', offset: 0 },
+            { transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)', offset: 0.15 },
+            { transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)', offset: 0.45 },
+            { transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)', offset: 0.6 },
+            { transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)', offset: 0.75 },
+            { transform: 'translateX(0%)', offset: 1 }];
+        const timing = { duration: 900, iterations: iterations };
+        return elem.animate(keyframes, timing);
+    }
+
+    function rotateIn(elem, iterations) {
+        const keyframes = [{ transform: 'rotate3d(0, 0, 1, -200deg)', opacity: '0', transformOrigin: 'center', offset: 0 },
+            { transform: 'none', opacity: '1', transformOrigin: 'center', offset: 1 }];
+        const timing = { duration: 900, iterations: iterations };
+        return elem.animate(keyframes, timing);
+    }
+
+    function rotateOut(elem, iterations) {
+        const keyframes = [{ transform: 'none', opacity: '1', transformOrigin: 'center', offset: 0 },
+            { transform: 'rotate3d(0, 0, 1, 200deg)', opacity: '0', transformOrigin: 'center', offset: 1 }];
+        const timing = { duration: 900, iterations: iterations };
+        return elem.animate(keyframes, timing);
+    }
+
+    function fadeOut(elem, iterations) {
+        const keyframes = [
+            { opacity: '1', offset: 0 },
+            { opacity: '0', offset: 1 }];
+        const timing = { duration: 400, iterations: iterations };
+        return elem.animate(keyframes, timing);
+    }
+
+    function stopInterval() {
+        if (interval) {
+            clearInterval(interval);
+            interval = null;
+        }
+    }
+
+    self.show = function () {
+        import('css!' + pluginManager.mapPath(self, 'style.css')).then(() => {
+            let elem = document.querySelector('.logoScreenSaver');
+
+            if (!elem) {
+                elem = document.createElement('div');
+                elem.classList.add('logoScreenSaver');
+                document.body.appendChild(elem);
+
+                elem.innerHTML = '<img class="logoScreenSaverImage" src="assets/img/banner-light.png" />';
             }
-        }
 
-        function getRandomInt(min, max) {
-            return Math.floor(Math.random() * (max - min + 1)) + min;
-        }
-
-        function bounceInLeft(elem, iterations) {
-            var keyframes = [
-                { transform: 'translate3d(-3000px, 0, 0)', opacity: '0', offset: 0 },
-                { transform: 'translate3d(25px, 0, 0)', opacity: '1', offset: 0.6 },
-                { transform: 'translate3d(-100px, 0, 0)', offset: 0.75 },
-                { transform: 'translate3d(5px, 0, 0)', offset: 0.9 },
-                { transform: 'none', opacity: '1', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
-            return elem.animate(keyframes, timing);
-        }
-
-        function bounceInRight(elem, iterations) {
-            var keyframes = [
-                { transform: 'translate3d(3000px, 0, 0)', opacity: '0', offset: 0 },
-                { transform: 'translate3d(-25px, 0, 0)', opacity: '1', offset: 0.6 },
-                { transform: 'translate3d(100px, 0, 0)', offset: 0.75 },
-                { transform: 'translate3d(-5px, 0, 0)', offset: 0.9 },
-                { transform: 'none', opacity: '1', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' };
-            return elem.animate(keyframes, timing);
-        }
-
-        function swing(elem, iterations) {
-            var keyframes = [
-                { transform: 'translate(0%)', offset: 0 },
-                { transform: 'rotate3d(0, 0, 1, 15deg)', offset: 0.2 },
-                { transform: 'rotate3d(0, 0, 1, -10deg)', offset: 0.4 },
-                { transform: 'rotate3d(0, 0, 1, 5deg)', offset: 0.6 },
-                { transform: 'rotate3d(0, 0, 1, -5deg)', offset: 0.8 },
-                { transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
-            return elem.animate(keyframes, timing);
-        }
-
-        function tada(elem, iterations) {
-            var keyframes = [
-                { transform: 'scale3d(1, 1, 1)', offset: 0 },
-                { transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)', offset: 0.1 },
-                { transform: 'scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)', offset: 0.2 },
-                { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.3 },
-                { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.4 },
-                { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.5 },
-                { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.6 },
-                { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.7 },
-                { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.8 },
-                { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.9 },
-                { transform: 'scale3d(1, 1, 1)', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
-            return elem.animate(keyframes, timing);
-        }
-
-        function wobble(elem, iterations) {
-            var keyframes = [
-                { transform: 'translate(0%)', offset: 0 },
-                { transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)', offset: 0.15 },
-                { transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)', offset: 0.45 },
-                { transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)', offset: 0.6 },
-                { transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)', offset: 0.75 },
-                { transform: 'translateX(0%)', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
-            return elem.animate(keyframes, timing);
-        }
-
-        function rotateIn(elem, iterations) {
-            var keyframes = [{ transform: 'rotate3d(0, 0, 1, -200deg)', opacity: '0', transformOrigin: 'center', offset: 0 },
-                { transform: 'none', opacity: '1', transformOrigin: 'center', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
-            return elem.animate(keyframes, timing);
-        }
-
-        function rotateOut(elem, iterations) {
-            var keyframes = [{ transform: 'none', opacity: '1', transformOrigin: 'center', offset: 0 },
-                { transform: 'rotate3d(0, 0, 1, 200deg)', opacity: '0', transformOrigin: 'center', offset: 1 }];
-            var timing = { duration: 900, iterations: iterations };
-            return elem.animate(keyframes, timing);
-        }
-
-        function fadeOut(elem, iterations) {
-            var keyframes = [
-                { opacity: '1', offset: 0 },
-                { opacity: '0', offset: 1 }];
-            var timing = { duration: 400, iterations: iterations };
-            return elem.animate(keyframes, timing);
-        }
-
-        function stopInterval() {
-            if (interval) {
-                clearInterval(interval);
-                interval = null;
-            }
-        }
-
-        self.show = function () {
-            require(['css!' + pluginManager.mapPath(self, 'style.css')], function () {
-                var elem = document.querySelector('.logoScreenSaver');
-
-                if (!elem) {
-                    elem = document.createElement('div');
-                    elem.classList.add('logoScreenSaver');
-                    document.body.appendChild(elem);
-
-                    elem.innerHTML = '<img class="logoScreenSaverImage" src="assets/img/banner-light.png" />';
-                }
-
-                stopInterval();
-                interval = setInterval(animate, 3000);
-            });
-        };
-
-        self.hide = function () {
             stopInterval();
-
+            interval = setInterval(animate, 3000);
-            var elem = document.querySelector('.logoScreenSaver');
+        });
-
-            if (elem) {
-                var onAnimationFinish = function () {
-                    elem.parentNode.removeChild(elem);
-                };
-
-                if (elem.animate) {
-                    var animation = fadeOut(elem, 1);
-                    animation.onfinish = onAnimationFinish;
-                } else {
-                    onAnimationFinish();
-                }
-            }
-        };
     };
-});
+
+    self.hide = function () {
+        stopInterval();
+
+        const elem = document.querySelector('.logoScreenSaver');
+
+        if (elem) {
+            const onAnimationFinish = function () {
+                elem.parentNode.removeChild(elem);
+            };
+
+            if (elem.animate) {
+                const animation = fadeOut(elem, 1);
+                animation.onfinish = onAnimationFinish;
+            } else {
+                onAnimationFinish();
+            }
+        }
+    };
+}

src/plugins/playAccessValidation/plugin.js

@@ -1,33 +1,26 @@
-define(['connectionManager', 'globalize'], function (connectionManager, globalize) {
+import connectionManager from 'connectionManager';
-    'use strict';
+import globalize from 'globalize';
 
-    function getRequirePromise(deps) {
+function showErrorMessage() {
-        return new Promise(function (resolve, reject) {
+    return import('alert').then(({default: alert}) => {
-            require(deps, resolve);
+        return alert(globalize.translate('MessagePlayAccessRestricted'));
-        });
+    });
-    }
+}
 
-    function showErrorMessage() {
+class PlayAccessValidation {
-        return getRequirePromise(['alert']).then(function (alert) {
+    constructor() {
-            return alert(globalize.translate('MessagePlayAccessRestricted')).then(function () {
-                return Promise.reject();
-            });
-        });
-    }
-
-    function PlayAccessValidation() {
         this.name = 'Playback validation';
         this.type = 'preplayintercept';
         this.id = 'playaccessvalidation';
         this.order = -2;
     }
 
-    PlayAccessValidation.prototype.intercept = function (options) {
+    intercept(options) {
-        var item = options.item;
+        const item = options.item;
         if (!item) {
             return Promise.resolve();
         }
-        var serverId = item.ServerId;
+        const serverId = item.ServerId;
         if (!serverId) {
             return Promise.resolve();
         }
@@ -44,7 +37,7 @@ define(['connectionManager', 'globalize'], function (connectionManager, globaliz
 
             return showErrorMessage();
         });
-    };
+    }
+}
 
-    return PlayAccessValidation;
+export default PlayAccessValidation;
-});

src/scripts/routes.js

@@ -112,54 +112,69 @@ import 'detailtablecss';
     });
 
     defineRoute({
-        path: '/dashboard.html',
+        alias: '/dashboard.html',
+        path: '/controllers/dashboard/dashboard.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/dashboard'
     });
 
     defineRoute({
-        path: '/dashboardgeneral.html',
+        alias: '/dashboardgeneral.html',
+        path: '/controllers/dashboard/general.html',
         controller: 'dashboard/general',
         autoFocus: false,
         roles: 'admin'
     });
 
     defineRoute({
-        path: '/networking.html',
+        alias: '/networking.html',
+        path: '/controllers/dashboard/networking.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/networking'
     });
 
     defineRoute({
-        path: '/devices.html',
+        alias: '/devices.html',
+        path: '/controllers/dashboard/devices/devices.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/devices/devices'
     });
 
     defineRoute({
-        path: '/device.html',
+        alias: '/device.html',
+        path: '/controllers/dashboard/devices/device.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/devices/device'
     });
 
     defineRoute({
-        path: '/dlnaprofile.html',
+        alias: '/dlnaprofile.html',
+        path: '/controllers/dashboard/dlna/profile.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/dlna/profile'
     });
 
     defineRoute({
-        path: '/dlnaprofiles.html',
+        alias: '/dlnaprofiles.html',
+        path: '/controllers/dashboard/dlna/profiles.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/dlna/profiles'
     });
 
+    defineRoute({
+        alias: '/dlnasettings.html',
+        path: '/controllers/dashboard/dlna/settings.html',
+        autoFocus: false,
+        roles: 'admin',
+        controller: 'dashboard/dlna/settings'
+    });
+
     defineRoute({
         alias: '/addplugin.html',
         path: '/controllers/dashboard/plugins/add/index.html',
@@ -169,54 +184,54 @@ import 'detailtablecss';
     });
 
     defineRoute({
-        path: '/library.html',
+        alias: '/library.html',
+        path: '/controllers/dashboard/library.html',
         autoFocus: false,
         roles: 'admin',
-        controller: 'dashboard/mediaLibrary'
+        controller: 'dashboard/library'
     });
 
     defineRoute({
-        path: '/librarydisplay.html',
+        alias: '/librarydisplay.html',
+        path: '/controllers/dashboard/librarydisplay.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/librarydisplay'
     });
 
     defineRoute({
-        path: '/dlnasettings.html',
+        alias: '/edititemmetadata.html',
-        autoFocus: false,
+        path: '/controllers/edititemmetadata.html',
-        roles: 'admin',
-        controller: 'dashboard/dlna/settings'
-    });
-
-    defineRoute({
-        path: '/edititemmetadata.html',
         controller: 'edititemmetadata',
         autoFocus: false
     });
 
     defineRoute({
-        path: '/encodingsettings.html',
+        alias: '/encodingsettings.html',
+        path: '/controllers/dashboard/encodingsettings.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/encodingsettings'
     });
 
     defineRoute({
-        path: '/log.html',
+        alias: '/log.html',
+        path: '/controllers/dashboard/logs.html',
         roles: 'admin',
         controller: 'dashboard/logs'
     });
 
     defineRoute({
-        path: '/metadataimages.html',
+        alias: '/metadataimages.html',
+        path: '/controllers/dashboard/metadataimages.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/metadataImages'
     });
 
     defineRoute({
-        path: '/metadatanfo.html',
+        alias: '/metadatanfo.html',
+        path: '/controllers/dashboard/metadatanfo.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/metadatanfo'
@@ -239,7 +254,8 @@ import 'detailtablecss';
     });
 
     defineRoute({
-        path: '/playbackconfiguration.html',
+        alias: '/playbackconfiguration.html',
+        path: '/controllers/dashboard/playback.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/playback'
@@ -262,19 +278,22 @@ import 'detailtablecss';
     });
 
     defineRoute({
-        path: '/home.html',
+        alias: '/home.html',
+        path: '/controllers/home.html',
         autoFocus: false,
         controller: 'home',
         type: 'home'
     });
 
     defineRoute({
-        path: '/search.html',
+        alias: '/search.html',
+        path: '/controllers/search.html',
         controller: 'searchpage'
     });
 
     defineRoute({
-        path: '/list.html',
+        alias: '/list.html',
+        path: '/controllers/list.html',
         autoFocus: false,
         controller: 'list'
     });
@@ -287,46 +306,53 @@ import 'detailtablecss';
     });
 
     defineRoute({
-        path: '/livetv.html',
+        alias: '/livetv.html',
+        path: '/controllers/livetv.html',
         controller: 'livetv/livetvsuggested',
         autoFocus: false
     });
 
     defineRoute({
-        path: '/livetvguideprovider.html',
+        alias: '/livetvguideprovider.html',
+        path: '/controllers/livetvguideprovider.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'livetvguideprovider'
     });
 
     defineRoute({
-        path: '/livetvsettings.html',
+        alias: '/livetvsettings.html',
+        path: '/controllers/livetvsettings.html',
         autoFocus: false,
         controller: 'livetvsettings'
     });
 
     defineRoute({
-        path: '/livetvstatus.html',
+        alias: '/livetvstatus.html',
+        path: '/controllers/livetvstatus.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'livetvstatus'
     });
 
     defineRoute({
-        path: '/livetvtuner.html',
+        alias: '/livetvtuner.html',
+        path: '/controllers/livetvtuner.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'livetvtuner'
     });
 
     defineRoute({
-        path: '/movies.html',
+        alias: '/movies.html',
+        path: '/controllers/movies/movies.html',
         autoFocus: false,
         controller: 'movies/moviesrecommended'
     });
 
     defineRoute({
-        path: '/music.html',
+        alias: '/music.html',
+        path: '/controllers/music/music.html',
         controller: 'music/musicrecommended',
         autoFocus: false
     });
@@ -340,82 +366,94 @@ import 'detailtablecss';
     });
 
     defineRoute({
-        path: '/scheduledtask.html',
+        alias: '/scheduledtask.html',
+        path: '/controllers/dashboard/scheduledtasks/scheduledtask.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/scheduledtasks/scheduledtask'
     });
 
     defineRoute({
-        path: '/scheduledtasks.html',
+        alias: '/scheduledtasks.html',
+        path: '/controllers/dashboard/scheduledtasks/scheduledtasks.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/scheduledtasks/scheduledtasks'
     });
 
     defineRoute({
-        path: '/serveractivity.html',
+        alias: '/serveractivity.html',
+        path: '/controllers/dashboard/serveractivity.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/serveractivity'
     });
 
     defineRoute({
-        path: '/apikeys.html',
+        alias: '/apikeys.html',
+        path: '/controllers/dashboard/apikeys.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/apikeys'
     });
 
     defineRoute({
-        path: '/streamingsettings.html',
+        alias: '/streamingsettings.html',
+        path: '/controllers/dashboard/streaming.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/streaming'
     });
 
     defineRoute({
-        path: '/tv.html',
+        alias: '/tv.html',
+        path: '/controllers/shows/tvrecommended.html',
         autoFocus: false,
         controller: 'shows/tvrecommended'
     });
 
     defineRoute({
-        path: '/useredit.html',
+        alias: '/useredit.html',
+        path: '/controllers/dashboard/users/useredit.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/users/useredit'
     });
 
     defineRoute({
-        path: '/userlibraryaccess.html',
+        alias: '/userlibraryaccess.html',
+        path: '/controllers/dashboard/users/userlibraryaccess.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/users/userlibraryaccess'
     });
 
     defineRoute({
-        path: '/usernew.html',
+        alias: '/usernew.html',
+        path: '/controllers/dashboard/users/usernew.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/users/usernew'
     });
 
     defineRoute({
-        path: '/userparentalcontrol.html',
+        alias: '/userparentalcontrol.html',
+        path: '/controllers/dashboard/users/userparentalcontrol.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/users/userparentalcontrol'
     });
 
     defineRoute({
-        path: '/userpassword.html',
+        alias: '/userpassword.html',
+        path: '/controllers/dashboard/users/userpassword.html',
         autoFocus: false,
         controller: 'dashboard/users/userpasswordpage'
     });
 
     defineRoute({
-        path: '/userprofiles.html',
+        alias: '/userprofiles.html',
+        path: '/controllers/dashboard/users/userprofiles.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/users/userprofilespage'
@@ -438,10 +476,11 @@ import 'detailtablecss';
     });
 
     defineRoute({
-        path: '/wizardlibrary.html',
+        alias: '/wizardlibrary.html',
+        path: '/controllers/wizard/library.html',
         autoFocus: false,
         anonymous: true,
-        controller: 'dashboard/mediaLibrary'
+        controller: 'dashboard/library'
     });
 
     defineRoute({

src/strings/de.json

@@ -1545,5 +1545,7 @@
     "LabelUnstable": "Instabil",
     "SubtitleVerticalPositionHelp": "Zeilennummer, in der der Text angezeigt wird. Positive Zahlen geben die Zeile von oben an. Negative Zahlen geben die Zeile von unten an.",
     "Preview": "Vorschau",
-    "LabelSubtitleVerticalPosition": "Vertikale Position:"
+    "LabelSubtitleVerticalPosition": "Vertikale Position:",
+    "MessageGetInstalledPluginsError": "Beim Abrufen der Liste der derzeit installierten Plugins ist ein Fehler aufgetreten.",
+    "MessagePluginInstallError": "Bei der Installation des Plugins ist ein Fehler aufgetreten."
 }

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.",
+    "MessagePluginInstallError": "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.",