Merge remote-tracking branch 'upstream/master' into site-js-prepare-es6

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}`;
         }

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());
 });

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]);

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);
             };
 

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
                     },

src/scripts/gamepadtokey.js

@@ -22,6 +22,8 @@
 require(['apphost'], function (appHost) {
     'use strict';
 
+    appHost = appHost.default || appHost;
+
     var _GAMEPAD_A_BUTTON_INDEX = 0;
     var _GAMEPAD_B_BUTTON_INDEX = 1;
     var _GAMEPAD_DPAD_UP_BUTTON_INDEX = 12;

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);
             }
         }

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;

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('TabEpisodes'),
+            type: 'Episode'
+        });
+    }
+
+    if (item.TrailerCount) {
+        sections.push({
+            name: globalize.translate('TabTrailers'),
+            type: 'Trailer'
+        });
+    }
+
+    if (item.AlbumCount) {
+        sections.push({
+            name: globalize.translate('Albums'),
+            type: 'MusicAlbum'
+        });
+    }
+
+    if (item.MusicVideoCount) {
+        sections.push({
+            name: globalize.translate('TabMusicVideos'),
+            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
+};

src/scripts/libraryBrowser.js

@@ -105,7 +105,7 @@ 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) {
@@ -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;
 

src/scripts/libraryMenu.js

@@ -1,12 +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 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';
 
-    viewManager = viewManager.default || viewManager;
-    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>';
@@ -19,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>';
@@ -50,7 +64,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
     }
 
     function lazyLoadViewMenuBarImages() {
-        require(['imageLoader'], function (imageLoader) {
+        import('imageLoader').then(({default: imageLoader}) => {
             imageLoader.lazyChildren(skinHeader);
         });
     }
@@ -60,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;
             }
@@ -91,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');
             }
@@ -143,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);
@@ -185,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');
@@ -208,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');
@@ -254,7 +268,7 @@ 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>';
 
@@ -290,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);
         }
@@ -317,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('|');
@@ -339,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);
@@ -350,7 +364,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
     }
 
     function createToolsMenuList(pluginItems) {
-        var links = [{
+        const links = [{
             name: globalize.translate('TabServer')
         }, {
             name: globalize.translate('TabDashboard'),
@@ -363,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'
@@ -373,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']
@@ -381,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'
@@ -403,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'
@@ -462,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({
@@ -483,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 + '>';
 
@@ -502,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) {
@@ -524,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>';
@@ -535,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';
@@ -566,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) {
@@ -596,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>
@@ -614,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);
@@ -644,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');
 
@@ -662,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');
@@ -694,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;
@@ -705,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');
@@ -742,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);
@@ -766,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();
         });
     }
@@ -787,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 {
@@ -806,9 +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) {
-                navdrawer = navdrawer.default || navdrawer;
-
+            import('navdrawer').then(({default: navdrawer}) => {
                 navDrawerInstance = new navdrawer(getNavDrawerOptions());
 
                 if (!layoutManager.tv) {
@@ -820,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) {
@@ -948,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 = {
@@ -962,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 */

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
+};

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({

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() {

src/scripts/site.js

@@ -90,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);
@@ -111,7 +110,7 @@ function initClient() {
                     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;
@@ -160,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);
             }
@@ -169,6 +168,8 @@ function initClient() {
     }
 
     function getLayoutManager(layoutManager, appHost) {
+        layoutManager = layoutManager.default || layoutManager;
+        appHost = appHost.default || appHost;
         if (appHost.getDefaultLayout) {
             layoutManager.defaultLayout = appHost.getDefaultLayout();
         }
@@ -264,6 +265,8 @@ function initClient() {
         }
 
         require(['apphost', 'css!assets/css/librarybrowser'], function (appHost) {
+            appHost = appHost.default || appHost;
+
             loadPlugins(appHost, browser).then(function () {
                 onAppReady(browser);
             });
@@ -312,6 +315,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');
@@ -431,8 +437,8 @@ function initClient() {
         init();
     }
 
+    var promise;
     var localApiClient;
-    let promise;
 
     function initRequireJs() {
         var urlArgs = 'v=' + (window.dashboardVersion || new Date().getDate());
@@ -466,7 +472,8 @@ function initClient() {
             pluginManager: componentsPath + '/pluginManager',
             packageManager: componentsPath + '/packageManager',
             screensaverManager: componentsPath + '/screensavermanager',
-            clientUtils: scriptsPath + '/clientUtils'
+            clientUtils: scriptsPath + '/clientUtils',
+            appRouter: 'components/appRouter'
         };
 
         requirejs.onError = onRequireJsError;
@@ -665,269 +672,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);
 }