merge branch master into migrate-to-ES6-40

src/controllers/dashboard/apikeys.js

@@ -1,6 +1,5 @@
 import datetime from 'datetime';
 import loading from 'loading';
-import libraryMenu from 'libraryMenu';
 import dom from 'dom';
 import globalize from 'globalize';
 import 'emby-button';

src/controllers/dashboard/dashboard.js

@@ -313,7 +313,7 @@ import 'emby-itemscontainer';
                 btnCssClass = session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length ? '' : ' hide';
                 html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionInfo paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate('ViewPlaybackInfo') + '"><span class="material-icons info"></span></button>';
 
-                btnCssClass = session.ServerId && -1 !== session.SupportedCommands.indexOf('DisplayMessage') && session.DeviceId !== connectionManager.deviceId() ? '' : ' hide';
+                btnCssClass = session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1 && session.DeviceId !== connectionManager.deviceId() ? '' : ' hide';
                 html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionSendMessage paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate('SendMessage') + '"><span class="material-icons message"></span></button>';
                 html += '</div>';
 
@@ -346,7 +346,7 @@ import 'emby-itemscontainer';
     function renderRunningTasks(view, tasks) {
         let html = '';
         tasks = tasks.filter(function (task) {
-            if ('Idle' != task.State) {
+            if (task.State != 'Idle') {
                 return !task.IsHidden;
             }
 
@@ -551,7 +551,7 @@ import 'emby-itemscontainer';
                 row.classList.remove('playingSession');
             }
 
-            if (session.ServerId && -1 !== session.SupportedCommands.indexOf('DisplayMessage') && session.DeviceId !== connectionManager.deviceId()) {
+            if (session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1 && session.DeviceId !== connectionManager.deviceId()) {
                 row.querySelector('.btnSessionSendMessage').classList.remove('hide');
             } else {
                 row.querySelector('.btnSessionSendMessage').classList.add('hide');

src/controllers/dashboard/devices/device.js

@@ -1,5 +1,4 @@
 import loading from 'loading';
-import libraryMenu from 'libraryMenu';
 import dom from 'dom';
 import 'emby-input';
 import 'emby-button';

src/controllers/dashboard/devices/devices.js

@@ -1,6 +1,5 @@
 import loading from 'loading';
 import dom from 'dom';
-import libraryMenu from 'libraryMenu';
 import globalize from 'globalize';
 import imageHelper from 'scripts/imagehelper';
 import * as datefns from 'date-fns';

src/controllers/dashboard/dlna/profile.js

@@ -29,7 +29,7 @@ import 'listViewStyle';
     function renderProfile(page, profile, users) {
         $('#txtName', page).val(profile.Name);
         $('.chkMediaType', page).each(function () {
-            this.checked = -1 != (profile.SupportedMediaTypes || '').split(',').indexOf(this.getAttribute('data-value'));
+            this.checked = (profile.SupportedMediaTypes || '').split(',').indexOf(this.getAttribute('data-value')) != -1;
         });
         $('#chkEnableAlbumArtInDidl', page).prop('checked', profile.EnableAlbumArtInDidl);
         $('#chkEnableSingleImageLimit', page).prop('checked', profile.EnableSingleAlbumArtLimit);
@@ -111,7 +111,7 @@ import 'listViewStyle';
     }
 
     function editIdentificationHeader(page, header) {
-        isSubProfileNew = null == header;
+        isSubProfileNew = header == null;
         header = header || {};
         currentSubProfile = header;
         const popup = $('#identificationHeaderPopup', page);
@@ -156,7 +156,7 @@ import 'listViewStyle';
     }
 
     function editXmlDocumentAttribute(page, attribute) {
-        isSubProfileNew = null == attribute;
+        isSubProfileNew = attribute == null;
         attribute = attribute || {};
         currentSubProfile = attribute;
         const popup = $('#xmlAttributePopup', page);
@@ -204,7 +204,7 @@ import 'listViewStyle';
     }
 
     function editSubtitleProfile(page, profile) {
-        isSubProfileNew = null == profile;
+        isSubProfileNew = profile == null;
         profile = profile || {};
         currentSubProfile = profile;
         const popup = $('#subtitleProfilePopup', page);
@@ -257,7 +257,6 @@ import 'listViewStyle';
         let currentType;
 
         for (const [index, profile] of profiles.entries()) {
-
             if (profile.Type !== currentType) {
                 html += '<li data-role="list-divider">' + profile.Type + '</li>';
                 currentType = profile.Type;
@@ -267,11 +266,11 @@ import 'listViewStyle';
             html += '<a is="emby-linkbutton" href="#" class="lnkEditSubProfile" data-profileindex="' + index + '">';
             html += '<p>' + globalize.translate('ValueContainer', profile.Container || allText) + '</p>';
 
-            if ('Video' == profile.Type) {
+            if (profile.Type == 'Video') {
                 html += '<p>' + globalize.translate('ValueVideoCodec', profile.VideoCodec || allText) + '</p>';
                 html += '<p>' + globalize.translate('ValueAudioCodec', profile.AudioCodec || allText) + '</p>';
             } else {
-                if ('Audio' == profile.Type) {
+                if (profile.Type == 'Audio') {
                     html += '<p>' + globalize.translate('ValueCodec', profile.AudioCodec || allText) + '</p>';
                 }
             }
@@ -299,7 +298,7 @@ import 'listViewStyle';
     }
 
     function editDirectPlayProfile(page, directPlayProfile) {
-        isSubProfileNew = null == directPlayProfile;
+        isSubProfileNew = directPlayProfile == null;
         directPlayProfile = directPlayProfile || {};
         currentSubProfile = directPlayProfile;
         const popup = $('#popupEditDirectPlayProfile', page);
@@ -328,11 +327,11 @@ import 'listViewStyle';
             html += '<p>Protocol: ' + (profile.Protocol || 'Http') + '</p>';
             html += '<p>' + globalize.translate('ValueContainer', profile.Container || allText) + '</p>';
 
-            if ('Video' == profile.Type) {
+            if (profile.Type == 'Video') {
                 html += '<p>' + globalize.translate('ValueVideoCodec', profile.VideoCodec || allText) + '</p>';
                 html += '<p>' + globalize.translate('ValueAudioCodec', profile.AudioCodec || allText) + '</p>';
             } else {
-                if ('Audio' == profile.Type) {
+                if (profile.Type == 'Audio') {
                     html += '<p>' + globalize.translate('ValueCodec', profile.AudioCodec || allText) + '</p>';
                 }
             }
@@ -355,7 +354,7 @@ import 'listViewStyle';
     }
 
     function editTranscodingProfile(page, transcodingProfile) {
-        isSubProfileNew = null == transcodingProfile;
+        isSubProfileNew = transcodingProfile == null;
         transcodingProfile = transcodingProfile || {};
         currentSubProfile = transcodingProfile;
         const popup = $('#transcodingProfilePopup', page);
@@ -366,7 +365,7 @@ import 'listViewStyle';
         $('#selectTranscodingProtocol', popup).val(transcodingProfile.Protocol || 'Http');
         $('#chkEnableMpegtsM2TsMode', popup).prop('checked', transcodingProfile.EnableMpegtsM2TsMode || false);
         $('#chkEstimateContentLength', popup).prop('checked', transcodingProfile.EstimateContentLength || false);
-        $('#chkReportByteRangeRequests', popup).prop('checked', 'Bytes' == transcodingProfile.TranscodeSeekInfo);
+        $('#chkReportByteRangeRequests', popup).prop('checked', transcodingProfile.TranscodeSeekInfo == 'Bytes');
         $('.radioTabButton:first', popup).trigger('click');
         openPopup(popup[0]);
     }
@@ -444,7 +443,7 @@ import 'listViewStyle';
     }
 
     function editContainerProfile(page, containerProfile) {
-        isSubProfileNew = null == containerProfile;
+        isSubProfileNew = containerProfile == null;
         containerProfile = containerProfile || {};
         currentSubProfile = containerProfile;
         const popup = $('#containerProfilePopup', page);
@@ -516,7 +515,7 @@ import 'listViewStyle';
     }
 
     function editCodecProfile(page, codecProfile) {
-        isSubProfileNew = null == codecProfile;
+        isSubProfileNew = codecProfile == null;
         codecProfile = codecProfile || {};
         currentSubProfile = codecProfile;
         const popup = $('#codecProfilePopup', page);
@@ -556,11 +555,11 @@ import 'listViewStyle';
             html += '<a is="emby-linkbutton" href="#" class="lnkEditSubProfile" data-profileindex="' + i + '">';
             html += '<p>' + globalize.translate('ValueContainer', profile.Container || allText) + '</p>';
 
-            if ('Video' == profile.Type) {
+            if (profile.Type == 'Video') {
                 html += '<p>' + globalize.translate('ValueVideoCodec', profile.VideoCodec || allText) + '</p>';
                 html += '<p>' + globalize.translate('ValueAudioCodec', profile.AudioCodec || allText) + '</p>';
             } else {
-                if ('Audio' == profile.Type) {
+                if (profile.Type == 'Audio') {
                     html += '<p>' + globalize.translate('ValueCodec', profile.AudioCodec || allText) + '</p>';
                 }
             }
@@ -596,7 +595,7 @@ import 'listViewStyle';
     }
 
     function editResponseProfile(page, responseProfile) {
-        isSubProfileNew = null == responseProfile;
+        isSubProfileNew = responseProfile == null;
         responseProfile = responseProfile || {};
         currentSubProfile = responseProfile;
         const popup = $('#responseProfilePopup', page);
@@ -704,26 +703,26 @@ import 'listViewStyle';
         $('.radioTabButton', page).on('click', function () {
             $(this).siblings().removeClass('ui-btn-active');
             $(this).addClass('ui-btn-active');
-            const value = 'A' == this.tagName ? this.getAttribute('data-value') : this.value;
+            const value = this.tagName == 'A' ? this.getAttribute('data-value') : this.value;
             const elem = $('.' + value, page);
             elem.siblings('.tabContent').hide();
             elem.show();
         });
         $('#selectDirectPlayProfileType', page).on('change', function () {
-            if ('Video' == this.value) {
+            if (this.value == 'Video') {
                 $('#fldDirectPlayVideoCodec', page).show();
             } else {
                 $('#fldDirectPlayVideoCodec', page).hide();
             }
 
-            if ('Photo' == this.value) {
+            if (this.value == 'Photo') {
                 $('#fldDirectPlayAudioCodec', page).hide();
             } else {
                 $('#fldDirectPlayAudioCodec', page).show();
             }
         });
         $('#selectTranscodingProfileType', page).on('change', function () {
-            if ('Video' == this.value) {
+            if (this.value == 'Video') {
                 $('#fldTranscodingVideoCodec', page).show();
                 $('#fldTranscodingProtocol', page).show();
                 $('#fldEnableMpegtsM2TsMode', page).show();
@@ -733,7 +732,7 @@ import 'listViewStyle';
                 $('#fldEnableMpegtsM2TsMode', page).hide();
             }
 
-            if ('Photo' == this.value) {
+            if (this.value == 'Photo') {
                 $('#fldTranscodingAudioCodec', page).hide();
                 $('#fldEstimateContentLength', page).hide();
                 $('#fldReportByteRangeRequests', page).hide();
@@ -744,13 +743,13 @@ import 'listViewStyle';
             }
         });
         $('#selectResponseProfileType', page).on('change', function () {
-            if ('Video' == this.value) {
+            if (this.value == 'Video') {
                 $('#fldResponseProfileVideoCodec', page).show();
             } else {
                 $('#fldResponseProfileVideoCodec', page).hide();
             }
 
-            if ('Photo' == this.value) {
+            if (this.value == 'Photo') {
                 $('#fldResponseProfileAudioCodec', page).hide();
             } else {
                 $('#fldResponseProfileAudioCodec', page).show();

src/controllers/dashboard/dlna/profiles.js

@@ -18,13 +18,13 @@ import 'emby-button';
 
     function renderUserProfiles(page, profiles) {
         renderProfiles(page, page.querySelector('.customProfiles'), profiles.filter(function (p) {
-            return 'User' == p.Type;
+            return p.Type == 'User';
         }));
     }
 
     function renderSystemProfiles(page, profiles) {
         renderProfiles(page, page.querySelector('.systemProfiles'), profiles.filter(function (p) {
-            return 'System' == p.Type;
+            return p.Type == 'System';
         }));
     }
 
@@ -45,7 +45,7 @@ import 'emby-button';
             html += '</a>';
             html += '</div>';
 
-            if ('User' == profile.Type) {
+            if (profile.Type == 'User') {
                 html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile" data-profileid="' + profile.Id + '" title="' + globalize.translate('ButtonDelete') + '"><span class="material-icons delete"></span></button>';
             }
 

src/controllers/dashboard/encodingsettings.js

@@ -8,7 +8,7 @@ import libraryMenu from 'libraryMenu';
 
     function loadPage(page, config, systemInfo) {
         Array.prototype.forEach.call(page.querySelectorAll('.chkDecodeCodec'), function (c) {
-            c.checked = -1 !== (config.HardwareDecodingCodecs || []).indexOf(c.getAttribute('data-codec'));
+            c.checked = (config.HardwareDecodingCodecs || []).indexOf(c.getAttribute('data-codec')) !== -1;
         });
         page.querySelector('#chkDecodingColorDepth10Hevc').checked = config.EnableDecodingColorDepth10Hevc;
         page.querySelector('#chkDecodingColorDepth10Vp9').checked = config.EnableDecodingColorDepth10Vp9;
@@ -81,7 +81,7 @@ import libraryMenu from 'libraryMenu';
                     updateEncoder(form);
                 }, function () {
                     import('alert').then(({default: alert}) => {
-                        alert(globalize.translate('DefaultErrorMessage'));
+                        alert(globalize.translate('ErrorDefault'));
                     });
 
                     Dashboard.processServerConfigurationUpdateResult();
@@ -107,7 +107,7 @@ import libraryMenu from 'libraryMenu';
         value = value || '';
         let any;
         Array.prototype.forEach.call(context.querySelectorAll('.chkDecodeCodec'), function (c) {
-            if (-1 === c.getAttribute('data-types').split(',').indexOf(value)) {
+            if (c.getAttribute('data-types').split(',').indexOf(value) === -1) {
                 dom.parentWithTag(c, 'LABEL').classList.add('hide');
             } else {
                 dom.parentWithTag(c, 'LABEL').classList.remove('hide');
@@ -138,7 +138,7 @@ import libraryMenu from 'libraryMenu';
     $(document).on('pageinit', '#encodingSettingsPage', function () {
         const page = this;
         page.querySelector('#selectVideoDecoder').addEventListener('change', function () {
-            if ('vaapi' == this.value) {
+            if (this.value == 'vaapi') {
                 page.querySelector('.fldVaapiDevice').classList.remove('hide');
                 page.querySelector('#txtVaapiDevice').setAttribute('required', 'required');
             } else {

src/controllers/dashboard/general.js

@@ -52,7 +52,7 @@ import 'emby-button';
                 });
             }, function () {
                 import('alert').then(({default: alert}) => {
-                    alert(globalize.translate('DefaultErrorMessage'));
+                    alert(globalize.translate('ErrorDefault'));
                 });
 
                 Dashboard.processServerConfigurationUpdateResult();

src/controllers/dashboard/librarydisplay.js

@@ -48,7 +48,7 @@ import 'emby-button';
                 ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult);
             });
             ApiClient.getNamedConfiguration('metadata').then(function(config) {
-                config.UseFileCreationTimeForDateAdded = '1' === $('#selectDateAdded', form).val();
+                config.UseFileCreationTimeForDateAdded = $('#selectDateAdded', form).val() === '1';
                 ApiClient.updateNamedConfiguration('metadata', config);
             });
 
@@ -61,7 +61,7 @@ import 'emby-button';
             libraryMenu.setTabs('librarysetup', 1, getTabs);
             loadData();
             ApiClient.getSystemInfo().then(function(info) {
-                if ('Windows' === info.OperatingSystem) {
+                if (info.OperatingSystem === 'Windows') {
                     view.querySelector('.fldSaveMetadataHidden').classList.remove('hide');
                 } else {
                     view.querySelector('.fldSaveMetadataHidden').classList.add('hide');

src/controllers/dashboard/mediaLibrary.js

@@ -1,11 +1,9 @@
 import $ from 'jQuery';
-import appHost from 'apphost';
 import taskButton from 'scripts/taskbutton';
 import loading from 'loading';
 import libraryMenu from 'libraryMenu';
 import globalize from 'globalize';
 import dom from 'dom';
-import indicators from 'indicators';
 import imageHelper from 'scripts/imagehelper';
 import 'cardStyle';
 import 'emby-itemrefreshindicator';
@@ -158,7 +156,7 @@ import 'emby-itemrefreshindicator';
     }
 
     function shouldRefreshLibraryAfterChanges(page) {
-        return 'mediaLibraryPage' === page.id;
+        return page.id === 'mediaLibraryPage';
     }
 
     function reloadVirtualFolders(page, virtualFolders) {
@@ -288,7 +286,7 @@ import 'emby-itemrefreshindicator';
 
         if (hasCardImageContainer) {
             html += '<div class="cardIndicators backdropCardIndicators">';
-            html += '<div is="emby-itemrefreshindicator"' + (virtualFolder.RefreshProgress || virtualFolder.RefreshStatus && 'Idle' !== virtualFolder.RefreshStatus ? '' : ' class="hide"') + ' data-progress="' + (virtualFolder.RefreshProgress || 0) + '" data-status="' + virtualFolder.RefreshStatus + '"></div>';
+            html += '<div is="emby-itemrefreshindicator"' + (virtualFolder.RefreshProgress || virtualFolder.RefreshStatus && virtualFolder.RefreshStatus !== 'Idle' ? '' : ' class="hide"') + ' data-progress="' + (virtualFolder.RefreshProgress || 0) + '" data-status="' + virtualFolder.RefreshStatus + '"></div>';
             html += '</div>';
             html += '</div>';
         }
@@ -395,7 +393,6 @@ import 'emby-itemrefreshindicator';
         });
     });
     pageIdOn('pagebeforehide', 'mediaLibraryPage', function () {
-
         const page = this;
         taskButton({
             mode: 'off',

src/controllers/dashboard/metadataImages.js

@@ -1,5 +1,4 @@
 import $ from 'jQuery';
-import dom from 'dom';
 import loading from 'loading';
 import libraryMenu from 'libraryMenu';
 import globalize from 'globalize';

src/controllers/dashboard/networking.js

@@ -1,5 +1,4 @@
 import loading from 'loading';
-import libraryMenu from 'libraryMenu';
 import globalize from 'globalize';
 import 'emby-checkbox';
 import 'emby-select';
@@ -31,7 +30,7 @@ import 'emby-select';
                     }).filter(function (s) {
                         return s.length > 0;
                     });
-                    config.IsRemoteIPFilterBlacklist = 'blacklist' === form.querySelector('#selectExternalAddressFilterMode').value;
+                    config.IsRemoteIPFilterBlacklist = form.querySelector('#selectExternalAddressFilterMode').value === 'blacklist';
                     config.PublicPort = form.querySelector('#txtPublicPort').value;
                     config.PublicHttpsPort = form.querySelector('#txtPublicHttpsPort').value;
                     config.HttpServerPortNumber = form.querySelector('#txtPortNumber').value;
@@ -111,7 +110,7 @@ import 'emby-select';
             page.querySelector('#txtLanNetworks').value = (config.LocalNetworkSubnets || []).join(', ');
             page.querySelector('#txtExternalAddressFilter').value = (config.RemoteIPFilter || []).join(', ');
             page.querySelector('#selectExternalAddressFilterMode').value = config.IsRemoteIPFilterBlacklist ? 'blacklist' : 'whitelist';
-            page.querySelector('#chkRemoteAccess').checked = null == config.EnableRemoteAccess || config.EnableRemoteAccess;
+            page.querySelector('#chkRemoteAccess').checked = config.EnableRemoteAccess == null || config.EnableRemoteAccess;
             page.querySelector('#txtHttpsPort').value = config.HttpsPortNumber;
             page.querySelector('#chkEnableHttps').checked = config.EnableHttps;
             page.querySelector('#chkRequireHttps').checked = config.RequireHttps;

src/controllers/dashboard/notifications/notification/index.html

@@ -0,0 +1,68 @@
+<div id="notificationSettingPage" data-role="page" class="page type-interior notificationConfigurationPage withTabs">
+
+    <div>
+        <div class="content-primary">
+
+            <form class="notificationSettingForm">
+
+                <div class="verticalSection">
+                    <div class="sectionTitleContainer flex align-items-center">
+                        <h2 class="notificationType sectionTitle"></h2>
+                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/notifications.html">${Help}</a>
+                    </div>
+                </div>
+
+                <label class="checkboxContainer">
+                    <input type="checkbox" is="emby-checkbox" id="chkEnabled" />
+                    <span>${LabelNotificationEnabled}</span>
+                </label>
+                <br />
+
+                <div class="monitorUsers" style="display: none;">
+                    <div class="paperListLabel">${LabelMonitorUsers}</div>
+                    <div class="monitorUsersList">
+                    </div>
+                    <br />
+                    <br />
+                </div>
+
+                <div>
+                    <div class="selectContainer">
+                        <select is="emby-select" id="selectUsers" label="${LabelSendNotificationToUsers}">
+                            <option value="All">${OptionAllUsers}</option>
+                            <option value="Admins">${OptionAdminUsers}</option>
+                            <option value="Custom">${OptionCustomUsers}</option>
+                        </select>
+                    </div>
+                    <div class="selectCustomUsers" style="display: none;">
+                        <br />
+                        <label>${LabelSelectUsers}</label>
+                        <div class="sendToUsersList">
+                        </div>
+                    </div>
+                    <br />
+                </div>
+
+                <div>
+                    <label>${LabelUseNotificationServices}</label>
+                    <div class="servicesList">
+                    </div>
+                    <div class="fieldDescription">${AdditionalNotificationServices}</div>
+                    <br />
+                </div>
+
+                <div>
+                    <br />
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${ButtonSave}</span>
+                    </button>
+
+                    <button is="emby-button" type="button" class="raised button-cancel block btnCancel" onclick="history.back();">
+                        <span>${ButtonCancel}</span>
+                    </button>
+                </div>
+            </form>
+
+        </div>
+    </div>
+</div>

src/controllers/dashboard/notifications/notification/index.js

@@ -106,7 +106,7 @@ const notificationsConfigurationKey = 'notifications';
 $(document).on('pageinit', '#notificationSettingPage', function () {
     const page = this;
     $('#selectUsers', page).on('change', function () {
-        if ('Custom' == this.value) {
+        if (this.value == 'Custom') {
             $('.selectCustomUsers', page).show();
         } else {
             $('.selectCustomUsers', page).hide();

src/controllers/dashboard/notifications/notifications/index.html

@@ -0,0 +1,9 @@
+<div id="notificationSettingsPage" data-role="page" class="page type-interior notificationConfigurationPage">
+    <div>
+        <div class="content-primary">
+            <div class="readOnlyContent">
+                <div class="notificationList"></div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,49 @@
+<div id="addPluginPage" data-role="page" class="page type-interior pluginConfigurationPage" data-backbutton="true">
+    <div>
+        <div class="content-primary">
+            <div class="readOnlyContent">
+                <div class="verticalSection">
+                    <div class="sectionTitleContainer flex align-items-center">
+                        <h1 class="sectionTitle pluginName"></h1>
+                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/plugins/index.html">${Help}</a>
+                    </div>
+
+                    <p id="overview" style="font-style: italic;"></p>
+                    <p id="description"></p>
+                </div>
+
+                <div class="verticalSection">
+                    <h2 class="sectionTitle">${HeaderInstall}</h2>
+
+                    <form class="addPluginForm">
+                        <p id="pCurrentVersion"></p>
+                        <div id="pSelectVersion" class="hide selectContainer">
+                            <select id="selectVersion" name="selectVersion" is="emby-select" label="${LabelSelectVersionToInstall}"></select>
+                        </div>
+
+                        <div id="btnInstallDiv" class="hide">
+                            <button is="emby-button" type="submit" id="btnInstall" class="raised button-submit block">
+                                <span>${Install}</span>
+                            </button>
+                            <div class="fieldDescription">${ServerRestartNeededAfterPluginInstall}</div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <br />
+            <div class="readOnlyContent">
+                <div is="emby-collapse" title="${HeaderDeveloperInfo}">
+                    <div class="collapseContent">
+                        <p id="developer"></p>
+                    </div>
+                </div>
+
+                <div is="emby-collapse" title="${HeaderRevisionHistory}">
+                    <div class="collapseContent">
+                        <div id="revisionHistory"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -1,6 +1,8 @@
 define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'emby-button'], function ($, loading, libraryMenu, globalize, connectionManager) {
     'use strict';
 
+    loading = loading.default || loading;
+
     function populateHistory(packageInfo, page) {
         var html = '';
         var length = Math.min(packageInfo.versions.length, 10);
@@ -66,7 +68,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'e
     }
 
     function alertText(options) {
-        require(['alert'], function (alert) {
+        require(['alert'], function ({default: alert}) {
             alert(options);
         });
     }
@@ -79,7 +81,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'e
             page.querySelector('#btnInstall').disabled = true;
             ApiClient.installPlugin(name, guid, version).then(function () {
                 loading.hide();
-                alertText(globalize.translate('PluginInstalledMessage'));
+                alertText(globalize.translate('MessagePluginInstalled'));
             });
         };
 
@@ -114,14 +116,12 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'e
                 })[0];
 
                 var version = $('#selectVersion', page).val();
-                if (installedPlugin) {
-                    if (installedPlugin.Version === version) {
-                        loading.hide();
-                        Dashboard.alert({
-                            message: globalize.translate('MessageAlreadyInstalled'),
-                            title: globalize.translate('HeaderPluginInstallation')
-                        });
-                    }
+                if (installedPlugin && installedPlugin.Version === version) {
+                    loading.hide();
+                    Dashboard.alert({
+                        message: globalize.translate('MessageAlreadyInstalled'),
+                        title: globalize.translate('HeaderPluginInstallation')
+                    });
                 } else {
                     performInstallation(page, name, guid, version);
                 }

src/controllers/dashboard/plugins/available/index.html

@@ -0,0 +1,8 @@
+<div id="pluginCatalogPage" data-role="page" class="page type-interior pluginConfigurationPage withTabs fullWidthContent">
+    <div>
+        <div class="content-primary">
+            <div id="noPlugins" class="hide">${MessageNoAvailablePlugins}</div>
+            <div id="pluginTiles" style="text-align:left;"></div>
+        </div>
+    </div>
+</div>

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

@@ -1,6 +1,8 @@
 define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby-checkbox', 'emby-select'], function (loading, libraryMenu, globalize) {
     'use strict';
 
+    loading = loading.default || loading;
+
     function reloadList(page) {
         loading.show();
         var promise1 = ApiClient.getAvailablePlugins();
@@ -17,13 +19,13 @@ define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby
 
     function getHeaderText(category) {
         category = category.replace(' ', '');
-        if ('Channel' === category) {
+        if (category === 'Channel') {
             category = 'Channels';
-        } else if ('Theme' === category) {
+        } else if (category === 'Theme') {
             category = 'Themes';
-        } else if ('LiveTV' === category) {
+        } else if (category === 'LiveTV') {
             category = 'HeaderLiveTV';
-        } else if ('ScreenSaver' === category) {
+        } else if (category === 'ScreenSaver') {
             category = 'HeaderScreenSavers';
         }
 
@@ -34,7 +36,6 @@ define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby
         var availablePlugins = options.availablePlugins;
         var installedPlugins = options.installedPlugins;
 
-        var categories = [];
         availablePlugins.forEach(function (plugin, index, array) {
             plugin.category = plugin.category || 'General';
             plugin.categoryDisplayName = getHeaderText(plugin.category);

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

@@ -0,0 +1,7 @@
+<div id="pluginsPage" data-role="page" class="page type-interior pluginConfigurationPage withTabs fullWidthContent">
+    <div>
+        <div class="content-primary">
+            <div class="installedPlugins"></div>
+        </div>
+    </div>
+</div>

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

@@ -1,15 +1,17 @@
 define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'], function (loading, libraryMenu, dom, globalize) {
     'use strict';
 
+    loading = loading.default || loading;
+
     function deletePlugin(page, uniqueid, name) {
         var msg = globalize.translate('UninstallPluginConfirmation', name);
 
         require(['confirm'], function (confirm) {
             confirm.default({
-                title: globalize.translate('UninstallPluginHeader'),
+                title: globalize.translate('HeaderUninstallPlugin'),
                 text: msg,
                 primary: 'delete',
-                confirmText: globalize.translate('UninstallPluginHeader')
+                confirmText: globalize.translate('HeaderUninstallPlugin')
             }).then(function () {
                 loading.show();
                 ApiClient.uninstallPlugin(uniqueid).then(function () {
@@ -21,7 +23,7 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
 
     function showNoConfigurationMessage() {
         Dashboard.alert({
-            message: globalize.translate('NoPluginConfigurationMessage')
+            message: globalize.translate('MessageNoPluginConfiguration')
         });
     }
 
@@ -95,7 +97,7 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
             html += '<div class="centerMessage">';
             html += '<h1>' + globalize.translate('MessageNoPluginsInstalled') + '</h1>';
             html += '<p><a is="emby-linkbutton" class="button-link" href="availableplugins.html">';
-            html += globalize.translate('BrowsePluginCatalogMessage');
+            html += globalize.translate('MessageBrowsePluginCatalog');
             html += '</a></p>';
             html += '</div>';
         }

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

@@ -0,0 +1,19 @@
+<div id="repositories" data-role="page" class="page type-interior withTabs fullWidthContent">
+    <div>
+        <div class="content-primary">
+            <div class="sectionTitleContainer flex align-items-center">
+                <h2 class="sectionTitle">${TabRepositories}</h2>
+                <button is="emby-button" type="button" class="fab btnNewRepository submit" style="margin-left:1em;" title="${ButtonAdd}">
+                    <span class="material-icons add" aria-hidden="true"></span>
+                </button>
+            </div>
+
+            <div id="repositories"></div>
+
+            <div id="none" class="noItemsMessage centerMessage hide">
+                <h1>${MessageNoRepositories}</h1>
+                <p>${MessageAddRepository}</p>
+            </div>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/scheduledtasks/scheduledtask.js

@@ -10,7 +10,6 @@ import 'emby-select';
 /* eslint-disable indent */
 
     function fillTimeOfDay(select) {
-
         const options = [];
 
         for (let i = 0; i < 86400000; i += 900000) {
@@ -85,21 +84,20 @@ import 'emby-select';
         },
         // TODO: Replace this mess with date-fns and remove datetime completely
         getTriggerFriendlyName: function (trigger) {
-            if ('DailyTrigger' == trigger.Type) {
+            if (trigger.Type == 'DailyTrigger') {
                 return globalize.translate('DailyAt', ScheduledTaskPage.getDisplayTime(trigger.TimeOfDayTicks));
             }
 
-            if ('WeeklyTrigger' == trigger.Type) {
+            if (trigger.Type == 'WeeklyTrigger') {
                 // TODO: The day of week isn't localised as well
                 return globalize.translate('WeeklyAt', trigger.DayOfWeek, ScheduledTaskPage.getDisplayTime(trigger.TimeOfDayTicks));
             }
 
-            if ('SystemEventTrigger' == trigger.Type && 'WakeFromSleep' == trigger.SystemEvent) {
+            if (trigger.Type == 'SystemEventTrigger' && trigger.SystemEvent == 'WakeFromSleep') {
                 return globalize.translate('OnWakeFromSleep');
             }
 
             if (trigger.Type == 'IntervalTrigger') {
-
                 const hours = trigger.IntervalTicks / 36e9;
 
                 if (hours == 0.25) {
@@ -138,7 +136,7 @@ import 'emby-select';
         },
         confirmDeleteTrigger: function (view, index) {
             import('confirm').then(({default: confirm}) => {
-                confirm.default(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () {
+                confirm(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () {
                     ScheduledTaskPage.deleteTrigger(view, index);
                 });
             });

src/controllers/dashboard/users/useredit.js

@@ -14,13 +14,13 @@ import globalize from 'globalize';
             let html = '';
 
             for (const folder of mediaFolders) {
-                isChecked = user.Policy.EnableContentDeletion || -1 != user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id);
+                isChecked = user.Policy.EnableContentDeletion || user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id) != -1;
                 checkedAttribute = isChecked ? ' checked="checked"' : '';
                 html += '<label><input type="checkbox" is="emby-checkbox" class="chkFolder" data-id="' + folder.Id + '" ' + checkedAttribute + '><span>' + folder.Name + '</span></label>';
             }
 
             for (const folder of channelsResult.Items) {
-                isChecked = user.Policy.EnableContentDeletion || -1 != user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id);
+                isChecked = user.Policy.EnableContentDeletion || user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id) != -1;
                 checkedAttribute = isChecked ? ' checked="checked"' : '';
                 html += '<label><input type="checkbox" is="emby-checkbox" class="chkFolder" data-id="' + folder.Id + '" ' + checkedAttribute + '><span>' + folder.Name + '</span></label>';
             }
@@ -96,7 +96,7 @@ import globalize from 'globalize';
         $('#chkEnableVideoPlaybackTranscoding', page).prop('checked', user.Policy.EnableVideoPlaybackTranscoding);
         $('#chkEnableVideoPlaybackRemuxing', page).prop('checked', user.Policy.EnablePlaybackRemuxing);
         $('#chkForceRemoteSourceTranscoding', page).prop('checked', user.Policy.ForceRemoteSourceTranscoding);
-        $('#chkRemoteAccess', page).prop('checked', null == user.Policy.EnableRemoteAccess || user.Policy.EnableRemoteAccess);
+        $('#chkRemoteAccess', page).prop('checked', user.Policy.EnableRemoteAccess == null || user.Policy.EnableRemoteAccess);
         $('#chkEnableSyncTranscoding', page).prop('checked', user.Policy.EnableSyncTranscoding);
         $('#chkEnableConversion', page).prop('checked', user.Policy.EnableMediaConversion || false);
         $('#chkEnableSharing', page).prop('checked', user.Policy.EnablePublicSharing);

src/controllers/dashboard/users/userlibraryaccess.js

@@ -18,7 +18,7 @@ import globalize from 'globalize';
 
         for (let i = 0, length = mediaFolders.length; i < length; i++) {
             const folder = mediaFolders[i];
-            const isChecked = user.Policy.EnableAllFolders || -1 != user.Policy.EnabledFolders.indexOf(folder.Id);
+            const isChecked = user.Policy.EnableAllFolders || user.Policy.EnabledFolders.indexOf(folder.Id) != -1;
             const checkedAttribute = isChecked ? ' checked="checked"' : '';
             html += '<label><input type="checkbox" is="emby-checkbox" class="chkFolder" data-id="' + folder.Id + '" ' + checkedAttribute + '><span>' + folder.Name + '</span></label>';
         }
@@ -37,7 +37,7 @@ import globalize from 'globalize';
 
         for (let i = 0, length = channels.length; i < length; i++) {
             const folder = channels[i];
-            const isChecked = user.Policy.EnableAllChannels || -1 != user.Policy.EnabledChannels.indexOf(folder.Id);
+            const isChecked = user.Policy.EnableAllChannels || user.Policy.EnabledChannels.indexOf(folder.Id) != -1;
             const checkedAttribute = isChecked ? ' checked="checked"' : '';
             html += '<label><input type="checkbox" is="emby-checkbox" class="chkChannel" data-id="' + folder.Id + '" ' + checkedAttribute + '><span>' + folder.Name + '</span></label>';
         }
@@ -61,7 +61,7 @@ import globalize from 'globalize';
 
         for (let i = 0, length = devices.length; i < length; i++) {
             const device = devices[i];
-            const checkedAttribute = user.Policy.EnableAllDevices || -1 != user.Policy.EnabledDevices.indexOf(device.Id) ? ' checked="checked"' : '';
+            const checkedAttribute = user.Policy.EnableAllDevices || user.Policy.EnabledDevices.indexOf(device.Id) != -1 ? ' checked="checked"' : '';
             html += '<label><input type="checkbox" is="emby-checkbox" class="chkDevice" data-id="' + device.Id + '" ' + checkedAttribute + '><span>' + device.Name + ' - ' + device.AppName + '</span></label>';
         }
 

src/controllers/dashboard/users/usernew.js

@@ -89,7 +89,7 @@ import 'emby-checkbox';
             });
         }, function (response) {
             import('toast').then(({default: toast}) => {
-                toast(globalize.translate('DefaultErrorMessage'));
+                toast(globalize.translate('ErrorDefault'));
             });
 
             loading.hide();

src/controllers/dashboard/users/userparentalcontrol.js

@@ -67,7 +67,7 @@ import 'paper-icon-button-light';
 
         for (let i = 0, length = items.length; i < length; i++) {
             const item = items[i];
-            const checkedAttribute = -1 != user.Policy.BlockUnratedItems.indexOf(item.value) ? ' checked="checked"' : '';
+            const checkedAttribute = user.Policy.BlockUnratedItems.indexOf(item.value) != -1 ? ' checked="checked"' : '';
             html += '<label><input type="checkbox" is="emby-checkbox" class="chkUnratedItem" data-itemtype="' + item.value + '" type="checkbox"' + checkedAttribute + '><span>' + item.name + '</span></label>';
         }
 
@@ -201,7 +201,7 @@ import 'paper-icon-button-light';
             }).then(function (updatedSchedule) {
                 const schedules = getSchedulesFromPage(page);
 
-                if (-1 == index) {
+                if (index == -1) {
                     index = schedules.length;
                 }
 
@@ -228,14 +228,13 @@ import 'paper-icon-button-light';
     }
 
     function showBlockedTagPopup(page) {
-
         import('prompt').then(({default: prompt}) => {
             prompt({
                 label: globalize.translate('LabelTag')
             }).then(function (value) {
                 const tags = getBlockedTagsFromPage(page);
 
-                if (-1 == tags.indexOf(value)) {
+                if (tags.indexOf(value) == -1) {
                     tags.push(value);
                     loadBlockedTags(page, tags);
                 }

src/controllers/dashboard/users/userpasswordpage.js

@@ -14,7 +14,7 @@ import 'emby-button';
                 let showPasswordSection = true;
                 let showLocalAccessSection = false;
 
-                if ('Guest' == user.ConnectLinkType) {
+                if (user.ConnectLinkType == 'Guest') {
                     page.querySelector('.localAccessSection').classList.add('hide');
                     showPasswordSection = false;
                 } else if (user.HasConfiguredPassword) {
@@ -145,14 +145,14 @@ import 'emby-button';
         function resetPassword() {
             const msg = globalize.translate('PasswordResetConfirmation');
             import('confirm').then(({default: confirm}) => {
-                confirm(msg, globalize.translate('PasswordResetHeader')).then(function () {
+                confirm(msg, globalize.translate('HeaderResetPassword')).then(function () {
                     const userId = params.userId;
                     loading.show();
                     ApiClient.resetUserPassword(userId).then(function () {
                         loading.hide();
                         Dashboard.alert({
                             message: globalize.translate('PasswordResetComplete'),
-                            title: globalize.translate('PasswordResetHeader')
+                            title: globalize.translate('HeaderResetPassword')
                         });
                         loadUser(view, params);
                     });

src/controllers/dashboard/users/userprofilespage.js

@@ -129,7 +129,7 @@ import 'flexStyles';
         html += '</div>';
         html += '<div class="cardText cardText-secondary">';
         const lastSeen = getLastSeenText(user.LastActivityDate);
-        html += '' != lastSeen ? lastSeen : '&nbsp;';
+        html += lastSeen != '' ? lastSeen : '&nbsp;';
         html += '</div>';
         html += '</div>';
         html += '</div>';
@@ -155,102 +155,12 @@ import 'flexStyles';
         page.querySelector('.localUsers').innerHTML = getUserSectionHtml(users, true);
     }
 
-    function showPendingUserMenu(elem) {
-        const menuItems = [];
-        menuItems.push({
-            name: globalize.translate('ButtonCancel'),
-            id: 'delete',
-            icon: 'delete'
-        });
-
-        import('actionsheet').then(({default: actionsheet}) => {
-            const card = dom.parentWithClass(elem, 'card');
-            const page = dom.parentWithClass(card, 'page');
-            const id = card.getAttribute('data-id');
-            actionsheet.show({
-                items: menuItems,
-                positionTo: card,
-                callback: function (menuItemId) {
-                    switch (menuItemId) {
-                        case 'delete':
-                            cancelAuthorization(page, id);
-                    }
-                }
-            });
-        });
-    }
-
-    function getPendingUserHtml(user) {
-        let html = '';
-        html += "<div data-id='" + user.Id + "' class='card squareCard scalableCard squareCard-scalable'>";
-        html += '<div class="cardBox cardBox-bottompadded visualCardBox">';
-        html += '<div class="cardScalable visualCardBox-cardScalable">';
-        html += '<div class="cardPadder cardPadder-square"></div>';
-        html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="#">';
-
-        if (user.ImageUrl) {
-            html += '<div class="cardImage" style="background-image:url(\'' + user.ImageUrl + "');\">";
-            html += '</div>';
-        } else {
-            html += '<span class="cardImageIcon material-icons person"></span>';
-        }
-
-        html += '</a>';
-        html += '</div>';
-        html += '<div class="cardFooter visualCardBox-cardFooter">';
-        html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
-        html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu"><span class="material-icons more_vert"></span></button>';
-        html += '</div>';
-        html += '<div class="cardText" style="padding-top:10px;padding-bottom:10px;">';
-        html += user.UserName;
-        html += '</div>';
-        html += '</div>';
-        html += '</div>';
-        return html + '</div>';
-    }
-
-    function renderPendingGuests(page, users) {
-        if (users.length) {
-            page.querySelector('.sectionPendingGuests').classList.remove('hide');
-        } else {
-            page.querySelector('.sectionPendingGuests').classList.add('hide');
-        }
-
-        page.querySelector('.pending').innerHTML = users.map(getPendingUserHtml).join('');
-    }
-
-    // TODO cvium: maybe reuse for invitation system
-    function cancelAuthorization(page, id) {
-        loading.show();
-        ApiClient.ajax({
-            type: 'DELETE',
-            url: ApiClient.getUrl('Connect/Pending', {
-                Id: id
-            })
-        }).then(function () {
-            loadData(page);
-        });
-    }
-
     function loadData(page) {
         loading.show();
         ApiClient.getUsers().then(function (users) {
             renderUsers(page, users);
             loading.hide();
         });
-        // TODO cvium
-        renderPendingGuests(page, []);
-        // ApiClient.getJSON(ApiClient.getUrl("Connect/Pending")).then(function (pending) {
-        //
-        // });
-    }
-
-    function showInvitePopup(page) {
-        import('components/guestinviter/guestinviter').then(({default: guestinviter}) => {
-            guestinviter.show().then(function () {
-                loadData(page);
-            });
-        });
     }
 
     pageIdOn('pageinit', 'userProfilesPage', function () {
@@ -265,14 +175,8 @@ import 'flexStyles';
                 showUserMenu(btnUserMenu);
             }
         });
-        page.querySelector('.pending').addEventListener('click', function (e__r) {
-            const btnUserMenu = dom.parentWithClass(e__r.target, 'btnUserMenu');
-
-            if (btnUserMenu) {
-                showPendingUserMenu(btnUserMenu);
-            }
-        });
     });
+
     pageIdOn('pagebeforeshow', 'userProfilesPage', function () {
         loadData(this);
     });

src/controllers/edititemmetadata.js

@@ -1,31 +1,30 @@
-define(['loading', 'scripts/editorsidebar'], function (loading) {
-    'use strict';
+import loading from 'loading';
+import 'scripts/editorsidebar';
 
-    function reload(context, itemId) {
-        loading.show();
+function reload(context, itemId) {
+    loading.show();
 
-        if (itemId) {
-            require(['metadataEditor'], function ({default: metadataEditor}) {
-                metadataEditor.embed(context.querySelector('.editPageInnerContent'), itemId, ApiClient.serverInfo().Id);
-            });
-        } else {
-            context.querySelector('.editPageInnerContent').innerHTML = '';
-            loading.hide();
-        }
+    if (itemId) {
+        import('metadataEditor').then(({ default: metadataEditor }) => {
+            metadataEditor.embed(context.querySelector('.editPageInnerContent'), itemId, ApiClient.serverInfo().Id);
+        });
+    } else {
+        context.querySelector('.editPageInnerContent').innerHTML = '';
+        loading.hide();
     }
+}
 
-    return function (view, params) {
-        view.addEventListener('viewshow', function () {
-            reload(this, MetadataEditor.getCurrentItemId());
-        });
-        MetadataEditor.setCurrentItemId(null);
-        view.querySelector('.libraryTree').addEventListener('itemclicked', function (event) {
-            var data = event.detail;
+export default function (view, params) {
+    view.addEventListener('viewshow', function () {
+        reload(this, MetadataEditor.getCurrentItemId());
+    });
+    MetadataEditor.setCurrentItemId(null);
+    view.querySelector('.libraryTree').addEventListener('itemclicked', function (event) {
+        var data = event.detail;
 
-            if (data.id != MetadataEditor.getCurrentItemId()) {
-                MetadataEditor.setCurrentItemId(data.id);
-                reload(view, data.id);
-            }
-        });
-    };
-});
+        if (data.id != MetadataEditor.getCurrentItemId()) {
+            MetadataEditor.setCurrentItemId(data.id);
+            reload(view, data.id);
+        }
+    });
+}

src/controllers/favorites.js

@@ -1,5 +1,15 @@
-define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'apphost', 'layoutManager', 'focusManager', 'emby-itemscontainer', 'emby-scroller'], function (appRouter, cardBuilder, dom, globalize, connectionManager, appHost, layoutManager, focusManager) {
-    'use strict';
+import appRouter from 'appRouter';
+import cardBuilder from 'cardBuilder';
+import dom from 'dom';
+import globalize from 'globalize';
+import connectionManager from 'connectionManager';
+import appHost from 'apphost';
+import layoutManager from 'layoutManager';
+import focusManager from 'focusManager';
+import 'emby-itemscontainer';
+import 'emby-scroller';
+
+/* eslint-disable indent */
 
     function enableScrollX() {
         return true;
@@ -133,8 +143,8 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
 
     function getFetchDataFn(section) {
         return function () {
-            var apiClient = this.apiClient;
-            var options = {
+            const apiClient = this.apiClient;
+            const options = {
                 SortBy: (section.types, 'SeriesName,SortName'),
                 SortOrder: 'Ascending',
                 Filters: 'IsFavorite',
@@ -145,13 +155,13 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
                 EnableTotalRecordCount: false
             };
             options.Limit = 20;
-            var userId = apiClient.getCurrentUserId();
+            const userId = apiClient.getCurrentUserId();
 
-            if ('MusicArtist' === section.types) {
+            if (section.types === 'MusicArtist') {
                 return apiClient.getArtists(userId, options);
             }
 
-            if ('Person' === section.types) {
+            if (section.types === 'Person') {
                 return apiClient.getPeople(userId, options);
             }
 
@@ -170,17 +180,16 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
 
     function getItemsHtmlFn(section) {
         return function (items) {
-            var supportsImageAnalysis = appHost.supports('imageanalysis');
-            var cardLayout = (appHost.preferVisualCards || supportsImageAnalysis) && section.autoCardLayout && section.showTitle;
+            let cardLayout = appHost.preferVisualCards && section.autoCardLayout && section.showTitle;
             cardLayout = false;
-            var serverId = this.apiClient.serverId();
-            var leadingButtons = layoutManager.tv ? [{
+            const serverId = this.apiClient.serverId();
+            const leadingButtons = layoutManager.tv ? [{
                 name: globalize.translate('All'),
                 id: 'more',
                 icon: 'favorite',
                 routeUrl: getRouteUrl(section, serverId)
             }] : null;
-            var lines = 0;
+            let lines = 0;
 
             if (section.showTitle) {
                 lines++;
@@ -199,7 +208,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
                 preferThumb: section.preferThumb,
                 shape: section.shape,
                 centerText: section.centerText && !cardLayout,
-                overlayText: false !== section.overlayText,
+                overlayText: section.overlayText !== false,
                 showTitle: section.showTitle,
                 showYear: section.showYear,
                 showParentTitle: section.showParentTitle,
@@ -216,23 +225,12 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
         };
     }
 
-    function FavoritesTab(view, params) {
-        this.view = view;
-        this.params = params;
-        this.apiClient = connectionManager.currentApiClient();
-        this.sectionsContainer = view.querySelector('.sections');
-        createSections(this, this.sectionsContainer, this.apiClient);
-    }
-
     function createSections(instance, elem, apiClient) {
-        var i;
-        var length;
-        var sections = getSections();
-        var html = '';
+        const sections = getSections();
+        let html = '';
 
-        for (i = 0, length = sections.length; i < length; i++) {
-            var section = sections[i];
-            var sectionClass = 'verticalSection';
+        for (const section of sections) {
+            let sectionClass = 'verticalSection';
 
             if (!section.showTitle) {
                 sectionClass += ' verticalSection-extrabottompadding';
@@ -258,23 +256,32 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
         }
 
         elem.innerHTML = html;
-        var elems = elem.querySelectorAll('.itemsContainer');
+        const elems = elem.querySelectorAll('.itemsContainer');
 
-        for (i = 0, length = elems.length; i < length; i++) {
-            var itemsContainer = elems[i];
+        for (let i = 0, length = elems.length; i < length; i++) {
+            const itemsContainer = elems[i];
             itemsContainer.fetchData = getFetchDataFn(sections[i]).bind(instance);
             itemsContainer.getItemsHtml = getItemsHtmlFn(sections[i]).bind(instance);
             itemsContainer.parentContainer = dom.parentWithClass(itemsContainer, 'verticalSection');
         }
     }
 
-    FavoritesTab.prototype.onResume = function (options) {
-        var promises = (this.apiClient, []);
-        var view = this.view;
-        var elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
+class FavoritesTab {
+    constructor(view, params) {
+        this.view = view;
+        this.params = params;
+        this.apiClient = connectionManager.currentApiClient();
+        this.sectionsContainer = view.querySelector('.sections');
+        createSections(this, this.sectionsContainer, this.apiClient);
+    }
 
-        for (var i = 0, length = elems.length; i < length; i++) {
-            promises.push(elems[i].resume(options));
+    onResume(options) {
+        const promises = (this.apiClient, []);
+        const view = this.view;
+        const elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
+
+        for (const elem of elems) {
+            promises.push(elem.resume(options));
         }
 
         Promise.all(promises).then(function () {
@@ -282,30 +289,32 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
                 focusManager.autoFocus(view);
             }
         });
-    };
+    }
 
-    FavoritesTab.prototype.onPause = function () {
-        var elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
+    onPause() {
+        const elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
 
-        for (var i = 0, length = elems.length; i < length; i++) {
-            elems[i].pause();
+        for (const elem of elems) {
+            elem.pause();
         }
-    };
+    }
 
-    FavoritesTab.prototype.destroy = function () {
+    destroy() {
         this.view = null;
         this.params = null;
         this.apiClient = null;
-        var elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
+        const elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
 
-        for (var i = 0, length = elems.length; i < length; i++) {
-            elems[i].fetchData = null;
-            elems[i].getItemsHtml = null;
-            elems[i].parentContainer = null;
+        for (const elem of elems) {
+            elem.fetchData = null;
+            elem.getItemsHtml = null;
+            elem.parentContainer = null;
         }
 
         this.sectionsContainer = null;
-    };
+    }
+}
 
-    return FavoritesTab;
-});
+export default FavoritesTab;
+
+/* eslint-enable indent */

src/controllers/home.js

@@ -20,7 +20,7 @@ define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-
     }
 
     function getTabController(index) {
-        if (null == index) {
+        if (index == null) {
             throw new Error('index cannot be null');
         }
 
@@ -40,7 +40,7 @@ define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-
             var controller = instance.tabControllers[index];
 
             if (!controller) {
-                controller = new controllerFactory(instance.view.querySelector(".tabContent[data-index='" + index + "']"), instance.params);
+                controller = new controllerFactory.default(instance.view.querySelector(".tabContent[data-index='" + index + "']"), instance.params);
                 instance.tabControllers[index] = controller;
             }
 

src/controllers/hometab.js

@@ -1,27 +1,21 @@
-define(['userSettings', 'loading', 'connectionManager', 'apphost', 'layoutManager', 'focusManager', 'homeSections', 'emby-itemscontainer'], function (userSettings, loading, connectionManager, appHost, layoutManager, focusManager, homeSections) {
-    'use strict';
+import * as userSettings from 'userSettings';
+import loading from 'loading';
+import connectionManager from 'connectionManager';
+import focusManager from 'focusManager';
+import homeSections from 'homeSections';
+import 'emby-itemscontainer';
 
-    function HomeTab(view, params) {
+class HomeTab {
+    constructor(view, params) {
         this.view = view;
         this.params = params;
         this.apiClient = connectionManager.currentApiClient();
         this.sectionsContainer = view.querySelector('.sections');
         view.querySelector('.sections').addEventListener('settingschange', onHomeScreenSettingsChanged.bind(this));
     }
-
-    function onHomeScreenSettingsChanged() {
-        this.sectionsRendered = false;
-
-        if (!this.paused) {
-            this.onResume({
-                refresh: true
-            });
-        }
-    }
-
-    HomeTab.prototype.onResume = function (options) {
+    onResume(options) {
         if (this.sectionsRendered) {
-            var sectionsContainer = this.sectionsContainer;
+            const sectionsContainer = this.sectionsContainer;
 
             if (sectionsContainer) {
                 return homeSections.resume(sectionsContainer, options);
@@ -31,8 +25,8 @@ define(['userSettings', 'loading', 'connectionManager', 'apphost', 'layoutManage
         }
 
         loading.show();
-        var view = this.view;
-        var apiClient = this.apiClient;
+        const view = this.view;
+        const apiClient = this.apiClient;
         this.destroyHomeSections();
         this.sectionsRendered = true;
         return apiClient.getCurrentUser().then(function (user) {
@@ -44,31 +38,38 @@ define(['userSettings', 'loading', 'connectionManager', 'apphost', 'layoutManage
                 loading.hide();
             });
         });
-    };
-
-    HomeTab.prototype.onPause = function () {
-        var sectionsContainer = this.sectionsContainer;
+    }
+    onPause() {
+        const sectionsContainer = this.sectionsContainer;
 
         if (sectionsContainer) {
             homeSections.pause(sectionsContainer);
         }
-    };
-
-    HomeTab.prototype.destroy = function () {
+    }
+    destroy() {
         this.view = null;
         this.params = null;
         this.apiClient = null;
         this.destroyHomeSections();
         this.sectionsContainer = null;
-    };
-
-    HomeTab.prototype.destroyHomeSections = function () {
-        var sectionsContainer = this.sectionsContainer;
+    }
+    destroyHomeSections() {
+        const sectionsContainer = this.sectionsContainer;
 
         if (sectionsContainer) {
             homeSections.destroySections(sectionsContainer);
         }
-    };
+    }
+}
 
-    return HomeTab;
-});
+function onHomeScreenSettingsChanged() {
+    this.sectionsRendered = false;
+
+    if (!this.paused) {
+        this.onResume({
+            refresh: true
+        });
+    }
+}
+
+export default HomeTab;

src/controllers/list.js

@@ -1,6 +1,9 @@
 define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager', 'cardBuilder', 'loading', 'connectionManager', 'alphaNumericShortcuts', 'scroller', 'playbackManager', 'alphaPicker', 'emby-itemscontainer', 'emby-scroller'], function (globalize, listView, layoutManager, userSettings, focusManager, cardBuilder, loading, connectionManager, AlphaNumericShortcuts, scroller, playbackManager, AlphaPicker) {
     'use strict';
 
+    playbackManager = playbackManager.default || playbackManager;
+    loading = loading.default || loading;
+
     function getInitialLiveTvQuery(instance, params) {
         var query = {
             UserId: connectionManager.getApiClient(params.serverId).getCurrentUserId(),
@@ -9,7 +12,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             Limit: 300
         };
 
-        if ('Recordings' === params.type) {
+        if (params.type === 'Recordings') {
             query.IsInProgress = false;
         } else {
             query.HasAired = false;
@@ -19,39 +22,39 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             query.GenreIds = params.genreId;
         }
 
-        if ('true' === params.IsMovie) {
+        if (params.IsMovie === 'true') {
             query.IsMovie = true;
-        } else if ('false' === params.IsMovie) {
+        } else if (params.IsMovie === 'false') {
             query.IsMovie = false;
         }
 
-        if ('true' === params.IsSeries) {
+        if (params.IsSeries === 'true') {
             query.IsSeries = true;
-        } else if ('false' === params.IsSeries) {
+        } else if (params.IsSeries === 'false') {
             query.IsSeries = false;
         }
 
-        if ('true' === params.IsNews) {
+        if (params.IsNews === 'true') {
             query.IsNews = true;
-        } else if ('false' === params.IsNews) {
+        } else if (params.IsNews === 'false') {
             query.IsNews = false;
         }
 
-        if ('true' === params.IsSports) {
+        if (params.IsSports === 'true') {
             query.IsSports = true;
-        } else if ('false' === params.IsSports) {
+        } else if (params.IsSports === 'false') {
             query.IsSports = false;
         }
 
-        if ('true' === params.IsKids) {
+        if (params.IsKids === 'true') {
             query.IsKids = true;
-        } else if ('false' === params.IsKids) {
+        } else if (params.IsKids === 'false') {
             query.IsKids = false;
         }
 
-        if ('true' === params.IsAiring) {
+        if (params.IsAiring === 'true') {
             query.IsAiring = true;
-        } else if ('false' === params.IsAiring) {
+        } else if (params.IsAiring === 'false') {
             query.IsAiring = false;
         }
 
@@ -181,13 +184,13 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             var btnSortIcon = instance.btnSortIcon;
 
             if (btnSortIcon) {
-                setSortButtonIcon(btnSortIcon, 'Descending' === values.sortOrder ? 'arrow_downward' : 'arrow_upward');
+                setSortButtonIcon(btnSortIcon, values.sortOrder === 'Descending' ? 'arrow_downward' : 'arrow_upward');
             }
         }
     }
 
     function updateItemsContainerForViewType(instance) {
-        if ('list' === instance.getViewSettings().imageType) {
+        if (instance.getViewSettings().imageType === 'list') {
             instance.itemsContainer.classList.remove('vertical-wrap');
             instance.itemsContainer.classList.add('vertical-list');
         } else {
@@ -203,11 +206,11 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             if (alphaPicker) {
                 var values = instance.getSortValues();
 
-                if (null == numItems) {
+                if (numItems == null) {
                     numItems = 100;
                 }
 
-                if ('SortName' === values.sortBy && 'Ascending' === values.sortOrder && numItems > 40) {
+                if (values.sortBy === 'SortName' && values.sortOrder === 'Ascending' && numItems > 40) {
                     alphaPicker.classList.remove('hide');
                     instance.itemsContainer.parentNode.classList.add('padded-right-withalphapicker');
                 } else {
@@ -222,19 +225,19 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         var apiClient = connectionManager.getApiClient(params.serverId);
 
         instance.queryRecursive = false;
-        if ('Recordings' === params.type) {
+        if (params.type === 'Recordings') {
             return apiClient.getLiveTvRecordings(getInitialLiveTvQuery(instance, params));
         }
 
-        if ('Programs' === params.type) {
-            if ('true' === params.IsAiring) {
+        if (params.type === 'Programs') {
+            if (params.IsAiring === 'true') {
                 return apiClient.getLiveTvRecommendedPrograms(getInitialLiveTvQuery(instance, params));
             }
 
             return apiClient.getLiveTvPrograms(getInitialLiveTvQuery(instance, params));
         }
 
-        if ('nextup' === params.type) {
+        if (params.type === 'nextup') {
             return apiClient.getNextUpEpisodes(modifyQueryWithFilters(instance, {
                 Limit: limit,
                 Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo',
@@ -250,9 +253,9 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             instance.queryRecursive = true;
             var method = 'getItems';
 
-            if ('MusicArtist' === params.type) {
+            if (params.type === 'MusicArtist') {
                 method = 'getArtists';
-            } else if ('Person' === params.type) {
+            } else if (params.type === 'Person') {
                 method = 'getPeople';
             }
 
@@ -261,15 +264,15 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
                 Limit: limit,
                 Fields: 'PrimaryImageAspectRatio,SortName',
                 ImageTypeLimit: 1,
-                IncludeItemTypes: 'MusicArtist' === params.type || 'Person' === params.type ? null : params.type,
+                IncludeItemTypes: params.type === 'MusicArtist' || params.type === 'Person' ? null : params.type,
                 Recursive: true,
-                IsFavorite: 'true' === params.IsFavorite || null,
+                IsFavorite: params.IsFavorite === 'true' || null,
                 ArtistIds: params.artistId || null,
                 SortBy: sortBy
             }));
         }
 
-        if ('Genre' === item.Type || 'MusicGenre' === item.Type || 'Studio' === item.Type || 'Person' === item.Type) {
+        if (item.Type === 'Genre' || item.Type === 'MusicGenre' || item.Type === 'Studio' || item.Type === 'Person') {
             instance.queryRecursive = true;
             var query = {
                 StartIndex: startIndex,
@@ -280,25 +283,25 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
                 SortBy: sortBy
             };
 
-            if ('Studio' === item.Type) {
+            if (item.Type === 'Studio') {
                 query.StudioIds = item.Id;
-            } else if ('Genre' === item.Type || 'MusicGenre' === item.Type) {
+            } else if (item.Type === 'Genre' || item.Type === 'MusicGenre') {
                 query.GenreIds = item.Id;
-            } else if ('Person' === item.Type) {
+            } else if (item.Type === 'Person') {
                 query.PersonIds = item.Id;
             }
 
-            if ('MusicGenre' === item.Type) {
+            if (item.Type === 'MusicGenre') {
                 query.IncludeItemTypes = 'MusicAlbum';
-            } else if ('GameGenre' === item.Type) {
+            } else if (item.Type === 'GameGenre') {
                 query.IncludeItemTypes = 'Game';
-            } else if ('movies' === item.CollectionType) {
+            } else if (item.CollectionType === 'movies') {
                 query.IncludeItemTypes = 'Movie';
-            } else if ('tvshows' === item.CollectionType) {
+            } else if (item.CollectionType === 'tvshows') {
                 query.IncludeItemTypes = 'Series';
-            } else if ('Genre' === item.Type) {
+            } else if (item.Type === 'Genre') {
                 query.IncludeItemTypes = 'Movie,Series,Video';
-            } else if ('Person' === item.Type) {
+            } else if (item.Type === 'Person') {
                 query.IncludeItemTypes = params.type;
             }
 
@@ -316,7 +319,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
     }
 
     function getItem(params) {
-        if ('Recordings' === params.type || 'Programs' === params.type || 'nextup' === params.type) {
+        if (params.type === 'Recordings' || params.type === 'Programs' || params.type === 'nextup') {
             return Promise.resolve(null);
         }
 
@@ -412,7 +415,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
     function ItemsView(view, params) {
         function fetchData() {
             return getItems(self, params, self.currentItem).then(function (result) {
-                if (null == self.totalItemCount) {
+                if (self.totalItemCount == null) {
                     self.totalItemCount = result.Items ? result.Items.length : result.length;
                 }
 
@@ -424,7 +427,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         function getItemsHtml(items) {
             var settings = self.getViewSettings();
 
-            if ('list' === settings.imageType) {
+            if (settings.imageType === 'list') {
                 return listView.getListViewHtml({
                     items: items
                 });
@@ -438,24 +441,24 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             var item = self.currentItem;
             var lines = settings.showTitle ? 2 : 0;
 
-            if ('banner' === settings.imageType) {
+            if (settings.imageType === 'banner') {
                 shape = 'banner';
-            } else if ('disc' === settings.imageType) {
+            } else if (settings.imageType === 'disc') {
                 shape = 'square';
                 preferDisc = true;
-            } else if ('logo' === settings.imageType) {
+            } else if (settings.imageType === 'logo') {
                 shape = 'backdrop';
                 preferLogo = true;
-            } else if ('thumb' === settings.imageType) {
+            } else if (settings.imageType === 'thumb') {
                 shape = 'backdrop';
                 preferThumb = true;
-            } else if ('nextup' === params.type) {
+            } else if (params.type === 'nextup') {
                 shape = 'backdrop';
-                preferThumb = 'thumb' === settings.imageType;
-            } else if ('Programs' === params.type || 'Recordings' === params.type) {
-                shape = 'true' === params.IsMovie ? 'portrait' : 'autoVertical';
-                preferThumb = 'true' !== params.IsMovie ? 'auto' : false;
-                defaultShape = 'true' === params.IsMovie ? 'portrait' : 'backdrop';
+                preferThumb = settings.imageType === 'thumb';
+            } else if (params.type === 'Programs' || params.type === 'Recordings') {
+                shape = params.IsMovie === 'true' ? 'portrait' : 'autoVertical';
+                preferThumb = params.IsMovie !== 'true' ? 'auto' : false;
+                defaultShape = params.IsMovie === 'true' ? 'portrait' : 'backdrop';
             } else {
                 shape = 'autoVertical';
             }
@@ -473,46 +476,46 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
                 overlayMoreButton: true,
                 overlayText: !settings.showTitle,
                 defaultShape: defaultShape,
-                action: 'Audio' === params.type ? 'playallfromhere' : null
+                action: params.type === 'Audio' ? 'playallfromhere' : null
             };
 
-            if ('nextup' === params.type) {
+            if (params.type === 'nextup') {
                 posterOptions.showParentTitle = settings.showTitle;
-            } else if ('Person' === params.type) {
+            } else if (params.type === 'Person') {
                 posterOptions.showYear = false;
                 posterOptions.showParentTitle = false;
                 lines = 1;
-            } else if ('Audio' === params.type) {
+            } else if (params.type === 'Audio') {
                 posterOptions.showParentTitle = settings.showTitle;
-            } else if ('MusicAlbum' === params.type) {
+            } else if (params.type === 'MusicAlbum') {
                 posterOptions.showParentTitle = settings.showTitle;
-            } else if ('Episode' === params.type) {
+            } else if (params.type === 'Episode') {
                 posterOptions.showParentTitle = settings.showTitle;
-            } else if ('MusicArtist' === params.type) {
+            } else if (params.type === 'MusicArtist') {
                 posterOptions.showYear = false;
                 lines = 1;
-            } else if ('Programs' === params.type) {
+            } else if (params.type === 'Programs') {
                 lines = settings.showTitle ? 1 : 0;
-                var showParentTitle = settings.showTitle && 'true' !== params.IsMovie;
+                var showParentTitle = settings.showTitle && params.IsMovie !== 'true';
 
                 if (showParentTitle) {
                     lines++;
                 }
 
-                var showAirTime = settings.showTitle && 'Recordings' !== params.type;
+                var showAirTime = settings.showTitle && params.type !== 'Recordings';
 
                 if (showAirTime) {
                     lines++;
                 }
 
-                var showYear = settings.showTitle && 'true' === params.IsMovie && 'Recordings' === params.type;
+                var showYear = settings.showTitle && params.IsMovie === 'true' && params.type === 'Recordings';
 
                 if (showYear) {
                     lines++;
                 }
 
                 posterOptions = Object.assign(posterOptions, {
-                    inheritThumb: 'Recordings' === params.type,
+                    inheritThumb: params.type === 'Recordings',
                     context: 'livetv',
                     showParentTitle: showParentTitle,
                     showAirTime: showAirTime,
@@ -529,7 +532,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             posterOptions.lines = lines;
             posterOptions.items = items;
 
-            if (item && 'folders' === item.CollectionType) {
+            if (item && item.CollectionType === 'folders') {
                 posterOptions.context = 'folders';
             }
 
@@ -561,7 +564,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         function setTitle(item) {
             Emby.Page.setTitle(getTitle(item) || '');
 
-            if (item && 'playlists' === item.CollectionType) {
+            if (item && item.CollectionType === 'playlists') {
                 hideOrShowAll(view.querySelectorAll('.btnNewItem'), false);
             } else {
                 hideOrShowAll(view.querySelectorAll('.btnNewItem'), true);
@@ -569,43 +572,43 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         }
 
         function getTitle(item) {
-            if ('Recordings' === params.type) {
+            if (params.type === 'Recordings') {
                 return globalize.translate('Recordings');
             }
 
-            if ('Programs' === params.type) {
-                if ('true' === params.IsMovie) {
+            if (params.type === 'Programs') {
+                if (params.IsMovie === 'true') {
                     return globalize.translate('Movies');
                 }
 
-                if ('true' === params.IsSports) {
+                if (params.IsSports === 'true') {
                     return globalize.translate('Sports');
                 }
 
-                if ('true' === params.IsKids) {
+                if (params.IsKids === 'true') {
                     return globalize.translate('HeaderForKids');
                 }
 
-                if ('true' === params.IsAiring) {
+                if (params.IsAiring === 'true') {
                     return globalize.translate('HeaderOnNow');
                 }
 
-                if ('true' === params.IsSeries) {
+                if (params.IsSeries === 'true') {
                     return globalize.translate('Shows');
                 }
 
-                if ('true' === params.IsNews) {
+                if (params.IsNews === 'true') {
                     return globalize.translate('News');
                 }
 
                 return globalize.translate('Programs');
             }
 
-            if ('nextup' === params.type) {
+            if (params.type === 'nextup') {
                 return globalize.translate('NextUp');
             }
 
-            if ('favoritemovies' === params.type) {
+            if (params.type === 'favoritemovies') {
                 return globalize.translate('FavoriteMovies');
             }
 
@@ -613,35 +616,35 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
                 return item.Name;
             }
 
-            if ('Movie' === params.type) {
+            if (params.type === 'Movie') {
                 return globalize.translate('Movies');
             }
 
-            if ('Series' === params.type) {
+            if (params.type === 'Series') {
                 return globalize.translate('Shows');
             }
 
-            if ('Season' === params.type) {
+            if (params.type === 'Season') {
                 return globalize.translate('Seasons');
             }
 
-            if ('Episode' === params.type) {
+            if (params.type === 'Episode') {
                 return globalize.translate('Episodes');
             }
 
-            if ('MusicArtist' === params.type) {
+            if (params.type === 'MusicArtist') {
                 return globalize.translate('Artists');
             }
 
-            if ('MusicAlbum' === params.type) {
+            if (params.type === 'MusicAlbum') {
                 return globalize.translate('Albums');
             }
 
-            if ('Audio' === params.type) {
+            if (params.type === 'Audio') {
                 return globalize.translate('Songs');
             }
 
-            if ('Video' === params.type) {
+            if (params.type === 'Video') {
                 return globalize.translate('Videos');
             }
 
@@ -700,11 +703,11 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
 
         if (params.parentId) {
             this.itemsContainer.setAttribute('data-parentid', params.parentId);
-        } else if ('nextup' === params.type) {
+        } else if (params.type === 'nextup') {
             this.itemsContainer.setAttribute('data-monitor', 'videoplayback');
-        } else if ('favoritemovies' === params.type) {
+        } else if (params.type === 'favoritemovies') {
             this.itemsContainer.setAttribute('data-monitor', 'markfavorite');
-        } else if ('Programs' === params.type) {
+        } else if (params.type === 'Programs') {
             this.itemsContainer.setAttribute('data-refreshinterval', '300000');
         }
 
@@ -737,7 +740,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             var sortButton = sortButtons[i];
             sortButton.addEventListener('click', showSortMenu.bind(this));
 
-            if ('nextup' !== params.type) {
+            if (params.type !== 'nextup') {
                 sortButton.classList.remove('hide');
             }
         }
@@ -772,19 +775,19 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
                     }
                 });
 
-                if (!isRestored && item && 'PhotoAlbum' !== item.Type) {
+                if (!isRestored && item && item.Type !== 'PhotoAlbum') {
                     initAlphaPicker();
                 }
 
                 var itemType = item ? item.Type : null;
 
-                if ('MusicGenre' === itemType || 'Programs' !== params.type && 'Channel' !== itemType) {
+                if (itemType === 'MusicGenre' || params.type !== 'Programs' && itemType !== 'Channel') {
                     hideOrShowAll(view.querySelectorAll('.btnPlay'), false);
                 } else {
                     hideOrShowAll(view.querySelectorAll('.btnPlay'), true);
                 }
 
-                if ('MusicGenre' === itemType || 'Programs' !== params.type && 'nextup' !== params.type && 'Channel' !== itemType) {
+                if (itemType === 'MusicGenre' || params.type !== 'Programs' && params.type !== 'nextup' && itemType !== 'Channel') {
                     hideOrShowAll(view.querySelectorAll('.btnShuffle'), false);
                 } else {
                     hideOrShowAll(view.querySelectorAll('.btnShuffle'), true);
@@ -845,14 +848,14 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
     ItemsView.prototype.getFilters = function () {
         var basekey = this.getSettingsKey();
         return {
-            IsPlayed: 'true' === userSettings.getFilter(basekey + '-filter-IsPlayed'),
-            IsUnplayed: 'true' === userSettings.getFilter(basekey + '-filter-IsUnplayed'),
-            IsFavorite: 'true' === userSettings.getFilter(basekey + '-filter-IsFavorite'),
-            IsResumable: 'true' === userSettings.getFilter(basekey + '-filter-IsResumable'),
-            Is4K: 'true' === userSettings.getFilter(basekey + '-filter-Is4K'),
-            IsHD: 'true' === userSettings.getFilter(basekey + '-filter-IsHD'),
-            IsSD: 'true' === userSettings.getFilter(basekey + '-filter-IsSD'),
-            Is3D: 'true' === userSettings.getFilter(basekey + '-filter-Is3D'),
+            IsPlayed: userSettings.getFilter(basekey + '-filter-IsPlayed') === 'true',
+            IsUnplayed: userSettings.getFilter(basekey + '-filter-IsUnplayed') === 'true',
+            IsFavorite: userSettings.getFilter(basekey + '-filter-IsFavorite') === 'true',
+            IsResumable: userSettings.getFilter(basekey + '-filter-IsResumable') === 'true',
+            Is4K: userSettings.getFilter(basekey + '-filter-Is4K') === 'true',
+            IsHD: userSettings.getFilter(basekey + '-filter-IsHD') === 'true',
+            IsSD: userSettings.getFilter(basekey + '-filter-IsSD') === 'true',
+            Is3D: userSettings.getFilter(basekey + '-filter-Is3D') === 'true',
             VideoTypes: userSettings.getFilter(basekey + '-filter-VideoTypes'),
             SeriesStatus: userSettings.getFilter(basekey + '-filter-SeriesStatus'),
             HasSubtitles: userSettings.getFilter(basekey + '-filter-HasSubtitles'),
@@ -868,7 +871,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         var basekey = this.getSettingsKey();
         return {
             sortBy: userSettings.getFilter(basekey + '-sortby') || this.getDefaultSortBy(),
-            sortOrder: 'Descending' === userSettings.getFilter(basekey + '-sortorder') ? 'Descending' : 'Ascending'
+            sortOrder: userSettings.getFilter(basekey + '-sortorder') === 'Descending' ? 'Descending' : 'Ascending'
         };
     };
 
@@ -887,7 +890,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         var sortBy = [];
         var params = this.params;
 
-        if ('Programs' === params.type) {
+        if (params.type === 'Programs') {
             sortBy.push({
                 name: globalize.translate('AirDate'),
                 value: 'StartDate,SortName'
@@ -912,7 +915,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
             sortBy.push(option);
         }
 
-        if ('Programs' !== params.type) {
+        if (params.type !== 'Programs') {
             sortBy.push({
                 name: globalize.translate('DateAdded'),
                 value: 'DateCreated,SortName'
@@ -955,7 +958,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
     };
 
     ItemsView.prototype.getNameSortOption = function (params) {
-        if ('Episode' === params.type) {
+        if (params.type === 'Episode') {
             return {
                 name: globalize.translate('Name'),
                 value: 'SeriesName,SortName'
@@ -969,7 +972,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
     };
 
     ItemsView.prototype.getPlayCountSortOption = function () {
-        if ('Programs' === this.params.type) {
+        if (this.params.type === 'Programs') {
             return null;
         }
 
@@ -980,7 +983,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
     };
 
     ItemsView.prototype.getDatePlayedSortOption = function () {
-        if ('Programs' === this.params.type) {
+        if (this.params.type === 'Programs') {
             return null;
         }
 
@@ -991,7 +994,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
     };
 
     ItemsView.prototype.getCriticRatingSortOption = function () {
-        if ('Programs' === this.params.type) {
+        if (this.params.type === 'Programs') {
             return null;
         }
 
@@ -1012,8 +1015,8 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         var filters = [];
         var params = this.params;
 
-        if (!('nextup' === params.type)) {
-            if ('Programs' === params.type) {
+        if (!(params.type === 'nextup')) {
+            if (params.type === 'Programs') {
                 filters.push('Genres');
             } else {
                 filters.push('IsUnplayed');
@@ -1081,7 +1084,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         var item = (this.params, this.currentItem);
         var fields = ['showTitle'];
 
-        if (!item || 'PhotoAlbum' !== item.Type && 'ChannelFolderItem' !== item.Type) {
+        if (!item || item.Type !== 'PhotoAlbum' && item.Type !== 'ChannelFolderItem') {
             fields.push('imageType');
         }
 
@@ -1095,25 +1098,25 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         var item = this.currentItem;
         var showTitle = userSettings.get(basekey + '-showTitle');
 
-        if ('true' === showTitle) {
+        if (showTitle === 'true') {
             showTitle = true;
-        } else if ('false' === showTitle) {
+        } else if (showTitle === 'false') {
             showTitle = false;
-        } else if ('Programs' === params.type || 'Recordings' === params.type || 'Person' === params.type || 'nextup' === params.type || 'Audio' === params.type || 'MusicAlbum' === params.type || 'MusicArtist' === params.type) {
+        } else if (params.type === 'Programs' || params.type === 'Recordings' || params.type === 'Person' || params.type === 'nextup' || params.type === 'Audio' || params.type === 'MusicAlbum' || params.type === 'MusicArtist') {
             showTitle = true;
-        } else if (item && 'PhotoAlbum' !== item.Type) {
+        } else if (item && item.Type !== 'PhotoAlbum') {
             showTitle = true;
         }
 
         var imageType = userSettings.get(basekey + '-imageType');
 
-        if (!imageType && 'nextup' === params.type) {
+        if (!imageType && params.type === 'nextup') {
             imageType = 'thumb';
         }
 
         return {
             showTitle: showTitle,
-            showYear: 'false' !== userSettings.get(basekey + '-showYear'),
+            showYear: userSettings.get(basekey + '-showYear') !== 'false',
             imageType: imageType || 'primary',
             viewType: userSettings.get(basekey + '-viewType') || 'images'
         };
@@ -1122,11 +1125,11 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
     ItemsView.prototype.getItemTypes = function () {
         var params = this.params;
 
-        if ('nextup' === params.type) {
+        if (params.type === 'nextup') {
             return ['Episode'];
         }
 
-        if ('Programs' === params.type) {
+        if (params.type === 'Programs') {
             return ['Program'];
         }
 

src/controllers/livetv/livetvchannels.js

@@ -1,6 +1,9 @@
 define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'userSettings', 'emby-itemscontainer'], function (cardBuilder, imageLoader, libraryBrowser, loading, events, userSettings) {
     'use strict';
 
+    loading = loading.default || loading;
+    libraryBrowser = libraryBrowser.default || libraryBrowser;
+
     return function (view, params, tabContent) {
         function getPageData() {
             if (!pageData) {

src/controllers/livetv/livetvrecordings.js

@@ -1,6 +1,8 @@
 define(['layoutManager', 'loading', 'cardBuilder', 'apphost', 'imageLoader', 'scripts/livetvcomponents', 'listViewStyle', 'emby-itemscontainer'], function (layoutManager, loading, cardBuilder, appHost, imageLoader) {
     'use strict';
 
+    loading = loading.default || loading;
+
     function renderRecordings(elem, recordings, cardOptions, scrollX) {
         if (!elem) {
             return;
@@ -24,7 +26,6 @@ define(['layoutManager', 'loading', 'cardBuilder', 'apphost', 'imageLoader', 'sc
             recordingItems.classList.add('vertical-wrap');
         }
 
-        appHost.supports('imageanalysis');
         recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
             items: recordings,
             shape: scrollX ? 'autooverflow' : 'auto',

src/controllers/livetv/livetvschedule.js

@@ -1,6 +1,8 @@
 define(['layoutManager', 'cardBuilder', 'apphost', 'imageLoader', 'loading', 'scripts/livetvcomponents', 'emby-button', 'emby-itemscontainer'], function (layoutManager, cardBuilder, appHost, imageLoader, loading) {
     'use strict';
 
+    loading = loading.default || loading;
+
     function enableScrollX() {
         return !layoutManager.desktop;
     }
@@ -30,17 +32,14 @@ define(['layoutManager', 'cardBuilder', 'apphost', 'imageLoader', 'loading', 'sc
             recordingItems.classList.add('vertical-wrap');
         }
 
-        var supportsImageAnalysis = appHost.supports('imageanalysis');
-        var cardLayout = appHost.preferVisualCards || supportsImageAnalysis;
-        cardLayout = false;
         recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
             items: recordings,
             shape: enableScrollX() ? 'autooverflow' : 'auto',
             showTitle: true,
             showParentTitle: true,
             coverImage: true,
-            cardLayout: cardLayout,
-            centerText: !cardLayout,
+            cardLayout: false,
+            centerText: true,
             allowBottomPadding: !enableScrollX(),
             preferThumb: 'auto'
         }, cardOptions || {}));

src/controllers/livetv/livetvseriestimers.js

@@ -1,9 +1,10 @@
 define(['datetime', 'cardBuilder', 'imageLoader', 'apphost', 'loading', 'paper-icon-button-light', 'emby-button'], function (datetime, cardBuilder, imageLoader, appHost, loading) {
     'use strict';
 
+    loading = loading.default || loading;
+
     function renderTimers(context, timers) {
         var html = '';
-        appHost.supports('imageanalysis');
         html += cardBuilder.getCardsHtml({
             items: timers,
             shape: 'auto',

src/controllers/livetv/livetvsuggested.js

@@ -1,6 +1,8 @@
 define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize', 'libraryBrowser', 'mainTabsManager', 'cardBuilder', 'apphost', 'imageLoader', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (layoutManager, userSettings, inputManager, loading, globalize, libraryBrowser, mainTabsManager, cardBuilder, appHost, imageLoader) {
     'use strict';
 
+    loading = loading.default || loading;
+
     function enableScrollX() {
         return !layoutManager.desktop;
     }
@@ -142,9 +144,9 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
             coverImage: true,
             overlayText: false,
             lazy: true,
-            overlayPlayButton: 'play' === overlayButton,
-            overlayMoreButton: 'more' === overlayButton,
-            overlayInfoButton: 'info' === overlayButton,
+            overlayPlayButton: overlayButton === 'play',
+            overlayMoreButton: overlayButton === 'more',
+            overlayInfoButton: overlayButton === 'info',
             allowBottomPadding: !enableScrollX(),
             showAirTime: true,
             showAirDateTime: true
@@ -261,7 +263,7 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
             require(depends, function (controllerFactory) {
                 var tabContent;
 
-                if (0 == index) {
+                if (index == 0) {
                     tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
                     self.tabContent = tabContent;
                 }
@@ -271,9 +273,9 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
                 if (!controller) {
                     tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
 
-                    if (0 === index) {
+                    if (index === 0) {
                         controller = self;
-                    } else if (6 === index) {
+                    } else if (index === 6) {
                         controller = new controllerFactory(view, tabContent, {
                             collectionType: 'livetv'
                         });
@@ -305,8 +307,8 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
             getTabController(page, index, function (controller) {
                 initialTabIndex = null;
 
-                if (-1 == renderedTabs.indexOf(index)) {
-                    if (1 === index) {
+                if (renderedTabs.indexOf(index) == -1) {
+                    if (index === 1) {
                         renderedTabs.push(index);
                     }
 

src/controllers/livetvguideprovider.js

@@ -1,30 +1,30 @@
-define(['events', 'loading', 'globalize'], function (events, loading, globalize) {
-    'use strict';
+import events from 'events';
+import loading from 'loading';
+import globalize from 'globalize';
 
-    function onListingsSubmitted() {
-        Dashboard.navigate('livetvstatus.html');
-    }
+function onListingsSubmitted() {
+    Dashboard.navigate('livetvstatus.html');
+}
 
-    function init(page, type, providerId) {
-        var url = 'components/tvproviders/' + type + '.js';
+function init(page, type, providerId) {
+    const url = 'components/tvproviders/' + type + '.js';
 
-        require([url], function (factory) {
-            var instance = new factory(page, providerId, {});
-            events.on(instance, 'submitted', onListingsSubmitted);
-            instance.init();
-        });
-    }
-
-    function loadTemplate(page, type, providerId) {
-        require(['text!./components/tvproviders/' + type + '.template.html'], function (html) {
-            page.querySelector('.providerTemplate').innerHTML = globalize.translateHtml(html);
-            init(page, type, providerId);
-        });
-    }
-
-    pageIdOn('pageshow', 'liveTvGuideProviderPage', function () {
-        loading.show();
-        var providerId = getParameterByName('id');
-        loadTemplate(this, getParameterByName('type'), providerId);
+    import(url).then(({default: factory}) => {
+        const instance = new factory(page, providerId, {});
+        events.on(instance, 'submitted', onListingsSubmitted);
+        instance.init();
     });
+}
+
+function loadTemplate(page, type, providerId) {
+    import('text!./../components/tvproviders/' + type + '.template.html').then(({default: html}) => {
+        page.querySelector('.providerTemplate').innerHTML = globalize.translateHtml(html);
+        init(page, type, providerId);
+    });
+}
+
+pageIdOn('pageshow', 'liveTvGuideProviderPage', function () {
+    loading.show();
+    const providerId = getParameterByName('id');
+    loadTemplate(this, getParameterByName('type'), providerId);
 });

src/controllers/livetvsettings.js

@@ -1,65 +1,68 @@
-define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading, globalize) {
-    'use strict';
+import $ from 'jQuery';
+import loading from 'loading';
+import globalize from 'globalize';
+import 'emby-button';
 
-    function loadPage(page, config) {
-        $('.liveTvSettingsForm', page).show();
-        $('.noLiveTvServices', page).hide();
-        $('#selectGuideDays', page).val(config.GuideDays || '');
-        $('#txtPrePaddingMinutes', page).val(config.PrePaddingSeconds / 60);
-        $('#txtPostPaddingMinutes', page).val(config.PostPaddingSeconds / 60);
-        page.querySelector('#txtRecordingPath').value = config.RecordingPath || '';
-        page.querySelector('#txtMovieRecordingPath').value = config.MovieRecordingPath || '';
-        page.querySelector('#txtSeriesRecordingPath').value = config.SeriesRecordingPath || '';
-        page.querySelector('#txtPostProcessor').value = config.RecordingPostProcessor || '';
-        page.querySelector('#txtPostProcessorArguments').value = config.RecordingPostProcessorArguments || '';
-        loading.hide();
-    }
+function loadPage(page, config) {
+    $('.liveTvSettingsForm', page).show();
+    $('.noLiveTvServices', page).hide();
+    $('#selectGuideDays', page).val(config.GuideDays || '');
+    $('#txtPrePaddingMinutes', page).val(config.PrePaddingSeconds / 60);
+    $('#txtPostPaddingMinutes', page).val(config.PostPaddingSeconds / 60);
+    page.querySelector('#txtRecordingPath').value = config.RecordingPath || '';
+    page.querySelector('#txtMovieRecordingPath').value = config.MovieRecordingPath || '';
+    page.querySelector('#txtSeriesRecordingPath').value = config.SeriesRecordingPath || '';
+    page.querySelector('#txtPostProcessor').value = config.RecordingPostProcessor || '';
+    page.querySelector('#txtPostProcessorArguments').value = config.RecordingPostProcessorArguments || '';
+    loading.hide();
+}
 
-    function onSubmit() {
-        loading.show();
-        var form = this;
-        ApiClient.getNamedConfiguration('livetv').then(function (config) {
-            config.GuideDays = $('#selectGuideDays', form).val() || null;
-            var recordingPath = form.querySelector('#txtRecordingPath').value || null;
-            var movieRecordingPath = form.querySelector('#txtMovieRecordingPath').value || null;
-            var seriesRecordingPath = form.querySelector('#txtSeriesRecordingPath').value || null;
-            var recordingPathChanged = recordingPath != config.RecordingPath || movieRecordingPath != config.MovieRecordingPath || seriesRecordingPath != config.SeriesRecordingPath;
-            config.RecordingPath = recordingPath;
-            config.MovieRecordingPath = movieRecordingPath;
-            config.SeriesRecordingPath = seriesRecordingPath;
-            config.RecordingEncodingFormat = 'mkv';
-            config.PrePaddingSeconds = 60 * $('#txtPrePaddingMinutes', form).val();
-            config.PostPaddingSeconds = 60 * $('#txtPostPaddingMinutes', form).val();
-            config.RecordingPostProcessor = $('#txtPostProcessor', form).val();
-            config.RecordingPostProcessorArguments = $('#txtPostProcessorArguments', form).val();
-            ApiClient.updateNamedConfiguration('livetv', config).then(function () {
-                Dashboard.processServerConfigurationUpdateResult();
-                showSaveMessage(recordingPathChanged);
-            });
+function onSubmit() {
+    loading.show();
+    const form = this;
+    ApiClient.getNamedConfiguration('livetv').then(function (config) {
+        config.GuideDays = $('#selectGuideDays', form).val() || null;
+        const recordingPath = form.querySelector('#txtRecordingPath').value || null;
+        const movieRecordingPath = form.querySelector('#txtMovieRecordingPath').value || null;
+        const seriesRecordingPath = form.querySelector('#txtSeriesRecordingPath').value || null;
+        const recordingPathChanged = recordingPath != config.RecordingPath || movieRecordingPath != config.MovieRecordingPath || seriesRecordingPath != config.SeriesRecordingPath;
+        config.RecordingPath = recordingPath;
+        config.MovieRecordingPath = movieRecordingPath;
+        config.SeriesRecordingPath = seriesRecordingPath;
+        config.RecordingEncodingFormat = 'mkv';
+        config.PrePaddingSeconds = 60 * $('#txtPrePaddingMinutes', form).val();
+        config.PostPaddingSeconds = 60 * $('#txtPostPaddingMinutes', form).val();
+        config.RecordingPostProcessor = $('#txtPostProcessor', form).val();
+        config.RecordingPostProcessorArguments = $('#txtPostProcessorArguments', form).val();
+        ApiClient.updateNamedConfiguration('livetv', config).then(function () {
+            Dashboard.processServerConfigurationUpdateResult();
+            showSaveMessage(recordingPathChanged);
         });
-        return false;
+    });
+    return false;
+}
+
+function showSaveMessage(recordingPathChanged) {
+    let msg = '';
+
+    if (recordingPathChanged) {
+        msg += globalize.translate('MessageChangeRecordingPath');
     }
 
-    function showSaveMessage(recordingPathChanged) {
-        var msg = '';
-
-        if (recordingPathChanged) {
-            msg += globalize.translate('RecordingPathChangeMessage');
-        }
-
-        if (msg) {
-            require(['alert'], function (alert) {
-                alert(msg);
-            });
-        }
+    if (msg) {
+        import('alert').then(({default: alert}) => {
+            alert(msg);
+        });
     }
+}
 
+export default function () {
     $(document).on('pageinit', '#liveTvSettingsPage', function () {
-        var page = this;
+        const page = this;
         $('.liveTvSettingsForm').off('submit', onSubmit).on('submit', onSubmit);
         $('#btnSelectRecordingPath', page).on('click.selectDirectory', function () {
-            require(['directorybrowser'], function (directoryBrowser) {
-                var picker = new directoryBrowser.default();
+            import('directorybrowser').then(({default: directoryBrowser}) => {
+                const picker = new directoryBrowser();
                 picker.show({
                     callback: function (path) {
                         if (path) {
@@ -73,8 +76,8 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading,
             });
         });
         $('#btnSelectMovieRecordingPath', page).on('click.selectDirectory', function () {
-            require(['directorybrowser'], function (directoryBrowser) {
-                var picker = new directoryBrowser.default();
+            import('directorybrowser').then(({default: directoryBrowser}) => {
+                const picker = new directoryBrowser();
                 picker.show({
                     callback: function (path) {
                         if (path) {
@@ -88,8 +91,8 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading,
             });
         });
         $('#btnSelectSeriesRecordingPath', page).on('click.selectDirectory', function () {
-            require(['directorybrowser'], function (directoryBrowser) {
-                var picker = new directoryBrowser.default();
+            import('directorybrowser').then(({default: directoryBrowser}) => {
+                const picker = new directoryBrowser();
                 picker.show({
                     callback: function (path) {
                         if (path) {
@@ -103,8 +106,8 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading,
             });
         });
         $('#btnSelectPostProcessorPath', page).on('click.selectDirectory', function () {
-            require(['directorybrowser'], function (directoryBrowser) {
-                var picker = new directoryBrowser.default();
+            import('directorybrowser').then(({default: directoryBrowser}) => {
+                const picker = new directoryBrowser();
                 picker.show({
                     includeFiles: true,
                     callback: function (path) {
@@ -119,9 +122,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading,
         });
     }).on('pageshow', '#liveTvSettingsPage', function () {
         loading.show();
-        var page = this;
+        const page = this;
         ApiClient.getNamedConfiguration('livetv').then(function (config) {
             loadPage(page, config);
         });
     });
-});
+}

src/controllers/livetvstatus.js

@@ -1,294 +1,305 @@
-define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layoutManager', 'loading', 'browser', 'listViewStyle', 'flexStyles', 'emby-itemscontainer', 'cardStyle', 'material-icons', 'emby-button'], function ($, globalize, taskButton, dom, libraryMenu, layoutManager, loading, browser) {
-    'use strict';
+import $ from 'jQuery';
+import globalize from 'globalize';
+import taskButton from 'scripts/taskbutton';
+import dom from 'dom';
+import layoutManager from 'layoutManager';
+import loading from 'loading';
+import browser from 'browser';
+import 'listViewStyle';
+import 'flexStyles';
+import 'emby-itemscontainer';
+import 'cardStyle';
+import 'material-icons';
+import 'emby-button';
 
-    var enableFocusTransform = !browser.slow && !browser.edge;
+const enableFocusTransform = !browser.slow && !browser.edge;
 
-    function getDeviceHtml(device) {
-        var padderClass;
-        var html = '';
-        var cssClass = 'card scalableCard';
-        var cardBoxCssClass = 'cardBox visualCardBox';
-        cssClass += ' backdropCard backdropCard-scalable';
-        padderClass = 'cardPadder-backdrop';
+function getDeviceHtml(device) {
+    let padderClass;
+    let html = '';
+    let cssClass = 'card scalableCard';
+    let cardBoxCssClass = 'cardBox visualCardBox';
+    cssClass += ' backdropCard backdropCard-scalable';
+    padderClass = 'cardPadder-backdrop';
 
-        // TODO move card creation code to Card component
+    // TODO move card creation code to Card component
 
-        if (layoutManager.tv) {
-            cssClass += ' show-focus';
+    if (layoutManager.tv) {
+        cssClass += ' show-focus';
 
-            if (enableFocusTransform) {
-                cssClass += ' show-animation';
-            }
+        if (enableFocusTransform) {
+            cssClass += ' show-animation';
         }
-
-        html += '<div type="button" class="' + cssClass + '" data-id="' + device.Id + '">';
-        html += '<div class="' + cardBoxCssClass + '">';
-        html += '<div class="cardScalable visualCardBox-cardScalable">';
-        html += '<div class="' + padderClass + '"></div>';
-        html += '<div class="cardContent searchImage">';
-        html += '<div class="cardImageContainer coveredImage"><span class="cardImageIcon material-icons dvr"></span></div>';
-        html += '</div>';
-        html += '</div>';
-        html += '<div class="cardFooter visualCardBox-cardFooter">';
-        html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><span class="material-icons more_vert"></span></button>';
-        html += '<div class="cardText">' + (device.FriendlyName || getTunerName(device.Type)) + '</div>';
-        html += '<div class="cardText cardText-secondary">';
-        html += device.Url || '&nbsp;';
-        html += '</div>';
-        html += '</div>';
-        html += '</div>';
-        return html += '</div>';
     }
 
-    function renderDevices(page, devices) {
-        var html = devices.map(getDeviceHtml).join('');
-        page.querySelector('.devicesList').innerHTML = html;
-    }
+    html += '<div type="button" class="' + cssClass + '" data-id="' + device.Id + '">';
+    html += '<div class="' + cardBoxCssClass + '">';
+    html += '<div class="cardScalable visualCardBox-cardScalable">';
+    html += '<div class="' + padderClass + '"></div>';
+    html += '<div class="cardContent searchImage">';
+    html += '<div class="cardImageContainer coveredImage"><span class="cardImageIcon material-icons dvr"></span></div>';
+    html += '</div>';
+    html += '</div>';
+    html += '<div class="cardFooter visualCardBox-cardFooter">';
+    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><span class="material-icons more_vert"></span></button>';
+    html += '<div class="cardText">' + (device.FriendlyName || getTunerName(device.Type)) + '</div>';
+    html += '<div class="cardText cardText-secondary">';
+    html += device.Url || '&nbsp;';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    return html += '</div>';
+}
 
-    function deleteDevice(page, id) {
-        var message = globalize.translate('MessageConfirmDeleteTunerDevice');
+function renderDevices(page, devices) {
+    page.querySelector('.devicesList').innerHTML = devices.map(getDeviceHtml).join('');
+}
 
-        require(['confirm'], function (confirm) {
-            confirm.default(message, globalize.translate('HeaderDeleteDevice')).then(function () {
-                loading.show();
-                ApiClient.ajax({
-                    type: 'DELETE',
-                    url: ApiClient.getUrl('LiveTv/TunerHosts', {
-                        Id: id
-                    })
-                }).then(function () {
-                    reload(page);
-                });
+function deleteDevice(page, id) {
+    const message = globalize.translate('MessageConfirmDeleteTunerDevice');
+
+    import('confirm').then(({default: confirm}) => {
+        confirm(message, globalize.translate('HeaderDeleteDevice')).then(function () {
+            loading.show();
+            ApiClient.ajax({
+                type: 'DELETE',
+                url: ApiClient.getUrl('LiveTv/TunerHosts', {
+                    Id: id
+                })
+            }).then(function () {
+                reload(page);
             });
         });
-    }
+    });
+}
 
-    function reload(page) {
-        loading.show();
-        ApiClient.getNamedConfiguration('livetv').then(function (config) {
-            renderDevices(page, config.TunerHosts);
-            renderProviders(page, config.ListingProviders);
+function reload(page) {
+    loading.show();
+    ApiClient.getNamedConfiguration('livetv').then(function (config) {
+        renderDevices(page, config.TunerHosts);
+        renderProviders(page, config.ListingProviders);
+    });
+    loading.hide();
+}
+
+function submitAddDeviceForm(page) {
+    page.querySelector('.dlgAddDevice').close();
+    loading.show();
+    ApiClient.ajax({
+        type: 'POST',
+        url: ApiClient.getUrl('LiveTv/TunerHosts'),
+        data: JSON.stringify({
+            Type: $('#selectTunerDeviceType', page).val(),
+            Url: $('#txtDevicePath', page).val()
+        }),
+        contentType: 'application/json'
+    }).then(function () {
+        reload(page);
+    }, function () {
+        Dashboard.alert({
+            message: globalize.translate('ErrorAddingTunerDevice')
         });
-        loading.hide();
-    }
+    });
+}
 
-    function submitAddDeviceForm(page) {
-        page.querySelector('.dlgAddDevice').close();
-        loading.show();
-        ApiClient.ajax({
-            type: 'POST',
-            url: ApiClient.getUrl('LiveTv/TunerHosts'),
-            data: JSON.stringify({
-                Type: $('#selectTunerDeviceType', page).val(),
-                Url: $('#txtDevicePath', page).val()
-            }),
-            contentType: 'application/json'
-        }).then(function () {
-            reload(page);
-        }, function () {
-            Dashboard.alert({
-                message: globalize.translate('ErrorAddingTunerDevice')
-            });
-        });
-    }
+function renderProviders(page, providers) {
+    let html = '';
 
-    function renderProviders(page, providers) {
-        var html = '';
-
-        if (providers.length) {
-            html += '<div class="paperList">';
-
-            for (var i = 0, length = providers.length; i < length; i++) {
-                var provider = providers[i];
-                html += '<div class="listItem">';
-                html += '<span class="listItemIcon material-icons dvr"></span>';
-                html += '<div class="listItemBody two-line">';
-                html += '<a is="emby-linkbutton" style="display:block;padding:0;margin:0;text-align:left;" class="clearLink" href="' + getProviderConfigurationUrl(provider.Type) + '&id=' + provider.Id + '">';
-                html += '<h3 class="listItemBodyText">';
-                html += getProviderName(provider.Type);
-                html += '</h3>';
-                html += '<div class="listItemBodyText secondary">';
-                html += provider.Path || provider.ListingsId || '';
-                html += '</div>';
-                html += '</a>';
-                html += '</div>';
-                html += '<button type="button" is="paper-icon-button-light" class="btnOptions" data-id="' + provider.Id + '"><span class="material-icons listItemAside more_vert"></span></button>';
-                html += '</div>';
-            }
+    if (providers.length) {
+        html += '<div class="paperList">';
 
+        for (let i = 0, length = providers.length; i < length; i++) {
+            const provider = providers[i];
+            html += '<div class="listItem">';
+            html += '<span class="listItemIcon material-icons dvr"></span>';
+            html += '<div class="listItemBody two-line">';
+            html += '<a is="emby-linkbutton" style="display:block;padding:0;margin:0;text-align:left;" class="clearLink" href="' + getProviderConfigurationUrl(provider.Type) + '&id=' + provider.Id + '">';
+            html += '<h3 class="listItemBodyText">';
+            html += getProviderName(provider.Type);
+            html += '</h3>';
+            html += '<div class="listItemBodyText secondary">';
+            html += provider.Path || provider.ListingsId || '';
+            html += '</div>';
+            html += '</a>';
+            html += '</div>';
+            html += '<button type="button" is="paper-icon-button-light" class="btnOptions" data-id="' + provider.Id + '"><span class="material-icons listItemAside more_vert"></span></button>';
             html += '</div>';
         }
 
-        var elem = $('.providerList', page).html(html);
-        $('.btnOptions', elem).on('click', function () {
-            var id = this.getAttribute('data-id');
-            showProviderOptions(page, id, this);
-        });
+        html += '</div>';
     }
 
-    function showProviderOptions(page, providerId, button) {
-        var items = [];
-        items.push({
-            name: globalize.translate('ButtonDelete'),
-            id: 'delete'
-        });
-        items.push({
-            name: globalize.translate('MapChannels'),
-            id: 'map'
-        });
+    const elem = $('.providerList', page).html(html);
+    $('.btnOptions', elem).on('click', function () {
+        const id = this.getAttribute('data-id');
+        showProviderOptions(page, id, this);
+    });
+}
 
-        require(['actionsheet'], function (actionsheet) {
-            actionsheet.show({
-                items: items,
-                positionTo: button
-            }).then(function (id) {
-                switch (id) {
-                    case 'delete':
-                        deleteProvider(page, providerId);
-                        break;
+function showProviderOptions(page, providerId, button) {
+    const items = [];
+    items.push({
+        name: globalize.translate('ButtonDelete'),
+        id: 'delete'
+    });
+    items.push({
+        name: globalize.translate('MapChannels'),
+        id: 'map'
+    });
 
-                    case 'map':
-                        mapChannels(page, providerId);
-                }
-            });
-        });
-    }
+    import('actionsheet').then(({default: actionsheet}) => {
+        actionsheet.show({
+            items: items,
+            positionTo: button
+        }).then(function (id) {
+            switch (id) {
+                case 'delete':
+                    deleteProvider(page, providerId);
+                    break;
 
-    function mapChannels(page, providerId) {
-        require(['components/channelMapper/channelMapper'], function (channelMapper) {
-            new channelMapper.default({
-                serverId: ApiClient.serverInfo().Id,
-                providerId: providerId
-            }).show();
-        });
-    }
-
-    function deleteProvider(page, id) {
-        var message = globalize.translate('MessageConfirmDeleteGuideProvider');
-
-        require(['confirm'], function (confirm) {
-            confirm.default(message, globalize.translate('HeaderDeleteProvider')).then(function () {
-                loading.show();
-                ApiClient.ajax({
-                    type: 'DELETE',
-                    url: ApiClient.getUrl('LiveTv/ListingProviders', {
-                        Id: id
-                    })
-                }).then(function () {
-                    reload(page);
-                }, function () {
-                    reload(page);
-                });
-            });
-        });
-    }
-
-    function getTunerName(providerId) {
-        switch (providerId = providerId.toLowerCase()) {
-            case 'm3u':
-                return 'M3U';
-            case 'hdhomerun':
-                return 'HDHomeRun';
-            case 'hauppauge':
-                return 'Hauppauge';
-            case 'satip':
-                return 'DVB';
-            default:
-                return 'Unknown';
-        }
-    }
-
-    function getProviderName(providerId) {
-        switch (providerId = providerId.toLowerCase()) {
-            case 'schedulesdirect':
-                return 'Schedules Direct';
-            case 'xmltv':
-                return 'XMLTV';
-            default:
-                return 'Unknown';
-        }
-    }
-
-    function getProviderConfigurationUrl(providerId) {
-        switch (providerId = providerId.toLowerCase()) {
-            case 'xmltv':
-                return 'livetvguideprovider.html?type=xmltv';
-            case 'schedulesdirect':
-                return 'livetvguideprovider.html?type=schedulesdirect';
-        }
-    }
-
-    function addProvider(button) {
-        var menuItems = [];
-        menuItems.push({
-            name: 'Schedules Direct',
-            id: 'SchedulesDirect'
-        });
-        menuItems.push({
-            name: 'XMLTV',
-            id: 'xmltv'
-        });
-
-        require(['actionsheet'], function (actionsheet) {
-            actionsheet.show({
-                items: menuItems,
-                positionTo: button,
-                callback: function (id) {
-                    Dashboard.navigate(getProviderConfigurationUrl(id));
-                }
-            });
-        });
-    }
-
-    function addDevice(button) {
-        Dashboard.navigate('livetvtuner.html');
-    }
-
-    function showDeviceMenu(button, tunerDeviceId) {
-        var items = [];
-        items.push({
-            name: globalize.translate('ButtonDelete'),
-            id: 'delete'
-        });
-        items.push({
-            name: globalize.translate('ButtonEdit'),
-            id: 'edit'
-        });
-
-        require(['actionsheet'], function (actionsheet) {
-            actionsheet.show({
-                items: items,
-                positionTo: button
-            }).then(function (id) {
-                switch (id) {
-                    case 'delete':
-                        deleteDevice(dom.parentWithClass(button, 'page'), tunerDeviceId);
-                        break;
-
-                    case 'edit':
-                        Dashboard.navigate('livetvtuner.html?id=' + tunerDeviceId);
-                }
-            });
-        });
-    }
-
-    function onDevicesListClick(e) {
-        var card = dom.parentWithClass(e.target, 'card');
-
-        if (card) {
-            var id = card.getAttribute('data-id');
-            var btnCardOptions = dom.parentWithClass(e.target, 'btnCardOptions');
-
-            if (btnCardOptions) {
-                showDeviceMenu(btnCardOptions, id);
-            } else {
-                Dashboard.navigate('livetvtuner.html?id=' + id);
+                case 'map':
+                    mapChannels(page, providerId);
             }
+        });
+    });
+}
+
+function mapChannels(page, providerId) {
+    import('components/channelMapper/channelMapper').then(({default: channelMapper}) => {
+        new channelMapper({
+            serverId: ApiClient.serverInfo().Id,
+            providerId: providerId
+        }).show();
+    });
+}
+
+function deleteProvider(page, id) {
+    const message = globalize.translate('MessageConfirmDeleteGuideProvider');
+
+    import('confirm').then(({default: confirm}) => {
+        confirm(message, globalize.translate('HeaderDeleteProvider')).then(function () {
+            loading.show();
+            ApiClient.ajax({
+                type: 'DELETE',
+                url: ApiClient.getUrl('LiveTv/ListingProviders', {
+                    Id: id
+                })
+            }).then(function () {
+                reload(page);
+            }, function () {
+                reload(page);
+            });
+        });
+    });
+}
+
+function getTunerName(providerId) {
+    switch (providerId = providerId.toLowerCase()) {
+        case 'm3u':
+            return 'M3U';
+        case 'hdhomerun':
+            return 'HDHomeRun';
+        case 'hauppauge':
+            return 'Hauppauge';
+        case 'satip':
+            return 'DVB';
+        default:
+            return 'Unknown';
+    }
+}
+
+function getProviderName(providerId) {
+    switch (providerId = providerId.toLowerCase()) {
+        case 'schedulesdirect':
+            return 'Schedules Direct';
+        case 'xmltv':
+            return 'XMLTV';
+        default:
+            return 'Unknown';
+    }
+}
+
+function getProviderConfigurationUrl(providerId) {
+    switch (providerId = providerId.toLowerCase()) {
+        case 'xmltv':
+            return 'livetvguideprovider.html?type=xmltv';
+        case 'schedulesdirect':
+            return 'livetvguideprovider.html?type=schedulesdirect';
+    }
+}
+
+function addProvider(button) {
+    const menuItems = [];
+    menuItems.push({
+        name: 'Schedules Direct',
+        id: 'SchedulesDirect'
+    });
+    menuItems.push({
+        name: 'XMLTV',
+        id: 'xmltv'
+    });
+
+    import('actionsheet').then(({default: actionsheet}) => {
+        actionsheet.show({
+            items: menuItems,
+            positionTo: button,
+            callback: function (id) {
+                Dashboard.navigate(getProviderConfigurationUrl(id));
+            }
+        });
+    });
+}
+
+function addDevice(button) {
+    Dashboard.navigate('livetvtuner.html');
+}
+
+function showDeviceMenu(button, tunerDeviceId) {
+    const items = [];
+    items.push({
+        name: globalize.translate('ButtonDelete'),
+        id: 'delete'
+    });
+    items.push({
+        name: globalize.translate('ButtonEdit'),
+        id: 'edit'
+    });
+
+    import('actionsheet').then(({default: actionsheet}) => {
+        actionsheet.show({
+            items: items,
+            positionTo: button
+        }).then(function (id) {
+            switch (id) {
+                case 'delete':
+                    deleteDevice(dom.parentWithClass(button, 'page'), tunerDeviceId);
+                    break;
+
+                case 'edit':
+                    Dashboard.navigate('livetvtuner.html?id=' + tunerDeviceId);
+            }
+        });
+    });
+}
+
+function onDevicesListClick(e) {
+    const card = dom.parentWithClass(e.target, 'card');
+
+    if (card) {
+        const id = card.getAttribute('data-id');
+        const btnCardOptions = dom.parentWithClass(e.target, 'btnCardOptions');
+
+        if (btnCardOptions) {
+            showDeviceMenu(btnCardOptions, id);
+        } else {
+            Dashboard.navigate('livetvtuner.html?id=' + id);
         }
     }
+}
 
+export default function () {
     $(document).on('pageinit', '#liveTvStatusPage', function () {
-        var page = this;
+        const page = this;
         $('.btnAddDevice', page).on('click', function () {
             addDevice(this);
         });
@@ -301,21 +312,21 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
         });
         page.querySelector('.devicesList').addEventListener('click', onDevicesListClick);
     }).on('pageshow', '#liveTvStatusPage', function () {
-        var page = this;
+        const page = this;
         reload(page);
-        taskButton.default({
+        taskButton({
             mode: 'on',
             progressElem: page.querySelector('.refreshGuideProgress'),
             taskKey: 'RefreshGuide',
             button: page.querySelector('.btnRefresh')
         });
     }).on('pagehide', '#liveTvStatusPage', function () {
-        var page = this;
-        taskButton.default({
+        const page = this;
+        taskButton({
             mode: 'off',
             progressElem: page.querySelector('.refreshGuideProgress'),
             taskKey: 'RefreshGuide',
             button: page.querySelector('.btnRefresh')
         });
     });
-});
+}

src/controllers/livetvtuner.js

@@ -1,232 +1,228 @@
-define(['globalize', 'loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button', 'emby-checkbox', 'emby-select'], function (globalize, loading, libraryMenu, dom) {
-    'use strict';
+import globalize from 'globalize';
+import loading from 'loading';
+import dom from 'dom';
+import 'emby-input';
+import 'emby-button';
+import 'emby-checkbox';
+import 'emby-select';
 
-    function isM3uVariant(type) {
-        return ['nextpvr'].indexOf(type || '') !== -1;
-    }
+function isM3uVariant(type) {
+    return ['nextpvr'].indexOf(type || '') !== -1;
+}
 
-    function fillTypes(view, currentId) {
-        return ApiClient.getJSON(ApiClient.getUrl('LiveTv/TunerHosts/Types')).then(function (types) {
-            var selectType = view.querySelector('.selectType');
-            var html = '';
-            html += types.map(function (tuner) {
-                return '<option value="' + tuner.Id + '">' + tuner.Name + '</option>';
-            }).join('');
-            html += '<option value="other">';
-            html += globalize.translate('TabOther');
-            html += '</option>';
-            selectType.innerHTML = html;
-            selectType.disabled = null != currentId;
-            selectType.value = '';
-            onTypeChange.call(selectType);
-        });
-    }
-
-    function reload(view, providerId) {
-        view.querySelector('.txtDevicePath').value = '';
-        view.querySelector('.chkFavorite').checked = false;
-        view.querySelector('.txtDevicePath').value = '';
-
-        if (providerId) {
-            ApiClient.getNamedConfiguration('livetv').then(function (config) {
-                var info = config.TunerHosts.filter(function (i) {
-                    return i.Id === providerId;
-                })[0];
-                fillTunerHostInfo(view, info);
-            });
-        }
-    }
-
-    function fillTunerHostInfo(view, info) {
-        var selectType = view.querySelector('.selectType');
-        var type = info.Type || '';
-
-        if (info.Source && isM3uVariant(info.Source)) {
-            type = info.Source;
-        }
-
-        selectType.value = type;
+function fillTypes(view, currentId) {
+    return ApiClient.getJSON(ApiClient.getUrl('LiveTv/TunerHosts/Types')).then(function (types) {
+        const selectType = view.querySelector('.selectType');
+        let html = '';
+        html += types.map(function (tuner) {
+            return '<option value="' + tuner.Id + '">' + tuner.Name + '</option>';
+        }).join('');
+        html += '<option value="other">';
+        html += globalize.translate('TabOther');
+        html += '</option>';
+        selectType.innerHTML = html;
+        selectType.disabled = currentId != null;
+        selectType.value = '';
         onTypeChange.call(selectType);
-        view.querySelector('.txtDevicePath').value = info.Url || '';
-        view.querySelector('.txtFriendlyName').value = info.FriendlyName || '';
-        view.querySelector('.txtUserAgent').value = info.UserAgent || '';
-        view.querySelector('.fldDeviceId').value = info.DeviceId || '';
-        view.querySelector('.chkFavorite').checked = info.ImportFavoritesOnly;
-        view.querySelector('.chkTranscode').checked = info.AllowHWTranscoding;
-        view.querySelector('.chkStreamLoop').checked = info.EnableStreamLooping;
-        view.querySelector('.txtTunerCount').value = info.TunerCount || '0';
-    }
+    });
+}
 
-    function submitForm(page) {
-        loading.show();
-        var info = {
-            Type: page.querySelector('.selectType').value,
-            Url: page.querySelector('.txtDevicePath').value || null,
-            UserAgent: page.querySelector('.txtUserAgent').value || null,
-            FriendlyName: page.querySelector('.txtFriendlyName').value || null,
-            DeviceId: page.querySelector('.fldDeviceId').value || null,
-            TunerCount: page.querySelector('.txtTunerCount').value || 0,
-            ImportFavoritesOnly: page.querySelector('.chkFavorite').checked,
-            AllowHWTranscoding: page.querySelector('.chkTranscode').checked,
-            EnableStreamLooping: page.querySelector('.chkStreamLoop').checked
-        };
+function reload(view, providerId) {
+    view.querySelector('.txtDevicePath').value = '';
+    view.querySelector('.chkFavorite').checked = false;
+    view.querySelector('.txtDevicePath').value = '';
 
-        if (isM3uVariant(info.Type)) {
-            info.Source = info.Type;
-            info.Type = 'm3u';
-        }
-
-        var id = getParameterByName('id');
-
-        if (id) {
-            info.Id = id;
-        }
-
-        ApiClient.ajax({
-            type: 'POST',
-            url: ApiClient.getUrl('LiveTv/TunerHosts'),
-            data: JSON.stringify(info),
-            contentType: 'application/json'
-        }).then(function (result) {
-            Dashboard.processServerConfigurationUpdateResult();
-            Dashboard.navigate('livetvstatus.html');
-        }, function () {
-            loading.hide();
-            Dashboard.alert({
-                message: globalize.translate('ErrorSavingTvProvider')
-            });
+    if (providerId) {
+        ApiClient.getNamedConfiguration('livetv').then(function (config) {
+            const info = config.TunerHosts.filter(function (i) {
+                return i.Id === providerId;
+            })[0];
+            fillTunerHostInfo(view, info);
         });
     }
+}
 
-    function getRequirePromise(deps) {
-        return new Promise(function (resolve, reject) {
-            require(deps, resolve);
-        });
+function fillTunerHostInfo(view, info) {
+    const selectType = view.querySelector('.selectType');
+    let type = info.Type || '';
+
+    if (info.Source && isM3uVariant(info.Source)) {
+        type = info.Source;
     }
 
-    function getDetectedDevice() {
-        return getRequirePromise(['tunerPicker']).then(function (tunerPicker) {
-            return new tunerPicker().show({
-                serverId: ApiClient.serverId()
-            });
-        });
-    }
+    selectType.value = type;
+    onTypeChange.call(selectType);
+    view.querySelector('.txtDevicePath').value = info.Url || '';
+    view.querySelector('.txtFriendlyName').value = info.FriendlyName || '';
+    view.querySelector('.txtUserAgent').value = info.UserAgent || '';
+    view.querySelector('.fldDeviceId').value = info.DeviceId || '';
+    view.querySelector('.chkFavorite').checked = info.ImportFavoritesOnly;
+    view.querySelector('.chkTranscode').checked = info.AllowHWTranscoding;
+    view.querySelector('.chkStreamLoop').checked = info.EnableStreamLooping;
+    view.querySelector('.txtTunerCount').value = info.TunerCount || '0';
+}
 
-    function onTypeChange() {
-        var value = this.value;
-        var view = dom.parentWithClass(this, 'page');
-        var mayIncludeUnsupportedDrmChannels = 'hdhomerun' === value;
-        var supportsTranscoding = 'hdhomerun' === value;
-        var supportsFavorites = 'hdhomerun' === value;
-        var supportsTunerIpAddress = 'hdhomerun' === value;
-        var supportsTunerFileOrUrl = 'm3u' === value;
-        var supportsStreamLooping = 'm3u' === value;
-        var supportsTunerCount = 'm3u' === value;
-        var supportsUserAgent = 'm3u' === value;
-        var suppportsSubmit = 'other' !== value;
-        var supportsSelectablePath = supportsTunerFileOrUrl;
-        var txtDevicePath = view.querySelector('.txtDevicePath');
-
-        if (supportsTunerIpAddress) {
-            txtDevicePath.label(globalize.translate('LabelTunerIpAddress'));
-            view.querySelector('.fldPath').classList.remove('hide');
-        } else if (supportsTunerFileOrUrl) {
-            txtDevicePath.label(globalize.translate('LabelFileOrUrl'));
-            view.querySelector('.fldPath').classList.remove('hide');
-        } else {
-            view.querySelector('.fldPath').classList.add('hide');
-        }
-
-        if (supportsSelectablePath) {
-            view.querySelector('.btnSelectPath').classList.remove('hide');
-            view.querySelector('.txtDevicePath').setAttribute('required', 'required');
-        } else {
-            view.querySelector('.btnSelectPath').classList.add('hide');
-            view.querySelector('.txtDevicePath').removeAttribute('required');
-        }
-
-        if (supportsUserAgent) {
-            view.querySelector('.fldUserAgent').classList.remove('hide');
-        } else {
-            view.querySelector('.fldUserAgent').classList.add('hide');
-        }
-
-        if (supportsFavorites) {
-            view.querySelector('.fldFavorites').classList.remove('hide');
-        } else {
-            view.querySelector('.fldFavorites').classList.add('hide');
-        }
-
-        if (supportsTranscoding) {
-            view.querySelector('.fldTranscode').classList.remove('hide');
-        } else {
-            view.querySelector('.fldTranscode').classList.add('hide');
-        }
-
-        if (supportsStreamLooping) {
-            view.querySelector('.fldStreamLoop').classList.remove('hide');
-        } else {
-            view.querySelector('.fldStreamLoop').classList.add('hide');
-        }
-
-        if (supportsTunerCount) {
-            view.querySelector('.fldTunerCount').classList.remove('hide');
-            view.querySelector('.txtTunerCount').setAttribute('required', 'required');
-        } else {
-            view.querySelector('.fldTunerCount').classList.add('hide');
-            view.querySelector('.txtTunerCount').removeAttribute('required');
-        }
-
-        if (mayIncludeUnsupportedDrmChannels) {
-            view.querySelector('.drmMessage').classList.remove('hide');
-        } else {
-            view.querySelector('.drmMessage').classList.add('hide');
-        }
-
-        if (suppportsSubmit) {
-            view.querySelector('.button-submit').classList.remove('hide');
-        } else {
-            view.querySelector('.button-submit').classList.add('hide');
-        }
-    }
-
-    return function (view, params) {
-        if (!params.id) {
-            view.querySelector('.btnDetect').classList.remove('hide');
-        }
-
-        view.addEventListener('viewshow', function () {
-            var currentId = params.id;
-            fillTypes(view, currentId).then(function () {
-                reload(view, currentId);
-            });
-        });
-        view.querySelector('form').addEventListener('submit', function (e) {
-            submitForm(view);
-            e.preventDefault();
-            e.stopPropagation();
-            return false;
-        });
-        view.querySelector('.selectType').addEventListener('change', onTypeChange);
-        view.querySelector('.btnDetect').addEventListener('click', function () {
-            getDetectedDevice().then(function (info) {
-                fillTunerHostInfo(view, info);
-            });
-        });
-        view.querySelector('.btnSelectPath').addEventListener('click', function () {
-            require(['directorybrowser'], function (directoryBrowser) {
-                var picker = new directoryBrowser.default();
-                picker.show({
-                    includeFiles: true,
-                    callback: function (path) {
-                        if (path) {
-                            view.querySelector('.txtDevicePath').value = path;
-                        }
-
-                        picker.close();
-                    }
-                });
-            });
-        });
+function submitForm(page) {
+    loading.show();
+    const info = {
+        Type: page.querySelector('.selectType').value,
+        Url: page.querySelector('.txtDevicePath').value || null,
+        UserAgent: page.querySelector('.txtUserAgent').value || null,
+        FriendlyName: page.querySelector('.txtFriendlyName').value || null,
+        DeviceId: page.querySelector('.fldDeviceId').value || null,
+        TunerCount: page.querySelector('.txtTunerCount').value || 0,
+        ImportFavoritesOnly: page.querySelector('.chkFavorite').checked,
+        AllowHWTranscoding: page.querySelector('.chkTranscode').checked,
+        EnableStreamLooping: page.querySelector('.chkStreamLoop').checked
     };
-});
+
+    if (isM3uVariant(info.Type)) {
+        info.Source = info.Type;
+        info.Type = 'm3u';
+    }
+
+    if (getParameterByName('id')) {
+        info.Id = getParameterByName('id');
+    }
+
+    ApiClient.ajax({
+        type: 'POST',
+        url: ApiClient.getUrl('LiveTv/TunerHosts'),
+        data: JSON.stringify(info),
+        contentType: 'application/json'
+    }).then(function (result) {
+        Dashboard.processServerConfigurationUpdateResult();
+        Dashboard.navigate('livetvstatus.html');
+    }, function () {
+        loading.hide();
+        Dashboard.alert({
+            message: globalize.translate('ErrorSavingTvProvider')
+        });
+    });
+}
+
+function getDetectedDevice() {
+    return import('tunerPicker').then(({default: tunerPicker}) => {
+        return new tunerPicker().show({
+            serverId: ApiClient.serverId()
+        });
+    });
+}
+
+function onTypeChange() {
+    const value = this.value;
+    const view = dom.parentWithClass(this, 'page');
+    const mayIncludeUnsupportedDrmChannels = value === 'hdhomerun';
+    const supportsTranscoding = value === 'hdhomerun';
+    const supportsFavorites = value === 'hdhomerun';
+    const supportsTunerIpAddress = value === 'hdhomerun';
+    const supportsTunerFileOrUrl = value === 'm3u';
+    const supportsStreamLooping = value === 'm3u';
+    const supportsTunerCount = value === 'm3u';
+    const supportsUserAgent = value === 'm3u';
+    const suppportsSubmit = value !== 'other';
+    const supportsSelectablePath = supportsTunerFileOrUrl;
+    const txtDevicePath = view.querySelector('.txtDevicePath');
+
+    if (supportsTunerIpAddress) {
+        txtDevicePath.label(globalize.translate('LabelTunerIpAddress'));
+        view.querySelector('.fldPath').classList.remove('hide');
+    } else if (supportsTunerFileOrUrl) {
+        txtDevicePath.label(globalize.translate('LabelFileOrUrl'));
+        view.querySelector('.fldPath').classList.remove('hide');
+    } else {
+        view.querySelector('.fldPath').classList.add('hide');
+    }
+
+    if (supportsSelectablePath) {
+        view.querySelector('.btnSelectPath').classList.remove('hide');
+        view.querySelector('.txtDevicePath').setAttribute('required', 'required');
+    } else {
+        view.querySelector('.btnSelectPath').classList.add('hide');
+        view.querySelector('.txtDevicePath').removeAttribute('required');
+    }
+
+    if (supportsUserAgent) {
+        view.querySelector('.fldUserAgent').classList.remove('hide');
+    } else {
+        view.querySelector('.fldUserAgent').classList.add('hide');
+    }
+
+    if (supportsFavorites) {
+        view.querySelector('.fldFavorites').classList.remove('hide');
+    } else {
+        view.querySelector('.fldFavorites').classList.add('hide');
+    }
+
+    if (supportsTranscoding) {
+        view.querySelector('.fldTranscode').classList.remove('hide');
+    } else {
+        view.querySelector('.fldTranscode').classList.add('hide');
+    }
+
+    if (supportsStreamLooping) {
+        view.querySelector('.fldStreamLoop').classList.remove('hide');
+    } else {
+        view.querySelector('.fldStreamLoop').classList.add('hide');
+    }
+
+    if (supportsTunerCount) {
+        view.querySelector('.fldTunerCount').classList.remove('hide');
+        view.querySelector('.txtTunerCount').setAttribute('required', 'required');
+    } else {
+        view.querySelector('.fldTunerCount').classList.add('hide');
+        view.querySelector('.txtTunerCount').removeAttribute('required');
+    }
+
+    if (mayIncludeUnsupportedDrmChannels) {
+        view.querySelector('.drmMessage').classList.remove('hide');
+    } else {
+        view.querySelector('.drmMessage').classList.add('hide');
+    }
+
+    if (suppportsSubmit) {
+        view.querySelector('.button-submit').classList.remove('hide');
+    } else {
+        view.querySelector('.button-submit').classList.add('hide');
+    }
+}
+
+export default function (view, params) {
+    if (!params.id) {
+        view.querySelector('.btnDetect').classList.remove('hide');
+    }
+
+    view.addEventListener('viewshow', function () {
+        const currentId = params.id;
+        fillTypes(view, currentId).then(function () {
+            reload(view, currentId);
+        });
+    });
+    view.querySelector('form').addEventListener('submit', function (e) {
+        submitForm(view);
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+    });
+    view.querySelector('.selectType').addEventListener('change', onTypeChange);
+    view.querySelector('.btnDetect').addEventListener('click', function () {
+        getDetectedDevice().then(function (info) {
+            fillTunerHostInfo(view, info);
+        });
+    });
+    view.querySelector('.btnSelectPath').addEventListener('click', function () {
+        import('directorybrowser').then(({default: directorybrowser}) => {
+            const picker = new directorybrowser();
+            picker.show({
+                includeFiles: true,
+                callback: function (path) {
+                    if (path) {
+                        view.querySelector('.txtDevicePath').value = path;
+                    }
+
+                    picker.close();
+                }
+            });
+        });
+    });
+}

src/controllers/movies/moviecollections.js

@@ -1,6 +1,9 @@
 define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings, globalize) {
     'use strict';
 
+    loading = loading.default || loading;
+    libraryBrowser = libraryBrowser.default || libraryBrowser;
+
     return function (view, params, tabContent) {
         function getPageData(context) {
             var key = getSavedQueryKey(context);
@@ -48,7 +51,7 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
             var viewStyle = self.getCurrentViewStyle();
             var itemsContainer = tabContent.querySelector('.itemsContainer');
 
-            if ('List' == viewStyle) {
+            if (viewStyle == 'List') {
                 itemsContainer.classList.add('vertical-list');
                 itemsContainer.classList.remove('vertical-wrap');
             } else {

src/controllers/movies/moviegenres.js

@@ -1,6 +1,9 @@
 define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost', 'globalize', 'appRouter', 'dom', 'emby-button'], function (layoutManager, loading, libraryBrowser, cardBuilder, lazyLoader, appHost, globalize, appRouter, dom) {
     'use strict';
 
+    loading = loading.default || loading;
+    libraryBrowser = libraryBrowser.default || libraryBrowser;
+
     return function (view, params, tabContent) {
         function getPageData() {
             var key = getSavedQueryKey();
@@ -54,13 +57,13 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
             var elem = entry.target;
             var id = elem.getAttribute('data-id');
             var viewStyle = self.getCurrentViewStyle();
-            var limit = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 5 : 9;
+            var limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9;
 
             if (enableScrollX()) {
                 limit = 10;
             }
 
-            var enableImageTypes = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 'Primary,Backdrop,Thumb' : 'Primary';
+            var enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary';
             var query = {
                 SortBy: 'SortName',
                 SortOrder: 'Ascending',
@@ -75,8 +78,6 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
                 ParentId: params.topParentId
             };
             ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
-                var supportsImageAnalysis = appHost.supports('imageanalysis');
-
                 if (viewStyle == 'Thumb') {
                     cardBuilder.buildCards(result.Items, {
                         itemsContainer: elem,

src/controllers/movies/movies.js

@@ -1,6 +1,9 @@
 define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, AlphaPicker, listView, cardBuilder, globalize) {
     'use strict';
 
+    loading = loading.default || loading;
+    libraryBrowser = libraryBrowser.default || libraryBrowser;
+
     return function (view, params, tabContent, options) {
         function onViewStyleChange() {
             if (self.getCurrentViewStyle() == 'List') {

src/controllers/movies/moviesrecommended.js

@@ -1,6 +1,8 @@
 define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu', 'mainTabsManager', 'cardBuilder', 'dom', 'imageLoader', 'playbackManager', 'globalize', 'emby-scroller', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager, globalize) {
     'use strict';
 
+    playbackManager = playbackManager.default || playbackManager;
+
     function enableScrollX() {
         return !layoutManager.desktop;
     }
@@ -346,8 +348,6 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
         function loadTab(page, index) {
             currentTabIndex = index;
             getTabController(page, index, function (controller) {
-                initialTabIndex = null;
-
                 if (renderedTabs.indexOf(index) == -1) {
                     renderedTabs.push(index);
                     controller.renderTab();
@@ -370,10 +370,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
             }
         }
 
-        var isViewRestored;
         var self = this;
         var currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
-        var initialTabIndex = currentTabIndex;
         var suggestionsTabIndex = 1;
 
         self.initTab = function () {
@@ -389,7 +387,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
         var tabControllers = [];
         var renderedTabs = [];
         view.addEventListener('viewshow', function (e) {
-            if (isViewRestored = e.detail.isRestored, initTabs(), !view.getAttribute('data-title')) {
+            initTabs();
+            if (!view.getAttribute('data-title')) {
                 var parentId = params.topParentId;
 
                 if (parentId) {

src/controllers/movies/movietrailers.js

@@ -1,6 +1,9 @@
 define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) {
     'use strict';
 
+    loading = loading.default || loading;
+    libraryBrowser = libraryBrowser.default || libraryBrowser;
+
     return function (view, params, tabContent) {
         function getPageData(context) {
             var key = getSavedQueryKey(context);

src/controllers/music/musicalbums.js

@@ -1,7 +1,18 @@
-define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) {
-    'use strict';
+import playbackManager from 'playbackManager';
+import loading from 'loading';
+import events from 'events';
+import libraryBrowser from 'libraryBrowser';
+import imageLoader from 'imageLoader';
+import AlphaPicker from 'alphaPicker';
+import listView from 'listView';
+import cardBuilder from 'cardBuilder';
+import * as userSettings from 'userSettings';
+import globalize from 'globalize';
+import 'emby-itemscontainer';
 
-    return function (view, params, tabContent) {
+/* eslint-disable indent */
+
+    export default function (view, params, tabContent) {
         function playAll() {
             ApiClient.getItem(ApiClient.getCurrentUserId(), params.topParentId).then(function (item) {
                 playbackManager.play({
@@ -18,7 +29,7 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
         }
 
         function getPageData() {
-            var key = getSavedQueryKey();
+            const key = getSavedQueryKey();
 
             if (!pageData) {
                 pageData = {
@@ -59,10 +70,10 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
         }
 
         function onViewStyleChange() {
-            var viewStyle = self.getCurrentViewStyle();
-            var itemsContainer = tabContent.querySelector('.itemsContainer');
+            const viewStyle = self.getCurrentViewStyle();
+            const itemsContainer = tabContent.querySelector('.itemsContainer');
 
-            if ('List' == viewStyle) {
+            if (viewStyle == 'List') {
                 itemsContainer.classList.add('vertical-list');
                 itemsContainer.classList.remove('vertical-wrap');
             } else {
@@ -76,7 +87,7 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
         function reloadItems(page) {
             loading.show();
             isLoading = true;
-            var query = getQuery();
+            const query = getQuery();
             ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
                 function onNextPageClick() {
                     if (isLoading) {
@@ -102,8 +113,8 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
 
                 window.scrollTo(0, 0);
                 updateFilterControls(page);
-                var html;
-                var pagingHtml = libraryBrowser.getQueryPagingHtml({
+                let html;
+                const pagingHtml = libraryBrowser.getQueryPagingHtml({
                     startIndex: query.StartIndex,
                     limit: query.Limit,
                     totalRecordCount: result.TotalRecordCount,
@@ -113,7 +124,7 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
                     sortButton: false,
                     filterButton: false
                 });
-                var viewStyle = self.getCurrentViewStyle();
+                const viewStyle = self.getCurrentViewStyle();
                 if (viewStyle == 'List') {
                     html = listView.getListViewHtml({
                         items: result.Items,
@@ -144,50 +155,48 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
                         overlayPlayButton: true
                     });
                 }
-                var i;
-                var length;
-                var elems = tabContent.querySelectorAll('.paging');
+                let elems = tabContent.querySelectorAll('.paging');
 
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (let i = 0, length = elems.length; i < length; i++) {
                     elems[i].innerHTML = pagingHtml;
                 }
 
                 elems = tabContent.querySelectorAll('.btnNextPage');
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (let i = 0, length = elems.length; i < length; i++) {
                     elems[i].addEventListener('click', onNextPageClick);
                 }
 
                 elems = tabContent.querySelectorAll('.btnPreviousPage');
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (let i = 0, length = elems.length; i < length; i++) {
                     elems[i].addEventListener('click', onPreviousPageClick);
                 }
 
-                var itemsContainer = tabContent.querySelector('.itemsContainer');
+                const itemsContainer = tabContent.querySelector('.itemsContainer');
                 itemsContainer.innerHTML = html;
                 imageLoader.lazyChildren(itemsContainer);
                 libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
                 loading.hide();
                 isLoading = false;
 
-                require(['autoFocuser'], function (autoFocuser) {
+                import('autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(tabContent);
                 });
             });
         }
 
         function updateFilterControls(tabContent) {
-            var query = getQuery();
+            const query = getQuery();
             self.alphaPicker.value(query.NameStartsWithOrGreater);
         }
 
-        var savedQueryKey;
-        var pageData;
-        var self = this;
-        var isLoading = false;
+        let savedQueryKey;
+        let pageData;
+        const self = this;
+        let isLoading = false;
 
         self.showFilterMenu = function () {
-            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
-                var filterDialog = new filterDialogFactory({
+            import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
+                const filterDialog = new filterDialogFactory({
                     query: getQuery(),
                     mode: 'albums',
                     serverId: ApiClient.serverId()
@@ -205,17 +214,17 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
         };
 
         function initPage(tabContent) {
-            var alphaPickerElement = tabContent.querySelector('.alphaPicker');
-            var itemsContainer = tabContent.querySelector('.itemsContainer');
+            const alphaPickerElement = tabContent.querySelector('.alphaPicker');
+            const itemsContainer = tabContent.querySelector('.itemsContainer');
 
             alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
-                var newValue = e.detail.value;
-                var query = getQuery();
+                const newValue = e.detail.value;
+                const query = getQuery();
                 query.NameStartsWithOrGreater = newValue;
                 query.StartIndex = 0;
                 reloadItems(tabContent);
             });
-            self.alphaPicker = new AlphaPicker.default({
+            self.alphaPicker = new AlphaPicker({
                 element: alphaPickerElement,
                 valueChangeEvent: 'click'
             });
@@ -259,12 +268,12 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
                     button: e.target
                 });
             });
-            var btnSelectView = tabContent.querySelector('.btnSelectView');
+            const btnSelectView = tabContent.querySelector('.btnSelectView');
             btnSelectView.addEventListener('click', function (e) {
                 libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
             });
             btnSelectView.addEventListener('layoutchange', function (e) {
-                var viewStyle = e.detail.viewStyle;
+                const viewStyle = e.detail.viewStyle;
                 getPageData().view = viewStyle;
                 libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle);
                 getQuery().StartIndex = 0;
@@ -284,5 +293,6 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
         };
 
         self.destroy = function () {};
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/music/musicartists.js

@@ -1,13 +1,22 @@
-define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'apphost', 'userSettings', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, appHost, userSettings) {
-    'use strict';
+import loading from 'loading';
+import events from 'events';
+import libraryBrowser from 'libraryBrowser';
+import imageLoader from 'imageLoader';
+import AlphaPicker from 'alphaPicker';
+import listView from 'listView';
+import cardBuilder from 'cardBuilder';
+import * as userSettings from 'userSettings';
+import 'emby-itemscontainer';
 
-    return function (view, params, tabContent) {
+/* eslint-disable indent */
+
+    export default function (view, params, tabContent) {
         function getPageData(context) {
-            var key = getSavedQueryKey(context);
-            var pageData = data[key];
+            const key = getSavedQueryKey(context);
+            let pageData = data[key];
 
             if (!pageData) {
-                var queryValues = {
+                const queryValues = {
                     SortBy: 'SortName',
                     SortOrder: 'Ascending',
                     Recursive: true,
@@ -45,10 +54,10 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
         }
 
         function onViewStyleChange() {
-            var viewStyle = self.getCurrentViewStyle();
-            var itemsContainer = tabContent.querySelector('.itemsContainer');
+            const viewStyle = self.getCurrentViewStyle();
+            const itemsContainer = tabContent.querySelector('.itemsContainer');
 
-            if ('List' == viewStyle) {
+            if (viewStyle == 'List') {
                 itemsContainer.classList.add('vertical-list');
                 itemsContainer.classList.remove('vertical-wrap');
             } else {
@@ -62,8 +71,8 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
         function reloadItems(page) {
             loading.show();
             isLoading = true;
-            var query = getQuery(page);
-            var promise = self.mode == 'albumartists' ?
+            const query = getQuery(page);
+            const promise = self.mode == 'albumartists' ?
                 ApiClient.getAlbumArtists(ApiClient.getCurrentUserId(), query) :
                 ApiClient.getArtists(ApiClient.getCurrentUserId(), query);
             promise.then(function (result) {
@@ -91,8 +100,8 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
 
                 window.scrollTo(0, 0);
                 updateFilterControls(page);
-                var html;
-                var pagingHtml = libraryBrowser.getQueryPagingHtml({
+                let html;
+                const pagingHtml = libraryBrowser.getQueryPagingHtml({
                     startIndex: query.StartIndex,
                     limit: query.Limit,
                     totalRecordCount: result.TotalRecordCount,
@@ -102,7 +111,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
                     sortButton: false,
                     filterButton: false
                 });
-                var viewStyle = self.getCurrentViewStyle();
+                const viewStyle = self.getCurrentViewStyle();
                 if (viewStyle == 'List') {
                     html = listView.getListViewHtml({
                         items: result.Items,
@@ -129,49 +138,47 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
                         overlayPlayButton: true
                     });
                 }
-                var i;
-                var length;
-                var elems = tabContent.querySelectorAll('.paging');
+                let elems = tabContent.querySelectorAll('.paging');
 
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (let i = 0, length = elems.length; i < length; i++) {
                     elems[i].innerHTML = pagingHtml;
                 }
 
                 elems = tabContent.querySelectorAll('.btnNextPage');
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (let i = 0, length = elems.length; i < length; i++) {
                     elems[i].addEventListener('click', onNextPageClick);
                 }
 
                 elems = tabContent.querySelectorAll('.btnPreviousPage');
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (let i = 0, length = elems.length; i < length; i++) {
                     elems[i].addEventListener('click', onPreviousPageClick);
                 }
 
-                var itemsContainer = tabContent.querySelector('.itemsContainer');
+                const itemsContainer = tabContent.querySelector('.itemsContainer');
                 itemsContainer.innerHTML = html;
                 imageLoader.lazyChildren(itemsContainer);
                 libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
                 loading.hide();
                 isLoading = false;
 
-                require(['autoFocuser'], function (autoFocuser) {
+                import('autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(tabContent);
                 });
             });
         }
 
         function updateFilterControls(tabContent) {
-            var query = getQuery(tabContent);
+            const query = getQuery(tabContent);
             self.alphaPicker.value(query.NameStartsWithOrGreater);
         }
 
-        var self = this;
-        var data = {};
-        var isLoading = false;
+        const self = this;
+        const data = {};
+        let isLoading = false;
 
         self.showFilterMenu = function () {
-            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
-                var filterDialog = new filterDialogFactory({
+            import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
+                const filterDialog = new filterDialogFactory({
                     query: getQuery(tabContent),
                     mode: self.mode,
                     serverId: ApiClient.serverId()
@@ -189,17 +196,17 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
         };
 
         function initPage(tabContent) {
-            var alphaPickerElement = tabContent.querySelector('.alphaPicker');
-            var itemsContainer = tabContent.querySelector('.itemsContainer');
+            const alphaPickerElement = tabContent.querySelector('.alphaPicker');
+            const itemsContainer = tabContent.querySelector('.itemsContainer');
 
             alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
-                var newValue = e.detail.value;
-                var query = getQuery(tabContent);
+                const newValue = e.detail.value;
+                const query = getQuery(tabContent);
                 query.NameStartsWithOrGreater = newValue;
                 query.StartIndex = 0;
                 reloadItems(tabContent);
             });
-            self.alphaPicker = new AlphaPicker.default({
+            self.alphaPicker = new AlphaPicker({
                 element: alphaPickerElement,
                 valueChangeEvent: 'click'
             });
@@ -211,12 +218,12 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
             tabContent.querySelector('.btnFilter').addEventListener('click', function () {
                 self.showFilterMenu();
             });
-            var btnSelectView = tabContent.querySelector('.btnSelectView');
+            const btnSelectView = tabContent.querySelector('.btnSelectView');
             btnSelectView.addEventListener('click', function (e) {
                 libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
             });
             btnSelectView.addEventListener('layoutchange', function (e) {
-                var viewStyle = e.detail.viewStyle;
+                const viewStyle = e.detail.viewStyle;
                 getPageData(tabContent).view = viewStyle;
                 libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
                 getQuery(tabContent).StartIndex = 0;
@@ -234,5 +241,6 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
         };
 
         self.destroy = function () {};
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/music/musicgenres.js

@@ -1,10 +1,14 @@
-define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], function (libraryBrowser, cardBuilder, appHost, imageLoader, loading) {
-    'use strict';
+import libraryBrowser from 'libraryBrowser';
+import cardBuilder from 'cardBuilder';
+import imageLoader from 'imageLoader';
+import loading from 'loading';
 
-    return function (view, params, tabContent) {
+/* eslint-disable indent */
+
+    export default function (view, params, tabContent) {
         function getPageData() {
-            var key = getSavedQueryKey();
-            var pageData = data[key];
+            const key = getSavedQueryKey();
+            let pageData = data[key];
 
             if (!pageData) {
                 pageData = data[key] = {
@@ -34,15 +38,15 @@ define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], f
 
         function getPromise() {
             loading.show();
-            var query = getQuery();
+            const query = getQuery();
             return ApiClient.getGenres(ApiClient.getCurrentUserId(), query);
         }
 
         function reloadItems(context, promise) {
-            var query = getQuery();
+            const query = getQuery();
             promise.then(function (result) {
-                var html = '';
-                var viewStyle = self.getCurrentViewStyle();
+                let html = '';
+                const viewStyle = self.getCurrentViewStyle();
 
                 if (viewStyle == 'Thumb') {
                     html = cardBuilder.getCardsHtml({
@@ -82,13 +86,13 @@ define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], f
                     });
                 }
 
-                var elem = context.querySelector('#items');
+                const elem = context.querySelector('#items');
                 elem.innerHTML = html;
                 imageLoader.lazyChildren(elem);
                 libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
                 loading.hide();
 
-                require(['autoFocuser'], function (autoFocuser) {
+                import('autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(context);
                 });
             });
@@ -99,8 +103,8 @@ define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], f
             self.renderTab();
         }
 
-        var self = this;
-        var data = {};
+        const self = this;
+        const data = {};
 
         self.getViewStyles = function () {
             return 'Poster,PosterCard,Thumb,ThumbCard'.split(',');
@@ -117,7 +121,7 @@ define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], f
         };
 
         self.enableViewSelection = true;
-        var promise;
+        let promise;
 
         self.preRender = function () {
             promise = getPromise();
@@ -126,5 +130,6 @@ define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], f
         self.renderTab = function () {
             reloadItems(tabContent, promise);
         };
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/music/musicplaylists.js

@@ -1,10 +1,14 @@
-define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], function (libraryBrowser, cardBuilder, appHost, imageLoader, loading) {
-    'use strict';
+import libraryBrowser from 'libraryBrowser';
+import cardBuilder from 'cardBuilder';
+import imageLoader from 'imageLoader';
+import loading from 'loading';
 
-    return function (view, params, tabContent) {
+/* eslint-disable indent */
+
+    export default function (view, params, tabContent) {
         function getPageData() {
-            var key = getSavedQueryKey();
-            var pageData = data[key];
+            const key = getSavedQueryKey();
+            let pageData = data[key];
 
             if (!pageData) {
                 pageData = data[key] = {
@@ -35,14 +39,14 @@ define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], f
 
         function getPromise() {
             loading.show();
-            var query = getQuery();
+            const query = getQuery();
             return ApiClient.getItems(ApiClient.getCurrentUserId(), query);
         }
 
         function reloadItems(context, promise) {
-            var query = getQuery();
+            const query = getQuery();
             promise.then(function (result) {
-                var html = '';
+                let html = '';
                 html = cardBuilder.getCardsHtml({
                     items: result.Items,
                     shape: 'square',
@@ -53,26 +57,26 @@ define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], f
                     allowBottomPadding: true,
                     cardLayout: false
                 });
-                var elem = context.querySelector('#items');
+                const elem = context.querySelector('#items');
                 elem.innerHTML = html;
                 imageLoader.lazyChildren(elem);
                 libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
                 loading.hide();
 
-                require(['autoFocuser'], function (autoFocuser) {
+                import('autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(context);
                 });
             });
         }
 
-        var self = this;
-        var data = {};
+        const self = this;
+        const data = {};
 
         self.getCurrentViewStyle = function () {
             return getPageData().view;
         };
 
-        var promise;
+        let promise;
 
         self.preRender = function () {
             promise = getPromise();
@@ -81,5 +85,6 @@ define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], f
         self.renderTab = function () {
             reloadItems(tabContent, promise);
         };
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/music/musicrecommended.js

@@ -1,8 +1,24 @@
-define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', 'cardBuilder', 'dom', 'apphost', 'imageLoader', 'libraryMenu', 'playbackManager', 'mainTabsManager', 'globalize', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button', 'flexStyles'], function (browser, layoutManager, userSettings, inputManager, loading, cardBuilder, dom, appHost, imageLoader, libraryMenu, playbackManager, mainTabsManager, globalize) {
-    'use strict';
+import browser from 'browser';
+import layoutManager from 'layoutManager';
+import * as userSettings from 'userSettings';
+import inputManager from 'inputManager';
+import loading from 'loading';
+import cardBuilder from 'cardBuilder';
+import dom from 'dom';
+import imageLoader from 'imageLoader';
+import libraryMenu from 'libraryMenu';
+import * as mainTabsManager from 'mainTabsManager';
+import globalize from 'globalize';
+import 'scrollStyles';
+import 'emby-itemscontainer';
+import 'emby-tabs';
+import 'emby-button';
+import 'flexStyles';
+
+/* eslint-disable indent */
 
     function itemsPerRow() {
-        var screenWidth = dom.getWindowSize().innerWidth;
+        const screenWidth = dom.getWindowSize().innerWidth;
 
         if (screenWidth >= 1920) {
             return 9;
@@ -29,8 +45,8 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
 
     function loadLatest(page, parentId) {
         loading.show();
-        var userId = ApiClient.getCurrentUserId();
-        var options = {
+        const userId = ApiClient.getCurrentUserId();
+        const options = {
             IncludeItemTypes: 'Audio',
             Limit: enableScrollX() ? 3 * itemsPerRow() : 2 * itemsPerRow(),
             Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
@@ -41,8 +57,6 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
         };
         ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
             var elem = page.querySelector('#recentlyAddedSongs');
-            var supportsImageAnalysis = appHost.supports('imageanalysis');
-            supportsImageAnalysis = false;
             elem.innerHTML = cardBuilder.getCardsHtml({
                 items: items,
                 showUnplayedIndicator: false,
@@ -51,23 +65,23 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
                 showTitle: true,
                 showParentTitle: true,
                 lazy: true,
-                centerText: !supportsImageAnalysis,
-                overlayPlayButton: !supportsImageAnalysis,
+                centerText: true,
+                overlayPlayButton: true,
                 allowBottomPadding: !enableScrollX(),
-                cardLayout: supportsImageAnalysis,
+                cardLayout: false,
                 coverImage: true
             });
             imageLoader.lazyChildren(elem);
             loading.hide();
 
-            require(['autoFocuser'], function (autoFocuser) {
+            import('autoFocuser').then(({default: autoFocuser}) => {
                 autoFocuser.autoFocus(page);
             });
         });
     }
 
     function loadRecentlyPlayed(page, parentId) {
-        var options = {
+        const options = {
             SortBy: 'DatePlayed',
             SortOrder: 'Descending',
             IncludeItemTypes: 'Audio',
@@ -81,7 +95,7 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
             EnableTotalRecordCount: false
         };
         ApiClient.getItems(ApiClient.getCurrentUserId(), options).then(function (result) {
-            var elem = page.querySelector('#recentlyPlayed');
+            const elem = page.querySelector('#recentlyPlayed');
 
             if (result.Items.length) {
                 elem.classList.remove('hide');
@@ -90,8 +104,7 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
             }
 
             var itemsContainer = elem.querySelector('.itemsContainer');
-            var supportsImageAnalysis = appHost.supports('imageanalysis');
-            supportsImageAnalysis = false;
+
             itemsContainer.innerHTML = cardBuilder.getCardsHtml({
                 items: result.Items,
                 showUnplayedIndicator: false,
@@ -100,10 +113,10 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
                 showParentTitle: true,
                 action: 'instantmix',
                 lazy: true,
-                centerText: !supportsImageAnalysis,
-                overlayMoreButton: !supportsImageAnalysis,
+                centerText: true,
+                overlayMoreButton: true,
                 allowBottomPadding: !enableScrollX(),
-                cardLayout: supportsImageAnalysis,
+                cardLayout: false,
                 coverImage: true
             });
             imageLoader.lazyChildren(itemsContainer);
@@ -111,7 +124,7 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
     }
 
     function loadFrequentlyPlayed(page, parentId) {
-        var options = {
+        const options = {
             SortBy: 'PlayCount',
             SortOrder: 'Descending',
             IncludeItemTypes: 'Audio',
@@ -125,7 +138,7 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
             EnableTotalRecordCount: false
         };
         ApiClient.getItems(ApiClient.getCurrentUserId(), options).then(function (result) {
-            var elem = page.querySelector('#topPlayed');
+            const elem = page.querySelector('#topPlayed');
 
             if (result.Items.length) {
                 elem.classList.remove('hide');
@@ -134,8 +147,6 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
             }
 
             var itemsContainer = elem.querySelector('.itemsContainer');
-            var supportsImageAnalysis = appHost.supports('imageanalysis');
-            supportsImageAnalysis = false;
             itemsContainer.innerHTML = cardBuilder.getCardsHtml({
                 items: result.Items,
                 showUnplayedIndicator: false,
@@ -144,10 +155,10 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
                 showParentTitle: true,
                 action: 'instantmix',
                 lazy: true,
-                centerText: !supportsImageAnalysis,
-                overlayMoreButton: !supportsImageAnalysis,
+                centerText: true,
+                overlayMoreButton: true,
                 allowBottomPadding: !enableScrollX(),
-                cardLayout: supportsImageAnalysis,
+                cardLayout: false,
                 coverImage: true
             });
             imageLoader.lazyChildren(itemsContainer);
@@ -160,7 +171,7 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
         loadRecentlyPlayed(tabContent, parentId);
         loadFrequentlyPlayed(tabContent, parentId);
 
-        require(['components/favoriteitems'], function (favoriteItems) {
+        import('components/favoriteitems').then(({default: favoriteItems}) => {
             favoriteItems.render(tabContent, ApiClient.getCurrentUserId(), parentId, ['favoriteArtists', 'favoriteAlbums', 'favoriteSongs']);
         });
     }
@@ -211,10 +222,10 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
         }
     }
 
-    return function (view, params) {
+    export default function (view, params) {
         function reload() {
             loading.show();
-            var tabContent = view.querySelector(".pageTabContent[data-index='0']");
+            const tabContent = view.querySelector(".pageTabContent[data-index='0']");
             loadSuggestionsTab(view, tabContent, params.topParentId);
         }
 
@@ -257,46 +268,48 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
         }
 
         function getTabController(page, index, callback) {
-            var depends = [];
+            let depends;
 
             switch (index) {
                 case 0:
+                    depends = 'controllers/music/musicrecommended';
                     break;
 
                 case 1:
-                    depends.push('controllers/music/musicalbums');
+                    depends = 'controllers/music/musicalbums';
                     break;
 
                 case 2:
                 case 3:
-                    depends.push('controllers/music/musicartists');
+                    depends = 'controllers/music/musicartists';
                     break;
 
                 case 4:
-                    depends.push('controllers/music/musicplaylists');
+                    depends = 'controllers/music/musicplaylists';
                     break;
 
                 case 5:
-                    depends.push('controllers/music/songs');
+                    depends = 'controllers/music/songs';
                     break;
 
                 case 6:
-                    depends.push('controllers/music/musicgenres');
+                    depends = 'controllers/music/musicgenres';
                     break;
 
                 case 7:
-                    depends.push('scripts/searchtab');
+                    depends = 'scripts/searchtab';
+                    break;
             }
 
-            require(depends, function (controllerFactory) {
-                var tabContent;
+            import(depends).then(({default: controllerFactory}) => {
+                let tabContent;
 
-                if (0 == index) {
+                if (index == 0) {
                     tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
                     self.tabContent = tabContent;
                 }
 
-                var controller = tabControllers[index];
+                let controller = tabControllers[index];
 
                 if (!controller) {
                     tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
@@ -339,8 +352,6 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
         function loadTab(page, index) {
             currentTabIndex = index;
             getTabController(page, index, function (controller) {
-                initialTabIndex = null;
-
                 if (renderedTabs.indexOf(index) == -1) {
                     renderedTabs.push(index);
                     controller.renderTab();
@@ -356,16 +367,14 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
             }
         }
 
-        var isViewRestored;
         var self = this;
         var currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
-        var initialTabIndex = currentTabIndex;
 
         self.initTab = function () {
-            var tabContent = view.querySelector(".pageTabContent[data-index='0']");
-            var containers = tabContent.querySelectorAll('.itemsContainer');
+            const tabContent = view.querySelector(".pageTabContent[data-index='0']");
+            const containers = tabContent.querySelectorAll('.itemsContainer');
 
-            for (var i = 0, length = containers.length; i < length; i++) {
+            for (let i = 0, length = containers.length; i < length; i++) {
                 setScrollClasses(containers[i], enableScrollX());
             }
         };
@@ -374,13 +383,12 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
             reload();
         };
 
-        var tabControllers = [];
-        var renderedTabs = [];
+        const tabControllers = [];
+        const renderedTabs = [];
         view.addEventListener('viewshow', function (e) {
-            isViewRestored = e.detail.isRestored;
             initTabs();
             if (!view.getAttribute('data-title')) {
-                var parentId = params.topParentId;
+                const parentId = params.topParentId;
 
                 if (parentId) {
                     ApiClient.getItem(ApiClient.getCurrentUserId(), parentId).then(function (item) {
@@ -405,5 +413,6 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', '
                 }
             });
         });
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/music/songs.js

@@ -1,10 +1,18 @@
-define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userSettings', 'globalize', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView, loading, userSettings, globalize) {
-    'use strict';
+import events from 'events';
+import libraryBrowser from 'libraryBrowser';
+import imageLoader from 'imageLoader';
+import listView from 'listView';
+import loading from 'loading';
+import * as userSettings from 'userSettings';
+import globalize from 'globalize';
+import 'emby-itemscontainer';
 
-    return function (view, params, tabContent) {
+/* eslint-disable indent */
+
+    export default function (view, params, tabContent) {
         function getPageData(context) {
-            var key = getSavedQueryKey(context);
-            var pageData = data[key];
+            const key = getSavedQueryKey(context);
+            let pageData = data[key];
 
             if (!pageData) {
                 pageData = data[key] = {
@@ -46,7 +54,7 @@ define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userS
         function reloadItems(page) {
             loading.show();
             isLoading = true;
-            var query = getQuery(page);
+            const query = getQuery(page);
             ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
                 function onNextPageClick() {
                     if (isLoading) {
@@ -71,9 +79,7 @@ define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userS
                 }
 
                 window.scrollTo(0, 0);
-                var i;
-                var length;
-                var pagingHtml = libraryBrowser.getQueryPagingHtml({
+                const pagingHtml = libraryBrowser.getQueryPagingHtml({
                     startIndex: query.StartIndex,
                     limit: query.Limit,
                     totalRecordCount: result.TotalRecordCount,
@@ -83,49 +89,49 @@ define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userS
                     sortButton: false,
                     filterButton: false
                 });
-                var html = listView.getListViewHtml({
+                const html = listView.getListViewHtml({
                     items: result.Items,
                     action: 'playallfromhere',
                     smallIcon: true,
                     artist: true,
                     addToListButton: true
                 });
-                var elems = tabContent.querySelectorAll('.paging');
+                let elems = tabContent.querySelectorAll('.paging');
 
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (let i = 0, length = elems.length; i < length; i++) {
                     elems[i].innerHTML = pagingHtml;
                 }
 
                 elems = tabContent.querySelectorAll('.btnNextPage');
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (let i = 0, length = elems.length; i < length; i++) {
                     elems[i].addEventListener('click', onNextPageClick);
                 }
 
                 elems = tabContent.querySelectorAll('.btnPreviousPage');
-                for (i = 0, length = elems.length; i < length; i++) {
+                for (let i = 0, length = elems.length; i < length; i++) {
                     elems[i].addEventListener('click', onPreviousPageClick);
                 }
 
-                var itemsContainer = tabContent.querySelector('.itemsContainer');
+                const itemsContainer = tabContent.querySelector('.itemsContainer');
                 itemsContainer.innerHTML = html;
                 imageLoader.lazyChildren(itemsContainer);
                 libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
                 loading.hide();
                 isLoading = false;
 
-                require(['autoFocuser'], function (autoFocuser) {
+                import('autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(page);
                 });
             });
         }
 
-        var self = this;
-        var data = {};
-        var isLoading = false;
+        const self = this;
+        const data = {};
+        let isLoading = false;
 
         self.showFilterMenu = function () {
-            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
-                var filterDialog = new filterDialogFactory({
+            import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
+                const filterDialog = new filterDialogFactory({
                     query: getQuery(tabContent),
                     mode: 'songs',
                     serverId: ApiClient.serverId()
@@ -193,5 +199,6 @@ define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userS
         };
 
         self.destroy = function () {};
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/playback/queue/index.html

@@ -0,0 +1,193 @@
+<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage noSecondaryNavPage selfBackdropPage" data-title="-">
+
+    <div class="remoteControlContent padded-left padded-right">
+
+        <div class="nowPlayingInfoContainer">
+            <div class="nowPlayingPageImageContainer"></div>
+            <div class="nowPlayingInfoControls">
+
+                <div class="flex">
+
+                    <div class="nowPlayingInfoContainerMedia">
+                        <h2 class="nowPlayingPageTitle"></h2>
+                        <div style="font-weight: bold;" class="nowPlayingSongName nowPlayingEpisode"></div>
+                        <div class="nowPlayingAlbum nowPlayingSeason"></div>
+                        <div class="nowPlayingArtist nowPlayingSerie"></div>
+                    </div>
+                    <div class="nowPlayingPageUserDataButtonsTitle"></div>
+
+                </div>
+
+                <div class="sliderContainer flex">
+                    <div class="positionTime"></div>
+                        <div class="nowPlayingPositionSliderContainer">
+                            <input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" data-slider-keep-progress="true" />
+                        </div>
+                    <div class="runtime"></div>
+                </div>
+
+                <div class="nowPlayingButtonsContainer focuscontainer-x justify-content-space-between">
+
+                    <div class="nowPlayingInfoButtons">
+
+                        <button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${ButtonRepeat}"
+                            data-command="SetRepeatMode">
+                            <span class="material-icons repeat"></span>
+                        </button>
+
+                        <button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
+                            <span class="material-icons replay_10"></span>
+                        </button>
+
+                        <button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
+                            <span class="material-icons skip_previous"></span>
+                        </button>
+
+                        <button is="paper-icon-button-light" class="btnPlayPause btnPlayStateCommand autoSize" title="${ButtonPause}">
+                            <span class="material-icons pause_circle_filled"></span>
+                        </button>
+
+                        <button is="paper-icon-button-light" class="btnPlayStateCommand btnStop autoSize" title="${ButtonStop}">
+                            <span class="material-icons stop"></span>
+                        </button>
+
+                        <button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}">
+                            <span class="material-icons skip_next"></span>
+                        </button>
+
+                        <button is="paper-icon-button-light" class="btnPlayStateCommand btnFastForward btnNowPlayingFastForward autoSize" title="${FastForward}">
+                            <span class="material-icons forward_30"></span>
+                        </button>
+
+                        <button is="paper-icon-button-light" class="btnShuffleQueue autoSize" title="${ButtonShuffle}">
+                            <span class="material-icons shuffle"></span>
+                        </button>
+
+                    </div>
+
+                    <div class="nowPlayingSecondaryButtons">
+
+                        <button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand autoSize" title="${ButtonAudioTracks}" data-command="GoToSearch">
+                            <span class="material-icons audiotrack"></span>
+                        </button>
+
+                        <button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand autoSize" title="${ButtonSubtitles}" data-command="GoToSearch">
+                            <span class="material-icons closed_caption"></span>
+                        </button>
+
+                        <div class="nowPlayingPageUserDataButtons"></div>
+
+                        <button is="paper-icon-button-light" class="btnToggleFullscreen videoButton btnPlayStateCommand autoSize" title="${ButtonFullscreen}" data-command="ToggleFullscreen">
+                            <span class="material-icons fullscreen"></span>
+                        </button>
+
+                        <button is="paper-icon-button-light" class="btnShuffleQueue autoSize" title="${ButtonShuffle}">
+                            <span class="material-icons shuffle"></span>
+                        </button>
+
+                        <button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${ButtonRepeat}"
+                            data-command="SetRepeatMode">
+                            <span class="material-icons repeat"></span>
+                        </button>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="remoteControlSection">
+            <div class="navigationSection">
+                <div is="emby-collapse" title="${HeaderNavigation}">
+                    <div class="collapseContent">
+                        <div>
+                            <button is="paper-icon-button-light" class="btnArrowUp btnCommand autoSize button-submit" title="${ButtonArrowUp}" data-command="MoveUp">
+                                <span class="material-icons keyboard_arrow_up"></span>
+                            </button>
+                        </div>
+                        <br />
+                        <div>
+                            <button is="paper-icon-button-light" class="btnArrowLeft btnCommand autoSize button-submit" title="${ButtonArrowLeft}" data-command="MoveLeft">
+                                <span class="material-icons keyboard_arrow_left"></span>
+                            </button>
+                            <button is="paper-icon-button-light" class="btnOk btnCommand autoSize button-submit" title="${ButtonOk}" data-command="Select">
+                                <span class="material-icons keyboard_return"></span>
+                            </button>
+                            <button is="paper-icon-button-light" class="btnArrowRight btnCommand autoSize button-submit" title="${ButtonArrowRight}" data-command="MoveRight">
+                                <span class="material-icons keyboard_arrow_right"></span>
+                            </button>
+                        </div>
+                        <br />
+                        <div>
+                            <button is="paper-icon-button-light" class="btnBack btnCommand autoSize" title="${ButtonBack}" data-command="Back">
+                                <span class="material-icons arrow_back"></span>
+                            </button>
+                            <button is="paper-icon-button-light" class="btnArrowDown btnCommand autoSize button-submit" title="${ButtonArrowDown}" data-command="MoveDown">
+                                <span class="material-icons keyboard_arrow_down"></span>
+                            </button>
+                            <button is="paper-icon-button-light" class="btnContextMenu btnCommand autoSize" title="${ButtonInfo}" data-command="ToggleContextMenu">
+                                <span class="material-icons menu"></span>
+                            </button>
+                        </div>
+                        <br />
+                        <div>
+                            <button is="paper-icon-button-light" class="btnGoHome btnCommand autoSize" title="${ButtonHome}" data-command="GoHome">
+                                <span class="material-icons home"></span>
+                            </button>
+                            <button is="paper-icon-button-light" class="btnShowSearch btnCommand autoSize" title="${ButtonSearch}" data-command="GoToSearch">
+                                <span class="material-icons search"></span>
+                            </button>
+                            <button is="paper-icon-button-light" class="bthShowSettings btnCommand autoSize" title="${ButtonSettings}" data-command="GoToSettings">
+                                <span class="material-icons settings"></span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="sendMessageSection">
+                <div is="emby-collapse" title="${HeaderSendMessage}">
+                    <div class="collapseContent" style="text-align: left;">
+                        <form class="sendMessageForm">
+                            <div class="inputContainer">
+                                <input is="emby-input" class="sendMessageElement" type="text" id="txtMessageTitle" label="${LabelMessageTitle}" required />
+                            </div>
+                            <br />
+                            <div class="inputContainer">
+                                <input is="emby-input" class="sendMessageElement" type="text" id="txtMessageText" label="${LabelMessageText}" required />
+                            </div>
+                            <p>
+                                <button is="emby-button" class="sendMessageElement button-submit block raised" type="submit" raised>${ButtonSend}</button>
+                            </p>
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <div class="sendTextSection">
+                <div is="emby-collapse" title="${HeaderTypeText}">
+                <div  class="collapseContent" style="text-align: left;">
+                    <form class="typeTextForm">
+                        <div class="inputContainer">
+                            <input is="emby-input" class="typeTextElement" type="text" id="txtTypeText" label="${LabelTypeText}" required />
+                        </div>
+                        <p>
+                            <button is="emby-button" class="typeTextElement button-submit block raised" type="submit" raised>${ButtonSend}</button>
+                        </p>
+                    </form>
+                </div>
+                </div>
+            </div>
+        </div>
+        <div class="playlistSection">
+            <div class="playlistSectionButton flex align-items-center justify-content-center focuscontainer-x">
+                <button id="togglePlaylist" is="paper-icon-button-light" class="btnTogglePlaylist hide" title="${ButtonTogglePlaylist}">
+                    <span class="material-icons queue_music"></span>
+                </button>
+                <button is="paper-icon-button-light" class="btnSavePlaylist hide" title="${ButtonSave}">
+                    <span class="material-icons save"></span>
+                </button>
+                <button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title="${ButtonToggleContextMenu}">
+                    <span class="material-icons more_vert"></span>
+                </button>
+            </div>
+            <div id="playlist" class="playlist itemsContainer vertical-list nowPlayingPlaylist hide" is="emby-itemscontainer" data-dragreorder="true"></div>
+        </div>
+    </div>
+</div>

src/controllers/playback/video/index.html

@@ -0,0 +1,88 @@
+<div id="videoOsdPage" data-role="page" class="page libraryPage" data-backbutton="true">
+    <div class="pageContainer flex"></div>
+    <div class="upNextContainer hide"></div>
+    <div class="videoOsdBottom videoOsdBottom-maincontrols">
+        <div class="osdPoster"></div>
+        <div class="osdControls">
+            <div class="osdTextContainer osdMainTextContainer">
+                <h3 class="osdTitle"></h3>
+                <div class="osdMediaInfo"></div>
+                <div class="osdMediaStatus hide">
+                    <span class="material-icons animate autorenew"></span>
+                    <span>${FetchingData}</span>
+                </div>
+            </div>
+
+            <div class="osdTextContainer osdSecondaryMediaInfo"></div>
+
+            <div class="flex flex-direction-row align-items-center">
+                <div class="osdTextContainer startTimeText" style="margin: 0 .25em 0 0;"></div>
+                <div class="sliderContainer flex-grow" style="margin: .5em .5em .25em;">
+                    <input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" data-slider-keep-progress="true" />
+                </div>
+                <div class="osdTextContainer endTimeText" style="margin: 0 0 0 .25em;"></div>
+            </div>
+
+            <div class="buttons focuscontainer-x">
+                <button is="paper-icon-button-light" class="btnRecord autoSize hide">
+                    <span class="xlargePaperIconButton material-icons fiber_manual_record"></span>
+                </button>
+
+                <button is="paper-icon-button-light" class="btnPreviousTrack autoSize hide" title="${PreviousTrack}">
+                    <span class="xlargePaperIconButton material-icons skip_previous"></span>
+                </button>
+
+                <button is="paper-icon-button-light" class="btnRewind" title="${Rewind} (j)">
+                    <span class="xlargePaperIconButton material-icons fast_rewind"></span>
+                </button>
+
+                <button is="paper-icon-button-light" class="btnPause autoSize">
+                    <span class="xlargePaperIconButton material-icons pause"></span>
+                </button>
+
+                <button is="paper-icon-button-light" class="btnFastForward" title="${FastForward} (l)">
+                    <span class="xlargePaperIconButton material-icons fast_forward"></span>
+                </button>
+
+                <button is="paper-icon-button-light" class="btnNextTrack autoSize hide" title="${NextTrack}">
+                    <span class="xlargePaperIconButton material-icons skip_next"></span>
+                </button>
+
+                <button is="paper-icon-button-light" class="btnAudio hide autoSize" title="${Audio}">
+                    <span class="xlargePaperIconButton material-icons audiotrack"></span>
+                </button>
+                <button is="paper-icon-button-light" class="btnSubtitles hide autoSize" title="${Subtitles}">
+                    <span class="xlargePaperIconButton material-icons closed_caption"></span>
+                </button>
+
+                <button is="paper-icon-button-light" class="btnVideoOsdSettings hide autoSize" title="${Settings}">
+                    <span class="largePaperIconButton material-icons settings"></span>
+                </button>
+                <button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen} (f)">
+                    <span class="xlargePaperIconButton material-icons fullscreen"></span>
+                </button>
+                <button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}">
+                    <span class="xlargePaperIconButton material-icons picture_in_picture_alt"></span>
+                </button>
+                <button is="paper-icon-button-light" class="btnAirPlay hide autoSize" title="${AirPlay}">
+                    <span class="xlargePaperIconButton material-icons airplay"></span>
+                </button>
+
+                <div class="osdTimeText">
+                    <span class="osdPositionText"></span>
+                    <span class="osdDurationText"></span>
+                    <span class="endsAtText"></span>
+                </div>
+
+                <div class="volumeButtons hide-mouse-idle-tv">
+                    <button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute} (m)">
+                        <span class="xlargePaperIconButton material-icons volume_up"></span>
+                    </button>
+                    <div class="sliderContainer osdVolumeSliderContainer">
+                        <input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="osdVolumeSlider" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/controllers/playback/video/index.js

@@ -1,6 +1,7 @@
 import playbackManager from 'playbackManager';
 import dom from 'dom';
 import inputManager from 'inputManager';
+import mouseManager from 'mouseManager';
 import datetime from 'datetime';
 import itemHelper from 'itemHelper';
 import mediaInfo from 'mediaInfo';
@@ -21,18 +22,18 @@ import 'css!assets/css/videoosd';
 /* eslint-disable indent */
 
     function seriesImageUrl(item, options) {
-        if ('Episode' !== item.Type) {
+        if (item.Type !== 'Episode') {
             return null;
         }
 
         options = options || {};
         options.type = options.type || 'Primary';
-        if ('Primary' === options.type && item.SeriesPrimaryImageTag) {
+        if (options.type === 'Primary' && item.SeriesPrimaryImageTag) {
             options.tag = item.SeriesPrimaryImageTag;
             return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
         }
 
-        if ('Thumb' === options.type) {
+        if (options.type === 'Thumb') {
             if (item.SeriesThumbImageTag) {
                 options.tag = item.SeriesThumbImageTag;
                 return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
@@ -56,7 +57,7 @@ import 'css!assets/css/videoosd';
             return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
         }
 
-        if ('Primary' === options.type && item.AlbumId && item.AlbumPrimaryImageTag) {
+        if (options.type === 'Primary' && item.AlbumId && item.AlbumPrimaryImageTag) {
             options.tag = item.AlbumPrimaryImageTag;
             return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
         }
@@ -103,7 +104,7 @@ import 'css!assets/css/videoosd';
         function onDoubleClick(e) {
             const clientX = e.clientX;
 
-            if (null != clientX) {
+            if (clientX != null) {
                 if (clientX < dom.getWindowSize().innerWidth / 2) {
                     playbackManager.rewind(currentPlayer);
                 } else {
@@ -116,7 +117,7 @@ import 'css!assets/css/videoosd';
         }
 
         function getDisplayItem(item) {
-            if ('TvChannel' === item.Type) {
+            if (item.Type === 'TvChannel') {
                 const apiClient = connectionManager.getApiClient(item.ServerId);
                 return apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (refreshedItem) {
                     return {
@@ -132,7 +133,7 @@ import 'css!assets/css/videoosd';
         }
 
         function updateRecordingButton(item) {
-            if (!item || 'Program' !== item.Type) {
+            if (!item || item.Type !== 'Program') {
                 if (recordingButtonManager) {
                     recordingButtonManager.destroy();
                     recordingButtonManager = null;
@@ -175,8 +176,8 @@ import 'css!assets/css/videoosd';
             const osdTitle = view.querySelector('.osdTitle');
             titleElement = osdTitle;
             let displayName = itemHelper.getDisplayName(displayItem, {
-                includeParentInfo: 'Program' !== displayItem.Type,
-                includeIndexNumber: 'Program' !== displayItem.Type
+                includeParentInfo: displayItem.Type !== 'Program',
+                includeIndexNumber: displayItem.Type !== 'Program'
             });
 
             if (!displayName) {
@@ -197,8 +198,8 @@ import 'css!assets/css/videoosd';
                 tomatoes: false,
                 endsAt: false,
                 episodeTitle: false,
-                originalAirDate: 'Program' !== displayItem.Type,
-                episodeTitleIndexNumber: 'Program' !== displayItem.Type,
+                originalAirDate: displayItem.Type !== 'Program',
+                episodeTitleIndexNumber: displayItem.Type !== 'Program',
                 programIndicator: false
             });
             const osdMediaInfo = view.querySelector('.osdMediaInfo');
@@ -270,7 +271,7 @@ import 'css!assets/css/videoosd';
         }
 
         function shouldEnableProgressByTimeOfDay(item) {
-            return !('TvChannel' !== item.Type || !item.CurrentProgram);
+            return !(item.Type !== 'TvChannel' || !item.CurrentProgram);
         }
 
         function updateNowPlayingInfo(player, state) {
@@ -329,24 +330,24 @@ import 'css!assets/css/videoosd';
 
             if (item) {
                 let imgUrl = seriesImageUrl(item, {
-                    maxWidth: osdPoster.clientWidth * 2,
+                    maxWidth: osdPoster.clientWidth,
                     type: 'Primary'
                 }) || seriesImageUrl(item, {
-                    maxWidth: osdPoster.clientWidth * 2,
+                    maxWidth: osdPoster.clientWidth,
                     type: 'Thumb'
                 }) || imageUrl(item, {
-                    maxWidth: osdPoster.clientWidth * 2,
+                    maxWidth: osdPoster.clientWidth,
                     type: 'Primary'
                 });
 
                 if (!imgUrl && secondaryItem && (imgUrl = seriesImageUrl(secondaryItem, {
-                    maxWidth: osdPoster.clientWidth * 2,
+                    maxWidth: osdPoster.clientWidth,
                     type: 'Primary'
                 }) || seriesImageUrl(secondaryItem, {
-                    maxWidth: osdPoster.clientWidth * 2,
+                    maxWidth: osdPoster.clientWidth,
                     type: 'Thumb'
                 }) || imageUrl(secondaryItem, {
-                    maxWidth: osdPoster.clientWidth * 2,
+                    maxWidth: osdPoster.clientWidth,
                     type: 'Primary'
                 })), imgUrl) {
                     return void (osdPoster.innerHTML = '<img src="' + imgUrl + '" />');
@@ -367,10 +368,11 @@ import 'css!assets/css/videoosd';
         function hideOsd() {
             slideUpToHide(headerElement);
             hideMainOsdControls();
+            mouseManager.hideCursor();
         }
 
         function toggleOsd() {
-            if ('osd' === currentVisibleMenu) {
+            if (currentVisibleMenu === 'osd') {
                 hideOsd();
             } else if (!currentVisibleMenu) {
                 showOsd();
@@ -431,10 +433,11 @@ import 'css!assets/css/videoosd';
         }
 
         function hideMainOsdControls() {
-            if ('osd' === currentVisibleMenu) {
+            if (currentVisibleMenu === 'osd') {
                 const elem = osdBottomElement;
                 clearHideAnimationEventListeners(elem);
                 elem.classList.add('videoOsdBottom-hidden');
+
                 dom.addEventListener(elem, transitionEndEventName, onHideAnimationComplete, {
                     once: true
                 });
@@ -460,7 +463,7 @@ import 'css!assets/css/videoosd';
         }
 
         function onPointerMove(e) {
-            if ('mouse' === (e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse'))) {
+            if ((e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse')) === 'mouse') {
                 const eventX = e.screenX || 0;
                 const eventY = e.screenY || 0;
                 const obj = lastPointerMoveData;
@@ -488,7 +491,7 @@ import 'css!assets/css/videoosd';
 
             switch (e.detail.command) {
                 case 'left':
-                    if ('osd' === currentVisibleMenu) {
+                    if (currentVisibleMenu === 'osd') {
                         showOsd();
                     } else {
                         if (!currentVisibleMenu) {
@@ -500,7 +503,7 @@ import 'css!assets/css/videoosd';
                     break;
 
                 case 'right':
-                    if ('osd' === currentVisibleMenu) {
+                    if (currentVisibleMenu === 'osd') {
                         showOsd();
                     } else if (!currentVisibleMenu) {
                         e.preventDefault();
@@ -615,7 +618,7 @@ import 'css!assets/css/videoosd';
             resetUpNextDialog();
             console.debug('nowplaying event: ' + e.type);
 
-            if ('Video' !== state.NextMediaType) {
+            if (state.NextMediaType !== 'Video') {
                 view.removeEventListener('viewbeforehide', onViewHideStopPlayback);
                 Emby.Page.back();
             }
@@ -702,7 +705,7 @@ import 'css!assets/css/videoosd';
         }
 
         function showComingUpNextIfNeeded(player, currentItem, currentTimeTicks, runtimeTicks) {
-            if (runtimeTicks && currentTimeTicks && !comingUpNextDisplayed && !currentVisibleMenu && 'Episode' === currentItem.Type && userSettings.enableNextVideoInfoOverlay()) {
+            if (runtimeTicks && currentTimeTicks && !comingUpNextDisplayed && !currentVisibleMenu && currentItem.Type === 'Episode' && userSettings.enableNextVideoInfoOverlay()) {
                 const showAtSecondsLeft = runtimeTicks >= 3e10 ? 40 : runtimeTicks >= 24e9 ? 35 : 30;
                 const showAtTicks = runtimeTicks - 1e3 * showAtSecondsLeft * 1e4;
                 const timeRemainingTicks = runtimeTicks - currentTimeTicks;
@@ -714,7 +717,7 @@ import 'css!assets/css/videoosd';
         }
 
         function onUpNextHidden() {
-            if ('upnext' === currentVisibleMenu) {
+            if (currentVisibleMenu === 'upnext') {
                 currentVisibleMenu = null;
             }
         }
@@ -737,7 +740,7 @@ import 'css!assets/css/videoosd';
         }
 
         function refreshProgramInfoIfNeeded(player, item) {
-            if ('TvChannel' === item.Type) {
+            if (item.Type === 'TvChannel') {
                 const program = item.CurrentProgram;
 
                 if (program && program.EndDate) {
@@ -778,7 +781,7 @@ import 'css!assets/css/videoosd';
             updatePlayPauseState(playState.IsPaused);
             const supportedCommands = playbackManager.getSupportedCommands(player);
             currentPlayerSupportedCommands = supportedCommands;
-            supportsBrightnessChange = -1 !== supportedCommands.indexOf('SetBrightness');
+            supportsBrightnessChange = supportedCommands.indexOf('SetBrightness') !== -1;
             updatePlayerVolumeState(player, playState.IsMuted, playState.VolumeLevel);
 
             if (nowPlayingPositionSlider && !nowPlayingPositionSlider.dragging) {
@@ -792,13 +795,13 @@ import 'css!assets/css/videoosd';
             updateTimeDisplay(playState.PositionTicks, nowPlayingItem.RunTimeTicks, playState.PlaybackStartTimeTicks, playState.BufferedRanges || []);
             updateNowPlayingInfo(player, state);
 
-            if (state.MediaSource && state.MediaSource.SupportsTranscoding && -1 !== supportedCommands.indexOf('SetMaxStreamingBitrate')) {
+            if (state.MediaSource && state.MediaSource.SupportsTranscoding && supportedCommands.indexOf('SetMaxStreamingBitrate') !== -1) {
                 view.querySelector('.btnVideoOsdSettings').classList.remove('hide');
             } else {
                 view.querySelector('.btnVideoOsdSettings').classList.add('hide');
             }
 
-            const isProgressClear = state.MediaSource && null == state.MediaSource.RunTimeTicks;
+            const isProgressClear = state.MediaSource && state.MediaSource.RunTimeTicks == null;
             nowPlayingPositionSlider.setIsClear(isProgressClear);
 
             if (nowPlayingItem.RunTimeTicks) {
@@ -806,19 +809,19 @@ import 'css!assets/css/videoosd';
                     userSettings.skipForwardLength() * 1000000 / nowPlayingItem.RunTimeTicks);
             }
 
-            if (-1 === supportedCommands.indexOf('ToggleFullscreen') || player.isLocalPlayer && layoutManager.tv && playbackManager.isFullscreen(player)) {
+            if (supportedCommands.indexOf('ToggleFullscreen') === -1 || player.isLocalPlayer && layoutManager.tv && playbackManager.isFullscreen(player)) {
                 view.querySelector('.btnFullscreen').classList.add('hide');
             } else {
                 view.querySelector('.btnFullscreen').classList.remove('hide');
             }
 
-            if (-1 === supportedCommands.indexOf('PictureInPicture')) {
+            if (supportedCommands.indexOf('PictureInPicture') === -1) {
                 view.querySelector('.btnPip').classList.add('hide');
             } else {
                 view.querySelector('.btnPip').classList.remove('hide');
             }
 
-            if (-1 === supportedCommands.indexOf('AirPlay')) {
+            if (supportedCommands.indexOf('AirPlay') === -1) {
                 view.querySelector('.btnAirPlay').classList.add('hide');
             } else {
                 view.querySelector('.btnAirPlay').classList.remove('hide');
@@ -866,7 +869,7 @@ import 'css!assets/css/videoosd';
                         nowPlayingPositionSlider.value = 0;
                     }
 
-                    if (runtimeTicks && null != positionTicks && currentRuntimeTicks && !enableProgressByTimeOfDay && currentItem.RunTimeTicks && 'Recording' !== currentItem.Type) {
+                    if (runtimeTicks && positionTicks != null && currentRuntimeTicks && !enableProgressByTimeOfDay && currentItem.RunTimeTicks && currentItem.Type !== 'Recording') {
                         endsAtText.innerHTML = '&nbsp;&nbsp;-&nbsp;&nbsp;' + mediaInfo.getEndsAtFromPosition(runtimeTicks, positionTicks, true);
                     } else {
                         endsAtText.innerHTML = '';
@@ -887,11 +890,11 @@ import 'css!assets/css/videoosd';
             let showMuteButton = true;
             let showVolumeSlider = true;
 
-            if (-1 === supportedCommands.indexOf('Mute')) {
+            if (supportedCommands.indexOf('Mute') === -1) {
                 showMuteButton = false;
             }
 
-            if (-1 === supportedCommands.indexOf('SetVolume')) {
+            if (supportedCommands.indexOf('SetVolume') === -1) {
                 showVolumeSlider = false;
             }
 
@@ -942,7 +945,7 @@ import 'css!assets/css/videoosd';
         }
 
         function updateTimeText(elem, ticks, divider) {
-            if (null == ticks) {
+            if (ticks == null) {
                 elem.innerHTML = '';
                 return;
             }
@@ -963,7 +966,6 @@ import 'css!assets/css/videoosd';
                 const player = currentPlayer;
 
                 if (player) {
-
                     // show subtitle offset feature only if player and media support it
                     const showSubOffset = playbackManager.supportSubtitleOffset(player) &&
                         playbackManager.canHandleOffsetOnCurrentSubtitle(player);
@@ -985,9 +987,9 @@ import 'css!assets/css/videoosd';
         }
 
         function onSettingsOption(selectedOption) {
-            if ('stats' === selectedOption) {
+            if (selectedOption === 'stats') {
                 toggleStats();
-            } else if ('suboffset' === selectedOption) {
+            } else if (selectedOption === 'suboffset') {
                 const player = currentPlayer;
                 if (player) {
                     playbackManager.enableShowingSubtitleOffset(player);
@@ -1061,7 +1063,7 @@ import 'css!assets/css/videoosd';
             const streams = playbackManager.subtitleTracks(player);
             let currentIndex = playbackManager.getSubtitleStreamIndex(player);
 
-            if (null == currentIndex) {
+            if (currentIndex == null) {
                 currentIndex = -1;
             }
 
@@ -1132,8 +1134,9 @@ import 'css!assets/css/videoosd';
             clickedElement = e.target;
 
             const key = keyboardnavigation.getKeyName(e);
+            const isKeyModified = e.ctrlKey || e.altKey || e.metaKey;
 
-            if (!currentVisibleMenu && 32 === e.keyCode) {
+            if (!currentVisibleMenu && e.keyCode === 32) {
                 playbackManager.playPause(currentPlayer);
                 showOsd();
                 return;
@@ -1236,8 +1239,10 @@ import 'css!assets/css/videoosd';
                 case '7':
                 case '8':
                 case '9': {
-                    const percent = parseInt(key, 10) * 10;
-                    playbackManager.seekPercent(percent, currentPlayer);
+                    if (!isKeyModified) {
+                        const percent = parseInt(key, 10) * 10;
+                        playbackManager.seekPercent(percent, currentPlayer);
+                    }
                     break;
                 }
             }

src/controllers/searchpage.js

@@ -1,4 +1,3 @@
-import focusManager from 'focusManager';
 import SearchFields from 'searchFields';
 import SearchResults from 'searchResults';
 import events from 'events';

src/controllers/session/addServer/index.html

@@ -0,0 +1,18 @@
+<div data-role="page" class="page standalonePage">
+    <div class="padded-left padded-right padded-bottom-page">
+        <form class="addServerForm" style="margin: 0 auto;" novalidate>
+            <h1>${HeaderConnectToServer}</h1>
+            <div class="inputContainer">
+                <input is="emby-input" type="url" id="txtServerHost" required="required" label="${LabelServerHost}"/>
+                <div class="fieldDescription">${LabelServerHostHelp}</div>
+            </div>
+            <br />
+            <button is="emby-button" type="submit" class="raised button-submit block">
+                <span>${ButtonConnect}</span>
+            </button>
+            <button is="emby-button" type="button" class="raised button-cancel block btnCancel">
+                <span>${ButtonCancel}</span>
+            </button>
+        </form>
+    </div>
+</div>

src/controllers/session/addServer/index.js

@@ -1,6 +1,5 @@
 import appSettings from 'appSettings';
 import loading from 'loading';
-import browser from 'browser';
 import globalize from 'globalize';
 import 'emby-button';
 

src/controllers/session/forgotPassword/index.html

@@ -0,0 +1,24 @@
+<div data-role="page" id="forgotPasswordPage" class="page standalonePage forgotPasswordPage">
+    <div class="padded-left padded-right padded-bottom-page">
+        <form class="forgotPasswordForm" style="text-align: center; margin: 0 auto;">
+            <div style="text-align: left;">
+                <h1>${HeaderForgotPassword}</h1>
+
+                <div class="inputContainer">
+                    <input is="emby-input" type="text" id="txtName" label="${LabelUser}" autocomplete="off"/>
+                    <div class="fieldDescription">${LabelForgotPasswordUsernameHelp}</div>
+                </div>
+
+                <div>
+                    <button is="emby-button" type="submit" class="raised submit block">
+                        <span>${ButtonSubmit}</span>
+                    </button>
+
+                    <button is="emby-button" type="button" class="raised cancel block btnCancel" onclick="history.back();">
+                        <span>${ButtonCancel}</span>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>

src/controllers/session/forgotPassword/index.js

@@ -3,21 +3,21 @@ import globalize from 'globalize';
 /* eslint-disable indent */
 
     function processForgotPasswordResult(result) {
-        if ('ContactAdmin' == result.Action) {
+        if (result.Action == 'ContactAdmin') {
             return void Dashboard.alert({
                 message: globalize.translate('MessageContactAdminToResetPassword'),
                 title: globalize.translate('HeaderForgotPassword')
             });
         }
 
-        if ('InNetworkRequired' == result.Action) {
+        if (result.Action == 'InNetworkRequired') {
             return void Dashboard.alert({
                 message: globalize.translate('MessageForgotPasswordInNetworkRequired'),
                 title: globalize.translate('HeaderForgotPassword')
             });
         }
 
-        if ('PinCode' == result.Action) {
+        if (result.Action == 'PinCode') {
             let msg = globalize.translate('MessageForgotPasswordFileCreated');
             msg += '<br/>';
             msg += '<br/>';

src/controllers/session/login/index.html

@@ -0,0 +1,57 @@
+<div id="loginPage" data-role="page" class="page standalonePage flex flex-direction-column" data-backbutton="false">
+    <div class="padded-left padded-right padded-bottom-page margin-auto-y">
+        <form class="manualLoginForm margin-auto-x hide">
+            <div class="padded-left padded-right flex align-items-center justify-content-center">
+                <h1 class="sectionTitle">${HeaderPleaseSignIn}</h1>
+            </div>
+            <div style="height:0; overflow: hidden;">
+                <input type="text" name="fakeusernameremembered" tabindex="-1" />
+                <input type="password" name="fakepasswordremembered" tabindex="-1" />
+            </div>
+
+            <div class="inputContainer">
+                <input is="emby-input" type="text" id="txtManualName" required="required" label="${LabelUser}" autocomplete="username" autocapitalize="off" />
+            </div>
+
+            <div class="inputContainer">
+                <input is="emby-input" id="txtManualPassword" type="password" label="${LabelPassword}" autocomplete="current-password" />
+            </div>
+
+            <label class="checkboxContainer">
+                <input is="emby-checkbox" type="checkbox" class="chkRememberLogin" checked />
+                <span>${RememberMe}</span>
+            </label>
+
+            <button is="emby-button" type="submit" class="raised button-submit block">
+                <span>${ButtonSignIn}</span>
+            </button>
+
+            <div style="margin-top:.5em;">
+                <button is="emby-button" type="button" class="raised cancel block btnCancel">
+                    <span>${ButtonCancel}</span>
+                </button>
+            </div>
+        </form>
+
+        <div class="visualLoginForm" style="text-align: center;">
+            <h1 style="margin-top:1em;">${HeaderPleaseSignIn}</h1>
+            <div id="divUsers" class="itemsContainer vertical-wrap centered"></div>
+        </div>
+
+        <div class="readOnlyContent" style="margin: .5em auto 1em;">
+            <button is="emby-button" type="button" class="raised cancel block btnManual">
+                <span>${ButtonManualLogin}</span>
+            </button>
+
+            <button is="emby-button" type="button" class="raised cancel block btnForgotPassword">
+                <span>${ButtonForgotPassword}</span>
+            </button>
+
+            <button is="emby-button" type="button" class="raised block btnSelectServer">
+                <span>${ButtonChangeServer}</span>
+            </button>
+
+            <p class="disclaimer" style="text-align: center; margin-top: 2em;"></p>
+        </div>
+    </div>
+</div>

src/controllers/session/resetPassword/index.html

@@ -0,0 +1,23 @@
+<div data-role="page" class="page standalonePage forgotPasswordPinPage">
+    <div class="padded-left padded-right padded-bottom-page">
+        <form class="forgotPasswordPinForm" style="text-align: center; margin: 0 auto;">
+            <div style="text-align: left;">
+                <h2>${HeaderPasswordReset}</h2>
+
+                <div class="inputContainer">
+                    <input is="emby-input" type="text" id="txtPin" label="${LabelPasswordRecoveryPinCode}" autocomplete="off" required="required"/>
+                </div>
+
+                <div>
+                    <button is="emby-button" type="submit" class="raised submit block">
+                        <span>${ButtonSubmit}</span>
+                    </button>
+
+                    <button is="emby-button" type="button" class="raised cancel block btnCancel" onclick="history.back();">
+                        <span>${ButtonCancel}</span>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>

src/controllers/session/selectServer/index.html

@@ -0,0 +1,17 @@
+<div id="selectServerPage" data-role="page" class="page noSecondaryNavPage standalonePage pageContainer fullWidthContent vertical flex flex-direction-column">
+    <div class="margin-auto-y">
+        <div class="verticalSection flex-shrink-zero w-100 flex flex-direction-column">
+            <div class="padded-left padded-right flex align-items-center justify-content-center">
+                <h1 class="sectionTitle sectionTitle-cards">${HeaderSelectServer}</h1>
+            </div>
+            <div class="padded-top padded-bottom-focusscale flex-grow flex" data-horizontal="true" data-centerfocus="card">
+                <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x servers flex-grow" style="display: block; text-align: center;" data-hovermenu="false" data-multiselect="false"></div>
+            </div>
+        </div>
+        <div class="padded-top padded-left padded-right flex flex-shrink-zero justify-content-center verticalSection flex-wrap-wrap margin-auto-x">
+            <a is="emby-linkbutton" href="addserver.html" class="raised cancel btnAddServer flex-shrink-zero" style="margin: .25em;">
+                <span>${ButtonAddServer}</span>
+            </a>
+        </div>
+    </div>
+</div>

src/controllers/session/selectServer/index.js

@@ -3,7 +3,6 @@ import appRouter from 'appRouter';
 import layoutManager from 'layoutManager';
 import libraryMenu from 'libraryMenu';
 import appSettings from 'appSettings';
-import appHost from 'apphost';
 import focusManager from 'focusManager';
 import connectionManager from 'connectionManager';
 import globalize from 'globalize';
@@ -95,11 +94,6 @@ import 'emby-button';
         }
     }
 
-    function showGeneralError() {
-        loading.hide();
-        alertText(globalize.translate('DefaultErrorMessage'));
-    }
-
     function alertText(text) {
         alertTextWithOptions({
             text: text

src/controllers/shows/episodes.js

@@ -58,7 +58,7 @@ import 'emby-itemscontainer';
             const viewStyle = self.getCurrentViewStyle();
             const itemsContainer = tabContent.querySelector('.itemsContainer');
 
-            if ('List' == viewStyle) {
+            if (viewStyle == 'List') {
                 itemsContainer.classList.add('vertical-list');
                 itemsContainer.classList.remove('vertical-wrap');
             } else {

src/controllers/shows/tvgenres.js

@@ -3,10 +3,8 @@ import loading from 'loading';
 import libraryBrowser from 'libraryBrowser';
 import cardBuilder from 'cardBuilder';
 import lazyLoader from 'lazyLoader';
-import appHost from 'apphost';
 import globalize from 'globalize';
 import appRouter from 'appRouter';
-import dom from 'dom';
 import 'emby-button';
 
 /* eslint-disable indent */
@@ -64,13 +62,13 @@ import 'emby-button';
             const elem = entry.target;
             const id = elem.getAttribute('data-id');
             const viewStyle = self.getCurrentViewStyle();
-            let limit = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 5 : 9;
+            let limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9;
 
             if (enableScrollX()) {
                 limit = 10;
             }
 
-            const enableImageTypes = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 'Primary,Backdrop,Thumb' : 'Primary';
+            const enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary';
             const query = {
                 SortBy: 'SortName',
                 SortOrder: 'Ascending',
@@ -85,8 +83,6 @@ import 'emby-button';
                 ParentId: params.topParentId
             };
             ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
-                const supportsImageAnalysis = appHost.supports('imageanalysis');
-
                 if (viewStyle == 'Thumb') {
                     cardBuilder.buildCards(result.Items, {
                         itemsContainer: elem,

src/controllers/shows/tvlatest.js

@@ -1,7 +1,6 @@
 import loading from 'loading';
 import groupedcards from 'components/groupedcards';
 import cardBuilder from 'cardBuilder';
-import appHost from 'apphost';
 import imageLoader from 'imageLoader';
 
 /* eslint-disable indent */
@@ -24,7 +23,6 @@ import imageLoader from 'imageLoader';
     function loadLatest(context, params, promise) {
         promise.then(function (items) {
             let html = '';
-            appHost.supports('imageanalysis');
             html += cardBuilder.getCardsHtml({
                 items: items,
                 shape: 'backdrop',

src/controllers/shows/tvrecommended.js

@@ -269,8 +269,6 @@ import 'emby-button';
         function loadTab(page, index) {
             currentTabIndex = index;
             getTabController(page, index, function (controller) {
-                initialTabIndex = null;
-
                 if (renderedTabs.indexOf(index) == -1) {
                     renderedTabs.push(index);
                     controller.renderTab();
@@ -301,10 +299,8 @@ import 'emby-button';
             }
         }
 
-        let isViewRestored;
         const self = this;
         let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
-        let initialTabIndex = currentTabIndex;
 
         self.initTab = function () {
             const tabContent = self.tabContent;
@@ -319,7 +315,6 @@ import 'emby-button';
         let renderedTabs = [];
         setScrollClasses(view.querySelector('#resumableItems'), enableScrollX());
         view.addEventListener('viewshow', function (e) {
-            isViewRestored = e.detail.isRestored;
             initTabs();
             if (!view.getAttribute('data-title')) {
                 const parentId = params.topParentId;

src/controllers/shows/tvshows.js

@@ -1,4 +1,3 @@
-import layoutManager from 'layoutManager';
 import loading from 'loading';
 import events from 'events';
 import libraryBrowser from 'libraryBrowser';
@@ -59,7 +58,7 @@ import 'emby-itemscontainer';
             const viewStyle = self.getCurrentViewStyle();
             const itemsContainer = tabContent.querySelector('.itemsContainer');
 
-            if ('List' == viewStyle) {
+            if (viewStyle == 'List') {
                 itemsContainer.classList.add('vertical-list');
                 itemsContainer.classList.remove('vertical-wrap');
             } else {

src/controllers/shows/tvstudios.js

@@ -1,7 +1,6 @@
 import loading from 'loading';
 import libraryBrowser from 'libraryBrowser';
 import cardBuilder from 'cardBuilder';
-import appHost from 'apphost';
 
 /* eslint-disable indent */
 

src/controllers/shows/tvupcoming.js

@@ -1,9 +1,7 @@
 import layoutManager from 'layoutManager';
 import loading from 'loading';
 import datetime from 'datetime';
-import libraryBrowser from 'libraryBrowser';
 import cardBuilder from 'cardBuilder';
-import appHost from 'apphost';
 import imageLoader from 'imageLoader';
 import globalize from 'globalize';
 import 'scrollStyles';
@@ -106,8 +104,6 @@ import 'emby-itemscontainer';
                 html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">';
             }
 
-            let supportsImageAnalysis = appHost.supports('imageanalysis');
-            supportsImageAnalysis = false;
             html += cardBuilder.getCardsHtml({
                 items: group.items,
                 showLocationTypeIndicator: false,
@@ -116,11 +112,11 @@ import 'emby-itemscontainer';
                 preferThumb: true,
                 lazy: true,
                 showDetailsMenu: true,
-                centerText: !supportsImageAnalysis,
+                centerText: true,
                 showParentTitle: true,
                 overlayText: false,
                 allowBottomPadding: allowBottomPadding,
-                cardLayout: supportsImageAnalysis,
+                cardLayout: false,
                 overlayMoreButton: true,
                 missingIndicator: false
             });

src/controllers/user/display/index.html

@@ -0,0 +1,4 @@
+<div id="displayPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderDisplay}" data-backbutton="true">
+    <div class="settingsContainer padded-left padded-right padded-bottom-page">
+    </div>
+</div>

src/controllers/user/home/index.html

@@ -0,0 +1,4 @@
+<div id="homeScreenPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderHome}" data-backbutton="true">
+    <div class="homeScreenSettingsContainer padded-left padded-right padded-bottom-page">
+    </div>
+</div>

src/controllers/user/home/index.js

@@ -1,7 +1,4 @@
 import HomescreenSettings from 'homescreenSettings';
-import dom from 'dom';
-import globalize from 'globalize';
-import loading from 'loading';
 import * as userSettings from 'userSettings';
 import autoFocuser from 'autoFocuser';
 import 'listViewStyle';

src/controllers/user/menu/index.html

@@ -0,0 +1,100 @@
+<div id="myPreferencesMenuPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderSettings}" data-backbutton="true">
+    <div class="padded-left padded-right padded-bottom-page padded-top">
+        <div class="readOnlyContent" style="margin: 0 auto;">
+            <div class="verticalSection verticalSection-extrabottompadding">
+                <h2 class="sectionTitle headerUsername" style="padding-left:.25em;"></h2>
+                <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkMyProfile listItem-border">
+                    <div class="listItem">
+                        <span class="material-icons listItemIcon listItemIcon-transparent person"></span>
+                        <div class="listItemBody">
+                            <div class="listItemBodyText">${ButtonProfile}</div>
+                        </div>
+                    </div>
+                </a>
+
+                <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkDisplayPreferences listItem-border">
+                    <div class="listItem">
+                        <span class="material-icons listItemIcon listItemIcon-transparent tv"></span>
+                        <div class="listItemBody">
+                            <div class="listItemBodyText">${HeaderDisplay}</div>
+                        </div>
+                    </div>
+                </a>
+
+                <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkHomePreferences listItem-border">
+                    <div class="listItem">
+                        <span class="material-icons listItemIcon listItemIcon-transparent home"></span>
+                        <div class="listItemBody">
+                            <div class="listItemBodyText">${HeaderHome}</div>
+                        </div>
+                    </div>
+                </a>
+
+                <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkPlaybackPreferences listItem-border">
+                    <div class="listItem">
+                        <span class="material-icons listItemIcon listItemIcon-transparent play_circle_filled"></span>
+                        <div class="listItemBody">
+                            <div class="listItemBodyText">${TitlePlayback}</div>
+                        </div>
+                    </div>
+                </a>
+
+                <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkSubtitlePreferences listItem-border">
+                    <div class="listItem">
+                        <span class="material-icons listItemIcon listItemIcon-transparent closed_caption"></span>
+                        <div class="listItemBody">
+                            <div class="listItemBodyText">${Subtitles}</div>
+                        </div>
+                    </div>
+                </a>
+
+                <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="clientSettings listItem-border">
+                    <div class="listItem">
+                        <span class="material-icons listItemIcon listItemIcon-transparent devices_other"></span>
+                        <div class="listItemBody">
+                            <div class="listItemBodyText">${ClientSettings}</div>
+                        </div>
+                    </div>
+                </a>
+            </div>
+            <div class="adminSection verticalSection verticalSection-extrabottompadding">
+                <h2 class="sectionTitle" style="padding-left:.25em;">${HeaderAdmin}</h2>
+                <a is="emby-linkbutton" href="dashboard.html" style="display:block;padding:0;margin:0;" class="listItem-border">
+                    <div class="listItem">
+                        <span class="material-icons listItemIcon listItemIcon-transparent dashboard"></span>
+                        <div class="listItemBody">
+                            <div class="listItemBodyText">${TabDashboard}</div>
+                        </div>
+                    </div>
+                </a>
+                <a is="emby-linkbutton" href="edititemmetadata.html" style="display:block;padding:0;margin:0;" class="listItem-border">
+                    <div class="listItem">
+                        <span class="material-icons listItemIcon listItemIcon-transparent mode_edit"></span>
+                        <div class="listItemBody">
+                            <div class="listItemBodyText">${Metadata}</div>
+                        </div>
+                    </div>
+                </a>
+            </div>
+            <div class="userSection verticalSection verticalSection-extrabottompadding">
+                <h2 class="sectionTitle" style="padding-left:.25em;">${HeaderUser}</h2>
+                <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="selectServer hide listItem-border">
+                    <div class="listItem">
+                        <span class="material-icons listItemIcon listItemIcon-transparent wifi"></span>
+                        <div class="listItemBody">
+                            <div class="listItemBodyText">${HeaderSelectServer}</div>
+                        </div>
+                    </div>
+                </a>
+                <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="btnLogout listItem-border">
+                    <div class="listItem">
+                        <span class="material-icons listItemIcon listItemIcon-transparent exit_to_app"></span>
+                        <div class="listItemBody">
+                            <div class="listItemBodyText">${ButtonSignOut}</div>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>

src/controllers/user/menu/index.js

@@ -1,6 +1,4 @@
 import appHost from 'apphost';
-import connectionManager from 'connectionManager';
-import layoutManager from 'layoutManager';
 import 'listViewStyle';
 import 'emby-button';
 

src/controllers/user/playback/index.html

@@ -0,0 +1,3 @@
+<div id="languagePreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${TitlePlayback}" data-backbutton="true">
+    <div class="settingsContainer padded-left padded-right padded-bottom-page"></div>
+</div>

src/controllers/user/playback/index.js

@@ -1,7 +1,4 @@
 import PlaybackSettings from 'playbackSettings';
-import dom from 'dom';
-import globalize from 'globalize';
-import loading from 'loading';
 import * as userSettings from 'userSettings';
 import autoFocuser from 'autoFocuser';
 import 'listViewStyle';

src/controllers/user/profile/index.html

@@ -0,0 +1,69 @@
+<div id="userImagePage" data-role="page" class="page libraryPage userPreferencesPage userPasswordPage noSecondaryNavPage" data-title="${HeaderProfile}" data-menubutton="false">
+    <div class="padded-left padded-right padded-bottom-page">
+        <div class="readOnlyContent" style="margin: 0 auto; padding: 0 1em;">
+            <div style="position:relative;display:inline-block;max-width:200px;">
+                <input id="uploadImage" type="file" accept="image/*" style="position:absolute;right:0;width:100%;height:100%;opacity:0;" />
+                <div id="image" style="width:200px;height:200px;background-repeat:no-repeat;background-position:center;border-radius:100%;background-size:cover;"></div>
+            </div>
+            <div style="vertical-align:top;margin:1em 2em;display:inline-block;">
+                <h2 class="username" style="margin:0;font-size:xx-large;"></h2>
+                <br/>
+                <button is="emby-button" type="button" class="raised hide" id="btnAddImage">
+                    <span>${ButtonAddImage}</span>
+                </button>
+                <button is="emby-button" type="button" class="raised hide" id="btnDeleteImage">
+                    <span>${ButtonDeleteImage}</span>
+                </button>
+            </div>
+        </div>
+        <form class="updatePasswordForm passwordSection userProfileSettingsForm hide" style="margin: 3em auto 0;">
+            <div class="verticalSection">
+                <h2 class="sectionTitle">
+                    ${HeaderPassword}
+                </h2>
+                <div id="fldCurrentPassword" class="inputContainer hide">
+                    <input is="emby-input" type="password" id="txtCurrentPassword" label="${LabelCurrentPassword}" autocomplete="off" />
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="password" id="txtNewPassword" label="${LabelNewPassword}" autocomplete="off" />
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="password" id="txtNewPasswordConfirm" label="${LabelNewPasswordConfirm}" autocomplete="off" />
+                </div>
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${ButtonSave}</span>
+                    </button>
+                    <button is="emby-button" type="button" id="btnResetPassword" class="raised cancel block hide">
+                        <span>${ButtonResetPassword}</span>
+                    </button>
+                </div>
+            </div>
+        </form>
+        <form class="localAccessForm localAccessSection userProfileSettingsForm hide" style="margin: 3em auto 0;">
+            <div class="verticalSection">
+                <h2 class="sectionTitle">${HeaderEasyPinCode}</h2>
+                <div>${EasyPasswordHelp}</div>
+                <br />
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" id="txtEasyPassword" label="${LabelEasyPinCode}" autocomplete="off" pattern="[0-9]*" step="1" maxlength="5" />
+                </div>
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkEnableLocalEasyPassword" />
+                        <span>${LabelInNetworkSignInWithEasyPassword}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${LabelInNetworkSignInWithEasyPasswordHelp}</div>
+                </div>
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${ButtonSave}</span>
+                    </button>
+                    <button is="emby-button" type="button" id="btnResetEasyPassword" class="raised cancel block hide">
+                        <span>${ButtonResetEasyPassword}</span>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>

src/controllers/user/subtitles/index.html

@@ -0,0 +1,3 @@
+<div id="homeScreenPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${Subtitles}" data-backbutton="true">
+    <div class="settingsContainer padded-left padded-right padded-bottom-page"></div>
+</div>

src/controllers/wizard/finish/index.html

@@ -0,0 +1,18 @@
+<div id="wizardFinishPage" data-role="page" class="page standalonePage wizardPage">
+    <div class="padded-left padded-right padded-top">
+        <div class="ui-corner-all ui-shadow wizardContent">
+            <h1>${LabelYoureDone}</h1>
+            <p style="margin:2em 0;">${WizardCompleted}</p>
+            <div class="wizardNavigation">
+                <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();">
+                    <span class="material-icons arrow_back"></span>
+                    <span>${LabelPrevious}</span>
+                </button>
+                <button is="emby-button" type="button" class="raised btnWizardNext button-submit">
+                    <span class="material-icons check"></span>
+                    <span>${LabelFinish}</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

src/controllers/wizard/remote/index.html

@@ -0,0 +1,35 @@
+<div id="wizardSettingsPage" data-role="page" class="page standalonePage wizardPage">
+    <div class="padded-left padded-right padded-top">
+        <div class="ui-corner-all ui-shadow wizardContent">
+            <form class="wizardSettingsForm">
+                <h1>${HeaderConfigureRemoteAccess}</h1>
+
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" id="chkRemoteAccess" checked />
+                        <span>${AllowRemoteAccess}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${AllowRemoteAccessHelp}</div>
+                </div>
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" id="chkEnableUpnp" />
+                        <span>${LabelEnableAutomaticPortMap}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${LabelEnableAutomaticPortMapHelp}</div>
+                </div>
+                <br />
+                <div class="wizardNavigation">
+                    <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();">
+                        <span class="material-icons arrow_back"></span>
+                        <span>${LabelPrevious}</span>
+                    </button>
+                    <button is="emby-button" type="submit" class="raised button-submit">
+                        <span>${LabelNext}</span>
+                        <span class="material-icons arrow_forward"></span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

src/controllers/wizard/settings/index.html

@@ -0,0 +1,31 @@
+<div id="wizardSettingsPage" data-role="page" class="page standalonePage wizardPage">
+    <div class="padded-left padded-right padded-top">
+        <div class="ui-corner-all ui-shadow wizardContent">
+            <form class="wizardSettingsForm">
+                <h1>${HeaderPreferredMetadataLanguage}</h1>
+                <p style="margin:1.5em 0;">${DefaultMetadataLangaugeDescription}</p>
+
+                <div class="selectContainer">
+                    <select is="emby-select" id="selectLanguage" required="required" label="${LabelLanguage}"></select>
+                </div>
+
+                <div class="selectContainer">
+                    <select is="emby-select" id="selectCountry" required="required" label="${LabelCountry}"></select>
+                </div>
+                <br />
+
+                <div class="wizardNavigation">
+                    <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();">
+                        <span class="material-icons arrow_back"></span>
+                        <span>${LabelPrevious}</span>
+                    </button>
+                    <button is="emby-button" type="submit" class="raised button-submit">
+                        <span>${LabelNext}</span>
+                        <span class="material-icons arrow_forward"></span>
+                    </button>
+                </div>
+            </form>
+        </div>
+
+    </div>
+</div>

src/controllers/wizard/start/index.html

@@ -0,0 +1,29 @@
+<div id="wizardStartPage" data-role="page" class="page standalonePage wizardPage">
+    <div class="padded-left padded-right padded-top">
+        <div class="ui-corner-all ui-shadow wizardContent" style="position:relative;">
+            <form class="wizardStartForm">
+                <div>
+                    <h1 style="float:left;">${WelcomeToProject}</h1>
+                    <a is="emby-linkbutton" rel="noopener noreferrer" href="https://docs.jellyfin.org/general/quick-start.html" target="_blank" class="raised raised-alt" style="float:right;margin-top:20px;">
+                        <span>${ButtonQuickStartGuide}</span>
+                    </a>
+                </div>
+
+                <br style="clear:both;" />
+                <p>${ThisWizardWillGuideYou}</p>
+                <br />
+                <div class="selectContainer">
+                    <select is="emby-select" id="selectLocalizationLanguage" label="${LabelPreferredDisplayLanguage}"></select>
+                </div>
+                <br />
+
+                <div class="wizardNavigation" style="text-align:right;">
+                    <button is="emby-button" type="submit" class="raised button-submit">
+                        <span>${LabelNext}</span>
+                        <span class="material-icons arrow_forward"></span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

src/controllers/wizard/user/index.html

@@ -0,0 +1,36 @@
+<div id="wizardUserPage" data-role="page" class="page standalonePage wizardPage">
+    <div class="padded-left padded-right padded-top">
+        <div class="ui-corner-all ui-shadow wizardContent">
+            <form class="wizardUserForm">
+                <div class="verticalSection">
+                    <h1 class="sectionTitle">${TellUsAboutYourself}</h1>
+                    <p style="margin-top:2em;">${UserProfilesIntro}</p>
+                    <br />
+                    <div class="inputContainer">
+                        <input is="emby-input" type="text" id="txtUsername" label="${LabelUsername}" required="required" />
+                        <div class="fieldDescription">${SelectAdminUsername}</div>
+                    </div>
+                    <div class="inputContainer">
+                        <input is="emby-input" id="txtManualPassword" type="password" label="${LabelPassword}" />
+                        <div class="fieldDescription">${LeaveBlankToNotSetAPassword}</div>
+                    </div>
+                    <div class="inputContainer">
+                        <input is="emby-input" id="txtPasswordConfirm" type="password" label="${LabelPasswordConfirm}" />
+                    </div>
+                    <p>${MoreUsersCanBeAddedLater}</p>
+                </div>
+
+                <div class="wizardNavigation">
+                    <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();">
+                        <span class="material-icons arrow_back"></span>
+                        <span>${LabelPrevious}</span>
+                    </button>
+                    <button is="emby-button" type="submit" class="raised button-submit">
+                        <span>${LabelNext}</span>
+                        <span class="material-icons arrow_forward"></span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>