Migrate appRouter to ES6

.eslintrc.js

@@ -44,6 +44,7 @@ module.exports = {
         'no-unused-vars': ['error', { 'vars': 'all', 'args': 'none', 'ignoreRestSiblings': true }],
         'one-var': ['error', 'never'],
         'padded-blocks': ['error', 'never'],
+        //'prefer-const': ['error', {'destructuring': 'all'}],
         'quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': false }],
         'semi': ['error'],
         'space-before-blocks': ['error'],

package.json

@@ -95,6 +95,7 @@
           "src/components/alert.js",
           "src/components/alphaPicker/alphaPicker.js",
           "src/components/appFooter/appFooter.js",
+          "src/components/appRouter.js",
           "src/components/autoFocuser.js",
           "src/components/backdrop/backdrop.js",
           "src/components/cardbuilder/cardBuilder.js",

src/components/actionSheet/actionSheet.js

@@ -9,14 +9,14 @@ import 'scrollStyles';
 import 'listViewStyle';
 
 function getOffsets(elems) {
-    let results = [];
+    const results = [];
 
     if (!document) {
         return results;
     }
 
     for (const elem of elems) {
-        let box = elem.getBoundingClientRect();
+        const box = elem.getBoundingClientRect();
 
         results.push({
             top: box.top,
@@ -34,7 +34,7 @@ function getPosition(options, dlg) {
     const windowHeight = windowSize.innerHeight;
     const windowWidth = windowSize.innerWidth;
 
-    let pos = getOffsets([options.positionTo])[0];
+    const pos = getOffsets([options.positionTo])[0];
 
     if (options.positionY !== 'top') {
         pos.top += (pos.height || 0) / 2;
@@ -82,7 +82,7 @@ export function show(options) {
     // positionTo
     // showCancel
     // title
-    let dialogOptions = {
+    const dialogOptions = {
         removeOnClose: true,
         enableHistory: options.enableHistory,
         scrollY: false
@@ -103,7 +103,7 @@ export function show(options) {
         dialogOptions.autoFocus = false;
     }
 
-    let dlg = dialogHelper.createDialog(dialogOptions);
+    const dlg = dialogHelper.createDialog(dialogOptions);
 
     if (isFullscreen) {
         dlg.classList.add('actionsheet-fullscreen');
@@ -129,7 +129,7 @@ export function show(options) {
     }
 
     let renderIcon = false;
-    let icons = [];
+    const icons = [];
     let itemIcon;
     for (const item of options.items) {
         itemIcon = item.icon || (item.selected ? 'check' : null);
@@ -241,7 +241,7 @@ export function show(options) {
         centerFocus(dlg.querySelector('.actionSheetScroller'), false, true);
     }
 
-    let btnCloseActionSheet = dlg.querySelector('.btnCloseActionSheet');
+    const btnCloseActionSheet = dlg.querySelector('.btnCloseActionSheet');
     if (btnCloseActionSheet) {
         btnCloseActionSheet.addEventListener('click', function () {
             dialogHelper.close(dlg);

src/components/cardbuilder/cardBuilder.js

@@ -362,12 +362,12 @@ import 'programStyles';
             let hasOpenRow;
             let hasOpenSection;
 
-            let sectionTitleTagName = options.sectionTitleTagName || 'div';
+            const sectionTitleTagName = options.sectionTitleTagName || 'div';
             let apiClient;
             let lastServerId;
 
             for (const [i, item] of items.entries()) {
-                let serverId = item.ServerId || options.serverId;
+                const serverId = item.ServerId || options.serverId;
 
                 if (serverId !== lastServerId) {
                     lastServerId = serverId;
@@ -621,7 +621,7 @@ import 'programStyles';
                 });
             }
 
-            let blurHashes = options.imageBlurhashes || item.ImageBlurHashes || {};
+            const blurHashes = options.imageBlurhashes || item.ImageBlurHashes || {};
 
             return {
                 imgUrl: imgUrl,
@@ -656,7 +656,7 @@ import 'programStyles';
                 for (let i = 0; i < character.length; i++) {
                     sum += parseInt(character.charAt(i));
                 }
-                let index = String(sum).substr(-1);
+                const index = String(sum).substr(-1);
 
                 return (index % numRandomColors) + 1;
             } else {
@@ -682,7 +682,7 @@ import 'programStyles';
 
             for (let i = 0; i < lines.length; i++) {
                 let currentCssClass = cssClass;
-                let text = lines[i];
+                const text = lines[i];
 
                 if (valid > 0 && isOuterFooter) {
                     currentCssClass += ' cardText-secondary';
@@ -707,7 +707,7 @@ import 'programStyles';
             }
 
             if (forceLines) {
-                let linesLength = maxLines || Math.min(lines.length, maxLines || lines.length);
+                const linesLength = maxLines || Math.min(lines.length, maxLines || lines.length);
 
                 while (valid < linesLength) {
                     html += "<div class='" + cssClass + "'>&nbsp;</div>";
@@ -1036,7 +1036,7 @@ import 'programStyles';
          * @returns {string} HTML markup for the item count indicator.
          */
         function getItemCountsHtml(options, item) {
-            let counts = [];
+            const counts = [];
             let childText;
 
             if (item.Type === 'Playlist') {
@@ -1318,7 +1318,7 @@ import 'programStyles';
             let cardBoxClose = '';
             let cardScalableClose = '';
 
-            let cardContentClass = 'cardContent';
+            const cardContentClass = 'cardContent';
 
             let blurhashAttrib = '';
             if (blurhash && blurhash.length > 0) {
@@ -1337,7 +1337,7 @@ import 'programStyles';
                 cardImageContainerClose = '</button>';
             }
 
-            let cardScalableClass = 'cardScalable';
+            const cardScalableClass = 'cardScalable';
 
             cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
             cardBoxClose = '</div>';
@@ -1681,7 +1681,7 @@ import 'programStyles';
             const cells = itemsContainer.querySelectorAll('.card[data-id="' + programId + '"]');
 
             for (let i = 0, length = cells.length; i < length; i++) {
-                let cell = cells[i];
+                const cell = cells[i];
                 const icon = cell.querySelector('.timerIndicator');
                 if (!icon) {
                     const indicatorsElem = ensureIndicators(cell);
@@ -1700,8 +1700,8 @@ import 'programStyles';
             const cells = itemsContainer.querySelectorAll('.card[data-timerid="' + timerId + '"]');
 
             for (let i = 0; i < cells.length; i++) {
-                let cell = cells[i];
+                const cell = cells[i];
-                let icon = cell.querySelector('.timerIndicator');
+                const icon = cell.querySelector('.timerIndicator');
                 if (icon) {
                     icon.parentNode.removeChild(icon);
                 }
@@ -1718,8 +1718,8 @@ import 'programStyles';
             const cells = itemsContainer.querySelectorAll('.card[data-seriestimerid="' + cancelledTimerId + '"]');
 
             for (let i = 0; i < cells.length; i++) {
-                let cell = cells[i];
+                const cell = cells[i];
-                let icon = cell.querySelector('.timerIndicator');
+                const icon = cell.querySelector('.timerIndicator');
                 if (icon) {
                     icon.parentNode.removeChild(icon);
                 }

src/components/dialogHelper/dialogHelper.js

@@ -375,7 +375,7 @@ import 'scrollStyles';
             dlg.setAttribute('data-lockscroll', 'true');
         }
 
-        if (options.enableHistory !== false && appRouter.enableNativeHistory()) {
+        if (options.enableHistory !== false) {
             dlg.setAttribute('data-history', 'true');
         }
 
@@ -391,11 +391,8 @@ import 'scrollStyles';
             dlg.setAttribute('data-autofocus', 'true');
         }
 
-        let defaultEntryAnimation;
+        const defaultEntryAnimation = 'scaleup';
-        let defaultExitAnimation;
+        const defaultExitAnimation = 'scaledown';
-
-        defaultEntryAnimation = 'scaleup';
-        defaultExitAnimation = 'scaledown';
         const entryAnimation = options.entryAnimation || defaultEntryAnimation;
         const exitAnimation = options.exitAnimation || defaultExitAnimation;
 

src/components/filtermenu/filtermenu.js

@@ -2,6 +2,8 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
     'use strict';
     focusManager = focusManager.default || focusManager;
 
+    appRouter = appRouter.default || appRouter;
+
     function onSubmit(e) {
         e.preventDefault();
         return false;

src/components/images/imageLoader.js

@@ -17,8 +17,8 @@ import 'css!./style';
             // Although the default values recommended by Blurhash developers is 32x32, a size of 18x18 seems to be the sweet spot for us,
             // improving the performance and reducing the memory usage, while retaining almost full blur quality.
             // Lower values had more visible pixelation
-            let width = 18;
+            const width = 18;
-            let height = 18;
+            const height = 18;
             let pixels;
             try {
                 pixels = blurhash.decode(blurhashstr, width, height);
@@ -27,11 +27,11 @@ import 'css!./style';
                 target.classList.add('non-blurhashable');
                 return;
             }
-            let canvas = document.createElement('canvas');
+            const canvas = document.createElement('canvas');
             canvas.width = width;
             canvas.height = height;
-            let ctx = canvas.getContext('2d');
+            const ctx = canvas.getContext('2d');
-            let imgData = ctx.createImageData(width, height);
+            const imgData = ctx.createImageData(width, height);
 
             imgData.data.set(pixels);
             ctx.putImageData(imgData, 0, 0);
@@ -55,7 +55,7 @@ import 'css!./style';
         if (!entry) {
             throw new Error('entry cannot be null');
         }
-        let target = entry.target;
+        const target = entry.target;
         var source = undefined;
 
         if (target) {
@@ -78,7 +78,7 @@ import 'css!./style';
             throw new TypeError('url cannot be undefined');
         }
 
-        let preloaderImg = new Image();
+        const preloaderImg = new Image();
         preloaderImg.src = url;
 
         elem.classList.add('lazy-hidden');

src/components/indicators/indicators.js

@@ -82,7 +82,7 @@ export function enablePlayedIndicator(item) {
 
 export function getPlayedIndicatorHtml(item) {
     if (enablePlayedIndicator(item)) {
-        let userData = item.UserData || {};
+        const userData = item.UserData || {};
         if (userData.UnplayedItemCount) {
             return '<div class="countIndicator indicator">' + userData.UnplayedItemCount + '</div>';
         }

src/components/itemContextMenu.js

@@ -8,7 +8,6 @@ import browser from 'browser';
 import actionsheet from 'actionsheet';
 
 /* eslint-disable indent */
-
     export function getCommands(options) {
         const item = options.item;
         const user = options.user;
@@ -16,7 +15,7 @@ import actionsheet from 'actionsheet';
         const canPlay = playbackManager.canPlay(item);
         const restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator;
 
-        let commands = [];
+        const commands = [];
 
         if (canPlay && item.MediaType !== 'Photo') {
             if (options.play !== false) {
@@ -367,7 +366,7 @@ import actionsheet from 'actionsheet';
                 case 'copy-stream': {
                     const downloadHref = apiClient.getItemDownloadUrl(itemId);
                     const textAreaCopy = function () {
-                        let textArea = document.createElement('textarea');
+                        const textArea = document.createElement('textarea');
                         textArea.value = downloadHref;
                         document.body.appendChild(textArea);
                         textArea.focus();

src/components/mediainfo/mediainfo.js

@@ -9,7 +9,6 @@ import 'programStyles';
 import 'emby-button';
 
 /* eslint-disable indent */
-
     function getTimerIndicator(item) {
         let status;
 

src/components/metadataEditor/metadataEditor.js

@@ -247,7 +247,7 @@ import 'flexStyles';
             reload(context, parentId, item.ServerId);
         } else {
             require(['appRouter'], function (appRouter) {
-                appRouter.goHome();
+                appRouter.default.goHome();
             });
         }
     }

src/components/nowPlayingBar/nowPlayingBar.js

@@ -500,20 +500,20 @@ import 'emby-ratingbutton';
         const textLines = nowPlayingItem ? nowPlayingHelper.getNowPlayingNames(nowPlayingItem) : [];
         nowPlayingTextElement.innerHTML = '';
         if (textLines) {
-            let itemText = document.createElement('div');
+            const itemText = document.createElement('div');
-            let secondaryText = document.createElement('div');
+            const secondaryText = document.createElement('div');
             secondaryText.classList.add('nowPlayingBarSecondaryText');
             if (textLines.length > 1) {
                 textLines[1].secondary = true;
                 if (textLines[1].text) {
-                    let text = document.createElement('a');
+                    const text = document.createElement('a');
                     text.innerHTML = textLines[1].text;
                     secondaryText.appendChild(text);
                 }
             }
 
             if (textLines[0].text) {
-                let text = document.createElement('a');
+                const text = document.createElement('a');
                 text.innerHTML = textLines[0].text;
                 itemText.appendChild(text);
             }
@@ -555,10 +555,10 @@ import 'emby-ratingbutton';
                     if (!layoutManager.mobile) {
                         let contextButton = nowPlayingBarElement.querySelector('.btnToggleContextMenu');
                         // We remove the previous event listener by replacing the item in each update event
-                        let contextButtonClone = contextButton.cloneNode(true);
+                        const contextButtonClone = contextButton.cloneNode(true);
                         contextButton.parentNode.replaceChild(contextButtonClone, contextButton);
                         contextButton = nowPlayingBarElement.querySelector('.btnToggleContextMenu');
-                        let options = {
+                        const options = {
                             play: false,
                             queue: false,
                             clearQueue: true,
@@ -600,10 +600,10 @@ import 'emby-ratingbutton';
             return;
         }
 
-        let shuffleMode = playbackManager.getQueueShuffleMode();
+        const shuffleMode = playbackManager.getQueueShuffleMode();
-        let context = nowPlayingBarElement;
+        const context = nowPlayingBarElement;
         const cssClass = 'buttonActive';
-        let toggleShuffleButton = context.querySelector('.btnShuffleQueue');
+        const toggleShuffleButton = context.querySelector('.btnShuffleQueue');
         switch (shuffleMode) {
             case 'Shuffle':
                 toggleShuffleButton.classList.add(cssClass);

src/components/playback/mediasession.js

@@ -127,7 +127,7 @@ import connectionManager from 'connectionManager';
                 artwork: getImageUrls(item)
             });
         } else {
-            let itemImageUrl = seriesImageUrl(item, { maxHeight: 3000 }) || imageUrl(item, { maxHeight: 3000 });
+            const itemImageUrl = seriesImageUrl(item, { maxHeight: 3000 }) || imageUrl(item, { maxHeight: 3000 });
 
             window.NativeShell.updateMediaSession({
                 action: eventName,
@@ -244,10 +244,10 @@ import connectionManager from 'connectionManager';
 
         /* eslint-disable-next-line compat/compat */
         navigator.mediaSession.setActionHandler('seekto', function (object) {
-            let item = playbackManager.getPlayerState(currentPlayer).NowPlayingItem;
+            const item = playbackManager.getPlayerState(currentPlayer).NowPlayingItem;
             // Convert to ms
-            let duration = parseInt(item.RunTimeTicks ? (item.RunTimeTicks / 10000) : 0);
+            const duration = parseInt(item.RunTimeTicks ? (item.RunTimeTicks / 10000) : 0);
-            let wantedTime = object.seekTime * 1000;
+            const wantedTime = object.seekTime * 1000;
             playbackManager.seekPercent(wantedTime / duration * 100, currentPlayer);
         });
     }

src/components/remotecontrol/remotecontrol.js

@@ -127,8 +127,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 if (item.Artists != null) {
                     if (item.ArtistItems != null) {
                         for (const artist of item.ArtistItems) {
-                            let artistName = artist.Name;
+                            const artistName = artist.Name;
-                            let artistId = artist.Id;
+                            const artistId = artist.Id;
                             artistsSeries += `<a class="button-link emby-button" is="emby-linkbutton" href="details?id=${artistId}&serverId=${nowPlayingServerId}">${artistName}</a>`;
                             if (artist !== item.ArtistItems.slice(-1)[0]) {
                                 artistsSeries += ', ';
@@ -185,7 +185,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             let contextButton = context.querySelector('.btnToggleContextMenu');
             // We remove the previous event listener by replacing the item in each update event
             const autoFocusContextButton = document.activeElement === contextButton;
-            let contextButtonClone = contextButton.cloneNode(true);
+            const contextButtonClone = contextButton.cloneNode(true);
             contextButton.parentNode.replaceChild(contextButtonClone, contextButton);
             contextButton = context.querySelector('.btnToggleContextMenu');
             if (autoFocusContextButton) {
@@ -362,7 +362,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
 
         function updateRepeatModeDisplay(repeatMode) {
             var context = dlg;
-            let toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton');
+            const toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton');
             const cssClass = 'buttonActive';
             let innHtml = '<span class="material-icons repeat"></span>';
             let repeatOn = true;
@@ -529,12 +529,12 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         }
 
         function onShuffleQueueModeChange(updateView = true) {
-            let shuffleMode = playbackManager.getQueueShuffleMode(this);
+            const shuffleMode = playbackManager.getQueueShuffleMode(this);
-            let context = dlg;
+            const context = dlg;
             const cssClass = 'buttonActive';
-            let shuffleButtons = context.querySelectorAll('.btnShuffleQueue');
+            const shuffleButtons = context.querySelectorAll('.btnShuffleQueue');
 
-            for (let shuffleButton of shuffleButtons) {
+            for (const shuffleButton of shuffleButtons) {
                 switch (shuffleMode) {
                     case 'Shuffle':
                         shuffleButton.classList.add(cssClass);
@@ -877,7 +877,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
             volumecontrolHtml += `<button is="paper-icon-button-light" class="buttonMute autoSize" title=${globalize.translate('Mute')}><span class="xlargePaperIconButton material-icons volume_up"></span></button>`;
             volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>';
             volumecontrolHtml += '</div>';
-            let optionsSection = context.querySelector('.playlistSectionButton');
+            const optionsSection = context.querySelector('.playlistSectionButton');
             if (!layoutManager.mobile) {
                 context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', volumecontrolHtml);
                 optionsSection.classList.remove('align-items-center', 'justify-content-center');

src/components/scrollManager.js

@@ -251,7 +251,7 @@ import layoutManager from 'layoutManager';
      * @return {ScrollerData} Scroller data.
      */
     function getScrollerData(scroller, vertical) {
-        let data = {};
+        const data = {};
 
         if (!vertical) {
             data.scrollPos = scroller.scrollLeft;

src/components/viewSettings/viewSettings.js

@@ -1,6 +1,8 @@
 define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'userSettings', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dialogHelper, loading, appHost, layoutManager, connectionManager, appRouter, globalize, userSettings) {
     'use strict';
 
+    appRouter = appRouter.default || appRouter;
+
     function onSubmit(e) {
         e.preventDefault();
         return false;

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

@@ -105,7 +105,7 @@ export default function(view, params) {
     });
 
     view.querySelector('.btnNewRepository').addEventListener('click', () => {
-        let dialog = dialogHelper.createDialog({
+        const dialog = dialogHelper.createDialog({
             scrollY: false,
             size: 'large',
             modal: false,

src/controllers/playback/video/index.js

@@ -172,9 +172,7 @@ import 'css!assets/css/videoosd';
             }
 
             setTitle(displayItem, parentName);
-            let titleElement;
+            const titleElement = view.querySelector('.osdTitle');
-            const osdTitle = view.querySelector('.osdTitle');
-            titleElement = osdTitle;
             let displayName = itemHelper.getDisplayName(displayItem, {
                 includeParentInfo: displayItem.Type !== 'Program',
                 includeIndexNumber: displayItem.Type !== 'Program'
@@ -1442,7 +1440,7 @@ import 'css!assets/css/videoosd';
                 });
             } catch (e) {
                 import('appRouter').then(({default: appRouter}) => {
-                    appRouter.goHome();
+                    appRouter.default.goHome();
                 });
             }
         });
@@ -1619,7 +1617,7 @@ import 'css!assets/css/videoosd';
             const item = currentItem;
 
             if (item && item.Chapters && item.Chapters.length && item.Chapters[0].ImageTag) {
-                let html = getChapterBubbleHtml(connectionManager.getApiClient(item.ServerId), item, item.Chapters, ticks);
+                const html = getChapterBubbleHtml(connectionManager.getApiClient(item.ServerId), item, item.Chapters, ticks);
 
                 if (html) {
                     return html;

src/plugins/bookPlayer/plugin.js

@@ -27,16 +27,16 @@ export class BookPlayer {
         this._loaded = false;
 
         loading.show();
-        let elem = this.createMediaElement();
+        const elem = this.createMediaElement();
         return this.setCurrentSrc(elem, options);
     }
 
     stop() {
         this.unbindEvents();
 
-        let elem = this._mediaElement;
+        const elem = this._mediaElement;
-        let tocElement = this._tocElement;
+        const tocElement = this._tocElement;
-        let rendition = this._rendition;
+        const rendition = this._rendition;
 
         if (elem) {
             dialogHelper.close(elem);
@@ -147,7 +147,7 @@ export class BookPlayer {
     }
 
     bindMediaElementEvents() {
-        let elem = this._mediaElement;
+        const elem = this._mediaElement;
 
         elem.addEventListener('close', this.onDialogClosed, {once: true});
         elem.querySelector('.btnBookplayerExit').addEventListener('click', this.onDialogClosed, {once: true});
@@ -166,7 +166,7 @@ export class BookPlayer {
     }
 
     unbindMediaElementEvents() {
-        let elem = this._mediaElement;
+        const elem = this._mediaElement;
 
         elem.removeEventListener('close', this.onDialogClosed);
         elem.querySelector('.btnBookplayerExit').removeEventListener('click', this.onDialogClosed);
@@ -231,7 +231,7 @@ export class BookPlayer {
     }
 
     setCurrentSrc(elem, options) {
-        let item = options.items[0];
+        const item = options.items[0];
         this._currentItem = item;
         this.streamInfo = {
             started: true,
@@ -241,8 +241,8 @@ export class BookPlayer {
             }
         };
 
-        let serverId = item.ServerId;
+        const serverId = item.ServerId;
-        let apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = connectionManager.getApiClient(serverId);
 
         return new Promise((resolve, reject) => {
             import('epubjs').then(({default: epubjs}) => {
@@ -252,14 +252,14 @@ export class BookPlayer {
 
                 this._currentSrc = downloadHref;
                 this._rendition = rendition;
-                let cancellationToken = {
+                const cancellationToken = {
                     shouldCancel: false
                 };
 
                 this._cancellationToken = cancellationToken;
 
                 return rendition.display().then(() => {
-                    let epubElem = document.querySelector('.epub-container');
+                    const epubElem = document.querySelector('.epub-container');
                     epubElem.style.display = 'none';
 
                     this.bindEvents();

src/plugins/bookPlayer/tableOfContents.js

@@ -11,7 +11,7 @@ export default class TableOfContents {
     }
 
     destroy() {
-        let elem = this._elem;
+        const elem = this._elem;
         if (elem) {
             this.unbindEvents();
             dialogHelper.close(elem);
@@ -21,14 +21,14 @@ export default class TableOfContents {
     }
 
     bindEvents() {
-        let elem = this._elem;
+        const elem = this._elem;
 
         elem.addEventListener('close', this.onDialogClosed, {once: true});
         elem.querySelector('.btnBookplayerTocClose').addEventListener('click', this.onDialogClosed, {once: true});
     }
 
     unbindEvents() {
-        let elem = this._elem;
+        const elem = this._elem;
 
         elem.removeEventListener('close', this.onDialogClosed);
         elem.querySelector('.btnBookplayerTocClose').removeEventListener('click', this.onDialogClosed);
@@ -39,10 +39,10 @@ export default class TableOfContents {
     }
 
     replaceLinks(contents, f) {
-        let links = contents.querySelectorAll('a[href]');
+        const links = contents.querySelectorAll('a[href]');
 
         links.forEach((link) => {
-            let href = link.getAttribute('href');
+            const href = link.getAttribute('href');
 
             link.onclick = () => {
                 f(href);
@@ -52,9 +52,9 @@ export default class TableOfContents {
     }
 
     createMediaElement() {
-        let rendition = this._rendition;
+        const rendition = this._rendition;
 
-        let elem = dialogHelper.createDialog({
+        const elem = dialogHelper.createDialog({
             size: 'small',
             autoFocus: false,
             removeOnClose: true
@@ -69,7 +69,7 @@ export default class TableOfContents {
         rendition.book.navigation.forEach((chapter) => {
             tocHtml += '<li>';
             // Remove '../' from href
-            let link = chapter.href.startsWith('../') ? chapter.href.substr(3) : chapter.href;
+            const link = chapter.href.startsWith('../') ? chapter.href.substr(3) : chapter.href;
             tocHtml += `<a href="${rendition.book.path.directory + link}">${chapter.label}</a>`;
             tocHtml += '</li>';
         });
@@ -78,7 +78,7 @@ export default class TableOfContents {
         elem.innerHTML = tocHtml;
 
         this.replaceLinks(elem, (href) => {
-            let relative = rendition.book.path.relative(href);
+            const relative = rendition.book.path.relative(href);
             rendition.display(relative);
             this.destroy();
         });

src/plugins/htmlVideoPlayer/plugin.js

@@ -105,7 +105,7 @@ function tryRemoveElement(elem) {
     }
 
     function hidePrePlaybackPage() {
-        let animatedPage = document.querySelector('.page:not(.hide)');
+        const animatedPage = document.querySelector('.page:not(.hide)');
         animatedPage.classList.add('hide');
         // At this point, we must hide the scrollbar placeholder, so it's not being displayed while the item is being loaded
         document.body.classList.remove('force-scroll');
@@ -822,8 +822,8 @@ function tryRemoveElement(elem) {
                     }
                 });
 
-                if (this._currentPlayOptions.fullscreen) {
+                if (self._currentPlayOptions.fullscreen) {
-                    appRouter.showVideoOsd().then(this.onNavigatedToOsd);
+                    appRouter.show('videoosd.html').then(this.onNavigatedToOsd);
                 } else {
                     appRouter.setTransparency('backdrop');
                     this.#videoDialog.classList.remove('videoPlayerContainer-onTop');

src/plugins/youtubePlayer/plugin.js

@@ -106,7 +106,7 @@ function onPlaying(instance, playOptions, resolve) {
         instance.timeUpdateInterval = setInterval(onTimeUpdate.bind(instance), 500);
 
         if (playOptions.fullscreen) {
-            appRouter.showVideoOsd().then(function () {
+            appRouter.show('videoosd.html').then(function () {
                 instance.videoDialog.classList.remove('onTop');
             });
         } else {

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/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/libraryMenu.js

@@ -3,6 +3,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
 
     playbackManager = playbackManager.default || playbackManager;
     browser = browser.default || browser;
+    appRouter = appRouter.default || appRouter;
 
     function renderHeader() {
         var html = '';

src/scripts/serverNotifications.js

@@ -3,6 +3,7 @@ define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'in
 
     playbackManager = playbackManager.default || playbackManager;
     focusManager = focusManager.default || focusManager;
+    appRouter = appRouter.default || appRouter;
 
     var serverNotifications = {};
 

src/scripts/site.js

@@ -138,14 +138,14 @@ var Dashboard = {
 
         return new Promise(function (resolve, reject) {
             require(['appRouter'], function (appRouter) {
-                return appRouter.show(url).then(resolve, reject);
+                return appRouter.default.show(url).then(resolve, reject);
             });
         });
     },
     navigate_direct: function (path) {
         return new Promise(function (resolve, reject) {
             require(['appRouter'], function (appRouter) {
-                return appRouter.showDirect(path).then(resolve, reject);
+                return appRouter.default.showDirect(path).then(resolve, reject);
             });
         });
     },
@@ -517,6 +517,7 @@ function initClient() {
 
         // ensure that appHost is loaded in this point
         require(['apphost', 'appRouter'], function (appHost, appRouter) {
+            appRouter = appRouter.default || appRouter;
             window.Emby = {};
 
             console.debug('onAppReady: loading dependencies');
@@ -614,10 +615,10 @@ function initClient() {
         init();
     }
 
+    var promise;
     var localApiClient;
-    let promise;
 
-    (function () {
+    function initRequireJs() {
         var urlArgs = 'v=' + (window.dashboardVersion || new Date().getDate());
 
         var bowerPath = getBowerPath();
@@ -648,7 +649,9 @@ function initClient() {
             nowPlayingHelper: componentsPath + '/playback/nowplayinghelper',
             pluginManager: componentsPath + '/pluginManager',
             packageManager: componentsPath + '/packageManager',
-            screensaverManager: componentsPath + '/screensavermanager'
+            screensaverManager: componentsPath + '/screensavermanager',
+            chromecastHelper: 'plugins/chromecastPlayer/chromecastHelpers',
+            appRouter: 'components/appRouter'
         };
 
         requirejs.onError = onRequireJsError;
@@ -847,267 +850,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), {
+    initRequireJs();
-                        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;
-        });
-    })();
-
     promise.then(onWebComponentsReady);
 }