Merge branch 'master' into fix-subtitle-line-spacing

2025-03-30 19:56:21 +00:00 · 2020-08-06 20:11:47 +03:00 · 2020-08-06 20:11:47 +03:00 · f712d9c238
commit f712d9c238
parent 6ef3be136a 949c60b9ae
191 changed files with 6658 additions and 8080 deletions
--- a/src/scripts/autoThemes.js
+++ b/src/scripts/autoThemes.js
@ -0,0 +1,8 @@
+import * as userSettings from 'userSettings';
+import skinManager from 'skinManager';
+import connectionManager from 'connectionManager';
+import events from 'events';
+
+events.on(connectionManager, 'localusersignedin', function (e, user) {
+    skinManager.setTheme(userSettings.theme());
+});
--- a/src/scripts/browser.js
+++ b/src/scripts/browser.js
@ -1,260 +1,256 @@
-define([], function () {
-    'use strict';
+function isTv() {
+    // This is going to be really difficult to get right
+    const userAgent = navigator.userAgent.toLowerCase();

-    function isTv() {
-        // This is going to be really difficult to get right
-        var userAgent = navigator.userAgent.toLowerCase();
-
-        if (userAgent.indexOf('tv') !== -1) {
-            return true;
-        }
-
-        if (userAgent.indexOf('samsungbrowser') !== -1) {
-            return true;
-        }
-
-        if (userAgent.indexOf('viera') !== -1) {
-            return true;
-        }
-
-        if (userAgent.indexOf('web0s') !== -1) {
-            return true;
-        }
-
-        return false;
+    if (userAgent.indexOf('tv') !== -1) {
+        return true;
    }

-    function isMobile(userAgent) {
-        var terms = [
-            'mobi',
-            'ipad',
-            'iphone',
-            'ipod',
-            'silk',
-            'gt-p1000',
-            'nexus 7',
-            'kindle fire',
-            'opera mini'
-        ];
-
-        var lower = userAgent.toLowerCase();
-
-        for (var i = 0, length = terms.length; i < length; i++) {
-            if (lower.indexOf(terms[i]) !== -1) {
-                return true;
-            }
-        }
-
-        return false;
+    if (userAgent.indexOf('samsungbrowser') !== -1) {
+        return true;
    }

-    function hasKeyboard(browser) {
-        if (browser.touch) {
-            return true;
-        }
-
-        if (browser.xboxOne) {
-            return true;
-        }
-
-        if (browser.ps4) {
-            return true;
-        }
-
-        if (browser.edgeUwp) {
-            // This is OK for now, but this won't always be true
-            // Should we use this?
-            // https://gist.github.com/wagonli/40d8a31bd0d6f0dd7a5d
-            return true;
-        }
-
-        if (browser.tv) {
-            return true;
-        }
-
-        return false;
+    if (userAgent.indexOf('viera') !== -1) {
+        return true;
    }

-    function iOSversion() {
-        // MacIntel: Apple iPad Pro 11 iOS 13.1
-        if (/iP(hone|od|ad)|MacIntel/.test(navigator.platform)) {
-            // supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
-            var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
-            return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
+    if (userAgent.indexOf('web0s') !== -1) {
+        return true;
+    }
+
+    return false;
+}
+
+function isMobile(userAgent) {
+    const terms = [
+        'mobi',
+        'ipad',
+        'iphone',
+        'ipod',
+        'silk',
+        'gt-p1000',
+        'nexus 7',
+        'kindle fire',
+        'opera mini'
+    ];
+
+    const lower = userAgent.toLowerCase();
+
+    for (let i = 0, length = terms.length; i < length; i++) {
+        if (lower.indexOf(terms[i]) !== -1) {
+            return true;
        }
    }

-    var _supportsCssAnimation;
-    var _supportsCssAnimationWithPrefix;
-    function supportsCssAnimation(allowPrefix) {
-        // TODO: Assess if this is still needed, as all of our targets should natively support CSS animations.
-        if (allowPrefix) {
-            if (_supportsCssAnimationWithPrefix === true || _supportsCssAnimationWithPrefix === false) {
-                return _supportsCssAnimationWithPrefix;
-            }
-        } else {
-            if (_supportsCssAnimation === true || _supportsCssAnimation === false) {
-                return _supportsCssAnimation;
-            }
-        }
+    return false;
+}

-        var animation = false;
-        var domPrefixes = ['Webkit', 'O', 'Moz'];
-        var elm = document.createElement('div');
+function hasKeyboard(browser) {
+    if (browser.touch) {
+        return true;
+    }

-        if (elm.style.animationName !== undefined) {
-            animation = true;
-        }
+    if (browser.xboxOne) {
+        return true;
+    }

-        if (animation === false && allowPrefix) {
-            for (var i = 0; i < domPrefixes.length; i++) {
-                if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
-                    animation = true;
-                    break;
-                }
-            }
-        }
+    if (browser.ps4) {
+        return true;
+    }

-        if (allowPrefix) {
-            _supportsCssAnimationWithPrefix = animation;
+    if (browser.edgeUwp) {
+        // This is OK for now, but this won't always be true
+        // Should we use this?
+        // https://gist.github.com/wagonli/40d8a31bd0d6f0dd7a5d
+        return true;
+    }
+
+    if (browser.tv) {
+        return true;
+    }
+
+    return false;
+}
+
+function iOSversion() {
+    // MacIntel: Apple iPad Pro 11 iOS 13.1
+    if (/iP(hone|od|ad)|MacIntel/.test(navigator.platform)) {
+        // supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
+        const v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
+        return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
+    }
+}
+
+let _supportsCssAnimation;
+let _supportsCssAnimationWithPrefix;
+function supportsCssAnimation(allowPrefix) {
+    // TODO: Assess if this is still needed, as all of our targets should natively support CSS animations.
+    if (allowPrefix) {
+        if (_supportsCssAnimationWithPrefix === true || _supportsCssAnimationWithPrefix === false) {
            return _supportsCssAnimationWithPrefix;
-        } else {
-            _supportsCssAnimation = animation;
+        }
+    } else {
+        if (_supportsCssAnimation === true || _supportsCssAnimation === false) {
            return _supportsCssAnimation;
        }
    }

-    var uaMatch = function (ua) {
-        ua = ua.toLowerCase();
+    let animation = false;
+    const domPrefixes = ['Webkit', 'O', 'Moz'];
+    const elm = document.createElement('div');

-        var match = /(edg)[ \/]([\w.]+)/.exec(ua) ||
-            /(edga)[ \/]([\w.]+)/.exec(ua) ||
-            /(edgios)[ \/]([\w.]+)/.exec(ua) ||
-            /(edge)[ \/]([\w.]+)/.exec(ua) ||
-            /(opera)[ \/]([\w.]+)/.exec(ua) ||
-            /(opr)[ \/]([\w.]+)/.exec(ua) ||
-            /(chrome)[ \/]([\w.]+)/.exec(ua) ||
-            /(safari)[ \/]([\w.]+)/.exec(ua) ||
-            /(firefox)[ \/]([\w.]+)/.exec(ua) ||
-            ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua) ||
-            [];
+    if (elm.style.animationName !== undefined) {
+        animation = true;
+    }

-        var versionMatch = /(version)[ \/]([\w.]+)/.exec(ua);
-
-        var platform_match = /(ipad)/.exec(ua) ||
-            /(iphone)/.exec(ua) ||
-            /(windows)/.exec(ua) ||
-            /(android)/.exec(ua) ||
-            [];
-
-        var browser = match[1] || '';
-
-        if (browser === 'edge') {
-            platform_match = [''];
+    if (animation === false && allowPrefix) {
+        for (let i = 0; i < domPrefixes.length; i++) {
+            if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
+                animation = true;
+                break;
+            }
        }
-
-        if (browser === 'opr') {
-            browser = 'opera';
-        }
-
-        var version;
-        if (versionMatch && versionMatch.length > 2) {
-            version = versionMatch[2];
-        }
-
-        version = version || match[2] || '0';
-
-        var versionMajor = parseInt(version.split('.')[0]);
-
-        if (isNaN(versionMajor)) {
-            versionMajor = 0;
-        }
-
-        return {
-            browser: browser,
-            version: version,
-            platform: platform_match[0] || '',
-            versionMajor: versionMajor
-        };
-    };
-
-    var userAgent = navigator.userAgent;
-
-    var matched = uaMatch(userAgent);
-    var browser = {};
-
-    if (matched.browser) {
-        browser[matched.browser] = true;
-        browser.version = matched.version;
-        browser.versionMajor = matched.versionMajor;
    }

-    if (matched.platform) {
-        browser[matched.platform] = true;
-    }
-
-    browser.edgeChromium = browser.edg || browser.edga || browser.edgios;
-
-    if (!browser.chrome && !browser.edgeChromium && !browser.edge && !browser.opera && userAgent.toLowerCase().indexOf('webkit') !== -1) {
-        browser.safari = true;
-    }
-
-    if (userAgent.toLowerCase().indexOf('playstation 4') !== -1) {
-        browser.ps4 = true;
-        browser.tv = true;
-    }
-
-    if (isMobile(userAgent)) {
-        browser.mobile = true;
-    }
-
-    if (userAgent.toLowerCase().indexOf('xbox') !== -1) {
-        browser.xboxOne = true;
-        browser.tv = true;
-    }
-    browser.animate = typeof document !== 'undefined' && document.documentElement.animate != null;
-    browser.tizen = userAgent.toLowerCase().indexOf('tizen') !== -1 || self.tizen != null;
-    browser.web0s = userAgent.toLowerCase().indexOf('Web0S'.toLowerCase()) !== -1;
-    browser.edgeUwp = browser.edge && (userAgent.toLowerCase().indexOf('msapphost') !== -1 || userAgent.toLowerCase().indexOf('webview') !== -1);
-
-    if (!browser.tizen) {
-        browser.orsay = userAgent.toLowerCase().indexOf('smarthub') !== -1;
+    if (allowPrefix) {
+        _supportsCssAnimationWithPrefix = animation;
+        return _supportsCssAnimationWithPrefix;
    } else {
-        var v = (navigator.appVersion).match(/Tizen (\d+).(\d+)/);
-        browser.tizenVersion = parseInt(v[1]);
+        _supportsCssAnimation = animation;
+        return _supportsCssAnimation;
+    }
+}
+
+const uaMatch = function (ua) {
+    ua = ua.toLowerCase();
+
+    const match = /(edg)[ \/]([\w.]+)/.exec(ua) ||
+        /(edga)[ \/]([\w.]+)/.exec(ua) ||
+        /(edgios)[ \/]([\w.]+)/.exec(ua) ||
+        /(edge)[ \/]([\w.]+)/.exec(ua) ||
+        /(opera)[ \/]([\w.]+)/.exec(ua) ||
+        /(opr)[ \/]([\w.]+)/.exec(ua) ||
+        /(chrome)[ \/]([\w.]+)/.exec(ua) ||
+        /(safari)[ \/]([\w.]+)/.exec(ua) ||
+        /(firefox)[ \/]([\w.]+)/.exec(ua) ||
+        ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua) ||
+        [];
+
+    const versionMatch = /(version)[ \/]([\w.]+)/.exec(ua);
+
+    let platform_match = /(ipad)/.exec(ua) ||
+        /(iphone)/.exec(ua) ||
+        /(windows)/.exec(ua) ||
+        /(android)/.exec(ua) ||
+        [];
+
+    let browser = match[1] || '';
+
+    if (browser === 'edge') {
+        platform_match = [''];
    }

-    if (browser.edgeUwp) {
-        browser.edge = true;
+    if (browser === 'opr') {
+        browser = 'opera';
    }

-    browser.tv = isTv();
-    browser.operaTv = browser.tv && userAgent.toLowerCase().indexOf('opr/') !== -1;
-
-    if (browser.mobile || browser.tv) {
-        browser.slow = true;
+    let version;
+    if (versionMatch && versionMatch.length > 2) {
+        version = versionMatch[2];
    }

-    if (typeof document !== 'undefined') {
-        /* eslint-disable-next-line compat/compat */
-        if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0)) {
-            browser.touch = true;
-        }
+    version = version || match[2] || '0';
+
+    let versionMajor = parseInt(version.split('.')[0]);
+
+    if (isNaN(versionMajor)) {
+        versionMajor = 0;
    }

-    browser.keyboard = hasKeyboard(browser);
-    browser.supportsCssAnimation = supportsCssAnimation;
+    return {
+        browser: browser,
+        version: version,
+        platform: platform_match[0] || '',
+        versionMajor: versionMajor
+    };
+};

-    browser.osx = userAgent.toLowerCase().indexOf('os x') !== -1;
-    browser.iOS = browser.ipad || browser.iphone || browser.ipod;
+const userAgent = navigator.userAgent;

-    if (browser.iOS) {
-        browser.iOSVersion = iOSversion();
+const matched = uaMatch(userAgent);
+const browser = {};

-        if (browser.iOSVersion && browser.iOSVersion.length >= 2) {
-            browser.iOSVersion = browser.iOSVersion[0] + (browser.iOSVersion[1] / 10);
-        }
+if (matched.browser) {
+    browser[matched.browser] = true;
+    browser.version = matched.version;
+    browser.versionMajor = matched.versionMajor;
+}
+
+if (matched.platform) {
+    browser[matched.platform] = true;
+}
+
+browser.edgeChromium = browser.edg || browser.edga || browser.edgios;
+
+if (!browser.chrome && !browser.edgeChromium && !browser.edge && !browser.opera && userAgent.toLowerCase().indexOf('webkit') !== -1) {
+    browser.safari = true;
+}
+
+if (userAgent.toLowerCase().indexOf('playstation 4') !== -1) {
+    browser.ps4 = true;
+    browser.tv = true;
+}
+
+if (isMobile(userAgent)) {
+    browser.mobile = true;
+}
+
+if (userAgent.toLowerCase().indexOf('xbox') !== -1) {
+    browser.xboxOne = true;
+    browser.tv = true;
+}
+browser.animate = typeof document !== 'undefined' && document.documentElement.animate != null;
+browser.tizen = userAgent.toLowerCase().indexOf('tizen') !== -1 || self.tizen != null;
+browser.web0s = userAgent.toLowerCase().indexOf('Web0S'.toLowerCase()) !== -1;
+browser.edgeUwp = browser.edge && (userAgent.toLowerCase().indexOf('msapphost') !== -1 || userAgent.toLowerCase().indexOf('webview') !== -1);
+
+if (!browser.tizen) {
+    browser.orsay = userAgent.toLowerCase().indexOf('smarthub') !== -1;
+} else {
+    const v = (navigator.appVersion).match(/Tizen (\d+).(\d+)/);
+    browser.tizenVersion = parseInt(v[1]);
+}
+
+if (browser.edgeUwp) {
+    browser.edge = true;
+}
+
+browser.tv = isTv();
+browser.operaTv = browser.tv && userAgent.toLowerCase().indexOf('opr/') !== -1;
+
+if (browser.mobile || browser.tv) {
+    browser.slow = true;
+}
+
+if (typeof document !== 'undefined') {
+    /* eslint-disable-next-line compat/compat */
+    if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0)) {
+        browser.touch = true;
    }
+}

-    return browser;
-});
+browser.keyboard = hasKeyboard(browser);
+browser.supportsCssAnimation = supportsCssAnimation;
+
+browser.osx = userAgent.toLowerCase().indexOf('os x') !== -1;
+browser.iOS = browser.ipad || browser.iphone || browser.ipod;
+
+if (browser.iOS) {
+    browser.iOSVersion = iOSversion();
+
+    if (browser.iOSVersion && browser.iOSVersion.length >= 2) {
+        browser.iOSVersion = browser.iOSVersion[0] + (browser.iOSVersion[1] / 10);
+    }
+}
+
+export default browser;
--- a/src/scripts/browserDeviceProfile.js
+++ b/src/scripts/browserDeviceProfile.js
@ -1,6 +1,8 @@
 define(['browser'], function (browser) {
    'use strict';

+    browser = browser.default || browser;
+
    function canPlayH264(videoTestElement) {
        return !!(videoTestElement.canPlayType && videoTestElement.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
    }
--- a/src/scripts/dom.js
+++ b/src/scripts/dom.js
@ -183,11 +183,9 @@
            width = height * (16.0 / 9.0);
        }

-        const closest = standardWidths.sort(function (a, b) {
+        return standardWidths.sort(function (a, b) {
            return Math.abs(width - a) - Math.abs(width - b);
        })[0];
-
-        return closest;
    }

    /**
--- a/src/scripts/inputManager.js
+++ b/src/scripts/inputManager.js
@ -35,6 +35,7 @@ import appHost from 'apphost';
        if (eventListenerCount) {
            eventListenerCount--;
        }
+
        dom.removeEventListener(scope, 'command', fn, {});
    }

--- a/src/scripts/itembynamedetailpage.js
+++ b/src/scripts/itembynamedetailpage.js
@ -11,7 +11,7 @@ define(['connectionManager', 'listView', 'cardBuilder', 'imageLoader', 'libraryB
            });
        }

-        if (item.ProgramCount && 'Person' == item.Type) {
+        if (item.ProgramCount && item.Type == 'Person') {
            sections.push({
                name: globalize.translate('HeaderUpcomingOnTV'),
                type: 'Program'
@ -65,7 +65,7 @@ define(['connectionManager', 'listView', 'cardBuilder', 'imageLoader', 'libraryB
            var html = '';
            var sectionClass = 'verticalSection';

-            if ('Audio' === section.type) {
+            if (section.type === 'Audio') {
                sectionClass += ' verticalSection-extrabottompadding';
            }

@ -272,7 +272,7 @@ define(['connectionManager', 'listView', 'cardBuilder', 'imageLoader', 'libraryB
            listOptions.items = result.Items;
            var itemsContainer = element.querySelector('.itemsContainer');

-            if ('Audio' == type) {
+            if (type == 'Audio') {
                html = listView.getListViewHtml(listOptions);
                itemsContainer.classList.remove('vertical-wrap');
                itemsContainer.classList.add('vertical-list');
@ -288,23 +288,23 @@ define(['connectionManager', 'listView', 'cardBuilder', 'imageLoader', 'libraryB
    }

    function getMoreItemsHref(item, type) {
-        if ('Genre' == item.Type) {
+        if (item.Type == 'Genre') {
            return 'list.html?type=' + type + '&genreId=' + item.Id + '&serverId=' + item.ServerId;
        }

-        if ('MusicGenre' == item.Type) {
+        if (item.Type == 'MusicGenre') {
            return 'list.html?type=' + type + '&musicGenreId=' + item.Id + '&serverId=' + item.ServerId;
        }

-        if ('Studio' == item.Type) {
+        if (item.Type == 'Studio') {
            return 'list.html?type=' + type + '&studioId=' + item.Id + '&serverId=' + item.ServerId;
        }

-        if ('MusicArtist' == item.Type) {
+        if (item.Type == 'MusicArtist') {
            return 'list.html?type=' + type + '&artistId=' + item.Id + '&serverId=' + item.ServerId;
        }

-        if ('Person' == item.Type) {
+        if (item.Type == 'Person') {
            return 'list.html?type=' + type + '&personId=' + item.Id + '&serverId=' + item.ServerId;
        }

@ -354,7 +354,7 @@ define(['connectionManager', 'listView', 'cardBuilder', 'imageLoader', 'libraryB

            var apiClient = connectionManager.getApiClient(item.ServerId);

-            if ('MusicArtist' === query.IncludeItemTypes) {
+            if (query.IncludeItemTypes === 'MusicArtist') {
                query.IncludeItemTypes = null;
                return apiClient.getAlbumArtists(apiClient.getCurrentUserId(), query);
            }
--- a/src/scripts/libraryBrowser.js
+++ b/src/scripts/libraryBrowser.js
@ -178,9 +178,9 @@ export function showSortMenu (options) {
        html += globalize.translate('HeaderSortOrder');
        html += '</h2>';
        html += '<div>';
-        isChecked = 'Ascending' == options.query.SortOrder ? ' checked' : '';
+        isChecked = options.query.SortOrder == 'Ascending' ? ' checked' : '';
        html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortOrder" value="Ascending" class="menuSortOrder" ' + isChecked + ' /><span>' + globalize.translate('OptionAscending') + '</span></label>';
-        isChecked = 'Descending' == options.query.SortOrder ? ' checked' : '';
+        isChecked = options.query.SortOrder == 'Descending' ? ' checked' : '';
        html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortOrder" value="Descending" class="menuSortOrder" ' + isChecked + ' /><span>' + globalize.translate('OptionDescending') + '</span></label>';
        html += '</div>';
        html += '</div>';
--- a/src/scripts/libraryMenu.js
+++ b/src/scripts/libraryMenu.js
@ -1,6 +1,9 @@
 define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', 'viewManager', 'libraryBrowser', 'appRouter', 'apphost', 'playbackManager', 'syncPlayManager', 'groupSelectionMenu', 'browser', 'globalize', 'scripts/imagehelper', 'paper-icon-button-light', 'material-icons', 'scrollStyles', 'flexStyles'], function (dom, layoutManager, inputManager, connectionManager, events, viewManager, libraryBrowser, appRouter, appHost, playbackManager, syncPlayManager, groupSelectionMenu, browser, globalize, imageHelper) {
    'use strict';

+    playbackManager = playbackManager.default || playbackManager;
+    browser = browser.default || browser;
+
    function renderHeader() {
        var html = '';
        html += '<div class="flex align-items-center flex-grow headerTop">';
@ -309,7 +312,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function isUrlInCurrentView(url) {
-        return -1 !== window.location.href.toString().toLowerCase().indexOf(url.toLowerCase());
+        return window.location.href.toString().toLowerCase().indexOf(url.toLowerCase()) !== -1;
    }

    function updateDashboardMenuSelectedItem() {
@ -323,7 +326,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '

            if (pageIds) {
                pageIds = pageIds.split('|');
-                selected = -1 != pageIds.indexOf(currentViewId);
+                selected = pageIds.indexOf(currentViewId) != -1;
            }

            var pageUrls = link.getAttribute('data-pageurls');
@ -545,7 +548,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
                var view = items[i];
                list.push(view);

-                if ('livetv' == view.CollectionType) {
+                if (view.CollectionType == 'livetv') {
                    view.ImageTags = {};
                    view.icon = 'live_tv';
                    var guideView = Object.assign({}, view);
@ -604,12 +607,10 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
                    var icon = i.icon || imageHelper.getLibraryIcon(i.CollectionType);
                    var itemId = i.Id;

-                    const linkHtml = `<a is="emby-linkbutton" data-itemid="${itemId}" class="lnkMediaFolder navMenuOption" href="${getItemHref(i, i.CollectionType)}">
+                    return `<a is="emby-linkbutton" data-itemid="${itemId}" class="lnkMediaFolder navMenuOption" href="${getItemHref(i, i.CollectionType)}">
                                    <span class="material-icons navMenuOptionIcon ${icon}"></span>
                                    <span class="sectionName navMenuOptionText">${i.Name}</span>
                                  </a>`;
-
-                    return linkHtml;
                }).join('');
                libraryMenuOptions.innerHTML = html;
                var elem = libraryMenuOptions;
@ -673,15 +674,15 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
            var lnkMediaFolder = elems[i];
            var itemId = lnkMediaFolder.getAttribute('data-itemid');

-            if (isChannelsPage && 'channels' === itemId) {
+            if (isChannelsPage && itemId === 'channels') {
                lnkMediaFolder.classList.add('navMenuOption-selected');
-            } else if (isLiveTvPage && 'livetv' === itemId) {
+            } else if (isLiveTvPage && itemId === 'livetv') {
                lnkMediaFolder.classList.add('navMenuOption-selected');
-            } else if (isEditorPage && 'editor' === itemId) {
+            } else if (isEditorPage && itemId === 'editor') {
                lnkMediaFolder.classList.add('navMenuOption-selected');
-            } else if (isMySyncPage && 'manageoffline' === itemId && -1 != window.location.href.toString().indexOf('mode=download')) {
+            } else if (isMySyncPage && itemId === 'manageoffline' && window.location.href.toString().indexOf('mode=download') != -1) {
                lnkMediaFolder.classList.add('navMenuOption-selected');
-            } else if (isMySyncPage && 'syncotherdevices' === itemId && -1 == window.location.href.toString().indexOf('mode=download')) {
+            } else if (isMySyncPage && itemId === 'syncotherdevices' && window.location.href.toString().indexOf('mode=download') == -1) {
                lnkMediaFolder.classList.add('navMenuOption-selected');
            } else if (id && itemId == id) {
                lnkMediaFolder.classList.add('navMenuOption-selected');
@ -755,7 +756,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
        }

        if (headerBackButton) {
-            if ('false' !== page.getAttribute('data-backbutton') && appRouter.canGoBack()) {
+            if (page.getAttribute('data-backbutton') !== 'false' && appRouter.canGoBack()) {
                headerBackButton.classList.remove('hide');
            } else {
                headerBackButton.classList.add('hide');
@ -865,11 +866,11 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
            document.title = 'Jellyfin';
        },
        setTitle: function (title) {
-            if (null == title) {
+            if (title == null) {
                return void LibraryMenu.setDefaultTitle();
            }

-            if ('-' === title) {
+            if (title === '-') {
                title = '';
            }

@ -924,7 +925,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
                }
            }

-            if ('library' !== currentDrawerType) {
+            if (currentDrawerType !== 'library') {
                refreshLibraryDrawer();
            }
        }
--- a/src/scripts/mouseManager.js
+++ b/src/scripts/mouseManager.js
@ -1,10 +1,15 @@
-define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'dom'], function (inputManager, focusManager, browser, layoutManager, events, dom) {
-    'use strict';
+import inputManager from 'inputManager';
+import focusManager from 'focusManager';
+import browser from 'browser';
+import layoutManager from 'layoutManager';
+import events from 'events';
+import dom from 'dom';
+/* eslint-disable indent */

-    var self = {};
+    const self = {};

-    var lastMouseInputTime = new Date().getTime();
-    var isMouseIdle;
+    let lastMouseInputTime = new Date().getTime();
+    let isMouseIdle;

    function mouseIdleTime() {
        return new Date().getTime() - lastMouseInputTime;
@ -15,14 +20,14 @@ define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'd
    }

    function removeIdleClasses() {
-        var classList = document.body.classList;
+        const classList = document.body.classList;

        classList.remove('mouseIdle');
        classList.remove('mouseIdle-tv');
    }

    function addIdleClasses() {
-        var classList = document.body.classList;
+        const classList = document.body.classList;

        classList.add('mouseIdle');

@ -31,17 +36,33 @@ define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'd
        }
    }

-    var lastPointerMoveData;
+    export function showCursor() {
+        if (isMouseIdle) {
+            isMouseIdle = false;
+            removeIdleClasses();
+            events.trigger(self, 'mouseactive');
+        }
+    }
+
+    export function hideCursor() {
+        if (!isMouseIdle) {
+            isMouseIdle = true;
+            addIdleClasses();
+            events.trigger(self, 'mouseidle');
+        }
+    }
+
+    let lastPointerMoveData;
    function onPointerMove(e) {
-        var eventX = e.screenX;
-        var eventY = e.screenY;
+        const eventX = e.screenX;
+        const eventY = e.screenY;

        // if coord don't exist how could it move
        if (typeof eventX === 'undefined' && typeof eventY === 'undefined') {
            return;
        }

-        var obj = lastPointerMoveData;
+        const obj = lastPointerMoveData;
        if (!obj) {
            lastPointerMoveData = {
                x: eventX,
@ -61,19 +82,15 @@ define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'd
        lastMouseInputTime = new Date().getTime();
        notifyApp();

-        if (isMouseIdle) {
-            isMouseIdle = false;
-            removeIdleClasses();
-            events.trigger(self, 'mouseactive');
-        }
+        showCursor();
    }

    function onPointerEnter(e) {
-        var pointerType = e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
+        const pointerType = e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');

        if (pointerType === 'mouse') {
            if (!isMouseIdle) {
-                var parent = focusManager.focusableParent(e.target);
+                const parent = focusManager.focusableParent(e.target);
                if (parent) {
                    focusManager.focus(parent);
                }
@ -99,13 +116,11 @@ define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'd

    function onMouseInterval() {
        if (!isMouseIdle && mouseIdleTime() >= 5000) {
-            isMouseIdle = true;
-            addIdleClasses();
-            events.trigger(self, 'mouseidle');
+            hideCursor();
        }
    }

-    var mouseInterval;
+    let mouseInterval;
    function startMouseInterval() {
        if (!mouseInterval) {
            mouseInterval = setInterval(onMouseInterval, 5000);
@ -113,7 +128,7 @@ define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'd
    }

    function stopMouseInterval() {
-        var interval = mouseInterval;
+        const interval = mouseInterval;

        if (interval) {
            clearInterval(interval);
@ -157,5 +172,10 @@ define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'd

    events.on(layoutManager, 'modechange', initMouse);

-    return self;
-});
+/* eslint-enable indent */
+
+export default {
+    hideCursor,
+    showCursor
+};
+
--- a/src/scripts/playlists.js
+++ b/src/scripts/playlists.js
@ -60,7 +60,7 @@ export default function (view, params) {
        const viewStyle = getPageData(view).view;
        const itemsContainer = view.querySelector('.itemsContainer');

-        if ('List' == viewStyle) {
+        if (viewStyle == 'List') {
            itemsContainer.classList.add('vertical-list');
            itemsContainer.classList.remove('vertical-wrap');
        } else {
--- a/src/scripts/routes.js
+++ b/src/scripts/routes.js
@ -1,18 +1,21 @@
-define([
-    'jQuery',
-    'emby-button',
-    'emby-input',
-    'scripts/livetvcomponents',
-    'paper-icon-button-light',
-    'emby-itemscontainer',
-    'emby-collapse',
-    'emby-select',
-    'livetvcss',
-    'emby-checkbox',
-    'emby-slider',
-    'listViewStyle',
-    'dashboardcss',
-    'detailtablecss'], function () {
+import 'emby-button';
+import 'emby-input';
+import 'scripts/livetvcomponents';
+import 'paper-icon-button-light';
+import 'emby-itemscontainer';
+import 'emby-collapse';
+import 'emby-select';
+import 'livetvcss';
+import 'emby-checkbox';
+import 'emby-slider';
+import 'listViewStyle';
+import 'dashboardcss';
+import 'detailtablecss';
+
+/* eslint-disable indent */
+
+    console.groupCollapsed('defining core routes');
+
    function defineRoute(newRoute) {
        var path = newRoute.alias ? newRoute.alias : newRoute.path;
        console.debug('defining route: ' + path);
@ -20,8 +23,6 @@ define([
        Emby.Page.addRoute(path, newRoute);
    }

-    console.debug('defining core routes');
-
    defineRoute({
        alias: '/addserver.html',
        path: '/controllers/session/addServer/index.html',
@ -30,6 +31,7 @@ define([
        startup: true,
        controller: 'session/addServer/index'
    });
+
    defineRoute({
        alias: '/selectserver.html',
        path: '/controllers/session/selectServer/index.html',
@ -39,6 +41,7 @@ define([
        controller: 'session/selectServer/index',
        type: 'selectserver'
    });
+
    defineRoute({
        alias: '/login.html',
        path: '/controllers/session/login/index.html',
@ -48,6 +51,7 @@ define([
        controller: 'session/login/index',
        type: 'login'
    });
+
    defineRoute({
        alias: '/forgotpassword.html',
        path: '/controllers/session/forgotPassword/index.html',
@ -55,6 +59,7 @@ define([
        startup: true,
        controller: 'session/forgotPassword/index'
    });
+
    defineRoute({
        alias: '/forgotpasswordpin.html',
        path: '/controllers/session/redeemPassword/index.html',
@ -68,42 +73,41 @@ define([
        alias: '/mypreferencesmenu.html',
        path: '/controllers/user/menu/index.html',
        autoFocus: false,
-        transition: 'fade',
        controller: 'user/menu/index'
    });
+
    defineRoute({
        alias: '/myprofile.html',
        path: '/controllers/user/profile/index.html',
        autoFocus: false,
-        transition: 'fade',
        controller: 'user/profile/index'
    });
+
    defineRoute({
        alias: '/mypreferencesdisplay.html',
        path: '/controllers/user/display/index.html',
        autoFocus: false,
-        transition: 'fade',
        controller: 'user/display/index'
    });
+
    defineRoute({
        alias: '/mypreferenceshome.html',
        path: '/controllers/user/home/index.html',
        autoFocus: false,
-        transition: 'fade',
        controller: 'user/home/index'
    });
+
    defineRoute({
        alias: '/mypreferencesplayback.html',
        path: '/controllers/user/playback/index.html',
        autoFocus: false,
-        transition: 'fade',
        controller: 'user/playback/index'
    });
+
    defineRoute({
        alias: '/mypreferencessubtitles.html',
        path: '/controllers/user/subtitles/index.html',
        autoFocus: false,
-        transition: 'fade',
        controller: 'user/subtitles/index'
    });

@ -113,42 +117,49 @@ define([
        roles: 'admin',
        controller: 'dashboard/dashboard'
    });
+
    defineRoute({
        path: '/dashboardgeneral.html',
        controller: 'dashboard/general',
        autoFocus: false,
        roles: 'admin'
    });
+
    defineRoute({
        path: '/networking.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/networking'
    });
+
    defineRoute({
        path: '/devices.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/devices/devices'
    });
+
    defineRoute({
        path: '/device.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/devices/device'
    });
+
    defineRoute({
        path: '/dlnaprofile.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/dlna/profile'
    });
+
    defineRoute({
        path: '/dlnaprofiles.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/dlna/profiles'
    });
+
    defineRoute({
        alias: '/addplugin.html',
        path: '/controllers/dashboard/plugins/add/index.html',
@ -156,52 +167,61 @@ define([
        roles: 'admin',
        controller: 'dashboard/plugins/add/index'
    });
+
    defineRoute({
        path: '/library.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/mediaLibrary'
    });
+
    defineRoute({
        path: '/librarydisplay.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/librarydisplay'
    });
+
    defineRoute({
        path: '/dlnasettings.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/dlna/settings'
    });
+
    defineRoute({
        path: '/edititemmetadata.html',
        controller: 'edititemmetadata',
        autoFocus: false
    });
+
    defineRoute({
        path: '/encodingsettings.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/encodingsettings'
    });
+
    defineRoute({
        path: '/log.html',
        roles: 'admin',
        controller: 'dashboard/logs'
    });
+
    defineRoute({
        path: '/metadataimages.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/metadataImages'
    });
+
    defineRoute({
        path: '/metadatanfo.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/metadatanfo'
    });
+
    defineRoute({
        alias: '/notificationsetting.html',
        path: '/controllers/dashboard/notifications/notification/index.html',
@ -209,6 +229,7 @@ define([
        roles: 'admin',
        controller: 'dashboard/notifications/notification/index'
    });
+
    defineRoute({
        alias: '/notificationsettings.html',
        path: '/controllers/dashboard/notifications/notifications/index.html',
@ -216,12 +237,14 @@ define([
        autoFocus: false,
        roles: 'admin'
    });
+
    defineRoute({
        path: '/playbackconfiguration.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/playback'
    });
+
    defineRoute({
        alias: '/availableplugins.html',
        path: '/controllers/dashboard/plugins/available/index.html',
@ -229,6 +252,7 @@ define([
        roles: 'admin',
        controller: 'dashboard/plugins/available/index'
    });
+
    defineRoute({
        alias: '/repositories.html',
        path: '/controllers/dashboard/plugins/repositories/index.html',
@ -241,67 +265,72 @@ define([
        path: '/home.html',
        autoFocus: false,
        controller: 'home',
-        transition: 'fade',
        type: 'home'
    });
+
    defineRoute({
        path: '/search.html',
        controller: 'searchpage'
    });
+
    defineRoute({
        path: '/list.html',
        autoFocus: false,
-        controller: 'list',
-        transition: 'fade'
+        controller: 'list'
    });
+
    defineRoute({
        alias: '/details',
        path: '/controllers/itemDetails/index.html',
        controller: 'itemDetails/index',
-        autoFocus: false,
-        transition: 'fade'
+        autoFocus: false
    });
+
    defineRoute({
        path: '/livetv.html',
        controller: 'livetv/livetvsuggested',
-        autoFocus: false,
-        transition: 'fade'
+        autoFocus: false
    });
+
    defineRoute({
        path: '/livetvguideprovider.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'livetvguideprovider'
    });
+
    defineRoute({
        path: '/livetvsettings.html',
        autoFocus: false,
        controller: 'livetvsettings'
    });
+
    defineRoute({
        path: '/livetvstatus.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'livetvstatus'
    });
+
    defineRoute({
        path: '/livetvtuner.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'livetvtuner'
    });
+
    defineRoute({
        path: '/movies.html',
        autoFocus: false,
-        controller: 'movies/moviesrecommended',
-        transition: 'fade'
+        controller: 'movies/moviesrecommended'
    });
+
    defineRoute({
        path: '/music.html',
        controller: 'music/musicrecommended',
-        autoFocus: false,
-        transition: 'fade'
+        autoFocus: false
    });
+
    defineRoute({
        alias: '/installedplugins.html',
        path: '/controllers/dashboard/plugins/installed/index.html',
@ -309,41 +338,46 @@ define([
        roles: 'admin',
        controller: 'dashboard/plugins/installed/index'
    });
+
    defineRoute({
        path: '/scheduledtask.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/scheduledtasks/scheduledtask'
    });
+
    defineRoute({
        path: '/scheduledtasks.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/scheduledtasks/scheduledtasks'
    });
+
    defineRoute({
        path: '/serveractivity.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/serveractivity'
    });
+
    defineRoute({
        path: '/apikeys.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/apikeys'
    });
+
    defineRoute({
        path: '/streamingsettings.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/streaming'
    });
+
    defineRoute({
        path: '/tv.html',
        autoFocus: false,
-        controller: 'shows/tvrecommended',
-        transition: 'fade'
+        controller: 'shows/tvrecommended'
    });

    defineRoute({
@ -352,29 +386,34 @@ define([
        roles: 'admin',
        controller: 'dashboard/users/useredit'
    });
+
    defineRoute({
        path: '/userlibraryaccess.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/users/userlibraryaccess'
    });
+
    defineRoute({
        path: '/usernew.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/users/usernew'
    });
+
    defineRoute({
        path: '/userparentalcontrol.html',
        autoFocus: false,
        roles: 'admin',
        controller: 'dashboard/users/userparentalcontrol'
    });
+
    defineRoute({
        path: '/userpassword.html',
        autoFocus: false,
        controller: 'dashboard/users/userpasswordpage'
    });
+
    defineRoute({
        path: '/userprofiles.html',
        autoFocus: false,
@ -389,6 +428,7 @@ define([
        anonymous: true,
        controller: 'wizard/remote/index'
    });
+
    defineRoute({
        alias: '/wizardfinish.html',
        path: '/controllers/wizard/finish/index.html',
@ -396,12 +436,14 @@ define([
        anonymous: true,
        controller: 'wizard/finish/index'
    });
+
    defineRoute({
        path: '/wizardlibrary.html',
        autoFocus: false,
        anonymous: true,
        controller: 'dashboard/mediaLibrary'
    });
+
    defineRoute({
        alias: '/wizardsettings.html',
        path: '/controllers/wizard/settings/index.html',
@ -409,6 +451,7 @@ define([
        anonymous: true,
        controller: 'wizard/settings/index'
    });
+
    defineRoute({
        alias: '/wizardstart.html',
        path: '/controllers/wizard/start/index.html',
@ -416,6 +459,7 @@ define([
        anonymous: true,
        controller: 'wizard/start/index'
    });
+
    defineRoute({
        alias: '/wizarduser.html',
        path: '/controllers/wizard/user/index.html',
@ -427,7 +471,6 @@ define([
    defineRoute({
        alias: '/video',
        path: '/controllers/playback/video/index.html',
-        transition: 'fade',
        controller: 'playback/video/index',
        autoFocus: false,
        type: 'video-osd',
@ -435,16 +478,17 @@ define([
        fullscreen: true,
        enableMediaControl: false
    });
+
    defineRoute({
        alias: '/queue',
        path: '/controllers/playback/queue/index.html',
        controller: 'playback/queue/index',
        autoFocus: false,
-        transition: 'fade',
        fullscreen: true,
        supportsThemeMedia: true,
        enableMediaControl: false
    });
+
    defineRoute({
        path: '/configurationpage',
        autoFocus: false,
@ -458,9 +502,13 @@ define([
        isDefaultRoute: true,
        autoFocus: false
    });
+
    defineRoute({
        path: '/index.html',
        autoFocus: false,
        isDefaultRoute: true
    });
-});
+
+    console.groupEnd('defining core routes');
+
+/* eslint-enable indent */
--- a/src/scripts/scrollHelper.js
+++ b/src/scripts/scrollHelper.js
@ -1,6 +1,8 @@
 define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
    'use strict';

+    focusManager = focusManager.default || focusManager;
+
    function getBoundingClientRect(elem) {
        // Support: BlackBerry 5, iOS 3 (original iPhone)
        // If we don't have gBCR, just use 0,0 rather than error
--- a/src/scripts/serverNotifications.js
+++ b/src/scripts/serverNotifications.js
@ -1,6 +1,9 @@
 define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'inputManager', 'focusManager', 'appRouter'], function (connectionManager, playbackManager, syncPlayManager, events, inputManager, focusManager, appRouter) {
    'use strict';

+    playbackManager = playbackManager.default || playbackManager;
+    focusManager = focusManager.default || focusManager;
+
    var serverNotifications = {};

    function notifyApp() {
--- a/src/scripts/settings/appSettings.js
+++ b/src/scripts/settings/appSettings.js
@ -80,43 +80,6 @@ import events from 'events';
        return val ? parseInt(val) : null;
    }

-    export function syncOnlyOnWifi(val) {
-        if (val !== undefined) {
-            this.set('syncOnlyOnWifi', val.toString());
-        }
-
-        return this.get('syncOnlyOnWifi') !== 'false';
-    }
-
-    export function syncPath(val) {
-        if (val !== undefined) {
-            this.set('syncPath', val);
-        }
-
-        return this.get('syncPath');
-    }
-
-    export function cameraUploadServers(val) {
-        if (val !== undefined) {
-            this.set('cameraUploadServers', val.join(','));
-        }
-
-        val = this.get('cameraUploadServers');
-        if (val) {
-            return val.split(',');
-        }
-
-        return [];
-    }
-
-    export function runAtStartup(val) {
-        if (val !== undefined) {
-            this.set('runatstartup', val.toString());
-        }
-
-        return this.get('runatstartup') === 'true';
-    }
-
    export function set(name, value, userId) {
        const currentValue = this.get(name, userId);
        appStorage.setItem(getKey(name, userId), value);
@ -139,10 +102,6 @@ export default {
    maxStreamingBitrate: maxStreamingBitrate,
    maxStaticMusicBitrate: maxStaticMusicBitrate,
    maxChromecastBitrate: maxChromecastBitrate,
-    syncOnlyOnWifi: syncOnlyOnWifi,
-    syncPath: syncPath,
-    cameraUploadServers: cameraUploadServers,
-    runAtStartup: runAtStartup,
    set: set,
    get: get
 };
--- a/src/scripts/settings/webSettings.js
+++ b/src/scripts/settings/webSettings.js
@ -18,7 +18,7 @@ function getDefaultConfig() {
    });
 }

-export function enableMultiServer() {
+export function getMultiServer() {
    return getConfig().then(config => {
        return config.multiserver;
    }).catch(error => {
@ -26,3 +26,21 @@ export function enableMultiServer() {
        return false;
    });
 }
+
+export function getThemes() {
+    return getConfig().then(config => {
+        return config.themes;
+    }).catch(error => {
+        console.log('cannot get web config:', error);
+        return [];
+    });
+}
+
+export function getPlugins() {
+    return getConfig().then(config => {
+        return config.plugins;
+    }).catch(error => {
+        console.log('cannot get web config:', error);
+        return [];
+    });
+}
--- a/src/scripts/site.js
+++ b/src/scripts/site.js
@ -6,7 +6,7 @@ function getWindowLocationSearch(win) {
    if (!search) {
        var index = window.location.href.indexOf('?');

-        if (-1 != index) {
+        if (index != -1) {
            search = window.location.href.substring(index);
        }
    }
@ -22,7 +22,7 @@ window.getParameterByName = function (name, url) {
    var regex = new RegExp(regexS, 'i');
    var results = regex.exec(url || getWindowLocationSearch());

-    if (null == results) {
+    if (results == null) {
        return '';
    }

@ -73,7 +73,7 @@ var Dashboard = {
        var urlLower = window.location.href.toLowerCase();
        var index = urlLower.lastIndexOf('/web');

-        if (-1 != index) {
+        if (index != -1) {
            return urlLower.substring(0, index);
        }

@ -152,13 +152,13 @@ var Dashboard = {
    processPluginConfigurationUpdateResult: function () {
        require(['loading', 'toast'], function (loading, toast) {
            loading.hide();
-            toast(Globalize.translate('MessageSettingsSaved'));
+            toast.default(Globalize.translate('MessageSettingsSaved'));
        });
    },
    processServerConfigurationUpdateResult: function (result) {
        require(['loading', 'toast'], function (loading, toast) {
            loading.hide();
-            toast(Globalize.translate('MessageSettingsSaved'));
+            toast.default(Globalize.translate('MessageSettingsSaved'));
        });
    },
    processErrorResponse: function (response) {
@ -178,9 +178,9 @@ var Dashboard = {
        });
    },
    alert: function (options) {
-        if ('string' == typeof options) {
+        if (typeof options == 'string') {
            return void require(['toast'], function (toast) {
-                toast({
+                toast.default({
                    text: options
                });
            });
@ -197,7 +197,7 @@ var Dashboard = {
        var capabilities = {
            PlayableMediaTypes: ['Audio', 'Video'],
            SupportedCommands: ['MoveUp', 'MoveDown', 'MoveLeft', 'MoveRight', 'PageUp', 'PageDown', 'PreviousLetter', 'NextLetter', 'ToggleOsd', 'ToggleContextMenu', 'Select', 'Back', 'SendKey', 'SendString', 'GoHome', 'GoToSettings', 'VolumeUp', 'VolumeDown', 'Mute', 'Unmute', 'ToggleMute', 'SetVolume', 'SetAudioStreamIndex', 'SetSubtitleStreamIndex', 'DisplayContent', 'GoToSearch', 'DisplayMessage', 'SetRepeatMode', 'SetShuffleQueue', 'ChannelUp', 'ChannelDown', 'PlayMediaSource', 'PlayTrailers'],
-            SupportsPersistentIdentifier: 'cordova' === self.appMode || 'android' === self.appMode,
+            SupportsPersistentIdentifier: self.appMode === 'cordova' || self.appMode === 'android',
            SupportsMediaControl: true
        };
        appHost.getPushTokenInfo();
@ -452,8 +452,8 @@ function initClient() {
    }

    function onGlobalizeInit(browser, globalize) {
-        if ('android' === self.appMode) {
-            if (-1 !== self.location.href.toString().toLowerCase().indexOf('start=backgroundsync')) {
+        if (self.appMode === 'android') {
+            if (self.location.href.toString().toLowerCase().indexOf('start=backgroundsync') !== -1) {
                return onAppReady(browser);
            }
        }
@ -477,36 +477,30 @@ function initClient() {

    function loadPlugins(appHost, browser, shell) {
        console.debug('loading installed plugins');
-        var list = [
-            'plugins/playAccessValidation/plugin',
-            'plugins/experimentalWarnings/plugin',
-            'plugins/htmlAudioPlayer/plugin',
-            'plugins/htmlVideoPlayer/plugin',
-            'plugins/photoPlayer/plugin',
-            'plugins/bookPlayer/plugin',
-            'plugins/youtubePlayer/plugin',
-            'plugins/backdropScreensaver/plugin',
-            'plugins/logoScreensaver/plugin'
-        ];
-
-        if (appHost.supports('remotecontrol')) {
-            list.push('plugins/sessionPlayer/plugin');
-
-            if (browser.chrome || browser.edgeChromium || browser.opera) {
-                list.push('plugins/chromecastPlayer/plugin');
-            }
-        }
-
-        if (window.NativeShell) {
-            list = list.concat(window.NativeShell.getPlugins());
-        }
-
        return new Promise(function (resolve, reject) {
-            Promise.all(list.map(loadPlugin)).then(function () {
-                require(['packageManager'], function (packageManager) {
-                    packageManager.init().then(resolve, reject);
+            require(['webSettings'], function (webSettings) {
+                webSettings.getPlugins().then(function (list) {
+                    // these two plugins are dependent on features
+                    if (!appHost.supports('remotecontrol')) {
+                        list.splice(list.indexOf('sessionPlayer'), 1);
+
+                        if (!browser.chrome && !browser.opera) {
+                            list.splice(list.indexOf('chromecastPlayer', 1));
+                        }
+                    }
+
+                    // add any native plugins
+                    if (window.NativeShell) {
+                        list = list.concat(window.NativeShell.getPlugins());
+                    }
+
+                    Promise.all(list.map(loadPlugin)).then(function () {
+                        require(['packageManager'], function (packageManager) {
+                            packageManager.init().then(resolve, reject);
+                        });
+                    }, reject);
                });
-            }, reject);
+            });
        });
    }

@ -532,7 +526,7 @@ function initClient() {

            window.Emby.Page = appRouter;

-            require(['emby-button', 'scripts/themeLoader', 'libraryMenu', 'scripts/routes'], function () {
+            require(['emby-button', 'scripts/autoThemes', 'libraryMenu', 'scripts/routes'], function () {
                Emby.Page.start({
                    click: false,
                    hashbang: true
@ -621,6 +615,7 @@ function initClient() {
    }

    var localApiClient;
+    let promise;

    (function () {
        var urlArgs = 'v=' + (window.dashboardVersion || new Date().getDate());
@ -653,8 +648,7 @@ function initClient() {
            nowPlayingHelper: componentsPath + '/playback/nowplayinghelper',
            pluginManager: componentsPath + '/pluginManager',
            packageManager: componentsPath + '/packageManager',
-            screensaverManager: componentsPath + '/screensavermanager',
-            chromecastHelper: 'plugins/chromecastPlayer/chromecastHelpers'
+            screensaverManager: componentsPath + '/screensavermanager'
        };

        requirejs.onError = onRequireJsError;
@ -703,20 +697,12 @@ function initClient() {
            onError: onRequireJsError
        });

-        require(['fetch']);
-        require(['polyfill']);
-        require(['fast-text-encoding']);
-        require(['intersection-observer']);
-        require(['classlist-polyfill']);
-
-        // Expose jQuery globally
-        require(['jQuery'], function(jQuery) {
-            window.$ = jQuery;
-            window.jQuery = jQuery;
-        });
-
-        require(['css!assets/css/site']);
-        require(['jellyfin-noto']);
+        promise = require(['fetch'])
+            .then(() => require(['jQuery', 'polyfill', 'fast-text-encoding', 'intersection-observer', 'classlist-polyfill', 'css!assets/css/site', 'jellyfin-noto'], (jQuery) => {
+                // Expose jQuery globally
+                window.$ = jQuery;
+                window.jQuery = jQuery;
+            }));

        // define styles
        // TODO determine which of these files can be moved to the components themselves
@ -848,7 +834,7 @@ function initClient() {
        define('viewContainer', [componentsPath + '/viewContainer'], returnFirstDependency);
        define('dialogHelper', [componentsPath + '/dialogHelper/dialogHelper'], returnFirstDependency);
        define('serverNotifications', [scriptsPath + '/serverNotifications'], returnFirstDependency);
-        define('skinManager', [componentsPath + '/skinManager'], returnFirstDependency);
+        define('skinManager', [scriptsPath + '/themeManager'], returnFirstDependency);
        define('keyboardnavigation', [scriptsPath + '/keyboardNavigation'], returnFirstDependency);
        define('mouseManager', [scriptsPath + '/mouseManager'], returnFirstDependency);
        define('scrollManager', [componentsPath + '/scrollManager'], returnFirstDependency);
@ -863,7 +849,7 @@ function initClient() {
        });
        define('appRouter', [componentsPath + '/appRouter', 'itemHelper'], function (appRouter, itemHelper) {
            function showItem(item, serverId, options) {
-                if ('string' == typeof item) {
+                if (typeof item == 'string') {
                    require(['connectionManager'], function (connectionManager) {
                        var apiClient = connectionManager.currentApiClient();
                        apiClient.getItem(apiClient.getCurrentUserId(), item).then(function (item) {
@ -871,7 +857,7 @@ function initClient() {
                        });
                    });
                } else {
-                    if (2 == arguments.length) {
+                    if (arguments.length == 2) {
                        options = arguments[1];
                    }

@ -953,27 +939,27 @@ function initClient() {
                var itemType = item.Type || (options ? options.itemType : null);
                var serverId = item.ServerId || options.serverId;

-                if ('settings' === item) {
+                if (item === 'settings') {
                    return 'mypreferencesmenu.html';
                }

-                if ('wizard' === item) {
+                if (item === 'wizard') {
                    return 'wizardstart.html';
                }

-                if ('manageserver' === item) {
+                if (item === 'manageserver') {
                    return 'dashboard.html';
                }

-                if ('recordedtv' === item) {
+                if (item === 'recordedtv') {
                    return 'livetv.html?tab=3&serverId=' + options.serverId;
                }

-                if ('nextup' === item) {
+                if (item === 'nextup') {
                    return 'list.html?type=nextup&serverId=' + options.serverId;
                }

-                if ('list' === item) {
+                if (item === 'list') {
                    var url = 'list.html?serverId=' + options.serverId + '&type=' + options.itemTypes;

                    if (options.isFavorite) {
@ -983,61 +969,61 @@ function initClient() {
                    return url;
                }

-                if ('livetv' === item) {
-                    if ('programs' === options.section) {
+                if (item === 'livetv') {
+                    if (options.section === 'programs') {
                        return 'livetv.html?tab=0&serverId=' + options.serverId;
                    }
-                    if ('guide' === options.section) {
+                    if (options.section === 'guide') {
                        return 'livetv.html?tab=1&serverId=' + options.serverId;
                    }

-                    if ('movies' === options.section) {
+                    if (options.section === 'movies') {
                        return 'list.html?type=Programs&IsMovie=true&serverId=' + options.serverId;
                    }

-                    if ('shows' === options.section) {
+                    if (options.section === 'shows') {
                        return 'list.html?type=Programs&IsSeries=true&IsMovie=false&IsNews=false&serverId=' + options.serverId;
                    }

-                    if ('sports' === options.section) {
+                    if (options.section === 'sports') {
                        return 'list.html?type=Programs&IsSports=true&serverId=' + options.serverId;
                    }

-                    if ('kids' === options.section) {
+                    if (options.section === 'kids') {
                        return 'list.html?type=Programs&IsKids=true&serverId=' + options.serverId;
                    }

-                    if ('news' === options.section) {
+                    if (options.section === 'news') {
                        return 'list.html?type=Programs&IsNews=true&serverId=' + options.serverId;
                    }

-                    if ('onnow' === options.section) {
+                    if (options.section === 'onnow') {
                        return 'list.html?type=Programs&IsAiring=true&serverId=' + options.serverId;
                    }

-                    if ('dvrschedule' === options.section) {
+                    if (options.section === 'dvrschedule') {
                        return 'livetv.html?tab=4&serverId=' + options.serverId;
                    }

-                    if ('seriesrecording' === options.section) {
+                    if (options.section === 'seriesrecording') {
                        return 'livetv.html?tab=5&serverId=' + options.serverId;
                    }

                    return 'livetv.html?serverId=' + options.serverId;
                }

-                if ('SeriesTimer' == itemType) {
+                if (itemType == 'SeriesTimer') {
                    return 'details?seriesTimerId=' + id + '&serverId=' + serverId;
                }

-                if ('livetv' == item.CollectionType) {
+                if (item.CollectionType == 'livetv') {
                    return 'livetv.html';
                }

-                if ('Genre' === item.Type) {
+                if (item.Type === 'Genre') {
                    url = 'list.html?genreId=' + item.Id + '&serverId=' + serverId;

-                    if ('livetv' === context) {
+                    if (context === 'livetv') {
                        url += '&type=Programs';
                    }

@ -1048,7 +1034,7 @@ function initClient() {
                    return url;
                }

-                if ('MusicGenre' === item.Type) {
+                if (item.Type === 'MusicGenre') {
                    url = 'list.html?musicGenreId=' + item.Id + '&serverId=' + serverId;

                    if (options.parentId) {
@ -1058,7 +1044,7 @@ function initClient() {
                    return url;
                }

-                if ('Studio' === item.Type) {
+                if (item.Type === 'Studio') {
                    url = 'list.html?studioId=' + item.Id + '&serverId=' + serverId;

                    if (options.parentId) {
@ -1068,28 +1054,28 @@ function initClient() {
                    return url;
                }

-                if ('folders' !== context && !itemHelper.isLocalItem(item)) {
-                    if ('movies' == item.CollectionType) {
+                if (context !== 'folders' && !itemHelper.isLocalItem(item)) {
+                    if (item.CollectionType == 'movies') {
                        url = 'movies.html?topParentId=' + item.Id;

-                        if (options && 'latest' === options.section) {
+                        if (options && options.section === 'latest') {
                            url += '&tab=1';
                        }

                        return url;
                    }

-                    if ('tvshows' == item.CollectionType) {
+                    if (item.CollectionType == 'tvshows') {
                        url = 'tv.html?topParentId=' + item.Id;

-                        if (options && 'latest' === options.section) {
+                        if (options && options.section === 'latest') {
                            url += '&tab=2';
                        }

                        return url;
                    }

-                    if ('music' == item.CollectionType) {
+                    if (item.CollectionType == 'music') {
                        return 'music.html?topParentId=' + item.Id;
                    }
                }
@ -1102,7 +1088,7 @@ function initClient() {

                var contextSuffix = context ? '&context=' + context : '';

-                if ('Series' == itemType || 'Season' == itemType || 'Episode' == itemType) {
+                if (itemType == 'Series' || itemType == 'Season' || itemType == 'Episode') {
                    return 'details?id=' + id + contextSuffix + '&serverId=' + serverId;
                }

@ -1122,7 +1108,7 @@ function initClient() {
        });
    })();

-    return onWebComponentsReady();
+    promise.then(onWebComponentsReady);
 }

 initClient();
--- a/src/scripts/themeLoader.js
+++ b/src/scripts/themeLoader.js
@ -1,29 +0,0 @@
-import * as userSettings from 'userSettings';
-import skinManager from 'skinManager';
-import connectionManager from 'connectionManager';
-import events from 'events';
-
-var currentViewType;
-pageClassOn('viewbeforeshow', 'page', function () {
-    var classList = this.classList;
-    var viewType = classList.contains('type-interior') || classList.contains('wizardPage') ? 'a' : 'b';
-
-    if (viewType !== currentViewType) {
-        currentViewType = viewType;
-        var theme;
-        var context;
-
-        if ('a' === viewType) {
-            theme = userSettings.dashboardTheme();
-            context = 'serverdashboard';
-        } else {
-            theme = userSettings.theme();
-        }
-
-        skinManager.setTheme(theme, context);
-    }
-});
-
-events.on(connectionManager, 'localusersignedin', function (e, user) {
-    currentViewType = null;
-});
--- a/src/scripts/themeManager.js
+++ b/src/scripts/themeManager.js
@ -0,0 +1,66 @@
+import * as webSettings from 'webSettings';
+
+var themeStyleElement;
+var currentThemeId;
+
+function unloadTheme() {
+    var elem = themeStyleElement;
+    if (elem) {
+        elem.parentNode.removeChild(elem);
+        themeStyleElement = null;
+        currentThemeId = null;
+    }
+}
+
+function getThemes() {
+    return webSettings.getThemes();
+}
+
+function getThemeStylesheetInfo(id) {
+    return getThemes().then(themes => {
+        var theme = themes.find(theme => {
+            return id ? theme.id === id : theme.default;
+        });
+
+        return {
+            stylesheetPath: 'themes/' + theme.id + '/theme.css',
+            themeId: theme.id
+        };
+    });
+}
+
+function setTheme(id) {
+    return new Promise(function (resolve, reject) {
+        if (currentThemeId && currentThemeId === id) {
+            resolve();
+            return;
+        }
+
+        getThemeStylesheetInfo(id).then(function (info) {
+            if (currentThemeId && currentThemeId === info.themeId) {
+                resolve();
+                return;
+            }
+
+            var linkUrl = info.stylesheetPath;
+            unloadTheme();
+
+            var link = document.createElement('link');
+            link.setAttribute('rel', 'stylesheet');
+            link.setAttribute('type', 'text/css');
+            link.onload = function () {
+                resolve();
+            };
+
+            link.setAttribute('href', linkUrl);
+            document.head.appendChild(link);
+            themeStyleElement = link;
+            currentThemeId = info.themeId;
+        });
+    });
+}
+
+export default {
+    getThemes: getThemes,
+    setTheme: setTheme
+};