diff --git a/package.json b/package.json
index 09e7b1e064..5bbd9eb722 100644
--- a/package.json
+++ b/package.json
@@ -134,6 +134,9 @@
           "src/components/syncPlay/playbackPermissionManager.js",
           "src/components/syncPlay/syncPlayManager.js",
           "src/components/syncPlay/timeSyncManager.js",
+          "src/controllers/dashboard/apikeys.js",
+          "src/controllers/dashboard/dashboard.js",
+          "src/controllers/dashboard/encodingsettings.js",
           "src/controllers/dashboard/logs.js",
           "src/controllers/user/subtitles.js",
           "src/controllers/dashboard/plugins/repositories.js",
@@ -144,6 +147,16 @@
           "src/controllers/shows/tvshows.js",
           "src/controllers/shows/tvstudios.js",
           "src/controllers/shows/tvupcoming.js",
+          "src/elements/emby-tabs/emby-tabs.js",
+          "src/elements/emby-scroller/emby-scroller.js",
+          "src/elements/emby-radio/emby-radio.js",
+          "src/elements/emby-progressbar/emby-progressbar.js",
+          "src/elements/emby-progressring/emby-progressring.js",
+          "src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js",
+          "src/elements/emby-slider/emby-slider.js",
+          "src/elements/emby-checkbox/emby-checkbox.js",
+          "src/elements/emby-textarea/emby-textarea.js",
+          "src/elements/emby-toggle/emby-toggle.js",
           "src/plugins/bookPlayer/plugin.js",
           "src/plugins/bookPlayer/tableOfContents.js",
           "src/plugins/photoPlayer/plugin.js",
diff --git a/src/controllers/dashboard/apikeys.js b/src/controllers/dashboard/apikeys.js
index f43bfd0329..0e122c486d 100644
--- a/src/controllers/dashboard/apikeys.js
+++ b/src/controllers/dashboard/apikeys.js
@@ -1,8 +1,14 @@
-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 libraryMenu from 'libraryMenu';
+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 +22,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 +35,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 +52,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 +71,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 +86,5 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
     pageIdOn('pagebeforeshow', 'apiKeysPage', function () {
         loadData(this);
     });
-});
+
+/* eslint-enable indent */
diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js
index 6a378903d3..7aa706840d 100644
--- a/src/controllers/dashboard/dashboard.js
+++ b/src/controllers/dashboard/dashboard.js
@@ -1,11 +1,31 @@
-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 connectionManager from 'connectionManager';
+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;
+            let text = [];
+            const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
 
             if (displayPlayMethod === 'DirectStream') {
                 title = globalize.translate('DirectStreaming');
@@ -33,7 +53,7 @@ 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'),
@@ -50,8 +70,8 @@ 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()) {
                 menuItems.push({
@@ -84,14 +104,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];
 
@@ -113,11 +133,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 +159,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,7 +189,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);
+            let localizedVersion = globalize.translate('DashboardVersionNumber', systemInfo.Version);
 
             if (systemInfo.SystemUpdateLevel !== 'Release') {
                 localizedVersion += ' ' + systemInfo.SystemUpdateLevel;
@@ -205,31 +225,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 +260,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;
@@ -253,7 +273,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
                 html += '</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>';
@@ -261,7 +281,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'
                     });
@@ -273,7 +293,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'
                     });
@@ -290,7 +310,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>';
@@ -308,7 +328,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);
@@ -322,7 +342,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);
@@ -330,7 +350,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
     }
 
     function renderRunningTasks(view, tasks) {
-        var html = '';
+        let html = '';
         tasks = tasks.filter(function (task) {
             if ('Idle' != task.State) {
                 return !task.IsHidden;
@@ -345,13 +365,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>';
@@ -377,9 +397,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');
@@ -396,7 +416,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             }
 
             if (showTranscodingInfo) {
-                var line = [];
+                const line = [];
 
                 if (session.TranscodingInfo) {
                     if (session.TranscodingInfo.Bitrate) {
@@ -428,8 +448,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) {
@@ -453,8 +473,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) {
@@ -464,8 +484,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;
@@ -505,13 +525,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);
             }
 
@@ -529,7 +549,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');
@@ -549,7 +569,7 @@ 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()) {
                 btnSessionPlayPause.classList.remove('hide');
@@ -567,18 +587,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);
-            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'
                 });
@@ -588,10 +608,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'
                 });
@@ -601,8 +621,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 + "')" : '';
@@ -616,7 +636,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) {
@@ -646,7 +666,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, {
@@ -700,20 +720,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'),
                     text: globalize.translate('MessageConfirmRestart'),
                     confirmText: globalize.translate('ButtonRestart'),
                     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();
@@ -721,14 +741,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'),
                     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();
@@ -736,7 +756,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);
         }
@@ -775,11 +795,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();
@@ -816,7 +836,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);
@@ -830,18 +850,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 */
diff --git a/src/controllers/dashboard/encodingsettings.js b/src/controllers/dashboard/encodingsettings.js
index b8cdd66651..aac18360ac 100644
--- a/src/controllers/dashboard/encodingsettings.js
+++ b/src/controllers/dashboard/encodingsettings.js
@@ -1,5 +1,10 @@
-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) {
@@ -27,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);
         });
     }
