Merge remote-tracking branch 'upstream/master' into focus-prevent-scroll

2020-08-19 21:19:53 +02:00 · 2020-08-19 21:19:53 +02:00 · 73ab5827be
commit 73ab5827be
parent 458587475c 5a2c0beec5
262 changed files with 14545 additions and 16893 deletions
--- a/src/scripts/apploader.js
+++ b/src/scripts/apploader.js
@ -1,12 +1,10 @@
 (function() {
-    'use strict';
-
    function injectScriptElement(src, onload) {
        if (!src) {
            return;
        }

-        var script = document.createElement('script');
+        const script = document.createElement('script');
        if (self.dashboardVersion) {
            src += `?v=${self.dashboardVersion}`;
        }
--- a/src/scripts/autoThemes.js
+++ b/src/scripts/autoThemes.js
@ -3,6 +3,10 @@ import skinManager from 'skinManager';
 import connectionManager from 'connectionManager';
 import events from 'events';

+// Set the default theme when loading
+skinManager.setTheme(userSettings.theme());
+
+// Set the user's prefered theme when signing in
 events.on(connectionManager, 'localusersignedin', function (e, user) {
    skinManager.setTheme(userSettings.theme());
 });
--- a/src/scripts/clientUtils.js
+++ b/src/scripts/clientUtils.js
@ -0,0 +1,233 @@
+
+export function getCurrentUser() {
+    return window.ApiClient.getCurrentUser(false);
+}
+
+//TODO: investigate url prefix support for serverAddress function
+export function serverAddress() {
+    if (AppInfo.isNativeApp) {
+        const apiClient = window.ApiClient;
+
+        if (apiClient) {
+            return apiClient.serverAddress();
+        }
+
+        return null;
+    }
+
+    const urlLower = window.location.href.toLowerCase();
+    const index = urlLower.lastIndexOf('/web');
+
+    if (index != -1) {
+        return urlLower.substring(0, index);
+    }
+
+    const loc = window.location;
+    let address = loc.protocol + '//' + loc.hostname;
+
+    if (loc.port) {
+        address += ':' + loc.port;
+    }
+
+    return address;
+}
+
+export function getCurrentUserId() {
+    const apiClient = window.ApiClient;
+
+    if (apiClient) {
+        return apiClient.getCurrentUserId();
+    }
+
+    return null;
+}
+
+export function onServerChanged(userId, accessToken, apiClient) {
+    apiClient = apiClient || window.ApiClient;
+    window.ApiClient = apiClient;
+}
+
+export function logout() {
+    ConnectionManager.logout().then(function () {
+        let loginPage;
+
+        if (AppInfo.isNativeApp) {
+            loginPage = 'selectserver.html';
+            window.ApiClient = null;
+        } else {
+            loginPage = 'login.html';
+        }
+
+        navigate(loginPage);
+    });
+}
+
+export function getConfigurationPageUrl(name) {
+    return 'configurationpage?name=' + encodeURIComponent(name);
+}
+
+export function getConfigurationResourceUrl(name) {
+    if (AppInfo.isNativeApp) {
+        return ApiClient.getUrl('web/ConfigurationPage', {
+            name: name
+        });
+    }
+
+    return getConfigurationPageUrl(name);
+}
+
+export function navigate(url, preserveQueryString) {
+    if (!url) {
+        throw new Error('url cannot be null or empty');
+    }
+
+    const queryString = getWindowLocationSearch();
+
+    if (preserveQueryString && queryString) {
+        url += queryString;
+    }
+
+    return new Promise(function (resolve, reject) {
+        import('appRouter').then(({default: appRouter}) => {
+            return appRouter.show(url).then(resolve, reject);
+        });
+    });
+}
+
+export function processPluginConfigurationUpdateResult() {
+    Promise.all([
+        import('loading'),
+        import('toast')
+    ])
+        .then(([{default: loading}, {default: toast}]) => {
+            loading.hide();
+            toast(Globalize.translate('SettingsSaved'));
+        });
+}
+
+export function processServerConfigurationUpdateResult(result) {
+    Promise.all([
+        import('loading'),
+        import('toast')
+    ])
+        .then(([{default: loading}, {default: toast}]) => {
+            loading.hide();
+            toast(Globalize.translate('SettingsSaved'));
+        });
+}
+
+export function processErrorResponse(response) {
+    import('loading').then(({default: loading}) => {
+        loading.hide();
+    });
+
+    let status = '' + response.status;
+
+    if (response.statusText) {
+        status = response.statusText;
+    }
+
+    alert({
+        title: status,
+        message: response.headers ? response.headers.get('X-Application-Error-Code') : null
+    });
+}
+
+export function alert(options) {
+    if (typeof options == 'string') {
+        return void import('toast').then(({default: toast}) => {
+            toast({
+                text: options
+            });
+        });
+    }
+
+    import('alert').then(({default: alert}) => {
+        alert({
+            title: options.title || Globalize.translate('HeaderAlert'),
+            text: options.message
+        }).then(options.callback || function () {});
+    });
+}
+
+export function capabilities(appHost) {
+    let 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: self.appMode === 'cordova' || self.appMode === 'android',
+        SupportsMediaControl: true
+    };
+    return Object.assign(capabilities, appHost.getPushTokenInfo());
+}
+
+export function selectServer() {
+    if (window.NativeShell && typeof window.NativeShell.selectServer === 'function') {
+        window.NativeShell.selectServer();
+    } else {
+        navigate('selectserver.html');
+    }
+}
+
+export function hideLoadingMsg() {
+    import('loading').then(({default: loading}) => {
+        loading.hide();
+    });
+}
+
+export function showLoadingMsg() {
+    import('loading').then(({default: loading}) => {
+        loading.show();
+    });
+}
+
+export function confirm(message, title, callback) {
+    import('confirm').then(({default: confirm}) => {
+        confirm(message, title).then(function() {
+            callback(!0);
+        }).catch(function() {
+            callback(!1);
+        });
+    });
+}
+
+// This is used in plugins and templates, so keep it defined for now.
+// TODO: Remove once plugins don't need it
+window.Dashboard = {
+    alert,
+    capabilities,
+    confirm,
+    getConfigurationPageUrl,
+    getConfigurationResourceUrl,
+    getCurrentUser,
+    getCurrentUserId,
+    hideLoadingMsg,
+    logout,
+    navigate,
+    onServerChanged,
+    processErrorResponse,
+    processPluginConfigurationUpdateResult,
+    processServerConfigurationUpdateResult,
+    selectServer,
+    serverAddress,
+    showLoadingMsg
+};
+
+export default {
+    alert,
+    capabilities,
+    confirm,
+    getConfigurationPageUrl,
+    getConfigurationResourceUrl,
+    getCurrentUser,
+    getCurrentUserId,
+    hideLoadingMsg,
+    logout,
+    navigate,
+    onServerChanged,
+    processErrorResponse,
+    processPluginConfigurationUpdateResult,
+    processServerConfigurationUpdateResult,
+    selectServer,
+    serverAddress,
+    showLoadingMsg
+};
--- a/src/scripts/datetime.js
+++ b/src/scripts/datetime.js
@ -24,7 +24,7 @@ import globalize from 'globalize';

        // parse strings, leading zeros into proper ints
        const a = [1, 2, 3, 4, 5, 6, 10, 11];
-        for (let i in a) {
+        for (const i in a) {
            d[a[i]] = parseInt(d[a[i]], 10);
        }
        d[7] = parseFloat(d[7]);
--- a/src/scripts/deleteHelper.js
+++ b/src/scripts/deleteHelper.js
@ -15,7 +15,7 @@ export function deleteItem(options) {
    const item = options.item;
    const parentId = item.SeasonId || item.SeriesId || item.ParentId;

-    let apiClient = connectionManager.getApiClient(item.ServerId);
+    const apiClient = connectionManager.getApiClient(item.ServerId);

    return confirm({

@ -34,7 +34,7 @@ export function deleteItem(options) {
                }
            }
        }, function (err) {
-            let result = function () {
+            const result = function () {
                return Promise.reject(err);
            };

--- a/src/scripts/editorsidebar.js
+++ b/src/scripts/editorsidebar.js
@ -86,7 +86,7 @@ import 'material-icons';
            if (result.TotalRecordCount) {
                nodes.push({
                    id: 'livetv',
-                    text: globalize.translate('HeaderLiveTV'),
+                    text: globalize.translate('LiveTV'),
                    state: {
                        opened: false
                    },
@ -302,7 +302,7 @@ import 'material-icons';
    $(document).on('itemsaved', '.metadataEditorPage', function (e, item) {
        updateEditorNode(this, item);
    }).on('pagebeforeshow', '.metadataEditorPage', function () {
-        /* eslint-disable-next-line no-unused-expressions */
+        /* eslint-disable-next-line  @babel/no-unused-expressions */
        import('css!assets/css/metadataeditor.css');
    }).on('pagebeforeshow', '.metadataEditorPage', function () {
        var page = this;
--- a/src/scripts/globalize.js
+++ b/src/scripts/globalize.js
@ -63,11 +63,11 @@ import events from 'events';
    }

    function ensureTranslations(culture) {
-        for (let i in allTranslations) {
+        for (const i in allTranslations) {
            ensureTranslation(allTranslations[i], culture);
        }
        if (culture !== fallbackCulture) {
-            for (let i in allTranslations) {
+            for (const i in allTranslations) {
                ensureTranslation(allTranslations[i], fallbackCulture);
            }
        }
--- a/src/scripts/inputManager.js
+++ b/src/scripts/inputManager.js
@ -39,7 +39,7 @@ import appHost from 'apphost';
        dom.removeEventListener(scope, 'command', fn, {});
    }

-    let commandTimes = {};
+    const commandTimes = {};

    function checkCommandTime(command) {
        const last = commandTimes[command] || 0;
@ -185,6 +185,12 @@ import appHost from 'apphost';
            'changezoom': () => {
                playbackManager.toggleAspectRatio();
            },
+            'increaseplaybackrate': () => {
+                playbackManager.increasePlaybackRate();
+            },
+            'decreaseplaybackrate': () => {
+                playbackManager.decreasePlaybackRate();
+            },
            'changeaudiotrack': () => {
                playbackManager.changeAudioStream();
            },
--- a/src/scripts/itembynamedetailpage.js
+++ b/src/scripts/itembynamedetailpage.js
@ -1,369 +1,374 @@
-define(['connectionManager', 'listView', 'cardBuilder', 'imageLoader', 'libraryBrowser', 'globalize', 'emby-itemscontainer', 'emby-button'], function (connectionManager, listView, cardBuilder, imageLoader, libraryBrowser, globalize) {
-    'use strict';
+import connectionManager from 'connectionManager';
+import listView from 'listView';
+import cardBuilder from 'cardBuilder';
+import imageLoader from 'imageLoader';
+import globalize from 'globalize';
+import 'emby-itemscontainer';
+import 'emby-button';

-    function renderItems(page, item) {
-        var sections = [];
+function renderItems(page, item) {
+    const sections = [];

-        if (item.ArtistCount) {
-            sections.push({
-                name: globalize.translate('TabArtists'),
-                type: 'MusicArtist'
-            });
-        }
-
-        if (item.ProgramCount && item.Type == 'Person') {
-            sections.push({
-                name: globalize.translate('HeaderUpcomingOnTV'),
-                type: 'Program'
-            });
-        }
-
-        if (item.MovieCount) {
-            sections.push({
-                name: globalize.translate('TabMovies'),
-                type: 'Movie'
-            });
-        }
-
-        if (item.SeriesCount) {
-            sections.push({
-                name: globalize.translate('TabShows'),
-                type: 'Series'
-            });
-        }
-
-        if (item.EpisodeCount) {
-            sections.push({
-                name: globalize.translate('TabEpisodes'),
-                type: 'Episode'
-            });
-        }
-
-        if (item.TrailerCount) {
-            sections.push({
-                name: globalize.translate('TabTrailers'),
-                type: 'Trailer'
-            });
-        }
-
-        if (item.AlbumCount) {
-            sections.push({
-                name: globalize.translate('TabAlbums'),
-                type: 'MusicAlbum'
-            });
-        }
-
-        if (item.MusicVideoCount) {
-            sections.push({
-                name: globalize.translate('TabMusicVideos'),
-                type: 'MusicVideo'
-            });
-        }
-
-        var elem = page.querySelector('#childrenContent');
-        elem.innerHTML = sections.map(function (section) {
-            var html = '';
-            var sectionClass = 'verticalSection';
-
-            if (section.type === 'Audio') {
-                sectionClass += ' verticalSection-extrabottompadding';
-            }
-
-            html += '<div class="' + sectionClass + '" data-type="' + section.type + '">';
-            html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
-            html += '<h2 class="sectionTitle sectionTitle-cards">';
-            html += section.name;
-            html += '</h2>';
-            html += '<a is="emby-linkbutton" href="#" class="clearLink hide" style="margin-left:1em;vertical-align:middle;"><button is="emby-button" type="button" class="raised more raised-mini noIcon">' + globalize.translate('ButtonMore') + '</button></a>';
-            html += '</div>';
-            html += '<div is="emby-itemscontainer" class="itemsContainer padded-right">';
-            html += '</div>';
-            return html += '</div>';
-        }).join('');
-        var sectionElems = elem.querySelectorAll('.verticalSection');
-
-        for (var i = 0, length = sectionElems.length; i < length; i++) {
-            renderSection(page, item, sectionElems[i], sectionElems[i].getAttribute('data-type'));
-        }
-    }
-
-    function renderSection(page, item, element, type) {
-        switch (type) {
-            case 'Program':
-                loadItems(element, item, type, {
-                    MediaTypes: '',
-                    IncludeItemTypes: 'Program',
-                    PersonTypes: '',
-                    ArtistIds: '',
-                    AlbumArtistIds: '',
-                    Limit: 10,
-                    SortBy: 'StartDate'
-                }, {
-                    shape: 'overflowBackdrop',
-                    showTitle: true,
-                    centerText: true,
-                    overlayMoreButton: true,
-                    preferThumb: true,
-                    overlayText: false,
-                    showAirTime: true,
-                    showAirDateTime: true,
-                    showChannelName: true
-                });
-                break;
-
-            case 'Movie':
-                loadItems(element, item, type, {
-                    MediaTypes: '',
-                    IncludeItemTypes: 'Movie',
-                    PersonTypes: '',
-                    ArtistIds: '',
-                    AlbumArtistIds: '',
-                    Limit: 10,
-                    SortBy: 'SortName'
-                }, {
-                    shape: 'overflowPortrait',
-                    showTitle: true,
-                    centerText: true,
-                    overlayMoreButton: true,
-                    overlayText: false,
-                    showYear: true
-                });
-                break;
-
-            case 'MusicVideo':
-                loadItems(element, item, type, {
-                    MediaTypes: '',
-                    IncludeItemTypes: 'MusicVideo',
-                    PersonTypes: '',
-                    ArtistIds: '',
-                    AlbumArtistIds: '',
-                    Limit: 10,
-                    SortBy: 'SortName'
-                }, {
-                    shape: 'overflowPortrait',
-                    showTitle: true,
-                    centerText: true,
-                    overlayPlayButton: true
-                });
-                break;
-
-            case 'Trailer':
-                loadItems(element, item, type, {
-                    MediaTypes: '',
-                    IncludeItemTypes: 'Trailer',
-                    PersonTypes: '',
-                    ArtistIds: '',
-                    AlbumArtistIds: '',
-                    Limit: 10,
-                    SortBy: 'SortName'
-                }, {
-                    shape: 'overflowPortrait',
-                    showTitle: true,
-                    centerText: true,
-                    overlayPlayButton: true
-                });
-                break;
-
-            case 'Series':
-                loadItems(element, item, type, {
-                    MediaTypes: '',
-                    IncludeItemTypes: 'Series',
-                    PersonTypes: '',
-                    ArtistIds: '',
-                    AlbumArtistIds: '',
-                    Limit: 10,
-                    SortBy: 'SortName'
-                }, {
-                    shape: 'overflowPortrait',
-                    showTitle: true,
-                    centerText: true,
-                    overlayMoreButton: true
-                });
-                break;
-
-            case 'MusicAlbum':
-                loadItems(element, item, type, {
-                    MediaTypes: '',
-                    IncludeItemTypes: 'MusicAlbum',
-                    PersonTypes: '',
-                    ArtistIds: '',
-                    AlbumArtistIds: '',
-                    SortOrder: 'Descending',
-                    SortBy: 'ProductionYear,Sortname'
-                }, {
-                    shape: 'overflowSquare',
-                    playFromHere: true,
-                    showTitle: true,
-                    showYear: true,
-                    coverImage: true,
-                    centerText: true,
-                    overlayPlayButton: true
-                });
-                break;
-
-            case 'MusicArtist':
-                loadItems(element, item, type, {
-                    MediaTypes: '',
-                    IncludeItemTypes: 'MusicArtist',
-                    PersonTypes: '',
-                    ArtistIds: '',
-                    AlbumArtistIds: '',
-                    Limit: 8,
-                    SortBy: 'SortName'
-                }, {
-                    shape: 'overflowSquare',
-                    playFromHere: true,
-                    showTitle: true,
-                    showParentTitle: true,
-                    coverImage: true,
-                    centerText: true,
-                    overlayPlayButton: true
-                });
-                break;
-
-            case 'Episode':
-                loadItems(element, item, type, {
-                    MediaTypes: '',
-                    IncludeItemTypes: 'Episode',
-                    PersonTypes: '',
-                    ArtistIds: '',
-                    AlbumArtistIds: '',
-                    Limit: 6,
-                    SortBy: 'SortName'
-                }, {
-                    shape: 'overflowBackdrop',
-                    showTitle: true,
-                    showParentTitle: true,
-                    centerText: true,
-                    overlayPlayButton: true
-                });
-                break;
-
-            case 'Audio':
-                loadItems(element, item, type, {
-                    MediaTypes: '',
-                    IncludeItemTypes: 'Audio',
-                    PersonTypes: '',
-                    ArtistIds: '',
-                    AlbumArtistIds: '',
-                    SortBy: 'AlbumArtist,Album,SortName'
-                }, {
-                    playFromHere: true,
-                    action: 'playallfromhere',
-                    smallIcon: true,
-                    artist: true
-                });
-        }
-    }
-
-    function loadItems(element, item, type, query, listOptions) {
-        query = getQuery(query, item);
-        getItemsFunction(query, item)(query.StartIndex, query.Limit, query.Fields).then(function (result) {
-            var html = '';
-
-            if (query.Limit && result.TotalRecordCount > query.Limit) {
-                var link = element.querySelector('a');
-                link.classList.remove('hide');
-                link.setAttribute('href', getMoreItemsHref(item, type));
-            } else {
-                element.querySelector('a').classList.add('hide');
-            }
-
-            listOptions.items = result.Items;
-            var itemsContainer = element.querySelector('.itemsContainer');
-
-            if (type == 'Audio') {
-                html = listView.getListViewHtml(listOptions);
-                itemsContainer.classList.remove('vertical-wrap');
-                itemsContainer.classList.add('vertical-list');
-            } else {
-                html = cardBuilder.getCardsHtml(listOptions);
-                itemsContainer.classList.add('vertical-wrap');
-                itemsContainer.classList.remove('vertical-list');
-            }
-
-            itemsContainer.innerHTML = html;
-            imageLoader.lazyChildren(itemsContainer);
+    if (item.ArtistCount) {
+        sections.push({
+            name: globalize.translate('Artists'),
+            type: 'MusicArtist'
        });
    }

-    function getMoreItemsHref(item, type) {
-        if (item.Type == 'Genre') {
-            return 'list.html?type=' + type + '&genreId=' + item.Id + '&serverId=' + item.ServerId;
-        }
-
-        if (item.Type == 'MusicGenre') {
-            return 'list.html?type=' + type + '&musicGenreId=' + item.Id + '&serverId=' + item.ServerId;
-        }
-
-        if (item.Type == 'Studio') {
-            return 'list.html?type=' + type + '&studioId=' + item.Id + '&serverId=' + item.ServerId;
-        }
-
-        if (item.Type == 'MusicArtist') {
-            return 'list.html?type=' + type + '&artistId=' + item.Id + '&serverId=' + item.ServerId;
-        }
-
-        if (item.Type == 'Person') {
-            return 'list.html?type=' + type + '&personId=' + item.Id + '&serverId=' + item.ServerId;
-        }
-
-        return 'list.html?type=' + type + '&parentId=' + item.Id + '&serverId=' + item.ServerId;
+    if (item.ProgramCount && item.Type === 'Person') {
+        sections.push({
+            name: globalize.translate('HeaderUpcomingOnTV'),
+            type: 'Program'
+        });
    }

-    function addCurrentItemToQuery(query, item) {
-        if (item.Type == 'Person') {
-            query.PersonIds = item.Id;
-        } else if (item.Type == 'Genre') {
-            query.Genres = item.Name;
-        } else if (item.Type == 'MusicGenre') {
-            query.Genres = item.Name;
-        } else if (item.Type == 'GameGenre') {
-            query.Genres = item.Name;
-        } else if (item.Type == 'Studio') {
-            query.StudioIds = item.Id;
-        } else if (item.Type == 'MusicArtist') {
-            query.AlbumArtistIds = item.Id;
+    if (item.MovieCount) {
+        sections.push({
+            name: globalize.translate('Movies'),
+            type: 'Movie'
+        });
+    }
+
+    if (item.SeriesCount) {
+        sections.push({
+            name: globalize.translate('Shows'),
+            type: 'Series'
+        });
+    }
+
+    if (item.EpisodeCount) {
+        sections.push({
+            name: globalize.translate('Episodes'),
+            type: 'Episode'
+        });
+    }
+
+    if (item.TrailerCount) {
+        sections.push({
+            name: globalize.translate('Trailers'),
+            type: 'Trailer'
+        });
+    }
+
+    if (item.AlbumCount) {
+        sections.push({
+            name: globalize.translate('Albums'),
+            type: 'MusicAlbum'
+        });
+    }
+
+    if (item.MusicVideoCount) {
+        sections.push({
+            name: globalize.translate('HeaderMusicVideos'),
+            type: 'MusicVideo'
+        });
+    }
+
+    const elem = page.querySelector('#childrenContent');
+    elem.innerHTML = sections.map(function (section) {
+        let html = '';
+        let sectionClass = 'verticalSection';
+
+        if (section.type === 'Audio') {
+            sectionClass += ' verticalSection-extrabottompadding';
        }
+
+        html += '<div class="' + sectionClass + '" data-type="' + section.type + '">';
+        html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
+        html += '<h2 class="sectionTitle sectionTitle-cards">';
+        html += section.name;
+        html += '</h2>';
+        html += '<a is="emby-linkbutton" href="#" class="clearLink hide" style="margin-left:1em;vertical-align:middle;"><button is="emby-button" type="button" class="raised more raised-mini noIcon">' + globalize.translate('ButtonMore') + '</button></a>';
+        html += '</div>';
+        html += '<div is="emby-itemscontainer" class="itemsContainer padded-right">';
+        html += '</div>';
+        html += '</div>';
+        return html;
+    }).join('');
+    const sectionElems = elem.querySelectorAll('.verticalSection');
+
+    for (let i = 0, length = sectionElems.length; i < length; i++) {
+        renderSection(page, item, sectionElems[i], sectionElems[i].getAttribute('data-type'));
+    }
+}
+
+function renderSection(page, item, element, type) {
+    switch (type) {
+        case 'Program':
+            loadItems(element, item, type, {
+                MediaTypes: '',
+                IncludeItemTypes: 'Program',
+                PersonTypes: '',
+                ArtistIds: '',
+                AlbumArtistIds: '',
+                Limit: 10,
+                SortBy: 'StartDate'
+            }, {
+                shape: 'overflowBackdrop',
+                showTitle: true,
+                centerText: true,
+                overlayMoreButton: true,
+                preferThumb: true,
+                overlayText: false,
+                showAirTime: true,
+                showAirDateTime: true,
+                showChannelName: true
+            });
+            break;
+
+        case 'Movie':
+            loadItems(element, item, type, {
+                MediaTypes: '',
+                IncludeItemTypes: 'Movie',
+                PersonTypes: '',
+                ArtistIds: '',
+                AlbumArtistIds: '',
+                Limit: 10,
+                SortBy: 'SortName'
+            }, {
+                shape: 'overflowPortrait',
+                showTitle: true,
+                centerText: true,
+                overlayMoreButton: true,
+                overlayText: false,
+                showYear: true
+            });
+            break;
+
+        case 'MusicVideo':
+            loadItems(element, item, type, {
+                MediaTypes: '',
+                IncludeItemTypes: 'MusicVideo',
+                PersonTypes: '',
+                ArtistIds: '',
+                AlbumArtistIds: '',
+                Limit: 10,
+                SortBy: 'SortName'
+            }, {
+                shape: 'overflowPortrait',
+                showTitle: true,
+                centerText: true,
+                overlayPlayButton: true
+            });
+            break;
+
+        case 'Trailer':
+            loadItems(element, item, type, {
+                MediaTypes: '',
+                IncludeItemTypes: 'Trailer',
+                PersonTypes: '',
+                ArtistIds: '',
+                AlbumArtistIds: '',
+                Limit: 10,
+                SortBy: 'SortName'
+            }, {
+                shape: 'overflowPortrait',
+                showTitle: true,
+                centerText: true,
+                overlayPlayButton: true
+            });
+            break;
+
+        case 'Series':
+            loadItems(element, item, type, {
+                MediaTypes: '',
+                IncludeItemTypes: 'Series',
+                PersonTypes: '',
+                ArtistIds: '',
+                AlbumArtistIds: '',
+                Limit: 10,
+                SortBy: 'SortName'
+            }, {
+                shape: 'overflowPortrait',
+                showTitle: true,
+                centerText: true,
+                overlayMoreButton: true
+            });
+            break;
+
+        case 'MusicAlbum':
+            loadItems(element, item, type, {
+                MediaTypes: '',
+                IncludeItemTypes: 'MusicAlbum',
+                PersonTypes: '',
+                ArtistIds: '',
+                AlbumArtistIds: '',
+                SortOrder: 'Descending',
+                SortBy: 'ProductionYear,Sortname'
+            }, {
+                shape: 'overflowSquare',
+                playFromHere: true,
+                showTitle: true,
+                showYear: true,
+                coverImage: true,
+                centerText: true,
+                overlayPlayButton: true
+            });
+            break;
+
+        case 'MusicArtist':
+            loadItems(element, item, type, {
+                MediaTypes: '',
+                IncludeItemTypes: 'MusicArtist',
+                PersonTypes: '',
+                ArtistIds: '',
+                AlbumArtistIds: '',
+                Limit: 8,
+                SortBy: 'SortName'
+            }, {
+                shape: 'overflowSquare',
+                playFromHere: true,
+                showTitle: true,
+                showParentTitle: true,
+                coverImage: true,
+                centerText: true,
+                overlayPlayButton: true
+            });
+            break;
+
+        case 'Episode':
+            loadItems(element, item, type, {
+                MediaTypes: '',
+                IncludeItemTypes: 'Episode',
+                PersonTypes: '',
+                ArtistIds: '',
+                AlbumArtistIds: '',
+                Limit: 6,
+                SortBy: 'SortName'
+            }, {
+                shape: 'overflowBackdrop',
+                showTitle: true,
+                showParentTitle: true,
+                centerText: true,
+                overlayPlayButton: true
+            });
+            break;
+
+        case 'Audio':
+            loadItems(element, item, type, {
+                MediaTypes: '',
+                IncludeItemTypes: 'Audio',
+                PersonTypes: '',
+                ArtistIds: '',
+                AlbumArtistIds: '',
+                SortBy: 'AlbumArtist,Album,SortName'
+            }, {
+                playFromHere: true,
+                action: 'playallfromhere',
+                smallIcon: true,
+                artist: true
+            });
+    }
+}
+
+function loadItems(element, item, type, query, listOptions) {
+    query = getQuery(query, item);
+    getItemsFunction(query, item)(query.StartIndex, query.Limit, query.Fields).then(function (result) {
+        let html = '';
+
+        if (query.Limit && result.TotalRecordCount > query.Limit) {
+            const link = element.querySelector('a');
+            link.classList.remove('hide');
+            link.setAttribute('href', getMoreItemsHref(item, type));
+        } else {
+            element.querySelector('a').classList.add('hide');
+        }
+
+        listOptions.items = result.Items;
+        const itemsContainer = element.querySelector('.itemsContainer');
+
+        if (type === 'Audio') {
+            html = listView.getListViewHtml(listOptions);
+            itemsContainer.classList.remove('vertical-wrap');
+            itemsContainer.classList.add('vertical-list');
+        } else {
+            html = cardBuilder.getCardsHtml(listOptions);
+            itemsContainer.classList.add('vertical-wrap');
+            itemsContainer.classList.remove('vertical-list');
+        }
+
+        itemsContainer.innerHTML = html;
+        imageLoader.lazyChildren(itemsContainer);
+    });
+}
+
+function getMoreItemsHref(item, type) {
+    if (item.Type === 'Genre') {
+        return 'list.html?type=' + type + '&genreId=' + item.Id + '&serverId=' + item.ServerId;
    }

-    function getQuery(options, item) {
-        var query = {
-            SortOrder: 'Ascending',
-            IncludeItemTypes: '',
-            Recursive: true,
-            Fields: 'AudioInfo,SeriesInfo,ParentId,PrimaryImageAspectRatio,BasicSyncInfo',
-            Limit: 100,
-            StartIndex: 0,
-            CollapseBoxSetItems: false
-        };
-        query = Object.assign(query, options || {});
-        addCurrentItemToQuery(query, item);
-        return query;
+    if (item.Type === 'MusicGenre') {
+        return 'list.html?type=' + type + '&musicGenreId=' + item.Id + '&serverId=' + item.ServerId;
    }

-    function getItemsFunction(options, item) {
-        var query = getQuery(options, item);
-        return function (index, limit, fields) {
-            query.StartIndex = index;
-            query.Limit = limit;
-
-            if (fields) {
-                query.Fields += ',' + fields;
-            }
-
-            var apiClient = connectionManager.getApiClient(item.ServerId);
-
-            if (query.IncludeItemTypes === 'MusicArtist') {
-                query.IncludeItemTypes = null;
-                return apiClient.getAlbumArtists(apiClient.getCurrentUserId(), query);
-            }
-
-            return apiClient.getItems(apiClient.getCurrentUserId(), query);
-        };
+    if (item.Type === 'Studio') {
+        return 'list.html?type=' + type + '&studioId=' + item.Id + '&serverId=' + item.ServerId;
    }

-    window.ItemsByName = {
-        renderItems: renderItems
+    if (item.Type === 'MusicArtist') {
+        return 'list.html?type=' + type + '&artistId=' + item.Id + '&serverId=' + item.ServerId;
+    }
+
+    if (item.Type === 'Person') {
+        return 'list.html?type=' + type + '&personId=' + item.Id + '&serverId=' + item.ServerId;
+    }
+
+    return 'list.html?type=' + type + '&parentId=' + item.Id + '&serverId=' + item.ServerId;
+}
+
+function addCurrentItemToQuery(query, item) {
+    if (item.Type === 'Person') {
+        query.PersonIds = item.Id;
+    } else if (item.Type === 'Genre') {
+        query.Genres = item.Name;
+    } else if (item.Type === 'MusicGenre') {
+        query.Genres = item.Name;
+    } else if (item.Type === 'GameGenre') {
+        query.Genres = item.Name;
+    } else if (item.Type === 'Studio') {
+        query.StudioIds = item.Id;
+    } else if (item.Type === 'MusicArtist') {
+        query.AlbumArtistIds = item.Id;
+    }
+}
+
+function getQuery(options, item) {
+    let query = {
+        SortOrder: 'Ascending',
+        IncludeItemTypes: '',
+        Recursive: true,
+        Fields: 'AudioInfo,SeriesInfo,ParentId,PrimaryImageAspectRatio,BasicSyncInfo',
+        Limit: 100,
+        StartIndex: 0,
+        CollapseBoxSetItems: false
    };
-});
+    query = Object.assign(query, options || {});
+    addCurrentItemToQuery(query, item);
+    return query;
+}
+
+function getItemsFunction(options, item) {
+    const query = getQuery(options, item);
+    return function (index, limit, fields) {
+        query.StartIndex = index;
+        query.Limit = limit;
+
+        if (fields) {
+            query.Fields += ',' + fields;
+        }
+
+        const apiClient = connectionManager.getApiClient(item.ServerId);
+
+        if (query.IncludeItemTypes === 'MusicArtist') {
+            query.IncludeItemTypes = null;
+            return apiClient.getAlbumArtists(apiClient.getCurrentUserId(), query);
+        }
+
+        return apiClient.getItems(apiClient.getCurrentUserId(), query);
+    };
+}
+
+window.ItemsByName = {
+    renderItems: renderItems
+};
--- a/src/scripts/keyboardNavigation.js
+++ b/src/scripts/keyboardNavigation.js
@ -155,7 +155,7 @@ export function enable() {
 function attachGamepadScript(e) {
    console.log('Gamepad connected! Attaching gamepadtokey.js script');
    window.removeEventListener('gamepadconnected', attachGamepadScript);
-    /* eslint-disable-next-line no-unused-expressions */
+    /* eslint-disable-next-line  @babel/no-unused-expressions */
    import('scripts/gamepadtokey');
 }

--- a/src/scripts/libraryBrowser.js
+++ b/src/scripts/libraryBrowser.js
@ -105,11 +105,11 @@ export function getQueryPagingHtml (options) {
        }

        if (options.sortButton) {
-            html += '<button is="paper-icon-button-light" class="btnSort autoSize" title="' + globalize.translate('ButtonSort') + '"><span class="material-icons sort_by_alpha"></span></button>';
+            html += '<button is="paper-icon-button-light" class="btnSort autoSize" title="' + globalize.translate('Sort') + '"><span class="material-icons sort_by_alpha"></span></button>';
        }

        if (options.filterButton) {
-            html += '<button is="paper-icon-button-light" class="btnFilter autoSize" title="' + globalize.translate('ButtonFilter') + '"><span class="material-icons filter_list"></span></button>';
+            html += '<button is="paper-icon-button-light" class="btnFilter autoSize" title="' + globalize.translate('Filter') + '"><span class="material-icons filter_list"></span></button>';
        }

        html += '</div>';
@ -119,7 +119,10 @@ export function getQueryPagingHtml (options) {
 }

 export function showSortMenu (options) {
-    require(['dialogHelper', 'emby-radio'], function (dialogHelper) {
+    Promise.all([
+        import('dialogHelper'),
+        import('emby-radio')
+    ]).then(([{default: dialogHelper}]) => {
        function onSortByChange() {
            var newValue = this.value;

--- a/src/scripts/libraryMenu.js
+++ b/src/scripts/libraryMenu.js
@ -1,11 +1,26 @@
-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';
+import dom from 'dom';
+import layoutManager from 'layoutManager';
+import inputManager from 'inputManager';
+import connectionManager from 'connectionManager';
+import events from 'events';
+import viewManager from 'viewManager';
+import appRouter from 'appRouter';
+import appHost from 'apphost';
+import playbackManager from 'playbackManager';
+import syncPlayManager from 'syncPlayManager';
+import * as groupSelectionMenu from 'groupSelectionMenu';
+import browser from 'browser';
+import globalize from 'globalize';
+import imageHelper from 'scripts/imagehelper';
+import 'paper-icon-button-light';
+import 'material-icons';
+import 'scrollStyles';
+import 'flexStyles';

-    playbackManager = playbackManager.default || playbackManager;
-    browser = browser.default || browser;
+/* eslint-disable indent */

    function renderHeader() {
-        var html = '';
+        let html = '';
        html += '<div class="flex align-items-center flex-grow headerTop">';
        html += '<div class="headerLeft">';
        html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonLeft headerBackButton hide"><span class="material-icons ' + (browser.safari ? 'chevron_left' : 'arrow_back') + '"></span></button>';
@ -18,7 +33,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
        html += `<button is="paper-icon-button-light" class="headerSyncButton syncButton headerButton headerButtonRight hide" title="${globalize.translate('ButtonSyncPlay')}"><span class="material-icons sync_disabled"></span></button>`;
        html += `<button is="paper-icon-button-light" class="headerAudioPlayerButton audioPlayerButton headerButton headerButtonRight hide" title="${globalize.translate('ButtonPlayer')}"><span class="material-icons music_note"></span></button>`;
        html += `<button is="paper-icon-button-light" class="headerCastButton castButton headerButton headerButtonRight hide" title="${globalize.translate('ButtonCast')}"><span class="material-icons cast"></span></button>`;
-        html += `<button type="button" is="paper-icon-button-light" class="headerButton headerButtonRight headerSearchButton hide" title="${globalize.translate('ButtonSearch')}"><span class="material-icons search"></span></button>`;
+        html += `<button type="button" is="paper-icon-button-light" class="headerButton headerButtonRight headerSearchButton hide" title="${globalize.translate('Search')}"><span class="material-icons search"></span></button>`;
        html += '<button is="paper-icon-button-light" class="headerButton headerButtonRight headerUserButton hide"><span class="material-icons person"></span></button>';
        html += '</div>';
        html += '</div>';
@ -49,7 +64,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function lazyLoadViewMenuBarImages() {
-        require(['imageLoader'], function (imageLoader) {
+        import('imageLoader').then(({default: imageLoader}) => {
            imageLoader.lazyChildren(skinHeader);
        });
    }
@ -59,11 +74,11 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function updateUserInHeader(user) {
-        var hasImage;
+        let hasImage;

        if (user && user.name) {
            if (user.imageUrl) {
-                var url = user.imageUrl;
+                const url = user.imageUrl;
                updateHeaderUserButton(url);
                hasImage = true;
            }
@ -90,9 +105,9 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
                headerCastButton.classList.remove('hide');
            }

-            var policy = user.Policy ? user.Policy : user.localUser.Policy;
+            const policy = user.Policy ? user.Policy : user.localUser.Policy;

-            var apiClient = getCurrentApiClient();
+            const apiClient = getCurrentApiClient();
            if (headerSyncButton && policy && policy.SyncPlayAccess !== 'None' && apiClient.isMinServerVersion('10.6.0')) {
                headerSyncButton.classList.remove('hide');
            }
@ -142,7 +157,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
            mainDrawerButton.addEventListener('click', toggleMainDrawer);
        }

-        var headerBackButton = skinHeader.querySelector('.headerBackButton');
+        const headerBackButton = skinHeader.querySelector('.headerBackButton');

        if (headerBackButton) {
            headerBackButton.addEventListener('click', onBackClick);
@ -184,20 +199,20 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function onCastButtonClicked() {
-        var btn = this;
+        const btn = this;

-        require(['playerSelectionMenu'], function (playerSelectionMenu) {
+        import('playerSelectionMenu').then(({default: playerSelectionMenu}) => {
            playerSelectionMenu.show(btn);
        });
    }

    function onSyncButtonClicked() {
-        var btn = this;
+        const btn = this;
        groupSelectionMenu.show(btn);
    }

    function onSyncPlayEnabled(event, enabled) {
-        var icon = headerSyncButton.querySelector('span');
+        const icon = headerSyncButton.querySelector('span');
        icon.classList.remove('sync', 'sync_disabled', 'sync_problem');
        if (enabled) {
            icon.classList.add('sync');
@ -207,7 +222,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function onSyncPlaySyncing(event, is_syncing, syncMethod) {
-        var icon = headerSyncButton.querySelector('span');
+        const icon = headerSyncButton.querySelector('span');
        icon.classList.remove('sync', 'sync_disabled', 'sync_problem');
        if (is_syncing) {
            icon.classList.add('sync_problem');
@ -253,9 +268,9 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function refreshLibraryInfoInDrawer(user, drawer) {
-        var html = '';
+        let html = '';
        html += '<div style="height:.5em;"></div>';
-        html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" href="home.html"><span class="material-icons navMenuOptionIcon home"></span><span class="navMenuOptionText">' + globalize.translate('ButtonHome') + '</span></a>';
+        html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" href="home.html"><span class="material-icons navMenuOptionIcon home"></span><span class="navMenuOptionText">' + globalize.translate('Home') + '</span></a>';

        // libraries are added here
        html += '<div class="libraryMenuOptions">';
@ -289,12 +304,12 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
        // add buttons to navigation drawer
        navDrawerScrollContainer.innerHTML = html;

-        var btnSettings = navDrawerScrollContainer.querySelector('.btnSettings');
+        const btnSettings = navDrawerScrollContainer.querySelector('.btnSettings');
        if (btnSettings) {
            btnSettings.addEventListener('click', onSettingsClick);
        }

-        var btnLogout = navDrawerScrollContainer.querySelector('.btnLogout');
+        const btnLogout = navDrawerScrollContainer.querySelector('.btnLogout');
        if (btnLogout) {
            btnLogout.addEventListener('click', onLogoutClick);
        }
@ -316,20 +331,20 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function updateDashboardMenuSelectedItem() {
-        var links = navDrawerScrollContainer.querySelectorAll('.navMenuOption');
-        var currentViewId = viewManager.currentView().id;
+        const links = navDrawerScrollContainer.querySelectorAll('.navMenuOption');
+        const currentViewId = viewManager.currentView().id;

-        for (var i = 0, length = links.length; i < length; i++) {
-            var link = links[i];
-            var selected = false;
-            var pageIds = link.getAttribute('data-pageids');
+        for (let i = 0, length = links.length; i < length; i++) {
+            let link = links[i];
+            let selected = false;
+            let pageIds = link.getAttribute('data-pageids');

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

-            var pageUrls = link.getAttribute('data-pageurls');
+            let pageUrls = link.getAttribute('data-pageurls');

            if (pageUrls) {
                pageUrls = pageUrls.split('|');
@ -338,7 +353,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '

            if (selected) {
                link.classList.add('navMenuOption-selected');
-                var title = '';
+                let title = '';
                link = link.querySelector('.navMenuOptionText') || link;
                title += (link.innerText || link.textContent).trim();
                LibraryMenu.setTitle(title);
@ -349,7 +364,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function createToolsMenuList(pluginItems) {
-        var links = [{
+        const links = [{
            name: globalize.translate('TabServer')
        }, {
            name: globalize.translate('TabDashboard'),
@ -362,7 +377,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
            pageIds: ['dashboardGeneralPage'],
            icon: 'settings'
        }, {
-            name: globalize.translate('TabUsers'),
+            name: globalize.translate('HeaderUsers'),
            href: 'userprofiles.html',
            pageIds: ['userProfilesPage', 'newUserPage', 'editUserPage', 'userLibraryAccessPage', 'userParentalControlPage', 'userPasswordPage'],
            icon: 'people'
@ -372,7 +387,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
            pageIds: ['mediaLibraryPage', 'librarySettingsPage', 'libraryDisplayPage', 'metadataImagesConfigurationPage', 'metadataNfoPage'],
            icon: 'folder'
        }, {
-            name: globalize.translate('TabPlayback'),
+            name: globalize.translate('TitlePlayback'),
            icon: 'play_arrow',
            href: 'encodingsettings.html',
            pageIds: ['encodingSettingsPage', 'playbackConfigurationPage', 'streamingSettingsPage']
@ -380,10 +395,10 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
        addPluginPagesToMainMenu(links, pluginItems, 'server');
        links.push({
            divider: true,
-            name: globalize.translate('TabDevices')
+            name: globalize.translate('HeaderDevices')
        });
        links.push({
-            name: globalize.translate('TabDevices'),
+            name: globalize.translate('HeaderDevices'),
            href: 'devices.html',
            pageIds: ['devicesPage', 'devicePage'],
            icon: 'devices'
@ -402,16 +417,16 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
        });
        links.push({
            divider: true,
-            name: globalize.translate('TabLiveTV')
+            name: globalize.translate('LiveTV')
        });
        links.push({
-            name: globalize.translate('TabLiveTV'),
+            name: globalize.translate('LiveTV'),
            href: 'livetvstatus.html',
            pageIds: ['liveTvStatusPage', 'liveTvTunerPage'],
            icon: 'live_tv'
        });
        links.push({
-            name: globalize.translate('TabDVR'),
+            name: globalize.translate('HeaderDVR'),
            href: 'livetvsettings.html',
            pageIds: ['liveTvSettingsPage'],
            icon: 'dvr'
@ -461,8 +476,8 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function addPluginPagesToMainMenu(links, pluginItems, section) {
-        for (var i = 0, length = pluginItems.length; i < length; i++) {
-            var pluginItem = pluginItems[i];
+        for (let i = 0, length = pluginItems.length; i < length; i++) {
+            const pluginItem = pluginItems[i];

            if (pluginItem.EnableInMainMenu && pluginItem.MenuSection === section) {
                links.push({
@ -482,10 +497,10 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function getToolsLinkHtml(item) {
-        var menuHtml = '';
-        var pageIds = item.pageIds ? item.pageIds.join('|') : '';
+        let menuHtml = '';
+        let pageIds = item.pageIds ? item.pageIds.join('|') : '';
        pageIds = pageIds ? ' data-pageids="' + pageIds + '"' : '';
-        var pageUrls = item.pageUrls ? item.pageUrls.join('|') : '';
+        let pageUrls = item.pageUrls ? item.pageUrls.join('|') : '';
        pageUrls = pageUrls ? ' data-pageurls="' + pageUrls + '"' : '';
        menuHtml += '<a is="emby-linkbutton" class="navMenuOption" href="' + item.href + '"' + pageIds + pageUrls + '>';

@ -501,11 +516,11 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '

    function getToolsMenuHtml(apiClient) {
        return getToolsMenuLinks(apiClient).then(function (items) {
-            var item;
-            var menuHtml = '';
+            let item;
+            let menuHtml = '';
            menuHtml += '<div class="drawerContent">';

-            for (var i = 0; i < items.length; i++) {
+            for (let i = 0; i < items.length; i++) {
                item = items[i];

                if (item.href) {
@ -523,7 +538,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '

    function createDashboardMenu(apiClient) {
        return getToolsMenuHtml(apiClient).then(function (toolsMenuHtml) {
-            var html = '';
+            let html = '';
            html += '<a class="adminDrawerLogo clearLink" is="emby-linkbutton" href="home.html">';
            html += '<img src="assets/img/icon-transparent.png" />';
            html += '</a>';
@ -534,25 +549,25 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function onSidebarLinkClick() {
-        var section = this.getElementsByClassName('sectionName')[0];
-        var text = section ? section.innerHTML : this.innerHTML;
+        const section = this.getElementsByClassName('sectionName')[0];
+        const text = section ? section.innerHTML : this.innerHTML;
        LibraryMenu.setTitle(text);
    }

    function getUserViews(apiClient, userId) {
        return apiClient.getUserViews({}, userId).then(function (result) {
-            var items = result.Items;
-            var list = [];
+            const items = result.Items;
+            const list = [];

-            for (var i = 0, length = items.length; i < length; i++) {
-                var view = items[i];
+            for (let i = 0, length = items.length; i < length; i++) {
+                const view = items[i];
                list.push(view);

                if (view.CollectionType == 'livetv') {
                    view.ImageTags = {};
                    view.icon = 'live_tv';
-                    var guideView = Object.assign({}, view);
-                    guideView.Name = globalize.translate('ButtonGuide');
+                    const guideView = Object.assign({}, view);
+                    guideView.Name = globalize.translate('Guide');
                    guideView.ImageTags = {};
                    guideView.icon = 'dvr';
                    guideView.url = 'livetv.html?tab=1';
@ -565,7 +580,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function showBySelector(selector, show) {
-        var elem = document.querySelector(selector);
+        const elem = document.querySelector(selector);

        if (elem) {
            if (show) {
@ -595,17 +610,17 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
            showBySelector('.libraryMenuDownloads', false);
        }

-        var userId = Dashboard.getCurrentUserId();
-        var apiClient = getCurrentApiClient();
-        var libraryMenuOptions = document.querySelector('.libraryMenuOptions');
+        const userId = Dashboard.getCurrentUserId();
+        const apiClient = getCurrentApiClient();
+        const libraryMenuOptions = document.querySelector('.libraryMenuOptions');

        if (libraryMenuOptions) {
            getUserViews(apiClient, userId).then(function (result) {
-                var items = result;
-                var html = `<h3 class="sidebarHeader">${globalize.translate('HeaderMedia')}</h3>`;
+                const items = result;
+                let html = `<h3 class="sidebarHeader">${globalize.translate('HeaderMedia')}</h3>`;
                html += items.map(function (i) {
-                    var icon = i.icon || imageHelper.getLibraryIcon(i.CollectionType);
-                    var itemId = i.Id;
+                    const icon = i.icon || imageHelper.getLibraryIcon(i.CollectionType);
+                    const itemId = i.Id;

                    return `<a is="emby-linkbutton" data-itemid="${itemId}" class="lnkMediaFolder navMenuOption" href="${getItemHref(i, i.CollectionType)}">
                                    <span class="material-icons navMenuOptionIcon ${icon}"></span>
@ -613,8 +628,8 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
                                  </a>`;
                }).join('');
                libraryMenuOptions.innerHTML = html;
-                var elem = libraryMenuOptions;
-                var sidebarLinks = elem.querySelectorAll('.navMenuOption');
+                const elem = libraryMenuOptions;
+                const sidebarLinks = elem.querySelectorAll('.navMenuOption');

                for (const sidebarLink of sidebarLinks) {
                    sidebarLink.removeEventListener('click', onSidebarLinkClick);
@ -643,9 +658,9 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function updateCastIcon() {
-        var context = document;
-        var info = playbackManager.getPlayerInfo();
-        var icon = headerCastButton.querySelector('.material-icons');
+        const context = document;
+        const info = playbackManager.getPlayerInfo();
+        const icon = headerCastButton.querySelector('.material-icons');

        icon.classList.remove('cast_connected', 'cast');

@ -661,18 +676,16 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function updateLibraryNavLinks(page) {
-        var i;
-        var length;
-        var isLiveTvPage = page.classList.contains('liveTvPage');
-        var isChannelsPage = page.classList.contains('channelsPage');
-        var isEditorPage = page.classList.contains('metadataEditorPage');
-        var isMySyncPage = page.classList.contains('mySyncPage');
-        var id = isLiveTvPage || isChannelsPage || isEditorPage || isMySyncPage || page.classList.contains('allLibraryPage') ? '' : getTopParentId() || '';
-        var elems = document.getElementsByClassName('lnkMediaFolder');
+        const isLiveTvPage = page.classList.contains('liveTvPage');
+        const isChannelsPage = page.classList.contains('channelsPage');
+        const isEditorPage = page.classList.contains('metadataEditorPage');
+        const isMySyncPage = page.classList.contains('mySyncPage');
+        const id = isLiveTvPage || isChannelsPage || isEditorPage || isMySyncPage || page.classList.contains('allLibraryPage') ? '' : getTopParentId() || '';
+        const elems = document.getElementsByClassName('lnkMediaFolder');

-        for (var i = 0, length = elems.length; i < length; i++) {
-            var lnkMediaFolder = elems[i];
-            var itemId = lnkMediaFolder.getAttribute('data-itemid');
+        for (let i = 0, length = elems.length; i < length; i++) {
+            const lnkMediaFolder = elems[i];
+            const itemId = lnkMediaFolder.getAttribute('data-itemid');

            if (isChannelsPage && itemId === 'channels') {
                lnkMediaFolder.classList.add('navMenuOption-selected');
@ -693,7 +706,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function updateMenuForPageType(isDashboardPage, isLibraryPage) {
-        var newPageType = isDashboardPage ? 2 : isLibraryPage ? 1 : 3;
+        const newPageType = isDashboardPage ? 2 : isLibraryPage ? 1 : 3;

        if (currentPageType !== newPageType) {
            currentPageType = newPageType;
@ -704,7 +717,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
                skinHeader.classList.remove('headroomDisabled');
            }

-            var bodyClassList = document.body.classList;
+            const bodyClassList = document.body.classList;

            if (isLibraryPage) {
                bodyClassList.add('libraryDocument');
@ -741,7 +754,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function updateTitle(page) {
-        var title = page.getAttribute('data-title');
+        const title = page.getAttribute('data-title');

        if (title) {
            LibraryMenu.setTitle(title);
@ -765,8 +778,8 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function initHeadRoom(elem) {
-        require(['headroom'], function (Headroom) {
-            var headroom = new Headroom(elem);
+        import('headroom').then(({default: Headroom}) => {
+            const headroom = new Headroom(elem);
            headroom.init();
        });
    }
@ -786,7 +799,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    }

    function getNavDrawerOptions() {
-        var drawerWidth = screen.availWidth - 50;
+        let drawerWidth = screen.availWidth - 50;
        drawerWidth = Math.max(drawerWidth, 240);
        drawerWidth = Math.min(drawerWidth, 320);
        return {
@ -805,7 +818,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
        navDrawerScrollContainer = navDrawerElement.querySelector('.scrollContainer');
        navDrawerScrollContainer.addEventListener('click', onMainDrawerClick);
        return new Promise(function (resolve, reject) {
-            require(['navdrawer'], function (navdrawer) {
+            import('navdrawer').then(({default: navdrawer}) => {
                navDrawerInstance = new navdrawer(getNavDrawerOptions());

                if (!layoutManager.tv) {
@ -817,98 +830,98 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
        });
    }

-    var navDrawerElement;
-    var navDrawerScrollContainer;
-    var navDrawerInstance;
-    var mainDrawerButton;
-    var headerHomeButton;
-    var currentDrawerType;
-    var pageTitleElement;
-    var headerBackButton;
-    var headerUserButton;
-    var currentUser;
-    var headerCastButton;
-    var headerSearchButton;
-    var headerAudioPlayerButton;
-    var headerSyncButton;
-    var enableLibraryNavDrawer = layoutManager.desktop;
-    var enableLibraryNavDrawerHome = !layoutManager.tv;
-    var skinHeader = document.querySelector('.skinHeader');
-    var requiresUserRefresh = true;
-    window.LibraryMenu = {
-        getTopParentId: getTopParentId,
-        onHardwareMenuButtonClick: function () {
-            toggleMainDrawer();
-        },
-        setTabs: function (type, selectedIndex, builder) {
-            require(['mainTabsManager'], function (mainTabsManager) {
-                if (type) {
-                    mainTabsManager.setTabs(viewManager.currentView(), selectedIndex, builder, function () {
-                        return [];
-                    });
-                } else {
-                    mainTabsManager.setTabs(null);
-                }
-            });
-        },
-        setDefaultTitle: function () {
-            if (!pageTitleElement) {
-                pageTitleElement = document.querySelector('.pageTitle');
-            }
+    let navDrawerElement;
+    let navDrawerScrollContainer;
+    let navDrawerInstance;
+    let mainDrawerButton;
+    let headerHomeButton;
+    let currentDrawerType;
+    let pageTitleElement;
+    let headerBackButton;
+    let headerUserButton;
+    let currentUser;
+    let headerCastButton;
+    let headerSearchButton;
+    let headerAudioPlayerButton;
+    let headerSyncButton;
+    const enableLibraryNavDrawer = layoutManager.desktop;
+    const enableLibraryNavDrawerHome = !layoutManager.tv;
+    const skinHeader = document.querySelector('.skinHeader');
+    let requiresUserRefresh = true;

-            if (pageTitleElement) {
-                pageTitleElement.classList.add('pageTitleWithLogo');
-                pageTitleElement.classList.add('pageTitleWithDefaultLogo');
-                pageTitleElement.style.backgroundImage = null;
-                pageTitleElement.innerHTML = '';
-            }
-
-            document.title = 'Jellyfin';
-        },
-        setTitle: function (title) {
-            if (title == null) {
-                return void LibraryMenu.setDefaultTitle();
-            }
-
-            if (title === '-') {
-                title = '';
-            }
-
-            var html = title;
-
-            if (!pageTitleElement) {
-                pageTitleElement = document.querySelector('.pageTitle');
-            }
-
-            if (pageTitleElement) {
-                pageTitleElement.classList.remove('pageTitleWithLogo');
-                pageTitleElement.classList.remove('pageTitleWithDefaultLogo');
-                pageTitleElement.style.backgroundImage = null;
-                pageTitleElement.innerHTML = html || '';
-            }
-
-            document.title = title || 'Jellyfin';
-        },
-        setTransparentMenu: function (transparent) {
-            if (transparent) {
-                skinHeader.classList.add('semiTransparent');
+    function setTabs (type, selectedIndex, builder) {
+        import('mainTabsManager').then((mainTabsManager) => {
+            if (type) {
+                mainTabsManager.setTabs(viewManager.currentView(), selectedIndex, builder, function () {
+                    return [];
+                });
            } else {
-                skinHeader.classList.remove('semiTransparent');
+                mainTabsManager.setTabs(null);
            }
+        });
+    }
+
+    function setDefaultTitle () {
+        if (!pageTitleElement) {
+            pageTitleElement = document.querySelector('.pageTitle');
        }
-    };
-    var currentPageType;
+
+        if (pageTitleElement) {
+            pageTitleElement.classList.add('pageTitleWithLogo');
+            pageTitleElement.classList.add('pageTitleWithDefaultLogo');
+            pageTitleElement.style.backgroundImage = null;
+            pageTitleElement.innerHTML = '';
+        }
+
+        document.title = 'Jellyfin';
+    }
+
+    function setTitle (title) {
+        if (title == null) {
+            return void LibraryMenu.setDefaultTitle();
+        }
+
+        if (title === '-') {
+            title = '';
+        }
+
+        const html = title;
+
+        if (!pageTitleElement) {
+            pageTitleElement = document.querySelector('.pageTitle');
+        }
+
+        if (pageTitleElement) {
+            pageTitleElement.classList.remove('pageTitleWithLogo');
+            pageTitleElement.classList.remove('pageTitleWithDefaultLogo');
+            pageTitleElement.style.backgroundImage = null;
+            pageTitleElement.innerHTML = html || '';
+        }
+
+        document.title = title || 'Jellyfin';
+    }
+
+    function setTransparentMenu (transparent) {
+        if (transparent) {
+            skinHeader.classList.add('semiTransparent');
+        } else {
+            skinHeader.classList.remove('semiTransparent');
+        }
+    }
+
+    let currentPageType;
    pageClassOn('pagebeforeshow', 'page', function (e) {
        if (!this.classList.contains('withTabs')) {
            LibraryMenu.setTabs(null);
        }
    });
+
    pageClassOn('pageshow', 'page', function (e) {
-        var page = this;
-        var isDashboardPage = page.classList.contains('type-interior');
-        var isHomePage = page.classList.contains('homePage');
-        var isLibraryPage = !isDashboardPage && page.classList.contains('libraryPage');
-        var apiClient = getCurrentApiClient();
+        const page = this;
+        const isDashboardPage = page.classList.contains('type-interior');
+        const isHomePage = page.classList.contains('homePage');
+        const isLibraryPage = !isDashboardPage && page.classList.contains('libraryPage');
+        const apiClient = getCurrentApiClient();

        if (isDashboardPage) {
            if (mainDrawerButton) {
@ -945,7 +958,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
    renderHeader();

    events.on(connectionManager, 'localusersignedin', function (e, user) {
-        var currentApiClient = connectionManager.getApiClient(user.ServerId);
+        const currentApiClient = connectionManager.getApiClient(user.ServerId);

        currentDrawerType = null;
        currentUser = {
@ -959,15 +972,32 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
            updateUserInHeader(user);
        });
    });
+
    events.on(connectionManager, 'localusersignedout', function () {
        currentUser = {};
        updateUserInHeader();
    });
+
    events.on(playbackManager, 'playerchange', updateCastIcon);

    events.on(syncPlayManager, 'enabled', onSyncPlayEnabled);
    events.on(syncPlayManager, 'syncing', onSyncPlaySyncing);

    loadNavDrawer();
-    return LibraryMenu;
-});
+
+    const LibraryMenu = {
+        getTopParentId: getTopParentId,
+        onHardwareMenuButtonClick: function () {
+            toggleMainDrawer();
+        },
+        setTabs: setTabs,
+        setDefaultTitle: setDefaultTitle,
+        setTitle: setTitle,
+        setTransparentMenu: setTransparentMenu
+    };
+
+    window.LibraryMenu = LibraryMenu;
+
+export default LibraryMenu;
+
+/* eslint-enable indent */
--- a/src/scripts/livetvcomponents.js
+++ b/src/scripts/livetvcomponents.js
@ -1,115 +1,109 @@
-define(['layoutManager', 'datetime', 'cardBuilder', 'apphost'], function (layoutManager, datetime, cardBuilder, appHost) {
-    'use strict';
+import layoutManager from 'layoutManager';
+import datetime from 'datetime';
+import cardBuilder from 'cardBuilder';

-    function enableScrollX() {
-        return !layoutManager.desktop;
+function enableScrollX() {
+    return !layoutManager.desktop;
+}
+
+function getBackdropShape() {
+    return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
+}
+
+function getTimersHtml(timers, options) {
+    options = options || {};
+
+    const items = timers.map(function (t) {
+        t.Type = 'Timer';
+        return t;
+    });
+
+    const groups = [];
+    let currentGroupName = '';
+    let currentGroup = [];
+
+    for (const item of items) {
+        let dateText = '';
+
+        if (options.indexByDate !== false && item.StartDate) {
+            try {
+                const premiereDate = datetime.parseISO8601Date(item.StartDate, true);
+                dateText = datetime.toLocaleDateString(premiereDate, {
+                    weekday: 'long',
+                    month: 'short',
+                    day: 'numeric'
+                });
+            } catch (err) {
+                console.error('error parsing premiereDate:' + item.StartDate + '; error: ' + err);
+            }
+        }
+
+        if (dateText != currentGroupName) {
+            if (currentGroup.length) {
+                groups.push({
+                    name: currentGroupName,
+                    items: currentGroup
+                });
+            }
+
+            currentGroupName = dateText;
+            currentGroup = [item];
+        } else {
+            currentGroup.push(item);
+        }
    }

-    function getBackdropShape() {
-        return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
-    }
-
-    function getTimersHtml(timers, options) {
-        options = options || {};
-        var i;
-        var length;
-        var items = timers.map(function (t) {
-            t.Type = 'Timer';
-            return t;
+    if (currentGroup.length) {
+        groups.push({
+            name: currentGroupName,
+            items: currentGroup
        });
-        var groups = [];
-        var currentGroupName = '';
-        var currentGroup = [];
-
-        for (i = 0, length = items.length; i < length; i++) {
-            var item = items[i];
-            var dateText = '';
-
-            if (options.indexByDate !== false && item.StartDate) {
-                try {
-                    var premiereDate = datetime.parseISO8601Date(item.StartDate, true);
-                    dateText = datetime.toLocaleDateString(premiereDate, {
-                        weekday: 'long',
-                        month: 'short',
-                        day: 'numeric'
-                    });
-                } catch (err) {
-                    console.error('error parsing premiereDate:' + item.StartDate + '; error: ' + err);
-                }
-            }
-
-            if (dateText != currentGroupName) {
-                if (currentGroup.length) {
-                    groups.push({
-                        name: currentGroupName,
-                        items: currentGroup
-                    });
-                }
-
-                currentGroupName = dateText;
-                currentGroup = [item];
-            } else {
-                currentGroup.push(item);
-            }
-        }
-
-        if (currentGroup.length) {
-            groups.push({
-                name: currentGroupName,
-                items: currentGroup
-            });
-        }
-
-        var html = '';
-
-        for (i = 0, length = groups.length; i < length; i++) {
-            var group = groups[i];
-
-            if (group.name) {
-                html += '<div class="verticalSection">';
-                html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + group.name + '</h2>';
-            }
-            if (enableScrollX()) {
-                var scrollXClass = 'scrollX hiddenScrollX';
-
-                if (layoutManager.tv) {
-                    scrollXClass += ' smoothScrollX';
-                }
-
-                html += '<div is="emby-itemscontainer" class="itemsContainer ' + scrollXClass + ' padded-left padded-right">';
-            } else {
-                html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">';
-            }
-
-            html += cardBuilder.getCardsHtml({
-                items: group.items,
-                shape: getBackdropShape(),
-                showParentTitleOrTitle: true,
-                showAirTime: true,
-                showAirEndTime: true,
-                showChannelName: false,
-                cardLayout: true,
-                centerText: false,
-                action: 'edit',
-                cardFooterAside: 'none',
-                preferThumb: true,
-                defaultShape: null,
-                coverImage: true,
-                allowBottomPadding: false,
-                overlayText: false,
-                showChannelLogo: true
-            });
-            html += '</div>';
-
-            if (group.name) {
-                html += '</div>';
-            }
-        }
-
-        return Promise.resolve(html);
    }
+    let html = '';
+    for (const group of groups) {
+        if (group.name) {
+            html += '<div class="verticalSection">';
+            html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + group.name + '</h2>';
+        }

-    window.LiveTvHelpers = {
-        getTimersHtml: getTimersHtml
-    };
-});
+        if (enableScrollX()) {
+            let scrollXClass = 'scrollX hiddenScrollX';
+            if (layoutManager.tv) {
+                scrollXClass += ' smoothScrollX';
+            }
+            html += '<div is="emby-itemscontainer" class="itemsContainer ' + scrollXClass + ' padded-left padded-right">';
+        } else {
+            html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">';
+        }
+
+        html += cardBuilder.getCardsHtml({
+            items: group.items,
+            shape: getBackdropShape(),
+            showParentTitleOrTitle: true,
+            showAirTime: true,
+            showAirEndTime: true,
+            showChannelName: false,
+            cardLayout: true,
+            centerText: false,
+            action: 'edit',
+            cardFooterAside: 'none',
+            preferThumb: true,
+            defaultShape: null,
+            coverImage: true,
+            allowBottomPadding: false,
+            overlayText: false,
+            showChannelLogo: true
+        });
+
+        html += '</div>';
+
+        if (group.name) {
+            html += '</div>';
+        }
+    }
+    return Promise.resolve(html);
+}
+
+window.LiveTvHelpers = {
+    getTimersHtml: getTimersHtml
+};
--- a/src/scripts/routes.js
+++ b/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',
-        autoFocus: false,
-        roles: 'admin',
-        controller: 'dashboard/dlna/settings'
-    });
-
-    defineRoute({
-        path: '/edititemmetadata.html',
+        alias: '/edititemmetadata.html',
+        path: '/controllers/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({
--- a/src/scripts/scrollHelper.js
+++ b/src/scripts/scrollHelper.js
@ -1,137 +1,138 @@
-define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
-    'use strict';
+import focusManager from 'focusManager';
+import dom from 'dom';
+import 'scrollStyles';

-    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
+    if (elem.getBoundingClientRect) {
+        return elem.getBoundingClientRect();
+    } else {
+        return { top: 0, left: 0 };
+    }
+}

-    function getBoundingClientRect(elem) {
-        // Support: BlackBerry 5, iOS 3 (original iPhone)
-        // If we don't have gBCR, just use 0,0 rather than error
-        if (elem.getBoundingClientRect) {
-            return elem.getBoundingClientRect();
-        } else {
-            return { top: 0, left: 0 };
-        }
+export function getPosition(scrollContainer, item, horizontal) {
+    const slideeOffset = getBoundingClientRect(scrollContainer);
+    const itemOffset = getBoundingClientRect(item);
+
+    let offset = horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
+    let size = horizontal ? itemOffset.width : itemOffset.height;
+    if (!size && size !== 0) {
+        size = item[horizontal ? 'offsetWidth' : 'offsetHeight'];
    }

-    function getPosition(scrollContainer, item, horizontal) {
-        var slideeOffset = getBoundingClientRect(scrollContainer);
-        var itemOffset = getBoundingClientRect(item);
+    const currentStart = horizontal ? scrollContainer.scrollLeft : scrollContainer.scrollTop;

-        var offset = horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
-        var size = horizontal ? itemOffset.width : itemOffset.height;
-        if (!size && size !== 0) {
-            size = item[horizontal ? 'offsetWidth' : 'offsetHeight'];
-        }
+    offset += currentStart;

-        var currentStart = horizontal ? scrollContainer.scrollLeft : scrollContainer.scrollTop;
+    const frameSize = horizontal ? scrollContainer.offsetWidth : scrollContainer.offsetHeight;

-        offset += currentStart;
+    const currentEnd = currentStart + frameSize;

-        var frameSize = horizontal ? scrollContainer.offsetWidth : scrollContainer.offsetHeight;
-
-        var currentEnd = currentStart + frameSize;
-
-        var isVisible = offset >= currentStart && (offset + size) <= currentEnd;
-
-        return {
-            start: offset,
-            center: (offset - (frameSize / 2) + (size / 2)),
-            end: offset - frameSize + size,
-            size: size,
-            isVisible: isVisible
-        };
-    }
-
-    function toCenter(container, elem, horizontal, skipWhenVisible) {
-        var pos = getPosition(container, elem, horizontal);
-
-        if (skipWhenVisible && pos.isVisible) {
-            return;
-        }
-
-        if (container.scrollTo) {
-            if (horizontal) {
-                container.scrollTo(pos.center, 0);
-            } else {
-                container.scrollTo(0, pos.center);
-            }
-        } else {
-            if (horizontal) {
-                container.scrollLeft = Math.round(pos.center);
-            } else {
-                container.scrollTop = Math.round(pos.center);
-            }
-        }
-    }
-
-    function toStart(container, elem, horizontal, skipWhenVisible) {
-        var pos = getPosition(container, elem, horizontal);
-
-        if (skipWhenVisible && pos.isVisible) {
-            return;
-        }
-
-        if (container.scrollTo) {
-            if (horizontal) {
-                container.scrollTo(pos.start, 0);
-            } else {
-                container.scrollTo(0, pos.start);
-            }
-        } else {
-            if (horizontal) {
-                container.scrollLeft = Math.round(pos.start);
-            } else {
-                container.scrollTop = Math.round(pos.start);
-            }
-        }
-    }
-
-    function centerOnFocus(e, scrollSlider, horizontal) {
-        var focused = focusManager.focusableParent(e.target);
-
-        if (focused) {
-            toCenter(scrollSlider, focused, horizontal);
-        }
-    }
-
-    function centerOnFocusHorizontal(e) {
-        centerOnFocus(e, this, true);
-    }
-    function centerOnFocusVertical(e) {
-        centerOnFocus(e, this, false);
-    }
+    const isVisible = offset >= currentStart && (offset + size) <= currentEnd;

    return {
-        getPosition: getPosition,
-        centerFocus: {
-            on: function (element, horizontal) {
-                if (horizontal) {
-                    dom.addEventListener(element, 'focus', centerOnFocusHorizontal, {
-                        capture: true,
-                        passive: true
-                    });
-                } else {
-                    dom.addEventListener(element, 'focus', centerOnFocusVertical, {
-                        capture: true,
-                        passive: true
-                    });
-                }
-            },
-            off: function (element, horizontal) {
-                if (horizontal) {
-                    dom.removeEventListener(element, 'focus', centerOnFocusHorizontal, {
-                        capture: true,
-                        passive: true
-                    });
-                } else {
-                    dom.removeEventListener(element, 'focus', centerOnFocusVertical, {
-                        capture: true,
-                        passive: true
-                    });
-                }
-            }
-        },
-        toCenter: toCenter,
-        toStart: toStart
+        start: offset,
+        center: (offset - (frameSize / 2) + (size / 2)),
+        end: offset - frameSize + size,
+        size: size,
+        isVisible: isVisible
    };
-});
+}
+
+export function toCenter(container, elem, horizontal, skipWhenVisible) {
+    const pos = getPosition(container, elem, horizontal);
+
+    if (skipWhenVisible && pos.isVisible) {
+        return;
+    }
+
+    if (container.scrollTo) {
+        if (horizontal) {
+            container.scrollTo(pos.center, 0);
+        } else {
+            container.scrollTo(0, pos.center);
+        }
+    } else {
+        if (horizontal) {
+            container.scrollLeft = Math.round(pos.center);
+        } else {
+            container.scrollTop = Math.round(pos.center);
+        }
+    }
+}
+
+export function toStart(container, elem, horizontal, skipWhenVisible) {
+    const pos = getPosition(container, elem, horizontal);
+
+    if (skipWhenVisible && pos.isVisible) {
+        return;
+    }
+
+    if (container.scrollTo) {
+        if (horizontal) {
+            container.scrollTo(pos.start, 0);
+        } else {
+            container.scrollTo(0, pos.start);
+        }
+    } else {
+        if (horizontal) {
+            container.scrollLeft = Math.round(pos.start);
+        } else {
+            container.scrollTop = Math.round(pos.start);
+        }
+    }
+}
+
+function centerOnFocus(e, scrollSlider, horizontal) {
+    const focused = focusManager.focusableParent(e.target);
+
+    if (focused) {
+        toCenter(scrollSlider, focused, horizontal);
+    }
+}
+
+function centerOnFocusHorizontal(e) {
+    centerOnFocus(e, this, true);
+}
+
+function centerOnFocusVertical(e) {
+    centerOnFocus(e, this, false);
+}
+
+export const centerFocus = {
+    on: function (element, horizontal) {
+        if (horizontal) {
+            dom.addEventListener(element, 'focus', centerOnFocusHorizontal, {
+                capture: true,
+                passive: true
+            });
+        } else {
+            dom.addEventListener(element, 'focus', centerOnFocusVertical, {
+                capture: true,
+                passive: true
+            });
+        }
+    },
+    off: function (element, horizontal) {
+        if (horizontal) {
+            dom.removeEventListener(element, 'focus', centerOnFocusHorizontal, {
+                capture: true,
+                passive: true
+            });
+        } else {
+            dom.removeEventListener(element, 'focus', centerOnFocusVertical, {
+                capture: true,
+                passive: true
+            });
+        }
+    }
+};
+
+export default {
+    getPosition: getPosition,
+    centerFocus: centerFocus,
+    toCenter: toCenter,
+    toStart: toStart
+};
--- a/src/scripts/searchtab.js
+++ b/src/scripts/searchtab.js
@ -1,57 +0,0 @@
-define(['searchFields', 'searchResults', 'events'], function (SearchFields, SearchResults, events) {
-    'use strict';
-
-    SearchFields = SearchFields.default || SearchFields;
-    SearchResults = SearchResults.default || SearchResults;
-
-    function init(instance, tabContent, options) {
-        tabContent.innerHTML = '<div class="padded-left padded-right searchFields"></div><div class="searchResults padded-top" style="padding-top:1.5em;"></div>';
-        instance.searchFields = new SearchFields({
-            element: tabContent.querySelector('.searchFields')
-        });
-        instance.searchResults = new SearchResults({
-            element: tabContent.querySelector('.searchResults'),
-            serverId: ApiClient.serverId(),
-            parentId: options.parentId,
-            collectionType: options.collectionType
-        });
-        events.on(instance.searchFields, 'search', function (e, value) {
-            instance.searchResults.search(value);
-        });
-    }
-
-    function SearchTab(view, tabContent, options) {
-        var self = this;
-        options = options || {};
-        init(this, tabContent, options);
-
-        self.preRender = function () {};
-
-        self.renderTab = function () {
-            var searchFields = this.searchFields;
-
-            if (searchFields) {
-                searchFields.focus();
-            }
-        };
-    }
-
-    SearchTab.prototype.destroy = function () {
-        var searchFields = this.searchFields;
-
-        if (searchFields) {
-            searchFields.destroy();
-        }
-
-        this.searchFields = null;
-        var searchResults = this.searchResults;
-
-        if (searchResults) {
-            searchResults.destroy();
-        }
-
-        this.searchResults = null;
-    };
-
-    return SearchTab;
-});
--- a/src/scripts/serverNotifications.js
+++ b/src/scripts/serverNotifications.js
@ -1,214 +1,216 @@
-define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'inputManager', 'focusManager', 'appRouter'], function (connectionManager, playbackManager, syncPlayManager, events, inputManager, focusManager, appRouter) {
-    'use strict';
+import connectionManager from 'connectionManager';
+import playbackManager from 'playbackManager';
+import syncPlayManager from 'syncPlayManager';
+import events from 'events';
+import inputManager from 'inputManager';
+import focusManager from 'focusManager';
+import appRouter from 'appRouter';

-    playbackManager = playbackManager.default || playbackManager;
-    focusManager = focusManager.default || focusManager;
+const serverNotifications = {};

-    var serverNotifications = {};
+function notifyApp() {
+    inputManager.notify();
+}

-    function notifyApp() {
-        inputManager.notify();
-    }
-
-    function displayMessage(cmd) {
-        var args = cmd.Arguments;
-        if (args.TimeoutMs) {
-            require(['toast'], function (toast) {
-                toast({ title: args.Header, text: args.Text });
-            });
-        } else {
-            require(['alert'], function (alert) {
-                alert.default({ title: args.Header, text: args.Text });
-            });
-        }
-    }
-
-    function displayContent(cmd, apiClient) {
-        if (!playbackManager.isPlayingLocally(['Video', 'Book'])) {
-            appRouter.showItem(cmd.Arguments.ItemId, apiClient.serverId());
-        }
-    }
-
-    function playTrailers(apiClient, itemId) {
-        apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
-            playbackManager.playTrailers(item);
+function displayMessage(cmd) {
+    const args = cmd.Arguments;
+    if (args.TimeoutMs) {
+        import('toast').then(({default: toast}) => {
+            toast({ title: args.Header, text: args.Text });
+        });
+    } else {
+        import('alert').then(({default: alert}) => {
+            alert({ title: args.Header, text: args.Text });
        });
    }
+}

-    function processGeneralCommand(cmd, apiClient) {
-        console.debug('Received command: ' + cmd.Name);
-        switch (cmd.Name) {
-            case 'Select':
-                inputManager.handleCommand('select');
-                return;
-            case 'Back':
-                inputManager.handleCommand('back');
-                return;
-            case 'MoveUp':
-                inputManager.handleCommand('up');
-                return;
-            case 'MoveDown':
-                inputManager.handleCommand('down');
-                return;
-            case 'MoveLeft':
-                inputManager.handleCommand('left');
-                return;
-            case 'MoveRight':
-                inputManager.handleCommand('right');
-                return;
-            case 'PageUp':
-                inputManager.handleCommand('pageup');
-                return;
-            case 'PageDown':
-                inputManager.handleCommand('pagedown');
-                return;
-            case 'PlayTrailers':
-                playTrailers(apiClient, cmd.Arguments.ItemId);
-                break;
-            case 'SetRepeatMode':
-                playbackManager.setRepeatMode(cmd.Arguments.RepeatMode);
-                break;
-            case 'SetShuffleQueue':
-                playbackManager.setQueueShuffleMode(cmd.Arguments.ShuffleMode);
-                break;
-            case 'VolumeUp':
-                inputManager.handleCommand('volumeup');
-                return;
-            case 'VolumeDown':
-                inputManager.handleCommand('volumedown');
-                return;
-            case 'ChannelUp':
-                inputManager.handleCommand('channelup');
-                return;
-            case 'ChannelDown':
-                inputManager.handleCommand('channeldown');
-                return;
-            case 'Mute':
-                inputManager.handleCommand('mute');
-                return;
-            case 'Unmute':
-                inputManager.handleCommand('unmute');
-                return;
-            case 'ToggleMute':
-                inputManager.handleCommand('togglemute');
-                return;
-            case 'SetVolume':
-                notifyApp();
-                playbackManager.setVolume(cmd.Arguments.Volume);
-                break;
-            case 'SetAudioStreamIndex':
-                notifyApp();
-                playbackManager.setAudioStreamIndex(parseInt(cmd.Arguments.Index));
-                break;
-            case 'SetSubtitleStreamIndex':
-                notifyApp();
-                playbackManager.setSubtitleStreamIndex(parseInt(cmd.Arguments.Index));
-                break;
-            case 'ToggleFullscreen':
-                inputManager.handleCommand('togglefullscreen');
-                return;
-            case 'GoHome':
-                inputManager.handleCommand('home');
-                return;
-            case 'GoToSettings':
-                inputManager.handleCommand('settings');
-                return;
-            case 'DisplayContent':
-                displayContent(cmd, apiClient);
-                break;
-            case 'GoToSearch':
-                inputManager.handleCommand('search');
-                return;
-            case 'DisplayMessage':
-                displayMessage(cmd);
-                break;
-            case 'ToggleOsd':
-                // todo
-                break;
-            case 'ToggleContextMenu':
-                // todo
-                break;
-            case 'TakeScreenShot':
-                // todo
-                break;
-            case 'SendKey':
-                // todo
-                break;
-            case 'SendString':
-                // todo
-                focusManager.sendText(cmd.Arguments.String);
-                break;
-            default:
-                console.debug('processGeneralCommand does not recognize: ' + cmd.Name);
-                break;
-        }
-
-        notifyApp();
+function displayContent(cmd, apiClient) {
+    if (!playbackManager.isPlayingLocally(['Video', 'Book'])) {
+        appRouter.showItem(cmd.Arguments.ItemId, apiClient.serverId());
    }
+}

-    function onMessageReceived(e, msg) {
-        var apiClient = this;
-        if (msg.MessageType === 'Play') {
-            notifyApp();
-            var serverId = apiClient.serverInfo().Id;
-            if (msg.Data.PlayCommand === 'PlayNext') {
-                playbackManager.queueNext({ ids: msg.Data.ItemIds, serverId: serverId });
-            } else if (msg.Data.PlayCommand === 'PlayLast') {
-                playbackManager.queue({ ids: msg.Data.ItemIds, serverId: serverId });
-            } else {
-                playbackManager.play({
-                    ids: msg.Data.ItemIds,
-                    startPositionTicks: msg.Data.StartPositionTicks,
-                    mediaSourceId: msg.Data.MediaSourceId,
-                    audioStreamIndex: msg.Data.AudioStreamIndex,
-                    subtitleStreamIndex: msg.Data.SubtitleStreamIndex,
-                    startIndex: msg.Data.StartIndex,
-                    serverId: serverId
-                });
-            }
-        } else if (msg.MessageType === 'Playstate') {
-            if (msg.Data.Command === 'Stop') {
-                inputManager.handleCommand('stop');
-            } else if (msg.Data.Command === 'Pause') {
-                inputManager.handleCommand('pause');
-            } else if (msg.Data.Command === 'Unpause') {
-                inputManager.handleCommand('play');
-            } else if (msg.Data.Command === 'PlayPause') {
-                inputManager.handleCommand('playpause');
-            } else if (msg.Data.Command === 'Seek') {
-                playbackManager.seek(msg.Data.SeekPositionTicks);
-            } else if (msg.Data.Command === 'NextTrack') {
-                inputManager.handleCommand('next');
-            } else if (msg.Data.Command === 'PreviousTrack') {
-                inputManager.handleCommand('previous');
-            } else {
-                notifyApp();
-            }
-        } else if (msg.MessageType === 'GeneralCommand') {
-            var cmd = msg.Data;
-            processGeneralCommand(cmd, apiClient);
-        } else if (msg.MessageType === 'UserDataChanged') {
-            if (msg.Data.UserId === apiClient.getCurrentUserId()) {
-                for (var i = 0, length = msg.Data.UserDataList.length; i < length; i++) {
-                    events.trigger(serverNotifications, 'UserDataChanged', [apiClient, msg.Data.UserDataList[i]]);
-                }
-            }
-        } else if (msg.MessageType === 'SyncPlayCommand') {
-            syncPlayManager.processCommand(msg.Data, apiClient);
-        } else if (msg.MessageType === 'SyncPlayGroupUpdate') {
-            syncPlayManager.processGroupUpdate(msg.Data, apiClient);
-        } else {
-            events.trigger(serverNotifications, msg.MessageType, [apiClient, msg.Data]);
-        }
-    }
-    function bindEvents(apiClient) {
-        events.off(apiClient, 'message', onMessageReceived);
-        events.on(apiClient, 'message', onMessageReceived);
-    }
-
-    connectionManager.getApiClients().forEach(bindEvents);
-    events.on(connectionManager, 'apiclientcreated', function (e, newApiClient) {
-        bindEvents(newApiClient);
+function playTrailers(apiClient, itemId) {
+    apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
+        playbackManager.playTrailers(item);
    });
-    return serverNotifications;
+}
+
+function processGeneralCommand(cmd, apiClient) {
+    console.debug('Received command: ' + cmd.Name);
+    switch (cmd.Name) {
+        case 'Select':
+            inputManager.handleCommand('select');
+            return;
+        case 'Back':
+            inputManager.handleCommand('back');
+            return;
+        case 'MoveUp':
+            inputManager.handleCommand('up');
+            return;
+        case 'MoveDown':
+            inputManager.handleCommand('down');
+            return;
+        case 'MoveLeft':
+            inputManager.handleCommand('left');
+            return;
+        case 'MoveRight':
+            inputManager.handleCommand('right');
+            return;
+        case 'PageUp':
+            inputManager.handleCommand('pageup');
+            return;
+        case 'PageDown':
+            inputManager.handleCommand('pagedown');
+            return;
+        case 'PlayTrailers':
+            playTrailers(apiClient, cmd.Arguments.ItemId);
+            break;
+        case 'SetRepeatMode':
+            playbackManager.setRepeatMode(cmd.Arguments.RepeatMode);
+            break;
+        case 'SetShuffleQueue':
+            playbackManager.setQueueShuffleMode(cmd.Arguments.ShuffleMode);
+            break;
+        case 'VolumeUp':
+            inputManager.handleCommand('volumeup');
+            return;
+        case 'VolumeDown':
+            inputManager.handleCommand('volumedown');
+            return;
+        case 'ChannelUp':
+            inputManager.handleCommand('channelup');
+            return;
+        case 'ChannelDown':
+            inputManager.handleCommand('channeldown');
+            return;
+        case 'Mute':
+            inputManager.handleCommand('mute');
+            return;
+        case 'Unmute':
+            inputManager.handleCommand('unmute');
+            return;
+        case 'ToggleMute':
+            inputManager.handleCommand('togglemute');
+            return;
+        case 'SetVolume':
+            notifyApp();
+            playbackManager.setVolume(cmd.Arguments.Volume);
+            break;
+        case 'SetAudioStreamIndex':
+            notifyApp();
+            playbackManager.setAudioStreamIndex(parseInt(cmd.Arguments.Index));
+            break;
+        case 'SetSubtitleStreamIndex':
+            notifyApp();
+            playbackManager.setSubtitleStreamIndex(parseInt(cmd.Arguments.Index));
+            break;
+        case 'ToggleFullscreen':
+            inputManager.handleCommand('togglefullscreen');
+            return;
+        case 'GoHome':
+            inputManager.handleCommand('home');
+            return;
+        case 'GoToSettings':
+            inputManager.handleCommand('settings');
+            return;
+        case 'DisplayContent':
+            displayContent(cmd, apiClient);
+            break;
+        case 'GoToSearch':
+            inputManager.handleCommand('search');
+            return;
+        case 'DisplayMessage':
+            displayMessage(cmd);
+            break;
+        case 'ToggleOsd':
+            // todo
+            break;
+        case 'ToggleContextMenu':
+            // todo
+            break;
+        case 'TakeScreenShot':
+            // todo
+            break;
+        case 'SendKey':
+            // todo
+            break;
+        case 'SendString':
+            // todo
+            focusManager.sendText(cmd.Arguments.String);
+            break;
+        default:
+            console.debug('processGeneralCommand does not recognize: ' + cmd.Name);
+            break;
+    }
+
+    notifyApp();
+}
+
+function onMessageReceived(e, msg) {
+    const apiClient = this;
+    if (msg.MessageType === 'Play') {
+        notifyApp();
+        const serverId = apiClient.serverInfo().Id;
+        if (msg.Data.PlayCommand === 'PlayNext') {
+            playbackManager.queueNext({ ids: msg.Data.ItemIds, serverId: serverId });
+        } else if (msg.Data.PlayCommand === 'PlayLast') {
+            playbackManager.queue({ ids: msg.Data.ItemIds, serverId: serverId });
+        } else {
+            playbackManager.play({
+                ids: msg.Data.ItemIds,
+                startPositionTicks: msg.Data.StartPositionTicks,
+                mediaSourceId: msg.Data.MediaSourceId,
+                audioStreamIndex: msg.Data.AudioStreamIndex,
+                subtitleStreamIndex: msg.Data.SubtitleStreamIndex,
+                startIndex: msg.Data.StartIndex,
+                serverId: serverId
+            });
+        }
+    } else if (msg.MessageType === 'Playstate') {
+        if (msg.Data.Command === 'Stop') {
+            inputManager.handleCommand('stop');
+        } else if (msg.Data.Command === 'Pause') {
+            inputManager.handleCommand('pause');
+        } else if (msg.Data.Command === 'Unpause') {
+            inputManager.handleCommand('play');
+        } else if (msg.Data.Command === 'PlayPause') {
+            inputManager.handleCommand('playpause');
+        } else if (msg.Data.Command === 'Seek') {
+            playbackManager.seek(msg.Data.SeekPositionTicks);
+        } else if (msg.Data.Command === 'NextTrack') {
+            inputManager.handleCommand('next');
+        } else if (msg.Data.Command === 'PreviousTrack') {
+            inputManager.handleCommand('previous');
+        } else {
+            notifyApp();
+        }
+    } else if (msg.MessageType === 'GeneralCommand') {
+        const cmd = msg.Data;
+        processGeneralCommand(cmd, apiClient);
+    } else if (msg.MessageType === 'UserDataChanged') {
+        if (msg.Data.UserId === apiClient.getCurrentUserId()) {
+            for (let i = 0, length = msg.Data.UserDataList.length; i < length; i++) {
+                events.trigger(serverNotifications, 'UserDataChanged', [apiClient, msg.Data.UserDataList[i]]);
+            }
+        }
+    } else if (msg.MessageType === 'SyncPlayCommand') {
+        syncPlayManager.processCommand(msg.Data, apiClient);
+    } else if (msg.MessageType === 'SyncPlayGroupUpdate') {
+        syncPlayManager.processGroupUpdate(msg.Data, apiClient);
+    } else {
+        events.trigger(serverNotifications, msg.MessageType, [apiClient, msg.Data]);
+    }
+}
+function bindEvents(apiClient) {
+    events.off(apiClient, 'message', onMessageReceived);
+    events.on(apiClient, 'message', onMessageReceived);
+}
+
+connectionManager.getApiClients().forEach(bindEvents);
+events.on(connectionManager, 'apiclientcreated', function (e, newApiClient) {
+    bindEvents(newApiClient);
 });
+
+export default serverNotifications;
--- a/src/scripts/settings/webSettings.js
+++ b/src/scripts/settings/webSettings.js
@ -1,21 +1,40 @@
 let data;

-function getConfig() {
+async function getConfig() {
    if (data) return Promise.resolve(data);
-    return fetch('config.json?nocache=' + new Date().getUTCMilliseconds()).then(response => {
-        data = response.json();
+    try {
+        const response = await fetch('config.json', {
+            cache: 'no-cache'
+        });
+
+        if (!response.ok) {
+            throw new Error('network response was not ok');
+        }
+
+        data = await response.json();
+
        return data;
-    }).catch(error => {
-        console.warn('web config file is missing so the template will be used');
+    } catch (error) {
+        console.warn('failed to fetch the web config file:', error);
        return getDefaultConfig();
-    });
+    }
 }

-function getDefaultConfig() {
-    return fetch('config.template.json').then(function (response) {
-        data = response.json();
+async function getDefaultConfig() {
+    try {
+        const response = await fetch('config.template.json', {
+            cache: 'no-cache'
+        });
+
+        if (!response.ok) {
+            throw new Error('network response was not ok');
+        }
+
+        data = await response.json();
        return data;
-    });
+    } catch (error) {
+        console.error('failed to fetch the default web config file:', error);
+    }
 }

 export function getMultiServer() {
--- a/src/scripts/shell.js
+++ b/src/scripts/shell.js
@ -1,23 +1,20 @@
-define([], function () {
-    'use strict';
-
-    return {
-        openUrl: function (url, target) {
-            if (window.NativeShell) {
-                window.NativeShell.openUrl(url, target);
-            } else {
-                window.open(url, target || '_blank');
-            }
-        },
-        enableFullscreen: function () {
-            if (window.NativeShell) {
-                window.NativeShell.enableFullscreen();
-            }
-        },
-        disableFullscreen: function () {
-            if (window.NativeShell) {
-                window.NativeShell.disableFullscreen();
-            }
+// TODO: This seems like a good candidate for deprecation
+export default {
+    openUrl: function (url, target) {
+        if (window.NativeShell) {
+            window.NativeShell.openUrl(url, target);
+        } else {
+            window.open(url, target || '_blank');
        }
-    };
-});
+    },
+    enableFullscreen: function () {
+        if (window.NativeShell) {
+            window.NativeShell.enableFullscreen();
+        }
+    },
+    disableFullscreen: function () {
+        if (window.NativeShell) {
+            window.NativeShell.disableFullscreen();
+        }
+    }
+};
--- a/src/scripts/site.js
+++ b/src/scripts/site.js
@ -1,4 +1,4 @@
-function getWindowLocationSearch(win) {
+window.getWindowLocationSearch = function(win) {
    'use strict';

    var search = (win || window).location.search;
@ -12,9 +12,9 @@ function getWindowLocationSearch(win) {
    }

    return search || '';
-}
+};

-window.getParameterByName = function (name, url) {
+window.getParameterByName = function(name, url) {
    'use strict';

    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
@ -29,7 +29,7 @@ window.getParameterByName = function (name, url) {
    return decodeURIComponent(results[1].replace(/\+/g, ' '));
 };

-function pageClassOn(eventName, className, fn) {
+window.pageClassOn = function(eventName, className, fn) {
    'use strict';

    document.addEventListener(eventName, function (event) {
@ -39,7 +39,7 @@ function pageClassOn(eventName, className, fn) {
            fn.call(target, event);
        }
    });
-}
+};

 window.pageIdOn = function(eventName, id, fn) {
    'use strict';
@ -53,187 +53,6 @@ window.pageIdOn = function(eventName, id, fn) {
    });
 };

-var Dashboard = {
-    getCurrentUser: function () {
-        return window.ApiClient.getCurrentUser(false);
-    },
-
-    //TODO: investigate url prefix support for serverAddress function
-    serverAddress: function () {
-        if (AppInfo.isNativeApp) {
-            var apiClient = window.ApiClient;
-
-            if (apiClient) {
-                return apiClient.serverAddress();
-            }
-
-            return null;
-        }
-
-        var urlLower = window.location.href.toLowerCase();
-        var index = urlLower.lastIndexOf('/web');
-
-        if (index != -1) {
-            return urlLower.substring(0, index);
-        }
-
-        var loc = window.location;
-        var address = loc.protocol + '//' + loc.hostname;
-
-        if (loc.port) {
-            address += ':' + loc.port;
-        }
-
-        return address;
-    },
-    getCurrentUserId: function () {
-        var apiClient = window.ApiClient;
-
-        if (apiClient) {
-            return apiClient.getCurrentUserId();
-        }
-
-        return null;
-    },
-    onServerChanged: function (userId, accessToken, apiClient) {
-        apiClient = apiClient || window.ApiClient;
-        window.ApiClient = apiClient;
-    },
-    logout: function () {
-        ConnectionManager.logout().then(function () {
-            var loginPage;
-
-            if (AppInfo.isNativeApp) {
-                loginPage = 'selectserver.html';
-                window.ApiClient = null;
-            } else {
-                loginPage = 'login.html';
-            }
-
-            Dashboard.navigate(loginPage);
-        });
-    },
-    getConfigurationPageUrl: function (name) {
-        return 'configurationpage?name=' + encodeURIComponent(name);
-    },
-    getConfigurationResourceUrl: function (name) {
-        if (AppInfo.isNativeApp) {
-            return ApiClient.getUrl('web/ConfigurationPage', {
-                name: name
-            });
-        }
-
-        return Dashboard.getConfigurationPageUrl(name);
-    },
-    navigate: function (url, preserveQueryString) {
-        if (!url) {
-            throw new Error('url cannot be null or empty');
-        }
-
-        var queryString = getWindowLocationSearch();
-
-        if (preserveQueryString && queryString) {
-            url += queryString;
-        }
-
-        return new Promise(function (resolve, reject) {
-            require(['appRouter'], function (appRouter) {
-                return appRouter.show(url).then(resolve, reject);
-            });
-        });
-    },
-    navigate_direct: function (path) {
-        return new Promise(function (resolve, reject) {
-            require(['appRouter'], function (appRouter) {
-                return appRouter.showDirect(path).then(resolve, reject);
-            });
-        });
-    },
-    processPluginConfigurationUpdateResult: function () {
-        require(['loading', 'toast'], function (loading, toast) {
-            loading.hide();
-            toast.default(Globalize.translate('MessageSettingsSaved'));
-        });
-    },
-    processServerConfigurationUpdateResult: function (result) {
-        require(['loading', 'toast'], function (loading, toast) {
-            loading.hide();
-            toast.default(Globalize.translate('MessageSettingsSaved'));
-        });
-    },
-    processErrorResponse: function (response) {
-        require(['loading'], function (loading) {
-            loading.hide();
-        });
-
-        var status = '' + response.status;
-
-        if (response.statusText) {
-            status = response.statusText;
-        }
-
-        Dashboard.alert({
-            title: status,
-            message: response.headers ? response.headers.get('X-Application-Error-Code') : null
-        });
-    },
-    alert: function (options) {
-        if (typeof options == 'string') {
-            return void require(['toast'], function (toast) {
-                toast.default({
-                    text: options
-                });
-            });
-        }
-
-        require(['alert'], function (alert) {
-            alert.default({
-                title: options.title || Globalize.translate('HeaderAlert'),
-                text: options.message
-            }).then(options.callback || function () {});
-        });
-    },
-    capabilities: function (appHost) {
-        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: self.appMode === 'cordova' || self.appMode === 'android',
-            SupportsMediaControl: true
-        };
-        appHost.getPushTokenInfo();
-        return capabilities = Object.assign(capabilities, appHost.getPushTokenInfo());
-    },
-    selectServer: function () {
-        if (window.NativeShell && typeof window.NativeShell.selectServer === 'function') {
-            window.NativeShell.selectServer();
-        } else {
-            Dashboard.navigate('selectserver.html');
-        }
-    },
-    hideLoadingMsg: function() {
-        'use strict';
-        require(['loading'], function(loading) {
-            loading.hide();
-        });
-    },
-    showLoadingMsg: function() {
-        'use strict';
-        require(['loading'], function(loading) {
-            loading.show();
-        });
-    },
-    confirm: function(message, title, callback) {
-        'use strict';
-        require(['confirm'], function(confirm) {
-            confirm(message, title).then(function() {
-                callback(!0);
-            }).catch(function() {
-                callback(!1);
-            });
-        });
-    }
-};
-
 var AppInfo = {};

 function initClient() {
@ -271,17 +90,16 @@ function initClient() {
    }

    function createConnectionManager() {
-        return require(['connectionManagerFactory', 'apphost', 'credentialprovider', 'events', 'userSettings'], function (ConnectionManager, apphost, credentialProvider, events, userSettings) {
+        return require(['connectionManagerFactory', 'apphost', 'credentialprovider', 'events', 'userSettings'], function (ConnectionManager, appHost, credentialProvider, events, userSettings) {
+            appHost = appHost.default || appHost;
+
            var credentialProviderInstance = new credentialProvider();
-            var promises = [apphost.getSyncProfile(), apphost.init()];
+            var promises = [appHost.init()];

            return Promise.all(promises).then(function (responses) {
-                var deviceProfile = responses[0];
-                var capabilities = Dashboard.capabilities(apphost);
+                var capabilities = Dashboard.capabilities(appHost);

-                capabilities.DeviceProfile = deviceProfile;
-
-                var connectionManager = new ConnectionManager(credentialProviderInstance, apphost.appName(), apphost.appVersion(), apphost.deviceName(), apphost.deviceId(), capabilities);
+                var connectionManager = new ConnectionManager(credentialProviderInstance, appHost.appName(), appHost.appVersion(), appHost.deviceName(), appHost.deviceId(), capabilities);

                defineConnectionManager(connectionManager);
                bindConnectionManagerEvents(connectionManager, events, userSettings);
@ -289,10 +107,10 @@ function initClient() {
                if (!AppInfo.isNativeApp) {
                    console.debug('loading ApiClient singleton');

-                    return require(['apiclient'], function (apiClientFactory) {
+                    return require(['apiclient', 'clientUtils'], function (apiClientFactory, clientUtils) {
                        console.debug('creating ApiClient singleton');

-                        var apiClient = new apiClientFactory(Dashboard.serverAddress(), apphost.appName(), apphost.appVersion(), apphost.deviceName(), apphost.deviceId());
+                        var apiClient = new apiClientFactory(Dashboard.serverAddress(), appHost.appName(), appHost.appVersion(), appHost.deviceName(), appHost.deviceId());

                        apiClient.enableAutomaticNetworking = false;
                        apiClient.manualAddressOnly = true;
@ -341,7 +159,7 @@ function initClient() {
    function getPlaybackManager(playbackManager) {
        window.addEventListener('beforeunload', function () {
            try {
-                playbackManager.onAppClose();
+                playbackManager.default.onAppClose();
            } catch (err) {
                console.error('error in onAppClose: ' + err);
            }
@ -350,6 +168,8 @@ function initClient() {
    }

    function getLayoutManager(layoutManager, appHost) {
+        layoutManager = layoutManager.default || layoutManager;
+        appHost = appHost.default || appHost;
        if (appHost.getDefaultLayout) {
            layoutManager.defaultLayout = appHost.getDefaultLayout();
        }
@ -376,36 +196,12 @@ function initClient() {
        }
    }

-    function initRequireWithBrowser() {
-        var componentsPath = getComponentsPath();
-        var scriptsPath = getScriptsPath();
-
-        define('filesystem', [scriptsPath + '/filesystem'], returnFirstDependency);
-
-        define('lazyLoader', [componentsPath + '/lazyLoader/lazyLoaderIntersectionObserver'], returnFirstDependency);
-        define('shell', [scriptsPath + '/shell'], returnFirstDependency);
-
-        define('alert', [componentsPath + '/alert'], returnFirstDependency);
-
-        defineResizeObserver();
-
-        define('dialog', [componentsPath + '/dialog/dialog'], returnFirstDependency);
-
-        define('confirm', [componentsPath + '/confirm/confirm'], returnFirstDependency);
-
-        define('prompt', [componentsPath + '/prompt/prompt'], returnFirstDependency);
-
-        define('loading', [componentsPath + '/loading/loading'], returnFirstDependency);
-        define('multi-download', [scriptsPath + '/multiDownload'], returnFirstDependency);
-        define('fileDownloader', [scriptsPath + '/fileDownloader'], returnFirstDependency);
-
-        define('castSenderApiLoader', [componentsPath + '/castSenderApi'], returnFirstDependency);
-    }
-
    function init() {
        define('livetvcss', ['css!assets/css/livetv.css'], returnFirstDependency);
        define('detailtablecss', ['css!assets/css/detailtable.css'], returnFirstDependency);

+        require(['clientUtils']);
+
        var promises = [];
        if (!window.fetch) {
            promises.push(require(['fetch']));
@ -468,6 +264,8 @@ function initClient() {
        }

        require(['apphost', 'css!assets/css/librarybrowser'], function (appHost) {
+            appHost = appHost.default || appHost;
+
            loadPlugins(appHost, browser).then(function () {
                onAppReady(browser);
            });
@ -475,7 +273,7 @@ function initClient() {
    }

    function loadPlugins(appHost, browser, shell) {
-        console.debug('loading installed plugins');
+        console.groupCollapsed('loading installed plugins');
        return new Promise(function (resolve, reject) {
            require(['webSettings'], function (webSettings) {
                webSettings.getPlugins().then(function (list) {
@ -493,11 +291,18 @@ function initClient() {
                        list = list.concat(window.NativeShell.getPlugins());
                    }

-                    Promise.all(list.map(loadPlugin)).then(function () {
-                        require(['packageManager'], function (packageManager) {
-                            packageManager.init().then(resolve, reject);
-                        });
-                    }, reject);
+                    Promise.all(list.map(loadPlugin))
+                        .then(function () {
+                            console.debug('finished loading plugins');
+                        })
+                        .catch(() => reject)
+                        .finally(() => {
+                            console.groupEnd('loading installed plugins');
+                            require(['packageManager'], function (packageManager) {
+                                packageManager.default.init().then(resolve, reject);
+                            });
+                        })
+                    ;
                });
            });
        });
@ -506,7 +311,7 @@ function initClient() {
    function loadPlugin(url) {
        return new Promise(function (resolve, reject) {
            require(['pluginManager'], function (pluginManager) {
-                pluginManager.loadPlugin(url).then(resolve, reject);
+                pluginManager.default.loadPlugin(url).then(resolve, reject);
            });
        });
    }
@ -516,6 +321,9 @@ function initClient() {

        // ensure that appHost is loaded in this point
        require(['apphost', 'appRouter'], function (appHost, appRouter) {
+            appRouter = appRouter.default || appRouter;
+            appHost = appHost.default || appHost;
+
            window.Emby = {};

            console.debug('onAppReady: loading dependencies');
@ -604,7 +412,29 @@ function initClient() {
    }

    function onWebComponentsReady() {
-        initRequireWithBrowser();
+        var componentsPath = getComponentsPath();
+        var scriptsPath = getScriptsPath();
+
+        define('filesystem', [scriptsPath + '/filesystem'], returnFirstDependency);
+
+        define('lazyLoader', [componentsPath + '/lazyLoader/lazyLoaderIntersectionObserver'], returnFirstDependency);
+        define('shell', [scriptsPath + '/shell'], returnFirstDependency);
+
+        define('alert', [componentsPath + '/alert'], returnFirstDependency);
+
+        defineResizeObserver();
+
+        define('dialog', [componentsPath + '/dialog/dialog'], returnFirstDependency);
+
+        define('confirm', [componentsPath + '/confirm/confirm'], returnFirstDependency);
+
+        define('prompt', [componentsPath + '/prompt/prompt'], returnFirstDependency);
+
+        define('loading', [componentsPath + '/loading/loading'], returnFirstDependency);
+        define('multi-download', [scriptsPath + '/multiDownload'], returnFirstDependency);
+        define('fileDownloader', [scriptsPath + '/fileDownloader'], returnFirstDependency);
+
+        define('castSenderApiLoader', [componentsPath + '/castSenderApi'], returnFirstDependency);

        if (self.appMode === 'cordova' || self.appMode === 'android' || self.appMode === 'standalone') {
            AppInfo.isNativeApp = true;
@ -613,10 +443,10 @@ function initClient() {
        init();
    }

+    var promise;
    var localApiClient;
-    let promise;

-    (function () {
+    function initRequireJs() {
        var urlArgs = 'v=' + (window.dashboardVersion || new Date().getDate());

        var bowerPath = getBowerPath();
@ -647,7 +477,9 @@ function initClient() {
            nowPlayingHelper: componentsPath + '/playback/nowplayinghelper',
            pluginManager: componentsPath + '/pluginManager',
            packageManager: componentsPath + '/packageManager',
-            screensaverManager: componentsPath + '/screensavermanager'
+            screensaverManager: componentsPath + '/screensavermanager',
+            clientUtils: scriptsPath + '/clientUtils',
+            appRouter: 'components/appRouter'
        };

        requirejs.onError = onRequireJsError;
@ -813,8 +645,8 @@ function initClient() {
        define('tvguide', [componentsPath + '/guide/guide'], returnFirstDependency);
        define('guide-settings-dialog', [componentsPath + '/guide/guide-settings'], returnFirstDependency);
        define('viewManager', [componentsPath + '/viewManager/viewManager'], function (viewManager) {
-            window.ViewManager = viewManager;
-            viewManager.dispatchPageEvents(true);
+            window.ViewManager = viewManager.default;
+            viewManager.default.dispatchPageEvents(true);
            return viewManager;
        });
        define('slideshow', [componentsPath + '/slideshow/slideshow'], returnFirstDependency);
@ -846,267 +678,9 @@ function initClient() {
                return window.ApiClient;
            };
        });
-        define('appRouter', [componentsPath + '/appRouter', 'itemHelper'], function (appRouter, itemHelper) {
-            function showItem(item, serverId, options) {
-                if (typeof item == 'string') {
-                    require(['connectionManager'], function (connectionManager) {
-                        var apiClient = connectionManager.currentApiClient();
-                        apiClient.getItem(apiClient.getCurrentUserId(), item).then(function (item) {
-                            appRouter.showItem(item, options);
-                        });
-                    });
-                } else {
-                    if (arguments.length == 2) {
-                        options = arguments[1];
-                    }
-
-                    appRouter.show('/' + appRouter.getRouteUrl(item, options), {
-                        item: item
-                    });
-                }
-            }
-
-            appRouter.showLocalLogin = function (serverId, manualLogin) {
-                Dashboard.navigate('login.html?serverid=' + serverId);
-            };
-
-            appRouter.showVideoOsd = function () {
-                return Dashboard.navigate('video');
-            };
-
-            appRouter.showSelectServer = function () {
-                Dashboard.navigate(AppInfo.isNativeApp ? 'selectserver.html' : 'login.html');
-            };
-
-            appRouter.showWelcome = function () {
-                Dashboard.navigate(AppInfo.isNativeApp ? 'selectserver.html' : 'login.html');
-            };
-
-            appRouter.showSettings = function () {
-                Dashboard.navigate('mypreferencesmenu.html');
-            };
-
-            appRouter.showGuide = function () {
-                Dashboard.navigate('livetv.html?tab=1');
-            };
-
-            appRouter.goHome = function () {
-                Dashboard.navigate('home.html');
-            };
-
-            appRouter.showSearch = function () {
-                Dashboard.navigate('search.html');
-            };
-
-            appRouter.showLiveTV = function () {
-                Dashboard.navigate('livetv.html');
-            };
-
-            appRouter.showRecordedTV = function () {
-                Dashboard.navigate('livetv.html?tab=3');
-            };
-
-            appRouter.showFavorites = function () {
-                Dashboard.navigate('home.html?tab=1');
-            };
-
-            appRouter.showSettings = function () {
-                Dashboard.navigate('mypreferencesmenu.html');
-            };
-
-            appRouter.setTitle = function (title) {
-                LibraryMenu.setTitle(title);
-            };
-
-            appRouter.getRouteUrl = function (item, options) {
-                if (!item) {
-                    throw new Error('item cannot be null');
-                }
-
-                if (item.url) {
-                    return item.url;
-                }
-
-                var context = options ? options.context : null;
-                var id = item.Id || item.ItemId;
-
-                if (!options) {
-                    options = {};
-                }
-
-                var url;
-                var itemType = item.Type || (options ? options.itemType : null);
-                var serverId = item.ServerId || options.serverId;
-
-                if (item === 'settings') {
-                    return 'mypreferencesmenu.html';
-                }
-
-                if (item === 'wizard') {
-                    return 'wizardstart.html';
-                }
-
-                if (item === 'manageserver') {
-                    return 'dashboard.html';
-                }
-
-                if (item === 'recordedtv') {
-                    return 'livetv.html?tab=3&serverId=' + options.serverId;
-                }
-
-                if (item === 'nextup') {
-                    return 'list.html?type=nextup&serverId=' + options.serverId;
-                }
-
-                if (item === 'list') {
-                    var url = 'list.html?serverId=' + options.serverId + '&type=' + options.itemTypes;
-
-                    if (options.isFavorite) {
-                        url += '&IsFavorite=true';
-                    }
-
-                    return url;
-                }
-
-                if (item === 'livetv') {
-                    if (options.section === 'programs') {
-                        return 'livetv.html?tab=0&serverId=' + options.serverId;
-                    }
-                    if (options.section === 'guide') {
-                        return 'livetv.html?tab=1&serverId=' + options.serverId;
-                    }
-
-                    if (options.section === 'movies') {
-                        return 'list.html?type=Programs&IsMovie=true&serverId=' + options.serverId;
-                    }
-
-                    if (options.section === 'shows') {
-                        return 'list.html?type=Programs&IsSeries=true&IsMovie=false&IsNews=false&serverId=' + options.serverId;
-                    }
-
-                    if (options.section === 'sports') {
-                        return 'list.html?type=Programs&IsSports=true&serverId=' + options.serverId;
-                    }
-
-                    if (options.section === 'kids') {
-                        return 'list.html?type=Programs&IsKids=true&serverId=' + options.serverId;
-                    }
-
-                    if (options.section === 'news') {
-                        return 'list.html?type=Programs&IsNews=true&serverId=' + options.serverId;
-                    }
-
-                    if (options.section === 'onnow') {
-                        return 'list.html?type=Programs&IsAiring=true&serverId=' + options.serverId;
-                    }
-
-                    if (options.section === 'dvrschedule') {
-                        return 'livetv.html?tab=4&serverId=' + options.serverId;
-                    }
-
-                    if (options.section === 'seriesrecording') {
-                        return 'livetv.html?tab=5&serverId=' + options.serverId;
-                    }
-
-                    return 'livetv.html?serverId=' + options.serverId;
-                }
-
-                if (itemType == 'SeriesTimer') {
-                    return 'details?seriesTimerId=' + id + '&serverId=' + serverId;
-                }
-
-                if (item.CollectionType == 'livetv') {
-                    return 'livetv.html';
-                }
-
-                if (item.Type === 'Genre') {
-                    url = 'list.html?genreId=' + item.Id + '&serverId=' + serverId;
-
-                    if (context === 'livetv') {
-                        url += '&type=Programs';
-                    }
-
-                    if (options.parentId) {
-                        url += '&parentId=' + options.parentId;
-                    }
-
-                    return url;
-                }
-
-                if (item.Type === 'MusicGenre') {
-                    url = 'list.html?musicGenreId=' + item.Id + '&serverId=' + serverId;
-
-                    if (options.parentId) {
-                        url += '&parentId=' + options.parentId;
-                    }
-
-                    return url;
-                }
-
-                if (item.Type === 'Studio') {
-                    url = 'list.html?studioId=' + item.Id + '&serverId=' + serverId;
-
-                    if (options.parentId) {
-                        url += '&parentId=' + options.parentId;
-                    }
-
-                    return url;
-                }
-
-                if (context !== 'folders' && !itemHelper.isLocalItem(item)) {
-                    if (item.CollectionType == 'movies') {
-                        url = 'movies.html?topParentId=' + item.Id;
-
-                        if (options && options.section === 'latest') {
-                            url += '&tab=1';
-                        }
-
-                        return url;
-                    }
-
-                    if (item.CollectionType == 'tvshows') {
-                        url = 'tv.html?topParentId=' + item.Id;
-
-                        if (options && options.section === 'latest') {
-                            url += '&tab=2';
-                        }
-
-                        return url;
-                    }
-
-                    if (item.CollectionType == 'music') {
-                        return 'music.html?topParentId=' + item.Id;
-                    }
-                }
-
-                var itemTypes = ['Playlist', 'TvChannel', 'Program', 'BoxSet', 'MusicAlbum', 'MusicGenre', 'Person', 'Recording', 'MusicArtist'];
-
-                if (itemTypes.indexOf(itemType) >= 0) {
-                    return 'details?id=' + id + '&serverId=' + serverId;
-                }
-
-                var contextSuffix = context ? '&context=' + context : '';
-
-                if (itemType == 'Series' || itemType == 'Season' || itemType == 'Episode') {
-                    return 'details?id=' + id + contextSuffix + '&serverId=' + serverId;
-                }
-
-                if (item.IsFolder) {
-                    if (id) {
-                        return 'list.html?parentId=' + id + '&serverId=' + serverId;
-                    }
-
-                    return '#';
-                }
-
-                return 'details?id=' + id + '&serverId=' + serverId;
-            };
-
-            appRouter.showItem = showItem;
-            return appRouter;
-        });
-    })();
+    }

+    initRequireJs();
    promise.then(onWebComponentsReady);
 }