Merge remote-tracking branch 'upstream/master' into sorted-media-sources

src/controllers/dashboard/apikeys.html

@@ -0,0 +1,26 @@
+<div id="apiKeysPage" data-role="page" class="page type-interior advancedConfigurationPage fullWidthContent">
+    <div>
+        <div class="content-primary">
+            <div class="detailSectionHeader">
+                <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">${HeaderApiKeys}</h2>
+                <button is="emby-button" type="button" class="fab btnNewKey submit" style="margin-left:1em;" title="${Add}">
+                    <span class="material-icons add" aria-hidden="true"></span>
+                </button>
+            </div>
+            <p>${HeaderApiKeysHelp}</p>
+            <br />
+            <table class="tblApiKeys detailTable">
+                <caption class="clipForScreenReader">${ApiKeysCaption}</caption>
+                <thead>
+                    <tr>
+                        <th scope="col" class="detailTableHeaderCell"></th>
+                        <th scope="col" class="detailTableHeaderCell">${HeaderApiKey}</th>
+                        <th scope="col" class="detailTableHeaderCell">${HeaderApp}</th>
+                        <th scope="col" class="detailTableHeaderCell">${HeaderDateIssued}</th>
+                    </tr>
+                </thead>
+                <tbody class="resultBody"></tbody>
+            </table>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/apikeys.js

@@ -1,8 +1,13 @@
-define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button'], function (datetime, loading, libraryMenu, dom, globalize) {
-    'use strict';
+import datetime from 'datetime';
+import loading from 'loading';
+import dom from 'dom';
+import globalize from 'globalize';
+import 'emby-button';
+
+/* eslint-disable indent */
 
     function revoke(page, key) {
-        require(['confirm'], function (confirm) {
+        import('confirm').then(({default: confirm}) => {
             confirm(globalize.translate('MessageConfirmRevokeApiKey'), globalize.translate('HeaderConfirmRevokeApiKey')).then(function () {
                 loading.show();
                 ApiClient.ajax({
@@ -16,8 +21,8 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
     }
 
     function renderKeys(page, keys) {
-        var rows = keys.map(function (item) {
-            var html = '';
+        const rows = keys.map(function (item) {
+            let html = '';
             html += '<tr class="detailTableBodyRow detailTableBodyRow-shaded">';
             html += '<td class="detailTableBodyCell">';
             html += '<button type="button" is="emby-button" data-token="' + item.AccessToken + '" class="raised raised-mini btnRevoke" data-mini="true" title="' + globalize.translate('ButtonRevoke') + '" style="margin:0;">' + globalize.translate('ButtonRevoke') + '</button>';
@@ -29,7 +34,7 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
             html += item.AppName || '';
             html += '</td>';
             html += '<td class="detailTableBodyCell" style="vertical-align:middle;">';
-            var date = datetime.parseISO8601Date(item.DateCreated, true);
+            const date = datetime.parseISO8601Date(item.DateCreated, true);
             html += datetime.toLocaleDateString(date) + ' ' + datetime.getDisplayTime(date);
             html += '</td>';
             return html += '</tr>';
@@ -46,7 +51,7 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
     }
 
     function showNewKeyPrompt(page) {
-        require(['prompt'], function (prompt) {
+        import('prompt').then(({default: prompt}) => {
             prompt({
                 title: globalize.translate('HeaderNewApiKey'),
                 label: globalize.translate('LabelAppName'),
@@ -65,12 +70,12 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
     }
 
     pageIdOn('pageinit', 'apiKeysPage', function () {
-        var page = this;
+        const page = this;
         page.querySelector('.btnNewKey').addEventListener('click', function () {
             showNewKeyPrompt(page);
         });
         page.querySelector('.tblApiKeys').addEventListener('click', function (e) {
-            var btnRevoke = dom.parentWithClass(e.target, 'btnRevoke');
+            const btnRevoke = dom.parentWithClass(e.target, 'btnRevoke');
 
             if (btnRevoke) {
                 revoke(page, btnRevoke.getAttribute('data-token'));
@@ -80,4 +85,5 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
     pageIdOn('pagebeforeshow', 'apiKeysPage', function () {
         loadData(this);
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/dashboard.html

@@ -0,0 +1,119 @@
+<div id="dashboardPage" data-role="page" class="page type-interior dashboardHomePage fullWidthContent">
+    <div class="content-primary">
+        <div class="dashboardSections" style="padding-top:.5em;">
+            <div class="dashboardColumn dashboardColumn-2-60 dashboardColumn-3-46">
+                <div class="dashboardSection">
+                    <a is="emby-linkbutton" href="dashboardgeneral.html" class="button-flat sectionTitleTextButton">
+                        <h3>${TabServer}</h3>
+                        <span class="material-icons chevron_right"></span>
+                    </a>
+
+                    <div class="paperList" style="padding: 1em;">
+                        <p id="serverName"></p>
+                        <p id="versionNumber"></p>
+                        <p id="operatingSystem"></p>
+                        <p id="architecture"></p>
+                    </div>
+
+                    <div style="margin-top:1em;">
+                        <button is="emby-button" type="button" id="btnRestartServer" class="raised" onclick="DashboardPage.restart(this);" style="margin-left:0;">
+                            <span>${Restart}</span>
+                        </button>
+                        <button is="emby-button" type="button" id="btnShutdown" class="raised" onclick="DashboardPage.shutdown(this);">
+                            <span>${ButtonShutdown}</span>
+                        </button>
+                    </div>
+
+                    <div style="margin-top: 2em;" class="runningTasksContainer hide">
+                        <h3>${HeaderRunningTasks}</h3>
+                        <div id="divRunningTasks" class="paperList" style="padding: 1em;">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="dashboardSection">
+                    <a is="emby-linkbutton" href="devices.html" class="button-flat sectionTitleTextButton">
+                        <h3>${HeaderActiveDevices}</h3>
+                        <span class="material-icons chevron_right"></span>
+                    </a>
+                    <div class="activeDevices itemsContainer vertical-wrap">
+                    </div>
+                </div>
+            </div>
+
+            <div class="dashboardColumn dashboardColumn-2-40 dashboardColumn-3-27">
+                <div class="dashboardSection">
+                    <a is="emby-linkbutton" href="serveractivity.html?useractivity=true" class="button-flat sectionTitleTextButton">
+                        <h3>${HeaderActivity}</h3>
+                        <span class="material-icons chevron_right"></span>
+                    </a>
+                    <div class="paperList userActivityItems" data-activitylimit="7" data-useractivity="true">
+                    </div>
+                </div>
+            </div>
+            <div class="dashboardColumn dashboardColumn-3-27">
+
+                <div class="dashboardSection activeRecordingsSection hide">
+                    <h3>${HeaderActiveRecordings}</h3>
+                    <div class="activeRecordingItems vertical-wrap" is="emby-itemscontainer">
+                    </div>
+                </div>
+
+                <div class="dashboardSection serverActivitySection hide activityContainer">
+                    <a is="emby-linkbutton" href="serveractivity.html?useractivity=false" class="button-flat sectionTitleTextButton">
+                        <h3>${Alerts}</h3>
+                        <span class="material-icons chevron_right"></span>
+                    </a>
+                    <div class="paperList serverActivityItems" data-activitylimit="4" data-useractivity="false">
+                    </div>
+                </div>
+
+                <div class="dashboardSection">
+                    <a is="emby-linkbutton" href="dashboardgeneral.html" class="button-flat sectionTitleTextButton">
+                        <h3>${HeaderPaths}</h3>
+                        <span class="material-icons chevron_right"></span>
+                    </a>
+                    <div class="paperList">
+                        <div class="listItem listItem-border">
+                            <div class="listItemBody two-line">
+                                <div class="listItemBodyText secondary" style="margin:0;">${LabelCache}</div>
+                                <div class="listItemBodyText" id="cachePath"></div>
+                            </div>
+                        </div>
+                        <div class="listItem listItem-border">
+                            <div class="listItemBody two-line">
+                                <div class="listItemBodyText secondary" style="margin:0;">${LabelLogs}</div>
+                                <div class="listItemBodyText" id="logPath"></div>
+                            </div>
+                        </div>
+                        <div class="listItem listItem-border">
+                            <div class="listItemBody two-line">
+                                <div class="listItemBodyText secondary" style="margin:0;">${LabelMetadata}</div>
+                                <div class="listItemBodyText" id="metadataPath"></div>
+                            </div>
+                        </div>
+                        <div class="listItem listItem-border">
+                            <div class="listItemBody two-line">
+                                <div class="listItemBodyText secondary" style="margin:0;">${LabelTranscodes}</div>
+                                <div class="listItemBodyText" id="transcodePath"></div>
+                            </div>
+                        </div>
+                        <div class="listItem listItem-border">
+                            <div class="listItemBody two-line">
+                                <div class="listItemBodyText secondary" style="margin:0;">${LabelWeb}</div>
+                                <div class="listItemBodyText" id="webPath"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="dashboardFooter">
+            <div style="height:1px;" class="ui-bar-inherit"></div>
+            <div style="margin-top:1em;">
+                <a is="emby-linkbutton" rel="noopener noreferrer" class="button-link" href="https://jellyfin.org" target="_blank">Jellyfin</a>
+            </div>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/dashboard.js

@@ -1,11 +1,30 @@
-define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'loading', 'connectionManager', 'playMethodHelper', 'cardBuilder', 'imageLoader', 'components/activitylog', 'scripts/imagehelper', 'indicators', 'listViewStyle', 'emby-button', 'flexStyles', 'emby-button', 'emby-itemscontainer'], function (datetime, events, itemHelper, serverNotifications, dom, globalize, datefns, dfnshelper, loading, connectionManager, playMethodHelper, cardBuilder, imageLoader, ActivityLog, imageHelper, indicators) {
-    'use strict';
+import datetime from 'datetime';
+import events from 'events';
+import itemHelper from 'itemHelper';
+import serverNotifications from 'serverNotifications';
+import dom from 'dom';
+import globalize from 'globalize';
+import * as datefns from 'date-fns';
+import dfnshelper from 'dfnshelper';
+import loading from 'loading';
+import playMethodHelper from 'playMethodHelper';
+import cardBuilder from 'cardBuilder';
+import imageLoader from 'imageLoader';
+import ActivityLog from 'components/activitylog';
+import imageHelper from 'scripts/imagehelper';
+import indicators from 'indicators';
+import 'listViewStyle';
+import 'emby-button';
+import 'flexStyles';
+import 'emby-itemscontainer';
+
+/* eslint-disable indent */
 
     function showPlaybackInfo(btn, session) {
-        require(['alert'], function (alert) {
-            var title;
-            var text = [];
-            var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
+        import('alert').then(({default: alert}) => {
+            let title;
+            const text = [];
+            const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
 
             if (displayPlayMethod === 'DirectStream') {
                 title = globalize.translate('DirectStreaming');
@@ -33,14 +52,14 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
     }
 
     function showSendMessageForm(btn, session) {
-        require(['prompt'], function (prompt) {
+        import('prompt').then(({default: prompt}) => {
             prompt({
                 title: globalize.translate('HeaderSendMessage'),
                 label: globalize.translate('LabelMessageText'),
                 confirmText: globalize.translate('ButtonSend')
             }).then(function (text) {
                 if (text) {
-                    connectionManager.getApiClient(session.ServerId).sendMessageCommand(session.Id, {
+                    window.connectionManager.getApiClient(session.ServerId).sendMessageCommand(session.Id, {
                         Text: text,
                         TimeoutMs: 5e3
                     });
@@ -50,10 +69,10 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
     }
 
     function showOptionsMenu(btn, session) {
-        require(['actionsheet'], function (actionsheet) {
-            var menuItems = [];
+        import('actionsheet').then(({default: actionsheet}) => {
+            const menuItems = [];
 
-            if (session.ServerId && session.DeviceId !== connectionManager.deviceId()) {
+            if (session.ServerId && session.DeviceId !== window.connectionManager.deviceId()) {
                 menuItems.push({
                     name: globalize.translate('SendMessage'),
                     id: 'sendmessage'
@@ -84,14 +103,14 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
     }
 
     function onActiveDevicesClick(evt) {
-        var btn = dom.parentWithClass(evt.target, 'sessionCardButton');
+        const btn = dom.parentWithClass(evt.target, 'sessionCardButton');
 
         if (btn) {
-            var card = dom.parentWithClass(btn, 'card');
+            const card = dom.parentWithClass(btn, 'card');
 
             if (card) {
-                var sessionId = card.id;
-                var session = (DashboardPage.sessionsList || []).filter(function (dashboardSession) {
+                const sessionId = card.id;
+                const session = (DashboardPage.sessionsList || []).filter(function (dashboardSession) {
                     return 'session' + dashboardSession.Id === sessionId;
                 })[0];
 
@@ -103,9 +122,9 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
                     } else if (btn.classList.contains('btnSessionSendMessage')) {
                         showSendMessageForm(btn, session);
                     } else if (btn.classList.contains('btnSessionStop')) {
-                        connectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'Stop');
+                        window.connectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'Stop');
                     } else if (btn.classList.contains('btnSessionPlayPause') && session.PlayState) {
-                        connectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'PlayPause');
+                        window.connectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'PlayPause');
                     }
                 }
             }
@@ -113,11 +132,11 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
     }
 
     function filterSessions(sessions) {
-        var list = [];
-        var minActiveDate = new Date().getTime() - 9e5;
+        const list = [];
+        const minActiveDate = new Date().getTime() - 9e5;
 
-        for (var i = 0, length = sessions.length; i < length; i++) {
-            var session = sessions[i];
+        for (let i = 0, length = sessions.length; i < length; i++) {
+            const session = sessions[i];
 
             if (!session.NowPlayingItem && !session.UserId) {
                 continue;
@@ -139,7 +158,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             EnableTotalRecordCount: false,
             EnableImageTypes: 'Primary,Thumb,Backdrop'
         }).then(function (result) {
-            var itemsContainer = view.querySelector('.activeRecordingItems');
+            const itemsContainer = view.querySelector('.activeRecordingItems');
 
             if (!result.Items.length) {
                 view.querySelector('.activeRecordingsSection').classList.add('hide');
@@ -169,13 +188,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
     function reloadSystemInfo(view, apiClient) {
         apiClient.getSystemInfo().then(function (systemInfo) {
             view.querySelector('#serverName').innerHTML = globalize.translate('DashboardServerName', systemInfo.ServerName);
-            var localizedVersion = globalize.translate('DashboardVersionNumber', systemInfo.Version);
-
-            if (systemInfo.SystemUpdateLevel !== 'Release') {
-                localizedVersion += ' ' + systemInfo.SystemUpdateLevel;
-            }
-
-            view.querySelector('#versionNumber').innerHTML = localizedVersion;
+            view.querySelector('#versionNumber').innerHTML = globalize.translate('DashboardVersionNumber', systemInfo.Version);
             view.querySelector('#operatingSystem').innerHTML = globalize.translate('DashboardOperatingSystem', systemInfo.OperatingSystem);
             view.querySelector('#architecture').innerHTML = globalize.translate('DashboardArchitecture', systemInfo.SystemArchitecture);
 
@@ -205,31 +218,31 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
     }
 
     function renderActiveConnections(view, sessions) {
-        var html = '';
+        let html = '';
         DashboardPage.sessionsList = sessions;
-        var parentElement = view.querySelector('.activeDevices');
-        var cardElem = parentElement.querySelector('.card');
+        const parentElement = view.querySelector('.activeDevices');
+        const cardElem = parentElement.querySelector('.card');
 
         if (cardElem) {
             cardElem.classList.add('deadSession');
         }
 
-        for (var i = 0, length = sessions.length; i < length; i++) {
-            var session = sessions[i];
-            var rowId = 'session' + session.Id;
-            var elem = view.querySelector('#' + rowId);
+        for (let i = 0, length = sessions.length; i < length; i++) {
+            const session = sessions[i];
+            const rowId = 'session' + session.Id;
+            const elem = view.querySelector('#' + rowId);
 
             if (elem) {
                 DashboardPage.updateSession(elem, session);
             } else {
-                var nowPlayingItem = session.NowPlayingItem;
-                var className = 'scalableCard card activeSession backdropCard backdropCard-scalable';
+                const nowPlayingItem = session.NowPlayingItem;
+                const className = 'scalableCard card activeSession backdropCard backdropCard-scalable';
                 html += '<div class="' + className + '" id="' + rowId + '">';
                 html += '<div class="cardBox visualCardBox">';
                 html += '<div class="cardScalable visualCardBox-cardScalable">';
                 html += '<div class="cardPadder cardPadder-backdrop"></div>';
                 html += '<div class="cardContent">';
-                var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
+                const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
 
                 if (imgUrl) {
                     html += '<div class="sessionNowPlayingContent sessionNowPlayingContent-withbackground"';
@@ -240,7 +253,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
 
                 html += '<div class="sessionNowPlayingInnerContent">';
                 html += '<div class="sessionAppInfo">';
-                var clientImage = DashboardPage.getClientImage(session);
+                const clientImage = DashboardPage.getClientImage(session);
 
                 if (clientImage) {
                     html += clientImage;
@@ -252,14 +265,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
                 html += '</div>';
                 html += '</div>';
 
-                if (session.TranscodingInfo && session.TranscodingInfo.Framerate) {
-                    html += '<div class="sessionTranscodingFramerate">' + session.TranscodingInfo.Framerate + ' fps</div>';
-                } else {
-                    html += '<div class="sessionTranscodingFramerate"></div>';
-                }
-
                 html += '<div class="sessionNowPlayingDetails">';
-                var nowPlayingName = DashboardPage.getNowPlayingName(session);
+                const nowPlayingName = DashboardPage.getNowPlayingName(session);
                 html += '<div class="sessionNowPlayingInfo" data-imgsrc="' + nowPlayingName.image + '">';
                 html += nowPlayingName.html;
                 html += '</div>';
@@ -267,7 +274,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
                 html += '</div>';
 
                 if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
-                    var percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
+                    const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
                     html += indicators.getProgressHtml(percent, {
                         containerClass: 'playbackProgress'
                     });
@@ -279,7 +286,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
                 }
 
                 if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
-                    var percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
+                    const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
                     html += indicators.getProgressHtml(percent, {
                         containerClass: 'transcodingProgress'
                     });
@@ -296,7 +303,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
                 html += '<div class="sessionCardFooter cardFooter">';
                 html += '<div class="sessionCardButtons flex align-items-center justify-content-center">';
 
-                var btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? '' : ' hide';
+                let btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? '' : ' hide';
                 const playIcon = session.PlayState.IsPaused ? 'pause' : 'play_arrow';
 
                 html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><span class="material-icons ' + playIcon + '"></span></button>';
@@ -305,7 +312,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
                 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 !== window.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>';
 
@@ -314,7 +321,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
                 html += '</div>';
 
                 html += '<div class="flex align-items-center justify-content-center">';
-                var userImage = DashboardPage.getUserImage(session);
+                const userImage = DashboardPage.getUserImage(session);
                 html += userImage ? '<div class="activitylogUserPhoto" style="background-image:url(\'' + userImage + "');\"></div>" : '<div style="height:1.71em;"></div>';
                 html += '<div class="sessionUserName">';
                 html += DashboardPage.getUsersHtml(session);
@@ -328,7 +335,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
         }
 
         parentElement.insertAdjacentHTML('beforeend', html);
-        var deadSessionElem = parentElement.querySelector('.deadSession');
+        const deadSessionElem = parentElement.querySelector('.deadSession');
 
         if (deadSessionElem) {
             deadSessionElem.parentNode.removeChild(deadSessionElem);
@@ -336,9 +343,9 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
     }
 
     function renderRunningTasks(view, tasks) {
-        var html = '';
+        let html = '';
         tasks = tasks.filter(function (task) {
-            if ('Idle' != task.State) {
+            if (task.State != 'Idle') {
                 return !task.IsHidden;
             }
 
@@ -351,13 +358,13 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             view.querySelector('.runningTasksContainer').classList.add('hide');
         }
 
-        for (var i = 0, length = tasks.length; i < length; i++) {
-            var task = tasks[i];
+        for (let i = 0, length = tasks.length; i < length; i++) {
+            const task = tasks[i];
             html += '<p>';
             html += task.Name + '<br/>';
 
             if (task.State === 'Running') {
-                var progress = (task.CurrentProgressPercentage || 0).toFixed(1);
+                const progress = (task.CurrentProgressPercentage || 0).toFixed(1);
                 html += '<progress max="100" value="' + progress + '" title="' + progress + '%">';
                 html += progress + '%';
                 html += '</progress>';
@@ -383,9 +390,9 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             apiClient.sendMessage('ScheduledTasksInfoStop');
         },
         getSessionNowPlayingStreamInfo: function (session) {
-            var html = '';
-            var showTranscodingInfo = false;
-            var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
+            let html = '';
+            let showTranscodingInfo = false;
+            const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
 
             if (displayPlayMethod === 'DirectStream') {
                 html += globalize.translate('DirectStreaming');
@@ -402,7 +409,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             }
 
             if (showTranscodingInfo) {
-                var line = [];
+                const line = [];
 
                 if (session.TranscodingInfo) {
                     if (session.TranscodingInfo.Bitrate) {
@@ -434,8 +441,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             return html;
         },
         getSessionNowPlayingTime: function (session) {
-            var nowPlayingItem = session.NowPlayingItem;
-            var html = '';
+            const nowPlayingItem = session.NowPlayingItem;
+            let html = '';
 
             if (nowPlayingItem) {
                 if (session.PlayState.PositionTicks) {
@@ -459,8 +466,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             return session.Client + ' ' + session.ApplicationVersion;
         },
         getNowPlayingName: function (session) {
-            var imgUrl = '';
-            var nowPlayingItem = session.NowPlayingItem;
+            let imgUrl = '';
+            const nowPlayingItem = session.NowPlayingItem;
             // FIXME: It seems that, sometimes, server sends date in the future, so date-fns displays messages like 'in less than a minute'. We should fix
             // how dates are returned by the server when the session is active and show something like 'Active now', instead of past/future sentences
             if (!nowPlayingItem) {
@@ -470,8 +477,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
                 };
             }
 
-            var topText = itemHelper.getDisplayName(nowPlayingItem);
-            var bottomText = '';
+            let topText = itemHelper.getDisplayName(nowPlayingItem);
+            let bottomText = '';
 
             if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
                 bottomText = topText;
@@ -511,13 +518,13 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             };
         },
         getUsersHtml: function (session) {
-            var html = [];
+            const html = [];
 
             if (session.UserId) {
                 html.push(session.UserName);
             }
 
-            for (var i = 0, length = session.AdditionalUsers.length; i < length; i++) {
+            for (let i = 0, length = session.AdditionalUsers.length; i < length; i++) {
                 html.push(session.AdditionalUsers[i].UserName);
             }
 
@@ -535,7 +542,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
         },
         updateSession: function (row, session) {
             row.classList.remove('deadSession');
-            var nowPlayingItem = session.NowPlayingItem;
+            const nowPlayingItem = session.NowPlayingItem;
 
             if (nowPlayingItem) {
                 row.classList.add('playingSession');
@@ -543,7 +550,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
                 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 !== window.connectionManager.deviceId()) {
                 row.querySelector('.btnSessionSendMessage').classList.remove('hide');
             } else {
                 row.querySelector('.btnSessionSendMessage').classList.add('hide');
@@ -555,9 +562,9 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
                 row.querySelector('.btnSessionInfo').classList.add('hide');
             }
 
-            var btnSessionPlayPause = row.querySelector('.btnSessionPlayPause');
+            const btnSessionPlayPause = row.querySelector('.btnSessionPlayPause');
 
-            if (session.ServerId && nowPlayingItem && session.SupportsRemoteControl && session.DeviceId !== connectionManager.deviceId()) {
+            if (session.ServerId && nowPlayingItem && session.SupportsRemoteControl && session.DeviceId !== window.connectionManager.deviceId()) {
                 btnSessionPlayPause.classList.remove('hide');
                 row.querySelector('.btnSessionStop').classList.remove('hide');
             } else {
@@ -573,19 +580,18 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             row.querySelector('.sessionNowPlayingTime').innerHTML = DashboardPage.getSessionNowPlayingTime(session);
             row.querySelector('.sessionUserName').innerHTML = DashboardPage.getUsersHtml(session);
             row.querySelector('.sessionAppSecondaryText').innerHTML = DashboardPage.getAppSecondaryText(session);
-            row.querySelector('.sessionTranscodingFramerate').innerHTML = session.TranscodingInfo && session.TranscodingInfo.Framerate ? session.TranscodingInfo.Framerate + ' fps' : '';
-            var nowPlayingName = DashboardPage.getNowPlayingName(session);
-            var nowPlayingInfoElem = row.querySelector('.sessionNowPlayingInfo');
+            const nowPlayingName = DashboardPage.getNowPlayingName(session);
+            const nowPlayingInfoElem = row.querySelector('.sessionNowPlayingInfo');
 
             if (!(nowPlayingName.image && nowPlayingName.image == nowPlayingInfoElem.getAttribute('data-imgsrc'))) {
                 nowPlayingInfoElem.innerHTML = nowPlayingName.html;
                 nowPlayingInfoElem.setAttribute('data-imgsrc', nowPlayingName.image || '');
             }
 
-            var playbackProgressElem = row.querySelector('.playbackProgress');
+            const playbackProgressElem = row.querySelector('.playbackProgress');
 
             if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
-                var percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
+                const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
                 playbackProgressElem.outerHTML = indicators.getProgressHtml(percent, {
                     containerClass: 'playbackProgress'
                 });
@@ -595,10 +601,10 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
                 });
             }
 
-            var transcodingProgress = row.querySelector('.transcodingProgress');
+            const transcodingProgress = row.querySelector('.transcodingProgress');
 
             if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
-                var percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
+                const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
                 transcodingProgress.outerHTML = indicators.getProgressHtml(percent, {
                     containerClass: 'transcodingProgress'
                 });
@@ -608,8 +614,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
                 });
             }
 
-            var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || '';
-            var imgElem = row.querySelector('.sessionNowPlayingContent');
+            const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || '';
+            const imgElem = row.querySelector('.sessionNowPlayingContent');
 
             if (imgUrl != imgElem.getAttribute('data-src')) {
                 imgElem.style.backgroundImage = imgUrl ? "url('" + imgUrl + "')" : '';
@@ -623,7 +629,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             }
         },
         getClientImage: function (connection) {
-            var iconUrl = imageHelper.getDeviceIcon(connection);
+            const iconUrl = imageHelper.getDeviceIcon(connection);
             return "<img src='" + iconUrl + "' />";
         },
         getNowPlayingImageUrl: function (item) {
@@ -653,7 +659,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
                 });
             }
 
-            var imageTags = (item || {}).ImageTags || {};
+            const imageTags = (item || {}).ImageTags || {};
 
             if (item && imageTags.Thumb) {
                 return ApiClient.getScaledImageUrl(item.Id, {
@@ -707,20 +713,20 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
         },
         systemUpdateTaskKey: 'SystemUpdateTask',
         stopTask: function (btn, id) {
-            var page = dom.parentWithClass(btn, 'page');
+            const page = dom.parentWithClass(btn, 'page');
             ApiClient.stopScheduledTask(id).then(function () {
                 pollForInfo(page, ApiClient);
             });
         },
         restart: function (btn) {
-            require(['confirm'], function (confirm) {
+            import('confirm').then(({default: confirm}) => {
                 confirm({
-                    title: globalize.translate('HeaderRestart'),
+                    title: globalize.translate('Restart'),
                     text: globalize.translate('MessageConfirmRestart'),
-                    confirmText: globalize.translate('ButtonRestart'),
+                    confirmText: globalize.translate('Restart'),
                     primary: 'delete'
                 }).then(function () {
-                    var page = dom.parentWithClass(btn, 'page');
+                    const page = dom.parentWithClass(btn, 'page');
                     page.querySelector('#btnRestartServer').disabled = true;
                     page.querySelector('#btnShutdown').disabled = true;
                     ApiClient.restartServer();
@@ -728,14 +734,14 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             });
         },
         shutdown: function (btn) {
-            require(['confirm'], function (confirm) {
+            import('confirm').then(({default: confirm}) => {
                 confirm({
-                    title: globalize.translate('HeaderShutdown'),
+                    title: globalize.translate('ButtonShutdown'),
                     text: globalize.translate('MessageConfirmShutdown'),
                     confirmText: globalize.translate('ButtonShutdown'),
                     primary: 'delete'
                 }).then(function () {
-                    var page = dom.parentWithClass(btn, 'page');
+                    const page = dom.parentWithClass(btn, 'page');
                     page.querySelector('#btnRestartServer').disabled = true;
                     page.querySelector('#btnShutdown').disabled = true;
                     ApiClient.shutdownServer();
@@ -743,7 +749,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             });
         }
     };
-    return function (view, params) {
+    export default function (view, params) {
         function onRestartRequired(evt, apiClient) {
             console.debug('onRestartRequired not implemented', evt, apiClient);
         }
@@ -782,11 +788,11 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             }
         }
 
-        var serverId = ApiClient.serverId();
+        const serverId = ApiClient.serverId();
         view.querySelector('.activeDevices').addEventListener('click', onActiveDevicesClick);
         view.addEventListener('viewshow', function () {
-            var page = this;
-            var apiClient = ApiClient;
+            const page = this;
+            const apiClient = ApiClient;
 
             if (apiClient) {
                 loading.show();
@@ -823,7 +829,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             }
         });
         view.addEventListener('viewbeforehide', function () {
-            var apiClient = ApiClient;
+            const apiClient = ApiClient;
             events.off(serverNotifications, 'RestartRequired', onRestartRequired);
             events.off(serverNotifications, 'ServerShuttingDown', onServerShuttingDown);
             events.off(serverNotifications, 'ServerRestarting', onServerRestarting);
@@ -837,18 +843,19 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             }
         });
         view.addEventListener('viewdestroy', function () {
-            var page = this;
-            var userActivityLog = page.userActivityLog;
+            const page = this;
+            const userActivityLog = page.userActivityLog;
 
             if (userActivityLog) {
                 userActivityLog.destroy();
             }
 
-            var serverActivityLog = page.serverActivityLog;
+            const serverActivityLog = page.serverActivityLog;
 
             if (serverActivityLog) {
                 serverActivityLog.destroy();
             }
         });
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/dashboard/devices/device.html

@@ -0,0 +1,24 @@
+<div id="devicePage" data-role="page" class="page type-interior devicesPage noSecondaryNavPage">
+    <div>
+        <div class="content-primary">
+            <form class="deviceForm">
+                <div class="verticalSection verticalSection-extrabottompadding">
+                    <div class="sectionTitleContainer flex align-items-center">
+                        <h2 class="sectionTitle reportedName"></h2>
+                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/devices.html">${Help}</a>
+                    </div>
+
+                    <div class="inputContainer">
+                        <input is="emby-input" type="text" id="txtCustomName" label="${LabelDisplayName}" />
+                        <div class="fieldDescription">${LabelCustomDeviceDisplayNameHelp}</div>
+                    </div>
+                </div>
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${Save}</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/devices/device.js

@@ -1,5 +1,9 @@
-define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function (loading, libraryMenu, dom) {
-    'use strict';
+import loading from 'loading';
+import dom from 'dom';
+import 'emby-input';
+import 'emby-button';
+
+/* eslint-disable indent */
 
     function load(page, device, deviceOptions) {
         page.querySelector('#txtCustomName', page).value = deviceOptions.CustomName || '';
@@ -7,13 +11,13 @@ define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function
     }
 
     function loadData() {
-        var page = this;
+        const page = this;
         loading.show();
-        var id = getParameterByName('id');
-        var promise1 = ApiClient.getJSON(ApiClient.getUrl('Devices/Info', {
+        const id = getParameterByName('id');
+        const promise1 = ApiClient.getJSON(ApiClient.getUrl('Devices/Info', {
             Id: id
         }));
-        var promise2 = ApiClient.getJSON(ApiClient.getUrl('Devices/Options', {
+        const promise2 = ApiClient.getJSON(ApiClient.getUrl('Devices/Options', {
             Id: id
         }));
         Promise.all([promise1, promise2]).then(function (responses) {
@@ -23,7 +27,7 @@ define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function
     }
 
     function save(page) {
-        var id = getParameterByName('id');
+        const id = getParameterByName('id');
         ApiClient.ajax({
             url: ApiClient.getUrl('Devices/Options', {
                 Id: id
@@ -37,14 +41,15 @@ define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function
     }
 
     function onSubmit(e) {
-        var form = this;
+        const form = this;
         save(dom.parentWithClass(form, 'page'));
         e.preventDefault();
         return false;
     }
 
-    return function (view, params) {
+    export default function (view, params) {
         view.querySelector('form').addEventListener('submit', onSubmit);
         view.addEventListener('viewshow', loadData);
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/dashboard/devices/devices.html

@@ -0,0 +1,13 @@
+<div id="devicesPage" data-role="page" class="page type-interior devicesPage noSecondaryNavPage">
+    <div>
+        <div class="content-primary">
+            <div class="verticalSection verticalSection">
+                <div class="sectionTitleContainer sectionTitleContainer-cards flex align-items-center">
+                    <h2 class="sectionTitle sectionTitle-cards">${HeaderDevices}</h2>
+                    <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/devices.html">${Help}</a>
+                </div>
+            </div>
+            <div is="emby-itemscontainer" class="devicesList vertical-wrap" data-multiselect="false"></div>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/devices/devices.js

@@ -1,18 +1,27 @@
-define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'date-fns', 'dfnshelper', 'emby-button', 'emby-itemscontainer', 'cardStyle'], function (loading, dom, libraryMenu, globalize, imageHelper, datefns, dfnshelper) {
-    'use strict';
+import loading from 'loading';
+import dom from 'dom';
+import globalize from 'globalize';
+import imageHelper from 'scripts/imagehelper';
+import * as datefns from 'date-fns';
+import dfnshelper from 'dfnshelper';
+import 'emby-button';
+import 'emby-itemscontainer';
+import 'cardStyle';
+
+/* eslint-disable indent */
 
     function canDelete(deviceId) {
         return deviceId !== ApiClient.deviceId();
     }
 
     function deleteDevice(page, id) {
-        var msg = globalize.translate('DeleteDeviceConfirmation');
+        const msg = globalize.translate('DeleteDeviceConfirmation');
 
-        require(['confirm'], function (confirm) {
+        import('confirm').then(({default: confirm}) => {
             confirm({
                 text: msg,
                 title: globalize.translate('HeaderDeleteDevice'),
-                confirmText: globalize.translate('ButtonDelete'),
+                confirmText: globalize.translate('Delete'),
                 primary: 'delete'
             }).then(function () {
                 loading.show();
@@ -29,7 +38,7 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da
     }
 
     function showDeviceMenu(view, btn, deviceId) {
-        var menuItems = [];
+        const menuItems = [];
 
         if (canEdit) {
             menuItems.push({
@@ -47,7 +56,7 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da
             });
         }
 
-        require(['actionsheet'], function (actionsheet) {
+        import('actionsheet').then(({default: actionsheet}) => {
             actionsheet.show({
                 items: menuItems,
                 positionTo: btn,
@@ -66,15 +75,15 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da
     }
 
     function load(page, devices) {
-        var html = '';
+        let html = '';
         html += devices.map(function (device) {
-            var deviceHtml = '';
+            let deviceHtml = '';
             deviceHtml += "<div data-id='" + device.Id + "' class='card backdropCard'>";
             deviceHtml += '<div class="cardBox visualCardBox">';
             deviceHtml += '<div class="cardScalable">';
             deviceHtml += '<div class="cardPadder cardPadder-backdrop"></div>';
             deviceHtml += '<a is="emby-linkbutton" href="' + (canEdit ? 'device.html?id=' + device.Id : '#') + '" class="cardContent cardImageContainer">';
-            var iconUrl = imageHelper.getDeviceIcon(device);
+            const iconUrl = imageHelper.getDeviceIcon(device);
 
             if (iconUrl) {
                 deviceHtml += '<div class="cardImage" style="background-image:url(\'' + iconUrl + "');background-size: auto 64%;background-position:center center;\">";
@@ -124,10 +133,10 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da
         });
     }
 
-    var canEdit = ApiClient.isMinServerVersion('3.4.1.31');
-    return function (view, params) {
+    const canEdit = ApiClient.isMinServerVersion('3.4.1.31');
+    export default function (view, params) {
         view.querySelector('.devicesList').addEventListener('click', function (e) {
-            var btnDeviceMenu = dom.parentWithClass(e.target, 'btnDeviceMenu');
+            const btnDeviceMenu = dom.parentWithClass(e.target, 'btnDeviceMenu');
 
             if (btnDeviceMenu) {
                 showDeviceMenu(view, btnDeviceMenu, btnDeviceMenu.getAttribute('data-id'));
@@ -136,5 +145,6 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da
         view.addEventListener('viewshow', function () {
             loadData(this);
         });
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/dashboard/dlna/profile.html

@@ -0,0 +1,584 @@
+<div id="dlnaProfilePage" data-role="page" class="page type-interior dlnaPage withTabs">
+    <div data-role="content">
+        <div class="content-primary">
+            <form class="dlnaProfileForm" style="max-width: 650px;">
+                <div class="verticalSection">
+                    <div class="sectionTitleContainer flex align-items-center">
+                        <h2 class="sectionTitle">${HeaderProfileInformation}</h2>
+                    </div>
+                </div>
+                <div data-role="controlgroup" data-type="horizontal" data-mini="true">
+                    <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioInfo" data-value="tabInfo">${ButtonInfo}</a>
+                    <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioDirectPlay" data-value="tabDirectPlayProfiles">${TabDirectPlay}</a>
+                    <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioTranscoding" data-value="tabTranscodingProfiles">${Transcoding}</a>
+                    <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioContainers" data-value="tabContainerProfiles">${TabContainers}</a>
+                    <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioCodecs" data-value="tabCodecProfiles">${TabCodecs}</a>
+                    <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioMediaProfiles" data-value="tabMediaProfiles">${TabResponses}</a>
+                </div>
+                <br />
+                <div class="tabContent tabInfo">
+                    <div class="inputContainer">
+                        <input is="emby-input" type="text" id="txtName" required="required" label="${LabelName}" />
+                    </div>
+                    <div class="selectContainer">
+                        <select is="emby-select" id="selectUser" label="${LabelUserLibrary}"></select>
+                        <div class="fieldDescription">${LabelUserLibraryHelp}</div>
+                    </div>
+                    <div>
+                        <h3 class="checkboxListLabel">${LabelSupportedMediaTypes}</h3>
+                        <div class="checkboxList paperList checkboxList-paperList">
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="chkAudio" data-value="Audio" class="chkMediaType" />
+                                <span>${Audio}</span>
+                            </label>
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="chkPhoto" data-value="Photo" class="chkMediaType" />
+                                <span>${OptionProfilePhoto}</span>
+                            </label>
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="chkVideo" data-value="Video" class="chkMediaType" />
+                                <span>${OptionProfileVideo}</span>
+                            </label>
+                        </div>
+                    </div>
+                    <br />
+                    <div class="inputContainer">
+                        <input is="emby-input" type="number" id="txtMaxAllowedBitrate" pattern="[0-9]*" min="1" label="${LabelMaxStreamingBitrate}" />
+                        <div class="fieldDescription">${LabelMaxStreamingBitrateHelp}</div>
+                    </div>
+                    <div class="inputContainer">
+                        <input is="emby-input" type="number" id="txtMusicStreamingTranscodingBitrate" pattern="[0-9]*" min="1" label="${LabelMusicStreamingTranscodingBitrate}" />
+                        <div class="fieldDescription">${LabelMusicStreamingTranscodingBitrateHelp}</div>
+                    </div>
+                    <div style="display:none;">
+                        <label for="chkIgnoreTranscodeByteRangeRequests">${OptionIgnoreTranscodeByteRangeRequests}</label>
+                        <input type="checkbox" id="chkIgnoreTranscodeByteRangeRequests" data-mini="true" />
+                        <div class="fieldDescription">${OptionIgnoreTranscodeByteRangeRequestsHelp}</div>
+                    </div>
+                    <div is="emby-collapse" title="${HeaderIdentification}">
+                        <div class="collapseContent">
+                            <h3>${HeaderIdentificationCriteriaHelp}</h3>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtIdFriendlyName" label="${LabelFriendlyName}" />
+                                <div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtIdManufacturer" label="${LabelManufacturer}" />
+                                <div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtIdManufacturerUrl" label="${LabelManufacturerUrl}" />
+                                <div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtIdModelName" label="${LabelModelName}" />
+                                <div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtIdModelNumber" label="${LabelModelNumber}" />
+                                <div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtIdModelDesription" label="${LabelModelDescription}" />
+                                <div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtIdModelUrl" label="${LabelModelUrl}" />
+                                <div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtIdSerialNumber" label="${LabelSerialNumber}" />
+                                <div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtIdDeviceDescription" label="${LabelDeviceDescription}" />
+                                <div class="fieldDescription">${LabelIdentificationFieldHelp}</div>
+                            </div>
+                            <div>
+                                <h2 style="vertical-align:middle;display:inline-block;">${HeaderHttpHeaders}</h2>
+                                <button is="emby-button" type="button" class="fab btnAddIdentificationHttpHeader submit sectionTitleButton" style="margin-left:1em;" title="${Add}">
+                                    <span class="material-icons add"></span>
+                                </button>
+                            </div>
+                            <div class="httpHeaderIdentificationList"></div>
+                        </div>
+                    </div>
+                    <div is="emby-collapse" title="${Display}">
+                        <div class="collapseContent">
+                            <br />
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label>
+                                    <input is="emby-checkbox" type="checkbox" id="chkRequiresPlainFolders" />
+                                    <span>${OptionPlainStorageFolders}</span>
+                                </label>
+                                <div class="fieldDescription checkboxFieldDescription">${OptionPlainStorageFoldersHelp}</div>
+                            </div>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label>
+                                    <input is="emby-checkbox" type="checkbox" id="chkRequiresPlainVideoItems" />
+                                    <span>${OptionPlainVideoItems}</span>
+                                </label>
+                                <div class="fieldDescription checkboxFieldDescription">${OptionPlainVideoItemsHelp}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div is="emby-collapse" title="${HeaderImageSettings}">
+                        <div class="collapseContent">
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label>
+                                    <input is="emby-checkbox" type="checkbox" id="chkEnableAlbumArtInDidl" data-mini="true" />
+                                    <span>${LabelEmbedAlbumArtDidl}</span>
+                                </label>
+                                <div class="fieldDescription checkboxFieldDescription">${LabelEmbedAlbumArtDidlHelp}</div>
+                            </div>
+                            <div class="checkboxContainer checkboxContainer-withDescription">
+                                <label>
+                                    <input is="emby-checkbox" type="checkbox" id="chkEnableSingleImageLimit" data-mini="true" />
+                                    <span>${LabelEnableSingleImageInDidlLimit}</span>
+                                </label>
+                                <div class="fieldDescription checkboxFieldDescription">${LabelEnableSingleImageInDidlLimitHelp}</div>
+                            </div>
+                            <div class="inputContainer">
+                                <input type="text" is="emby-input" id="txtAlbumArtPn" label="${LabelAlbumArtPN}" />
+                                <div class="fieldDescription">${LabelAlbumArtHelp}</div>
+                            </div>
+                            <div class="inputContainer">
+                                <input type="number" is="emby-input" id="txtAlbumArtMaxWidth" pattern="[0-9]*" min="1" label="${LabelAlbumArtMaxWidth}" />
+                                <div class="fieldDescription">${LabelAlbumArtMaxWidthHelp}</div>
+                            </div>
+                            <div class="inputContainer">
+                                <input type="number" is="emby-input" id="txtAlbumArtMaxHeight" pattern="[0-9]*" min="1" label="${LabelAlbumArtMaxHeight}" />
+                                <div class="fieldDescription">${LabelAlbumArtMaxHeightHelp}</div>
+                            </div>
+                            <div class="inputContainer">
+                                <input type="number" is="emby-input" id="txtIconMaxWidth" pattern="[0-9]*" min="1" label="${LabelIconMaxWidth}" />
+                                <div class="fieldDescription">${LabelIconMaxWidthHelp}</div>
+                            </div>
+                            <div class="inputContainer">
+                                <input type="number" is="emby-input" id="txtIconMaxHeight" pattern="[0-9]*" min="1" label="${LabelIconMaxHeight}" />
+                                <div class="fieldDescription">${LabelIconMaxHeightHelp}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div is="emby-collapse" title="${HeaderServerSettings}">
+                        <div class="collapseContent">
+                            <p>${HeaderProfileServerSettingsHelp}</p>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtInfoFriendlyName" label="${LabelFriendlyName}" />
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtInfoManufacturer" label="${LabelManufacturer}" />
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtInfoManufacturerUrl" label="${LabelManufacturerUrl}" />
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtInfoModelName" label="${LabelModelName}" />
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtInfoModelNumber" label="${LabelModelNumber}" />
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtInfoModelDesription" label="${LabelModelDescription}" />
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtInfoModelUrl" label="${LabelModelUrl}" />
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtInfoSerialNumber" label="${LabelSerialNumber}" />
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtProtocolInfo" label="${LabelProtocolInfo}" />
+                                <div class="fieldDescription">${LabelProtocolInfoHelp}</div>
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtXDlnaCap" label="${LabelXDlnaCap}" />
+                                <div class="fieldDescription">${LabelXDlnaCapHelp}</div>
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtXDlnaDoc" label="${LabelXDlnaDoc}" />
+                                <div class="fieldDescription">${LabelXDlnaDocHelp}</div>
+                            </div>
+                            <div class="inputContainer">
+                                <input is="emby-input" type="text" id="txtSonyAggregationFlags" label="${LabelSonyAggregationFlags}" />
+                                <div class="fieldDescription">${LabelSonyAggregationFlagsHelp}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div is="emby-collapse" title="${HeaderSubtitleProfiles}">
+                        <div class="collapseContent">
+                            <p>${HeaderSubtitleProfilesHelp}</p>
+                            <button is="emby-button" type="button" class="raised submit block btnAddSubtitleProfile">
+                                <span>${Add}</span>
+                            </button>
+                            <div class="subtitleProfileList"></div>
+                            <br />
+                        </div>
+                    </div>
+                    <div is="emby-collapse" title="${HeaderXmlSettings}">
+                        <div class="collapseContent">
+                            <div>
+                                <h2 style="vertical-align:middle;display:inline-block;">${HeaderXmlDocumentAttributes}</h2>
+                                <button is="emby-button" type="button" class="fab btnAddXmlDocumentAttribute submit sectionTitleButton" style="margin-left:1em;" title="${Add}">
+                                    <span class="material-icons add"></span>
+                                </button>
+                            </div>
+                            <div class="xmlDocumentAttributeList"></div>
+                            <div class="fieldDescription">${XmlDocumentAttributeListHelp}</div>
+                            <br />
+                        </div>
+                    </div>
+                </div>
+                <div class="tabContent tabDirectPlayProfiles">
+                    <p>${HeaderDirectPlayProfileHelp}</p>
+                    <button is="emby-button" class="raised submit block btnAddDirectPlayProfile" type="button" data-mini="true" data-icon="plus">${New}</button>
+                    <br />
+                    <div class="directPlayProfiles"></div>
+                </div>
+                <div class="tabContent tabTranscodingProfiles">
+                    <p>${HeaderTranscodingProfileHelp}</p>
+                    <button is="emby-button" class="raised submit block btnAddTranscodingProfile" type="button" data-mini="true" data-icon="plus">${New}</button>
+                    <br />
+                    <div class="transcodingProfiles"></div>
+                </div>
+                <div class="tabContent tabContainerProfiles">
+                    <p>${HeaderContainerProfileHelp}</p>
+                    <button is="emby-button" class="raised submit block btnAddContainerProfile" type="button" data-mini="true" data-icon="plus">${New}</button>
+                    <br />
+                    <div class="containerProfiles"></div>
+                </div>
+                <div class="tabContent tabCodecProfiles">
+                    <p>${HeaderCodecProfileHelp}</p>
+                    <button is="emby-button" class="raised submit block btnAddCodecProfile" type="button" data-icon="plus">${New}</button>
+                    <br />
+                    <div class="codecProfiles"></div>
+                </div>
+                <div class="tabContent tabMediaProfiles">
+                    <p>${HeaderResponseProfileHelp}</p>
+                    <button is="emby-button" class="raised submit block btnAddResponseProfile" type="button" data-mini="true" data-icon="plus">${New}</button>
+                    <br />
+                    <div class="mediaProfiles"></div>
+                </div>
+                <br />
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${Save}</span>
+                    </button>
+                    <button is="emby-button" type="button" class="button-cancel raised block" onclick="Dashboard.navigate('dlnaprofiles.html');">
+                        <span>${ButtonCancel}</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <div data-role="popup" id="popupEditDirectPlayProfile" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
+        <form class="editDirectPlayProfileForm" style="padding:1em;">
+            <div class="ui-bar-a">
+                <h3 class="sectionTitle">${HeaderDirectPlayProfile}</h3>
+            </div>
+            <div data-role="content">
+                <div class="selectContainer">
+                    <select id="selectDirectPlayProfileType" name="selectDirectPlayProfileType" is="emby-select" label="${LabelType}">
+                        <option value="Audio">${Audio}</option>
+                        <option value="Photo">${OptionProfilePhoto}</option>
+                        <option value="Video">${OptionProfileVideo}</option>
+                    </select>
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="text" id="txtDirectPlayContainer" label="${LabelProfileContainer}" />
+                    <div class="fieldDescription">${LabelProfileContainersHelp}</div>
+                </div>
+                <div id="fldDirectPlayVideoCodec" style="margin: 1em 0;">
+                    <div class="inputContainer">
+                        <input is="emby-input" type="text" id="txtDirectPlayVideoCodec" label="${LabelProfileVideoCodecs}" />
+                        <div class="fieldDescription">${LabelProfileCodecsHelp}</div>
+                    </div>
+                </div>
+                <div id="fldDirectPlayAudioCodec" style="margin: 1em 0 2em;">
+                    <div class="inputContainer">
+                        <input is="emby-input" type="text" id="txtDirectPlayAudioCodec" label="${LabelProfileAudioCodecs}" />
+                        <div class="fieldDescription">${LabelProfileCodecsHelp}</div>
+                    </div>
+                </div>
+                <p>
+                    <button is="emby-button" type="submit" class="raised button-submit block" data-icon="check" data-mini="true">
+                        <span>${ButtonOk}</span>
+                    </button>
+                    <button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');" data-mini="true">
+                        <span>${ButtonCancel}</span>
+                    </button>
+                </p>
+            </div>
+        </form>
+    </div>
+    <div data-role="popup" id="transcodingProfilePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
+        <form class="transcodingProfileForm" style="padding:1em;">
+            <div class="ui-bar-a">
+                <h3 class="sectionTitle">${HeaderTranscodingProfile}</h3>
+            </div>
+            <div data-role="content">
+                <div data-role="controlgroup" data-type="horizontal" data-mini="true">
+                    <input type="radio" name="radioTranscodingTab" class="radioTabButton" id="radioTranscodingBasics" value="tabTranscodingBasics">
+                    <label for="radioTranscodingBasics">${ButtonInfo}</label>
+                    <input type="radio" name="radioTranscodingTab" class="radioTabButton" id="radioTranscodingAdvanced" value="tabTranscodingAdvanced">
+                    <label for="radioTranscodingAdvanced">${TabAdvanced}</label>
+                </div>
+                <br />
+                <div class="tabContent tabTranscodingBasics" style="display: none;">
+                    <div class="selectContainer">
+                        <select id="selectTranscodingProfileType" name="selectTranscodingProfileType" is="emby-select" label="${LabelType}">
+                            <option value="Audio">${Audio}</option>
+                            <option value="Photo">${OptionProfilePhoto}</option>
+                            <option value="Video">${OptionProfileVideo}</option>
+                        </select>
+                    </div>
+                    <div id="fldTranscodingProtocol" style="margin: 1em 0;">
+                        <div class="selectContainer">
+                            <select id="selectTranscodingProtocol" name="selectTranscodingProtocol" is="emby-select" label="${LabelProtocol}">
+                                <option value="Http">${OptionProtocolHttp}</option>
+                                <option value="Hls">${OptionProtocolHls}</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="inputContainer">
+                        <input is="emby-input" type="text" id="txtTranscodingContainer" label="${LabelProfileContainer}"; required="required" />
+                    </div>
+                    <div id="fldTranscodingVideoCodec" style="margin: 1em 0;">
+                        <div class="inputContainer">
+                            <input is="emby-input" type="text" id="txtTranscodingVideoCodec" label="${LabelVideoCodec}" />
+                        </div>
+                    </div>
+                    <div id="fldTranscodingAudioCodec" style="margin: 1em 0;">
+                        <div class="inputContainer">
+                            <input is="emby-input" type="text" id="txtTranscodingAudioCodec" label="${LabelAudioCodec}" />
+                        </div>
+                    </div>
+                </div>
+                <div class="tabContent tabTranscodingAdvanced" style="display: none;">
+                    <div id="fldEnableMpegtsM2TsMode" style="margin: 1em 0;">
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="chkEnableMpegtsM2TsMode" />
+                                <span>${OptionEnableM2tsMode}</span>
+                            </label>
+                            <div class="fieldDescription checkboxFieldDescription">${OptionEnableM2tsModeHelp}</div>
+                        </div>
+                    </div>
+                    <div id="fldEstimateContentLength" style="margin: 1em 0;">
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="chkEstimateContentLength" />
+                                <span>${OptionEstimateContentLength}</span>
+                            </label>
+                        </div>
+                    </div>
+                    <div id="fldReportByteRangeRequests" style="margin: 1em 0;">
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label>
+                                <input is="emby-checkbox" type="checkbox" id="chkReportByteRangeRequests" />
+                                <span>${OptionReportByteRangeSeekingWhenTranscoding}</span>
+                            </label>
+                            <div class="fieldDescription checkboxFieldDescription">${OptionReportByteRangeSeekingWhenTranscodingHelp}</div>
+                        </div>
+                    </div>
+                </div>
+                <p>
+                    <button is="emby-button" type="submit" class="raised button-submit block" data-icon="check" data-mini="true">
+                        <span>${ButtonOk}</span>
+                    </button>
+                    <button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');" data-mini="true">
+                        <span>${ButtonCancel}</span>
+                    </button>
+                </p>
+            </div>
+        </form>
+    </div>
+    <div data-role="popup" id="containerProfilePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
+        <form class="containerProfileForm" style="padding:1em;">
+            <div class="ui-bar-a">
+                <h3 class="sectionTitle">${HeaderContainerProfile}</h3>
+            </div>
+            <div data-role="content">
+                <p>${HeaderContainerProfileHelp}</p>
+                <div class="tabContent tabContainerBasics">
+                    <div class="selectContainer">
+                        <select id="selectContainerProfileType" name="selectContainerProfileType" is="emby-select" label="${LabelType}">
+                            <option value="Audio">${Audio}</option>
+                            <option value="Photo">${OptionProfilePhoto}</option>
+                            <option value="Video">${OptionProfileVideo}</option>
+                        </select>
+                    </div>
+                    <div class="inputContainer">
+                        <input is="emby-input" type="text" id="txtContainerProfileContainer" label="${LabelProfileContainer}" />
+                        <div class="fieldDescription">${LabelProfileContainersHelp}</div>
+                    </div>
+                </div>
+                <div class="tabContent tabContainerConditions" style="display: none;"></div>
+                <p>
+                    <button is="emby-button" type="submit" class="raised button-submit block" data-icon="check" data-mini="true">
+                        <span>${ButtonOk}</span>
+                    </button>
+                    <button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');" data-mini="true">
+                        <span>${ButtonCancel}</span>
+                    </button>
+                </p>
+            </div>
+        </form>
+    </div>
+    <div data-role="popup" id="codecProfilePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
+        <form class="codecProfileForm" style="padding:1em;">
+            <div class="ui-bar-a">
+                <h3 class="sectionTitle">${HeaderCodecProfile}</h3>
+            </div>
+            <div data-role="content">
+                <p>${HeaderCodecProfileHelp}</p>
+                <div class="selectContainer">
+                    <select id="selectCodecProfileType" name="selectCodecProfileType" is="emby-select" label="${LabelType}">
+                        <option value="Video">${OptionProfileVideo}</option>
+                        <option value="VideoAudio">${OptionProfileVideoAudio}</option>
+                        <option value="Audio">${Audio}</option>
+                    </select>
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="text" id="txtCodecProfileCodec" label="${LabelProfileCodecs}" />
+                    <div class="fieldDescription">${LabelProfileCodecsHelp}</div>
+                </div>
+                <p>
+                    <button is="emby-button" type="submit" class="raised button-submit block" data-icon="check" data-mini="true">
+                        <span>${ButtonOk}</span>
+                    </button>
+                    <button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');" data-mini="true">
+                        <span>${ButtonCancel}</span>
+                    </button>
+                </p>
+            </div>
+        </form>
+    </div>
+    <div data-role="popup" id="responseProfilePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
+        <form class="editResponseProfileForm" style="padding:1em;">
+            <div class="ui-bar-a">
+                <h3 class="sectionTitle">${HeaderResponseProfile}</h3>
+            </div>
+            <div data-role="content">
+                <div class="selectContainer">
+                    <select id="selectResponseProfileType" name="selectResponseProfileType" is="emby-select" label="${LabelType}">
+                        <option value="Audio">${Audio}</option>
+                        <option value="Photo">${OptionProfilePhoto}</option>
+                        <option value="Video">${OptionProfileVideo}</option>
+                    </select>
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="text" id="txtResponseProfileContainer" label="${LabelProfileContainer}" />
+                    <div class="fieldDescription">${LabelProfileContainersHelp}</div>
+                </div>
+                <div id="fldResponseProfileVideoCodec" style="margin: 1em 0;">
+                    <div class="inputContainer">
+                        <input is="emby-input" type="text" id="txtResponseProfileVideoCodec" label="${LabelProfileVideoCodecs}" />
+                        <div class="fieldDescription">${LabelProfileCodecsHelp}</div>
+                    </div>
+                </div>
+                <div id="fldResponseProfileAudioCodec" style="margin: 1em 0 2em;">
+                    <div class="inputContainer">
+                        <input is="emby-input" type="text" id="txtResponseProfileAudioCodec" label="${LabelProfileAudioCodecs}" />
+                        <div class="fieldDescription">${LabelProfileCodecsHelp}</div>
+                    </div>
+                </div>
+                <p>
+                    <button is="emby-button" type="submit" class="raised button-submit block" data-icon="check" data-mini="true">
+                        <span>${ButtonOk}</span>
+                    </button>
+                    <button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');" data-mini="true">
+                        <span>${ButtonCancel}</span>
+                    </button>
+                </p>
+            </div>
+        </form>
+    </div>
+    <div data-role="popup" id="identificationHeaderPopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
+        <form class="identificationHeaderForm" style="padding:1em;">
+            <div class="ui-bar-a">
+                <h3 class="sectionTitle">${HeaderIdentificationHeader}</h3>
+            </div>
+            <div data-role="content">
+                <div class="inputContainer">
+                    <input is="emby-input" type="text" id="txtIdentificationHeaderName" label="${LabelName}" />
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="text" id="txtIdentificationHeaderValue" label="${LabelValue}" />
+                </div>
+                <div class="selectContainer">
+                    <select id="selectMatchType" name="selectMatchType" is="emby-select" label="${LabelMatchType}">
+                        <option value="Equals">${OptionEquals}</option>
+                        <option value="Regex">${OptionRegex}</option>
+                        <option value="Substring">${OptionSubstring}</option>
+                    </select>
+                </div>
+                <p>
+                    <button is="emby-button" type="submit" class="raised button-submit block" data-icon="check" data-mini="true">
+                        <span>${ButtonOk}</span>
+                    </button>
+                    <button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');" data-mini="true">
+                        <span>${ButtonCancel}</span>
+                    </button>
+                </p>
+            </div>
+        </form>
+    </div>
+    <div data-role="popup" id="xmlAttributePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
+        <form class="xmlAttributeForm" style="padding:1em;">
+            <div class="ui-bar-a">
+                <h3 class="sectionTitle">${HeaderXmlDocumentAttribute}</h3>
+            </div>
+            <div data-role="content">
+                <div class="inputContainer">
+                    <input is="emby-input" type="text" id="txtXmlAttributeName" label="${LabelName}" />
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="text" id="txtXmlAttributeValue" label="${LabelValue}" />
+                </div>
+                <p>
+                    <button is="emby-button" type="submit" class="raised button-submit block" data-icon="check" data-mini="true">
+                        <span>${ButtonOk}</span>
+                    </button>
+                    <button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');" data-mini="true">
+                        <span>${ButtonCancel}</span>
+                    </button>
+                </p>
+            </div>
+        </form>
+    </div>
+    <div data-role="popup" id="subtitleProfilePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
+        <form class="subtitleProfileForm" style="padding:1em;">
+            <div class="ui-bar-a">
+                <h3 class="sectionTitle">${HeaderSubtitleProfile}</h3>
+            </div>
+            <div data-role="content">
+                <div class="inputContainer">
+                    <input is="emby-input" type="text" id="txtSubtitleProfileFormat" label="${LabelFormat}" />
+                    <div class="fieldDescription">${LabelSubtitleFormatHelp}</div>
+                </div>
+                <div class="selectContainer">
+                    <select id="selectSubtitleProfileMethod" name="selectSubtitleProfileMethod" is="emby-select" label="${LabelMethod}">
+                        <option value="Embed">${OptionEmbedSubtitles}</option>
+                        <option value="External">${OptionExternallyDownloaded}</option>
+                        <option value="Hls">${OptionHlsSegmentedSubtitles}</option>
+                    </select>
+                </div>
+                <div class="selectContainer">
+                    <select id="selectSubtitleProfileDidlMode" name="selectSubtitleProfileDidlMode" is="emby-select" label="${LabelDidlMode}">
+                        <option value="">${OptionResElement}</option>
+                        <option value="CaptionInfoEx">${OptionCaptionInfoExSamsung}</option>
+                    </select>
+                </div>
+                <p>
+                    <button is="emby-button" type="submit" class="raised button-submit block" data-icon="check" data-mini="true">
+                        <span>${ButtonOk}</span>
+                    </button>
+                    <button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');" data-mini="true">
+                        <span>${ButtonCancel}</span>
+                    </button>
+                </p>
+            </div>
+        </form>
+    </div>
+</div>

src/controllers/dashboard/dlna/profile.js

@@ -1,10 +1,18 @@
-define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-button', 'emby-input', 'emby-checkbox', 'listViewStyle', 'emby-button'], function ($, loading, globalize) {
-    'use strict';
+import $ from 'jQuery';
+import loading from 'loading';
+import globalize from 'globalize';
+import 'emby-select';
+import 'emby-button';
+import 'emby-input';
+import 'emby-checkbox';
+import 'listViewStyle';
+
+/* eslint-disable indent */
 
     function loadProfile(page) {
         loading.show();
-        var promise1 = getProfile();
-        var promise2 = ApiClient.getUsers();
+        const promise1 = getProfile();
+        const promise2 = ApiClient.getUsers();
         Promise.all([promise1, promise2]).then(function (responses) {
             currentProfile = responses[0];
             renderProfile(page, currentProfile, responses[1]);
@@ -13,20 +21,20 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
     }
 
     function getProfile() {
-        var id = getParameterByName('id');
-        var url = id ? 'Dlna/Profiles/' + id : 'Dlna/Profiles/Default';
+        const id = getParameterByName('id');
+        const url = id ? 'Dlna/Profiles/' + id : 'Dlna/Profiles/Default';
         return ApiClient.getJSON(ApiClient.getUrl(url));
     }
 
     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).checked(profile.EnableAlbumArtInDidl);
-        $('#chkEnableSingleImageLimit', page).checked(profile.EnableSingleAlbumArtLimit);
+        $('#chkEnableAlbumArtInDidl', page).prop('checked', profile.EnableAlbumArtInDidl);
+        $('#chkEnableSingleImageLimit', page).prop('checked', profile.EnableSingleAlbumArtLimit);
         renderXmlDocumentAttributes(page, profile.XmlRootAttributes || []);
-        var idInfo = profile.Identification || {};
+        const idInfo = profile.Identification || {};
         renderIdentificationHeaders(page, idInfo.Headers || []);
         renderSubtitleProfiles(page, profile.SubtitleProfiles || []);
         $('#txtInfoFriendlyName', page).val(profile.FriendlyName || '');
@@ -51,11 +59,11 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
         $('#txtAlbumArtMaxHeight', page).val(profile.MaxAlbumArtHeight || '');
         $('#txtIconMaxWidth', page).val(profile.MaxIconWidth || '');
         $('#txtIconMaxHeight', page).val(profile.MaxIconHeight || '');
-        $('#chkIgnoreTranscodeByteRangeRequests', page).checked(profile.IgnoreTranscodeByteRangeRequests);
+        $('#chkIgnoreTranscodeByteRangeRequests', page).prop('checked', profile.IgnoreTranscodeByteRangeRequests);
         $('#txtMaxAllowedBitrate', page).val(profile.MaxStreamingBitrate || '');
         $('#txtMusicStreamingTranscodingBitrate', page).val(profile.MusicStreamingTranscodingBitrate || '');
-        $('#chkRequiresPlainFolders', page).checked(profile.RequiresPlainFolders);
-        $('#chkRequiresPlainVideoItems', page).checked(profile.RequiresPlainVideoItems);
+        $('#chkRequiresPlainFolders', page).prop('checked', profile.RequiresPlainFolders);
+        $('#chkRequiresPlainVideoItems', page).prop('checked', profile.RequiresPlainVideoItems);
         $('#txtProtocolInfo', page).val(profile.ProtocolInfo || '');
         $('#txtXDlnaCap', page).val(profile.XDlnaCap || '');
         $('#txtXDlnaDoc', page).val(profile.XDlnaDoc || '');
@@ -65,7 +73,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
         profile.ContainerProfiles = profile.ContainerProfiles || [];
         profile.CodecProfiles = profile.CodecProfiles || [];
         profile.ResponseProfiles = profile.ResponseProfiles || [];
-        var usersHtml = '<option></option>' + users.map(function (u) {
+        const usersHtml = '<option></option>' + users.map(function (u) {
             return '<option value="' + u.Id + '">' + u.Name + '</option>';
         }).join('');
         $('#selectUser', page).html(usersHtml).val(profile.UserId || '');
@@ -73,9 +81,9 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
     }
 
     function renderIdentificationHeaders(page, headers) {
-        var index = 0;
-        var html = '<div class="paperList">' + headers.map(function (h) {
-            var li = '<div class="listItem">';
+        let index = 0;
+        const html = '<div class="paperList">' + headers.map(function (h) {
+            let li = '<div class="listItem">';
             li += '<span class="material-icons listItemIcon info"></span>';
             li += '<div class="listItemBody">';
             li += '<h3 class="listItemBodyText">' + h.Name + ': ' + (h.Value || '') + '</h3>';
@@ -86,9 +94,9 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
             index++;
             return li;
         }).join('') + '</div>';
-        var elem = $('.httpHeaderIdentificationList', page).html(html).trigger('create');
+        const elem = $('.httpHeaderIdentificationList', page).html(html).trigger('create');
         $('.btnDeleteIdentificationHeader', elem).on('click', function () {
-            var itemIndex = parseInt(this.getAttribute('data-index'));
+            const itemIndex = parseInt(this.getAttribute('data-index'));
             currentProfile.Identification.Headers.splice(itemIndex, 1);
             renderIdentificationHeaders(page, currentProfile.Identification.Headers);
         });
@@ -103,10 +111,10 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
     }
 
     function editIdentificationHeader(page, header) {
-        isSubProfileNew = null == header;
+        isSubProfileNew = header == null;
         header = header || {};
         currentSubProfile = header;
-        var popup = $('#identificationHeaderPopup', page);
+        const popup = $('#identificationHeaderPopup', page);
         $('#txtIdentificationHeaderName', popup).val(header.Name || '');
         $('#txtIdentificationHeaderValue', popup).val(header.Value || '');
         $('#selectMatchType', popup).val(header.Match || 'Equals');
@@ -130,8 +138,8 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
     }
 
     function renderXmlDocumentAttributes(page, attribute) {
-        var html = '<div class="paperList">' + attribute.map(function (h) {
-            var li = '<div class="listItem">';
+        const html = '<div class="paperList">' + attribute.map(function (h) {
+            let li = '<div class="listItem">';
             li += '<span class="material-icons listItemIcon info"></span>';
             li += '<div class="listItemBody">';
             li += '<h3 class="listItemBodyText">' + h.Name + ' = ' + (h.Value || '') + '</h3>';
@@ -139,19 +147,19 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
             li += '<button type="button" is="paper-icon-button-light" class="btnDeleteXmlAttribute listItemButton" data-index="0"><span class="material-icons delete"></span></button>';
             return li += '</div>';
         }).join('') + '</div>';
-        var elem = $('.xmlDocumentAttributeList', page).html(html).trigger('create');
+        const elem = $('.xmlDocumentAttributeList', page).html(html).trigger('create');
         $('.btnDeleteXmlAttribute', elem).on('click', function () {
-            var itemIndex = parseInt(this.getAttribute('data-index'));
+            const itemIndex = parseInt(this.getAttribute('data-index'));
             currentProfile.XmlRootAttributes.splice(itemIndex, 1);
             renderXmlDocumentAttributes(page, currentProfile.XmlRootAttributes);
         });
     }
 
     function editXmlDocumentAttribute(page, attribute) {
-        isSubProfileNew = null == attribute;
+        isSubProfileNew = attribute == null;
         attribute = attribute || {};
         currentSubProfile = attribute;
-        var popup = $('#xmlAttributePopup', page);
+        const popup = $('#xmlAttributePopup', page);
         $('#txtXmlAttributeName', popup).val(attribute.Name || '');
         $('#txtXmlAttributeValue', popup).val(attribute.Value || '');
         openPopup(popup[0]);
@@ -171,9 +179,9 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
     }
 
     function renderSubtitleProfiles(page, profiles) {
-        var index = 0;
-        var html = '<div class="paperList">' + profiles.map(function (h) {
-            var li = '<div class="listItem lnkEditSubProfile" data-index="' + index + '">';
+        let index = 0;
+        const html = '<div class="paperList">' + profiles.map(function (h) {
+            let li = '<div class="listItem lnkEditSubProfile" data-index="' + index + '">';
             li += '<span class="material-icons listItemIcon info"></span>';
             li += '<div class="listItemBody">';
             li += '<h3 class="listItemBodyText">' + (h.Format || '') + '</h3>';
@@ -183,23 +191,23 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
             index++;
             return li;
         }).join('') + '</div>';
-        var elem = $('.subtitleProfileList', page).html(html).trigger('create');
+        const elem = $('.subtitleProfileList', page).html(html).trigger('create');
         $('.btnDeleteProfile', elem).on('click', function () {
-            var itemIndex = parseInt(this.getAttribute('data-index'));
+            const itemIndex = parseInt(this.getAttribute('data-index'));
             currentProfile.SubtitleProfiles.splice(itemIndex, 1);
             renderSubtitleProfiles(page, currentProfile.SubtitleProfiles);
         });
         $('.lnkEditSubProfile', elem).on('click', function () {
-            var itemIndex = parseInt(this.getAttribute('data-index'));
+            const itemIndex = parseInt(this.getAttribute('data-index'));
             editSubtitleProfile(page, currentProfile.SubtitleProfiles[itemIndex]);
         });
     }
 
     function editSubtitleProfile(page, profile) {
-        isSubProfileNew = null == profile;
+        isSubProfileNew = profile == null;
         profile = profile || {};
         currentSubProfile = profile;
-        var popup = $('#subtitleProfilePopup', page);
+        const popup = $('#subtitleProfilePopup', page);
         $('#txtSubtitleProfileFormat', popup).val(profile.Format || '');
         $('#selectSubtitleProfileMethod', popup).val(profile.Method || '');
         $('#selectSubtitleProfileDidlMode', popup).val(profile.DidlMode || '');
@@ -244,44 +252,42 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
     }
 
     function renderDirectPlayProfiles(page, profiles) {
-        var html = '';
+        let html = '';
         html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
-        var currentType;
-
-        for (var i = 0, length = profiles.length; i < length; i++) {
-            var profile = profiles[i];
+        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;
             }
 
             html += '<div>';
-            html += '<a is="emby-linkbutton" href="#" class="lnkEditSubProfile" data-profileindex="' + i + '">';
+            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>';
                 }
             }
 
             html += '</a>';
-            html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><span class="material-icons delete"></span></button>';
+            html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + index + '"><span class="material-icons delete"></span></button>';
             html += '</div>';
         }
 
         html += '</ul>';
-        var elem = $('.directPlayProfiles', page).html(html).trigger('create');
+        const elem = $('.directPlayProfiles', page).html(html).trigger('create');
         $('.btnDeleteProfile', elem).on('click', function () {
-            var index = this.getAttribute('data-profileindex');
+            const index = this.getAttribute('data-profileindex');
             deleteDirectPlayProfile(page, index);
         });
         $('.lnkEditSubProfile', elem).on('click', function () {
-            var index = parseInt(this.getAttribute('data-profileindex'));
+            const index = parseInt(this.getAttribute('data-profileindex'));
             editDirectPlayProfile(page, currentProfile.DirectPlayProfiles[index]);
         });
     }
@@ -292,10 +298,10 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
     }
 
     function editDirectPlayProfile(page, directPlayProfile) {
-        isSubProfileNew = null == directPlayProfile;
+        isSubProfileNew = directPlayProfile == null;
         directPlayProfile = directPlayProfile || {};
         currentSubProfile = directPlayProfile;
-        var popup = $('#popupEditDirectPlayProfile', page);
+        const popup = $('#popupEditDirectPlayProfile', page);
         $('#selectDirectPlayProfileType', popup).val(directPlayProfile.Type || 'Video').trigger('change');
         $('#txtDirectPlayContainer', popup).val(directPlayProfile.Container || '');
         $('#txtDirectPlayAudioCodec', popup).val(directPlayProfile.AudioCodec || '');
@@ -304,12 +310,12 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
     }
 
     function renderTranscodingProfiles(page, profiles) {
-        var html = '';
+        let html = '';
         html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
-        var currentType;
+        let currentType;
 
-        for (var i = 0, length = profiles.length; i < length; i++) {
-            var profile = profiles[i];
+        for (let i = 0, length = profiles.length; i < length; i++) {
+            const profile = profiles[i];
 
             if (profile.Type !== currentType) {
                 html += '<li data-role="list-divider">' + profile.Type + '</li>';
@@ -321,11 +327,11 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
             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>';
                 }
             }
@@ -336,30 +342,30 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
         }
 
         html += '</ul>';
-        var elem = $('.transcodingProfiles', page).html(html).trigger('create');
+        const elem = $('.transcodingProfiles', page).html(html).trigger('create');
         $('.btnDeleteProfile', elem).on('click', function () {
-            var index = this.getAttribute('data-profileindex');
+            const index = this.getAttribute('data-profileindex');
             deleteTranscodingProfile(page, index);
         });
         $('.lnkEditSubProfile', elem).on('click', function () {
-            var index = parseInt(this.getAttribute('data-profileindex'));
+            const index = parseInt(this.getAttribute('data-profileindex'));
             editTranscodingProfile(page, currentProfile.TranscodingProfiles[index]);
         });
     }
 
     function editTranscodingProfile(page, transcodingProfile) {
-        isSubProfileNew = null == transcodingProfile;
+        isSubProfileNew = transcodingProfile == null;
         transcodingProfile = transcodingProfile || {};
         currentSubProfile = transcodingProfile;
-        var popup = $('#transcodingProfilePopup', page);
+        const popup = $('#transcodingProfilePopup', page);
         $('#selectTranscodingProfileType', popup).val(transcodingProfile.Type || 'Video').trigger('change');
         $('#txtTranscodingContainer', popup).val(transcodingProfile.Container || '');
         $('#txtTranscodingAudioCodec', popup).val(transcodingProfile.AudioCodec || '');
         $('#txtTranscodingVideoCodec', popup).val(transcodingProfile.VideoCodec || '');
         $('#selectTranscodingProtocol', popup).val(transcodingProfile.Protocol || 'Http');
-        $('#chkEnableMpegtsM2TsMode', popup).checked(transcodingProfile.EnableMpegtsM2TsMode || false);
-        $('#chkEstimateContentLength', popup).checked(transcodingProfile.EstimateContentLength || false);
-        $('#chkReportByteRangeRequests', popup).checked('Bytes' == transcodingProfile.TranscodeSeekInfo);
+        $('#chkEnableMpegtsM2TsMode', popup).prop('checked', transcodingProfile.EnableMpegtsM2TsMode || false);
+        $('#chkEstimateContentLength', popup).prop('checked', transcodingProfile.EstimateContentLength || false);
+        $('#chkReportByteRangeRequests', popup).prop('checked', transcodingProfile.TranscodeSeekInfo == 'Bytes');
         $('.radioTabButton:first', popup).trigger('click');
         openPopup(popup[0]);
     }
@@ -376,9 +382,9 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
         currentSubProfile.VideoCodec = $('#txtTranscodingVideoCodec', page).val();
         currentSubProfile.Protocol = $('#selectTranscodingProtocol', page).val();
         currentSubProfile.Context = 'Streaming';
-        currentSubProfile.EnableMpegtsM2TsMode = $('#chkEnableMpegtsM2TsMode', page).checked();
-        currentSubProfile.EstimateContentLength = $('#chkEstimateContentLength', page).checked();
-        currentSubProfile.TranscodeSeekInfo = $('#chkReportByteRangeRequests', page).checked() ? 'Bytes' : 'Auto';
+        currentSubProfile.EnableMpegtsM2TsMode = $('#chkEnableMpegtsM2TsMode', page).is(':checked');
+        currentSubProfile.EstimateContentLength = $('#chkEstimateContentLength', page).is(':checked');
+        currentSubProfile.TranscodeSeekInfo = $('#chkReportByteRangeRequests', page).is(':checked') ? 'Bytes' : 'Auto';
 
         if (isSubProfileNew) {
             currentProfile.TranscodingProfiles.push(currentSubProfile);
@@ -390,12 +396,12 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
     }
 
     function renderContainerProfiles(page, profiles) {
-        var html = '';
+        let html = '';
         html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
-        var currentType;
+        let currentType;
 
-        for (var i = 0, length = profiles.length; i < length; i++) {
-            var profile = profiles[i];
+        for (let i = 0, length = profiles.length; i < length; i++) {
+            const profile = profiles[i];
 
             if (profile.Type !== currentType) {
                 html += '<li data-role="list-divider">' + profile.Type + '</li>';
@@ -420,13 +426,13 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
         }
 
         html += '</ul>';
-        var elem = $('.containerProfiles', page).html(html).trigger('create');
+        const elem = $('.containerProfiles', page).html(html).trigger('create');
         $('.btnDeleteProfile', elem).on('click', function () {
-            var index = this.getAttribute('data-profileindex');
+            const index = this.getAttribute('data-profileindex');
             deleteContainerProfile(page, index);
         });
         $('.lnkEditSubProfile', elem).on('click', function () {
-            var index = parseInt(this.getAttribute('data-profileindex'));
+            const index = parseInt(this.getAttribute('data-profileindex'));
             editContainerProfile(page, currentProfile.ContainerProfiles[index]);
         });
     }
@@ -437,10 +443,10 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
     }
 
     function editContainerProfile(page, containerProfile) {
-        isSubProfileNew = null == containerProfile;
+        isSubProfileNew = containerProfile == null;
         containerProfile = containerProfile || {};
         currentSubProfile = containerProfile;
-        var popup = $('#containerProfilePopup', page);
+        const popup = $('#containerProfilePopup', page);
         $('#selectContainerProfileType', popup).val(containerProfile.Type || 'Video').trigger('change');
         $('#txtContainerProfileContainer', popup).val(containerProfile.Container || '');
         $('.radioTabButton:first', popup).trigger('click');
@@ -461,13 +467,13 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
     }
 
     function renderCodecProfiles(page, profiles) {
-        var html = '';
+        let html = '';
         html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
-        var currentType;
+        let currentType;
 
-        for (var i = 0, length = profiles.length; i < length; i++) {
-            var profile = profiles[i];
-            var type = profile.Type.replace('VideoAudio', 'Video Audio');
+        for (let i = 0, length = profiles.length; i < length; i++) {
+            const profile = profiles[i];
+            const type = profile.Type.replace('VideoAudio', 'Video Audio');
 
             if (type !== currentType) {
                 html += '<li data-role="list-divider">' + type + '</li>';
@@ -492,13 +498,13 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
         }
 
         html += '</ul>';
-        var elem = $('.codecProfiles', page).html(html).trigger('create');
+        const elem = $('.codecProfiles', page).html(html).trigger('create');
         $('.btnDeleteProfile', elem).on('click', function () {
-            var index = this.getAttribute('data-profileindex');
+            const index = this.getAttribute('data-profileindex');
             deleteCodecProfile(page, index);
         });
         $('.lnkEditSubProfile', elem).on('click', function () {
-            var index = parseInt(this.getAttribute('data-profileindex'));
+            const index = parseInt(this.getAttribute('data-profileindex'));
             editCodecProfile(page, currentProfile.CodecProfiles[index]);
         });
     }
@@ -509,10 +515,10 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
     }
 
     function editCodecProfile(page, codecProfile) {
-        isSubProfileNew = null == codecProfile;
+        isSubProfileNew = codecProfile == null;
         codecProfile = codecProfile || {};
         currentSubProfile = codecProfile;
-        var popup = $('#codecProfilePopup', page);
+        const popup = $('#codecProfilePopup', page);
         $('#selectCodecProfileType', popup).val(codecProfile.Type || 'Video').trigger('change');
         $('#txtCodecProfileCodec', popup).val(codecProfile.Codec || '');
         $('.radioTabButton:first', popup).trigger('click');
@@ -533,12 +539,12 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
     }
 
     function renderResponseProfiles(page, profiles) {
-        var html = '';
+        let html = '';
         html += '<ul data-role="listview" data-inset="true" data-split-icon="delete">';
-        var currentType;
+        let currentType;
 
-        for (var i = 0, length = profiles.length; i < length; i++) {
-            var profile = profiles[i];
+        for (let i = 0, length = profiles.length; i < length; i++) {
+            const profile = profiles[i];
 
             if (profile.Type !== currentType) {
                 html += '<li data-role="list-divider">' + profile.Type + '</li>';
@@ -549,11 +555,11 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
             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>';
                 }
             }
@@ -572,13 +578,13 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
         }
 
         html += '</ul>';
-        var elem = $('.mediaProfiles', page).html(html).trigger('create');
+        const elem = $('.mediaProfiles', page).html(html).trigger('create');
         $('.btnDeleteProfile', elem).on('click', function () {
-            var index = this.getAttribute('data-profileindex');
+            const index = this.getAttribute('data-profileindex');
             deleteResponseProfile(page, index);
         });
         $('.lnkEditSubProfile', elem).on('click', function () {
-            var index = parseInt(this.getAttribute('data-profileindex'));
+            const index = parseInt(this.getAttribute('data-profileindex'));
             editResponseProfile(page, currentProfile.ResponseProfiles[index]);
         });
     }
@@ -589,10 +595,10 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
     }
 
     function editResponseProfile(page, responseProfile) {
-        isSubProfileNew = null == responseProfile;
+        isSubProfileNew = responseProfile == null;
         responseProfile = responseProfile || {};
         currentSubProfile = responseProfile;
-        var popup = $('#responseProfilePopup', page);
+        const popup = $('#responseProfilePopup', page);
         $('#selectResponseProfileType', popup).val(responseProfile.Type || 'Video').trigger('change');
         $('#txtResponseProfileContainer', popup).val(responseProfile.Container || '');
         $('#txtResponseProfileAudioCodec', popup).val(responseProfile.AudioCodec || '');
@@ -618,7 +624,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
 
     function saveProfile(page, profile) {
         updateProfile(page, profile);
-        var id = getParameterByName('id');
+        const id = getParameterByName('id');
 
         if (id) {
             ApiClient.ajax({
@@ -627,7 +633,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
                 data: JSON.stringify(profile),
                 contentType: 'application/json'
             }).then(function () {
-                require(['toast'], function (toast) {
+                import('toast').then(({default: toast}) => {
                     toast('Settings saved.');
                 });
             }, Dashboard.processErrorResponse);
@@ -647,8 +653,8 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
 
     function updateProfile(page, profile) {
         profile.Name = $('#txtName', page).val();
-        profile.EnableAlbumArtInDidl = $('#chkEnableAlbumArtInDidl', page).checked();
-        profile.EnableSingleAlbumArtLimit = $('#chkEnableSingleImageLimit', page).checked();
+        profile.EnableAlbumArtInDidl = $('#chkEnableAlbumArtInDidl', page).is(':checked');
+        profile.EnableSingleAlbumArtLimit = $('#chkEnableSingleImageLimit', page).is(':checked');
         profile.SupportedMediaTypes = $('.chkMediaType:checked', page).get().map(function (c) {
             return c.getAttribute('data-value');
         }).join(',');
@@ -675,9 +681,9 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
         profile.MaxAlbumArtHeight = $('#txtAlbumArtMaxHeight', page).val();
         profile.MaxIconWidth = $('#txtIconMaxWidth', page).val();
         profile.MaxIconHeight = $('#txtIconMaxHeight', page).val();
-        profile.RequiresPlainFolders = $('#chkRequiresPlainFolders', page).checked();
-        profile.RequiresPlainVideoItems = $('#chkRequiresPlainVideoItems', page).checked();
-        profile.IgnoreTranscodeByteRangeRequests = $('#chkIgnoreTranscodeByteRangeRequests', page).checked();
+        profile.RequiresPlainFolders = $('#chkRequiresPlainFolders', page).is(':checked');
+        profile.RequiresPlainVideoItems = $('#chkRequiresPlainVideoItems', page).is(':checked');
+        profile.IgnoreTranscodeByteRangeRequests = $('#chkIgnoreTranscodeByteRangeRequests', page).is(':checked');
         profile.MaxStreamingBitrate = $('#txtMaxAllowedBitrate', page).val();
         profile.MusicStreamingTranscodingBitrate = $('#txtMusicStreamingTranscodingBitrate', page).val();
         profile.ProtocolInfo = $('#txtProtocolInfo', page).val();
@@ -687,36 +693,36 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
         profile.UserId = $('#selectUser', page).val();
     }
 
-    var currentProfile;
-    var currentSubProfile;
-    var isSubProfileNew;
-    var allText = globalize.translate('LabelAll');
+    let currentProfile;
+    let currentSubProfile;
+    let isSubProfileNew;
+    const allText = globalize.translate('All');
 
     $(document).on('pageinit', '#dlnaProfilePage', function () {
-        var page = this;
+        const page = this;
         $('.radioTabButton', page).on('click', function () {
             $(this).siblings().removeClass('ui-btn-active');
             $(this).addClass('ui-btn-active');
-            var value = 'A' == this.tagName ? this.getAttribute('data-value') : this.value;
-            var elem = $('.' + value, page);
+            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();
@@ -726,7 +732,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
                 $('#fldEnableMpegtsM2TsMode', page).hide();
             }
 
-            if ('Photo' == this.value) {
+            if (this.value == 'Photo') {
                 $('#fldTranscodingAudioCodec', page).hide();
                 $('#fldEstimateContentLength', page).hide();
                 $('#fldReportByteRangeRequests', page).hide();
@@ -737,13 +743,13 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
             }
         });
         $('#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();
@@ -783,7 +789,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
         $('.xmlAttributeForm').off('submit', DlnaProfilePage.onXmlAttributeFormSubmit).on('submit', DlnaProfilePage.onXmlAttributeFormSubmit);
         $('.subtitleProfileForm').off('submit', DlnaProfilePage.onSubtitleProfileFormSubmit).on('submit', DlnaProfilePage.onSubtitleProfileFormSubmit);
     }).on('pageshow', '#dlnaProfilePage', function () {
-        var page = this;
+        const page = this;
         $('#radioInfo', page).trigger('click');
         loadProfile(page);
     });
@@ -826,4 +832,5 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-select', 'emby-butt
             return false;
         }
     };
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/dlna/profiles.html

@@ -0,0 +1,32 @@
+<div id="dlnaProfilesPage" data-role="page" class="page type-interior dlnaPage withTabs">
+
+    <div>
+        <div class="content-primary">
+
+            <div class="readOnlyContent">
+
+                <div class="verticalSection verticalSection-extrabottompadding">
+                    <div class="sectionTitleContainer flex align-items-center">
+                        <h2 class="sectionTitle">${HeaderCustomDlnaProfiles}</h2>
+                        <a is="emby-linkbutton" href="dlnaprofile.html" class="fab submit" style="margin:0 0 0 1em">
+                            <span class="material-icons add"></span>
+                        </a>
+                    </div>
+
+                    <p>${CustomDlnaProfilesHelp}</p>
+                    <div class="customProfiles"></div>
+                </div>
+
+
+                <div class="verticalSection">
+                    <div class="sectionTitleContainer flex align-items-center">
+                        <h2 class="sectionTitle">${HeaderSystemDlnaProfiles}</h2>
+                    </div>
+
+                    <p>${SystemDlnaProfilesHelp}</p>
+                    <div class="systemProfiles"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/dlna/profiles.js

@@ -1,5 +1,11 @@
-define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-button'], function ($, globalize, loading, libraryMenu) {
-    'use strict';
+import $ from 'jQuery';
+import globalize from 'globalize';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import 'listViewStyle';
+import 'emby-button';
+
+/* eslint-disable indent */
 
     function loadProfiles(page) {
         loading.show();
@@ -12,25 +18,25 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-
 
     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';
         }));
     }
 
     function renderProfiles(page, element, profiles) {
-        var html = '';
+        let html = '';
 
         if (profiles.length) {
             html += '<div class="paperList">';
         }
 
-        for (var i = 0, length = profiles.length; i < length; i++) {
-            var profile = profiles[i];
+        for (let i = 0, length = profiles.length; i < length; i++) {
+            const profile = profiles[i];
             html += '<div class="listItem listItem-border">';
             html += '<span class="listItemIcon material-icons live_tv"></span>';
             html += '<div class="listItemBody two-line">';
@@ -39,8 +45,8 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-
             html += '</a>';
             html += '</div>';
 
-            if ('User' == profile.Type) {
-                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>';
+            if (profile.Type == 'User') {
+                html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile" data-profileid="' + profile.Id + '" title="' + globalize.translate('Delete') + '"><span class="material-icons delete"></span></button>';
             }
 
             html += '</div>';
@@ -52,13 +58,13 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-
 
         element.innerHTML = html;
         $('.btnDeleteProfile', element).on('click', function () {
-            var id = this.getAttribute('data-profileid');
+            const id = this.getAttribute('data-profileid');
             deleteProfile(page, id);
         });
     }
 
     function deleteProfile(page, id) {
-        require(['confirm'], function (confirm) {
+        import('confirm').then(({default: confirm}) => {
             confirm(globalize.translate('MessageConfirmProfileDeletion'), globalize.translate('HeaderConfirmProfileDeletion')).then(function () {
                 loading.show();
                 ApiClient.ajax({
@@ -75,7 +81,7 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-
     function getTabs() {
         return [{
             href: 'dlnasettings.html',
-            name: globalize.translate('TabSettings')
+            name: globalize.translate('Settings')
         }, {
             href: 'dlnaprofiles.html',
             name: globalize.translate('TabProfiles')
@@ -86,4 +92,5 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-
         libraryMenu.setTabs('dlna', 1, getTabs);
         loadProfiles(this);
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/dlna/settings.html

@@ -0,0 +1,69 @@
+<div id="dlnaSettingsPage" data-role="page" class="page type-interior withTabs">
+
+    <div>
+        <div class="content-primary">
+
+            <form class="dlnaSettingsForm">
+
+                <div class="verticalSection">
+                    <div class="sectionTitleContainer flex align-items-center">
+                        <h2 class="sectionTitle">${Settings}</h2>
+                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/networking/dlna.html">${Help}</a>
+                    </div>
+                </div>
+
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" id="chkEnablePlayTo" />
+                        <span>${LabelEnableDlnaPlayTo}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${LabelEnableDlnaPlayToHelp}</div>
+                </div>
+
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" id="chkEnableDlnaDebugLogging" />
+                        <span>${LabelEnableDlnaDebugLogging}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${LabelEnableDlnaDebugLoggingHelp}</div>
+                </div>
+
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" id="txtClientDiscoveryInterval" min="1" max="300" label="${LabelEnableDlnaClientDiscoveryInterval}" />
+                    <div class="fieldDescription">${LabelEnableDlnaClientDiscoveryIntervalHelp}</div>
+                </div>
+
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" id="chkEnableServer" />
+                        <span>${LabelEnableDlnaServer}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${LabelEnableDlnaServerHelp}</div>
+                </div>
+
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" id="chkBlastAliveMessages" />
+                        <span>${LabelEnableBlastAliveMessages}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${LabelEnableBlastAliveMessagesHelp}</div>
+                </div>
+
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" id="txtBlastInterval" min="1" max="3600" label="${LabelBlastMessageInterval}" />
+                    <div class="fieldDescription">${LabelBlastMessageIntervalHelp}</div>
+                </div>
+                <div class="selectContainer">
+                    <select is="emby-select" id="selectUser" data-mini="true" label="${LabelDefaultUser}"></select>
+                    <div class="fieldDescription">${LabelDefaultUserHelp}</div>
+                </div>
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${Save}</span>
+                    </button>
+                </div>
+            </form>
+
+        </div>
+    </div>
+</div>

src/controllers/dashboard/dlna/settings.js

@@ -1,14 +1,18 @@
-define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function ($, loading, libraryMenu, globalize) {
-    'use strict';
+import $ from 'jQuery';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+
+/* eslint-disable indent */
 
     function loadPage(page, config, users) {
         page.querySelector('#chkEnablePlayTo').checked = config.EnablePlayTo;
         page.querySelector('#chkEnableDlnaDebugLogging').checked = config.EnableDebugLog;
         $('#txtClientDiscoveryInterval', page).val(config.ClientDiscoveryIntervalSeconds);
-        $('#chkEnableServer', page).checked(config.EnableServer);
-        $('#chkBlastAliveMessages', page).checked(config.BlastAliveMessages);
+        $('#chkEnableServer', page).prop('checked', config.EnableServer);
+        $('#chkBlastAliveMessages', page).prop('checked', config.BlastAliveMessages);
         $('#txtBlastInterval', page).val(config.BlastAliveMessageIntervalSeconds);
-        var usersHtml = users.map(function (u) {
+        const usersHtml = users.map(function (u) {
             return '<option value="' + u.Id + '">' + u.Name + '</option>';
         }).join('');
         $('#selectUser', page).html(usersHtml).val(config.DefaultUserId || '');
@@ -17,13 +21,13 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
 
     function onSubmit() {
         loading.show();
-        var form = this;
+        const form = this;
         ApiClient.getNamedConfiguration('dlna').then(function (config) {
             config.EnablePlayTo = form.querySelector('#chkEnablePlayTo').checked;
             config.EnableDebugLog = form.querySelector('#chkEnableDlnaDebugLogging').checked;
             config.ClientDiscoveryIntervalSeconds = $('#txtClientDiscoveryInterval', form).val();
-            config.EnableServer = $('#chkEnableServer', form).checked();
-            config.BlastAliveMessages = $('#chkBlastAliveMessages', form).checked();
+            config.EnableServer = $('#chkEnableServer', form).is(':checked');
+            config.BlastAliveMessages = $('#chkBlastAliveMessages', form).is(':checked');
             config.BlastAliveMessageIntervalSeconds = $('#txtBlastInterval', form).val();
             config.DefaultUserId = $('#selectUser', form).val();
             ApiClient.updateNamedConfiguration('dlna', config).then(Dashboard.processServerConfigurationUpdateResult);
@@ -34,7 +38,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
     function getTabs() {
         return [{
             href: 'dlnasettings.html',
-            name: globalize.translate('TabSettings')
+            name: globalize.translate('Settings')
         }, {
             href: 'dlnaprofiles.html',
             name: globalize.translate('TabProfiles')
@@ -46,11 +50,12 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
     }).on('pageshow', '#dlnaSettingsPage', function () {
         libraryMenu.setTabs('dlna', 0, getTabs);
         loading.show();
-        var page = this;
-        var promise1 = ApiClient.getNamedConfiguration('dlna');
-        var promise2 = ApiClient.getUsers();
+        const page = this;
+        const promise1 = ApiClient.getNamedConfiguration('dlna');
+        const promise2 = ApiClient.getUsers();
         Promise.all([promise1, promise2]).then(function (responses) {
             loadPage(page, responses[0], responses[1]);
         });
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/encodingsettings.html

@@ -0,0 +1,185 @@
+<div id="encodingSettingsPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs">
+    <div>
+        <div class="content-primary">
+            <form class="encodingSettingsForm">
+                <div class="verticalSection">
+                    <div class="sectionTitleContainer flex align-items-center">
+                        <h2 class="sectionTitle">${Transcoding}</h2>
+                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/transcoding.html">${Help}</a>
+                    </div>
+                </div>
+
+                <div class="selectContainer">
+                    <select is="emby-select" id="selectVideoDecoder" label="${LabelHardwareAccelerationType}">
+                        <option value="">${None}</option>
+                        <option value="amf">AMD AMF</option>
+                        <option value="qsv">Intel Quick Sync</option>
+                        <option value="mediacodec">MediaCodec Android</option>
+                        <option value="omx">OpenMAX OMX</option>
+                        <option value="nvenc">Nvidia NVENC</option>
+                        <option value="vaapi">Video Acceleration API (VAAPI)</option>
+                        <option value="h264_v4l2m2m">Exynos V4L2 MFC</option>
+                        <option value="videotoolbox">Video ToolBox</option>
+                    </select>
+                    <div class="fieldDescription">
+                        <a is="emby-linkbutton" rel="noopener noreferrer" class="button-link" href="https://docs.jellyfin.org/general/administration/hardware-acceleration.html" target="_blank">${LabelHardwareAccelerationTypeHelp}</a>
+                    </div>
+                </div>
+
+                <div class="inputContainer hide fldVaapiDevice">
+                    <input is="emby-input" type="text" id="txtVaapiDevice" label="${LabelVaapiDevice}" />
+                    <div class="fieldDescription">${LabelVaapiDeviceHelp}</div>
+                </div>
+
+                <div class="hardwareAccelerationOptions hide">
+                    <div class="checkboxListContainer decodingCodecsList">
+                        <h3 class="checkboxListLabel">${LabelEnableHardwareDecodingFor}</h3>
+                        <div class="checkboxList">
+                            <label>
+                                <input type="checkbox" is="emby-checkbox" class="chkDecodeCodec" data-codec="h264" data-types="amf,qsv,nvenc,vaapi,omx,mediacodec,videotoolbox" />
+                                <span>H264</span>
+                            </label>
+                            <label>
+                                <input type="checkbox" is="emby-checkbox" class="chkDecodeCodec" data-codec="hevc" data-types="amf,qsv,nvenc,vaapi,mediacodec,videotoolbox" />
+                                <span>HEVC</span>
+                            </label>
+                            <label>
+                                <input type="checkbox" is="emby-checkbox" class="chkDecodeCodec" data-codec="mpeg2video" data-types="amf,qsv,nvenc,vaapi,omx,mediacodec,videotoolbox" />
+                                <span>MPEG2</span>
+                            </label>
+                            <label>
+                                <input type="checkbox" is="emby-checkbox" class="chkDecodeCodec" data-codec="mpeg4" data-types="amf,nvenc,omx,mediacodec,videotoolbox" />
+                                <span>MPEG4</span>
+                            </label>
+                            <label>
+                                <input type="checkbox" is="emby-checkbox" class="chkDecodeCodec" data-codec="vc1" data-types="amf,qsv,nvenc,vaapi,omx,videotoolbox" />
+                                <span>VC1</span>
+                            </label>
+                            <label>
+                                <input type="checkbox" is="emby-checkbox" class="chkDecodeCodec" data-codec="vp8" data-types="qsv,nvenc,vaapi,mediacodec,videotoolbox" />
+                                <span>VP8</span>
+                            </label>
+                            <label>
+                                <input type="checkbox" is="emby-checkbox" class="chkDecodeCodec" data-codec="vp9" data-types="amf,qsv,nvenc,vaapi,mediacodec,videotoolbox" />
+                                <span>VP9</span>
+                            </label>
+                        </div>
+                    </div>
+
+                    <div class="checkboxListContainer">
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkDecodingColorDepth10Hevc" />
+                            <span>${EnableDecodingColorDepth10Hevc}</span>
+                        </label>
+                    </div>
+                    <div class="checkboxListContainer">
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkDecodingColorDepth10Vp9" />
+                            <span>${EnableDecodingColorDepth10Vp9}</span>
+                        </label>
+                    </div>
+
+                    <div class="checkboxListContainer">
+                        <div class="checkboxList">
+                            <label>
+                                <input type="checkbox" is="emby-checkbox" id="chkHardwareEncoding" />
+                                <span>${EnableHardwareEncoding}</span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="selectContainer">
+                    <select is="emby-select" id="selectThreadCount" label="${LabelTranscodingThreadCount}">
+                        <option value="-1">${Auto}</option>
+                        <option value="1">1</option>
+                        <option value="2">2</option>
+                        <option value="3">3</option>
+                        <option value="4">4</option>
+                        <option value="5">5</option>
+                        <option value="6">6</option>
+                        <option value="7">7</option>
+                        <option value="8">8</option>
+                        <option value="0">${OptionMax}</option>
+                    </select>
+                    <div class="fieldDescription">${LabelTranscodingThreadCountHelp}</div>
+                </div>
+
+                <div class="inputContainer fldEncoderPath">
+                    <div style="display: flex; align-items: center;">
+                        <div style="flex-grow:1;">
+                            <input is="emby-input" class="txtEncoderPath" label="${LabelffmpegPath}" autocomplete="off" />
+                        </div>
+                        <button type="button" is="paper-icon-button-light" id="btnSelectEncoderPath" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
+                    </div>
+                    <div class="fieldDescription">
+                        <div>${LabelffmpegPathHelp}</div>
+                    </div>
+                </div>
+                <div class="inputContainer">
+                    <div style="display: flex; align-items: center;">
+                        <div style="flex-grow:1;">
+                            <input is="emby-input" id="txtTranscodingTempPath" label="${LabelTranscodePath}" autocomplete="off" />
+                        </div>
+                        <button type="button" is="paper-icon-button-light" id="btnSelectTranscodingTempPath" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
+                    </div>
+                    <div class="fieldDescription">${LabelTranscodingTempPathHelp}</div>
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" id="txtDownMixAudioBoost" pattern="[0-9]*" required="required" min=".5" max="3" step=".1" label="${LabelDownMixAudioScale}" />
+                    <div class="fieldDescription">${LabelDownMixAudioScaleHelp}</div>
+                </div>
+
+                <div class="selectContainer">
+                    <select is="emby-select" id="selectEncoderPreset" label="${LabelEncoderPreset}">
+                        <option value="">${Auto}</option>
+                        <option value="veryslow">veryslow</option>
+                        <option value="slower">slower</option>
+                        <option value="slow">slow</option>
+                        <option value="medium">medium</option>
+                        <option value="fast">fast</option>
+                        <option value="faster">faster</option>
+                        <option value="veryfast">veryfast</option>
+                        <option value="superfast">superfast</option>
+                        <option value="ultrafast">ultrafast</option>
+                    </select>
+                    <div class="fieldDescription">${EncoderPresetHelp}</div>
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" id="txtH264Crf" pattern="[0-9]*" min="0" max="51" step="1" label="${LabelH264Crf}" />
+                    <div class="fieldDescription">${H264CrfHelp}</div>
+                </div>
+
+                <div class="selectContainer">
+                    <select is="emby-select" id="selectDeinterlaceMethod" label="${LabelDeinterlaceMethod}">
+                        <option value="yadif">${Yadif}</option>
+                        <option value="yadif_bob">${YadifBob}</option>
+                    </select>
+                    <div class="fieldDescription">${DeinterlaceMethodHelp}</div>
+                </div>
+
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input is="emby-checkbox" type="checkbox" id="chkEnableSubtitleExtraction" />
+                        <span>${AllowOnTheFlySubtitleExtraction}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${AllowOnTheFlySubtitleExtractionHelp}</div>
+                </div>
+
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input is="emby-checkbox" type="checkbox" id="chkEnableThrottling" />
+                        <span>${AllowFfmpegThrottling}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${AllowFfmpegThrottlingHelp}</div>
+                </div>
+
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${Save}</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/encodingsettings.js

@@ -1,10 +1,17 @@
-define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, loading, globalize, dom, libraryMenu) {
-    'use strict';
+import $ from 'jQuery';
+import loading from 'loading';
+import globalize from 'globalize';
+import dom from 'dom';
+import libraryMenu from 'libraryMenu';
+
+/* eslint-disable indent */
 
     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;
         page.querySelector('#chkHardwareEncoding').checked = config.EnableHardwareEncoding;
         $('#selectVideoDecoder', page).val(config.HardwareAccelerationType);
         $('#selectThreadCount', page).val(config.EncodingThreadCount);
@@ -25,10 +32,10 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
 
     function onSaveEncodingPathFailure(response) {
         loading.hide();
-        var msg = '';
+        let msg = '';
         msg = globalize.translate('FFmpegSavePathNotFound');
 
-        require(['alert'], function (alert) {
+        import('alert').then(({default: alert}) => {
             alert(msg);
         });
     }
@@ -38,18 +45,19 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
             return ApiClient.ajax({
                 url: ApiClient.getUrl('System/MediaEncoder/Path'),
                 type: 'POST',
-                data: {
+                data: JSON.stringify({
                     Path: form.querySelector('.txtEncoderPath').value,
                     PathType: 'Custom'
-                }
+                }),
+                contentType: 'application/json'
             }).then(Dashboard.processServerConfigurationUpdateResult, onSaveEncodingPathFailure);
         });
     }
 
     function onSubmit() {
-        var form = this;
+        const form = this;
 
-        var onDecoderConfirmed = function () {
+        const onDecoderConfirmed = function () {
             loading.show();
             ApiClient.getNamedConfiguration('encoding').then(function (config) {
                 config.DownMixAudioBoost = $('#txtDownMixAudioBoost', form).val();
@@ -67,12 +75,14 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
                 }), function (c) {
                     return c.getAttribute('data-codec');
                 });
+                config.EnableDecodingColorDepth10Hevc = form.querySelector('#chkDecodingColorDepth10Hevc').checked;
+                config.EnableDecodingColorDepth10Vp9 = form.querySelector('#chkDecodingColorDepth10Vp9').checked;
                 config.EnableHardwareEncoding = form.querySelector('#chkHardwareEncoding').checked;
                 ApiClient.updateNamedConfiguration('encoding', config).then(function () {
                     updateEncoder(form);
                 }, function () {
-                    require(['alert'], function (alert) {
-                        alert(globalize.translate('DefaultErrorMessage'));
+                    import('alert').then(({default: alert}) => {
+                        alert(globalize.translate('ErrorDefault'));
                     });
 
                     Dashboard.processServerConfigurationUpdateResult();
@@ -81,7 +91,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
         };
 
         if ($('#selectVideoDecoder', form).val()) {
-            require(['alert'], function (alert) {
+            import('alert').then(({default: alert}) => {
                 alert({
                     title: globalize.translate('TitleHardwareAcceleration'),
                     text: globalize.translate('HardwareAccelerationWarning')
@@ -96,9 +106,9 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
 
     function setDecodingCodecsVisible(context, value) {
         value = value || '';
-        var any;
+        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');
@@ -119,7 +129,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
             name: globalize.translate('Transcoding')
         }, {
             href: 'playbackconfiguration.html',
-            name: globalize.translate('TabResumeSettings')
+            name: globalize.translate('ButtonResume')
         }, {
             href: 'streamingsettings.html',
             name: globalize.translate('TabStreaming')
@@ -127,9 +137,9 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
     }
 
     $(document).on('pageinit', '#encodingSettingsPage', function () {
-        var page = this;
+        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 {
@@ -146,8 +156,8 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
             setDecodingCodecsVisible(page, this.value);
         });
         $('#btnSelectEncoderPath', page).on('click.selectDirectory', function () {
-            require(['directorybrowser'], function (directoryBrowser) {
-                var picker = new directoryBrowser();
+            import('directorybrowser').then(({default: directoryBrowser}) => {
+                const picker = new directoryBrowser();
                 picker.show({
                     includeFiles: true,
                     callback: function (path) {
@@ -161,8 +171,8 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
             });
         });
         $('#btnSelectTranscodingTempPath', page).on('click.selectDirectory', function () {
-            require(['directorybrowser'], function (directoryBrowser) {
-                var picker = new directoryBrowser();
+            import('directorybrowser').then(({default: directoryBrowser}) => {
+                const picker = new directoryBrowser();
                 picker.show({
                     callback: function (path) {
                         if (path) {
@@ -181,11 +191,12 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
     }).on('pageshow', '#encodingSettingsPage', function () {
         loading.show();
         libraryMenu.setTabs('playback', 0, getTabs);
-        var page = this;
+        const page = this;
         ApiClient.getNamedConfiguration('encoding').then(function (config) {
             ApiClient.getSystemInfo().then(function (systemInfo) {
                 loadPage(page, config, systemInfo);
             });
         });
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/general.html

@@ -0,0 +1,72 @@
+<div id="dashboardGeneralPage" data-role="page" class="page type-interior dashboardHomePage">
+    <div>
+        <div class="content-primary">
+            <form class="dashboardGeneralForm">
+                <div class="verticalSection">
+                    <div class="sectionTitleContainer flex align-items-center">
+                        <h2 class="sectionTitle">${Settings}</h2>
+                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/settings.html">${Help}</a>
+                    </div>
+                </div>
+
+                <div class="verticalSection">
+                    <div class="inputContainer">
+                        <input is="emby-input" type="text" id="txtServerName" label="${LabelServerName}" />
+                        <div class="fieldDescription">${LabelServerNameHelp}</div>
+                    </div>
+                    <div class="selectContainer">
+                        <select is="emby-select" id="selectLocalizationLanguage" label="${LabelPreferredDisplayLanguage}"></select>
+                        <div class="fieldDescription">
+                            <div>${LabelDisplayLanguageHelp}</div>
+                            <div style="margin-top: .25em;">
+                                <a is="emby-linkbutton" rel="noopener noreferrer" class="button-link" href="https://docs.jellyfin.org/general/contributing/index.html" target="_blank">${LearnHowYouCanContribute}</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="verticalSection verticalSection-extrabottompadding">
+                    <h2>${HeaderPaths}</h2>
+                    <div class="inputContainer">
+                        <div style="display: flex; align-items: center;">
+                            <div style="flex-grow:1;">
+                                <input is="emby-input" id="txtCachePath" label="${LabelCachePath}" autocomplete="off" />
+                            </div>
+                            <button type="button" is="paper-icon-button-light" id="btnSelectCachePath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
+                        </div>
+                        <div class="fieldDescription">${LabelCachePathHelp}</div>
+                    </div>
+
+                    <div class="inputContainer">
+                        <div style="display: flex; align-items: center;">
+                            <div style="flex-grow:1;">
+                                <input is="emby-input" id="txtMetadataPath" label="${LabelMetadataPath}" autocomplete="off" />
+                            </div>
+                            <button type="button" is="paper-icon-button-light" id="btnSelectMetadataPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
+                        </div>
+                        <div class="fieldDescription">${LabelMetadataPathHelp}</div>
+                        <input type="hidden" id="txtMetadataNetworkPath" />
+                    </div>
+                </div>
+
+                <div class="verticalSection">
+                    <h2>${HeaderBranding}</h2>
+                    <div class="inputContainer">
+                        <input is="emby-input" type="text" id="txtLoginDisclaimer" label="${LabelLoginDisclaimer}" />
+                        <div class="fieldDescription">${LabelLoginDisclaimerHelp}</div>
+                    </div>
+                    <div class="inputContainer customCssContainer">
+                        <textarea is="emby-textarea" id="txtCustomCss" label="${LabelCustomCss}" class="textarea-mono"></textarea>
+                        <div class="fieldDescription">${LabelCustomCssHelp}</div>
+                    </div>
+                </div>
+                <br />
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${Save}</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/general.js

@@ -1,16 +1,16 @@
-define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox', 'emby-textarea', 'emby-input', 'emby-select', 'emby-button'], function ($, loading, globalize) {
-    'use strict';
+import $ from 'jQuery';
+import loading from 'loading';
+import globalize from 'globalize';
+import 'emby-checkbox';
+import 'emby-textarea';
+import 'emby-input';
+import 'emby-select';
+import 'emby-button';
+
+/* eslint-disable indent */
 
     function loadPage(page, config, languageOptions, systemInfo) {
         page.querySelector('#txtServerName').value = systemInfo.ServerName;
-        $('#chkAutoRunWebApp', page).checked(config.AutoRunWebApp);
-
-        if (systemInfo.CanLaunchWebBrowser) {
-            page.querySelector('#fldAutoRunWebApp').classList.remove('hide');
-        } else {
-            page.querySelector('#fldAutoRunWebApp').classList.add('hide');
-        }
-
         page.querySelector('#txtCachePath').value = systemInfo.CachePath || '';
         $('#txtMetadataPath', page).val(systemInfo.InternalMetadataPath || '');
         $('#txtMetadataNetworkPath', page).val(systemInfo.MetadataNetworkPath || '');
@@ -24,7 +24,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox', 'emby-te
 
     function onSubmit() {
         loading.show();
-        var form = this;
+        const form = this;
         $(form).parents('.page');
         ApiClient.getServerConfiguration().then(function (config) {
             config.ServerName = $('#txtServerName', form).val();
@@ -32,8 +32,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox', 'emby-te
             config.CachePath = form.querySelector('#txtCachePath').value;
             config.MetadataPath = $('#txtMetadataPath', form).val();
             config.MetadataNetworkPath = $('#txtMetadataNetworkPath', form).val();
-            var requiresReload = config.UICulture !== currentLanguage;
-            config.AutoRunWebApp = $('#chkAutoRunWebApp', form).checked();
+            let requiresReload = config.UICulture !== currentLanguage;
             ApiClient.updateServerConfiguration(config).then(function() {
                 ApiClient.getNamedConfiguration(brandingConfigKey).then(function(brandingConfig) {
                     brandingConfig.LoginDisclaimer = form.querySelector('#txtLoginDisclaimer').value;
@@ -52,8 +51,8 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox', 'emby-te
                     });
                 });
             }, function () {
-                require(['alert'], function (alert) {
-                    alert(globalize.translate('DefaultErrorMessage'));
+                import('alert').then(({default: alert}) => {
+                    alert(globalize.translate('ErrorDefault'));
                 });
 
                 Dashboard.processServerConfigurationUpdateResult();
@@ -62,13 +61,13 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox', 'emby-te
         return false;
     }
 
-    var currentBrandingOptions;
-    var currentLanguage;
-    var brandingConfigKey = 'branding';
-    return function (view, params) {
+    let currentBrandingOptions;
+    let currentLanguage;
+    const brandingConfigKey = 'branding';
+    export default function (view, params) {
         $('#btnSelectCachePath', view).on('click.selectDirectory', function () {
-            require(['directorybrowser'], function (directoryBrowser) {
-                var picker = new directoryBrowser();
+            import('directorybrowser').then(({default: directoryBrowser}) => {
+                const picker = new directoryBrowser();
                 picker.show({
                     callback: function (path) {
                         if (path) {
@@ -84,8 +83,8 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox', 'emby-te
             });
         });
         $('#btnSelectMetadataPath', view).on('click.selectDirectory', function () {
-            require(['directorybrowser'], function (directoryBrowser) {
-                var picker = new directoryBrowser();
+            import('directorybrowser').then(({default: directoryBrowser}) => {
+                const picker = new directoryBrowser();
                 picker.show({
                     path: $('#txtMetadataPath', view).val(),
                     networkSharePath: $('#txtMetadataNetworkPath', view).val(),
@@ -109,9 +108,9 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox', 'emby-te
         });
         $('.dashboardGeneralForm', view).off('submit', onSubmit).on('submit', onSubmit);
         view.addEventListener('viewshow', function () {
-            var promiseConfig = ApiClient.getServerConfiguration();
-            var promiseLanguageOptions = ApiClient.getJSON(ApiClient.getUrl('Localization/Options'));
-            var promiseSystemInfo = ApiClient.getSystemInfo();
+            const promiseConfig = ApiClient.getServerConfiguration();
+            const promiseLanguageOptions = ApiClient.getJSON(ApiClient.getUrl('Localization/Options'));
+            const promiseSystemInfo = ApiClient.getSystemInfo();
             Promise.all([promiseConfig, promiseLanguageOptions, promiseSystemInfo]).then(function (responses) {
                 loadPage(view, responses[0], responses[1], responses[2]);
             });
@@ -121,5 +120,6 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox', 'emby-te
                 view.querySelector('#txtCustomCss').value = config.CustomCss || '';
             });
         });
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/dashboard/library.html

@@ -0,0 +1,15 @@
+<div id="mediaLibraryPage" data-role="page" class="page type-interior mediaLibraryPage librarySectionPage withTabs fullWidthContent">
+    <div>
+        <div class="content-primary">
+            <div class="padded-top padded-bottom">
+                <button is="emby-button" type="button" class="raised btnRefresh">
+                    <span>${ButtonScanAllLibraries}</span>
+                </button>
+                <progress max="100" min="0" style="display: inline-block; vertical-align: middle;" class="refreshProgress"></progress>
+                <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt" target="_blank" href="https://docs.jellyfin.org/general/server/libraries.html">${Help}</a>
+            </div>
+
+            <div id="divVirtualFolders"></div>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/library.js

@@ -1,9 +1,18 @@
-define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'globalize', 'dom', 'indicators', 'scripts/imagehelper', 'cardStyle', 'emby-itemrefreshindicator'], function ($, appHost, taskButton, loading, libraryMenu, globalize, dom, indicators, imageHelper) {
-    'use strict';
+import $ from 'jQuery';
+import taskButton from 'scripts/taskbutton';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+import dom from 'dom';
+import imageHelper from 'scripts/imagehelper';
+import 'cardStyle';
+import 'emby-itemrefreshindicator';
+
+/* eslint-disable indent */
 
     function addVirtualFolder(page) {
-        require(['medialibrarycreator'], function (medialibrarycreator) {
-            new medialibrarycreator().show({
+        import('medialibrarycreator').then(({default: medialibrarycreator}) => {
+            new medialibrarycreator({
                 collectionTypeOptions: getCollectionTypeOptions().filter(function (f) {
                     return !f.hidden;
                 }),
@@ -17,8 +26,8 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     }
 
     function editVirtualFolder(page, virtualFolder) {
-        require(['medialibraryeditor'], function (medialibraryeditor) {
-            new medialibraryeditor().show({
+        import('medialibraryeditor').then(({default: medialibraryeditor}) => {
+            new medialibraryeditor({
                 refresh: shouldRefreshLibraryAfterChanges(page),
                 library: virtualFolder
             }).then(function (hasChanges) {
@@ -30,23 +39,21 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     }
 
     function deleteVirtualFolder(page, virtualFolder) {
-        var msg = globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder');
+        let msg = globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder');
 
         if (virtualFolder.Locations.length) {
             msg += '<br/><br/>' + globalize.translate('MessageTheFollowingLocationWillBeRemovedFromLibrary') + '<br/><br/>';
             msg += virtualFolder.Locations.join('<br/>');
         }
 
-        require(['confirm'], function (confirm) {
+        import('confirm').then(({default: confirm}) => {
             confirm({
-
                 text: msg,
                 title: globalize.translate('HeaderRemoveMediaFolder'),
                 confirmText: globalize.translate('Delete'),
                 primary: 'delete'
-
             }).then(function () {
-                var refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
+                const refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
                 ApiClient.removeVirtualFolder(virtualFolder.Name, refreshAfterChange).then(function () {
                     reloadLibrary(page);
                 });
@@ -55,7 +62,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     }
 
     function refreshVirtualFolder(page, virtualFolder) {
-        require(['refreshDialog'], function (refreshDialog) {
+        import('refreshDialog').then(({default: refreshDialog}) => {
             new refreshDialog({
                 itemIds: [virtualFolder.ItemId],
                 serverId: ApiClient.serverId(),
@@ -65,13 +72,13 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     }
 
     function renameVirtualFolder(page, virtualFolder) {
-        require(['prompt'], function (prompt) {
+        import('prompt').then(({default: prompt}) => {
             prompt({
                 label: globalize.translate('LabelNewName'),
                 confirmText: globalize.translate('ButtonRename')
             }).then(function (newName) {
                 if (newName && newName != virtualFolder.Name) {
-                    var refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
+                    const refreshAfterChange = shouldRefreshLibraryAfterChanges(page);
                     ApiClient.renameVirtualFolder(virtualFolder.Name, newName, refreshAfterChange).then(function () {
                         reloadLibrary(page);
                     });
@@ -81,12 +88,12 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     }
 
     function showCardMenu(page, elem, virtualFolders) {
-        var card = dom.parentWithClass(elem, 'card');
-        var index = parseInt(card.getAttribute('data-index'));
-        var virtualFolder = virtualFolders[index];
-        var menuItems = [];
+        const card = dom.parentWithClass(elem, 'card');
+        const index = parseInt(card.getAttribute('data-index'));
+        const virtualFolder = virtualFolders[index];
+        const menuItems = [];
         menuItems.push({
-            name: globalize.translate('ButtonEditImages'),
+            name: globalize.translate('EditImages'),
             id: 'editimages',
             icon: 'photo'
         });
@@ -111,7 +118,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
             icon: 'refresh'
         });
 
-        require(['actionsheet'], function (actionsheet) {
+        import('actionsheet').then(({default: actionsheet}) => {
             actionsheet.show({
                 items: menuItems,
                 positionTo: elem,
@@ -149,11 +156,11 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     }
 
     function shouldRefreshLibraryAfterChanges(page) {
-        return 'mediaLibraryPage' === page.id;
+        return page.id === 'mediaLibraryPage';
     }
 
     function reloadVirtualFolders(page, virtualFolders) {
-        var html = '';
+        let html = '';
         virtualFolders.push({
             Name: globalize.translate('ButtonAddMediaLibrary'),
             icon: 'add_circle',
@@ -161,28 +168,28 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
             showType: false,
             showLocations: false,
             showMenu: false,
-            showNameWithIcon: true
+            showNameWithIcon: false
         });
 
-        for (var i = 0; i < virtualFolders.length; i++) {
-            var virtualFolder = virtualFolders[i];
+        for (let i = 0; i < virtualFolders.length; i++) {
+            const virtualFolder = virtualFolders[i];
             html += getVirtualFolderHtml(page, virtualFolder, i);
         }
 
-        var divVirtualFolders = page.querySelector('#divVirtualFolders');
+        const divVirtualFolders = page.querySelector('#divVirtualFolders');
         divVirtualFolders.innerHTML = html;
         divVirtualFolders.classList.add('itemsContainer');
         divVirtualFolders.classList.add('vertical-wrap');
         $('.btnCardMenu', divVirtualFolders).on('click', function () {
             showCardMenu(page, this, virtualFolders);
         });
-        divVirtualFolders.querySelector('.addLibrary').addEventListener('click', function () {
+        divVirtualFolders.querySelector('#addLibrary').addEventListener('click', function () {
             addVirtualFolder(page);
         });
         $('.editLibrary', divVirtualFolders).on('click', function () {
-            var card = $(this).parents('.card')[0];
-            var index = parseInt(card.getAttribute('data-index'));
-            var virtualFolder = virtualFolders[index];
+            const card = $(this).parents('.card')[0];
+            const index = parseInt(card.getAttribute('data-index'));
+            const virtualFolder = virtualFolders[index];
 
             if (virtualFolder.ItemId) {
                 editVirtualFolder(page, virtualFolder);
@@ -192,7 +199,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     }
 
     function editImages(page, virtualFolder) {
-        require(['imageEditor'], function (imageEditor) {
+        import('imageEditor').then(({default: imageEditor}) => {
             imageEditor.show({
                 itemId: virtualFolder.ItemId,
                 serverId: ApiClient.serverId()
@@ -227,7 +234,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
             value: 'books',
             message: getLink('BookLibraryHelp', 'https://docs.jellyfin.org/general/server/media/books.html')
         }, {
-            name: globalize.translate('OptionHomeVideos'),
+            name: globalize.translate('Photos'),
             value: 'homevideos'
         }, {
             name: globalize.translate('FolderTypeMusicVideos'),
@@ -240,19 +247,24 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     }
 
     function getVirtualFolderHtml(page, virtualFolder, index) {
-        var html = '';
-        var style = '';
+        let html = '';
+        let style = '';
 
         if (page.classList.contains('wizardPage')) {
             style += 'min-width:33.3%;';
         }
 
-        html += '<div class="card backdropCard scalableCard backdropCard-scalable" style="' + style + '" data-index="' + index + '" data-id="' + virtualFolder.ItemId + '">';
+        if (virtualFolder.Locations.length == 0) {
+            html += '<div id="addLibrary" class="card backdropCard scalableCard backdropCard-scalable" style="' + style + '" data-index="' + index + '" data-id="' + virtualFolder.ItemId + '">';
+        } else {
+            html += '<div class="card backdropCard scalableCard backdropCard-scalable" style="' + style + '" data-index="' + index + '" data-id="' + virtualFolder.ItemId + '">';
+        }
+
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable visualCardBox-cardScalable">';
         html += '<div class="cardPadder cardPadder-backdrop"></div>';
         html += '<div class="cardContent">';
-        var imgUrl = '';
+        let imgUrl = '';
 
         if (virtualFolder.PrimaryImageItemId) {
             imgUrl = ApiClient.getScaledImageUrl(virtualFolder.PrimaryImageItemId, {
@@ -261,7 +273,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
             });
         }
 
-        var hasCardImageContainer;
+        let hasCardImageContainer;
 
         if (imgUrl) {
             html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;background-image:url(\'' + imgUrl + "');\">";
@@ -274,7 +286,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
 
         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>';
         }
@@ -311,7 +323,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
         }
 
         html += '</div>';
-        var typeName = getCollectionTypeOptions().filter(function (t) {
+        let typeName = getCollectionTypeOptions().filter(function (t) {
             return t.value == virtualFolder.CollectionType;
         })[0];
         typeName = typeName ? typeName.name : globalize.translate('FolderTypeUnset');
@@ -351,10 +363,10 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
             name: globalize.translate('HeaderLibraries')
         }, {
             href: 'librarydisplay.html',
-            name: globalize.translate('TabDisplay')
+            name: globalize.translate('Display')
         }, {
             href: 'metadataimages.html',
-            name: globalize.translate('TabMetadata')
+            name: globalize.translate('Metadata')
         }, {
             href: 'metadatanfo.html',
             name: globalize.translate('TabNfoSettings')
@@ -371,7 +383,8 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
     });
     pageIdOn('pageshow', 'mediaLibraryPage', function () {
         libraryMenu.setTabs('librarysetup', 0, getTabs);
-        var page = this;
+
+        const page = this;
         taskButton({
             mode: 'on',
             progressElem: page.querySelector('.refreshProgress'),
@@ -380,7 +393,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
         });
     });
     pageIdOn('pagebeforehide', 'mediaLibraryPage', function () {
-        var page = this;
+        const page = this;
         taskButton({
             mode: 'off',
             progressElem: page.querySelector('.refreshProgress'),
@@ -388,4 +401,5 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
             button: page.querySelector('.btnRefresh')
         });
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/librarydisplay.html

@@ -0,0 +1,57 @@
+<div id="libraryDisplayPage" data-role="page" class="page type-interior librarySectionPage withTabs">
+    <div>
+        <div class="content-primary">
+            <form>
+                <div class="selectContainer">
+                    <select is="emby-select" id="selectDateAdded" data-mini="true" label="${LabelDateAddedBehavior}">
+                        <option value="0">${OptionDateAddedImportTime}</option>
+                        <option value="1">${OptionDateAddedFileTime}</option>
+                    </select>
+                    <div class="fieldDescription">${LabelDateAddedBehaviorHelp}</div>
+                </div>
+
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkFolderView" />
+                        <span>${OptionDisplayFolderView}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${OptionDisplayFolderViewHelp}</div>
+                </div>
+
+                <label class="checkboxContainer">
+                    <input type="checkbox" is="emby-checkbox" class="chkDisplaySpecialsWithinSeasons"/>
+                    <span>${LabelDisplaySpecialsWithinSeasons}</span>
+                </label>
+
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkGroupMoviesIntoCollections" />
+                        <span>${LabelGroupMoviesIntoCollections}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${LabelGroupMoviesIntoCollectionsHelp}</div>
+                </div>
+
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input class="chkExternalContentInSuggestions" type="checkbox" is="emby-checkbox" />
+                        <span>${OptionEnableExternalContentInSuggestions}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${OptionEnableExternalContentInSuggestionsHelp}</div>
+                </div>
+
+                <div class="checkboxContainer checkboxContainer-withDescription fldSaveMetadataHidden hide">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkAirDays" id="chkSaveMetadataHidden" data-filter="Sunday" />
+                        <span>${OptionSaveMetadataAsHidden}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${OptionSaveMetadataAsHiddenHelp}</div>
+                </div>
+
+                <br/>
+                <button is="emby-button" type="submit" class="raised button-submit block">
+                    <span>${Save}</span>
+                </button>
+            </form>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/librarydisplay.js

@@ -1,5 +1,10 @@
-define(['globalize', 'loading', 'libraryMenu', 'emby-checkbox', 'emby-button', 'emby-button'], function(globalize, loading, libraryMenu) {
-    'use strict';
+import globalize from 'globalize';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import 'emby-checkbox';
+import 'emby-button';
+
+/* eslint-disable indent */
 
     function getTabs() {
         return [{
@@ -7,17 +12,17 @@ define(['globalize', 'loading', 'libraryMenu', 'emby-checkbox', 'emby-button', '
             name: globalize.translate('HeaderLibraries')
         }, {
             href: 'librarydisplay.html',
-            name: globalize.translate('TabDisplay')
+            name: globalize.translate('Display')
         }, {
             href: 'metadataimages.html',
-            name: globalize.translate('TabMetadata')
+            name: globalize.translate('Metadata')
         }, {
             href: 'metadatanfo.html',
             name: globalize.translate('TabNfoSettings')
         }];
     }
 
-    return function(view, params) {
+    export default function(view, params) {
         function loadData() {
             ApiClient.getServerConfiguration().then(function(config) {
                 view.querySelector('.chkFolderView').checked = config.EnableFolderView;
@@ -33,7 +38,7 @@ define(['globalize', 'loading', 'libraryMenu', 'emby-checkbox', 'emby-button', '
 
         view.querySelector('form').addEventListener('submit', function(e) {
             loading.show();
-            var form = this;
+            const form = this;
             ApiClient.getServerConfiguration().then(function(config) {
                 config.EnableFolderView = form.querySelector('.chkFolderView').checked;
                 config.EnableGroupingIntoCollections = form.querySelector('.chkGroupMoviesIntoCollections').checked;
@@ -43,7 +48,7 @@ define(['globalize', 'loading', 'libraryMenu', 'emby-checkbox', '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);
             });
 
@@ -56,12 +61,13 @@ define(['globalize', 'loading', 'libraryMenu', 'emby-checkbox', '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');
                 }
             });
         });
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/dashboard/logs.html

@@ -0,0 +1,8 @@
+<div id="logPage" data-role="page" class="page type-interior">
+    <div>
+        <div class="content-primary">
+            <div class="serverLogs readOnlyContent">
+            </div>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/logs.js

@@ -1,6 +1,12 @@
-define(['datetime', 'loading', 'apphost', 'listViewStyle', 'emby-button', 'flexStyles'], function(datetime, loading, appHost) {
-    'use strict';
-    return function(view, params) {
+import datetime from 'datetime';
+import loading from 'loading';
+import 'emby-button';
+import 'listViewStyle';
+import 'flexStyles';
+
+/* eslint-disable indent */
+
+    export default function(view, params) {
         view.addEventListener('viewbeforeshow', function() {
             loading.show();
             var apiClient = ApiClient;
@@ -29,5 +35,6 @@ define(['datetime', 'loading', 'apphost', 'listViewStyle', 'emby-button', 'flexS
                 loading.hide();
             });
         });
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/dashboard/metadataImages.js

@@ -1,12 +1,17 @@
-define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle'], function($, dom, loading, libraryMenu, globalize) {
-    'use strict';
+import $ from 'jQuery';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+import 'listViewStyle';
+
+/* eslint-disable indent */
 
     function populateLanguages(select) {
         return ApiClient.getCultures().then(function(languages) {
-            var html = '';
+            let html = '';
             html += "<option value=''></option>";
-            for (var i = 0, length = languages.length; i < length; i++) {
-                var culture = languages[i];
+            for (let i = 0, length = languages.length; i < length; i++) {
+                const culture = languages[i];
                 html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
             }
             select.innerHTML = html;
@@ -15,10 +20,10 @@ define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle']
 
     function populateCountries(select) {
         return ApiClient.getCountries().then(function(allCountries) {
-            var html = '';
+            let html = '';
             html += "<option value=''></option>";
-            for (var i = 0, length = allCountries.length; i < length; i++) {
-                var culture = allCountries[i];
+            for (let i = 0, length = allCountries.length; i < length; i++) {
+                const culture = allCountries[i];
                 html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + '</option>';
             }
             select.innerHTML = html;
@@ -26,9 +31,9 @@ define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle']
     }
 
     function loadPage(page) {
-        var promises = [ApiClient.getServerConfiguration(), populateLanguages(page.querySelector('#selectLanguage')), populateCountries(page.querySelector('#selectCountry'))];
+        const promises = [ApiClient.getServerConfiguration(), populateLanguages(page.querySelector('#selectLanguage')), populateCountries(page.querySelector('#selectCountry'))];
         Promise.all(promises).then(function(responses) {
-            var config = responses[0];
+            const config = responses[0];
             page.querySelector('#selectLanguage').value = config.PreferredMetadataLanguage || '';
             page.querySelector('#selectCountry').value = config.MetadataCountryCode || '';
             loading.hide();
@@ -36,7 +41,7 @@ define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle']
     }
 
     function onSubmit() {
-        var form = this;
+        const form = this;
         return loading.show(), ApiClient.getServerConfiguration().then(function(config) {
             config.PreferredMetadataLanguage = form.querySelector('#selectLanguage').value;
             config.MetadataCountryCode = form.querySelector('#selectCountry').value;
@@ -50,10 +55,10 @@ define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle']
             name: globalize.translate('HeaderLibraries')
         }, {
             href: 'librarydisplay.html',
-            name: globalize.translate('TabDisplay')
+            name: globalize.translate('Display')
         }, {
             href: 'metadataimages.html',
-            name: globalize.translate('TabMetadata')
+            name: globalize.translate('Metadata')
         }, {
             href: 'metadatanfo.html',
             name: globalize.translate('TabNfoSettings')
@@ -67,4 +72,5 @@ define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle']
         loading.show();
         loadPage(this);
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/metadataimages.html

@@ -0,0 +1,25 @@
+<div id="metadataImagesConfigurationPage" data-role="page" class="page type-interior metadataConfigurationPage withTabs">
+
+    <div>
+
+        <div class="content-primary">
+
+            <form class="metadataImagesConfigurationForm">
+                <h2 style="margin-top:0;">${HeaderPreferredMetadataLanguage}</h2>
+
+                <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><button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button></div>
+            </form>
+        </div>
+
+    </div>
+</div>

src/controllers/dashboard/metadatanfo.html

@@ -0,0 +1,49 @@
+<div id="metadataNfoPage" data-role="page" class="page type-interior metadataConfigurationPage withTabs">
+
+    <div>
+
+        <div class="content-primary">
+            <form class="metadataNfoForm">
+
+                <p>${HeaderKodiMetadataHelp}</p>
+                <br />
+                <div class="selectContainer">
+                    <select is="emby-select" name="selectUser" id="selectUser" label="${LabelKodiMetadataUser}"></select>
+                    <div class="fieldDescription">${LabelKodiMetadataUserHelp}</div>
+                </div>
+
+                <div class="selectContainer">
+                    <select is="emby-select" name="selectReleaseDateFormat" id="selectReleaseDateFormat" label="${LabelKodiMetadataDateFormat}">
+                        <option value="yyyy-MM-dd">yyyy-MM-dd</option>
+                    </select>
+                    <div class="fieldDescription">${LabelKodiMetadataDateFormatHelp}</div>
+                </div>
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" id="chkSaveImagePaths" />
+                        <span>${LabelKodiMetadataSaveImagePaths}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${LabelKodiMetadataSaveImagePathsHelp}</div>
+                </div>
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" id="chkEnablePathSubstitution" />
+                        <span>${LabelKodiMetadataEnablePathSubstitution}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">
+                        <div>${LabelKodiMetadataEnablePathSubstitutionHelp}</div>
+                    </div>
+                </div>
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" id="chkEnableExtraThumbs" />
+                        <span>${LabelKodiMetadataEnableExtraThumbs}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${LabelKodiMetadataEnableExtraThumbsHelp}</div>
+                </div>
+                <div><button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button></div>
+            </form>
+        </div>
+
+    </div>
+</div>

src/controllers/dashboard/metadatanfo.js

@@ -1,8 +1,12 @@
-define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, libraryMenu, globalize) {
-    'use strict';
+import $ from 'jQuery';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+
+/* eslint-disable indent */
 
     function loadPage(page, config, users) {
-        var html = '<option value="" selected="selected">' + globalize.translate('OptionNone') + '</option>';
+        let html = '<option value="" selected="selected">' + globalize.translate('None') + '</option>';
         html += users.map(function (user) {
             return '<option value="' + user.Id + '">' + user.Name + '</option>';
         }).join('');
@@ -16,7 +20,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
 
     function onSubmit() {
         loading.show();
-        var form = this;
+        const form = this;
         ApiClient.getNamedConfiguration(metadataKey).then(function (config) {
             config.UserId = $('#selectUser', form).val() || null;
             config.ReleaseDateFormat = $('#selectReleaseDateFormat', form).val();
@@ -32,10 +36,10 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
     }
 
     function showConfirmMessage(config) {
-        var msg = [];
+        const msg = [];
         msg.push(globalize.translate('MetadataSettingChangeHelp'));
 
-        require(['alert'], function (alert) {
+        import('alert').then(({default: alert}) => {
             alert({
                 text: msg.join('<br/><br/>')
             });
@@ -48,27 +52,28 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
             name: globalize.translate('HeaderLibraries')
         }, {
             href: 'librarydisplay.html',
-            name: globalize.translate('TabDisplay')
+            name: globalize.translate('Display')
         }, {
             href: 'metadataimages.html',
-            name: globalize.translate('TabMetadata')
+            name: globalize.translate('Metadata')
         }, {
             href: 'metadatanfo.html',
             name: globalize.translate('TabNfoSettings')
         }];
     }
 
-    var metadataKey = 'xbmcmetadata';
+    const metadataKey = 'xbmcmetadata';
     $(document).on('pageinit', '#metadataNfoPage', function () {
         $('.metadataNfoForm').off('submit', onSubmit).on('submit', onSubmit);
     }).on('pageshow', '#metadataNfoPage', function () {
         libraryMenu.setTabs('metadata', 3, getTabs);
         loading.show();
-        var page = this;
-        var promise1 = ApiClient.getUsers();
-        var promise2 = ApiClient.getNamedConfiguration(metadataKey);
+        const page = this;
+        const promise1 = ApiClient.getUsers();
+        const promise2 = ApiClient.getNamedConfiguration(metadataKey);
         Promise.all([promise1, promise2]).then(function (responses) {
             loadPage(page, responses[1], responses[0]);
         });
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/networking.html

@@ -0,0 +1,121 @@
+<div id="networkingPage" data-role="page" class="page type-interior advancedConfigurationPage">
+    <div>
+        <div class="content-primary">
+            <form class="dashboardHostingForm">
+                <div class="verticalSection verticalSection-extrabottompadding">
+                    <div class="sectionTitleContainer flex align-items-center">
+                        <h2 class="sectionTitle">${TabNetworking}</h2>
+                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/networking/index.html">${Help}</a>
+                    </div>
+
+                    <fieldset class='verticalSection verticalSection-extrabottompadding'>
+                        <legend><h3>${HeaderServerAddressSettings}</h3></legend>
+
+                        <div class="inputContainer">
+                            <input is="emby-input" type="number" id="txtPortNumber" label="${LabelLocalHttpServerPortNumber}" pattern="[0-9]*" required="required" min="1" max="65535" />
+                            <div class="fieldDescription">${LabelLocalHttpServerPortNumberHelp}</div>
+                        </div>
+
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label>
+                                <input type="checkbox" is="emby-checkbox" id="chkEnableHttps" />
+                                <span>${LabelEnableHttps}</span>
+                            </label>
+                            <div class="fieldDescription checkboxFieldDescription">${LabelEnableHttpsHelp}</div>
+                        </div>
+
+                        <div class="inputContainer">
+                            <input is="emby-input" type="number" id="txtHttpsPort" pattern="[0-9]*" required="required" min="1" max="65535" label="${LabelHttpsPort}" />
+                            <div class="fieldDescription">${LabelHttpsPortHelp}</div>
+                        </div>
+
+                        <div class="inputContainer fldBaseUrl">
+                            <input is="emby-input" id="txtBaseUrl" type="text" label="${LabelBaseUrl}" />
+                            <div class="fieldDescription">${LabelBaseUrlHelp}</div>
+                        </div>
+
+                        <div class="inputContainer">
+                            <input is="emby-input" type="text" id="txtLocalAddress" label="${LabelBindToLocalNetworkAddress}" />
+                            <div class="fieldDescription">${LabelBindToLocalNetworkAddressHelp}</div>
+                        </div>
+
+                        <div class="inputContainer">
+                            <input is="emby-input" type="text" id="txtLanNetworks" label="${LabelLanNetworks}" />
+                            <div class="fieldDescription">${LanNetworksHelp}</div>
+                        </div>
+                    </fieldset>
+
+                    <fieldset class='verticalSection verticalSection-extrabottompadding'>
+                        <legend><h3>${HeaderHttpsSettings}</h3></legend>
+
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label>
+                                <input type="checkbox" is="emby-checkbox" id="chkRequireHttps" />
+                                <span>${LabelRequireHttps}</span>
+                            </label>
+                            <div class="fieldDescription checkboxFieldDescription">${LabelRequireHttpsHelp}</div>
+                        </div>
+
+                        <div class="inputContainer fldCertificatePath">
+                            <div style="display: flex; align-items: center;">
+                                <div style="flex-grow:1;">
+                                    <input is="emby-input" type="text" id="txtCertificatePath" label="${LabelCustomCertificatePath}" autocomplete="off" />
+                                </div>
+                                <button type="button" is="paper-icon-button-light" id="btnSelectCertPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
+                            </div>
+                            <div class="fieldDescription">${LabelCustomCertificatePathHelp}</div>
+                        </div>
+
+                        <div class="inputContainer fldCertPassword">
+                            <input is="emby-input" id="txtCertPassword" type="password" label="${LabelCertificatePassword}" autocomplete="new-password" />
+                            <div class="fieldDescription">${LabelCertificatePasswordHelp}</div>
+                        </div>
+                    </fieldset>
+
+                    <fieldset class='verticalSection verticalSection-extrabottompadding'>
+                        <legend><h3>${HeaderRemoteAccessSettings}</h3></legend>
+
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label>
+                                <input type="checkbox" is="emby-checkbox" id="chkRemoteAccess" />
+                                <span>${AllowRemoteAccess}</span>
+                            </label>
+                            <div class="fieldDescription checkboxFieldDescription">${AllowRemoteAccessHelp}</div>
+                        </div>
+                        <div class="inputContainer fldExternalAddressFilter hide">
+                            <input is="emby-input" type="text" id="txtExternalAddressFilter" label="${LabelAllowedRemoteAddresses}" />
+                            <div class="fieldDescription">${AllowedRemoteAddressesHelp}</div>
+                        </div>
+                        <div class="selectContainer fldExternalAddressFilterMode hide">
+                            <select is="emby-select" id="selectExternalAddressFilterMode" label="${LabelAllowedRemoteAddressesMode}">
+                                <option value="whitelist">${Whitelist}</option>
+                                <option value="blacklist">${Blacklist}</option>
+                            </select>
+                        </div>
+
+                        <div class="checkboxContainer checkboxContainer-withDescription fldEnableUpnp hide">
+                            <label>
+                                <input type="checkbox" is="emby-checkbox" id="chkEnableUpnp" />
+                                <span>${LabelEnableAutomaticPortMap}</span>
+                            </label>
+                            <div class="fieldDescription checkboxFieldDescription">${LabelEnableAutomaticPortMapHelp}</div>
+                        </div>
+                        <div class="inputContainer fldPublicPort hide">
+                            <input is="emby-input" type="number" label="${LabelPublicHttpPort}" id="txtPublicPort" pattern="[0-9]*" required="required" min="1" max="65535" />
+                            <div class="fieldDescription">${LabelPublicHttpPortHelp}</div>
+                        </div>
+                        <div class="inputContainer fldPublicHttpsPort hide">
+                            <input is="emby-input" type="number" id="txtPublicHttpsPort" pattern="[0-9]*" required="required" min="1" max="65535" label="${LabelPublicHttpsPort}" />
+                            <div class="fieldDescription">${LabelPublicHttpsPortHelp}</div>
+                        </div>
+                    </fieldset>
+                </div>
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${Save}</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/networking.js

@@ -1,12 +1,16 @@
-define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'], function (loading, libraryMenu, globalize) {
-    'use strict';
+import loading from 'loading';
+import globalize from 'globalize';
+import 'emby-checkbox';
+import 'emby-select';
+
+/* eslint-disable indent */
 
     function onSubmit(e) {
-        var form = this;
-        var localAddress = form.querySelector('#txtLocalAddress').value;
-        var enableUpnp = form.querySelector('#chkEnableUpnp').checked;
+        const form = this;
+        const localAddress = form.querySelector('#txtLocalAddress').value;
+        const enableUpnp = form.querySelector('#chkEnableUpnp').checked;
         confirmSelections(localAddress, enableUpnp, function () {
-            var validationResult = getValidationAlert(form);
+            const validationResult = getValidationAlert(form);
 
             if (validationResult) {
                 showAlertText(validationResult);
@@ -26,7 +30,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', '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;
@@ -47,7 +51,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
     }
 
     function triggerChange(select) {
-        var evt = document.createEvent('HTMLEvents');
+        const evt = document.createEvent('HTMLEvents');
         evt.initEvent('change', false, true);
         select.dispatchEvent(evt);
     }
@@ -65,8 +69,8 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
     }
 
     function validateHttps(form) {
-        var certPath = form.querySelector('#txtCertificatePath').value || null;
-        var httpsEnabled = form.querySelector('#chkEnableHttps').checked;
+        const certPath = form.querySelector('#txtCertificatePath').value || null;
+        const httpsEnabled = form.querySelector('#chkEnableHttps').checked;
 
         if (httpsEnabled && !certPath) {
             return showAlertText({
@@ -80,7 +84,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
 
     function showAlertText(options) {
         return new Promise(function (resolve, reject) {
-            require(['alert'], function (alert) {
+            import('alert').then(({default: alert}) => {
                 alert(options).then(resolve, reject);
             });
         });
@@ -97,7 +101,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
         }
     }
 
-    return function (view, params) {
+    export default function (view, params) {
         function loadPage(page, config) {
             page.querySelector('#txtPortNumber').value = config.HttpServerPortNumber;
             page.querySelector('#txtPublicPort').value = config.PublicPort;
@@ -106,12 +110,12 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', '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;
             page.querySelector('#txtBaseUrl').value = config.BaseUrl || '';
-            var txtCertificatePath = page.querySelector('#txtCertificatePath');
+            const txtCertificatePath = page.querySelector('#txtCertificatePath');
             txtCertificatePath.value = config.CertificatePath || '';
             page.querySelector('#txtCertPassword').value = config.CertificatePassword || '';
             page.querySelector('#chkEnableUpnp').checked = config.EnableUPnP;
@@ -135,8 +139,8 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
             }
         });
         view.querySelector('#btnSelectCertPath').addEventListener('click', function () {
-            require(['directorybrowser'], function (directoryBrowser) {
-                var picker = new directoryBrowser();
+            import('directorybrowser').then(({default: directoryBrowser}) => {
+                const picker = new directoryBrowser();
                 picker.show({
                     includeFiles: true,
                     includeDirectories: true,
@@ -158,5 +162,6 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'],
                 loadPage(view, config);
             });
         });
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/dashboard/notifications/notification.js

@@ -1,119 +0,0 @@
-define(['jQuery', 'emby-checkbox', 'fnchecked'], function ($) {
-    'use strict';
-
-    function fillItems(elem, items, cssClass, idPrefix, currentList, isEnabledList) {
-        var html = '<div class="checkboxList paperList" style="padding: .5em 1em;">';
-        html += items.map(function (u) {
-            var isChecked = isEnabledList ? currentList.indexOf(u.Id) != -1 : currentList.indexOf(u.Id) == -1;
-            var checkedHtml = isChecked ? ' checked="checked"' : '';
-            return '<label><input is="emby-checkbox" class="' + cssClass + '" type="checkbox" data-itemid="' + u.Id + '"' + checkedHtml + '/><span>' + u.Name + '</span></label>';
-        }).join('');
-        html += '</div>';
-        elem.html(html).trigger('create');
-    }
-
-    function reload(page) {
-        var type = getParameterByName('type');
-        var promise1 = ApiClient.getUsers();
-        var promise2 = ApiClient.getNamedConfiguration(notificationsConfigurationKey);
-        var promise3 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Types'));
-        var promise4 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Services'));
-        Promise.all([promise1, promise2, promise3, promise4]).then(function (responses) {
-            var users = responses[0];
-            var notificationOptions = responses[1];
-            var types = responses[2];
-            var services = responses[3];
-            var notificationConfig = notificationOptions.Options.filter(function (n) {
-                return n.Type == type;
-            })[0];
-            var typeInfo = types.filter(function (n) {
-                return n.Type == type;
-            })[0] || {};
-
-            if (typeInfo.IsBasedOnUserEvent) {
-                $('.monitorUsers', page).show();
-            } else {
-                $('.monitorUsers', page).hide();
-            }
-
-            $('.notificationType', page).html(typeInfo.Name || 'Unknown Notification');
-
-            if (!notificationConfig) {
-                notificationConfig = {
-                    DisabledMonitorUsers: [],
-                    SendToUsers: [],
-                    DisabledServices: [],
-                    SendToUserMode: 'Admins'
-                };
-            }
-
-            fillItems($('.monitorUsersList', page), users, 'chkMonitor', 'chkMonitor', notificationConfig.DisabledMonitorUsers);
-            fillItems($('.sendToUsersList', page), users, 'chkSendTo', 'chkSendTo', notificationConfig.SendToUsers, true);
-            fillItems($('.servicesList', page), services, 'chkService', 'chkService', notificationConfig.DisabledServices);
-            $('#chkEnabled', page).checked(notificationConfig.Enabled || false);
-            $('#selectUsers', page).val(notificationConfig.SendToUserMode).trigger('change');
-        });
-    }
-
-    function save(page) {
-        var type = getParameterByName('type');
-        var promise1 = ApiClient.getNamedConfiguration(notificationsConfigurationKey);
-        // TODO: Check if this promise is really needed, as it's unused.
-        var promise2 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Types'));
-        Promise.all([promise1, promise2]).then(function (responses) {
-            var notificationOptions = responses[0];
-            var notificationConfig = notificationOptions.Options.filter(function (n) {
-                return n.Type == type;
-            })[0];
-
-            if (!notificationConfig) {
-                notificationConfig = {
-                    Type: type
-                };
-                notificationOptions.Options.push(notificationConfig);
-            }
-
-            notificationConfig.Enabled = $('#chkEnabled', page).checked();
-            notificationConfig.SendToUserMode = $('#selectUsers', page).val();
-            notificationConfig.DisabledMonitorUsers = $('.chkMonitor', page).get().filter(function (c) {
-                return !c.checked;
-            }).map(function (c) {
-                return c.getAttribute('data-itemid');
-            });
-            notificationConfig.SendToUsers = $('.chkSendTo', page).get().filter(function (c) {
-                return c.checked;
-            }).map(function (c) {
-                return c.getAttribute('data-itemid');
-            });
-            notificationConfig.DisabledServices = $('.chkService', page).get().filter(function (c) {
-                return !c.checked;
-            }).map(function (c) {
-                return c.getAttribute('data-itemid');
-            });
-            ApiClient.updateNamedConfiguration(notificationsConfigurationKey, notificationOptions).then(function (r) {
-                Dashboard.processServerConfigurationUpdateResult();
-                Dashboard.navigate('notificationsettings.html');
-            });
-        });
-    }
-
-    function onSubmit() {
-        save($(this).parents('.page'));
-        return false;
-    }
-
-    var notificationsConfigurationKey = 'notifications';
-    $(document).on('pageinit', '#notificationSettingPage', function () {
-        var page = this;
-        $('#selectUsers', page).on('change', function () {
-            if ('Custom' == this.value) {
-                $('.selectCustomUsers', page).show();
-            } else {
-                $('.selectCustomUsers', page).hide();
-            }
-        });
-        $('.notificationSettingForm').off('submit', onSubmit).on('submit', onSubmit);
-    }).on('pageshow', '#notificationSettingPage', function () {
-        reload(this);
-    });
-});

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>${Save}</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

@@ -0,0 +1,118 @@
+import $ from 'jQuery';
+import 'emby-checkbox';
+
+function fillItems(elem, items, cssClass, idPrefix, currentList, isEnabledList) {
+    let html = '<div class="checkboxList paperList" style="padding: .5em 1em;">';
+    html += items.map(function (u) {
+        const isChecked = isEnabledList ? currentList.indexOf(u.Id) != -1 : currentList.indexOf(u.Id) == -1;
+        const checkedHtml = isChecked ? ' checked="checked"' : '';
+        return '<label><input is="emby-checkbox" class="' + cssClass + '" type="checkbox" data-itemid="' + u.Id + '"' + checkedHtml + '/><span>' + u.Name + '</span></label>';
+    }).join('');
+    html += '</div>';
+    elem.html(html).trigger('create');
+}
+
+function reload(page) {
+    const type = getParameterByName('type');
+    const promise1 = ApiClient.getUsers();
+    const promise2 = ApiClient.getNamedConfiguration(notificationsConfigurationKey);
+    const promise3 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Types'));
+    const promise4 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Services'));
+    Promise.all([promise1, promise2, promise3, promise4]).then(function (responses) {
+        const users = responses[0];
+        const notificationOptions = responses[1];
+        const types = responses[2];
+        const services = responses[3];
+        let notificationConfig = notificationOptions.Options.filter(function (n) {
+            return n.Type == type;
+        })[0];
+        const typeInfo = types.filter(function (n) {
+            return n.Type == type;
+        })[0] || {};
+
+        if (typeInfo.IsBasedOnUserEvent) {
+            $('.monitorUsers', page).show();
+        } else {
+            $('.monitorUsers', page).hide();
+        }
+
+        $('.notificationType', page).html(typeInfo.Name || 'Unknown Notification');
+
+        if (!notificationConfig) {
+            notificationConfig = {
+                DisabledMonitorUsers: [],
+                SendToUsers: [],
+                DisabledServices: [],
+                SendToUserMode: 'Admins'
+            };
+        }
+
+        fillItems($('.monitorUsersList', page), users, 'chkMonitor', 'chkMonitor', notificationConfig.DisabledMonitorUsers);
+        fillItems($('.sendToUsersList', page), users, 'chkSendTo', 'chkSendTo', notificationConfig.SendToUsers, true);
+        fillItems($('.servicesList', page), services, 'chkService', 'chkService', notificationConfig.DisabledServices);
+        $('#chkEnabled', page).prop('checked', notificationConfig.Enabled || false);
+        $('#selectUsers', page).val(notificationConfig.SendToUserMode).trigger('change');
+    });
+}
+
+function save(page) {
+    const type = getParameterByName('type');
+    const promise1 = ApiClient.getNamedConfiguration(notificationsConfigurationKey);
+    // TODO: Check if this promise is really needed, as it's unused.
+    const promise2 = ApiClient.getJSON(ApiClient.getUrl('Notifications/Types'));
+    Promise.all([promise1, promise2]).then(function (responses) {
+        const notificationOptions = responses[0];
+        let notificationConfig = notificationOptions.Options.filter(function (n) {
+            return n.Type == type;
+        })[0];
+
+        if (!notificationConfig) {
+            notificationConfig = {
+                Type: type
+            };
+            notificationOptions.Options.push(notificationConfig);
+        }
+
+        notificationConfig.Enabled = $('#chkEnabled', page).is(':checked');
+        notificationConfig.SendToUserMode = $('#selectUsers', page).val();
+        notificationConfig.DisabledMonitorUsers = $('.chkMonitor', page).get().filter(function (c) {
+            return !c.checked;
+        }).map(function (c) {
+            return c.getAttribute('data-itemid');
+        });
+        notificationConfig.SendToUsers = $('.chkSendTo', page).get().filter(function (c) {
+            return c.checked;
+        }).map(function (c) {
+            return c.getAttribute('data-itemid');
+        });
+        notificationConfig.DisabledServices = $('.chkService', page).get().filter(function (c) {
+            return !c.checked;
+        }).map(function (c) {
+            return c.getAttribute('data-itemid');
+        });
+        ApiClient.updateNamedConfiguration(notificationsConfigurationKey, notificationOptions).then(function (r) {
+            Dashboard.processServerConfigurationUpdateResult();
+            Dashboard.navigate('notificationsettings.html');
+        });
+    });
+}
+
+function onSubmit() {
+    save($(this).parents('.page'));
+    return false;
+}
+
+const notificationsConfigurationKey = 'notifications';
+$(document).on('pageinit', '#notificationSettingPage', function () {
+    const page = this;
+    $('#selectUsers', page).on('change', function () {
+        if (this.value == 'Custom') {
+            $('.selectCustomUsers', page).show();
+        } else {
+            $('.selectCustomUsers', page).hide();
+        }
+    });
+    $('.notificationSettingForm').off('submit', onSubmit).on('submit', onSubmit);
+}).on('pageshow', '#notificationSettingPage', function () {
+    reload(this);
+});

src/controllers/dashboard/notifications/notifications.js

@@ -1,60 +0,0 @@
-define(['loading', 'libraryMenu', 'globalize', 'listViewStyle', 'emby-button'], function(loading, libraryMenu, globalize) {
-    'use strict';
-
-    function reload(page) {
-        loading.show();
-        ApiClient.getJSON(ApiClient.getUrl('Notifications/Types')).then(function(list) {
-            var html = '';
-            var lastCategory = '';
-            var showHelp = true;
-            html += list.map(function(notification) {
-                var itemHtml = '';
-                if (notification.Category !== lastCategory) {
-                    lastCategory = notification.Category;
-                    if (lastCategory) {
-                        itemHtml += '</div>';
-                        itemHtml += '</div>';
-                    }
-                    itemHtml += '<div class="verticalSection verticalSection-extrabottompadding">';
-                    itemHtml += '<div class="sectionTitleContainer" style="margin-bottom:1em;">';
-                    itemHtml += '<h2 class="sectionTitle">';
-                    itemHtml += notification.Category;
-                    itemHtml += '</h2>';
-                    if (showHelp) {
-                        showHelp = false;
-                        itemHtml += '<a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/notifications.html">';
-                        itemHtml += globalize.translate('Help');
-                        itemHtml += '</a>';
-                    }
-                    itemHtml += '</div>';
-                    itemHtml += '<div class="paperList">';
-                }
-                itemHtml += '<a class="listItem listItem-border" is="emby-linkbutton" data-ripple="false" href="notificationsetting.html?type=' + notification.Type + '">';
-                if (notification.Enabled) {
-                    itemHtml += '<span class="listItemIcon material-icons notifications_active"></span>';
-                } else {
-                    itemHtml += '<span class="listItemIcon material-icons notifications_off" style="background-color:#999;"></span>';
-                }
-                itemHtml += '<div class="listItemBody">';
-                itemHtml += '<div class="listItemBodyText">' + notification.Name + '</div>';
-                itemHtml += '</div>';
-                itemHtml += '<button type="button" is="paper-icon-button-light"><span class="material-icons mode_edit"></span></button>';
-                itemHtml += '</a>';
-                return itemHtml;
-            }).join('');
-
-            if (list.length) {
-                html += '</div>';
-                html += '</div>';
-            }
-            page.querySelector('.notificationList').innerHTML = html;
-            loading.hide();
-        });
-    }
-
-    return function(view, params) {
-        view.addEventListener('viewshow', function() {
-            reload(view);
-        });
-    };
-});

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/notifications/notifications/index.js

@@ -0,0 +1,61 @@
+import loading from 'loading';
+import globalize from 'globalize';
+import 'listViewStyle';
+import 'emby-button';
+
+function reload(page) {
+    loading.show();
+    ApiClient.getJSON(ApiClient.getUrl('Notifications/Types')).then(function (list) {
+        let html = '';
+        let lastCategory = '';
+        let showHelp = true;
+        html += list.map(function (notification) {
+            let itemHtml = '';
+            if (notification.Category !== lastCategory) {
+                lastCategory = notification.Category;
+                if (lastCategory) {
+                    itemHtml += '</div>';
+                    itemHtml += '</div>';
+                }
+                itemHtml += '<div class="verticalSection verticalSection-extrabottompadding">';
+                itemHtml += '<div class="sectionTitleContainer" style="margin-bottom:1em;">';
+                itemHtml += '<h2 class="sectionTitle">';
+                itemHtml += notification.Category;
+                itemHtml += '</h2>';
+                if (showHelp) {
+                    showHelp = false;
+                    itemHtml += '<a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/notifications.html">';
+                    itemHtml += globalize.translate('Help');
+                    itemHtml += '</a>';
+                }
+                itemHtml += '</div>';
+                itemHtml += '<div class="paperList">';
+            }
+            itemHtml += '<a class="listItem listItem-border" is="emby-linkbutton" data-ripple="false" href="notificationsetting.html?type=' + notification.Type + '">';
+            if (notification.Enabled) {
+                itemHtml += '<span class="listItemIcon material-icons notifications_active"></span>';
+            } else {
+                itemHtml += '<span class="listItemIcon material-icons notifications_off" style="background-color:#999;"></span>';
+            }
+            itemHtml += '<div class="listItemBody">';
+            itemHtml += '<div class="listItemBodyText">' + notification.Name + '</div>';
+            itemHtml += '</div>';
+            itemHtml += '<button type="button" is="paper-icon-button-light"><span class="material-icons mode_edit"></span></button>';
+            itemHtml += '</a>';
+            return itemHtml;
+        }).join('');
+
+        if (list.length) {
+            html += '</div>';
+            html += '</div>';
+        }
+        page.querySelector('.notificationList').innerHTML = html;
+        loading.hide();
+    });
+}
+
+export default function (view, params) {
+    view.addEventListener('viewshow', function () {
+        reload(view);
+    });
+}

src/controllers/dashboard/playback.html

@@ -0,0 +1,30 @@
+<div id="playbackConfigurationPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs">
+    <div>
+        <div class="content-primary">
+            <form class="playbackConfigurationForm">
+                <div class="sectionTitleContainer flex align-items-center">
+                    <h2 class="sectionTitle">${ButtonResume}</h2>
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" id="txtMinResumePct" name="txtMinResumePct" pattern="[0-9]*" required min="0" max="100" label="${LabelMinResumePercentage}"></input>
+                    <div class="fieldDescription">
+                        ${LabelMinResumePercentageHelp}
+                    </div>
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" id="txtMaxResumePct" name="txtMaxResumePct" pattern="[0-9]*" required min="1" max="100" label="${LabelMaxResumePercentage}"></input>
+                    <div class="fieldDescription">
+                        ${LabelMaxResumePercentageHelp}
+                    </div>
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" id="txtMinResumeDuration" name="txtMinResumeDuration" pattern="[0-9]*" required min="0" label="${LabelMinResumeDuration}"></input>
+                    <div class="fieldDescription">
+                        ${LabelMinResumeDurationHelp}
+                    </div>
+                </div>
+                <div><button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button></div>
+            </form>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/playback.js

@@ -1,5 +1,9 @@
-define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, libraryMenu, globalize) {
-    'use strict';
+import $ from 'jQuery';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+
+/* eslint-disable indent */
 
     function loadPage(page, config) {
         $('#txtMinResumePct', page).val(config.MinResumePct);
@@ -10,7 +14,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
 
     function onSubmit() {
         loading.show();
-        var form = this;
+        const form = this;
         ApiClient.getServerConfiguration().then(function (config) {
             config.MinResumePct = $('#txtMinResumePct', form).val();
             config.MaxResumePct = $('#txtMaxResumePct', form).val();
@@ -28,7 +32,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
             name: globalize.translate('Transcoding')
         }, {
             href: 'playbackconfiguration.html',
-            name: globalize.translate('TabResumeSettings')
+            name: globalize.translate('ButtonResume')
         }, {
             href: 'streamingsettings.html',
             name: globalize.translate('TabStreaming')
@@ -40,9 +44,10 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
     }).on('pageshow', '#playbackConfigurationPage', function () {
         loading.show();
         libraryMenu.setTabs('playback', 1, getTabs);
-        var page = this;
+        const page = this;
         ApiClient.getServerConfiguration().then(function (config) {
             loadPage(page, config);
         });
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/plugins/add.js

@@ -1,143 +0,0 @@
-define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'emby-button'], function ($, loading, libraryMenu, globalize, connectionManager) {
-    'use strict';
-
-    function populateHistory(packageInfo, page) {
-        var html = '';
-        var length = Math.min(packageInfo.versions.length, 10);
-
-        for (var i = 0; i < length; i++) {
-            var version = packageInfo.versions[i];
-            html += '<h2 style="margin:.5em 0;">' + version.version + '</h2>';
-            html += '<div style="margin-bottom:1.5em;">' + version.changelog + '</div>';
-        }
-
-        $('#revisionHistory', page).html(html);
-    }
-
-    function populateVersions(packageInfo, page, installedPlugin) {
-        var html = '';
-
-        for (var i = 0; i < packageInfo.versions.length; i++) {
-            var version = packageInfo.versions[i];
-            html += '<option value="' + version.version + '">' + version.version + '</option>';
-        }
-
-        var selectmenu = $('#selectVersion', page).html(html);
-
-        if (!installedPlugin) {
-            $('#pCurrentVersion', page).hide().html('');
-        }
-
-        var packageVersion = packageInfo.versions[0];
-        if (packageVersion) {
-            selectmenu.val(packageVersion.version);
-        }
-    }
-
-    function renderPackage(pkg, installedPlugins, page) {
-        var installedPlugin = installedPlugins.filter(function (ip) {
-            return ip.Name == pkg.name;
-        })[0];
-
-        populateVersions(pkg, page, installedPlugin);
-        populateHistory(pkg, page);
-
-        $('.pluginName', page).html(pkg.name);
-        $('#btnInstallDiv', page).removeClass('hide');
-        $('#pSelectVersion', page).removeClass('hide');
-
-        if (pkg.overview) {
-            $('#overview', page).show().html(pkg.overview);
-        } else {
-            $('#overview', page).hide();
-        }
-
-        $('#description', page).html(pkg.description);
-        $('#developer', page).html(pkg.owner);
-
-        if (installedPlugin) {
-            var currentVersionText = globalize.translate('MessageYouHaveVersionInstalled', '<strong>' + installedPlugin.Version + '</strong>');
-            $('#pCurrentVersion', page).show().html(currentVersionText);
-        } else {
-            $('#pCurrentVersion', page).hide().html('');
-        }
-
-        loading.hide();
-    }
-
-    function alertText(options) {
-        require(['alert'], function (alert) {
-            alert(options);
-        });
-    }
-
-    function performInstallation(page, name, guid, version) {
-        var developer = $('#developer', page).html().toLowerCase();
-
-        var alertCallback = function () {
-            loading.show();
-            page.querySelector('#btnInstall').disabled = true;
-            ApiClient.installPlugin(name, guid, version).then(function () {
-                loading.hide();
-                alertText(globalize.translate('PluginInstalledMessage'));
-            });
-        };
-
-        if (developer !== 'jellyfin') {
-            loading.hide();
-            var msg = globalize.translate('MessagePluginInstallDisclaimer');
-            msg += '<br/>';
-            msg += '<br/>';
-            msg += globalize.translate('PleaseConfirmPluginInstallation');
-
-            require(['confirm'], function (confirm) {
-                confirm(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () {
-                    alertCallback();
-                }, function () {
-                    console.debug('plugin not installed');
-                });
-            });
-        } else {
-            alertCallback();
-        }
-    }
-
-    return function (view, params) {
-        $('.addPluginForm', view).on('submit', function () {
-            loading.show();
-            var page = $(this).parents('#addPluginPage')[0];
-            var name = params.name;
-            var guid = params.guid;
-            ApiClient.getInstalledPlugins().then(function (plugins) {
-                var installedPlugin = plugins.filter(function (plugin) {
-                    return plugin.Name == name;
-                })[0];
-
-                var version = $('#selectVersion', page).val();
-                if (installedPlugin) {
-                    if (installedPlugin.Version === version) {
-                        loading.hide();
-                        Dashboard.alert({
-                            message: globalize.translate('MessageAlreadyInstalled'),
-                            title: globalize.translate('HeaderPluginInstallation')
-                        });
-                    }
-                } else {
-                    performInstallation(page, name, guid, version);
-                }
-            });
-            return false;
-        });
-        view.addEventListener('viewshow', function () {
-            var page = this;
-            loading.show();
-            var name = params.name;
-            var guid = params.guid;
-            var promise1 = ApiClient.getPackageInfo(name, guid);
-            var promise2 = ApiClient.getInstalledPlugins();
-            Promise.all([promise1, promise2]).then(function (responses) {
-                renderPackage(responses[0], responses[1], page);
-            });
-        });
-    };
-});

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

@@ -0,0 +1,146 @@
+import $ from 'jQuery';
+import loading from 'loading';
+import globalize from 'globalize';
+import 'emby-button';
+
+function populateHistory(packageInfo, page) {
+    let html = '';
+    const length = Math.min(packageInfo.versions.length, 10);
+
+    for (let i = 0; i < length; i++) {
+        const version = packageInfo.versions[i];
+        html += '<h2 style="margin:.5em 0;">' + version.version + '</h2>';
+        html += '<div style="margin-bottom:1.5em;">' + version.changelog + '</div>';
+    }
+
+    $('#revisionHistory', page).html(html);
+}
+
+function populateVersions(packageInfo, page, installedPlugin) {
+    let html = '';
+
+    for (let i = 0; i < packageInfo.versions.length; i++) {
+        const version = packageInfo.versions[i];
+        html += '<option value="' + version.version + '">' + version.version + '</option>';
+    }
+
+    const selectmenu = $('#selectVersion', page).html(html);
+
+    if (!installedPlugin) {
+        $('#pCurrentVersion', page).hide().html('');
+    }
+
+    const packageVersion = packageInfo.versions[0];
+    if (packageVersion) {
+        selectmenu.val(packageVersion.version);
+    }
+}
+
+function renderPackage(pkg, installedPlugins, page) {
+    const installedPlugin = installedPlugins.filter(function (ip) {
+        return ip.Name == pkg.name;
+    })[0];
+
+    populateVersions(pkg, page, installedPlugin);
+    populateHistory(pkg, page);
+
+    $('.pluginName', page).html(pkg.name);
+    $('#btnInstallDiv', page).removeClass('hide');
+    $('#pSelectVersion', page).removeClass('hide');
+
+    if (pkg.overview) {
+        $('#overview', page).show().html(pkg.overview);
+    } else {
+        $('#overview', page).hide();
+    }
+
+    $('#description', page).html(pkg.description);
+    $('#developer', page).html(pkg.owner);
+
+    if (installedPlugin) {
+        const currentVersionText = globalize.translate('MessageYouHaveVersionInstalled', '<strong>' + installedPlugin.Version + '</strong>');
+        $('#pCurrentVersion', page).show().html(currentVersionText);
+    } else {
+        $('#pCurrentVersion', page).hide().html('');
+    }
+
+    loading.hide();
+}
+
+function alertText(options) {
+    import('alert').then(({default: alert}) => {
+        alert(options);
+    });
+}
+
+function performInstallation(page, name, guid, version) {
+    const developer = $('#developer', page).html().toLowerCase();
+
+    const alertCallback = function () {
+        loading.show();
+        page.querySelector('#btnInstall').disabled = true;
+        ApiClient.installPlugin(name, guid, version).then(() => {
+            loading.hide();
+            alertText(globalize.translate('MessagePluginInstalled'));
+        }).catch(() => {
+            alertText(globalize.translate('MessagePluginInstallError'));
+        });
+    };
+
+    if (developer !== 'jellyfin') {
+        loading.hide();
+        let msg = globalize.translate('MessagePluginInstallDisclaimer');
+        msg += '<br/>';
+        msg += '<br/>';
+        msg += globalize.translate('PleaseConfirmPluginInstallation');
+
+        import('confirm').then(({default: confirm}) => {
+            confirm(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () {
+                alertCallback();
+            }).catch(() => {
+                console.debug('plugin not installed');
+            });
+        });
+    } else {
+        alertCallback();
+    }
+}
+
+export default function(view, params) {
+    $('.addPluginForm', view).on('submit', function () {
+        loading.show();
+        const page = $(this).parents('#addPluginPage')[0];
+        const name = params.name;
+        const guid = params.guid;
+        ApiClient.getInstalledPlugins().then(function (plugins) {
+            const installedPlugin = plugins.filter(function (plugin) {
+                return plugin.Name == name;
+            })[0];
+
+            const version = $('#selectVersion', page).val();
+            if (installedPlugin && installedPlugin.Version === version) {
+                loading.hide();
+                Dashboard.alert({
+                    message: globalize.translate('MessageAlreadyInstalled'),
+                    title: globalize.translate('HeaderPluginInstallation')
+                });
+            } else {
+                performInstallation(page, name, guid, version);
+            }
+        }).catch(() => {
+            alertText(globalize.translate('MessageGetInstalledPluginsError'));
+        });
+        return false;
+    });
+    view.addEventListener('viewshow', function () {
+        const page = this;
+        loading.show();
+        const name = params.name;
+        const guid = params.guid;
+        const promise1 = ApiClient.getPackageInfo(name, guid);
+        const promise2 = ApiClient.getInstalledPlugins();
+        Promise.all([promise1, promise2]).then(function (responses) {
+            renderPackage(responses[0], responses[1], page);
+        });
+    });
+}

src/controllers/dashboard/plugins/available.js

@@ -1,139 +0,0 @@
-define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby-checkbox', 'emby-select'], function (loading, libraryMenu, globalize) {
-    'use strict';
-
-    function reloadList(page) {
-        loading.show();
-        var promise1 = ApiClient.getAvailablePlugins();
-        var promise2 = ApiClient.getInstalledPlugins();
-        Promise.all([promise1, promise2]).then(function (responses) {
-            populateList({
-                catalogElement: page.querySelector('#pluginTiles'),
-                noItemsElement: page.querySelector('#noPlugins'),
-                availablePlugins: responses[0],
-                installedPlugins: responses[1]
-            });
-        });
-    }
-
-    function getHeaderText(category) {
-        category = category.replace(' ', '');
-        if ('Channel' === category) {
-            category = 'Channels';
-        } else if ('Theme' === category) {
-            category = 'Themes';
-        } else if ('LiveTV' === category) {
-            category = 'HeaderLiveTV';
-        } else if ('ScreenSaver' === category) {
-            category = 'HeaderScreenSavers';
-        }
-
-        return globalize.translate(category);
-    }
-
-    function populateList(options) {
-        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);
-            array[index] = plugin;
-        });
-
-        availablePlugins.sort(function (a, b) {
-            if (a.category > b.category) {
-                return 1;
-            } else if (b.category > a.category) {
-                return -1;
-            }
-            if (a.name > b.name) {
-                return 1;
-            } else if (b.name > a.name) {
-                return -1;
-            }
-            return 0;
-        });
-
-        var currentCategory = null;
-        var html = '';
-
-        for (var i = 0; i < availablePlugins.length; i++) {
-            var plugin = availablePlugins[i];
-            var category = plugin.categoryDisplayName;
-            if (category != currentCategory) {
-                if (currentCategory) {
-                    html += '</div>';
-                    html += '</div>';
-                }
-                html += '<div class="verticalSection">';
-                html += '<h2 class="sectionTitle sectionTitle-cards">' + category + '</h2>';
-                html += '<div class="itemsContainer vertical-wrap">';
-                currentCategory = category;
-            }
-            html += getPluginHtml(plugin, options, installedPlugins);
-        }
-        html += '</div>';
-        html += '</div>';
-
-        if (!availablePlugins.length && options.noItemsElement) {
-            options.noItemsElement.classList.remove('hide');
-        }
-
-        options.catalogElement.innerHTML = html;
-        loading.hide();
-    }
-
-    function getPluginHtml(plugin, options, installedPlugins) {
-        var html = '';
-        var href = plugin.externalUrl ? plugin.externalUrl : 'addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid;
-
-        if (options.context) {
-            href += '&context=' + options.context;
-        }
-
-        var target = plugin.externalUrl ? ' target="_blank"' : '';
-        html += "<div class='card backdropCard'>";
-        html += '<div class="cardBox visualCardBox">';
-        html += '<div class="cardScalable visualCardBox-cardScalable">';
-        html += '<div class="cardPadder cardPadder-backdrop"></div>';
-        html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + href + '"' + target + '>';
-        html += '<span class="cardImageIcon material-icons folder"></span>';
-        html += '</a>';
-        html += '</div>';
-        html += '<div class="cardFooter">';
-        html += "<div class='cardText'>";
-        html += plugin.name;
-        html += '</div>';
-        var installedPlugin = installedPlugins.filter(function (ip) {
-            return ip.Id == plugin.guid;
-        })[0];
-        html += "<div class='cardText cardText-secondary'>";
-        html += installedPlugin ? globalize.translate('LabelVersionInstalled', installedPlugin.Version) : '&nbsp;';
-        html += '</div>';
-        html += '</div>';
-        html += '</div>';
-        return html += '</div>';
-    }
-
-    function getTabs() {
-        return [{
-            href: 'installedplugins.html',
-            name: globalize.translate('TabMyPlugins')
-        }, {
-            href: 'availableplugins.html',
-            name: globalize.translate('TabCatalog')
-        }];
-    }
-
-    window.PluginCatalog = {
-        renderCatalog: populateList
-    };
-
-    return function (view, params) {
-        view.addEventListener('viewshow', function () {
-            libraryMenu.setTabs('plugins', 1, getTabs);
-            reloadList(this);
-        });
-    };
-});

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

@@ -0,0 +1,142 @@
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+import 'cardStyle';
+import 'emby-button';
+import 'emby-checkbox';
+import 'emby-select';
+
+function reloadList(page) {
+    loading.show();
+    const promise1 = ApiClient.getAvailablePlugins();
+    const promise2 = ApiClient.getInstalledPlugins();
+    Promise.all([promise1, promise2]).then(function (responses) {
+        populateList({
+            catalogElement: page.querySelector('#pluginTiles'),
+            noItemsElement: page.querySelector('#noPlugins'),
+            availablePlugins: responses[0],
+            installedPlugins: responses[1]
+        });
+    });
+}
+
+function getHeaderText(category) {
+    category = category.replace(' ', '');
+    // TODO: Replace with switch
+    if (category === 'Channel') {
+        category = 'Channels';
+    } else if (category === 'Theme') {
+        category = 'Themes';
+    } else if (category === 'LiveTV') {
+        category = 'LiveTV';
+    } else if (category === 'ScreenSaver') {
+        category = 'HeaderScreenSavers';
+    }
+
+    return globalize.translate(category);
+}
+
+function populateList(options) {
+    const availablePlugins = options.availablePlugins;
+    const installedPlugins = options.installedPlugins;
+
+    availablePlugins.forEach(function (plugin, index, array) {
+        plugin.category = plugin.category || 'General';
+        plugin.categoryDisplayName = getHeaderText(plugin.category);
+        array[index] = plugin;
+    });
+
+    availablePlugins.sort(function (a, b) {
+        if (a.category > b.category) {
+            return 1;
+        } else if (b.category > a.category) {
+            return -1;
+        }
+        if (a.name > b.name) {
+            return 1;
+        } else if (b.name > a.name) {
+            return -1;
+        }
+        return 0;
+    });
+
+    let currentCategory = null;
+    let html = '';
+
+    for (let i = 0; i < availablePlugins.length; i++) {
+        const plugin = availablePlugins[i];
+        const category = plugin.categoryDisplayName;
+        if (category != currentCategory) {
+            if (currentCategory) {
+                html += '</div>';
+                html += '</div>';
+            }
+            html += '<div class="verticalSection">';
+            html += '<h2 class="sectionTitle sectionTitle-cards">' + category + '</h2>';
+            html += '<div class="itemsContainer vertical-wrap">';
+            currentCategory = category;
+        }
+        html += getPluginHtml(plugin, options, installedPlugins);
+    }
+    html += '</div>';
+    html += '</div>';
+
+    if (!availablePlugins.length && options.noItemsElement) {
+        options.noItemsElement.classList.remove('hide');
+    }
+
+    options.catalogElement.innerHTML = html;
+    loading.hide();
+}
+
+function getPluginHtml(plugin, options, installedPlugins) {
+    let html = '';
+    let href = plugin.externalUrl ? plugin.externalUrl : 'addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid;
+
+    if (options.context) {
+        href += '&context=' + options.context;
+    }
+
+    const target = plugin.externalUrl ? ' target="_blank"' : '';
+    html += "<div class='card backdropCard'>";
+    html += '<div class="cardBox visualCardBox">';
+    html += '<div class="cardScalable visualCardBox-cardScalable">';
+    html += '<div class="cardPadder cardPadder-backdrop"></div>';
+    html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + href + '"' + target + '>';
+    html += '<span class="cardImageIcon material-icons folder"></span>';
+    html += '</a>';
+    html += '</div>';
+    html += '<div class="cardFooter">';
+    html += "<div class='cardText'>";
+    html += plugin.name;
+    html += '</div>';
+    const installedPlugin = installedPlugins.filter(function (ip) {
+        return ip.Id == plugin.guid;
+    })[0];
+    html += "<div class='cardText cardText-secondary'>";
+    html += installedPlugin ? globalize.translate('LabelVersionInstalled', installedPlugin.Version) : '&nbsp;';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    return html += '</div>';
+}
+
+function getTabs() {
+    return [{
+        href: 'installedplugins.html',
+        name: globalize.translate('TabMyPlugins')
+    }, {
+        href: 'availableplugins.html',
+        name: globalize.translate('TabCatalog')
+    }, {
+        href: 'repositories.html',
+        name: globalize.translate('TabRepositories')
+    }];
+}
+
+export default function (view) {
+    view.addEventListener('viewshow', function () {
+        libraryMenu.setTabs('plugins', 1, getTabs);
+        reloadList(this);
+    });
+}

src/controllers/dashboard/plugins/installed.js

@@ -1,180 +0,0 @@
-define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'], function (loading, libraryMenu, dom, globalize) {
-    'use strict';
-
-    function deletePlugin(page, uniqueid, name) {
-        var msg = globalize.translate('UninstallPluginConfirmation', name);
-
-        require(['confirm'], function (confirm) {
-            confirm({
-                title: globalize.translate('UninstallPluginHeader'),
-                text: msg,
-                primary: 'delete',
-                confirmText: globalize.translate('UninstallPluginHeader')
-            }).then(function () {
-                loading.show();
-                ApiClient.uninstallPlugin(uniqueid).then(function () {
-                    reloadList(page);
-                });
-            });
-        });
-    }
-
-    function showNoConfigurationMessage() {
-        Dashboard.alert({
-            message: globalize.translate('NoPluginConfigurationMessage')
-        });
-    }
-
-    function showConnectMessage() {
-        Dashboard.alert({
-            message: globalize.translate('MessagePluginConfigurationRequiresLocalAccess')
-        });
-    }
-
-    function getPluginCardHtml(plugin, pluginConfigurationPages) {
-        var configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
-            return pluginConfigurationPage.PluginId == plugin.Id;
-        })[0];
-        var configPageUrl = configPage ? Dashboard.getConfigurationPageUrl(configPage.Name) : null;
-        var html = '';
-        html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' class='card backdropCard'>";
-        html += '<div class="cardBox visualCardBox">';
-        html += '<div class="cardScalable">';
-        html += '<div class="cardPadder cardPadder-backdrop"></div>';
-        html += configPageUrl ? '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + configPageUrl + '">' : '<div class="cardContent noConfigPluginCard noHoverEffect cardImageContainer">';
-        html += '<span class="cardImageIcon material-icons folder"></span>';
-        html += configPageUrl ? '</a>' : '</div>';
-        html += '</div>';
-        html += '<div class="cardFooter">';
-        html += '<div style="text-align:right; float:right;padding-top:5px;">';
-        html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert"></span></button>';
-        html += '</div>';
-        html += "<div class='cardText'>";
-        html += configPage.DisplayName || plugin.Name;
-        html += '</div>';
-        html += "<div class='cardText cardText-secondary'>";
-        html += plugin.Version;
-        html += '</div>';
-        html += '</div>';
-        html += '</div>';
-        html += '</div>';
-        return html;
-    }
-
-    function renderPlugins(page, plugins) {
-        ApiClient.getJSON(ApiClient.getUrl('web/configurationpages') + '?pageType=PluginConfiguration').then(function (configPages) {
-            populateList(page, plugins, configPages);
-        });
-    }
-
-    function populateList(page, plugins, pluginConfigurationPages) {
-        plugins = plugins.sort(function (plugin1, plugin2) {
-            if (plugin1.Name > plugin2.Name) {
-                return 1;
-            }
-
-            return -1;
-        });
-
-        var html = plugins.map(function (p) {
-            return getPluginCardHtml(p, pluginConfigurationPages);
-        }).join('');
-
-        var installedPluginsElement = page.querySelector('.installedPlugins');
-        installedPluginsElement.removeEventListener('click', onInstalledPluginsClick);
-        installedPluginsElement.addEventListener('click', onInstalledPluginsClick);
-
-        if (plugins.length) {
-            installedPluginsElement.classList.add('itemsContainer');
-            installedPluginsElement.classList.add('vertical-wrap');
-        } else {
-            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 += '</a></p>';
-            html += '</div>';
-        }
-
-        installedPluginsElement.innerHTML = html;
-        loading.hide();
-    }
-
-    function showPluginMenu(page, elem) {
-        var card = dom.parentWithClass(elem, 'card');
-        var id = card.getAttribute('data-id');
-        var name = card.getAttribute('data-name');
-        var configHref = card.querySelector('.cardContent').getAttribute('href');
-        var menuItems = [];
-
-        if (configHref) {
-            menuItems.push({
-                name: globalize.translate('ButtonSettings'),
-                id: 'open',
-                icon: 'mode_edit'
-            });
-        }
-
-        menuItems.push({
-            name: globalize.translate('ButtonUninstall'),
-            id: 'delete',
-            icon: 'delete'
-        });
-
-        require(['actionsheet'], function (actionsheet) {
-            actionsheet.show({
-                items: menuItems,
-                positionTo: elem,
-                callback: function (resultId) {
-                    switch (resultId) {
-                        case 'open':
-                            Dashboard.navigate(configHref);
-                            break;
-                        case 'delete':
-                            deletePlugin(page, id, name);
-                            break;
-                    }
-                }
-            });
-        });
-    }
-
-    function reloadList(page) {
-        loading.show();
-        ApiClient.getInstalledPlugins().then(function (plugins) {
-            renderPlugins(page, plugins);
-        });
-    }
-
-    function getTabs() {
-        return [{
-            href: 'installedplugins.html',
-            name: globalize.translate('TabMyPlugins')
-        }, {
-            href: 'availableplugins.html',
-            name: globalize.translate('TabCatalog')
-        }];
-    }
-
-    function onInstalledPluginsClick(e) {
-        if (dom.parentWithClass(e.target, 'noConfigPluginCard')) {
-            showNoConfigurationMessage();
-        } else if (dom.parentWithClass(e.target, 'connectModePluginCard')) {
-            showConnectMessage();
-        } else {
-            var btnCardMenu = dom.parentWithClass(e.target, 'btnCardMenu');
-            if (btnCardMenu) {
-                showPluginMenu(dom.parentWithClass(btnCardMenu, 'page'), btnCardMenu);
-            }
-        }
-    }
-
-    pageIdOn('pageshow', 'pluginsPage', function () {
-        libraryMenu.setTabs('plugins', 0, getTabs);
-        reloadList(this);
-    });
-
-    window.PluginsPage = {
-        renderPlugins: renderPlugins
-    };
-});

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

@@ -0,0 +1,193 @@
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import dom from 'dom';
+import globalize from 'globalize';
+import 'cardStyle';
+import 'emby-button';
+
+function deletePlugin(page, uniqueid, name) {
+    const msg = globalize.translate('UninstallPluginConfirmation', name);
+
+    import('confirm').then(({default: confirm}) => {
+        confirm.default({
+            title: globalize.translate('HeaderUninstallPlugin'),
+            text: msg,
+            primary: 'delete',
+            confirmText: globalize.translate('HeaderUninstallPlugin')
+        }).then(function () {
+            loading.show();
+            ApiClient.uninstallPlugin(uniqueid).then(function () {
+                reloadList(page);
+            });
+        });
+    });
+}
+
+function showNoConfigurationMessage() {
+    Dashboard.alert({
+        message: globalize.translate('MessageNoPluginConfiguration')
+    });
+}
+
+function showConnectMessage() {
+    Dashboard.alert({
+        message: globalize.translate('MessagePluginConfigurationRequiresLocalAccess')
+    });
+}
+
+function getPluginCardHtml(plugin, pluginConfigurationPages) {
+    const configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
+        return pluginConfigurationPage.PluginId == plugin.Id;
+    })[0];
+    const configPageUrl = configPage ? Dashboard.getPluginUrl(configPage.Name) : null;
+    let html = '';
+    html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' data-removable='" + plugin.CanUninstall + "' class='card backdropCard'>";
+    html += '<div class="cardBox visualCardBox">';
+    html += '<div class="cardScalable">';
+    html += '<div class="cardPadder cardPadder-backdrop"></div>';
+    html += configPageUrl ? '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + configPageUrl + '">' : '<div class="cardContent noConfigPluginCard noHoverEffect cardImageContainer emby-button">';
+    html += '<span class="cardImageIcon material-icons folder"></span>';
+    html += configPageUrl ? '</a>' : '</div>';
+    html += '</div>';
+    html += '<div class="cardFooter">';
+
+    if (configPage || plugin.CanUninstall) {
+        html += '<div style="text-align:right; float:right;padding-top:5px;">';
+        html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert"></span></button>';
+        html += '</div>';
+    }
+
+    html += "<div class='cardText'>";
+    html += configPage && configPage.DisplayName ? configPage.DisplayName : plugin.Name;
+    html += '</div>';
+    html += "<div class='cardText cardText-secondary'>";
+    html += plugin.Version;
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    return html;
+}
+
+function renderPlugins(page, plugins) {
+    ApiClient.getJSON(ApiClient.getUrl('web/configurationpages') + '?pageType=PluginConfiguration').then(function (configPages) {
+        populateList(page, plugins, configPages);
+    });
+}
+
+function populateList(page, plugins, pluginConfigurationPages) {
+    plugins = plugins.sort(function (plugin1, plugin2) {
+        if (plugin1.Name > plugin2.Name) {
+            return 1;
+        }
+
+        return -1;
+    });
+
+    let html = plugins.map(function (p) {
+        return getPluginCardHtml(p, pluginConfigurationPages);
+    }).join('');
+
+    const installedPluginsElement = page.querySelector('.installedPlugins');
+    installedPluginsElement.removeEventListener('click', onInstalledPluginsClick);
+    installedPluginsElement.addEventListener('click', onInstalledPluginsClick);
+
+    if (plugins.length) {
+        installedPluginsElement.classList.add('itemsContainer');
+        installedPluginsElement.classList.add('vertical-wrap');
+    } else {
+        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('MessageBrowsePluginCatalog');
+        html += '</a></p>';
+        html += '</div>';
+    }
+
+    installedPluginsElement.innerHTML = html;
+    loading.hide();
+}
+
+function showPluginMenu(page, elem) {
+    const card = dom.parentWithClass(elem, 'card');
+    const id = card.getAttribute('data-id');
+    const name = card.getAttribute('data-name');
+    const removable = card.getAttribute('data-removable');
+    const configHref = card.querySelector('.cardContent').getAttribute('href');
+    const menuItems = [];
+
+    if (configHref) {
+        menuItems.push({
+            name: globalize.translate('Settings'),
+            id: 'open',
+            icon: 'mode_edit'
+        });
+    }
+
+    if (removable === 'true') {
+        menuItems.push({
+            name: globalize.translate('ButtonUninstall'),
+            id: 'delete',
+            icon: 'delete'
+        });
+    }
+
+    import('actionsheet').then(({default: actionsheet}) => {
+        actionsheet.show({
+            items: menuItems,
+            positionTo: elem,
+            callback: function (resultId) {
+                switch (resultId) {
+                    case 'open':
+                        Dashboard.navigate(configHref);
+                        break;
+                    case 'delete':
+                        deletePlugin(page, id, name);
+                        break;
+                }
+            }
+        });
+    });
+}
+
+function reloadList(page) {
+    loading.show();
+    ApiClient.getInstalledPlugins().then(function (plugins) {
+        renderPlugins(page, plugins);
+    });
+}
+
+function getTabs() {
+    return [{
+        href: 'installedplugins.html',
+        name: globalize.translate('TabMyPlugins')
+    }, {
+        href: 'availableplugins.html',
+        name: globalize.translate('TabCatalog')
+    }, {
+        href: 'repositories.html',
+        name: globalize.translate('TabRepositories')
+    }];
+}
+
+function onInstalledPluginsClick(e) {
+    if (dom.parentWithClass(e.target, 'noConfigPluginCard')) {
+        showNoConfigurationMessage();
+    } else if (dom.parentWithClass(e.target, 'connectModePluginCard')) {
+        showConnectMessage();
+    } else {
+        const btnCardMenu = dom.parentWithClass(e.target, 'btnCardMenu');
+        if (btnCardMenu) {
+            showPluginMenu(dom.parentWithClass(btnCardMenu, 'page'), btnCardMenu);
+        }
+    }
+}
+
+pageIdOn('pageshow', 'pluginsPage', function () {
+    libraryMenu.setTabs('plugins', 0, getTabs);
+    reloadList(this);
+});
+
+window.PluginsPage = {
+    renderPlugins: renderPlugins
+};

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="${Add}">
+                    <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/plugins/repositories/index.js

@@ -0,0 +1,153 @@
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+import dialogHelper from 'dialogHelper';
+import 'emby-button';
+import 'emby-checkbox';
+import 'emby-select';
+import 'formDialogStyle';
+import 'listViewStyle';
+
+let repositories = [];
+
+function reloadList(page) {
+    loading.show();
+    ApiClient.getJSON(ApiClient.getUrl('Repositories')).then(list => {
+        repositories = list;
+        populateList({
+            listElement: page.querySelector('#repositories'),
+            noneElement: page.querySelector('#none'),
+            repositories: repositories
+        });
+    }).catch(error => {
+        console.error('error loading repositories');
+        page.querySelector('#none').classList.remove('hide');
+        loading.hide();
+    });
+}
+
+function saveList(page) {
+    loading.show();
+    ApiClient.ajax({
+        type: 'POST',
+        url: ApiClient.getUrl('Repositories'),
+        data: JSON.stringify(repositories),
+        contentType: 'application/json'
+    }).then(response => {
+        reloadList(page);
+    }).catch(error => {
+        console.error('error saving repositories');
+        loading.hide();
+    });
+}
+
+function populateList(options) {
+    var html = '';
+
+    html += '<div class="paperList">';
+    for (var i = 0; i < options.repositories.length; i++) {
+        html += getRepositoryHtml(options.repositories[i]);
+    }
+
+    html += '</div>';
+    if (!options.repositories.length) {
+        options.noneElement.classList.remove('hide');
+    }
+
+    options.listElement.innerHTML = html;
+    loading.hide();
+}
+
+function getRepositoryHtml(repository) {
+    var html = '';
+
+    html += '<div class="listItem listItem-border">';
+    html += `<a is="emby-linkbutton" style="margin:0;padding:0" class="clearLink listItemIconContainer" href="${repository.Url}">`;
+    html += '<span class="material-icons listItemIcon open_in_new"></span>';
+    html += '</a>';
+    html += '<div class="listItemBody two-line">';
+    html += `<h3 class="listItemBodyText">${repository.Name}</h3>`;
+    html += `<div class="listItemBodyText secondary">${repository.Url}</div>`;
+    html += '</div>';
+    html += `<button type="button" is="paper-icon-button-light" id="${repository.Url}" class="btnDelete" title="${globalize.translate('Delete')}"><span class="material-icons delete"></span></button>`;
+    html += '</div>';
+
+    return html;
+}
+
+function getTabs() {
+    return [{
+        href: 'installedplugins.html',
+        name: globalize.translate('TabMyPlugins')
+    }, {
+        href: 'availableplugins.html',
+        name: globalize.translate('TabCatalog')
+    }, {
+        href: 'repositories.html',
+        name: globalize.translate('TabRepositories')
+    }];
+}
+
+export default function(view, params) {
+    view.addEventListener('viewshow', function () {
+        libraryMenu.setTabs('plugins', 2, getTabs);
+        reloadList(this);
+
+        var save = this;
+        $('#repositories', view).on('click', '.btnDelete', function() {
+            var button = this;
+            repositories = repositories.filter(function (r) {
+                return r.Url !== button.id;
+            });
+
+            saveList(save);
+        });
+    });
+
+    view.querySelector('.btnNewRepository').addEventListener('click', () => {
+        const dialog = dialogHelper.createDialog({
+            scrollY: false,
+            size: 'large',
+            modal: false,
+            removeOnClose: true
+        });
+
+        let html = '';
+
+        html += '<div class="formDialogHeader">';
+        html += '<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
+        html += `<h3 class="formDialogHeaderTitle">${globalize.translate('HeaderNewRepository')}</h3>`;
+        html += '</div>';
+        html += '<form class="newPluginForm" style="margin:4em">';
+        html += '<div class="inputContainer">';
+        html += `<input is="emby-input" id="txtRepositoryName" label="${globalize.translate('LabelRepositoryName')}" type="text" required />`;
+        html += `<div class="fieldDescription">${globalize.translate('LabelRepositoryNameHelp')}</div>`;
+        html += '</div>';
+        html += '<div class="inputContainer">';
+        html += `<input is="emby-input" id="txtRepositoryUrl" label="${globalize.translate('LabelRepositoryUrl')}" type="url" required />`;
+        html += `<div class="fieldDescription">${globalize.translate('LabelRepositoryUrlHelp')}</div>`;
+        html += '</div>';
+        html += `<button is="emby-button" type="submit" class="raised button-submit block"><span>${globalize.translate('Save')}</span></button>`;
+        html += '</div>';
+        html += '</form>';
+
+        dialog.innerHTML = html;
+        dialog.querySelector('.btnCancel').addEventListener('click', () => {
+            dialogHelper.close(dialog);
+        });
+
+        dialog.querySelector('.newPluginForm').addEventListener('submit', () => {
+            repositories.push({
+                Name: dialog.querySelector('#txtRepositoryName').value,
+                Url: dialog.querySelector('#txtRepositoryUrl').value,
+                Enabled: true
+            });
+
+            saveList(view);
+            dialogHelper.close(dialog);
+            return false;
+        });
+
+        dialogHelper.open(dialog);
+    });
+}

src/controllers/dashboard/scheduledtasks/scheduledtask.html

@@ -0,0 +1,85 @@
+<div id="scheduledTaskPage" data-role="page" class="page type-interior scheduledTasksConfigurationPage">
+    <div>
+        <div class="content-primary">
+            <div class="verticalSection">
+                <div class="sectionTitleContainer flex align-items-center">
+                    <h2 class="sectionTitle taskName"></h2>
+                    <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/tasks.html">${Help}</a>
+                </div>
+                <p id="pTaskDescription"></p>
+            </div>
+
+            <div class="readOnlyContent">
+                <div>
+                    <h2 style="vertical-align: middle; display: inline-block;">${HeaderTaskTriggers}</h2>
+                    <button is="emby-button" type="button" class="fab fab-mini btnAddTrigger submit" style="margin-left: 1em;" title="${ButtonAddScheduledTaskTrigger}">
+                        <span class="material-icons add"></span>
+                    </button>
+                </div>
+                <div class="taskTriggers"></div>
+            </div>
+        </div>
+    </div>
+    <div data-role="popup" id="popupAddTrigger" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
+        <form class="addTriggerForm" style="padding:1em;">
+            <div class="ui-bar-a">
+                <h3>${ButtonAddScheduledTaskTrigger}</h3>
+            </div>
+            <div data-role="content">
+                <div class="selectContainer">
+                    <select is="emby-select" id="selectTriggerType" class="selectTriggerType" label="${LabelTriggerType}">
+                        <option value="DailyTrigger">${OptionDaily}</option>
+                        <option value="WeeklyTrigger">${OptionWeekly}</option>
+                        <option value="IntervalTrigger">${OptionOnInterval}</option>
+                        <option value="StartupTrigger">${OnApplicationStartup}</option>
+                    </select>
+                </div>
+                <div id="fldDayOfWeek" class="selectContainer">
+                    <select is="emby-select" id="selectDayOfWeek" name="selectDayOfWeek" label="${LabelDay}">
+                        <option value="Sunday">${Sunday}</option>
+                        <option value="Monday">${Monday}</option>
+                        <option value="Tuesday">${Tuesday}</option>
+                        <option value="Wednesday">${Wednesday}</option>
+                        <option value="Thursday">${Thursday}</option>
+                        <option value="Friday">${Friday}</option>
+                        <option value="Saturday">${Saturday}</option>
+                    </select>
+                </div>
+                <div id="fldTimeOfDay" class="selectContainer">
+                    <select is="emby-select" id="selectTimeOfDay" label="${LabelTime}"></select>
+                </div>
+                <div id="fldSelectSystemEvent" class="selectContainer">
+                    <select is="emby-select" id="selectSystemEvent" name="selectSystemEvent" label="${LabelEvent}">
+                        <option value="WakeFromSleep">${OptionWakeFromSleep}</option>
+                    </select>
+                </div>
+                <div id="fldSelectInterval" class="selectContainer">
+                    <select is="emby-select" id="selectInterval" label="${LabelEveryXMinutes}">
+                        <option value="9000000000">15 minutes</option>
+                        <option value="18000000000">30 minutes</option>
+                        <option value="27000000000">45 minutes</option>
+                        <option value="36000000000">1 hour</option>
+                        <option value="72000000000">2 hours</option>
+                        <option value="108000000000">3 hours</option>
+                        <option value="144000000000">4 hours</option>
+                        <option value="216000000000">6 hours</option>
+                        <option value="288000000000">8 hours</option>
+                        <option value="432000000000">12 hours</option>
+                        <option value="864000000000">24 hours</option>
+                    </select>
+                </div>
+                <div class="inputContainer">
+                    <input is="emby-input" id="txtTimeLimit" type="number" pattern="[0-9]*" min="1" step=".5" label="${LabelTimeLimitHours}" />
+                </div>
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block" data-icon="check">
+                        <span>${Add}</span>
+                    </button>
+                    <button is="emby-button" type="button" class="raised button-cancel block" data-icon="delete" onclick="$(this).parents('.dialog').addClass('hide');">
+                        <span>${ButtonCancel}</span>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>

src/controllers/dashboard/scheduledtasks/scheduledtask.js

@@ -1,11 +1,18 @@
-define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby-button', 'emby-select'], function ($, loading, datetime, dom, globalize) {
-    'use strict';
+import $ from 'jQuery';
+import loading from 'loading';
+import datetime from 'datetime';
+import dom from 'dom';
+import globalize from 'globalize';
+import 'emby-input';
+import 'emby-button';
+import 'emby-select';
+
+/* eslint-disable indent */
 
     function fillTimeOfDay(select) {
+        const options = [];
 
-        var options = [];
-
-        for (var i = 0; i < 86400000; i += 900000) {
+        for (let i = 0; i < 86400000; i += 900000) {
             options.push({
                 name: ScheduledTaskPage.getDisplayTime(i * 10000),
                 value: i * 10000
@@ -18,15 +25,15 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
     }
 
     Array.prototype.remove = function (from, to) {
-        var rest = this.slice((to || from) + 1 || this.length);
+        const rest = this.slice((to || from) + 1 || this.length);
         this.length = from < 0 ? this.length + from : from;
         return this.push.apply(this, rest);
     };
 
-    var ScheduledTaskPage = {
+    const ScheduledTaskPage = {
         refreshScheduledTask: function (view) {
             loading.show();
-            var id = getParameterByName('id');
+            const id = getParameterByName('id');
             ApiClient.getScheduledTask(id).then(function (task) {
                 ScheduledTaskPage.loadScheduledTask(view, task);
             });
@@ -35,18 +42,18 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
             $('.taskName', view).html(task.Name);
             $('#pTaskDescription', view).html(task.Description);
 
-            require(['listViewStyle'], function () {
+            import('listViewStyle').then(() => {
                 ScheduledTaskPage.loadTaskTriggers(view, task);
             });
 
             loading.hide();
         },
         loadTaskTriggers: function (context, task) {
-            var html = '';
+            let html = '';
             html += '<div class="paperList">';
 
-            for (var i = 0, length = task.Triggers.length; i < length; i++) {
-                var trigger = task.Triggers[i];
+            for (let i = 0, length = task.Triggers.length; i < length; i++) {
+                const trigger = task.Triggers[i];
 
                 html += '<div class="listItem listItem-border">';
                 html += '<span class="material-icons listItemIcon schedule"></span>';
@@ -58,7 +65,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
                 html += "<div class='listItemBodyText'>" + ScheduledTaskPage.getTriggerFriendlyName(trigger) + '</div>';
                 if (trigger.MaxRuntimeMs) {
                     html += '<div class="listItemBodyText secondary">';
-                    var hours = trigger.MaxRuntimeTicks / 36e9;
+                    const hours = trigger.MaxRuntimeTicks / 36e9;
                     if (hours == 1) {
                         html += globalize.translate('ValueTimeLimitSingleHour');
                     } else {
@@ -68,7 +75,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
                 }
 
                 html += '</div>';
-                html += '<button class="btnDeleteTrigger" data-index="' + i + '" type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonDelete') + '"><span class="material-icons delete"></span></button>';
+                html += '<button class="btnDeleteTrigger" data-index="' + i + '" type="button" is="paper-icon-button-light" title="' + globalize.translate('Delete') + '"><span class="material-icons delete"></span></button>';
                 html += '</div>';
             }
 
@@ -77,22 +84,21 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
         },
         // 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') {
-
-                var hours = trigger.IntervalTicks / 36e9;
+                const hours = trigger.IntervalTicks / 36e9;
 
                 if (hours == 0.25) {
                     return globalize.translate('EveryXMinutes', '15');
@@ -117,8 +123,8 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
             return trigger.Type;
         },
         getDisplayTime: function (ticks) {
-            var ms = ticks / 1e4;
-            var now = new Date();
+            const ms = ticks / 1e4;
+            const now = new Date();
             now.setHours(0, 0, 0, 0);
             now.setTime(now.getTime() + ms);
             return datetime.getDisplayTime(now);
@@ -129,7 +135,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
             $('#popupAddTrigger', view).removeClass('hide');
         },
         confirmDeleteTrigger: function (view, index) {
-            require(['confirm'], function (confirm) {
+            import('confirm').then(({default: confirm}) => {
                 confirm(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () {
                     ScheduledTaskPage.deleteTrigger(view, index);
                 });
@@ -137,7 +143,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
         },
         deleteTrigger: function (view, index) {
             loading.show();
-            var id = getParameterByName('id');
+            const id = getParameterByName('id');
             ApiClient.getScheduledTask(id).then(function (task) {
                 task.Triggers.remove(index);
                 ApiClient.updateScheduledTaskTriggers(task.Id, task.Triggers).then(function () {
@@ -179,7 +185,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
             }
         },
         getTriggerToAdd: function (page) {
-            var trigger = {
+            const trigger = {
                 Type: $('#selectTriggerType', page).val()
             };
 
@@ -194,7 +200,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
                 trigger.IntervalTicks = $('#selectInterval', page).val();
             }
 
-            var timeLimit = $('#txtTimeLimit', page).val() || '0';
+            let timeLimit = $('#txtTimeLimit', page).val() || '0';
             timeLimit = parseFloat(timeLimit) * 3600000;
 
             trigger.MaxRuntimeMs = timeLimit || null;
@@ -202,10 +208,10 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
             return trigger;
         }
     };
-    return function (view, params) {
+    export default function (view, params) {
         function onSubmit(e) {
             loading.show();
-            var id = getParameterByName('id');
+            const id = getParameterByName('id');
             ApiClient.getScheduledTask(id).then(function (task) {
                 task.Triggers.push(ScheduledTaskPage.getTriggerToAdd(view));
                 ApiClient.updateScheduledTaskTriggers(task.Id, task.Triggers).then(function () {
@@ -226,7 +232,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
             ScheduledTaskPage.showAddTriggerPopup(view);
         });
         view.addEventListener('click', function (e) {
-            var btnDeleteTrigger = dom.parentWithClass(e.target, 'btnDeleteTrigger');
+            const btnDeleteTrigger = dom.parentWithClass(e.target, 'btnDeleteTrigger');
 
             if (btnDeleteTrigger) {
                 ScheduledTaskPage.confirmDeleteTrigger(view, parseInt(btnDeleteTrigger.getAttribute('data-index')));
@@ -235,5 +241,6 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby
         view.addEventListener('viewshow', function () {
             ScheduledTaskPage.refreshScheduledTask(view);
         });
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/dashboard/scheduledtasks/scheduledtasks.html

@@ -0,0 +1,20 @@
+<div id="scheduledTasksPage" data-role="page" class="page type-interior scheduledTasksConfigurationPage">
+    <style>
+        .taskProgressOuter {
+            height: 6px;
+            background: #eee;
+            border-radius: 2px;
+        }
+
+        .taskProgressInner {
+            border-radius: 2px;
+            height: 100%;
+            background: #00a4dc;
+        }
+    </style>
+    <div>
+        <div class="content-primary">
+            <div class="divScheduledTasks readOnlyContent"></div>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/scheduledtasks/scheduledtasks.js

@@ -1,5 +1,14 @@
-define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date-fns', 'dfnshelper', 'listViewStyle', 'emby-button'], function ($, loading, events, globalize, serverNotifications, datefns, dfnshelper) {
-    'use strict';
+import $ from 'jQuery';
+import loading from 'loading';
+import events from 'events';
+import globalize from 'globalize';
+import serverNotifications from 'serverNotifications';
+import * as datefns from 'date-fns';
+import dfnshelper from 'dfnshelper';
+import 'listViewStyle';
+import 'emby-button';
+
+/* eslint-disable indent */
 
     function reloadList(page) {
         ApiClient.getScheduledTasks({
@@ -17,10 +26,10 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date
             return a == b ? 0 : a < b ? -1 : 1;
         });
 
-        var currentCategory;
-        var html = '';
-        for (var i = 0; i < tasks.length; i++) {
-            var task = tasks[i];
+        let currentCategory;
+        let html = '';
+        for (let i = 0; i < tasks.length; i++) {
+            const task = tasks[i];
             if (task.Category != currentCategory) {
                 currentCategory = task.Category;
                 if (currentCategory) {
@@ -63,11 +72,11 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date
     }
 
     function getTaskProgressHtml(task) {
-        var html = '';
+        let html = '';
         if (task.State === 'Idle') {
             if (task.LastExecutionResult) {
-                var endtime = Date.parse(task.LastExecutionResult.EndTimeUtc);
-                var starttime = Date.parse(task.LastExecutionResult.StartTimeUtc);
+                const endtime = Date.parse(task.LastExecutionResult.EndTimeUtc);
+                const starttime = Date.parse(task.LastExecutionResult.StartTimeUtc);
                 html += globalize.translate('LabelScheduledTaskLastRan', datefns.formatDistanceToNow(endtime, dfnshelper.localeWithSuffix),
                     datefns.formatDistance(starttime, endtime, { locale: dfnshelper.getLocale() }));
                 if (task.LastExecutionResult.Status === 'Failed') {
@@ -79,7 +88,7 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date
                 }
             }
         } else if (task.State === 'Running') {
-            var progress = (task.CurrentProgressPercentage || 0).toFixed(1);
+            const progress = (task.CurrentProgressPercentage || 0).toFixed(1);
             html += '<div style="display:flex;align-items:center;">';
             html += '<div class="taskProgressOuter" title="' + progress + '%" style="flex-grow:1;">';
             html += '<div class="taskProgressInner" style="width:' + progress + '%;">';
@@ -94,7 +103,7 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date
     }
 
     function setTaskButtonIcon(button, icon) {
-        var inner = button.querySelector('.material-icons');
+        const inner = button.querySelector('.material-icons');
         inner.classList.remove('stop', 'play_arrow');
         inner.classList.add(icon);
     }
@@ -114,10 +123,10 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date
         $(elem).parents('.listItem')[0].setAttribute('data-status', state);
     }
 
-    return function(view, params) {
+    export default function(view, params) {
         function updateTasks(tasks) {
-            for (var i = 0; i < tasks.length; i++) {
-                var task = tasks[i];
+            for (let i = 0; i < tasks.length; i++) {
+                const task = tasks[i];
                 view.querySelector('#taskProgress' + task.Id).innerHTML = getTaskProgressHtml(task);
                 updateTaskButton(view.querySelector('#btnTask' + task.Id), task.State);
             }
@@ -146,12 +155,12 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date
             pollInterval && clearInterval(pollInterval);
         }
 
-        var pollInterval;
-        var serverId = ApiClient.serverId();
+        let pollInterval;
+        const serverId = ApiClient.serverId();
 
         $('.divScheduledTasks', view).on('click', '.btnStartTask', function() {
-            var button = this;
-            var id = button.getAttribute('data-taskid');
+            const button = this;
+            const id = button.getAttribute('data-taskid');
             ApiClient.startScheduledTask(id).then(function() {
                 updateTaskButton(button, 'Running');
                 reloadList(view);
@@ -159,8 +168,8 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date
         });
 
         $('.divScheduledTasks', view).on('click', '.btnStopTask', function() {
-            var button = this;
-            var id = button.getAttribute('data-taskid');
+            const button = this;
+            const id = button.getAttribute('data-taskid');
             ApiClient.stopScheduledTask(id).then(function() {
                 updateTaskButton(button, '');
                 reloadList(view);
@@ -178,5 +187,6 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date
             reloadList(view);
             events.on(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate);
         });
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/dashboard/serveractivity.html

@@ -0,0 +1,12 @@
+<div id="serverActivityPage" data-role="page" class="page type-interior serverActivityPage noSecondaryNavPage" data-title="${HeaderActivity}">
+    <div>
+        <div class="content-primary">
+            <div class="verticalSection">
+                <h2 class="sectionTitle"></h2>
+            </div>
+            <div class="readOnlyContent">
+                <div class="paperList activityItems" data-activitylimit="100"></div>
+            </div>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/serveractivity.js

@@ -1,8 +1,10 @@
-define(['components/activitylog', 'globalize'], function (ActivityLog, globalize) {
-    'use strict';
+import ActivityLog from 'components/activitylog';
+import globalize from 'globalize';
 
-    return function (view, params) {
-        var activityLog;
+/* eslint-disable indent */
+
+    export default function (view, params) {
+        let activityLog;
 
         if (params.useractivity !== 'false') {
             view.querySelector('.activityItems').setAttribute('data-useractivity', 'true');
@@ -27,5 +29,6 @@ define(['components/activitylog', 'globalize'], function (ActivityLog, globalize
 
             activityLog = null;
         });
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/dashboard/streaming.html

@@ -0,0 +1,20 @@
+<div id="streamingSettingsPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs">
+    <div>
+        <div class="content-primary">
+            <form class="streamingSettingsForm">
+                <div class="verticalSection">
+                    <div class="sectionTitleContainer flex align-items-center">
+                        <h2 class="sectionTitle">${TabStreaming}</h2>
+                    </div>
+                    <div class="inputContainer">
+                        <input is="emby-input" type="number" id="txtRemoteClientBitrateLimit" pattern="[0-9]*" min="0" step=".25" label="${LabelRemoteClientBitrateLimit}" />
+                        <div class="fieldDescription">${LabelRemoteClientBitrateLimitHelp}</div>
+                    </div>
+                </div>
+                <button is="emby-button" type="submit" class="raised button-submit block">
+                    <span>${Save}</span>
+                </button>
+            </form>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/streaming.js

@@ -1,5 +1,9 @@
-define(['jQuery', 'libraryMenu', 'loading', 'globalize'], function ($, libraryMenu, loading, globalize) {
-    'use strict';
+import $ from 'jQuery';
+import libraryMenu from 'libraryMenu';
+import loading from 'loading';
+import globalize from 'globalize';
+
+/* eslint-disable indent */
 
     function loadPage(page, config) {
         $('#txtRemoteClientBitrateLimit', page).val(config.RemoteClientBitrateLimit / 1e6 || '');
@@ -8,7 +12,7 @@ define(['jQuery', 'libraryMenu', 'loading', 'globalize'], function ($, libraryMe
 
     function onSubmit() {
         loading.show();
-        var form = this;
+        const form = this;
         ApiClient.getServerConfiguration().then(function (config) {
             config.RemoteClientBitrateLimit = parseInt(1e6 * parseFloat($('#txtRemoteClientBitrateLimit', form).val() || '0'));
             ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult);
@@ -23,7 +27,7 @@ define(['jQuery', 'libraryMenu', 'loading', 'globalize'], function ($, libraryMe
             name: globalize.translate('Transcoding')
         }, {
             href: 'playbackconfiguration.html',
-            name: globalize.translate('TabResumeSettings')
+            name: globalize.translate('ButtonResume')
         }, {
             href: 'streamingsettings.html',
             name: globalize.translate('TabStreaming')
@@ -35,9 +39,10 @@ define(['jQuery', 'libraryMenu', 'loading', 'globalize'], function ($, libraryMe
     }).on('pageshow', '#streamingSettingsPage', function () {
         loading.show();
         libraryMenu.setTabs('playback', 2, getTabs);
-        var page = this;
+        const page = this;
         ApiClient.getServerConfiguration().then(function (config) {
             loadPage(page, config);
         });
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/users/useredit.html

@@ -0,0 +1,205 @@
+<div id="editUserPage" data-role="page" class="page type-interior">
+
+    <div>
+        <div class="content-primary">
+
+            <div class="verticalSection">
+                <div class="sectionTitleContainer flex align-items-center">
+                    <h2 class="sectionTitle username"></h2>
+                    <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/">${Help}</a>
+                </div>
+            </div>
+
+            <div data-role="controlgroup" data-type="horizontal" class="localnav" id="userProfileNavigation" data-mini="true">
+                <a href="#" is="emby-linkbutton" data-role="button" class="ui-btn-active">${Profile}</a>
+                <a href="#" is="emby-linkbutton" data-role="button" onclick="Dashboard.navigate('userlibraryaccess.html', true);">${TabAccess}</a>
+                <a href="#" is="emby-linkbutton" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);">${TabParentalControl}</a>
+                <a href="#" is="emby-linkbutton" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${HeaderPassword}</a>
+            </div>
+            <p class="lnkEditUserPreferencesContainer">
+                <a class="lnkEditUserPreferences button-link" href="#" is="emby-linkbutton">${ButtonEditOtherUserPreferences}</a>
+            </p>
+            <form class="editUserProfileForm">
+
+                <div class="disabledUserBanner" style="display: none;">
+                    <div class="btn btnDarkAccent btnStatic">
+                        <div>
+                            ${HeaderThisUserIsCurrentlyDisabled}
+                        </div>
+                        <div style="margin-top: 5px;">
+                            ${MessageReenableUser}
+                        </div>
+                    </div>
+
+                </div>
+                <div id="fldUserName" class="inputContainer">
+                    <input is="emby-input" id="txtUserName" required type="text" label="${LabelName}" />
+                </div>
+
+                <div class="selectContainer fldSelectLoginProvider hide">
+                    <select class="selectLoginProvider" is="emby-select" label="${LabelAuthProvider}"></select>
+                    <div class="fieldDescription">${AuthProviderHelp}</div>
+                </div>
+
+                <div class="selectContainer fldSelectPasswordResetProvider hide">
+                    <select class="selectPasswordResetProvider" is="emby-select" label="${LabelPasswordResetProvider}"></select>
+                    <div class="fieldDescription">${PasswordResetProviderHelp}</div>
+                </div>
+
+                <div class="checkboxContainer checkboxContainer-withDescription fldRemoteAccess hide">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" id="chkRemoteAccess" />
+                        <span>${AllowRemoteAccess}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${AllowRemoteAccessHelp}</div>
+                </div>
+                <label class="checkboxContainer">
+                    <input type="checkbox" is="emby-checkbox" id="chkIsAdmin" />
+                    <span>${OptionAllowUserToManageServer}</span>
+                </label>
+                <div id="featureAccessFields" class="verticalSection">
+                    <h2 class="paperListLabel">${HeaderFeatureAccess}</h2>
+                    <div class="checkboxList paperList" style="padding:.5em 1em;">
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkEnableLiveTvAccess" />
+                            <span>${OptionAllowBrowsingLiveTv}</span>
+                        </label>
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkManageLiveTv" />
+                            <span>${OptionAllowManageLiveTv}</span>
+                        </label>
+                    </div>
+                </div>
+                <div class="verticalSection">
+                    <h2 class="paperListLabel">${HeaderPlayback}</h2>
+                    <div class="checkboxList paperList" style="padding:.5em 1em;">
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkEnableMediaPlayback" />
+                            <span>${OptionAllowMediaPlayback}</span>
+                        </label>
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkEnableAudioPlaybackTranscoding" />
+                            <span>${OptionAllowAudioPlaybackTranscoding}</span>
+                        </label>
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkEnableVideoPlaybackTranscoding" />
+                            <span>${OptionAllowVideoPlaybackTranscoding}</span>
+                        </label>
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkEnableVideoPlaybackRemuxing" />
+                            <span>${OptionAllowVideoPlaybackRemuxing}</span>
+                        </label>
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkForceRemoteSourceTranscoding" />
+                            <span>${OptionForceRemoteSourceTranscoding}</span>
+                        </label>
+                    </div>
+                    <div class="fieldDescription">${OptionAllowMediaPlaybackTranscodingHelp}</div>
+                </div>
+                <br />
+                <div class="verticalSection">
+                    <div class="inputContainer">
+                        <input is="emby-input" type="number" id="txtRemoteClientBitrateLimit" pattern="[0-9]*" min="0" step=".25" label="${LabelRemoteClientBitrateLimit}" />
+                        <div class="fieldDescription">${LabelRemoteClientBitrateLimitHelp}</div>
+                        <div class="fieldDescription">${LabelUserRemoteClientBitrateLimitHelp}</div>
+                    </div>
+                </div>
+                <div class="verticalSection">
+                    <div class="selectContainer fldSelectSyncPlayAccess">
+                        <select class="selectSyncPlayAccess" is="emby-select" id="selectSyncPlayAccess" label="${LabelSyncPlayAccess}">
+                            <option value="CreateAndJoinGroups">${LabelSyncPlayAccessCreateAndJoinGroups}</option>
+                            <option value="JoinGroups">${LabelSyncPlayAccessJoinGroups}</option>
+                            <option value="None">${LabelSyncPlayAccessNone}</option>
+                        </select>
+                        <div class="fieldDescription">${SyncPlayAccessHelp}</div>
+                    </div>
+                </div>
+                <div class="verticalSection">
+                    <h2 class="checkboxListLabel" style="margin-bottom:1em;">${HeaderAllowMediaDeletionFrom}</h2>
+                    <div class="checkboxList paperList checkboxList-paperList">
+                        <label class="checkboxContainer">
+                            <input type="checkbox" is="emby-checkbox" id="chkEnableDeleteAllFolders" />
+                            <span>${AllLibraries}</span>
+                        </label>
+                        <div class="deleteAccess">
+                        </div>
+                    </div>
+                </div>
+                <div class="verticalSection">
+                    <h2 class="checkboxListLabel">${HeaderRemoteControl}</h2>
+                    <div class="checkboxList paperList" style="padding:.5em 1em;">
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkEnableRemoteControlOtherUsers" />
+                            <span>${OptionAllowRemoteControlOthers}</span>
+                        </label>
+
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkRemoteControlSharedDevices" />
+                            <span>${OptionAllowRemoteSharedDevices}</span>
+                        </label>
+                    </div>
+                    <div class="fieldDescription">${OptionAllowRemoteSharedDevicesHelp}</div>
+                </div>
+                <div class="verticalSection">
+                    <h2 class="checkboxListLabel">${HeaderDownloadSync}</h2>
+                    <div class="checkboxList paperList" style="padding:.5em 1em;">
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkEnableDownloading" />
+                            <span>${OptionAllowContentDownloading}</span>
+                        </label>
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkEnableSyncTranscoding" />
+                            <span>${OptionAllowSyncTranscoding}</span>
+                        </label>
+                    </div>
+                </div>
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" id="chkEnableConversion" />
+                        <span>${AllowMediaConversion}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${AllowMediaConversionHelp}</div>
+                </div>
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" id="chkEnableSharing" />
+                        <span>${OptionAllowLinkSharing}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription sharingHelp"></div>
+                </div>
+                <div class="checkboxContainer checkboxContainer-withDescription" id="fldIsEnabled">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" id="chkDisabled" />
+                        <span>${OptionDisableUser}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${OptionDisableUserHelp}</div>
+                </div>
+                <div class="checkboxContainer checkboxContainer-withDescription" id="fldIsHidden">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" id="chkIsHidden" />
+                        <span>${OptionHideUser}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${OptionHideUserFromLoginHelp}</div>
+                </div>
+                <br/>
+                <div class=verticalSection>
+                    <div class="inputContainer" id="fldLoginAttemptsBeforeLockout">
+                        <input is="emby-input" type="number" id="txtLoginAttemptsBeforeLockout" min="-1" step="1" label="${LabelUserLoginAttemptsBeforeLockout}"/>
+                        <div class="fieldDescription">${OptionLoginAttemptsBeforeLockout}</div>
+                        <div class="fieldDescription">${OptionLoginAttemptsBeforeLockoutHelp}</div>
+                    </div>
+                </div>
+                <br />
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${Save}</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/users/useredit.js

@@ -1,33 +1,32 @@
-define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function ($, loading, libraryMenu, globalize) {
-    'use strict';
+import $ from 'jQuery';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+
+/* eslint-disable indent */
 
     function loadDeleteFolders(page, user, mediaFolders) {
         ApiClient.getJSON(ApiClient.getUrl('Channels', {
             SupportsMediaDeletion: true
         })).then(function (channelsResult) {
-            var i;
-            var length;
-            var folder;
-            var isChecked;
-            var checkedAttribute;
-            var html = '';
+            let isChecked;
+            let checkedAttribute;
+            let html = '';
 
-            for (i = 0, length = mediaFolders.length; i < length; i++) {
-                folder = mediaFolders[i];
-                isChecked = user.Policy.EnableContentDeletion || -1 != user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id);
+            for (const folder of mediaFolders) {
+                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 (i = 0, length = channelsResult.Items.length; i < length; i++) {
-                folder = channelsResult.Items[i];
-                isChecked = user.Policy.EnableContentDeletion || -1 != user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id);
+            for (const folder of channelsResult.Items) {
+                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>';
             }
 
             $('.deleteAccess', page).html(html).trigger('create');
-            $('#chkEnableDeleteAllFolders', page).checked(user.Policy.EnableContentDeletion).trigger('change');
+            $('#chkEnableDeleteAllFolders', page).prop('checked', user.Policy.EnableContentDeletion);
         });
     }
 
@@ -38,9 +37,9 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
             page.querySelector('.fldSelectLoginProvider').classList.add('hide');
         }
 
-        var currentProviderId = user.Policy.AuthenticationProviderId;
+        const currentProviderId = user.Policy.AuthenticationProviderId;
         page.querySelector('.selectLoginProvider').innerHTML = providers.map(function (provider) {
-            var selected = provider.Id === currentProviderId || providers.length < 2 ? ' selected' : '';
+            const selected = provider.Id === currentProviderId || providers.length < 2 ? ' selected' : '';
             return '<option value="' + provider.Id + '"' + selected + '>' + provider.Name + '</option>';
         });
     }
@@ -52,15 +51,14 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
             page.querySelector('.fldSelectPasswordResetProvider').classList.add('hide');
         }
 
-        var currentProviderId = user.Policy.PasswordResetProviderId;
+        const currentProviderId = user.Policy.PasswordResetProviderId;
         page.querySelector('.selectPasswordResetProvider').innerHTML = providers.map(function (provider) {
-            var selected = provider.Id === currentProviderId || providers.length < 2 ? ' selected' : '';
+            const selected = provider.Id === currentProviderId || providers.length < 2 ? ' selected' : '';
             return '<option value="' + provider.Id + '"' + selected + '>' + provider.Name + '</option>';
         });
     }
 
     function loadUser(page, user) {
-        currentUser = user;
         ApiClient.getJSON(ApiClient.getUrl('Auth/Providers')).then(function (providers) {
             loadAuthProviders(page, user, providers);
         });
@@ -85,26 +83,28 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
         libraryMenu.setTitle(user.Name);
         page.querySelector('.username').innerHTML = user.Name;
         $('#txtUserName', page).val(user.Name);
-        $('#chkIsAdmin', page).checked(user.Policy.IsAdministrator);
-        $('#chkDisabled', page).checked(user.Policy.IsDisabled);
-        $('#chkIsHidden', page).checked(user.Policy.IsHidden);
-        $('#chkRemoteControlSharedDevices', page).checked(user.Policy.EnableSharedDeviceControl);
-        $('#chkEnableRemoteControlOtherUsers', page).checked(user.Policy.EnableRemoteControlOfOtherUsers);
-        $('#chkEnableDownloading', page).checked(user.Policy.EnableContentDownloading);
-        $('#chkManageLiveTv', page).checked(user.Policy.EnableLiveTvManagement);
-        $('#chkEnableLiveTvAccess', page).checked(user.Policy.EnableLiveTvAccess);
-        $('#chkEnableMediaPlayback', page).checked(user.Policy.EnableMediaPlayback);
-        $('#chkEnableAudioPlaybackTranscoding', page).checked(user.Policy.EnableAudioPlaybackTranscoding);
-        $('#chkEnableVideoPlaybackTranscoding', page).checked(user.Policy.EnableVideoPlaybackTranscoding);
-        $('#chkEnableVideoPlaybackRemuxing', page).checked(user.Policy.EnablePlaybackRemuxing);
-        $('#chkForceRemoteSourceTranscoding', page).checked(user.Policy.ForceRemoteSourceTranscoding);
-        $('#chkRemoteAccess', page).checked(null == user.Policy.EnableRemoteAccess || user.Policy.EnableRemoteAccess);
-        $('#chkEnableSyncTranscoding', page).checked(user.Policy.EnableSyncTranscoding);
-        $('#chkEnableConversion', page).checked(user.Policy.EnableMediaConversion || false);
-        $('#chkEnableSharing', page).checked(user.Policy.EnablePublicSharing);
+        $('#chkIsAdmin', page).prop('checked', user.Policy.IsAdministrator);
+        $('#chkDisabled', page).prop('checked', user.Policy.IsDisabled);
+        $('#chkIsHidden', page).prop('checked', user.Policy.IsHidden);
+        $('#chkRemoteControlSharedDevices', page).prop('checked', user.Policy.EnableSharedDeviceControl);
+        $('#chkEnableRemoteControlOtherUsers', page).prop('checked', user.Policy.EnableRemoteControlOfOtherUsers);
+        $('#chkEnableDownloading', page).prop('checked', user.Policy.EnableContentDownloading);
+        $('#chkManageLiveTv', page).prop('checked', user.Policy.EnableLiveTvManagement);
+        $('#chkEnableLiveTvAccess', page).prop('checked', user.Policy.EnableLiveTvAccess);
+        $('#chkEnableMediaPlayback', page).prop('checked', user.Policy.EnableMediaPlayback);
+        $('#chkEnableAudioPlaybackTranscoding', page).prop('checked', user.Policy.EnableAudioPlaybackTranscoding);
+        $('#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', 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);
         $('#txtRemoteClientBitrateLimit', page).val(user.Policy.RemoteClientBitrateLimit / 1e6 || '');
         $('#txtLoginAttemptsBeforeLockout', page).val(user.Policy.LoginAttemptsBeforeLockout || '0');
-        $('#selectSyncPlayAccess').val(user.Policy.SyncPlayAccess);
+        if (ApiClient.isMinServerVersion('10.6.0')) {
+            $('#selectSyncPlayAccess').val(user.Policy.SyncPlayAccess);
+        }
         loading.hide();
     }
 
@@ -112,41 +112,43 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
         Dashboard.navigate('userprofiles.html');
         loading.hide();
 
-        require(['toast'], function (toast) {
+        import('toast').then(({default: toast}) => {
             toast(globalize.translate('SettingsSaved'));
         });
     }
 
     function saveUser(user, page) {
         user.Name = $('#txtUserName', page).val();
-        user.Policy.IsAdministrator = $('#chkIsAdmin', page).checked();
-        user.Policy.IsHidden = $('#chkIsHidden', page).checked();
-        user.Policy.IsDisabled = $('#chkDisabled', page).checked();
-        user.Policy.EnableRemoteControlOfOtherUsers = $('#chkEnableRemoteControlOtherUsers', page).checked();
-        user.Policy.EnableLiveTvManagement = $('#chkManageLiveTv', page).checked();
-        user.Policy.EnableLiveTvAccess = $('#chkEnableLiveTvAccess', page).checked();
-        user.Policy.EnableSharedDeviceControl = $('#chkRemoteControlSharedDevices', page).checked();
-        user.Policy.EnableMediaPlayback = $('#chkEnableMediaPlayback', page).checked();
-        user.Policy.EnableAudioPlaybackTranscoding = $('#chkEnableAudioPlaybackTranscoding', page).checked();
-        user.Policy.EnableVideoPlaybackTranscoding = $('#chkEnableVideoPlaybackTranscoding', page).checked();
-        user.Policy.EnablePlaybackRemuxing = $('#chkEnableVideoPlaybackRemuxing', page).checked();
-        user.Policy.ForceRemoteSourceTranscoding = $('#chkForceRemoteSourceTranscoding', page).checked();
-        user.Policy.EnableContentDownloading = $('#chkEnableDownloading', page).checked();
-        user.Policy.EnableSyncTranscoding = $('#chkEnableSyncTranscoding', page).checked();
-        user.Policy.EnableMediaConversion = $('#chkEnableConversion', page).checked();
-        user.Policy.EnablePublicSharing = $('#chkEnableSharing', page).checked();
-        user.Policy.EnableRemoteAccess = $('#chkRemoteAccess', page).checked();
+        user.Policy.IsAdministrator = $('#chkIsAdmin', page).is(':checked');
+        user.Policy.IsHidden = $('#chkIsHidden', page).is(':checked');
+        user.Policy.IsDisabled = $('#chkDisabled', page).is(':checked');
+        user.Policy.EnableRemoteControlOfOtherUsers = $('#chkEnableRemoteControlOtherUsers', page).is(':checked');
+        user.Policy.EnableLiveTvManagement = $('#chkManageLiveTv', page).is(':checked');
+        user.Policy.EnableLiveTvAccess = $('#chkEnableLiveTvAccess', page).is(':checked');
+        user.Policy.EnableSharedDeviceControl = $('#chkRemoteControlSharedDevices', page).is(':checked');
+        user.Policy.EnableMediaPlayback = $('#chkEnableMediaPlayback', page).is(':checked');
+        user.Policy.EnableAudioPlaybackTranscoding = $('#chkEnableAudioPlaybackTranscoding', page).is(':checked');
+        user.Policy.EnableVideoPlaybackTranscoding = $('#chkEnableVideoPlaybackTranscoding', page).is(':checked');
+        user.Policy.EnablePlaybackRemuxing = $('#chkEnableVideoPlaybackRemuxing', page).is(':checked');
+        user.Policy.ForceRemoteSourceTranscoding = $('#chkForceRemoteSourceTranscoding', page).is(':checked');
+        user.Policy.EnableContentDownloading = $('#chkEnableDownloading', page).is(':checked');
+        user.Policy.EnableSyncTranscoding = $('#chkEnableSyncTranscoding', page).is(':checked');
+        user.Policy.EnableMediaConversion = $('#chkEnableConversion', page).is(':checked');
+        user.Policy.EnablePublicSharing = $('#chkEnableSharing', page).is(':checked');
+        user.Policy.EnableRemoteAccess = $('#chkRemoteAccess', page).is(':checked');
         user.Policy.RemoteClientBitrateLimit = parseInt(1e6 * parseFloat($('#txtRemoteClientBitrateLimit', page).val() || '0'));
         user.Policy.LoginAttemptsBeforeLockout = parseInt($('#txtLoginAttemptsBeforeLockout', page).val() || '0');
         user.Policy.AuthenticationProviderId = page.querySelector('.selectLoginProvider').value;
         user.Policy.PasswordResetProviderId = page.querySelector('.selectPasswordResetProvider').value;
-        user.Policy.EnableContentDeletion = $('#chkEnableDeleteAllFolders', page).checked();
+        user.Policy.EnableContentDeletion = $('#chkEnableDeleteAllFolders', page).is(':checked');
         user.Policy.EnableContentDeletionFromFolders = user.Policy.EnableContentDeletion ? [] : $('.chkFolder', page).get().filter(function (c) {
             return c.checked;
         }).map(function (c) {
             return c.getAttribute('data-id');
         });
-        user.Policy.SyncPlayAccess = page.querySelector('#selectSyncPlayAccess').value;
+        if (ApiClient.isMinServerVersion('10.6.0')) {
+            user.Policy.SyncPlayAccess = page.querySelector('#selectSyncPlayAccess').value;
+        }
         ApiClient.updateUser(user).then(function () {
             ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
                 onSaveComplete(page, user);
@@ -155,7 +157,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
     }
 
     function onSubmit() {
-        var page = $(this).parents('.page')[0];
+        const page = $(this).parents('.page')[0];
         loading.show();
         getUser().then(function (result) {
             saveUser(result, page);
@@ -164,7 +166,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
     }
 
     function getUser() {
-        var userId = getParameterByName('userId');
+        const userId = getParameterByName('userId');
         return ApiClient.getUser(userId);
     }
 
@@ -175,11 +177,10 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
         });
     }
 
-    var currentUser;
     $(document).on('pageinit', '#editUserPage', function () {
         $('.editUserProfileForm').off('submit', onSubmit).on('submit', onSubmit);
         this.querySelector('.sharingHelp').innerHTML = globalize.translate('OptionAllowLinkSharingHelp', 30);
-        var page = this;
+        const page = this;
         $('#chkEnableDeleteAllFolders', this).on('change', function () {
             if (this.checked) {
                 $('.deleteAccess', page).hide();
@@ -197,4 +198,5 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
     }).on('pagebeforeshow', '#editUserPage', function () {
         loadData(this);
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/users/userlibraryaccess.html

@@ -0,0 +1,68 @@
+<div id="userLibraryAccessPage" data-role="page" class="page type-interior">
+
+    <div>
+        <div class="content-primary">
+
+            <div class="verticalSection">
+                <div class="sectionTitleContainer flex align-items-center">
+                    <h2 class="sectionTitle username"></h2>
+                    <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/">${Help}</a>
+                </div>
+            </div>
+
+            <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
+                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('useredit.html', true);">${Profile}</a>
+                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userlibraryaccess.html', true);" class="ui-btn-active">${TabAccess}</a>
+                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);">${TabParentalControl}</a>
+                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${HeaderPassword}</a>
+            </div>
+            <form class="userLibraryAccessForm">
+
+                <div class="folderAccessContainer">
+                    <h2>${HeaderLibraryAccess}</h2>
+                    <label class="checkboxContainer">
+                        <input type="checkbox" is="emby-checkbox" id="chkEnableAllFolders" />
+                        <span>${OptionEnableAccessToAllLibraries}</span>
+                    </label>
+                    <div class="folderAccessListContainer">
+                        <div class="folderAccess">
+                        </div>
+                        <div class="fieldDescription">${LibraryAccessHelp}</div>
+                    </div>
+                </div>
+                <div class="channelAccessContainer" style="display:none;">
+                    <h2>${HeaderChannelAccess}</h2>
+                    <label class="checkboxContainer">
+                        <input type="checkbox" is="emby-checkbox" id="chkEnableAllChannels" />
+                        <span>${OptionEnableAccessToAllChannels}</span>
+                    </label>
+                    <div class="channelAccessListContainer">
+                        <div class="channelAccess">
+                        </div>
+                        <div class="fieldDescription">${ChannelAccessHelp}</div>
+                    </div>
+                </div>
+                <br />
+                <div class="deviceAccessContainer hide">
+                    <h2>${HeaderDeviceAccess}</h2>
+                    <label class="checkboxContainer">
+                        <input type="checkbox" is="emby-checkbox" id="chkEnableAllDevices" />
+                        <span>${OptionEnableAccessFromAllDevices}</span>
+                    </label>
+                    <div class="deviceAccessListContainer">
+                        <div class="deviceAccess">
+                        </div>
+                        <div class="fieldDescription">${DeviceAccessHelp}</div>
+                    </div>
+                    <br />
+                </div>
+                <br />
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${Save}</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/users/userlibraryaccess.js

@@ -1,40 +1,44 @@
-define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function ($, loading, libraryMenu, globalize) {
-    'use strict';
+import $ from 'jQuery';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+
+/* eslint-disable indent */
 
     function triggerChange(select) {
-        var evt = document.createEvent('HTMLEvents');
+        const evt = document.createEvent('HTMLEvents');
         evt.initEvent('change', false, true);
         select.dispatchEvent(evt);
     }
 
     function loadMediaFolders(page, user, mediaFolders) {
-        var html = '';
+        let html = '';
         html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderLibraries') + '</h3>';
         html += '<div class="checkboxList paperList checkboxList-paperList">';
 
-        for (var i = 0, length = mediaFolders.length; i < length; i++) {
-            var folder = mediaFolders[i];
-            var isChecked = user.Policy.EnableAllFolders || -1 != user.Policy.EnabledFolders.indexOf(folder.Id);
-            var checkedAttribute = isChecked ? ' checked="checked"' : '';
+        for (let i = 0, length = mediaFolders.length; i < length; i++) {
+            const folder = mediaFolders[i];
+            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>';
         }
 
         html += '</div>';
         page.querySelector('.folderAccess').innerHTML = html;
-        var chkEnableAllFolders = page.querySelector('#chkEnableAllFolders');
+        const chkEnableAllFolders = page.querySelector('#chkEnableAllFolders');
         chkEnableAllFolders.checked = user.Policy.EnableAllFolders;
         triggerChange(chkEnableAllFolders);
     }
 
     function loadChannels(page, user, channels) {
-        var html = '';
-        html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderChannels') + '</h3>';
+        let html = '';
+        html += '<h3 class="checkboxListLabel">' + globalize.translate('Channels') + '</h3>';
         html += '<div class="checkboxList paperList checkboxList-paperList">';
 
-        for (var i = 0, length = channels.length; i < length; i++) {
-            var folder = channels[i];
-            var isChecked = user.Policy.EnableAllChannels || -1 != user.Policy.EnabledChannels.indexOf(folder.Id);
-            var checkedAttribute = isChecked ? ' checked="checked"' : '';
+        for (let i = 0, length = channels.length; i < length; i++) {
+            const folder = channels[i];
+            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>';
         }
 
@@ -47,23 +51,23 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
             $('.channelAccessContainer', page).hide();
         }
 
-        $('#chkEnableAllChannels', page).checked(user.Policy.EnableAllChannels).trigger('change');
+        $('#chkEnableAllChannels', page).prop('checked', user.Policy.EnableAllChannels);
     }
 
     function loadDevices(page, user, devices) {
-        var html = '';
+        let html = '';
         html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderDevices') + '</h3>';
         html += '<div class="checkboxList paperList checkboxList-paperList">';
 
-        for (var i = 0, length = devices.length; i < length; i++) {
-            var device = devices[i];
-            var checkedAttribute = user.Policy.EnableAllDevices || -1 != user.Policy.EnabledDevices.indexOf(device.Id) ? ' checked="checked"' : '';
+        for (let i = 0, length = devices.length; i < length; i++) {
+            const device = devices[i];
+            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>';
         }
 
         html += '</div>';
         $('.deviceAccess', page).show().html(html);
-        $('#chkEnableAllDevices', page).checked(user.Policy.EnableAllDevices).trigger('change');
+        $('#chkEnableAllDevices', page).prop('checked', user.Policy.EnableAllDevices);
 
         if (user.Policy.IsAdministrator) {
             page.querySelector('.deviceAccessContainer').classList.add('hide');
@@ -84,25 +88,25 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
     function onSaveComplete(page) {
         loading.hide();
 
-        require(['toast'], function (toast) {
+        import('toast').then(({default: toast}) => {
             toast(globalize.translate('SettingsSaved'));
         });
     }
 
     function saveUser(user, page) {
-        user.Policy.EnableAllFolders = $('#chkEnableAllFolders', page).checked();
+        user.Policy.EnableAllFolders = $('#chkEnableAllFolders', page).is(':checked');
         user.Policy.EnabledFolders = user.Policy.EnableAllFolders ? [] : $('.chkFolder', page).get().filter(function (c) {
             return c.checked;
         }).map(function (c) {
             return c.getAttribute('data-id');
         });
-        user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).checked();
+        user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).is(':checked');
         user.Policy.EnabledChannels = user.Policy.EnableAllChannels ? [] : $('.chkChannel', page).get().filter(function (c) {
             return c.checked;
         }).map(function (c) {
             return c.getAttribute('data-id');
         });
-        user.Policy.EnableAllDevices = $('#chkEnableAllDevices', page).checked();
+        user.Policy.EnableAllDevices = $('#chkEnableAllDevices', page).is(':checked');
         user.Policy.EnabledDevices = user.Policy.EnableAllDevices ? [] : $('.chkDevice', page).get().filter(function (c) {
             return c.checked;
         }).map(function (c) {
@@ -116,9 +120,9 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
     }
 
     function onSubmit() {
-        var page = $(this).parents('.page');
+        const page = $(this).parents('.page');
         loading.show();
-        var userId = getParameterByName('userId');
+        const userId = getParameterByName('userId');
         ApiClient.getUser(userId).then(function (result) {
             saveUser(result, page);
         });
@@ -126,7 +130,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
     }
 
     $(document).on('pageinit', '#userLibraryAccessPage', function () {
-        var page = this;
+        const page = this;
         $('#chkEnableAllDevices', page).on('change', function () {
             if (this.checked) {
                 $('.deviceAccessListContainer', page).hide();
@@ -150,29 +154,30 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'fnchecked'], function
         });
         $('.userLibraryAccessForm').off('submit', onSubmit).on('submit', onSubmit);
     }).on('pageshow', '#userLibraryAccessPage', function () {
-        var page = this;
+        const page = this;
         loading.show();
-        var promise1;
-        var userId = getParameterByName('userId');
+        let promise1;
+        const userId = getParameterByName('userId');
 
         if (userId) {
             promise1 = ApiClient.getUser(userId);
         } else {
-            var deferred = $.Deferred();
+            const deferred = $.Deferred();
             deferred.resolveWith(null, [{
                 Configuration: {}
             }]);
             promise1 = deferred.promise();
         }
 
-        var promise2 = Dashboard.getCurrentUser();
-        var promise4 = ApiClient.getJSON(ApiClient.getUrl('Library/MediaFolders', {
+        const promise2 = Dashboard.getCurrentUser();
+        const promise4 = ApiClient.getJSON(ApiClient.getUrl('Library/MediaFolders', {
             IsHidden: false
         }));
-        var promise5 = ApiClient.getJSON(ApiClient.getUrl('Channels'));
-        var promise6 = ApiClient.getJSON(ApiClient.getUrl('Devices'));
+        const promise5 = ApiClient.getJSON(ApiClient.getUrl('Channels'));
+        const promise6 = ApiClient.getJSON(ApiClient.getUrl('Devices'));
         Promise.all([promise1, promise2, promise4, promise5, promise6]).then(function (responses) {
             loadUser(page, responses[0], responses[1], responses[2].Items, responses[3].Items, responses[4].Items);
         });
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/users/usernew.html

@@ -0,0 +1,62 @@
+<div id="newUserPage" data-role="page" class="page type-interior">
+    <div>
+        <div class="content-primary">
+            <form class="newUserProfileForm">
+                <div class="verticalSection">
+                    <div class="sectionTitleContainer flex align-items-center">
+                        <h2 class="sectionTitle">${ButtonAddUser}</h2>
+                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/">${Help}</a>
+                    </div>
+
+                    <div class="inputContainer">
+                        <input is="emby-input" id="txtUsername" required type="text" label="${LabelName}" />
+                    </div>
+
+                    <div class="inputContainer">
+                        <input is="emby-input" id="txtPassword" type="password" label="${LabelPassword}" />
+                    </div>
+                </div>
+
+                <div class="folderAccessContainer verticalSection">
+                    <h2 class="sectionTitle">${HeaderLibraryAccess}</h2>
+                    <div class="checkboxContainer checkboxContainer-withDescription">
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkEnableAllFolders" />
+                            <span>${OptionEnableAccessToAllLibraries}</span>
+                        </label>
+                        <div class="fieldDescription checkboxFieldDescription">${LibraryAccessHelp}</div>
+                    </div>
+                    <div class="folderAccessListContainer">
+                        <div class="folderAccess">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="channelAccessContainer verticalSection verticalSection-extrabottompadding" style="display:none;">
+                    <h2 class="sectionTitle">${HeaderChannelAccess}</h2>
+                    <div class="checkboxContainer checkboxContainer-withDescription">
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkEnableAllChannels" />
+                            <span>${OptionEnableAccessToAllChannels}</span>
+                        </label>
+                        <div class="fieldDescription checkboxFieldDescription">${ChannelAccessHelp}</div>
+                    </div>
+                    <div class="channelAccessListContainer">
+                        <div class="channelAccess">
+                        </div>
+                    </div>
+                </div>
+
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${Save}</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/users/usernew.js

@@ -1,28 +1,32 @@
-define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox'], function ($, loading, globalize) {
-    'use strict';
+import $ from 'jQuery';
+import loading from 'loading';
+import globalize from 'globalize';
+import 'emby-checkbox';
+
+/* eslint-disable indent */
 
     function loadMediaFolders(page, mediaFolders) {
-        var html = '';
+        let html = '';
         html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderLibraries') + '</h3>';
         html += '<div class="checkboxList paperList" style="padding:.5em 1em;">';
 
-        for (var i = 0; i < mediaFolders.length; i++) {
-            var folder = mediaFolders[i];
+        for (let i = 0; i < mediaFolders.length; i++) {
+            const folder = mediaFolders[i];
             html += '<label><input type="checkbox" is="emby-checkbox" class="chkFolder" data-id="' + folder.Id + '"/><span>' + folder.Name + '</span></label>';
         }
 
         html += '</div>';
         $('.folderAccess', page).html(html).trigger('create');
-        $('#chkEnableAllFolders', page).checked(false).trigger('change');
+        $('#chkEnableAllFolders', page).prop('checked', false);
     }
 
     function loadChannels(page, channels) {
-        var html = '';
-        html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderChannels') + '</h3>';
+        let html = '';
+        html += '<h3 class="checkboxListLabel">' + globalize.translate('Channels') + '</h3>';
         html += '<div class="checkboxList paperList" style="padding:.5em 1em;">';
 
-        for (var i = 0; i < channels.length; i++) {
-            var folder = channels[i];
+        for (let i = 0; i < channels.length; i++) {
+            const folder = channels[i];
             html += '<label><input type="checkbox" is="emby-checkbox" class="chkChannel" data-id="' + folder.Id + '"/><span>' + folder.Name + '</span></label>';
         }
 
@@ -35,17 +39,17 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox'], functio
             $('.channelAccessContainer', page).hide();
         }
 
-        $('#chkEnableAllChannels', page).checked(false).trigger('change');
+        $('#chkEnableAllChannels', page).prop('checked', false);
     }
 
     function loadUser(page) {
         $('#txtUsername', page).val('');
         $('#txtPassword', page).val('');
         loading.show();
-        var promiseFolders = ApiClient.getJSON(ApiClient.getUrl('Library/MediaFolders', {
+        const promiseFolders = ApiClient.getJSON(ApiClient.getUrl('Library/MediaFolders', {
             IsHidden: false
         }));
-        var promiseChannels = ApiClient.getJSON(ApiClient.getUrl('Channels'));
+        const promiseChannels = ApiClient.getJSON(ApiClient.getUrl('Channels'));
         Promise.all([promiseFolders, promiseChannels]).then(function (responses) {
             loadMediaFolders(page, responses[0].Items);
             loadChannels(page, responses[1].Items);
@@ -54,11 +58,11 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox'], functio
     }
 
     function saveUser(page) {
-        var user = {};
+        const user = {};
         user.Name = $('#txtUsername', page).val();
         user.Password = $('#txtPassword', page).val();
         ApiClient.createUser(user).then(function (user) {
-            user.Policy.EnableAllFolders = $('#chkEnableAllFolders', page).checked();
+            user.Policy.EnableAllFolders = $('#chkEnableAllFolders', page).is(':checked');
             user.Policy.EnabledFolders = [];
 
             if (!user.Policy.EnableAllFolders) {
@@ -69,7 +73,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox'], functio
                 });
             }
 
-            user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).checked();
+            user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).is(':checked');
             user.Policy.EnabledChannels = [];
 
             if (!user.Policy.EnableAllChannels) {
@@ -84,8 +88,8 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox'], functio
                 Dashboard.navigate('useredit.html?userId=' + user.Id);
             });
         }, function (response) {
-            require(['toast'], function (toast) {
-                toast(globalize.translate('DefaultErrorMessage'));
+            import('toast').then(({default: toast}) => {
+                toast(globalize.translate('ErrorDefault'));
             });
 
             loading.hide();
@@ -93,7 +97,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox'], functio
     }
 
     function onSubmit() {
-        var page = $(this).parents('.page')[0];
+        const page = $(this).parents('.page')[0];
         loading.show();
         saveUser(page);
         return false;
@@ -104,7 +108,7 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox'], functio
     }
 
     $(document).on('pageinit', '#newUserPage', function () {
-        var page = this;
+        const page = this;
         $('#chkEnableAllChannels', page).on('change', function () {
             if (this.checked) {
                 $('.channelAccessListContainer', page).hide();
@@ -123,4 +127,5 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-checkbox'], functio
     }).on('pageshow', '#newUserPage', function () {
         loadData(this);
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/users/userparentalcontrol.html

@@ -0,0 +1,60 @@
+<div id="userParentalControlPage" data-role="page" class="page type-interior">
+    <div>
+        <div class="content-primary">
+            <div class="verticalSection">
+                <div class="sectionTitleContainer flex align-items-center">
+                    <h2 class="sectionTitle username"></h2>
+                    <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/">${Help}</a>
+                </div>
+            </div>
+
+            <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
+                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('useredit.html', true);">${Profile}</a>
+                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userlibraryaccess.html', true);">${TabAccess}</a>
+                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);" class="ui-btn-active">${TabParentalControl}</a>
+                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${HeaderPassword}</a>
+            </div>
+
+            <form class="userParentalControlForm">
+                <div class="selectContainer">
+                    <select is="emby-select" id="selectMaxParentalRating" label="${LabelMaxParentalRating}"></select>
+                    <div class="fieldDescription">${MaxParentalRatingHelp}</div>
+                </div>
+
+                <div>
+                    <div class="blockUnratedItems"></div>
+                </div>
+
+                <br />
+
+                <div class="verticalSection" style="margin-bottom:2em;">
+                    <div class="detailSectionHeader sectionTitleContainer">
+                        <h2 class="sectionTitle">${LabelBlockContentWithTags}</h2>
+                        <button is="emby-button" type="button" class="fab btnAddBlockedTag submit" style="margin-left:1em;" title="${Add}">
+                            <span class="material-icons add"></span>
+                        </button>
+                    </div>
+                    <div class="blockedTags" style="margin-top:.5em;"></div>
+                </div>
+
+                <div class="accessScheduleSection verticalSection" style="margin-bottom:2em;">
+                    <div class="sectionTitleContainer">
+                        <h2 class="sectionTitle">${HeaderAccessSchedule}</h2>
+                        <button is="emby-button" type="button" class="fab btnAddSchedule submit" style="margin-left:1em;" title="${Add}">
+                            <span class="material-icons add"></span>
+                        </button>
+                    </div>
+
+                    <p>${HeaderAccessScheduleHelp}</p>
+                    <div class="accessScheduleList paperList"></div>
+                </div>
+
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${Save}</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/users/userparentalcontrol.js

@@ -1,17 +1,22 @@
-define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewStyle', 'paper-icon-button-light'], function ($, datetime, loading, libraryMenu, globalize) {
-    'use strict';
+import $ from 'jQuery';
+import datetime from 'datetime';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+import 'listViewStyle';
+import 'paper-icon-button-light';
+
+/* eslint-disable indent */
 
     function populateRatings(allParentalRatings, page) {
-        var html = '';
+        let html = '';
         html += "<option value=''></option>";
-        var i;
-        var length;
-        var rating;
-        var ratings = [];
+        let rating;
+        const ratings = [];
 
-        for (i = 0, length = allParentalRatings.length; i < length; i++) {
+        for (let i = 0, length = allParentalRatings.length; i < length; i++) {
             if (rating = allParentalRatings[i], ratings.length) {
-                var lastRating = ratings[ratings.length - 1];
+                const lastRating = ratings[ratings.length - 1];
 
                 if (lastRating.Value === rating.Value) {
                     lastRating.Name += '/' + rating.Name;
@@ -25,7 +30,7 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
             });
         }
 
-        for (i = 0, length = ratings.length; i < length; i++) {
+        for (let i = 0, length = ratings.length; i < length; i++) {
             rating = ratings[i];
             html += "<option value='" + rating.Value + "'>" + rating.Name + '</option>';
         }
@@ -34,35 +39,35 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
     }
 
     function loadUnratedItems(page, user) {
-        var items = [{
-            name: globalize.translate('OptionBlockBooks'),
+        const items = [{
+            name: globalize.translate('Books'),
             value: 'Book'
         }, {
-            name: globalize.translate('OptionBlockChannelContent'),
+            name: globalize.translate('Channels'),
             value: 'ChannelContent'
         }, {
-            name: globalize.translate('OptionBlockLiveTvChannels'),
+            name: globalize.translate('LiveTV'),
             value: 'LiveTvChannel'
         }, {
-            name: globalize.translate('OptionBlockMovies'),
+            name: globalize.translate('Movies'),
             value: 'Movie'
         }, {
-            name: globalize.translate('OptionBlockMusic'),
+            name: globalize.translate('Music'),
             value: 'Music'
         }, {
-            name: globalize.translate('OptionBlockTrailers'),
+            name: globalize.translate('Trailers'),
             value: 'Trailer'
         }, {
-            name: globalize.translate('OptionBlockTvShows'),
+            name: globalize.translate('Shows'),
             value: 'Series'
         }];
-        var html = '';
+        let html = '';
         html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderBlockItemsWithNoRating') + '</h3>';
         html += '<div class="checkboxList paperList checkboxList-paperList">';
 
-        for (var i = 0, length = items.length; i < length; i++) {
-            var item = items[i];
-            var checkedAttribute = -1 != user.Policy.BlockUnratedItems.indexOf(item.value) ? ' checked="checked"' : '';
+        for (let i = 0, length = items.length; i < length; i++) {
+            const item = items[i];
+            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>';
         }
 
@@ -76,11 +81,11 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
         loadUnratedItems(page, user);
         loadBlockedTags(page, user.Policy.BlockedTags);
         populateRatings(allParentalRatings, page);
-        var ratingValue = '';
+        let ratingValue = '';
 
         if (user.Policy.MaxParentalRating) {
-            for (var i = 0, length = allParentalRatings.length; i < length; i++) {
-                var rating = allParentalRatings[i];
+            for (let i = 0, length = allParentalRatings.length; i < length; i++) {
+                const rating = allParentalRatings[i];
 
                 if (user.Policy.MaxParentalRating >= rating.Value) {
                     ratingValue = rating.Value;
@@ -101,8 +106,8 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
     }
 
     function loadBlockedTags(page, tags) {
-        var html = tags.map(function (h) {
-            var li = '<div class="listItem">';
+        let html = tags.map(function (h) {
+            let li = '<div class="listItem">';
             li += '<div class="listItemBody">';
             li += '<h3 class="listItemBodyText">';
             li += h;
@@ -116,10 +121,10 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
             html = '<div class="paperList">' + html + '</div>';
         }
 
-        var elem = $('.blockedTags', page).html(html).trigger('create');
+        const elem = $('.blockedTags', page).html(html).trigger('create');
         $('.btnDeleteTag', elem).on('click', function () {
-            var tag = this.getAttribute('data-tag');
-            var newTags = tags.filter(function (t) {
+            const tag = this.getAttribute('data-tag');
+            const newTags = tags.filter(function (t) {
                 return t != tag;
             });
             loadBlockedTags(page, newTags);
@@ -132,10 +137,10 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
     }
 
     function renderAccessSchedule(page, schedules) {
-        var html = '';
-        var index = 0;
+        let html = '';
+        let index = 0;
         html += schedules.map(function (a) {
-            var itemHtml = '';
+            let itemHtml = '';
             itemHtml += '<div class="liSchedule listItem" data-day="' + a.DayOfWeek + '" data-start="' + a.StartHour + '" data-end="' + a.EndHour + '">';
             itemHtml += '<div class="listItemBody two-line">';
             itemHtml += '<h3 class="listItemBodyText">';
@@ -148,7 +153,7 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
             index++;
             return itemHtml;
         }).join('');
-        var accessScheduleList = page.querySelector('.accessScheduleList');
+        const accessScheduleList = page.querySelector('.accessScheduleList');
         accessScheduleList.innerHTML = html;
         $('.btnDelete', accessScheduleList).on('click', function () {
             deleteAccessSchedule(page, schedules, parseInt(this.getAttribute('data-index')));
@@ -158,7 +163,7 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
     function onSaveComplete(page) {
         loading.hide();
 
-        require(['toast'], function (toast) {
+        import('toast').then(({default: toast}) => {
             toast(globalize.translate('SettingsSaved'));
         });
     }
@@ -178,8 +183,8 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
     }
 
     function getDisplayTime(hours) {
-        var minutes = 0;
-        var pct = hours % 1;
+        let minutes = 0;
+        const pct = hours % 1;
 
         if (pct) {
             minutes = parseInt(60 * pct);
@@ -190,14 +195,13 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
 
     function showSchedulePopup(page, schedule, index) {
         schedule = schedule || {};
-
-        require(['components/accessSchedule/accessSchedule'], function (accessschedule) {
+        import('components/accessSchedule/accessSchedule').then(({default: accessschedule}) => {
             accessschedule.show({
                 schedule: schedule
             }).then(function (updatedSchedule) {
-                var schedules = getSchedulesFromPage(page);
+                const schedules = getSchedulesFromPage(page);
 
-                if (-1 == index) {
+                if (index == -1) {
                     index = schedules.length;
                 }
 
@@ -224,13 +228,13 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
     }
 
     function showBlockedTagPopup(page) {
-        require(['prompt'], function (prompt) {
+        import('prompt').then(({default: prompt}) => {
             prompt({
                 label: globalize.translate('LabelTag')
             }).then(function (value) {
-                var tags = getBlockedTagsFromPage(page);
+                const tags = getBlockedTagsFromPage(page);
 
-                if (-1 == tags.indexOf(value)) {
+                if (tags.indexOf(value) == -1) {
                     tags.push(value);
                     loadBlockedTags(page, tags);
                 }
@@ -240,9 +244,9 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
 
     window.UserParentalControlPage = {
         onSubmit: function () {
-            var page = $(this).parents('.page');
+            const page = $(this).parents('.page');
             loading.show();
-            var userId = getParameterByName('userId');
+            const userId = getParameterByName('userId');
             ApiClient.getUser(userId).then(function (result) {
                 saveUser(result, page);
             });
@@ -250,7 +254,7 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
         }
     };
     $(document).on('pageinit', '#userParentalControlPage', function () {
-        var page = this;
+        const page = this;
         $('.btnAddSchedule', page).on('click', function () {
             showSchedulePopup(page, {}, -1);
         });
@@ -259,13 +263,14 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt
         });
         $('.userParentalControlForm').off('submit', UserParentalControlPage.onSubmit).on('submit', UserParentalControlPage.onSubmit);
     }).on('pageshow', '#userParentalControlPage', function () {
-        var page = this;
+        const page = this;
         loading.show();
-        var userId = getParameterByName('userId');
-        var promise1 = ApiClient.getUser(userId);
-        var promise2 = ApiClient.getParentalRatings();
+        const userId = getParameterByName('userId');
+        const promise1 = ApiClient.getUser(userId);
+        const promise2 = ApiClient.getParentalRatings();
         Promise.all([promise1, promise2]).then(function (responses) {
             loadUser(page, responses[0], responses[1]);
         });
     });
-});
+
+/* eslint-enable indent */

src/controllers/dashboard/users/userpassword.html

@@ -0,0 +1,72 @@
+<div id="userPasswordPage" data-role="page" class="page type-interior userPasswordPage">
+    <div>
+        <div class="content-primary">
+            <div class="verticalSection">
+                <div class="sectionTitleContainer flex align-items-center">
+                    <h2 class="sectionTitle username"></h2>
+                    <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/">${Help}</a>
+                </div>
+            </div>
+
+            <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
+                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('useredit.html', true);">${Profile}</a>
+                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userlibraryaccess.html', true);">${TabAccess}</a>
+                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);">${TabParentalControl}</a>
+                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);" class="ui-btn-active">${HeaderPassword}</a>
+            </div>
+
+            <div class="readOnlyContent">
+                <form class="updatePasswordForm passwordSection hide" style="margin: 0 auto 2em;">
+                    <div class="detailSection">
+                        <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>
+                        <br />
+                        <div>
+                            <button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button>
+                            <button is="emby-button" type="button" id="btnResetPassword" class="raised button-cancel block hide">
+                                <span>${ResetPassword}</span>
+                            </button>
+                        </div>
+                    </div>
+                </form>
+                <br />
+                <form class="localAccessForm localAccessSection" style="margin: 0 auto;">
+                    <div class="detailSection">
+                        <div class="detailSectionHeader">
+                            ${HeaderEasyPinCode}
+                        </div>
+                        <br />
+                        <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>
+                        <br />
+                        <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>${Save}</span>
+                            </button>
+                            <button is="emby-button" type="button" id="btnResetEasyPassword" class="raised button-cancel block hide">
+                                <span>${ButtonResetEasyPassword}</span>
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/users/userpasswordpage.js

@@ -1,16 +1,20 @@
-define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading, libraryMenu, globalize) {
-    'use strict';
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+import 'emby-button';
+
+/* eslint-disable indent */
 
     function loadUser(page, params) {
-        var userid = params.userId;
+        const userid = params.userId;
         ApiClient.getUser(userid).then(function (user) {
             Dashboard.getCurrentUser().then(function (loggedInUser) {
                 libraryMenu.setTitle(user.Name);
                 page.querySelector('.username').innerHTML = user.Name;
-                var showPasswordSection = true;
-                var showLocalAccessSection = false;
+                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) {
@@ -34,7 +38,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
                     page.querySelector('.localAccessSection').classList.add('hide');
                 }
 
-                var txtEasyPassword = page.querySelector('#txtEasyPassword');
+                const txtEasyPassword = page.querySelector('#txtEasyPassword');
                 txtEasyPassword.value = '';
 
                 if (user.HasConfiguredEasyPassword) {
@@ -48,7 +52,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
 
                 page.querySelector('.chkEnableLocalEasyPassword').checked = user.Configuration.EnableLocalPassword;
 
-                require(['autoFocuser'], function (autoFocuser) {
+                import('autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(page);
                 });
             });
@@ -58,10 +62,10 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
         page.querySelector('#txtNewPasswordConfirm').value = '';
     }
 
-    return function (view, params) {
+    export default function (view, params) {
         function saveEasyPassword() {
-            var userId = params.userId;
-            var easyPassword = view.querySelector('#txtEasyPassword').value;
+            const userId = params.userId;
+            const easyPassword = view.querySelector('#txtEasyPassword').value;
 
             if (easyPassword) {
                 ApiClient.updateEasyPassword(userId, easyPassword).then(function () {
@@ -78,8 +82,8 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
                 ApiClient.updateUserConfiguration(user.Id, user.Configuration).then(function () {
                     loading.hide();
 
-                    require(['toast'], function (toast) {
-                        toast(globalize.translate('MessageSettingsSaved'));
+                    import('toast').then(({default: toast}) => {
+                        toast(globalize.translate('SettingsSaved'));
                     });
 
                     loadUser(view, params);
@@ -88,9 +92,9 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
         }
 
         function savePassword() {
-            var userId = params.userId;
-            var currentPassword = view.querySelector('#txtCurrentPassword').value;
-            var newPassword = view.querySelector('#txtNewPassword').value;
+            const userId = params.userId;
+            let currentPassword = view.querySelector('#txtCurrentPassword').value;
+            const newPassword = view.querySelector('#txtNewPassword').value;
 
             if (view.querySelector('#fldCurrentPassword').classList.contains('hide')) {
                 // Firefox does not respect autocomplete=off, so clear it if the field is supposed to be hidden (and blank)
@@ -101,7 +105,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
             ApiClient.updateUserPassword(userId, currentPassword, newPassword).then(function () {
                 loading.hide();
 
-                require(['toast'], function (toast) {
+                import('toast').then(({default: toast}) => {
                     toast(globalize.translate('PasswordSaved'));
                 });
 
@@ -116,10 +120,10 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
         }
 
         function onSubmit(e) {
-            var form = this;
+            const form = this;
 
             if (form.querySelector('#txtNewPassword').value != form.querySelector('#txtNewPasswordConfirm').value) {
-                require(['toast'], function (toast) {
+                import('toast').then(({default: toast}) => {
                     toast(globalize.translate('PasswordMatchError'));
                 });
             } else {
@@ -139,17 +143,16 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
         }
 
         function resetPassword() {
-            var msg = globalize.translate('PasswordResetConfirmation');
-
-            require(['confirm'], function (confirm) {
-                confirm(msg, globalize.translate('PasswordResetHeader')).then(function () {
-                    var userId = params.userId;
+            const msg = globalize.translate('PasswordResetConfirmation');
+            import('confirm').then(({default: confirm}) => {
+                confirm(msg, globalize.translate('ResetPassword')).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('ResetPassword')
                         });
                         loadUser(view, params);
                     });
@@ -158,11 +161,11 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
         }
 
         function resetEasyPassword() {
-            var msg = globalize.translate('PinCodeResetConfirmation');
+            const msg = globalize.translate('PinCodeResetConfirmation');
 
-            require(['confirm'], function (confirm) {
+            import('confirm').then(({default: confirm}) => {
                 confirm(msg, globalize.translate('HeaderPinCodeReset')).then(function () {
-                    var userId = params.userId;
+                    const userId = params.userId;
                     loading.show();
                     ApiClient.resetEasyPassword(userId).then(function () {
                         loading.hide();
@@ -183,5 +186,6 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading
         view.addEventListener('viewshow', function () {
             loadUser(view, params);
         });
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/dashboard/users/userprofiles.html

@@ -0,0 +1,16 @@
+<div id="userProfilesPage" data-role="page" class="page type-interior userProfilesPage fullWidthContent">
+    <div>
+        <div class="content-primary">
+            <div class="verticalSection verticalSection-extrabottompadding">
+                <div class="sectionTitleContainer sectionTitleContainer-cards">
+                    <h2 class="sectionTitle sectionTitle-cards">${HeaderUsers}</h2>
+                    <button is="emby-button" type="button" class="fab btnAddUser submit sectionTitleButton" style="margin-left:1em;" title="${ButtonAddUser}">
+                        <span class="material-icons add"></span>
+                    </button>
+                    <a is="emby-linkbutton" rel="noopener noreferrer" style="margin-left:2em!important;" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/adding-managing-users.html">${Help}</a>
+                </div>
+                <div class="localUsers itemsContainer vertical-wrap"></div>
+            </div>
+        </div>
+    </div>
+</div>

src/controllers/dashboard/users/userprofilespage.js

@@ -1,14 +1,24 @@
-define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-button-light', 'cardStyle', 'emby-button', 'indicators', 'flexStyles'], function (loading, dom, globalize, datefns, dfnshelper) {
-    'use strict';
+import loading from 'loading';
+import dom from 'dom';
+import globalize from 'globalize';
+import * as datefns from 'date-fns';
+import dfnshelper from 'dfnshelper';
+import 'paper-icon-button-light';
+import 'cardStyle';
+import 'emby-button';
+import 'indicators';
+import 'flexStyles';
+
+/* eslint-disable indent */
 
     function deleteUser(page, id) {
-        var msg = globalize.translate('DeleteUserConfirmation');
+        const msg = globalize.translate('DeleteUserConfirmation');
 
-        require(['confirm'], function (confirm) {
+        import('confirm').then(({default: confirm}) => {
             confirm({
                 title: globalize.translate('DeleteUser'),
                 text: msg,
-                confirmText: globalize.translate('ButtonDelete'),
+                confirmText: globalize.translate('Delete'),
                 primary: 'delete'
             }).then(function () {
                 loading.show();
@@ -20,10 +30,10 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but
     }
 
     function showUserMenu(elem) {
-        var card = dom.parentWithClass(elem, 'card');
-        var page = dom.parentWithClass(card, 'page');
-        var userId = card.getAttribute('data-userid');
-        var menuItems = [];
+        const card = dom.parentWithClass(elem, 'card');
+        const page = dom.parentWithClass(card, 'page');
+        const userId = card.getAttribute('data-userid');
+        const menuItems = [];
         menuItems.push({
             name: globalize.translate('ButtonOpen'),
             id: 'open',
@@ -40,12 +50,12 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but
             icon: 'person'
         });
         menuItems.push({
-            name: globalize.translate('ButtonDelete'),
+            name: globalize.translate('Delete'),
             id: 'delete',
             icon: 'delete'
         });
 
-        require(['actionsheet'], function (actionsheet) {
+        import('actionsheet').then(({default: actionsheet}) => {
             actionsheet.show({
                 items: menuItems,
                 positionTo: card,
@@ -72,8 +82,8 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but
     }
 
     function getUserHtml(user, addConnectIndicator) {
-        var html = '';
-        var cssClass = 'card squareCard scalableCard squareCard-scalable';
+        let html = '';
+        let cssClass = 'card squareCard scalableCard squareCard-scalable';
 
         if (user.Policy.IsDisabled) {
             cssClass += ' grayscale';
@@ -84,7 +94,7 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but
         html += '<div class="cardScalable visualCardBox-cardScalable">';
         html += '<div class="cardPadder cardPadder-square"></div>';
         html += '<a is="emby-linkbutton" class="cardContent" href="useredit.html?userId=' + user.Id + '">';
-        var imgUrl;
+        let imgUrl;
 
         if (user.PrimaryImageTag) {
             imgUrl = ApiClient.getUserImageUrl(user.Id, {
@@ -94,7 +104,7 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but
             });
         }
 
-        var imageClass = 'cardImage';
+        let imageClass = 'cardImage';
 
         if (user.Policy.IsDisabled) {
             imageClass += ' disabledUser';
@@ -118,8 +128,8 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but
         html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu flex-shrink-zero"><span class="material-icons more_vert"></span></button>';
         html += '</div>';
         html += '<div class="cardText cardText-secondary">';
-        var lastSeen = getLastSeenText(user.LastActivityDate);
-        html += '' != lastSeen ? lastSeen : '&nbsp;';
+        const lastSeen = getLastSeenText(user.LastActivityDate);
+        html += lastSeen != '' ? lastSeen : '&nbsp;';
         html += '</div>';
         html += '</div>';
         html += '</div>';
@@ -145,125 +155,30 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but
         page.querySelector('.localUsers').innerHTML = getUserSectionHtml(users, true);
     }
 
-    function showPendingUserMenu(elem) {
-        var menuItems = [];
-        menuItems.push({
-            name: globalize.translate('ButtonCancel'),
-            id: 'delete',
-            icon: 'delete'
-        });
-
-        require(['actionsheet'], function (actionsheet) {
-            var card = dom.parentWithClass(elem, 'card');
-            var page = dom.parentWithClass(card, 'page');
-            var id = card.getAttribute('data-id');
-            actionsheet.show({
-                items: menuItems,
-                positionTo: card,
-                callback: function (menuItemId) {
-                    switch (menuItemId) {
-                        case 'delete':
-                            cancelAuthorization(page, id);
-                    }
-                }
-            });
-        });
-    }
-
-    function getPendingUserHtml(user) {
-        var 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) {
-        require(['components/guestinviter/guestinviter'], function (guestinviter) {
-            guestinviter.show().then(function () {
-                loadData(page);
-            });
-        });
     }
 
     pageIdOn('pageinit', 'userProfilesPage', function () {
-        var page = this;
+        const page = this;
         page.querySelector('.btnAddUser').addEventListener('click', function() {
             Dashboard.navigate('usernew.html');
         });
         page.querySelector('.localUsers').addEventListener('click', function (e__e) {
-            var btnUserMenu = dom.parentWithClass(e__e.target, 'btnUserMenu');
+            const btnUserMenu = dom.parentWithClass(e__e.target, 'btnUserMenu');
 
             if (btnUserMenu) {
                 showUserMenu(btnUserMenu);
             }
         });
-        page.querySelector('.pending').addEventListener('click', function (e__r) {
-            var btnUserMenu = dom.parentWithClass(e__r.target, 'btnUserMenu');
-
-            if (btnUserMenu) {
-                showPendingUserMenu(btnUserMenu);
-            }
-        });
     });
+
     pageIdOn('pagebeforeshow', 'userProfilesPage', function () {
         loadData(this);
     });
-});
+
+/* eslint-enable indent */

src/controllers/edititemmetadata.html

@@ -0,0 +1,17 @@
+<div id="editItemMetadataPage" data-role="page" class="page libraryPage metadataEditorPage noSecondaryNavPage" data-title="${MetadataManager}">
+
+    <style>
+        #editItemMetadataPage .editMetadataForm {
+            max-width: 100%;
+        }
+    </style>
+    <div class="editPageSidebar" style="overflow:auto;">
+        <div class="libraryTree">
+            <ul></ul>
+        </div>
+    </div>
+    <div>
+        <div class="editPageInnerContent padded-top padded-bottom-page">
+        </div>
+    </div>
+</div>

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 (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,14 @@
-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 appHost from 'apphost';
+import layoutManager from 'layoutManager';
+import focusManager from 'focusManager';
+import 'emby-itemscontainer';
+import 'emby-scroller';
+
+/* eslint-disable indent */
 
     function enableScrollX() {
         return true;
@@ -19,7 +28,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
 
     function getSections() {
         return [{
-            name: 'HeaderFavoriteMovies',
+            name: 'Movies',
             types: 'Movie',
             shape: getPosterShape(),
             showTitle: true,
@@ -28,7 +37,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
             overlayText: false,
             centerText: true
         }, {
-            name: 'HeaderFavoriteShows',
+            name: 'Shows',
             types: 'Series',
             shape: getPosterShape(),
             showTitle: true,
@@ -37,7 +46,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
             overlayText: false,
             centerText: true
         }, {
-            name: 'HeaderFavoriteEpisodes',
+            name: 'Episodes',
             types: 'Episode',
             shape: getThumbShape(),
             preferThumb: false,
@@ -47,7 +56,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
             overlayText: false,
             centerText: true
         }, {
-            name: 'HeaderFavoriteVideos',
+            name: 'Videos',
             types: 'Video',
             shape: getThumbShape(),
             preferThumb: true,
@@ -56,7 +65,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
             overlayText: false,
             centerText: true
         }, {
-            name: 'HeaderFavoriteCollections',
+            name: 'Collections',
             types: 'BoxSet',
             shape: getPosterShape(),
             showTitle: true,
@@ -64,7 +73,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
             overlayText: false,
             centerText: true
         }, {
-            name: 'HeaderFavoritePlaylists',
+            name: 'Playlists',
             types: 'Playlist',
             shape: getSquareShape(),
             preferThumb: false,
@@ -75,7 +84,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
             overlayPlayButton: true,
             coverImage: true
         }, {
-            name: 'HeaderFavoritePeople',
+            name: 'People',
             types: 'Person',
             shape: getPosterShape(),
             preferThumb: false,
@@ -86,7 +95,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
             overlayPlayButton: true,
             coverImage: true
         }, {
-            name: 'HeaderFavoriteArtists',
+            name: 'Artists',
             types: 'MusicArtist',
             shape: getSquareShape(),
             preferThumb: false,
@@ -97,7 +106,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
             overlayPlayButton: true,
             coverImage: true
         }, {
-            name: 'HeaderFavoriteAlbums',
+            name: 'Albums',
             types: 'MusicAlbum',
             shape: getSquareShape(),
             preferThumb: false,
@@ -108,7 +117,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
             overlayPlayButton: true,
             coverImage: true
         }, {
-            name: 'HeaderFavoriteSongs',
+            name: 'Songs',
             types: 'Audio',
             shape: getSquareShape(),
             preferThumb: false,
@@ -120,7 +129,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap
             action: 'instantmix',
             coverImage: true
         }, {
-            name: 'HeaderFavoriteBooks',
+            name: 'Books',
             types: 'Book',
             shape: getPosterShape(),
             showTitle: true,
@@ -133,8 +142,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 +154,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 +179,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 +207,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 +224,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 +255,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 = window.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 +288,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.html

@@ -0,0 +1,9 @@
+<div id="indexPage" style="outline: none;" data-role="page" data-dom-cache="true" class="page homePage libraryPage allLibraryPage backdropPage pageWithAbsoluteTabs withTabs" data-backdroptype="movie,series,book">
+
+    <div class="tabContent pageTabContent" id="homeTab" data-index="0">
+        <div class="sections"></div>
+    </div>
+    <div class="tabContent pageTabContent" id="favoritesTab" data-index="1">
+        <div class="sections"></div>
+    </div>
+</div>

src/controllers/home.js

@@ -1,7 +1,33 @@
-define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-scroller'], function (TabbedView, globalize, require) {
-    'use strict';
+import TabbedView from 'tabbedView';
+import globalize from 'globalize';
+import 'emby-tabs';
+import 'emby-button';
+import 'emby-scroller';
 
-    function getTabs() {
+class HomeView extends TabbedView {
+    constructor(view, params) {
+        super(view, params);
+    }
+
+    setTitle() {
+        Emby.Page.setTitle(null);
+    }
+
+    onPause() {
+        super.onPause(this);
+        document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
+    }
+
+    onResume(options) {
+        super.onResume(this, options);
+        document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
+    }
+
+    getDefaultTabIndex() {
+        return 0;
+    }
+
+    getTabs() {
         return [{
             name: globalize.translate('Home')
         }, {
@@ -9,35 +35,25 @@ define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-
         }];
     }
 
-    function getDefaultTabIndex() {
-        return 0;
-    }
-
-    function getRequirePromise(deps) {
-        return new Promise(function (resolve, reject) {
-            require(deps, resolve);
-        });
-    }
-
-    function getTabController(index) {
-        if (null == index) {
+    getTabController(index) {
+        if (index == null) {
             throw new Error('index cannot be null');
         }
 
-        var depends = [];
+        let depends = '';
 
         switch (index) {
             case 0:
-                depends.push('controllers/hometab');
+                depends = 'controllers/hometab';
                 break;
 
             case 1:
-                depends.push('controllers/favorites');
+                depends = 'controllers/favorites';
         }
 
-        var instance = this;
-        return getRequirePromise(depends).then(function (controllerFactory) {
-            var controller = instance.tabControllers[index];
+        const instance = this;
+        return import(depends).then(({ default: controllerFactory }) => {
+            let controller = instance.tabControllers[index];
 
             if (!controller) {
                 controller = new controllerFactory(instance.view.querySelector(".tabContent[data-index='" + index + "']"), instance.params);
@@ -47,29 +63,6 @@ define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-
             return controller;
         });
     }
+}
 
-    function HomeView(view, params) {
-        TabbedView.call(this, view, params);
-    }
-
-    Object.assign(HomeView.prototype, TabbedView.prototype);
-    HomeView.prototype.getTabs = getTabs;
-    HomeView.prototype.getDefaultTabIndex = getDefaultTabIndex;
-    HomeView.prototype.getTabController = getTabController;
-
-    HomeView.prototype.setTitle = function () {
-        Emby.Page.setTitle(null);
-    };
-
-    HomeView.prototype.onPause = function () {
-        TabbedView.prototype.onPause.call(this);
-        document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
-    };
-
-    HomeView.prototype.onResume = function (options) {
-        TabbedView.prototype.onResume.call(this, options);
-        document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
-    };
-
-    return HomeView;
-});
+export default HomeView;

src/controllers/hometab.js

@@ -1,27 +1,20 @@
-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 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.apiClient = window.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 +24,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 +37,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/itemDetails/index.html

@@ -0,0 +1,237 @@
+<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage" data-backbutton="true">
+    <div id="itemBackdrop" class="itemBackdrop">
+    </div>
+
+    <div class="detailLogo"></div>
+    <div class="detailPageWrapperContainer">
+        <div class="detailPagePrimaryContainer padded-left padded-right">
+            <div class="infoWrapper infoText">
+                <div class="nameContainer"></div>
+                <div class="itemMiscInfo itemMiscInfo-primary" style="margin-bottom: 0.6em;"></div>
+                <div class="itemMiscInfo itemMiscInfo-secondary" style="margin-bottom: 0.6em;"></div>
+            </div>
+
+            <div class="mainDetailButtons focuscontainer-x">
+                <button is="emby-button" type="button" class="button-flat btnResume hide detailButton" title="${ButtonResume}" data-mode="resume">
+                    <div class="detailButton-content">
+                        <span class="material-icons detailButton-icon play_arrow"></span>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnPlay hide detailButton" title="${Play}" data-mode="play">
+                    <div class="detailButton-content">
+                        <span class="material-icons detailButton-icon play_arrow"></span>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnDownload hide detailButton" title="${Download}">
+                    <div class="detailButton-content">
+                        <span class="material-icons detailButton-icon get_app"></span>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnPlayTrailer hide detailButton" title="${ButtonTrailer}">
+                    <div class="detailButton-content">
+                        <span class="material-icons detailButton-icon theaters"></span>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton" title="${HeaderInstantMix}">
+                    <div class="detailButton-content">
+                        <span class="material-icons detailButton-icon explore"></span>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnShuffle hide detailButton" title="${Shuffle}">
+                    <div class="detailButton-content">
+                        <span class="material-icons detailButton-icon shuffle"></span>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnCancelSeriesTimer hide detailButton" title="${CancelSeries}">
+                    <div class="detailButton-content">
+                        <span class="material-icons detailButton-icon delete"></span>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnCancelTimer hide detailButton" title="${StopRecording}">
+                    <div class="detailButton-content">
+                        <span class="material-icons detailButton-icon stop"></span>
+                    </div>
+                </button>
+
+                <button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton" title="">
+                    <div class="detailButton-content">
+                        <span class="material-icons detailButton-icon check"></span>
+                    </div>
+                </button>
+
+                <button is="emby-ratingbutton" type="button" class="button-flat btnUserRating hide detailButton" title="${Rate}">
+                    <div class="detailButton-content">
+                        <span class="material-icons detailButton-icon favorite"></span>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnSplitVersions hide detailButton" title="${ButtonSplit}">
+                    <div class="detailButton-content">
+                        <span class="material-icons detailButton-icon call_split"></span>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton" title="${ButtonMore}">
+                    <div class="detailButton-content">
+                        <span class="material-icons detailButton-icon more_vert"></span>
+                    </div>
+                </button>
+            </div>
+        </div>
+        <div class="detailPageSecondaryContainer">
+            <div class="detailImageContainer padded-left"></div>
+            <div class="detailPageContent">
+                <div class="detailPagePrimaryContent padded-right">
+                    <div class="detailSection">
+                        <div class="itemMiscInfo nativeName hide"></div>
+
+                        <div class="itemDetailsGroup">
+                            <div class="detailsGroupItem genresGroup hide">
+                                <div class="genresLabel label"></div>
+                                <div class="genres content focuscontainer-x"></div>
+                            </div>
+
+                            <div class="detailsGroupItem directorsGroup hide">
+                                <div class="directorsLabel label"></div>
+                                <div class="directors content focuscontainer-x"></div>
+                            </div>
+
+                            <div class="detailsGroupItem writersGroup hide">
+                                <div class="writersLabel label"></div>
+                                <div class="writers content focuscontainer-x"></div>
+                            </div>
+                        </div>
+
+                        <form class="trackSelections hide focuscontainer-x">
+                            <div class="selectContainer selectSourceContainer hide trackSelectionFieldContainer flex-shrink-zero">
+                                <select is="emby-select" class="selectSource detailTrackSelect" label=""></select>
+                            </div>
+                            <div class="selectContainer selectVideoContainer hide trackSelectionFieldContainer flex-shrink-zero">
+                                <select is="emby-select" class="selectVideo detailTrackSelect" label=""></select>
+                            </div>
+                            <div class="selectContainer selectAudioContainer hide trackSelectionFieldContainer flex-shrink-zero">
+                                <select is="emby-select" class="selectAudio detailTrackSelect" label=""></select>
+                            </div>
+                            <div class="selectContainer selectSubtitlesContainer hide trackSelectionFieldContainer flex-shrink-zero">
+                                <select is="emby-select" class="selectSubtitles detailTrackSelect" label=""></select>
+                            </div>
+                        </form>
+
+                        <div class="recordingFields hide" style="margin: 0.5em 0 1.5em;"></div>
+                        <div class="detailSectionContent">
+                            <div class="itemLastPlayed hide"></div>
+
+                            <p class="itemGenres"></p>
+                            <h3 class="tagline"></h3>
+                            <p class="overview"></p>
+                            <div class="overview-controls">
+                                <a class="overview-expand hide" is="emby-linkbutton" href="#">${ShowMore}</a>
+                            </div>
+                            <p id="itemBirthday"></p>
+                            <p id="itemBirthLocation"></p>
+                            <p id="itemDeathDate"></p>
+                            <p id="seriesAirTime"></p>
+
+                            <div class="itemTags focuscontainer-x hide" style="margin: 0.7em 0; font-size: 92%;"></div>
+                            <div class="itemExternalLinks focuscontainer-x hide" style="margin: 0.7em 0; font-size: 92%;"></div>
+                            <div class="seriesRecordingEditor"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="seriesTimerScheduleSection verticalSection detailVerticalSection hide" style="margin-top: -3em;">
+                    <h2 class="sectionTitle">${Schedule}</h2>
+                    <div class="seriesTimerSchedule padded-right"></div>
+                </div>
+
+                <div class="collectionItems hide"></div>
+
+                <div class="nextUpSection verticalSection detailVerticalSection hide">
+                    <h2 class="sectionTitle sectionTitle-cards">${NextUp}</h2>
+                    <div is="emby-itemscontainer" class="nextUpItems vertical-wrap padded-right"></div>
+                </div>
+
+                <div class="programGuideSection hide verticalSection detailVerticalSection">
+                    <div class="programGuide"></div>
+                </div>
+
+                <div id="childrenCollapsible" class="hide verticalSection detailVerticalSection">
+                    <h2 class="childrenSectionHeader sectionTitle sectionTitle-cards hide">
+                        <span id="childrenTitle"></span>
+                    </h2>
+                    <div id="childrenContent">
+                        <div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer padded-right" style="text-align: left;"></div>
+                    </div>
+                </div>
+
+                <div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide">
+                    <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderAdditionalParts}</h2>
+                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
+                        <div id="additionalPartsContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
+                    </div>
+                </div>
+
+                <div class="verticalSection detailVerticalSection moreFromSeasonSection hide">
+                    <h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
+                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
+                        <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
+                    </div>
+                </div>
+
+                <div class="verticalSection detailVerticalSection moreFromArtistSection hide">
+                    <h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
+                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
+                        <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
+                    </div>
+                </div>
+
+                <div id="castCollapsible" class="verticalSection detailVerticalSection hide">
+                    <h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-right">${HeaderCastAndCrew}</h2>
+                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
+                        <div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
+                    </div>
+                </div>
+
+                <div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
+                    <h2 class="sectionTitle padded-right">${HeaderUpcomingOnTV}</h2>
+                    <div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list padded-right"></div>
+                </div>
+
+                <div id="specialsCollapsible" class="verticalSection detailVerticalSection hide">
+                    <h2 class="sectionTitle sectionTitle-cards padded-right">${SpecialFeatures}</h2>
+                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
+                        <div id="specialsContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
+                    </div>
+                </div>
+
+                <div id="musicVideosCollapsible" class="verticalSection detailVerticalSection hide">
+                    <h2 class="sectionTitle sectionTitle-cards padded-right">${MusicVideos}</h2>
+                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
+                        <div id="musicVideosContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
+                    </div>
+                </div>
+
+                <div id="scenesCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding hide">
+                    <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderScenes}</h2>
+                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
+                        <div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
+                    </div>
+                </div>
+
+                <div id="similarCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding hide">
+                    <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderMoreLikeThis}</h2>
+                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
+                        <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/controllers/list.html

@@ -0,0 +1,54 @@
+<div data-role="page" class="view flex flex-direction-column page libraryPage noSecondaryNavPage" data-backbutton="true">
+    <div class="alphaPicker alphaPicker-vertical alphaPicker-fixed focuscontainer-y hide">
+    </div>
+    <div class="flex-grow padded-left padded-right pageContainerTopPadding">
+        <div class="flex align-items-center focuscontainer-x itemsViewSettingsContainer padded-top padded-bottom flex-wrap-wrap">
+            <button is="emby-button" class="btnPlay button-flat hide listTextButton-autohide">
+                <span>${HeaderPlayAll}</span>
+            </button>
+            <button is="paper-icon-button-light" class="btnPlay listIconButton-autohide">
+                <span class="material-icons play_arrow"></span>
+            </button>
+            <button is="emby-button" class="btnQueue button-flat hide listTextButton-autohide">
+                <span>${Queue}</span>
+            </button>
+            <button is="paper-icon-button-light" class="btnQueue hide listIconButton-autohide">
+                <span class="material-icons playlist_add"></span>
+            </button>
+            <button is="emby-button" class="btnShuffle button-flat hide listTextButton-autohide">
+                <span>${Shuffle}</span>
+            </button>
+            <button is="paper-icon-button-light" class="btnShuffle hide listIconButton-autohide">
+                <span class="material-icons shuffle"></span>
+            </button>
+            <button is="emby-button" class="btnNewItem hide button-flat listTextButton-autohide">
+                <span>${New}</span>
+            </button>
+            <button is="paper-icon-button-light" class="btnNewItem hide listIconButton-autohide">
+                <span class="material-icons add"></span>
+            </button>
+
+            <button is="emby-button" class="btnSort hide button-flat listTextButton-autohide">
+                <span class="btnSortText"></span>
+                <span class="material-icons btnSortIcon arrow_upward"></span>
+            </button>
+            <button is="paper-icon-button-light" class="btnSort hide listIconButton-autohide">
+                <span class="material-icons sort"></span>
+            </button>
+            <button is="emby-button" class="btnFilter button-flat listTextButton-autohide">
+                <span>${Filter}</span>
+            </button>
+            <button is="paper-icon-button-light" class="btnFilter listIconButton-autohide" data-ripple="false" style="overflow:visible;">
+                <span class="material-icons filter_list"></span>
+            </button>
+            <button is="emby-button" class="btnViewSettings button-flat listTextButton-autohide">
+                <span class="material-icons more_vert"></span>
+            </button>
+            <button is="paper-icon-button-light" class="btnViewSettings listIconButton-autohide">
+                <span class="material-icons more_vert"></span>
+            </button>
+        </div>
+        <div is="emby-itemscontainer" class="vertical-wrap itemsContainer centered" style="padding: 0 0 10vh 0;">
+        </div>
+    </div>
+</div>

src/controllers/livetv.html

@@ -0,0 +1,97 @@
+<div id="liveTvSuggestedPage" data-dom-cache="true" data-role="page" class="page libraryPage liveTvPage pageWithAbsoluteTabs withTabs" data-title="${LiveTV}" data-backdroptype="series,movie">
+
+    <div class="liveTvContainer">
+
+        <div class="pageTabContent" id="suggestionsTab" data-index="0">
+            <div id="activePrograms" class="verticalSection">
+                <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
+                    <a href="list.html?type=Programs&IsAiring=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
+                        <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${HeaderOnNow}</h2>
+                        <span class="material-icons chevron_right"></span>
+                    </a>
+                </div>
+                <div is="emby-itemscontainer" class="activeProgramItems itemsContainer padded-left padded-right"></div>
+            </div>
+            <div id="upcomingEpisodes" class="verticalSection">
+                <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
+                    <a href="list.html?type=Programs&IsSeries=true&IsMovie=false&IsNews=false" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
+                        <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${Shows}</h2>
+                        <span class="material-icons chevron_right"></span>
+                    </a>
+                </div>
+                <div is="emby-itemscontainer" class="upcomingEpisodeItems itemsContainer padded-left padded-right"></div>
+            </div>
+            <div id="upcomingTvMovies" class="verticalSection">
+                <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
+                    <a href="list.html?type=Programs&IsMovie=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
+                        <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${Movies}</h2>
+                        <span class="material-icons chevron_right"></span>
+                    </a>
+                </div>
+                <div is="emby-itemscontainer" class="upcomingTvMovieItems itemsContainer padded-left padded-right"></div>
+            </div>
+            <div id="upcomingSports" class="verticalSection">
+                <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
+                    <a href="list.html?type=Programs&IsSports=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
+                        <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${Sports}</h2>
+                        <span class="material-icons chevron_right"></span>
+                    </a>
+                </div>
+                <div is="emby-itemscontainer" class="upcomingSportsItems itemsContainer padded-left padded-right"></div>
+            </div>
+            <div id="upcomingKids" class="verticalSection">
+                <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
+                    <a href="list.html?type=Programs&IsKids=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
+                        <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${HeaderForKids}</h2>
+                        <span class="material-icons chevron_right"></span>
+                    </a>
+                </div>
+                <div is="emby-itemscontainer" class="upcomingKidsItems itemsContainer padded-left padded-right"></div>
+            </div>
+            <div id="upcomingNews" class="verticalSection">
+                <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
+                    <a href="list.html?type=Programs&IsNews=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
+                        <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${News}</h2>
+                        <span class="material-icons chevron_right"></span>
+                    </a>
+                </div>
+                <div is="emby-itemscontainer" class="upcomingNewsItems itemsContainer padded-left padded-right"></div>
+            </div>
+        </div>
+        <div class="pageTabContent flexPageTabContent absolutePageTabContent" id="guideTab" data-index="1" style="width:auto;padding-top:0; padding-bottom: 0!important;">
+        </div>
+        <div class="pageTabContent" id="channelsTab" data-index="2">
+            <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
+                <div class="paging"></div>
+                <button is="paper-icon-button-light" class="btnFilter sectionTitleButton" title="${Filter}"><span class="material-icons filter_list"></span></button>
+            </div>
+            <div is="emby-itemscontainer" id="items" class="itemsContainer vertical-wrap padded-left padded-right"></div>
+        </div>
+        <div class="pageTabContent" id="recordingsTab" data-index="3">
+            <div id="latestRecordings" class="verticalSection hide">
+                <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
+                    <button type="button" is="emby-button" class="button-flat button-flat-mini sectionTitleTextButton more" data-type="latest">
+                        <h2 class="sectionTitle sectionTitle-cards">${HeaderLatestRecordings}</h2>
+                        <span class="material-icons chevron_right"></span>
+                    </button>
+                </div>
+                <div is="emby-itemscontainer" class="recordingItems itemsContainer padded-left padded-right"></div>
+            </div>
+        </div>
+        <div class="pageTabContent" id="scheduleTab" data-index="4">
+            <div id="activeRecordings" class="verticalSection hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderActiveRecordings}</h2>
+                <div is="emby-itemscontainer" class="recordingItems itemsContainer padded-left padded-right"></div>
+            </div>
+            <div id="upcomingRecordings" class="hide">
+                <div class="recordingItems"></div>
+            </div>
+        </div>
+        <div class="pageTabContent padded-top" id="seriesTab" data-index="5">
+            <div is="emby-itemscontainer" class="vertical-wrap itemsContainer centered padded-left padded-right" id="items"></div>
+        </div>
+        <div class="pageTabContent" data-index="6">
+        </div>
+    </div>
+
+</div>

src/controllers/livetv/livetvchannels.js

@@ -1,130 +1,134 @@
-define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'userSettings', 'emby-itemscontainer'], function (cardBuilder, imageLoader, libraryBrowser, loading, events, userSettings) {
-    'use strict';
+import cardBuilder from 'cardBuilder';
+import imageLoader from 'imageLoader';
+import libraryBrowser from 'libraryBrowser';
+import loading from 'loading';
+import events from 'events';
+import * as userSettings from 'userSettings';
+import 'emby-itemscontainer';
 
-    return function (view, params, tabContent) {
-        function getPageData() {
-            if (!pageData) {
-                pageData = {
-                    query: {
-                        StartIndex: 0,
-                        Fields: 'PrimaryImageAspectRatio'
-                    }
-                };
+export default function (view, params, tabContent) {
+    function getPageData() {
+        if (!pageData) {
+            pageData = {
+                query: {
+                    StartIndex: 0,
+                    Fields: 'PrimaryImageAspectRatio'
+                }
+            };
+        }
+
+        if (userSettings.libraryPageSize() > 0) {
+            pageData.query['Limit'] = userSettings.libraryPageSize();
+        }
+
+        return pageData;
+    }
+
+    function getQuery() {
+        return getPageData().query;
+    }
+
+    function getChannelsHtml(channels) {
+        return cardBuilder.getCardsHtml({
+            items: channels,
+            shape: 'square',
+            showTitle: true,
+            lazy: true,
+            cardLayout: true,
+            showDetailsMenu: true,
+            showCurrentProgram: true,
+            showCurrentProgramTime: true
+        });
+    }
+
+    function renderChannels(context, result) {
+        function onNextPageClick() {
+            if (isLoading) {
+                return;
             }
 
             if (userSettings.libraryPageSize() > 0) {
-                pageData.query['Limit'] = userSettings.libraryPageSize();
+                query.StartIndex += query.Limit;
+            }
+            reloadItems(context);
+        }
+
+        function onPreviousPageClick() {
+            if (isLoading) {
+                return;
             }
 
-            return pageData;
-        }
-
-        function getQuery() {
-            return getPageData().query;
-        }
-
-        function getChannelsHtml(channels) {
-            return cardBuilder.getCardsHtml({
-                items: channels,
-                shape: 'square',
-                showTitle: true,
-                lazy: true,
-                cardLayout: true,
-                showDetailsMenu: true,
-                showCurrentProgram: true,
-                showCurrentProgramTime: true
-            });
-        }
-
-        function renderChannels(context, result) {
-            function onNextPageClick() {
-                if (isLoading) {
-                    return;
-                }
-
-                if (userSettings.libraryPageSize() > 0) {
-                    query.StartIndex += query.Limit;
-                }
-                reloadItems(context);
-            }
-
-            function onPreviousPageClick() {
-                if (isLoading) {
-                    return;
-                }
-
-                if (userSettings.libraryPageSize() > 0) {
-                    query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
-                }
-                reloadItems(context);
-            }
-
-            var query = getQuery();
-            context.querySelector('.paging').innerHTML = libraryBrowser.getQueryPagingHtml({
-                startIndex: query.StartIndex,
-                limit: query.Limit,
-                totalRecordCount: result.TotalRecordCount,
-                showLimit: false,
-                updatePageSizeSetting: false,
-                filterButton: false
-            });
-            var html = getChannelsHtml(result.Items);
-            var elem = context.querySelector('#items');
-            elem.innerHTML = html;
-            imageLoader.lazyChildren(elem);
-            var i;
-            var length;
-            var elems;
-
-            for (elems = context.querySelectorAll('.btnNextPage'), i = 0, length = elems.length; i < length; i++) {
-                elems[i].addEventListener('click', onNextPageClick);
-            }
-
-            for (elems = context.querySelectorAll('.btnPreviousPage'), i = 0, length = elems.length; i < length; i++) {
-                elems[i].addEventListener('click', onPreviousPageClick);
+            if (userSettings.libraryPageSize() > 0) {
+                query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
             }
+            reloadItems(context);
         }
 
-        function showFilterMenu(context) {
-            require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
-                var filterDialog = new filterDialogFactory({
-                    query: getQuery(),
-                    mode: 'livetvchannels',
-                    serverId: ApiClient.serverId()
-                });
-                events.on(filterDialog, 'filterchange', function () {
-                    reloadItems(context);
-                });
-                filterDialog.show();
-            });
-        }
-
-        function reloadItems(context, save) {
-            loading.show();
-            isLoading = true;
-            var query = getQuery();
-            var apiClient = ApiClient;
-            query.UserId = apiClient.getCurrentUserId();
-            apiClient.getLiveTvChannels(query).then(function (result) {
-                renderChannels(context, result);
-                loading.hide();
-                isLoading = false;
-
-                require(['autoFocuser'], function (autoFocuser) {
-                    autoFocuser.autoFocus(view);
-                });
-            });
-        }
-
-        var pageData;
-        var self = this;
-        var isLoading = false;
-        tabContent.querySelector('.btnFilter').addEventListener('click', function () {
-            showFilterMenu(tabContent);
+        const query = getQuery();
+        context.querySelector('.paging').innerHTML = libraryBrowser.getQueryPagingHtml({
+            startIndex: query.StartIndex,
+            limit: query.Limit,
+            totalRecordCount: result.TotalRecordCount,
+            showLimit: false,
+            updatePageSizeSetting: false,
+            filterButton: false
         });
+        const html = getChannelsHtml(result.Items);
+        const elem = context.querySelector('#items');
+        elem.innerHTML = html;
+        imageLoader.lazyChildren(elem);
+        let i;
+        let length;
+        let elems;
 
-        self.renderTab = function () {
-            reloadItems(tabContent);
-        };
+        for (elems = context.querySelectorAll('.btnNextPage'), i = 0, length = elems.length; i < length; i++) {
+            elems[i].addEventListener('click', onNextPageClick);
+        }
+
+        for (elems = context.querySelectorAll('.btnPreviousPage'), i = 0, length = elems.length; i < length; i++) {
+            elems[i].addEventListener('click', onPreviousPageClick);
+        }
+    }
+
+    function showFilterMenu(context) {
+        import(['components/filterdialog/filterdialog']).then(({default: FilterDialog}) => {
+            const filterDialog = new FilterDialog({
+                query: getQuery(),
+                mode: 'livetvchannels',
+                serverId: ApiClient.serverId()
+            });
+            events.on(filterDialog, 'filterchange', function () {
+                reloadItems(context);
+            });
+            filterDialog.show();
+        });
+    }
+
+    function reloadItems(context, save) {
+        loading.show();
+        isLoading = true;
+        const query = getQuery();
+        const apiClient = ApiClient;
+        query.UserId = apiClient.getCurrentUserId();
+        apiClient.getLiveTvChannels(query).then(function (result) {
+            renderChannels(context, result);
+            loading.hide();
+            isLoading = false;
+
+            import('autoFocuser').then(({default: autoFocuser}) => {
+                autoFocuser.autoFocus(view);
+            });
+        });
+    }
+
+    let pageData;
+    const self = this;
+    let isLoading = false;
+    tabContent.querySelector('.btnFilter').addEventListener('click', function () {
+        showFilterMenu(tabContent);
+    });
+
+    self.renderTab = function () {
+        reloadItems(tabContent);
     };
-});
+}

src/controllers/livetv/livetvguide.js

@@ -1,29 +1,27 @@
-define(['tvguide'], function (tvguide) {
-    'use strict';
+import tvguide from 'tvguide';
 
-    return function (view, params, tabContent) {
-        var guideInstance;
-        var self = this;
+export default function (view, params, tabContent) {
+    let guideInstance;
+    const self = this;
 
-        self.renderTab = function () {
-            if (!guideInstance) {
-                guideInstance = new tvguide({
-                    element: tabContent,
-                    serverId: ApiClient.serverId()
-                });
-            }
-        };
-
-        self.onShow = function () {
-            if (guideInstance) {
-                guideInstance.resume();
-            }
-        };
-
-        self.onHide = function () {
-            if (guideInstance) {
-                guideInstance.pause();
-            }
-        };
+    self.renderTab = function () {
+        if (!guideInstance) {
+            guideInstance = new tvguide({
+                element: tabContent,
+                serverId: ApiClient.serverId()
+            });
+        }
     };
-});
+
+    self.onShow = function () {
+        if (guideInstance) {
+            guideInstance.resume();
+        }
+    };
+
+    self.onHide = function () {
+        if (guideInstance) {
+            guideInstance.pause();
+        }
+    };
+}

src/controllers/livetv/livetvrecordings.js

@@ -1,110 +1,112 @@
-define(['layoutManager', 'loading', 'cardBuilder', 'apphost', 'imageLoader', 'scripts/livetvcomponents', 'listViewStyle', 'emby-itemscontainer'], function (layoutManager, loading, cardBuilder, appHost, imageLoader) {
-    'use strict';
+import loading from 'loading';
+import cardBuilder from 'cardBuilder';
+import imageLoader from 'imageLoader';
+import 'scripts/livetvcomponents';
+import 'listViewStyle';
+import 'emby-itemscontainer';
 
-    function renderRecordings(elem, recordings, cardOptions, scrollX) {
-        if (!elem) {
-            return;
-        }
-
-        if (recordings.length) {
-            elem.classList.remove('hide');
-        } else {
-            elem.classList.add('hide');
-        }
-
-        var recordingItems = elem.querySelector('.recordingItems');
-
-        if (scrollX) {
-            recordingItems.classList.add('scrollX');
-            recordingItems.classList.add('hiddenScrollX');
-            recordingItems.classList.remove('vertical-wrap');
-        } else {
-            recordingItems.classList.remove('scrollX');
-            recordingItems.classList.remove('hiddenScrollX');
-            recordingItems.classList.add('vertical-wrap');
-        }
-
-        appHost.supports('imageanalysis');
-        recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
-            items: recordings,
-            shape: scrollX ? 'autooverflow' : 'auto',
-            defaultShape: scrollX ? 'overflowBackdrop' : 'backdrop',
-            showTitle: true,
-            showParentTitle: true,
-            coverImage: true,
-            cardLayout: false,
-            centerText: true,
-            allowBottomPadding: !scrollX,
-            preferThumb: 'auto',
-            overlayText: false
-        }, cardOptions || {}));
-        imageLoader.lazyChildren(recordingItems);
+function renderRecordings(elem, recordings, cardOptions, scrollX) {
+    if (!elem) {
+        return;
     }
 
-    function renderLatestRecordings(context, promise) {
-        promise.then(function (result) {
-            renderRecordings(context.querySelector('#latestRecordings'), result.Items, {
-                showYear: true,
-                lines: 2
-            }, false);
-            loading.hide();
-        });
+    if (recordings.length) {
+        elem.classList.remove('hide');
+    } else {
+        elem.classList.add('hide');
     }
 
-    function renderRecordingFolders(context, promise) {
-        promise.then(function (result) {
-            renderRecordings(context.querySelector('#recordingFolders'), result.Items, {
-                showYear: false,
-                showParentTitle: false
-            }, false);
-        });
+    const recordingItems = elem.querySelector('.recordingItems');
+
+    if (scrollX) {
+        recordingItems.classList.add('scrollX');
+        recordingItems.classList.add('hiddenScrollX');
+        recordingItems.classList.remove('vertical-wrap');
+    } else {
+        recordingItems.classList.remove('scrollX');
+        recordingItems.classList.remove('hiddenScrollX');
+        recordingItems.classList.add('vertical-wrap');
     }
 
-    function onMoreClick(e) {
-        var type = this.getAttribute('data-type');
-        var serverId = ApiClient.serverId();
+    recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
+        items: recordings,
+        shape: scrollX ? 'autooverflow' : 'auto',
+        defaultShape: scrollX ? 'overflowBackdrop' : 'backdrop',
+        showTitle: true,
+        showParentTitle: true,
+        coverImage: true,
+        cardLayout: false,
+        centerText: true,
+        allowBottomPadding: !scrollX,
+        preferThumb: 'auto',
+        overlayText: false
+    }, cardOptions || {}));
+    imageLoader.lazyChildren(recordingItems);
+}
 
-        switch (type) {
-            case 'latest':
-                Dashboard.navigate('list.html?type=Recordings&serverId=' + serverId);
-        }
+function renderLatestRecordings(context, promise) {
+    promise.then(function (result) {
+        renderRecordings(context.querySelector('#latestRecordings'), result.Items, {
+            showYear: true,
+            lines: 2
+        }, false);
+        loading.hide();
+    });
+}
+
+function renderRecordingFolders(context, promise) {
+    promise.then(function (result) {
+        renderRecordings(context.querySelector('#recordingFolders'), result.Items, {
+            showYear: false,
+            showParentTitle: false
+        }, false);
+    });
+}
+
+function onMoreClick(e) {
+    const type = this.getAttribute('data-type');
+    const serverId = ApiClient.serverId();
+
+    switch (type) {
+        case 'latest':
+            Dashboard.navigate('list.html?type=Recordings&serverId=' + serverId);
+    }
+}
+
+export default function (view, params, tabContent) {
+    function enableFullRender() {
+        return new Date().getTime() - lastFullRender > 300000;
     }
 
-    return function (view, params, tabContent) {
-        function enableFullRender() {
-            return new Date().getTime() - lastFullRender > 300000;
+    let foldersPromise;
+    let latestPromise;
+    const self = this;
+    let lastFullRender = 0;
+    const moreButtons = tabContent.querySelectorAll('.more');
+
+    for (let i = 0, length = moreButtons.length; i < length; i++) {
+        moreButtons[i].addEventListener('click', onMoreClick);
+    }
+
+    self.preRender = function () {
+        if (enableFullRender()) {
+            latestPromise = ApiClient.getLiveTvRecordings({
+                UserId: Dashboard.getCurrentUserId(),
+                Limit: 12,
+                Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
+                EnableTotalRecordCount: false,
+                EnableImageTypes: 'Primary,Thumb,Backdrop'
+            });
+            foldersPromise = ApiClient.getRecordingFolders(Dashboard.getCurrentUserId());
         }
-
-        var foldersPromise;
-        var latestPromise;
-        var self = this;
-        var lastFullRender = 0;
-        var moreButtons = tabContent.querySelectorAll('.more');
-
-        for (var i = 0, length = moreButtons.length; i < length; i++) {
-            moreButtons[i].addEventListener('click', onMoreClick);
-        }
-
-        self.preRender = function () {
-            if (enableFullRender()) {
-                latestPromise = ApiClient.getLiveTvRecordings({
-                    UserId: Dashboard.getCurrentUserId(),
-                    Limit: 12,
-                    Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
-                    EnableTotalRecordCount: false,
-                    EnableImageTypes: 'Primary,Thumb,Backdrop'
-                });
-                foldersPromise = ApiClient.getRecordingFolders(Dashboard.getCurrentUserId());
-            }
-        };
-
-        self.renderTab = function () {
-            if (enableFullRender()) {
-                loading.show();
-                renderLatestRecordings(tabContent, latestPromise);
-                renderRecordingFolders(tabContent, foldersPromise);
-                lastFullRender = new Date().getTime();
-            }
-        };
     };
-});
+
+    self.renderTab = function () {
+        if (enableFullRender()) {
+            loading.show();
+            renderLatestRecordings(tabContent, latestPromise);
+            renderRecordingFolders(tabContent, foldersPromise);
+            lastFullRender = new Date().getTime();
+        }
+    };
+}

src/controllers/livetv/livetvschedule.js

@@ -1,123 +1,124 @@
-define(['layoutManager', 'cardBuilder', 'apphost', 'imageLoader', 'loading', 'scripts/livetvcomponents', 'emby-button', 'emby-itemscontainer'], function (layoutManager, cardBuilder, appHost, imageLoader, loading) {
-    'use strict';
+import layoutManager from 'layoutManager';
+import cardBuilder from 'cardBuilder';
+import imageLoader from 'imageLoader';
+import loading from 'loading';
+import 'scripts/livetvcomponents';
+import 'emby-button';
+import 'emby-itemscontainer';
 
-    function enableScrollX() {
-        return !layoutManager.desktop;
+function enableScrollX() {
+    return !layoutManager.desktop;
+}
+
+function renderRecordings(elem, recordings, cardOptions) {
+    if (recordings.length) {
+        elem.classList.remove('hide');
+    } else {
+        elem.classList.add('hide');
     }
 
-    function renderRecordings(elem, recordings, cardOptions) {
-        if (recordings.length) {
+    const recordingItems = elem.querySelector('.recordingItems');
+
+    if (enableScrollX()) {
+        recordingItems.classList.add('scrollX');
+
+        if (layoutManager.tv) {
+            recordingItems.classList.add('smoothScrollX');
+        }
+
+        recordingItems.classList.add('hiddenScrollX');
+        recordingItems.classList.remove('vertical-wrap');
+    } else {
+        recordingItems.classList.remove('scrollX');
+        recordingItems.classList.remove('smoothScrollX');
+        recordingItems.classList.remove('hiddenScrollX');
+        recordingItems.classList.add('vertical-wrap');
+    }
+
+    recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({
+        items: recordings,
+        shape: enableScrollX() ? 'autooverflow' : 'auto',
+        showTitle: true,
+        showParentTitle: true,
+        coverImage: true,
+        cardLayout: false,
+        centerText: true,
+        allowBottomPadding: !enableScrollX(),
+        preferThumb: 'auto'
+    }, cardOptions || {}));
+    imageLoader.lazyChildren(recordingItems);
+}
+
+function getBackdropShape() {
+    return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
+}
+
+function renderActiveRecordings(context, promise) {
+    promise.then(function (result) {
+        renderRecordings(context.querySelector('#activeRecordings'), result.Items, {
+            shape: enableScrollX() ? 'autooverflow' : 'auto',
+            defaultShape: getBackdropShape(),
+            showParentTitle: false,
+            showParentTitleOrTitle: true,
+            showTitle: false,
+            showAirTime: true,
+            showAirEndTime: true,
+            showChannelName: true,
+            coverImage: true,
+            overlayText: false,
+            overlayMoreButton: true
+        });
+    });
+}
+
+function renderTimers(context, timers, options) {
+    LiveTvHelpers.getTimersHtml(timers, options).then(function (html) {
+        const elem = context;
+
+        if (html) {
             elem.classList.remove('hide');
         } else {
             elem.classList.add('hide');
         }
 
-        var recordingItems = elem.querySelector('.recordingItems');
+        elem.querySelector('.recordingItems').innerHTML = html;
+        imageLoader.lazyChildren(elem);
+    });
+}
 
-        if (enableScrollX()) {
-            recordingItems.classList.add('scrollX');
+function renderUpcomingRecordings(context, promise) {
+    promise.then(function (result) {
+        renderTimers(context.querySelector('#upcomingRecordings'), result.Items);
+        loading.hide();
+    });
+}
 
-            if (layoutManager.tv) {
-                recordingItems.classList.add('smoothScrollX');
-            }
+export default function (view, params, tabContent) {
+    let activeRecordingsPromise;
+    let upcomingRecordingsPromise;
+    const self = this;
+    tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () {
+        self.preRender();
+        self.renderTab();
+    });
 
-            recordingItems.classList.add('hiddenScrollX');
-            recordingItems.classList.remove('vertical-wrap');
-        } else {
-            recordingItems.classList.remove('scrollX');
-            recordingItems.classList.remove('smoothScrollX');
-            recordingItems.classList.remove('hiddenScrollX');
-            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,
-            allowBottomPadding: !enableScrollX(),
-            preferThumb: 'auto'
-        }, cardOptions || {}));
-        imageLoader.lazyChildren(recordingItems);
-    }
-
-    function getBackdropShape() {
-        return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
-    }
-
-    function renderActiveRecordings(context, promise) {
-        promise.then(function (result) {
-            renderRecordings(context.querySelector('#activeRecordings'), result.Items, {
-                shape: enableScrollX() ? 'autooverflow' : 'auto',
-                defaultShape: getBackdropShape(),
-                showParentTitle: false,
-                showParentTitleOrTitle: true,
-                showTitle: false,
-                showAirTime: true,
-                showAirEndTime: true,
-                showChannelName: true,
-                coverImage: true,
-                overlayText: false,
-                overlayMoreButton: true
-            });
+    self.preRender = function () {
+        activeRecordingsPromise = ApiClient.getLiveTvRecordings({
+            UserId: Dashboard.getCurrentUserId(),
+            IsInProgress: true,
+            Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
+            EnableTotalRecordCount: false,
+            EnableImageTypes: 'Primary,Thumb,Backdrop'
         });
-    }
-
-    function renderTimers(context, timers, options) {
-        LiveTvHelpers.getTimersHtml(timers, options).then(function (html) {
-            var elem = context;
-
-            if (html) {
-                elem.classList.remove('hide');
-            } else {
-                elem.classList.add('hide');
-            }
-
-            elem.querySelector('.recordingItems').innerHTML = html;
-            imageLoader.lazyChildren(elem);
+        upcomingRecordingsPromise = ApiClient.getLiveTvTimers({
+            IsActive: false,
+            IsScheduled: true
         });
-    }
-
-    function renderUpcomingRecordings(context, promise) {
-        promise.then(function (result) {
-            renderTimers(context.querySelector('#upcomingRecordings'), result.Items);
-            loading.hide();
-        });
-    }
-
-    return function (view, params, tabContent) {
-        var activeRecordingsPromise;
-        var upcomingRecordingsPromise;
-        var self = this;
-        tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () {
-            self.preRender();
-            self.renderTab();
-        });
-
-        self.preRender = function () {
-            activeRecordingsPromise = ApiClient.getLiveTvRecordings({
-                UserId: Dashboard.getCurrentUserId(),
-                IsInProgress: true,
-                Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
-                EnableTotalRecordCount: false,
-                EnableImageTypes: 'Primary,Thumb,Backdrop'
-            });
-            upcomingRecordingsPromise = ApiClient.getLiveTvTimers({
-                IsActive: false,
-                IsScheduled: true
-            });
-        };
-
-        self.renderTab = function () {
-            loading.show();
-            renderActiveRecordings(tabContent, activeRecordingsPromise);
-            renderUpcomingRecordings(tabContent, upcomingRecordingsPromise);
-        };
     };
-});
+
+    self.renderTab = function () {
+        loading.show();
+        renderActiveRecordings(tabContent, activeRecordingsPromise);
+        renderUpcomingRecordings(tabContent, upcomingRecordingsPromise);
+    };
+}

src/controllers/livetv/livetvseriestimers.js

@@ -1,51 +1,52 @@
-define(['datetime', 'cardBuilder', 'imageLoader', 'apphost', 'loading', 'paper-icon-button-light', 'emby-button'], function (datetime, cardBuilder, imageLoader, appHost, loading) {
-    'use strict';
+import cardBuilder from 'cardBuilder';
+import imageLoader from 'imageLoader';
+import loading from 'loading';
+import 'paper-icon-button-light';
+import 'emby-button';
 
-    function renderTimers(context, timers) {
-        var html = '';
-        appHost.supports('imageanalysis');
-        html += cardBuilder.getCardsHtml({
-            items: timers,
-            shape: 'auto',
-            defaultShape: 'portrait',
-            showTitle: true,
-            cardLayout: false,
-            preferThumb: 'auto',
-            coverImage: true,
-            overlayText: false,
-            showSeriesTimerTime: true,
-            showSeriesTimerChannel: true,
-            centerText: true,
-            overlayMoreButton: true,
-            lines: 3
-        });
-        var elem = context.querySelector('#items');
-        elem.innerHTML = html;
-        imageLoader.lazyChildren(elem);
-        loading.hide();
-    }
+function renderTimers(context, timers) {
+    const html = cardBuilder.getCardsHtml({
+        items: timers,
+        shape: 'auto',
+        defaultShape: 'portrait',
+        showTitle: true,
+        cardLayout: false,
+        preferThumb: 'auto',
+        coverImage: true,
+        overlayText: false,
+        showSeriesTimerTime: true,
+        showSeriesTimerChannel: true,
+        centerText: true,
+        overlayMoreButton: true,
+        lines: 3
+    });
+    const elem = context.querySelector('#items');
+    elem.innerHTML = html;
+    imageLoader.lazyChildren(elem);
+    loading.hide();
+}
 
-    function reload(context, promise) {
-        loading.show();
-        promise.then(function (result) {
-            renderTimers(context, result.Items);
-        });
-    }
+function reload(context, promise) {
+    loading.show();
+    promise.then(function (result) {
+        renderTimers(context, result.Items);
+    });
+}
 
-    var query = {
-        SortBy: 'SortName',
-        SortOrder: 'Ascending'
+const query = {
+    SortBy: 'SortName',
+    SortOrder: 'Ascending'
+};
+
+export default function (view, params, tabContent) {
+    let timersPromise;
+    const self = this;
+
+    self.preRender = function () {
+        timersPromise = ApiClient.getLiveTvSeriesTimers(query);
     };
-    return function (view, params, tabContent) {
-        var timersPromise;
-        var self = this;
 
-        self.preRender = function () {
-            timersPromise = ApiClient.getLiveTvSeriesTimers(query);
-        };
-
-        self.renderTab = function () {
-            reload(tabContent, timersPromise);
-        };
+    self.renderTab = function () {
+        reload(tabContent, timersPromise);
     };
-});
+}

src/controllers/livetv/livetvsuggested.js

@@ -1,393 +1,397 @@
-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';
+import layoutManager from 'layoutManager';
+import * as userSettings from 'userSettings';
+import inputManager from 'inputManager';
+import loading from 'loading';
+import globalize from 'globalize';
+import * as mainTabsManager from 'mainTabsManager';
+import cardBuilder from 'cardBuilder';
+import imageLoader from 'imageLoader';
+import 'scrollStyles';
+import 'emby-itemscontainer';
+import 'emby-tabs';
+import 'emby-button';
 
-    function enableScrollX() {
-        return !layoutManager.desktop;
+function enableScrollX() {
+    return !layoutManager.desktop;
+}
+
+function getBackdropShape() {
+    if (enableScrollX()) {
+        return 'overflowBackdrop';
+    }
+    return 'backdrop';
+}
+
+function getPortraitShape() {
+    if (enableScrollX()) {
+        return 'overflowPortrait';
+    }
+    return 'portrait';
+}
+
+function getLimit() {
+    if (enableScrollX()) {
+        return 12;
     }
 
-    function getBackdropShape() {
-        if (enableScrollX()) {
-            return 'overflowBackdrop';
-        }
-        return 'backdrop';
+    return 9;
+}
+
+function loadRecommendedPrograms(page) {
+    loading.show();
+    let limit = getLimit();
+
+    if (enableScrollX()) {
+        limit *= 2;
     }
 
-    function getPortraitShape() {
-        if (enableScrollX()) {
-            return 'overflowPortrait';
-        }
-        return 'portrait';
-    }
+    ApiClient.getLiveTvRecommendedPrograms({
+        userId: Dashboard.getCurrentUserId(),
+        IsAiring: true,
+        limit: limit,
+        ImageTypeLimit: 1,
+        EnableImageTypes: 'Primary,Thumb,Backdrop',
+        EnableTotalRecordCount: false,
+        Fields: 'ChannelInfo,PrimaryImageAspectRatio'
+    }).then(function (result) {
+        renderItems(page, result.Items, 'activeProgramItems', 'play', {
+            showAirDateTime: false,
+            showAirEndTime: true
+        });
+        loading.hide();
 
-    function getLimit() {
-        if (enableScrollX()) {
-            return 12;
-        }
+        import('autoFocuser').then(({default: autoFocuser}) => {
+            autoFocuser.autoFocus(page);
+        });
+    });
+}
 
-        return 9;
-    }
-
-    function loadRecommendedPrograms(page) {
-        loading.show();
-        var limit = getLimit();
-
-        if (enableScrollX()) {
-            limit *= 2;
-        }
-
-        ApiClient.getLiveTvRecommendedPrograms({
+function reload(page, enableFullRender) {
+    if (enableFullRender) {
+        loadRecommendedPrograms(page);
+        ApiClient.getLiveTvPrograms({
             userId: Dashboard.getCurrentUserId(),
-            IsAiring: true,
-            limit: limit,
-            ImageTypeLimit: 1,
-            EnableImageTypes: 'Primary,Thumb,Backdrop',
+            HasAired: false,
+            limit: getLimit(),
+            IsMovie: false,
+            IsSports: false,
+            IsKids: false,
+            IsNews: false,
+            IsSeries: true,
             EnableTotalRecordCount: false,
-            Fields: 'ChannelInfo,PrimaryImageAspectRatio'
+            Fields: 'ChannelInfo,PrimaryImageAspectRatio',
+            EnableImageTypes: 'Primary,Thumb'
         }).then(function (result) {
-            renderItems(page, result.Items, 'activeProgramItems', 'play', {
-                showAirDateTime: false,
-                showAirEndTime: true
+            renderItems(page, result.Items, 'upcomingEpisodeItems');
+        });
+        ApiClient.getLiveTvPrograms({
+            userId: Dashboard.getCurrentUserId(),
+            HasAired: false,
+            limit: getLimit(),
+            IsMovie: true,
+            EnableTotalRecordCount: false,
+            Fields: 'ChannelInfo',
+            EnableImageTypes: 'Primary,Thumb'
+        }).then(function (result) {
+            renderItems(page, result.Items, 'upcomingTvMovieItems', null, {
+                shape: getPortraitShape(),
+                preferThumb: null,
+                showParentTitle: false
             });
-            loading.hide();
-
-            require(['autoFocuser'], function (autoFocuser) {
-                autoFocuser.autoFocus(page);
+        });
+        ApiClient.getLiveTvPrograms({
+            userId: Dashboard.getCurrentUserId(),
+            HasAired: false,
+            limit: getLimit(),
+            IsSports: true,
+            EnableTotalRecordCount: false,
+            Fields: 'ChannelInfo,PrimaryImageAspectRatio',
+            EnableImageTypes: 'Primary,Thumb'
+        }).then(function (result) {
+            renderItems(page, result.Items, 'upcomingSportsItems');
+        });
+        ApiClient.getLiveTvPrograms({
+            userId: Dashboard.getCurrentUserId(),
+            HasAired: false,
+            limit: getLimit(),
+            IsKids: true,
+            EnableTotalRecordCount: false,
+            Fields: 'ChannelInfo,PrimaryImageAspectRatio',
+            EnableImageTypes: 'Primary,Thumb'
+        }).then(function (result) {
+            renderItems(page, result.Items, 'upcomingKidsItems');
+        });
+        ApiClient.getLiveTvPrograms({
+            userId: Dashboard.getCurrentUserId(),
+            HasAired: false,
+            limit: getLimit(),
+            IsNews: true,
+            EnableTotalRecordCount: false,
+            Fields: 'ChannelInfo,PrimaryImageAspectRatio',
+            EnableImageTypes: 'Primary,Thumb'
+        }).then(function (result) {
+            renderItems(page, result.Items, 'upcomingNewsItems', null, {
+                showParentTitleOrTitle: true,
+                showTitle: false,
+                showParentTitle: false
             });
         });
     }
+}
 
-    function reload(page, enableFullRender) {
-        if (enableFullRender) {
-            loadRecommendedPrograms(page);
-            ApiClient.getLiveTvPrograms({
-                userId: Dashboard.getCurrentUserId(),
-                HasAired: false,
-                limit: getLimit(),
-                IsMovie: false,
-                IsSports: false,
-                IsKids: false,
-                IsNews: false,
-                IsSeries: true,
-                EnableTotalRecordCount: false,
-                Fields: 'ChannelInfo,PrimaryImageAspectRatio',
-                EnableImageTypes: 'Primary,Thumb'
-            }).then(function (result) {
-                renderItems(page, result.Items, 'upcomingEpisodeItems');
-            });
-            ApiClient.getLiveTvPrograms({
-                userId: Dashboard.getCurrentUserId(),
-                HasAired: false,
-                limit: getLimit(),
-                IsMovie: true,
-                EnableTotalRecordCount: false,
-                Fields: 'ChannelInfo',
-                EnableImageTypes: 'Primary,Thumb'
-            }).then(function (result) {
-                renderItems(page, result.Items, 'upcomingTvMovieItems', null, {
-                    shape: getPortraitShape(),
-                    preferThumb: null,
-                    showParentTitle: false
-                });
-            });
-            ApiClient.getLiveTvPrograms({
-                userId: Dashboard.getCurrentUserId(),
-                HasAired: false,
-                limit: getLimit(),
-                IsSports: true,
-                EnableTotalRecordCount: false,
-                Fields: 'ChannelInfo,PrimaryImageAspectRatio',
-                EnableImageTypes: 'Primary,Thumb'
-            }).then(function (result) {
-                renderItems(page, result.Items, 'upcomingSportsItems');
-            });
-            ApiClient.getLiveTvPrograms({
-                userId: Dashboard.getCurrentUserId(),
-                HasAired: false,
-                limit: getLimit(),
-                IsKids: true,
-                EnableTotalRecordCount: false,
-                Fields: 'ChannelInfo,PrimaryImageAspectRatio',
-                EnableImageTypes: 'Primary,Thumb'
-            }).then(function (result) {
-                renderItems(page, result.Items, 'upcomingKidsItems');
-            });
-            ApiClient.getLiveTvPrograms({
-                userId: Dashboard.getCurrentUserId(),
-                HasAired: false,
-                limit: getLimit(),
-                IsNews: true,
-                EnableTotalRecordCount: false,
-                Fields: 'ChannelInfo,PrimaryImageAspectRatio',
-                EnableImageTypes: 'Primary,Thumb'
-            }).then(function (result) {
-                renderItems(page, result.Items, 'upcomingNewsItems', null, {
-                    showParentTitleOrTitle: true,
-                    showTitle: false,
-                    showParentTitle: false
-                });
-            });
+function renderItems(page, items, sectionClass, overlayButton, cardOptions) {
+    const html = cardBuilder.getCardsHtml(Object.assign({
+        items: items,
+        preferThumb: 'auto',
+        inheritThumb: false,
+        shape: enableScrollX() ? 'autooverflow' : 'auto',
+        defaultShape: getBackdropShape(),
+        showParentTitle: true,
+        showTitle: true,
+        centerText: true,
+        coverImage: true,
+        overlayText: false,
+        lazy: true,
+        overlayPlayButton: overlayButton === 'play',
+        overlayMoreButton: overlayButton === 'more',
+        overlayInfoButton: overlayButton === 'info',
+        allowBottomPadding: !enableScrollX(),
+        showAirTime: true,
+        showAirDateTime: true
+    }, cardOptions || {}));
+    const elem = page.querySelector('.' + sectionClass);
+    elem.innerHTML = html;
+    imageLoader.lazyChildren(elem);
+}
+
+function getTabs() {
+    return [{
+        name: globalize.translate('Programs')
+    }, {
+        name: globalize.translate('Guide')
+    }, {
+        name: globalize.translate('Channels')
+    }, {
+        name: globalize.translate('Recordings')
+    }, {
+        name: globalize.translate('Schedule')
+    }, {
+        name: globalize.translate('Series')
+    }];
+}
+
+function setScrollClasses(elem, scrollX) {
+    if (scrollX) {
+        elem.classList.add('hiddenScrollX');
+
+        if (layoutManager.tv) {
+            elem.classList.add('smoothScrollX');
         }
+
+        elem.classList.add('scrollX');
+        elem.classList.remove('vertical-wrap');
+    } else {
+        elem.classList.remove('hiddenScrollX');
+        elem.classList.remove('smoothScrollX');
+        elem.classList.remove('scrollX');
+        elem.classList.add('vertical-wrap');
+    }
+}
+
+function getDefaultTabIndex(folderId) {
+    if (userSettings.get('landing-' + folderId) === 'guide') {
+        return 1;
     }
 
-    function renderItems(page, items, sectionClass, overlayButton, cardOptions) {
-        var html = cardBuilder.getCardsHtml(Object.assign({
-            items: items,
-            preferThumb: 'auto',
-            inheritThumb: false,
-            shape: enableScrollX() ? 'autooverflow' : 'auto',
-            defaultShape: getBackdropShape(),
-            showParentTitle: true,
-            showTitle: true,
-            centerText: true,
-            coverImage: true,
-            overlayText: false,
-            lazy: true,
-            overlayPlayButton: 'play' === overlayButton,
-            overlayMoreButton: 'more' === overlayButton,
-            overlayInfoButton: 'info' === overlayButton,
-            allowBottomPadding: !enableScrollX(),
-            showAirTime: true,
-            showAirDateTime: true
-        }, cardOptions || {}));
-        var elem = page.querySelector('.' + sectionClass);
-        elem.innerHTML = html;
-        imageLoader.lazyChildren(elem);
+    return 0;
+}
+
+export default function (view, params) {
+    function enableFullRender() {
+        return new Date().getTime() - lastFullRender > 3e5;
     }
 
-    function getTabs() {
-        return [{
-            name: globalize.translate('Programs')
-        }, {
-            name: globalize.translate('TabGuide')
-        }, {
-            name: globalize.translate('TabChannels')
-        }, {
-            name: globalize.translate('TabRecordings')
-        }, {
-            name: globalize.translate('HeaderSchedule')
-        }, {
-            name: globalize.translate('TabSeries')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
-        }];
+    function onBeforeTabChange(evt) {
+        preLoadTab(view, parseInt(evt.detail.selectedTabIndex));
     }
 
-    function setScrollClasses(elem, scrollX) {
-        if (scrollX) {
-            elem.classList.add('hiddenScrollX');
+    function onTabChange(evt) {
+        const previousTabController = tabControllers[parseInt(evt.detail.previousIndex)];
 
-            if (layoutManager.tv) {
-                elem.classList.add('smoothScrollX');
+        if (previousTabController && previousTabController.onHide) {
+            previousTabController.onHide();
+        }
+
+        loadTab(view, parseInt(evt.detail.selectedTabIndex));
+    }
+
+    function getTabContainers() {
+        return view.querySelectorAll('.pageTabContent');
+    }
+
+    function initTabs() {
+        mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange);
+    }
+
+    function getTabController(page, index, callback) {
+        let depends;
+
+        // TODO int is a little hard to read
+        switch (index) {
+            case 0:
+                depends = 'controllers/livetv/livetvsuggested';
+                break;
+
+            case 1:
+                depends = 'controllers/livetv/livetvguide';
+                break;
+
+            case 2:
+                depends = 'controllers/livetv/livetvchannels';
+                break;
+
+            case 3:
+                depends = 'controllers/livetv/livetvrecordings';
+                break;
+
+            case 4:
+                depends = 'controllers/livetv/livetvschedule';
+                break;
+
+            case 5:
+                depends = 'controllers/livetv/livetvseriestimers';
+                break;
+        }
+
+        import(depends).then(({default: controllerFactory}) => {
+            let tabContent;
+
+            if (index === 0) {
+                tabContent = view.querySelector(`.pageTabContent[data-index="${index}"]`);
+                self.tabContent = tabContent;
             }
 
-            elem.classList.add('scrollX');
-            elem.classList.remove('vertical-wrap');
-        } else {
-            elem.classList.remove('hiddenScrollX');
-            elem.classList.remove('smoothScrollX');
-            elem.classList.remove('scrollX');
-            elem.classList.add('vertical-wrap');
-        }
-    }
+            let controller = tabControllers[index];
 
-    function getDefaultTabIndex(folderId) {
-        if (userSettings.get('landing-' + folderId) === 'guide') {
-            return 1;
-        }
+            if (!controller) {
+                tabContent = view.querySelector(`.pageTabContent[data-index="${index}"]`);
 
-        return 0;
-    }
-
-    return function (view, params) {
-        function enableFullRender() {
-            return new Date().getTime() - lastFullRender > 3e5;
-        }
-
-        function onBeforeTabChange(evt) {
-            preLoadTab(view, parseInt(evt.detail.selectedTabIndex));
-        }
-
-        function onTabChange(evt) {
-            var previousTabController = tabControllers[parseInt(evt.detail.previousIndex)];
-
-            if (previousTabController && previousTabController.onHide) {
-                previousTabController.onHide();
-            }
-
-            loadTab(view, parseInt(evt.detail.selectedTabIndex));
-        }
-
-        function getTabContainers() {
-            return view.querySelectorAll('.pageTabContent');
-        }
-
-        function initTabs() {
-            mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange);
-        }
-
-        function getTabController(page, index, callback) {
-            var depends = [];
-
-            // TODO int is a little hard to read
-            switch (index) {
-                case 0:
-                    break;
-
-                case 1:
-                    depends.push('controllers/livetv/livetvguide');
-                    break;
-
-                case 2:
-                    depends.push('controllers/livetv/livetvchannels');
-                    break;
-
-                case 3:
-                    depends.push('controllers/livetv/livetvrecordings');
-                    break;
-
-                case 4:
-                    depends.push('controllers/livetv/livetvschedule');
-                    break;
-
-                case 5:
-                    depends.push('controllers/livetv/livetvseriestimers');
-                    break;
-
-                case 6:
-                    depends.push('scripts/searchtab');
-            }
-
-            require(depends, function (controllerFactory) {
-                var tabContent;
-
-                if (0 == index) {
-                    tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
-                    self.tabContent = tabContent;
+                if (index === 0) {
+                    controller = self;
+                } else if (index === 6) {
+                    controller = new controllerFactory(view, tabContent, {
+                        collectionType: 'livetv'
+                    });
+                } else {
+                    controller = new controllerFactory(view, params, tabContent);
                 }
 
-                var controller = tabControllers[index];
+                tabControllers[index] = controller;
 
-                if (!controller) {
-                    tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
+                if (controller.initTab) {
+                    controller.initTab();
+                }
+            }
 
-                    if (0 === index) {
-                        controller = self;
-                    } else if (6 === index) {
-                        controller = new controllerFactory(view, tabContent, {
-                            collectionType: 'livetv'
-                        });
-                    } else {
-                        controller = new controllerFactory(view, params, tabContent);
-                    }
+            callback(controller);
+        });
+    }
 
-                    tabControllers[index] = controller;
+    function preLoadTab(page, index) {
+        getTabController(page, index, function (controller) {
+            if (renderedTabs.indexOf(index) === -1 && controller.preRender) {
+                controller.preRender();
+            }
+        });
+    }
 
-                    if (controller.initTab) {
-                        controller.initTab();
-                    }
+    function loadTab(page, index) {
+        currentTabIndex = index;
+        getTabController(page, index, function (controller) {
+            initialTabIndex = null;
+
+            if (renderedTabs.indexOf(index) === -1) {
+                if (index === 1) {
+                    renderedTabs.push(index);
                 }
 
-                callback(controller);
-            });
+                controller.renderTab();
+            } else if (controller.onShow) {
+                controller.onShow();
+            }
+
+            currentTabController = controller;
+        });
+    }
+
+    function onInputCommand(evt) {
+        if (evt.detail.command === 'search') {
+            evt.preventDefault();
+            Dashboard.navigate('search.html?collectionType=livetv');
         }
+    }
 
-        function preLoadTab(page, index) {
-            getTabController(page, index, function (controller) {
-                if (renderedTabs.indexOf(index) === -1 && controller.preRender) {
-                    controller.preRender();
-                }
-            });
+    let isViewRestored;
+    const self = this;
+    let currentTabIndex = parseInt(params.tab || getDefaultTabIndex('livetv'));
+    let initialTabIndex = currentTabIndex;
+    let lastFullRender = 0;
+    [].forEach.call(view.querySelectorAll('.sectionTitleTextButton-programs'), function (link) {
+        const href = link.href;
+
+        if (href) {
+            link.href = href + '&serverId=' + ApiClient.serverId();
         }
+    });
 
-        function loadTab(page, index) {
-            currentTabIndex = index;
-            getTabController(page, index, function (controller) {
-                initialTabIndex = null;
+    self.initTab = function () {
+        const tabContent = view.querySelector('.pageTabContent[data-index="0"]');
+        const containers = tabContent.querySelectorAll('.itemsContainer');
 
-                if (-1 == renderedTabs.indexOf(index)) {
-                    if (1 === index) {
-                        renderedTabs.push(index);
-                    }
-
-                    controller.renderTab();
-                } else if (controller.onShow) {
-                    controller.onShow();
-                }
-
-                currentTabController = controller;
-            });
+        for (let i = 0, length = containers.length; i < length; i++) {
+            setScrollClasses(containers[i], enableScrollX());
         }
-
-        function onInputCommand(evt) {
-            if (evt.detail.command === 'search') {
-                evt.preventDefault();
-                Dashboard.navigate('search.html?collectionType=livetv');
-            }
-        }
-
-        var isViewRestored;
-        var self = this;
-        var currentTabIndex = parseInt(params.tab || getDefaultTabIndex('livetv'));
-        var initialTabIndex = currentTabIndex;
-        var lastFullRender = 0;
-        [].forEach.call(view.querySelectorAll('.sectionTitleTextButton-programs'), function (link) {
-            var href = link.href;
-
-            if (href) {
-                link.href = href + '&serverId=' + ApiClient.serverId();
-            }
-        });
-
-        self.initTab = function () {
-            var tabContent = view.querySelector(".pageTabContent[data-index='0']");
-            var containers = tabContent.querySelectorAll('.itemsContainer');
-
-            for (var i = 0, length = containers.length; i < length; i++) {
-                setScrollClasses(containers[i], enableScrollX());
-            }
-        };
-
-        self.renderTab = function () {
-            var tabContent = view.querySelector(".pageTabContent[data-index='0']");
-
-            if (enableFullRender()) {
-                reload(tabContent, true);
-                lastFullRender = new Date().getTime();
-            } else {
-                reload(tabContent);
-            }
-        };
-
-        var currentTabController;
-        var tabControllers = [];
-        var renderedTabs = [];
-        view.addEventListener('viewbeforeshow', function (evt) {
-            isViewRestored = evt.detail.isRestored;
-            initTabs();
-        });
-        view.addEventListener('viewshow', function (evt) {
-            isViewRestored = evt.detail.isRestored;
-
-            if (!isViewRestored) {
-                mainTabsManager.selectedTabIndex(initialTabIndex);
-            }
-
-            inputManager.on(window, onInputCommand);
-        });
-        view.addEventListener('viewbeforehide', function (e) {
-            if (currentTabController && currentTabController.onHide) {
-                currentTabController.onHide();
-            }
-
-            inputManager.off(window, onInputCommand);
-        });
-        view.addEventListener('viewdestroy', function (evt) {
-            tabControllers.forEach(function (tabController) {
-                if (tabController.destroy) {
-                    tabController.destroy();
-                }
-            });
-        });
     };
-});
+
+    self.renderTab = function () {
+        const tabContent = view.querySelector('.pageTabContent[data-index="0"]');
+
+        if (enableFullRender()) {
+            reload(tabContent, true);
+            lastFullRender = new Date().getTime();
+        } else {
+            reload(tabContent);
+        }
+    };
+
+    let currentTabController;
+    const tabControllers = [];
+    const renderedTabs = [];
+    view.addEventListener('viewbeforeshow', function (evt) {
+        isViewRestored = evt.detail.isRestored;
+        initTabs();
+    });
+    view.addEventListener('viewshow', function (evt) {
+        isViewRestored = evt.detail.isRestored;
+
+        if (!isViewRestored) {
+            mainTabsManager.selectedTabIndex(initialTabIndex);
+        }
+
+        inputManager.on(window, onInputCommand);
+    });
+    view.addEventListener('viewbeforehide', function () {
+        if (currentTabController && currentTabController.onHide) {
+            currentTabController.onHide();
+        }
+
+        inputManager.off(window, onInputCommand);
+    });
+    view.addEventListener('viewdestroy', function () {
+        tabControllers.forEach(function (tabController) {
+            if (tabController.destroy) {
+                tabController.destroy();
+            }
+        });
+    });
+}

src/controllers/livetvguideprovider.html

@@ -0,0 +1,7 @@
+<div id="liveTvGuideProviderPage" data-role="page" class="page type-interior liveTvSettingsPage">
+    <div>
+        <div class="content-primary">
+            <div class="readOnlyContent providerTemplate" style="margin-top: 2em;"></div>
+        </div>
+    </div>
+</div>

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.translateDocument(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.html

@@ -0,0 +1,102 @@
+<div id="liveTvSettingsPage" data-role="page" class="page type-interior liveTvPage">
+    <div>
+        <div class="content-primary">
+            <div class="verticalSection">
+                <div class="sectionTitleContainer flex align-items-center">
+                    <h2 class="sectionTitle">${HeaderDVR}</h2>
+                    <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/live-tv/index.html">${Help}</a>
+                </div>
+            </div>
+
+            <form class="liveTvSettingsForm">
+                <div class="selectContainer">
+                    <select is="emby-select" id="selectGuideDays" label="${LabelNumberOfGuideDays}">
+                        <option value="">${Auto}</option>
+                        <option value="1">1</option>
+                        <option value="2">2</option>
+                        <option value="3">3</option>
+                        <option value="4">4</option>
+                        <option value="5">5</option>
+                        <option value="6">6</option>
+                        <option value="7">7</option>
+                        <option value="8">8</option>
+                        <option value="9">9</option>
+                        <option value="10">10</option>
+                        <option value="11">11</option>
+                        <option value="12">12</option>
+                        <option value="13">13</option>
+                        <option value="14">14</option>
+                    </select>
+                    <div class="fieldDescription">${LabelNumberOfGuideDaysHelp}</div>
+                </div>
+                <div class="inputContainer">
+                    <div style="display: flex; align-items: center;">
+                        <div style="flex-grow:1;">
+                            <input is="emby-input" id="txtRecordingPath" label="${LabelRecordingPath}" autocomplete="off" />
+                        </div>
+                        <button type="button" is="paper-icon-button-light" id="btnSelectRecordingPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
+                    </div>
+                    <div class="fieldDescription">${LabelRecordingPathHelp}</div>
+                </div>
+                <div class="inputContainer">
+                    <div style="display: flex; align-items: center;">
+                        <div style="flex-grow:1;">
+                            <input is="emby-input" id="txtMovieRecordingPath" label="${LabelMovieRecordingPath}" autocomplete="off" />
+                        </div>
+                        <button type="button" is="paper-icon-button-light" id="btnSelectMovieRecordingPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
+                    </div>
+                </div>
+                <div class="inputContainer">
+                    <div style="display: flex; align-items: center;">
+                        <div style="flex-grow:1;">
+                            <input is="emby-input" id="txtSeriesRecordingPath" label="${LabelSeriesRecordingPath}" autocomplete="off" />
+                        </div>
+                        <button type="button" is="paper-icon-button-light" id="btnSelectSeriesRecordingPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
+                    </div>
+                </div>
+                <div class="verticalSection">
+                    <h2 class="sectionTitle">${HeaderDefaultRecordingSettings}</h2>
+                    <div class="inputContainer">
+                        <div style="display: flex; align-items: center;">
+                            <div style="flex-grow: 1;">
+                                <input is="emby-input" type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelStartWhenPossible}" />
+                            </div>
+                            <div class="fieldDescription" style="margin-left:.5em;font-size:90%;margin-top:1.3em;">
+                                ${MinutesBefore}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="inputContainer">
+                        <div style="display: flex; align-items: center;">
+                            <div style="flex-grow: 1;">
+                                <input is="emby-input" type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelStopWhenPossible}" />
+                            </div>
+                            <div class="fieldDescription" style="margin-left:.5em;font-size:90%;margin-top:1.3em;">
+                                ${MinutesAfter}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="verticalSection">
+                    <h2 class="sectionTitle">${HeaderRecordingPostProcessing}</h2>
+                    <div class="inputContainer">
+                        <div style="display: flex; align-items: center;">
+                            <div style="flex-grow:1;">
+                                <input is="emby-input" type="text" id="txtPostProcessor" label="${LabelPostProcessor}" />
+                            </div>
+                            <button type="button" is="paper-icon-button-light" id="btnSelectPostProcessorPath" class="emby-input-iconbutton"><span class="material-icons search"></span></button>
+                        </div>
+                    </div>
+                    <div class="inputContainer">
+                        <input is="emby-input" type="text" id="txtPostProcessorArguments" label="${LabelPostProcessorArguments}" />
+                        <div class="fieldDescription">${LabelPostProcessorArgumentsHelp}</div>
+                    </div>
+                </div>
+                <br />
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

src/controllers/livetvsettings.js

@@ -1,65 +1,68 @@
-define(['jQuery', 'loading', 'globalize', 'fnchecked', '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();
+            import('directorybrowser').then(({default: directoryBrowser}) => {
+                const picker = new directoryBrowser();
                 picker.show({
                     callback: function (path) {
                         if (path) {
@@ -73,8 +76,8 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-button'], function
             });
         });
         $('#btnSelectMovieRecordingPath', page).on('click.selectDirectory', function () {
-            require(['directorybrowser'], function (directoryBrowser) {
-                var picker = new directoryBrowser();
+            import('directorybrowser').then(({default: directoryBrowser}) => {
+                const picker = new directoryBrowser();
                 picker.show({
                     callback: function (path) {
                         if (path) {
@@ -88,8 +91,8 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-button'], function
             });
         });
         $('#btnSelectSeriesRecordingPath', page).on('click.selectDirectory', function () {
-            require(['directorybrowser'], function (directoryBrowser) {
-                var picker = new directoryBrowser();
+            import('directorybrowser').then(({default: directoryBrowser}) => {
+                const picker = new directoryBrowser();
                 picker.show({
                     callback: function (path) {
                         if (path) {
@@ -103,8 +106,8 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-button'], function
             });
         });
         $('#btnSelectPostProcessorPath', page).on('click.selectDirectory', function () {
-            require(['directorybrowser'], function (directoryBrowser) {
-                var picker = new directoryBrowser();
+            import('directorybrowser').then(({default: directoryBrowser}) => {
+                const picker = new directoryBrowser();
                 picker.show({
                     includeFiles: true,
                     callback: function (path) {
@@ -119,9 +122,9 @@ define(['jQuery', 'loading', 'globalize', 'fnchecked', 'emby-button'], function
         });
     }).on('pageshow', '#liveTvSettingsPage', function () {
         loading.show();
-        var page = this;
+        const page = this;
         ApiClient.getNamedConfiguration('livetv').then(function (config) {
             loadPage(page, config);
         });
     });
-});
+}

src/controllers/livetvstatus.html

@@ -0,0 +1,41 @@
+<div id="liveTvStatusPage" data-role="page" class="page type-interior liveTvSettingsPage">
+    <div>
+        <div class="content-primary">
+            <div class="verticalSection verticalSection-extrabottompadding">
+                <div class="verticalSection verticalSection-extrabottompadding">
+                    <div class="sectionTitleContainer sectionTitleContainer-cards">
+                        <h2 class="sectionTitle sectionTitle-cards">
+                            <span>${HeaderTunerDevices}</span>
+                        </h2>
+                        <button is="emby-button" type="button" class="fab btnAddDevice submit sectionTitleButton" style="margin-left:1em;" title="${Add}">
+                            <span class="material-icons add"></span>
+                        </button>
+                        <a is="emby-linkbutton" rel="noopener noreferrer" style="margin-left:2em!important;" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/live-tv/index.html">${Help}</a>
+                    </div>
+                    <div class="devicesList itemsContainer vertical-wrap" data-hovermenu="false" data-multiselect="false" style="margin-top: .5em;"></div>
+                </div>
+            </div>
+
+            <div class="readOnlyContent">
+                <div class="verticalSection">
+                    <div class="sectionTitleContainer">
+                        <h2 class="sectionTitle">${HeaderGuideProviders}</h2>
+                        <button is="emby-button" type="button" class="fab btnAddProvider submit" style="margin-left:1em;" title="${Add}">
+                            <span class="material-icons add"></span>
+                        </button>
+                    </div>
+
+                    <div class="providerList">
+                    </div>
+
+                    <div>
+                        <button is="emby-button" type="button" class="raised btnRefresh block button-cancel">
+                            <span>${ButtonRefreshGuideData}</span>
+                        </button>
+                        <progress max="100" min="0" style="width: 100%;" class="refreshGuideProgress"></progress>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/controllers/livetvstatus.js

@@ -1,294 +1,303 @@
-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) {
+    const padderClass = 'cardPadder-backdrop';
+    let cssClass = 'card scalableCard backdropCard backdropCard-scalable';
+    const cardBoxCssClass = 'cardBox visualCardBox';
+    let html = '';
 
-        // 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(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('Delete'),
+        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({
-                serverId: ApiClient.serverInfo().Id,
-                providerId: providerId
-            }).show();
-        });
-    }
-
-    function deleteProvider(page, id) {
-        var message = globalize.translate('MessageConfirmDeleteGuideProvider');
-
-        require(['confirm'], function (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) {
-        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('Delete'),
+        id: 'delete'
+    });
+    items.push({
+        name: globalize.translate('Edit'),
+        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,7 +310,7 @@ 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({
             mode: 'on',
@@ -310,7 +319,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
             button: page.querySelector('.btnRefresh')
         });
     }).on('pagehide', '#liveTvStatusPage', function () {
-        var page = this;
+        const page = this;
         taskButton({
             mode: 'off',
             progressElem: page.querySelector('.refreshGuideProgress'),
@@ -318,4 +327,4 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo
             button: page.querySelector('.btnRefresh')
         });
     });
-});
+}

src/controllers/livetvtuner.html

@@ -0,0 +1,79 @@
+<div id="liveTvTunerPage" data-role="page" class="page type-interior liveTvSettingsPage">
+    <div>
+        <div class="content-primary">
+            <form>
+                <div class="verticalSection">
+                    <div class="sectionTitleContainer flex align-items-center">
+                        <h1 class="sectionTitle">${HeaderLiveTvTunerSetup}</h1>
+                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/live-tv/index.html">${Help}</a>
+                    </div>
+                </div>
+
+                <div class="selectContainer">
+                    <select is="emby-select" class="selectType" label="${LabelTunerType}" required="required"></select>
+                </div>
+
+                <button is="emby-button" type="button" class="raised button-cancel block btnDetect hide" style="margin-bottom:3em;">${HeaderDetectMyDevices}</button>
+
+                <div class="inputContainer fldFriendlyName hide">
+                    <input is="emby-input" type="text" class="txtFriendlyName" label="${LabelFriendlyName}" autocomplete="off" />
+                </div>
+
+                <div class="inputContainer fldPath hide">
+                    <div style="display: flex; align-items: center;">
+                        <div style="flex-grow: 1;">
+                            <input is="emby-input" type="text" class="txtDevicePath" label="${LabelFileOrUrl}" required="required" autocomplete="off" />
+                        </div>
+                        <button type="button" is="paper-icon-button-light" class="btnSelectPath hide emby-input-iconbutton"><span class="material-icons search"></span></button>
+                    </div>
+                </div>
+
+                <div class="inputContainer fldUserAgent hide">
+                    <input is="emby-input" type="text" class="txtUserAgent" label="${LabelUserAgent}" autocomplete="off" />
+                    <div class="fieldDescription">${UserAgentHelp}</div>
+                </div>
+
+                <div class="inputContainer fldTunerCount hide">
+                    <input is="emby-input" type="number" pattern="[0-9]*" required="required" min="0" step="1" class="txtTunerCount" label="${LabelSimultaneousConnectionLimit}" autocomplete="off" value="0" />
+                    <div class="fieldDescription">${SimultaneousConnectionLimitHelp}</div>
+                </div>
+
+                <div class="checkboxContainer checkboxContainer-withDescription fldFavorites hide">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkFavorite" />
+                        <span>${LabelImportOnlyFavoriteChannels}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${ImportFavoriteChannelsHelp}</div>
+                </div>
+
+                <div class="checkboxContainer checkboxContainer-withDescription fldTranscode hide">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkTranscode" />
+                        <span>${LabelAllowHWTranscoding}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${AllowHWTranscodingHelp}</div>
+                </div>
+
+                <div class="checkboxContainer checkboxContainer-withDescription fldStreamLoop hide">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" class="chkStreamLoop" />
+                        <span>${EnableStreamLooping}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${EnableStreamLoopingHelp}</div>
+                </div>
+
+                <p class="drmMessage hide">${DrmChannelsNotImported}</p>
+                <br />
+                <input type="hidden" class="fldDeviceId" />
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${Save}</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/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();
-                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,10 +1,18 @@
-define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings, globalize) {
-    'use strict';
+import loading from 'loading';
+import libraryBrowser from 'libraryBrowser';
+import imageLoader from 'imageLoader';
+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 getPageData(context) {
-            var key = getSavedQueryKey(context);
-            var pageData = data[key];
+            const key = getSavedQueryKey(context);
+            let pageData = data[key];
 
             if (!pageData) {
                 pageData = data[key] = {
@@ -44,11 +52,11 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
             return context.savedQueryKey;
         }
 
-        function onViewStyleChange() {
-            var viewStyle = self.getCurrentViewStyle();
-            var itemsContainer = tabContent.querySelector('.itemsContainer');
+        const onViewStyleChange = () => {
+            const viewStyle = this.getCurrentViewStyle();
+            const itemsContainer = tabContent.querySelector('.itemsContainer');
 
-            if ('List' == viewStyle) {
+            if (viewStyle == 'List') {
                 itemsContainer.classList.add('vertical-list');
                 itemsContainer.classList.remove('vertical-wrap');
             } else {
@@ -57,13 +65,13 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
             }
 
             itemsContainer.innerHTML = '';
-        }
+        };
 
-        function reloadItems(page) {
+        const reloadItems = (page) => {
             loading.show();
             isLoading = true;
-            var query = getQuery(page);
-            ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
+            const query = getQuery(page);
+            ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
                 function onNextPageClick() {
                     if (isLoading) {
                         return;
@@ -87,8 +95,8 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
                 }
 
                 window.scrollTo(0, 0);
-                var html;
-                var pagingHtml = libraryBrowser.getQueryPagingHtml({
+                let html;
+                const pagingHtml = libraryBrowser.getQueryPagingHtml({
                     startIndex: query.StartIndex,
                     limit: query.Limit,
                     totalRecordCount: result.TotalRecordCount,
@@ -98,7 +106,7 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
                     sortButton: false,
                     filterButton: false
                 });
-                var viewStyle = self.getCurrentViewStyle();
+                const viewStyle = this.getCurrentViewStyle();
                 if (viewStyle == 'Thumb') {
                     html = cardBuilder.getCardsHtml({
                         items: result.Items,
@@ -152,54 +160,57 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
                         showTitle: true
                     });
                 }
-                var i;
-                var length;
-                var elems = tabContent.querySelectorAll('.paging');
 
-                for (i = 0, length = elems.length; i < length; i++) {
-                    elems[i].innerHTML = pagingHtml;
+                let elems = tabContent.querySelectorAll('.paging');
+
+                for (const elem of elems) {
+                    elem.innerHTML = pagingHtml;
                 }
 
                 elems = tabContent.querySelectorAll('.btnNextPage');
-                for (i = 0, length = elems.length; i < length; i++) {
-                    elems[i].addEventListener('click', onNextPageClick);
+                for (const elem of elems) {
+                    elem.addEventListener('click', onNextPageClick);
                 }
 
                 elems = tabContent.querySelectorAll('.btnPreviousPage');
-                for (i = 0, length = elems.length; i < length; i++) {
-                    elems[i].addEventListener('click', onPreviousPageClick);
+                for (const elem of elems) {
+                    elem.addEventListener('click', onPreviousPageClick);
                 }
 
                 if (!result.Items.length) {
-                    html = '<p style="text-align:center;">' + globalize.translate('MessageNoCollectionsAvailable') + '</p>';
+                    html = '';
+
+                    html += '<div class="noItemsMessage centerMessage">';
+                    html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
+                    html += '<p>' + globalize.translate('MessageNoCollectionsAvailable') + '</p>';
+                    html += '</div>';
                 }
 
-                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 data = {};
+        let isLoading = false;
 
-        self.getCurrentViewStyle = function () {
+        this.getCurrentViewStyle = function () {
             return getPageData(tabContent).view;
         };
 
-        function initPage(tabContent) {
+        const initPage = (tabContent) => {
             tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
                 libraryBrowser.showSortMenu({
                     items: [{
-                        name: globalize.translate('OptionNameSort'),
+                        name: globalize.translate('Name'),
                         id: 'SortName'
                     }, {
                         name: globalize.translate('OptionImdbRating'),
@@ -222,36 +233,37 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
                     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,Thumb,ThumbCard'.split(','));
+                libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.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;
                 onViewStyleChange();
                 reloadItems(tabContent);
             });
-            tabContent.querySelector('.btnNewCollection').addEventListener('click', function () {
-                require(['collectionEditor'], function (collectionEditor) {
-                    var serverId = ApiClient.serverInfo().Id;
-                    new collectionEditor().show({
+            tabContent.querySelector('.btnNewCollection').addEventListener('click', () => {
+                import('collectionEditor').then(({default: collectionEditor}) => {
+                    const serverId = ApiClient.serverInfo().Id;
+                    new collectionEditor.showEditor({
                         items: [],
                         serverId: serverId
                     });
                 });
             });
-        }
+        };
 
         initPage(tabContent);
         onViewStyleChange();
 
-        self.renderTab = function () {
+        this.renderTab = function () {
             reloadItems(tabContent);
         };
 
-        self.destroy = function () {};
-    };
-});
+        this.destroy = function () {};
+    }
+
+/* eslint-enable indent */

src/controllers/movies/moviegenres.js

@@ -1,10 +1,18 @@
-define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost', 'globalize', 'appRouter', 'dom', 'emby-button'], function (layoutManager, loading, libraryBrowser, cardBuilder, lazyLoader, appHost, globalize, appRouter, dom) {
-    'use strict';
+import layoutManager from 'layoutManager';
+import loading from 'loading';
+import libraryBrowser from 'libraryBrowser';
+import cardBuilder from 'cardBuilder';
+import lazyLoader from 'lazyLoader';
+import globalize from 'globalize';
+import appRouter from 'appRouter';
+import 'emby-button';
 
-    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,7 +42,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
 
         function getPromise() {
             loading.show();
-            var query = getQuery();
+            const query = getQuery();
             return ApiClient.getGenres(ApiClient.getCurrentUserId(), query);
         }
 
@@ -50,18 +58,18 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
             return enableScrollX() ? 'overflowPortrait' : 'portrait';
         }
 
-        function fillItemsContainer(entry) {
-            var elem = entry.target;
-            var id = elem.getAttribute('data-id');
-            var viewStyle = self.getCurrentViewStyle();
-            var limit = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 5 : 9;
+        const fillItemsContainer = (entry) => {
+            const elem = entry.target;
+            const id = elem.getAttribute('data-id');
+            const viewStyle = this.getCurrentViewStyle();
+            let limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9;
 
             if (enableScrollX()) {
                 limit = 10;
             }
 
-            var enableImageTypes = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 'Primary,Backdrop,Thumb' : 'Primary';
-            var query = {
+            const enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary';
+            const query = {
                 SortBy: 'SortName',
                 SortOrder: 'Ascending',
                 IncludeItemTypes: 'Movie',
@@ -75,8 +83,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,
@@ -125,17 +131,17 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
                     tabContent.querySelector('.btnMoreFromGenre' + id + ' .material-icons').classList.remove('hide');
                 }
             });
-        }
+        };
 
         function reloadItems(context, promise) {
-            var query = getQuery();
+            const query = getQuery();
             promise.then(function (result) {
-                var elem = context.querySelector('#items');
-                var html = '';
-                var items = result.Items;
+                const elem = context.querySelector('#items');
+                let html = '';
+                const items = result.Items;
 
-                for (var i = 0, length = items.length; i < length; i++) {
-                    var item = items[i];
+                for (let i = 0, length = items.length; i < length; i++) {
+                    const item = items[i];
 
                     html += '<div class="verticalSection">';
                     html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
@@ -150,7 +156,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
                     html += '</a>';
                     html += '</div>';
                     if (enableScrollX()) {
-                        var scrollXClass = 'scrollX hiddenScrollX';
+                        let scrollXClass = 'scrollX hiddenScrollX';
 
                         if (layoutManager.tv) {
                             scrollXClass += 'smoothScrollX padded-top-focusscale padded-bottom-focusscale';
@@ -165,6 +171,15 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
                     html += '</div>';
                 }
 
+                if (!result.Items.length) {
+                    html = '';
+
+                    html += '<div class="noItemsMessage centerMessage">';
+                    html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
+                    html += '<p>' + globalize.translate('MessageNoGenresAvailable') + '</p>';
+                    html += '</div>';
+                }
+
                 elem.innerHTML = html;
                 lazyLoader.lazyChildren(elem, fillItemsContainer);
                 libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
@@ -172,37 +187,37 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
             });
         }
 
-        function fullyReload() {
-            self.preRender();
-            self.renderTab();
-        }
+        const fullyReload = () => {
+            this.preRender();
+            this.renderTab();
+        };
 
-        var self = this;
-        var data = {};
+        const data = {};
 
-        self.getViewStyles = function () {
+        this.getViewStyles = function () {
             return 'Poster,PosterCard,Thumb,ThumbCard'.split(',');
         };
 
-        self.getCurrentViewStyle = function () {
+        this.getCurrentViewStyle = function () {
             return getPageData().view;
         };
 
-        self.setCurrentViewStyle = function (viewStyle) {
+        this.setCurrentViewStyle = function (viewStyle) {
             getPageData().view = viewStyle;
             libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle);
             fullyReload();
         };
 
-        self.enableViewSelection = true;
-        var promise;
+        this.enableViewSelection = true;
+        let promise;
 
-        self.preRender = function () {
+        this.preRender = function () {
             promise = getPromise();
         };
 
-        self.renderTab = function () {
+        this.renderTab = function () {
             reloadItems(tabContent, promise);
         };
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/movies/movies.html

@@ -0,0 +1,93 @@
+<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs" data-backdroptype="movie">
+
+    <div class="pageTabContent" data-index="0">
+        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
+            <div class="paging"></div>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list"></span></button>
+        </div>
+
+        <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
+        </div>
+
+        <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
+        </div>
+        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
+            <div class="paging"></div>
+        </div>
+    </div>
+    <div class="pageTabContent" data-index="1">
+        <div id="resumableSection" class="verticalSection hide">
+            <div class="sectionTitleContainer sectionTitleContainer-cards">
+                <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderContinueWatching}</h2>
+            </div>
+
+            <div is="emby-itemscontainer" id="resumableItems" class="itemsContainer padded-left padded-right">
+            </div>
+        </div>
+
+        <div class="verticalSection">
+            <div class="sectionTitleContainer sectionTitleContainer-cards">
+                <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderLatestMovies}</h2>
+            </div>
+
+            <div is="emby-itemscontainer" id="recentlyAddedItems" class="itemsContainer padded-left padded-right">
+            </div>
+        </div>
+
+        <div class="recommendations">
+        </div>
+        <div class="noItemsMessage hide padded-left padded-right">
+            <br />
+            <p>${MessageNoMovieSuggestionsAvailable}</p>
+        </div>
+    </div>
+    <div class="pageTabContent" data-index="2">
+        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
+            <div class="paging"></div>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button>
+            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list"></span></button>
+        </div>
+
+        <div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical">
+        </div>
+
+        <div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">
+        </div>
+        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
+            <div class="paging"></div>
+        </div>
+    </div>
+    <div class="pageTabContent" data-index="3">
+        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
+            <div class="paging"></div>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
+        </div>
+
+        <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
+        </div>
+        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
+            <div class="paging"></div>
+        </div>
+    </div>
+    <div class="pageTabContent" data-index="4">
+        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
+            <div class="paging"></div>
+            <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy"></span></button>
+            <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha"></span></button>
+            <button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize"><span class="material-icons add"></span></button>
+        </div>
+
+        <div is="emby-itemscontainer" class="itemsContainer vertical-wrap centered padded-left padded-right" style="text-align:center;">
+        </div>
+        <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
+            <div class="paging"></div>
+        </div>
+    </div>
+    <div class="pageTabContent" data-index="5">
+        <div id="items"></div>
+    </div>
+    <div class="pageTabContent" data-index="6">
+    </div>
+</div>

src/controllers/movies/movies.js

@@ -1,9 +1,18 @@
-define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, alphaPicker, listView, cardBuilder, globalize) {
-    'use strict';
+import loading from 'loading';
+import * as userSettings from 'userSettings';
+import events from 'events';
+import libraryBrowser from 'libraryBrowser';
+import AlphaPicker from 'alphaPicker';
+import listView from 'listView';
+import cardBuilder from 'cardBuilder';
+import globalize from 'globalize';
+import 'emby-itemscontainer';
 
-    return function (view, params, tabContent, options) {
-        function onViewStyleChange() {
-            if (self.getCurrentViewStyle() == 'List') {
+/* eslint-disable indent */
+
+    export default function (view, params, tabContent, options) {
+        const onViewStyleChange = () => {
+            if (this.getCurrentViewStyle() == 'List') {
                 itemsContainer.classList.add('vertical-list');
                 itemsContainer.classList.remove('vertical-wrap');
             } else {
@@ -12,13 +21,13 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
             }
 
             itemsContainer.innerHTML = '';
-        }
+        };
 
-        function updateFilterControls() {
-            if (self.alphaPicker) {
-                self.alphaPicker.value(query.NameStartsWithOrGreater);
+        const updateFilterControls = () => {
+            if (this.alphaPicker) {
+                this.alphaPicker.value(query.NameStartsWithOrGreater);
             }
-        }
+        };
 
         function fetchData() {
             isLoading = true;
@@ -51,7 +60,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
 
             window.scrollTo(0, 0);
             updateFilterControls();
-            var pagingHtml = libraryBrowser.getQueryPagingHtml({
+            const pagingHtml = libraryBrowser.getQueryPagingHtml({
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
@@ -61,35 +70,30 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
                 sortButton: false,
                 filterButton: false
             });
-            var i;
-            var length;
-            var elems = tabContent.querySelectorAll('.paging');
 
-            for (i = 0, length = elems.length; i < length; i++) {
-                elems[i].innerHTML = pagingHtml;
+            for (const elem of tabContent.querySelectorAll('.paging')) {
+                elem.innerHTML = pagingHtml;
             }
 
-            elems = tabContent.querySelectorAll('.btnNextPage');
-            for (i = 0, length = elems.length; i < length; i++) {
-                elems[i].addEventListener('click', onNextPageClick);
+            for (const elem of tabContent.querySelectorAll('.btnNextPage')) {
+                elem.addEventListener('click', onNextPageClick);
             }
 
-            elems = tabContent.querySelectorAll('.btnPreviousPage');
-            for (i = 0, length = elems.length; i < length; i++) {
-                elems[i].addEventListener('click', onPreviousPageClick);
+            for (const elem of tabContent.querySelectorAll('.btnPreviousPage')) {
+                elem.addEventListener('click', onPreviousPageClick);
             }
 
             isLoading = false;
             loading.hide();
 
-            require(['autoFocuser'], function (autoFocuser) {
+            import('autoFocuser').then(({default: autoFocuser}) => {
                 autoFocuser.autoFocus(tabContent);
             });
         }
 
-        function getItemsHtml(items) {
-            var html;
-            var viewStyle = self.getCurrentViewStyle();
+        const getItemsHtml = (items) => {
+            let html;
+            const viewStyle = this.getCurrentViewStyle();
 
             if (viewStyle == 'Thumb') {
                 html = cardBuilder.getCardsHtml({
@@ -153,22 +157,22 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
             }
 
             return html;
-        }
+        };
 
-        function initPage(tabContent) {
+        const initPage = (tabContent) => {
             itemsContainer.fetchData = fetchData;
             itemsContainer.getItemsHtml = getItemsHtml;
             itemsContainer.afterRefresh = afterRefresh;
-            var alphaPickerElement = tabContent.querySelector('.alphaPicker');
+            let alphaPickerElement = tabContent.querySelector('.alphaPicker');
 
             if (alphaPickerElement) {
                 alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
-                    var newValue = e.detail.value;
+                    let newValue = e.detail.value;
                     query.NameStartsWithOrGreater = newValue;
                     query.StartIndex = 0;
                     itemsContainer.refreshItems();
                 });
-                self.alphaPicker = new alphaPicker({
+                this.alphaPicker = new AlphaPicker({
                     element: alphaPickerElement,
                     valueChangeEvent: 'click'
                 });
@@ -178,20 +182,20 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
                 itemsContainer.classList.add('padded-right-withalphapicker');
             }
 
-            var btnFilter = tabContent.querySelector('.btnFilter');
+            const btnFilter = tabContent.querySelector('.btnFilter');
 
             if (btnFilter) {
-                btnFilter.addEventListener('click', function () {
-                    self.showFilterMenu();
+                btnFilter.addEventListener('click', () => {
+                    this.showFilterMenu();
                 });
             }
-            var btnSort = tabContent.querySelector('.btnSort');
+            const btnSort = tabContent.querySelector('.btnSort');
 
             if (btnSort) {
                 btnSort.addEventListener('click', function (e) {
                     libraryBrowser.showSortMenu({
                         items: [{
-                            name: globalize.translate('OptionNameSort'),
+                            name: globalize.translate('Name'),
                             id: 'SortName,ProductionYear'
                         }, {
                             name: globalize.translate('OptionImdbRating'),
@@ -215,7 +219,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
                             name: globalize.translate('OptionReleaseDate'),
                             id: 'PremiereDate,SortName,ProductionYear'
                         }, {
-                            name: globalize.translate('OptionRuntime'),
+                            name: globalize.translate('Runtime'),
                             id: 'Runtime,SortName,ProductionYear'
                         }],
                         callback: function () {
@@ -228,24 +232,23 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
                     });
                 });
             }
-            var btnSelectView = tabContent.querySelector('.btnSelectView');
+            const btnSelectView = tabContent.querySelector('.btnSelectView');
             btnSelectView.addEventListener('click', function (e) {
-                libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
+                libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle, 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
             });
             btnSelectView.addEventListener('layoutchange', function (e) {
-                var viewStyle = e.detail.viewStyle;
+                let viewStyle = e.detail.viewStyle;
                 userSettings.set(savedViewKey, viewStyle);
                 query.StartIndex = 0;
                 onViewStyleChange();
                 itemsContainer.refreshItems();
             });
-        }
+        };
 
-        var self = this;
-        var itemsContainer = tabContent.querySelector('.itemsContainer');
-        var savedQueryKey = params.topParentId + '-' + options.mode;
-        var savedViewKey = savedQueryKey + '-view';
-        var query = {
+        let itemsContainer = tabContent.querySelector('.itemsContainer');
+        const savedQueryKey = params.topParentId + '-' + options.mode;
+        const savedViewKey = savedQueryKey + '-view';
+        let query = {
             SortBy: 'SortName,ProductionYear',
             SortOrder: 'Ascending',
             IncludeItemTypes: 'Movie',
@@ -261,7 +264,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
             query['Limit'] = userSettings.libraryPageSize();
         }
 
-        var isLoading = false;
+        let isLoading = false;
 
         if (options.mode === 'favorites') {
             query.IsFavorite = true;
@@ -269,14 +272,14 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
 
         query = userSettings.loadQuerySettings(savedQueryKey, query);
 
-        self.showFilterMenu = function () {
-            require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
-                var filterDialog = new filterDialogFactory({
+        this.showFilterMenu = function () {
+            import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
+                let filterDialog = new filterDialogFactory({
                     query: query,
                     mode: 'movies',
                     serverId: ApiClient.serverId()
                 });
-                events.on(filterDialog, 'filterchange', function () {
+                events.on(filterDialog, 'filterchange', () => {
                     query.StartIndex = 0;
                     itemsContainer.refreshItems();
                 });
@@ -284,22 +287,23 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
             });
         };
 
-        self.getCurrentViewStyle = function () {
+        this.getCurrentViewStyle = function () {
             return userSettings.get(savedViewKey) || 'Poster';
         };
 
-        self.initTab = function () {
+        this.initTab = function () {
             initPage(tabContent);
             onViewStyleChange();
         };
 
-        self.renderTab = function () {
+        this.renderTab = function () {
             itemsContainer.refreshItems();
             updateFilterControls();
         };
 
-        self.destroy = function () {
+        this.destroy = function () {
             itemsContainer = null;
         };
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/movies/moviesrecommended.js

@@ -1,5 +1,20 @@
-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';
+import events from 'events';
+import layoutManager from 'layoutManager';
+import inputManager from 'inputManager';
+import * as userSettings from 'userSettings';
+import libraryMenu from 'libraryMenu';
+import * as mainTabsManager from 'mainTabsManager';
+import cardBuilder from 'cardBuilder';
+import dom from 'dom';
+import imageLoader from 'imageLoader';
+import playbackManager from 'playbackManager';
+import globalize from 'globalize';
+import 'emby-scroller';
+import 'emby-itemscontainer';
+import 'emby-tabs';
+import 'emby-button';
+
+/* eslint-disable indent */
 
     function enableScrollX() {
         return !layoutManager.desktop;
@@ -14,7 +29,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function loadLatest(page, userId, parentId) {
-        var options = {
+        const options = {
             IncludeItemTypes: 'Movie',
             Limit: 18,
             Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
@@ -24,8 +39,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
             EnableTotalRecordCount: false
         };
         ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
-            var allowBottomPadding = !enableScrollX();
-            var container = page.querySelector('#recentlyAddedItems');
+            const allowBottomPadding = !enableScrollX();
+            const container = page.querySelector('#recentlyAddedItems');
             cardBuilder.buildCards(items, {
                 itemsContainer: container,
                 shape: getPortraitShape(),
@@ -43,8 +58,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function loadResume(page, userId, parentId) {
-        var screenWidth = dom.getWindowSize().innerWidth;
-        var options = {
+        let screenWidth = dom.getWindowSize().innerWidth;
+        const options = {
             SortBy: 'DatePlayed',
             SortOrder: 'Descending',
             IncludeItemTypes: 'Movie',
@@ -65,8 +80,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
                 page.querySelector('#resumableSection').classList.add('hide');
             }
 
-            var allowBottomPadding = !enableScrollX();
-            var container = page.querySelector('#resumableItems');
+            const allowBottomPadding = !enableScrollX();
+            const container = page.querySelector('#resumableItems');
             cardBuilder.buildCards(result.Items, {
                 itemsContainer: container,
                 preferThumb: true,
@@ -86,8 +101,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function getRecommendationHtml(recommendation) {
-        var html = '';
-        var title = '';
+        let html = '';
+        let title = '';
 
         switch (recommendation.RecommendationType) {
             case 'SimilarToRecentlyPlayed':
@@ -111,7 +126,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
 
         html += '<div class="verticalSection">';
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>';
-        var allowBottomPadding = true;
+        const allowBottomPadding = true;
 
         if (enableScrollX()) {
             html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
@@ -139,8 +154,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function loadSuggestions(page, userId, parentId) {
-        var screenWidth = dom.getWindowSize().innerWidth;
-        var url = ApiClient.getUrl('Movies/Recommendations', {
+        let screenWidth = dom.getWindowSize().innerWidth;
+        let url = ApiClient.getUrl('Movies/Recommendations', {
             userId: userId,
             categoryLimit: 6,
             ItemLimit: screenWidth >= 1920 ? 8 : screenWidth >= 1600 ? 8 : screenWidth >= 1200 ? 6 : 5,
@@ -155,9 +170,9 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
                 return;
             }
 
-            var html = recommendations.map(getRecommendationHtml).join('');
+            const html = recommendations.map(getRecommendationHtml).join('');
             page.querySelector('.noItemsMessage').classList.add('hide');
-            var recs = page.querySelector('.recommendations');
+            let recs = page.querySelector('.recommendations');
             recs.innerHTML = html;
             imageLoader.lazyChildren(recs);
 
@@ -167,7 +182,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function autoFocus(page) {
-        require(['autoFocuser'], function (autoFocuser) {
+        import('autoFocuser').then(({default: autoFocuser}) => {
             autoFocuser.autoFocus(page);
         });
     }
@@ -193,17 +208,16 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
     }
 
     function initSuggestedTab(page, tabContent) {
-        var containers = tabContent.querySelectorAll('.itemsContainer');
+        const containers = tabContent.querySelectorAll('.itemsContainer');
 
-        for (var i = 0, length = containers.length; i < length; i++) {
-            setScrollClasses(containers[i], enableScrollX());
+        for (const container of containers) {
+            setScrollClasses(container, enableScrollX());
         }
     }
 
     function loadSuggestionsTab(view, params, tabContent) {
-        var parentId = params.topParentId;
-        var userId = ApiClient.getCurrentUserId();
-        console.debug('loadSuggestionsTab');
+        const parentId = params.topParentId;
+        const userId = ApiClient.getCurrentUserId();
         loadResume(tabContent, userId, parentId);
         loadLatest(tabContent, userId, parentId);
         loadSuggestions(tabContent, userId, parentId);
@@ -213,18 +227,15 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
         return [{
             name: globalize.translate('Movies')
         }, {
-            name: globalize.translate('TabSuggestions')
+            name: globalize.translate('Suggestions')
         }, {
-            name: globalize.translate('TabTrailers')
+            name: globalize.translate('Trailers')
         }, {
-            name: globalize.translate('TabFavorites')
+            name: globalize.translate('Favorites')
         }, {
-            name: globalize.translate('TabCollections')
+            name: globalize.translate('Collections')
         }, {
-            name: globalize.translate('TabGenres')
-        }, {
-            name: globalize.translate('ButtonSearch'),
-            cssClass: 'searchTabButton'
+            name: globalize.translate('Genres')
         }];
     }
 
@@ -247,13 +258,13 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
         }
     }
 
-    return function (view, params) {
+    export default function (view, params) {
         function onBeforeTabChange(e) {
             preLoadTab(view, parseInt(e.detail.selectedTabIndex));
         }
 
         function onTabChange(e) {
-            var newIndex = parseInt(e.detail.selectedTabIndex);
+            const newIndex = parseInt(e.detail.selectedTabIndex);
             loadTab(view, newIndex);
         }
 
@@ -265,52 +276,50 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
             mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange);
         }
 
-        function getTabController(page, index, callback) {
-            var depends = [];
+        const getTabController = (page, index, callback) => {
+            let depends = '';
 
             switch (index) {
                 case 0:
-                    depends.push('controllers/movies/movies');
+                    depends = 'controllers/movies/movies';
                     break;
 
                 case 1:
+                    depends = 'controllers/movies/moviesrecommended.js';
                     break;
 
                 case 2:
-                    depends.push('controllers/movies/movietrailers');
+                    depends = 'controllers/movies/movietrailers';
                     break;
 
                 case 3:
-                    depends.push('controllers/movies/movies');
+                    depends = 'controllers/movies/movies';
                     break;
 
                 case 4:
-                    depends.push('controllers/movies/moviecollections');
+                    depends = 'controllers/movies/moviecollections';
                     break;
 
                 case 5:
-                    depends.push('controllers/movies/moviegenres');
+                    depends = 'controllers/movies/moviegenres';
                     break;
-
-                case 6:
-                    depends.push('scripts/searchtab');
             }
 
-            require(depends, function (controllerFactory) {
-                var tabContent;
+            import(depends).then(({default: controllerFactory}) => {
+                let tabContent;
 
                 if (index === suggestionsTabIndex) {
                     tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
-                    self.tabContent = tabContent;
+                    this.tabContent = tabContent;
                 }
 
-                var controller = tabControllers[index];
+                let controller = tabControllers[index];
 
                 if (!controller) {
                     tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
 
                     if (index === suggestionsTabIndex) {
-                        controller = self;
+                        controller = this;
                     } else if (index === 6) {
                         controller = new controllerFactory(view, tabContent, {
                             collectionType: 'movies',
@@ -333,7 +342,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
 
                 callback(controller);
             });
-        }
+        };
 
         function preLoadTab(page, index) {
             getTabController(page, index, function (controller) {
@@ -345,14 +354,12 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
 
         function loadTab(page, index) {
             currentTabIndex = index;
-            getTabController(page, index, function (controller) {
-                initialTabIndex = null;
-
+            getTabController(page, index, ((controller) => {
                 if (renderedTabs.indexOf(index) == -1) {
                     renderedTabs.push(index);
                     controller.renderTab();
                 }
-            });
+            }));
         }
 
         function onPlaybackStop(e, state) {
@@ -370,26 +377,24 @@ 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;
+        let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId));
+        const suggestionsTabIndex = 1;
 
-        self.initTab = function () {
-            var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
+        this.initTab = function () {
+            let tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
             initSuggestedTab(view, tabContent);
         };
 
-        self.renderTab = function () {
-            var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
+        this.renderTab = function () {
+            let tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']");
             loadSuggestionsTab(view, params, tabContent);
         };
 
-        var tabControllers = [];
-        var renderedTabs = [];
+        let tabControllers = [];
+        let 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) {
@@ -398,23 +403,22 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu'
                         libraryMenu.setTitle(item.Name);
                     });
                 } else {
-                    view.setAttribute('data-title', globalize.translate('TabMovies'));
-                    libraryMenu.setTitle(globalize.translate('TabMovies'));
+                    view.setAttribute('data-title', globalize.translate('Movies'));
+                    libraryMenu.setTitle(globalize.translate('Movies'));
                 }
             }
 
             events.on(playbackManager, 'playbackstop', onPlaybackStop);
             inputManager.on(window, onInputCommand);
         });
-        view.addEventListener('viewbeforehide', function (e) {
+        view.addEventListener('viewbeforehide', function () {
             inputManager.off(window, onInputCommand);
         });
-        view.addEventListener('viewdestroy', function (e) {
-            tabControllers.forEach(function (t) {
-                if (t.destroy) {
-                    t.destroy();
-                }
-            });
-        });
-    };
-});
+        for (const tabController of tabControllers) {
+            if (tabController.destroy) {
+                tabController.destroy();
+            }
+        }
+    }
+
+/* eslint-enable indent */