@@ -49,9 +54,9 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
     }
 
     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();
@@ -75,7 +80,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
                 ApiClient.updateNamedConfiguration('encoding', config).then(function () {
                     updateEncoder(form);
                 }, function () {
-                    require(['alert'], function (alert) {
+                    import('alert').then(({default: alert}) => {
                         alert(globalize.translate('DefaultErrorMessage'));
                     });
 
@@ -85,7 +90,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')
@@ -100,7 +105,7 @@ 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)) {
                 dom.parentWithTag(c, 'LABEL').classList.add('hide');
@@ -131,7 +136,7 @@ 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) {
                 page.querySelector('.fldVaapiDevice').classList.remove('hide');
@@ -150,8 +155,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.default();
+            import('directorybrowser').then(({default: directoryBrowser}) => {
+                const picker = new directoryBrowser();
                 picker.show({
                     includeFiles: true,
                     callback: function (path) {
@@ -165,8 +170,8 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
             });
         });
         $('#btnSelectTranscodingTempPath', page).on('click.selectDirectory', function () {
-            require(['directorybrowser'], function (directoryBrowser) {
-                var picker = new directoryBrowser.default();
+            import('directorybrowser').then(({default: directoryBrowser}) => {
+                const picker = new directoryBrowser();
                 picker.show({
                     callback: function (path) {
                         if (path) {
@@ -185,11 +190,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 */
diff --git a/src/elements/emby-checkbox/emby-checkbox.js b/src/elements/emby-checkbox/emby-checkbox.js
index 4d02d56163..b22ff151af 100644
--- a/src/elements/emby-checkbox/emby-checkbox.js
+++ b/src/elements/emby-checkbox/emby-checkbox.js
@@ -1,7 +1,11 @@
-define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (browser, dom) {
-    'use strict';
+import browser from 'browser';
+import dom from 'dom';
+import 'css!./emby-checkbox';
+import 'registerElement';
 
-    var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype);
+/* eslint-disable indent */
+
+    let EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype);
 
     function onKeyDown(e) {
         // Don't submit form on enter
@@ -19,10 +23,10 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
         }
     }
 
-    var enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false;
+    const enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false;
 
     function forceRefresh(loading) {
-        var elem = this.parentNode;
+        let elem = this.parentNode;
 
         elem.style.webkitAnimationName = 'repaintChrome';
         elem.style.webkitAnimationDelay = (loading === true ? '500ms' : '');
@@ -43,22 +47,22 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
 
         this.classList.add('emby-checkbox');
 
-        var labelElement = this.parentNode;
+        const labelElement = this.parentNode;
         labelElement.classList.add('emby-checkbox-label');
 
-        var labelTextElement = labelElement.querySelector('span');
+        const labelTextElement = labelElement.querySelector('span');
 
-        var outlineClass = 'checkboxOutline';
+        let outlineClass = 'checkboxOutline';
 
-        var customClass = this.getAttribute('data-outlineclass');
+        const customClass = this.getAttribute('data-outlineclass');
         if (customClass) {
             outlineClass += ' ' + customClass;
         }
 
-        var checkedIcon = this.getAttribute('data-checkedicon') || 'check';
-        var uncheckedIcon = this.getAttribute('data-uncheckedicon') || '';
-        var checkHtml = '<span class="material-icons checkboxIcon checkboxIcon-checked ' + checkedIcon + '"></span>';
-        var uncheckedHtml = '<span class="material-icons checkboxIcon checkboxIcon-unchecked ' + uncheckedIcon + '"></span>';
+        const checkedIcon = this.getAttribute('data-checkedicon') || 'check';
+        const uncheckedIcon = this.getAttribute('data-uncheckedicon') || '';
+        const checkHtml = '<span class="material-icons checkboxIcon checkboxIcon-checked ' + checkedIcon + '"></span>';
+        const uncheckedHtml = '<span class="material-icons checkboxIcon checkboxIcon-unchecked ' + uncheckedIcon + '"></span>';
         labelElement.insertAdjacentHTML('beforeend', '<span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>');
 
         labelTextElement.classList.add('checkboxLabel');
@@ -103,4 +107,5 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
         prototype: EmbyCheckboxPrototype,
         extends: 'input'
     });
-});
+
+/* eslint-enable indent */
diff --git a/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js b/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js
index 9864dbbb67..493d291ce0 100644
--- a/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js
+++ b/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js
@@ -1,16 +1,21 @@
-define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerElement'], function (EmbyProgressRing, dom, serverNotifications, events) {
-    'use strict';
+import EmbyProgressRing from 'emby-progressring';
+import dom from 'dom';
+import serverNotifications from 'serverNotifications';
+import events from 'events';
+import 'registerElement';
+
+/* eslint-disable indent */
 
     function addNotificationEvent(instance, name, handler) {
 
-        var localHandler = handler.bind(instance);
+        const localHandler = handler.bind(instance);
         events.on(serverNotifications, name, localHandler);
         instance[name] = localHandler;
     }
 
     function removeNotificationEvent(instance, name) {
 
-        var handler = instance[name];
+        const handler = instance[name];
         if (handler) {
             events.off(serverNotifications, name, handler);
             instance[name] = null;
@@ -19,7 +24,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
 
     function onRefreshProgress(e, apiClient, info) {
 
-        var indicator = this;
+        const indicator = this;
 
         if (!indicator.itemId) {
             indicator.itemId = dom.parentWithAttribute(indicator, 'data-id').getAttribute('data-id');
@@ -27,7 +32,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
 
         if (info.ItemId === indicator.itemId) {
 
-            var progress = parseFloat(info.Progress);
+            const progress = parseFloat(info.Progress);
 
             if (progress && progress < 100) {
                 this.classList.remove('hide');
@@ -39,7 +44,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
         }
     }
 
-    var EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing);
+    let EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing);
 
     EmbyItemRefreshIndicatorPrototype.createdCallback = function () {
 
@@ -74,4 +79,5 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
         prototype: EmbyItemRefreshIndicatorPrototype,
         extends: 'div'
     });
-});
+
+/* eslint-enable indent */
diff --git a/src/elements/emby-progressbar/emby-progressbar.js b/src/elements/emby-progressbar/emby-progressbar.js
index a799f82bdd..54fcb1999e 100644
--- a/src/elements/emby-progressbar/emby-progressbar.js
+++ b/src/elements/emby-progressbar/emby-progressbar.js
@@ -1,20 +1,19 @@
-define([], function() {
-    'use strict';
+/* eslint-disable indent */
 
-    var ProgressBarPrototype = Object.create(HTMLDivElement.prototype);
+    let ProgressBarPrototype = Object.create(HTMLDivElement.prototype);
 
     function onAutoTimeProgress() {
-        var start = parseInt(this.getAttribute('data-starttime'));
-        var end = parseInt(this.getAttribute('data-endtime'));
+        const start = parseInt(this.getAttribute('data-starttime'));
+        const end = parseInt(this.getAttribute('data-endtime'));
 
-        var now = new Date().getTime();
-        var total = end - start;
-        var pct = 100 * ((now - start) / total);
+        const now = new Date().getTime();
+        const total = end - start;
+        let pct = 100 * ((now - start) / total);
 
         pct = Math.min(100, pct);
         pct = Math.max(0, pct);
 
-        var itemProgressBarForeground = this.querySelector('.itemProgressBarForeground');
+        const itemProgressBarForeground = this.querySelector('.itemProgressBarForeground');
         itemProgressBarForeground.style.width = pct + '%';
     }
 
@@ -39,4 +38,5 @@ define([], function() {
         prototype: ProgressBarPrototype,
         extends: 'div'
     });
-});
+
+/* eslint-enable indent */
diff --git a/src/elements/emby-progressring/emby-progressring.js b/src/elements/emby-progressring/emby-progressring.js
index edc635947c..698a8b3cd7 100644
--- a/src/elements/emby-progressring/emby-progressring.js
+++ b/src/elements/emby-progressring/emby-progressring.js
@@ -1,12 +1,15 @@
-define(['require', 'css!./emby-progressring', 'registerElement'], function (require) {
-    'use strict';
+import require from 'require';
+import 'css!./emby-progressring';
+import 'webcomponents';
 
-    var EmbyProgressRing = Object.create(HTMLDivElement.prototype);
+/* eslint-disable indent */
+
+    let EmbyProgressRing = Object.create(HTMLDivElement.prototype);
 
     EmbyProgressRing.createdCallback = function () {
 
         this.classList.add('progressring');
-        var instance = this;
+        const instance = this;
 
         require(['text!./emby-progressring.template.html'], function (template) {
             instance.innerHTML = template;
@@ -37,7 +40,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
 
         progress = Math.floor(progress);
 
-        var angle;
+        let angle;
 
         if (progress < 25) {
             angle = -90 + (progress / 100) * 360;
@@ -82,7 +85,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
 
     EmbyProgressRing.detachedCallback = function () {
 
-        var observer = this.observer;
+        let observer = this.observer;
 
         if (observer) {
             // later, you can stop observing
@@ -97,5 +100,6 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ
         extends: 'div'
     });
 
-    return EmbyProgressRing;
-});
+    export default EmbyProgressRing;
+
+/* eslint-enable indent */
diff --git a/src/elements/emby-radio/emby-radio.js b/src/elements/emby-radio/emby-radio.js
index 46a3e3826c..d989326d25 100644
--- a/src/elements/emby-radio/emby-radio.js
+++ b/src/elements/emby-radio/emby-radio.js
@@ -1,7 +1,10 @@
-define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layoutManager) {
-    'use strict';
+import layoutManager from 'layoutManager';
+import 'css!./emby-radio';
+import 'registerElement';
 
-    var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
+/* eslint-disable indent */
+
+    let EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
 
     function onKeyDown(e) {
 
@@ -23,7 +26,7 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
     }
 
     EmbyRadioPrototype.attachedCallback = function () {
-        var showFocus = !layoutManager.mobile;
+        const showFocus = !layoutManager.mobile;
 
         if (this.getAttribute('data-radio') === 'true') {
             return;
@@ -33,7 +36,7 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
 
         this.classList.add('mdl-radio__button');
 
-        var labelElement = this.parentNode;
+        let labelElement = this.parentNode;
         //labelElement.classList.add('"mdl-radio mdl-js-radio mdl-js-ripple-effect');
         labelElement.classList.add('mdl-radio');
         labelElement.classList.add('mdl-js-radio');
@@ -42,12 +45,12 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
             labelElement.classList.add('show-focus');
         }
 
-        var labelTextElement = labelElement.querySelector('span');
+        let labelTextElement = labelElement.querySelector('span');
 
         labelTextElement.classList.add('radioButtonLabel');
         labelTextElement.classList.add('mdl-radio__label');
 
-        var html = '';
+        let html = '';
 
         html += '<div class="mdl-radio__circles">';
 
@@ -76,4 +79,5 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
         prototype: EmbyRadioPrototype,
         extends: 'input'
     });
-});
+
+/* eslint-enable indent */
diff --git a/src/elements/emby-scroller/emby-scroller.js b/src/elements/emby-scroller/emby-scroller.js
index 3df40fa6c2..407031a55f 100644
--- a/src/elements/emby-scroller/emby-scroller.js
+++ b/src/elements/emby-scroller/emby-scroller.js
@@ -1,7 +1,15 @@
-define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'browser', 'registerElement', 'css!./emby-scroller'], function (scroller, dom, layoutManager, inputManager, focusManager, browser) {
-    'use strict';
+import scroller from 'scroller';
+import dom from 'dom';
+import layoutManager from 'layoutManager';
+import inputManager from 'inputManager';
+import focusManager from 'focusManager';
+import browser from 'browser';
+import 'registerElement';
+import 'css!./emby-scroller';
 
-    var ScrollerPrototype = Object.create(HTMLDivElement.prototype);
+/* eslint-disable indent */
+
+    let ScrollerPrototype = Object.create(HTMLDivElement.prototype);
 
     ScrollerPrototype.createdCallback = function () {
         this.classList.add('emby-scroller');
@@ -9,7 +17,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
 
     function initCenterFocus(elem, scrollerInstance) {
         dom.addEventListener(elem, 'focus', function (e) {
-            var focused = focusManager.focusableParent(e.target);
+            const focused = focusManager.focusableParent(e.target);
             if (focused) {
                 scrollerInstance.toCenter(focused);
             }
@@ -80,7 +88,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
     };
 
     function onInputCommand(e) {
-        var cmd = e.detail.command;
+        const cmd = e.detail.command;
         if (cmd === 'end') {
             focusManager.focusLast(this, '.' + this.getAttribute('data-navcommands'));
             e.preventDefault();
@@ -101,18 +109,18 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
             inputManager.on(this, onInputCommand);
         }
 
-        var horizontal = this.getAttribute('data-horizontal') !== 'false';
+        const horizontal = this.getAttribute('data-horizontal') !== 'false';
 
-        var slider = this.querySelector('.scrollSlider');
+        const slider = this.querySelector('.scrollSlider');
 
         if (horizontal) {
             slider.style['white-space'] = 'nowrap';
         }
 
-        var scrollFrame = this;
-        var enableScrollButtons = layoutManager.desktop && horizontal && this.getAttribute('data-scrollbuttons') !== 'false';
+        const scrollFrame = this;
+        const enableScrollButtons = layoutManager.desktop && horizontal && this.getAttribute('data-scrollbuttons') !== 'false';
 
-        var options = {
+        const options = {
             horizontal: horizontal,
             mouseDragging: 1,
             mouseWheel: this.getAttribute('data-mousewheel') !== 'false',
@@ -154,14 +162,14 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
     }
 
     ScrollerPrototype.pause = function () {
-        var headroom = this.headroom;
+        const headroom = this.headroom;
         if (headroom) {
             headroom.pause();
         }
     };
 
     ScrollerPrototype.resume = function () {
-        var headroom = this.headroom;
+        const headroom = this.headroom;
         if (headroom) {
             headroom.resume();
         }
@@ -172,13 +180,13 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
             inputManager.off(this, onInputCommand);
         }
 
-        var headroom = this.headroom;
+        const headroom = this.headroom;
         if (headroom) {
             headroom.destroy();
             this.headroom = null;
         }
 
-        var scrollerInstance = this.scroller;
+        const scrollerInstance = this.scroller;
         if (scrollerInstance) {
             scrollerInstance.destroy();
             this.scroller = null;
@@ -189,4 +197,5 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
         prototype: ScrollerPrototype,
         extends: 'div'
     });
-});
+
+/* eslint-enable indent */
diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index 1b78fca0ae..e872f6c78b 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@@ -1,15 +1,22 @@
-define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager, keyboardnavigation) {
-    'use strict';
+import browser from 'browser';
+import dom from 'dom';
+import layoutManager from 'layoutManager';
+import keyboardnavigation from 'keyboardnavigation';
+import 'css!./emby-slider';
+import 'webcomponents';
+import 'emby-input';
 
-    var EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
+/* eslint-disable indent */
 
-    var supportsValueSetOverride = false;
+    let EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
 
-    var enableWidthWithTransform;
+    let supportsValueSetOverride = false;
+
+    let enableWidthWithTransform;
 
     if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
 
-        var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+        const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
         // descriptor returning null in webos
         if (descriptor && descriptor.configurable) {
             supportsValueSetOverride = true;
@@ -24,14 +31,14 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
      * @return {number} slider fraction
      */
     function mapClientToFraction(range, clientX) {
-        var rect = range.sliderBubbleTrack.getBoundingClientRect();
+        const rect = range.sliderBubbleTrack.getBoundingClientRect();
 
-        var fraction = (clientX - rect.left) / rect.width;
+        let fraction = (clientX - rect.left) / rect.width;
 
         // Snap to step
-        var valueRange = range.max - range.min;
+        const valueRange = range.max - range.min;
         if (range.step !== 'any' && valueRange !== 0) {
-            var step = (range.step || 1) / valueRange;
+            const step = (range.step || 1) / valueRange;
             fraction = Math.round(fraction / step) * step;
         }
 
@@ -46,7 +53,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
      * @return {number} slider value
      */
     function mapFractionToValue(range, fraction) {
-        var value = (range.max - range.min) * fraction;
+        let value = (range.max - range.min) * fraction;
 
         // Snap to step
         if (range.step !== 'any') {
@@ -67,8 +74,8 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
      * @return {number} slider fraction
      */
     function mapValueToFraction(range, value) {
-        var valueRange = range.max - range.min;
-        var fraction = valueRange !== 0 ? (value - range.min) / valueRange : 0;
+        const valueRange = range.max - range.min;
+        const fraction = valueRange !== 0 ? (value - range.min) / valueRange : 0;
         return Math.min(Math.max(fraction, 0), 1);
     }
 
@@ -84,18 +91,18 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             return;
         }
 
-        var range = this;
-        var value = range.value;
+        const range = this;
+        const value = range.value;
 
         // put this on a callback. Doing it within the event sometimes causes the slider to get hung up and not respond
         // Keep only one per slider frame request
         cancelAnimationFrame(range.updateValuesFrame);
         range.updateValuesFrame = requestAnimationFrame(function () {
 
-            var backgroundLower = range.backgroundLower;
+            let backgroundLower = range.backgroundLower;
 
             if (backgroundLower) {
-                var fraction = (value - range.min) / (range.max - range.min);
+                let fraction = (value - range.min) / (range.max - range.min);
 
                 if (enableWidthWithTransform) {
                     backgroundLower.style.transform = 'scaleX(' + (fraction) + ')';
@@ -110,10 +117,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
     function updateBubble(range, value, bubble, bubbleText) {
 
         requestAnimationFrame(function () {
-            var bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect();
-            var bubbleRect = bubble.getBoundingClientRect();
+            const bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect();
+            const bubbleRect = bubble.getBoundingClientRect();
 
-            var bubblePos = bubbleTrackRect.width * value / 100;
+            let bubblePos = bubbleTrackRect.width * value / 100;
             bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2);
 
             bubble.style.left = bubblePos + 'px';
@@ -158,10 +165,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             this.classList.add('show-focus');
         }
 
-        var containerElement = this.parentNode;
+        const containerElement = this.parentNode;
         containerElement.classList.add('mdl-slider-container');
 
-        var htmlToInsert = '';
+        let htmlToInsert = '';
 
         htmlToInsert += '<div class="mdl-slider-background-flex-container">';
         htmlToInsert += '<div class="mdl-slider-background-flex">';
@@ -187,9 +194,9 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         this.sliderBubbleTrack = containerElement.querySelector('.sliderBubbleTrack');
         this.backgroundLower = containerElement.querySelector('.mdl-slider-background-lower');
         this.backgroundUpper = containerElement.querySelector('.mdl-slider-background-upper');
-        var sliderBubble = containerElement.querySelector('.sliderBubble');
+        const sliderBubble = containerElement.querySelector('.sliderBubble');
 
-        var hasHideClass = sliderBubble.classList.contains('hide');
+        let hasHideClass = sliderBubble.classList.contains('hide');
 
         dom.addEventListener(this, 'input', function (e) {
             this.dragging = true;
@@ -198,7 +205,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
                 updateValues.call(this);
             }
 
-            var bubbleValue = mapValueToFraction(this, this.value) * 100;
+            const bubbleValue = mapValueToFraction(this, this.value) * 100;
             updateBubble(this, bubbleValue, sliderBubble);
 
             if (hasHideClass) {
@@ -223,10 +230,11 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             passive: true
         });
 
+        /* eslint-disable-next-line compat/compat */
         dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) {
 
             if (!this.dragging) {
-                var bubbleValue = mapClientToFraction(this, e.clientX) * 100;
+                const bubbleValue = mapClientToFraction(this, e.clientX) * 100;
 
                 updateBubble(this, bubbleValue, sliderBubble);
 
@@ -240,6 +248,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             passive: true
         });
 
+        /* eslint-disable-next-line compat/compat */
         dom.addEventListener(this, (window.PointerEvent ? 'pointerleave' : 'mouseleave'), function () {
             sliderBubble.classList.add('hide');
             hasHideClass = true;
@@ -256,7 +265,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
                 this.touched = true;
 
-                var fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
+                const fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
                 this.value = mapFractionToValue(this, fraction);
 
                 this.dispatchEvent(new Event('input', {
@@ -276,7 +285,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
                     return;
                 }
 
-                var fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
+                const fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
                 this.value = mapFractionToValue(this, fraction);
 
                 this.dispatchEvent(new Event('input', {
@@ -288,7 +297,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             });
 
             dom.addEventListener(this, 'touchend', function (e) {
-                var range = this;
+                const range = this;
 
                 setTimeout(function () {
                     range.touched = false;
@@ -314,12 +323,12 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
      * Keyboard dragging timeout.
      * After this delay "change" event will be fired.
      */
-    var KeyboardDraggingTimeout = 1000;
+    const KeyboardDraggingTimeout = 1000;
 
     /**
      * Keyboard dragging timer.
      */
-    var keyboardDraggingTimer;
+    let keyboardDraggingTimer;
 
     /**
      * Start keyboard dragging.
@@ -346,7 +355,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
         elem.keyboardDragging = false;
 
-        var event = new Event('change', {
+        const event = new Event('change', {
             bubbles: true,
             cancelable: false
         });
@@ -364,7 +373,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
         elem.value = Math.max(elem.min, Math.min(elem.max, parseFloat(elem.value) + delta));
 
-        var event = new Event('input', {
+        const event = new Event('input', {
             bubbles: true,
             cancelable: false
         });
@@ -414,10 +423,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
     function setRange(elem, startPercent, endPercent) {
 
-        var style = elem.style;
+        const style = elem.style;
         style.left = Math.max(startPercent, 0) + '%';
 
-        var widthPercent = endPercent - startPercent;
+        const widthPercent = endPercent - startPercent;
         style.width = Math.max(Math.min(widthPercent, 100), 0) + '%';
     }
 
@@ -438,7 +447,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
     EmbySliderPrototype.setBufferedRanges = function (ranges, runtime, position) {
 
-        var elem = this.backgroundUpper;
+        const elem = this.backgroundUpper;
         if (!elem) {
             return;
         }
@@ -449,9 +458,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             position = (position / runtime) * 100;
         }
 
-        for (var i = 0, length = ranges.length; i < length; i++) {
-
-            var range = ranges[i];
+        for (const range in ranges) {
 
             if (position != null) {
                 if (position >= range.end) {
@@ -468,7 +475,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
     EmbySliderPrototype.setIsClear = function (isClear) {
 
-        var backgroundLower = this.backgroundLower;
+        const backgroundLower = this.backgroundLower;
         if (backgroundLower) {
             if (isClear) {
                 backgroundLower.classList.add('mdl-slider-background-lower-clear');
@@ -479,7 +486,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
     };
 
     function startInterval(range) {
-        var interval = range.interval;
+        const interval = range.interval;
         if (interval) {
             clearInterval(interval);
         }
@@ -488,7 +495,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
     EmbySliderPrototype.detachedCallback = function () {
 
-        var interval = this.interval;
+        const interval = this.interval;
         if (interval) {
             clearInterval(interval);
         }
@@ -501,4 +508,5 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         prototype: EmbySliderPrototype,
         extends: 'input'
     });
-});
+
+/* eslint-enable indent */
diff --git a/src/elements/emby-tabs/emby-tabs.js b/src/elements/emby-tabs/emby-tabs.js
index 5e03c3f096..c36a5c7f06 100644
--- a/src/elements/emby-tabs/emby-tabs.js
+++ b/src/elements/emby-tabs/emby-tabs.js
@@ -1,9 +1,17 @@
-define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'registerElement', 'css!./emby-tabs', 'scrollStyles'], function (dom, scroller, browser, layoutManager, focusManager) {
-    'use strict';
+import dom from 'dom';
+import scroller from 'scroller';
+import browser from 'browser';
+import layoutManager from 'layoutManager';
+import focusManager from 'focusManager';
+import 'registerElement';
+import 'css!./emby-tabs';
+import 'scrollStyles';
 
-    var EmbyTabs = Object.create(HTMLDivElement.prototype);
-    var buttonClass = 'emby-tab-button';
-    var activeButtonClass = buttonClass + '-active';
+/* eslint-disable indent */
+
+    let EmbyTabs = Object.create(HTMLDivElement.prototype);
+    const buttonClass = 'emby-tab-button';
+    const activeButtonClass = buttonClass + '-active';
 
     function setActiveTabButton(tabs, newButton, oldButton, animate) {
 
@@ -16,14 +24,14 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
     }
 
     function removeActivePanelClass(tabs, index) {
-        var tabPanel = getTabPanel(tabs, index);
+        let tabPanel = getTabPanel(tabs, index);
         if (tabPanel) {
             tabPanel.classList.remove('is-active');
         }
     }
 
     function addActivePanelClass(tabs, index) {
-        var tabPanel = getTabPanel(tabs, index);
+        let tabPanel = getTabPanel(tabs, index);
         if (tabPanel) {
             tabPanel.classList.add('is-active');
         }
@@ -31,9 +39,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
 
     function fadeInRight(elem) {
 
-        var pct = browser.mobile ? '4%' : '0.5%';
+        const pct = browser.mobile ? '4%' : '0.5%';
 
-        var keyframes = [
+        const keyframes = [
             { opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 },
             { opacity: '1', transform: 'none', offset: 1 }];
 
@@ -56,7 +64,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
             removeActivePanelClass(tabs, previousIndex);
         }
 
-        var newPanel = getTabPanel(tabs, index);
+        let newPanel = getTabPanel(tabs, index);
 
         if (newPanel) {
             // animate new panel ?
@@ -70,10 +78,10 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
 
     function onClick(e) {
 
-        var tabs = this;
+        const tabs = this;
 
-        var current = tabs.querySelector('.' + activeButtonClass);
-        var tabButton = dom.parentWithClass(e.target, buttonClass);
+        const current = tabs.querySelector('.' + activeButtonClass);
+        const tabButton = dom.parentWithClass(e.target, buttonClass);
 
         if (tabButton && tabButton !== current) {
 
@@ -81,11 +89,11 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
                 current.classList.remove(activeButtonClass);
             }
 
-            var previousIndex = current ? parseInt(current.getAttribute('data-index')) : null;
+            const previousIndex = current ? parseInt(current.getAttribute('data-index')) : null;
 
             setActiveTabButton(tabs, tabButton, current, true);
 
-            var index = parseInt(tabButton.getAttribute('data-index'));
+            const index = parseInt(tabButton.getAttribute('data-index'));
 
             triggerBeforeTabChange(tabs, index, previousIndex);
 
@@ -115,7 +123,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
             return;
         }
 
-        var contentScrollSlider = tabs.querySelector('.emby-tabs-slider');
+        const contentScrollSlider = tabs.querySelector('.emby-tabs-slider');
         if (contentScrollSlider) {
             tabs.scroller = new scroller(tabs, {
                 horizontal: 1,
@@ -160,7 +168,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
 
     EmbyTabs.focus = function () {
 
-        var selected = this.querySelector('.' + activeButtonClass);
+        const selected = this.querySelector('.' + activeButtonClass);
 
         if (selected) {
             focusManager.focus(selected);
@@ -180,16 +188,16 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
 
         initScroller(this);
 
-        var current = this.querySelector('.' + activeButtonClass);
-        var currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0');
+        const current = this.querySelector('.' + activeButtonClass);
+        const currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0');
 
         if (currentIndex !== -1) {
 
             this.selectedTabIndex = currentIndex;
 
-            var tabButtons = this.querySelectorAll('.' + buttonClass);
+            const tabButtons = this.querySelectorAll('.' + buttonClass);
 
-            var newTabButton = tabButtons[currentIndex];
+            const newTabButton = tabButtons[currentIndex];
 
             if (newTabButton) {
                 setActiveTabButton(this, newTabButton, current, false);
@@ -221,18 +229,18 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
 
     EmbyTabs.selectedIndex = function (selected, triggerEvent) {
 
-        var tabs = this;
+        const tabs = this;
 
         if (selected == null) {
 
             return tabs.selectedTabIndex || 0;
         }
 
-        var current = tabs.selectedIndex();
+        const current = tabs.selectedIndex();
 
         tabs.selectedTabIndex = selected;
 
-        var tabButtons = tabs.querySelectorAll('.' + buttonClass);
+        const tabButtons = tabs.querySelectorAll('.' + buttonClass);
 
         if (current === selected || triggerEvent === false) {
 
@@ -244,7 +252,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
                 }
             }));
 
-            var currentTabButton = tabButtons[current];
+            let currentTabButton = tabButtons[current];
             setActiveTabButton(tabs, tabButtons[selected], currentTabButton, false);
 
             if (current !== selected && currentTabButton) {
@@ -262,7 +270,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
 
     function getSibling(elem, method) {
 
-        var sibling = elem[method];
+        let sibling = elem[method];
 
         while (sibling) {
             if (sibling.classList.contains(buttonClass)) {
@@ -280,9 +288,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
 
     EmbyTabs.selectNext = function () {
 
-        var current = getSelectedTabButton(this);
+        const current = getSelectedTabButton(this);
 
-        var sibling = getSibling(current, 'nextSibling');
+        const sibling = getSibling(current, 'nextSibling');
 
         if (sibling) {
             onClick.call(this, {
@@ -293,9 +301,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
 
     EmbyTabs.selectPrevious = function () {
 
-        var current = getSelectedTabButton(this);
+        const current = getSelectedTabButton(this);
 
-        var sibling = getSibling(current, 'previousSibling');
+        const sibling = getSibling(current, 'previousSibling');
 
         if (sibling) {
             onClick.call(this, {
@@ -306,14 +314,14 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
 
     EmbyTabs.triggerBeforeTabChange = function (selected) {
 
-        var tabs = this;
+        const tabs = this;
 
         triggerBeforeTabChange(tabs, tabs.selectedIndex());
     };
 
     EmbyTabs.triggerTabChange = function (selected) {
 
-        var tabs = this;
+        const tabs = this;
 
         tabs.dispatchEvent(new CustomEvent('tabchange', {
             detail: {
@@ -324,8 +332,8 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
 
     EmbyTabs.setTabEnabled = function (index, enabled) {
 
-        var tabs = this;
-        var btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
+        const tabs = this;
+        const btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
 
         if (enabled) {
             btn.classList.remove('hide');
@@ -338,4 +346,5 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
         prototype: EmbyTabs,
         extends: 'div'
     });
-});
+
+/* eslint-enable indent */
diff --git a/src/elements/emby-textarea/emby-textarea.js b/src/elements/emby-textarea/emby-textarea.js
index 87a3d7fcee..3b7624e74a 100644
--- a/src/elements/emby-textarea/emby-textarea.js
+++ b/src/elements/emby-textarea/emby-textarea.js
@@ -1,8 +1,13 @@
-define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'emby-input'], function (layoutManager, browser) {
-    'use strict';
+import layoutManager from 'layoutManager';
+import browser from 'browser';
+import 'css!./emby-textarea';
+import 'registerElement';
+import 'emby-input';
+
+/* eslint-disable indent */
 
     function autoGrow(textarea, maxLines) {
-        var self = this;
+        const self = this;
 
         if (maxLines === undefined) {
             maxLines = 999;
@@ -14,17 +19,17 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
          * @returns {number}
          */
         self.getOffset = function (textarea) {
-            var style = window.getComputedStyle(textarea, null);
-            var props = ['paddingTop', 'paddingBottom'];
-            var offset = 0;
+            const style = window.getComputedStyle(textarea, null);
+            const props = ['paddingTop', 'paddingBottom'];
+            let offset = 0;
 
-            for (var i = 0; i < props.length; i++) {
+            for (let i = 0; i < props.length; i++) {
                 offset += parseInt(style[props[i]]);
             }
             return offset;
         };
 
-        var offset;
+        let offset;
         function reset() {
             textarea.rows = 1;
             offset = self.getOffset(textarea);
@@ -43,8 +48,8 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
                 textarea.rows = 3;
                 return;
             }
-            var newHeight = 0;
-            var hasGrown = false;
+            let newHeight = 0;
+            let hasGrown = false;
 
             if ((textarea.scrollHeight - offset) > self.maxAllowedHeight) {
                 textarea.style.overflowY = 'scroll';
@@ -67,17 +72,17 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
         autogrowFn();
     }
 
-    var EmbyTextAreaPrototype = Object.create(HTMLTextAreaElement.prototype);
+    const EmbyTextAreaPrototype = Object.create(HTMLTextAreaElement.prototype);
 
-    var elementId = 0;
+    let elementId = 0;
 
     if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
 
-        var descriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
+        const descriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
 
         // descriptor returning null in webos
         if (descriptor && descriptor.configurable) {
-            var baseSetMethod = descriptor.set;
+            const baseSetMethod = descriptor.set;
             descriptor.set = function (value) {
                 baseSetMethod.call(this, value);
 
@@ -108,8 +113,8 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
         this.rows = 1;
         this.classList.add('emby-textarea');
 
-        var parentNode = this.parentNode;
-        var label = this.ownerDocument.createElement('label');
+        const parentNode = this.parentNode;
+        const label = this.ownerDocument.createElement('label');
         label.innerHTML = this.getAttribute('label') || '';
         label.classList.add('textareaLabel');
 
@@ -136,4 +141,5 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e
         prototype: EmbyTextAreaPrototype,
         extends: 'textarea'
     });
-});
+
+/* eslint-enable indent */
diff --git a/src/elements/emby-toggle/emby-toggle.js b/src/elements/emby-toggle/emby-toggle.js
index bd7eba3078..99856923e9 100644
--- a/src/elements/emby-toggle/emby-toggle.js
+++ b/src/elements/emby-toggle/emby-toggle.js
@@ -1,7 +1,9 @@
-define(['css!./emby-toggle', 'registerElement'], function () {
-    'use strict';
+import 'css!./emby-toggle';
+import 'registerElement';
 
-    var EmbyTogglePrototype = Object.create(HTMLInputElement.prototype);
+/* eslint-disable indent */
+
+    const EmbyTogglePrototype = Object.create(HTMLInputElement.prototype);
 
     function onKeyDown(e) {
 
@@ -29,11 +31,11 @@ define(['css!./emby-toggle', 'registerElement'], function () {
 
         this.classList.add('mdl-switch__input');
 
-        var labelElement = this.parentNode;
+        const labelElement = this.parentNode;
         labelElement.classList.add('mdl-switch');
         labelElement.classList.add('mdl-js-switch');
 
-        var labelTextElement = labelElement.querySelector('span');
+        const labelTextElement = labelElement.querySelector('span');
 
         labelElement.insertAdjacentHTML('beforeend', '<div class="mdl-switch__trackContainer"><div class="mdl-switch__track"></div><div class="mdl-switch__thumb"><span class="mdl-switch__focus-helper"></span></div></div>');
 
@@ -47,4 +49,5 @@ define(['css!./emby-toggle', 'registerElement'], function () {
         prototype: EmbyTogglePrototype,
         extends: 'input'
     });
-});
+
+/* eslint-enable indent */