diff --git a/.eslintrc.js b/.eslintrc.js
index e5ee2dfe8..d0c5cef89 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -25,7 +25,6 @@ module.exports = {
         'eslint:recommended',
         // 'plugin:promise/recommended',
         'plugin:import/errors',
-        'plugin:import/warnings',
         'plugin:eslint-comments/recommended',
         'plugin:compat/recommended'
     ],
diff --git a/package.json b/package.json
index bfba7b363..22b2a6ada 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "browser-sync": "^2.26.13",
     "confusing-browser-globals": "^1.0.10",
     "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^5.1.1",
+    "copy-webpack-plugin": "^6.0.3",
     "css-loader": "^5.0.0",
     "cssnano": "^4.1.10",
     "del": "^6.0.0",
@@ -80,7 +80,6 @@
     "material-design-icons-iconfont": "^6.1.0",
     "native-promise-only": "^0.8.0-a",
     "page": "^1.11.6",
-    "query-string": "^6.13.6",
     "resize-observer-polyfill": "^1.5.1",
     "screenfull": "^5.0.2",
     "sortablejs": "^1.12.0",
diff --git a/src/components/activitylog.js b/src/components/activitylog.js
index df2ea5f61..c00856e3a 100644
--- a/src/components/activitylog.js
+++ b/src/components/activitylog.js
@@ -1,10 +1,9 @@
-import events from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import globalize from '../scripts/globalize';
 import dom from '../scripts/dom';
 import * as datefns from 'date-fns';
 import dfnshelper from '../scripts/dfnshelper';
 import serverNotifications from '../scripts/serverNotifications';
-import connectionManager from 'jellyfin-apiclient';
 import '../elements/emby-button/emby-button';
 import './listview/listview.css';
 
@@ -141,7 +140,7 @@ class ActivityLog {
         const element = options.element;
         element.classList.add('activityLogListWidget');
         element.addEventListener('click', onListClick.bind(this));
-        const apiClient = window.connectionManager.getApiClient(options.serverId);
+        const apiClient = ConnectionManager.getApiClient(options.serverId);
         reloadData(this, element, apiClient);
         const onUpdate = onActivityLogUpdate.bind(this);
         this.updateFn = onUpdate;
@@ -153,7 +152,7 @@ class ActivityLog {
 
         if (options) {
             options.element.classList.remove('activityLogListWidget');
-            window.connectionManager.getApiClient(options.serverId).sendMessage('ActivityLogEntryStop', '0,1500');
+            ConnectionManager.getApiClient(options.serverId).sendMessage('ActivityLogEntryStop', '0,1500');
         }
 
         const onUpdate = this.updateFn;
diff --git a/src/components/appRouter.js b/src/components/appRouter.js
index b8df9d9f1..2ec42be3a 100644
--- a/src/components/appRouter.js
+++ b/src/components/appRouter.js
@@ -1,9 +1,8 @@
-import appHost from './apphost';
+import { appHost } from './apphost';
 import appSettings from '../scripts/settings/appSettings';
 import backdrop from './backdrop/backdrop';
 import browser from '../scripts/browser';
-import connectionManager from 'jellyfin-apiclient';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import globalize from '../scripts/globalize';
 import itemHelper from './itemHelper';
 import loading from './loading/loading';
@@ -95,7 +94,7 @@ class AppRouter {
     beginConnectionWizard() {
         backdrop.clearBackdrop();
         loading.show();
-        window.connectionManager.connect({
+        window.ConnectionManager.connect({
             enableAutoLogin: appSettings.enableAutoLogin()
         }).then((result) => {
             this.handleConnectionResult(result);
@@ -154,7 +153,7 @@ class AppRouter {
         events.on(appHost, 'beforeexit', this.onBeforeExit);
         events.on(appHost, 'resume', this.onAppResume);
 
-        window.connectionManager.connect({
+        window.ConnectionManager.connect({
             enableAutoLogin: appSettings.enableAutoLogin()
         }).then((result) => {
             this.firstConnectionResult = result;
@@ -210,7 +209,7 @@ class AppRouter {
     showItem(item, serverId, options) {
         // TODO: Refactor this so it only gets items, not strings.
         if (typeof (item) === 'string') {
-            const apiClient = serverId ? window.connectionManager.getApiClient(serverId) : window.connectionManager.currentApiClient();
+            const apiClient = serverId ? window.ConnectionManager.getApiClient(serverId) : window.ConnectionManager.currentApiClient();
             apiClient.getItem(apiClient.getCurrentUserId(), item).then((itemObject) => {
                 this.showItem(itemObject, options);
             });
@@ -324,7 +323,7 @@ class AppRouter {
             url += '?' + ctx.querystring;
         }
 
-        import('' + url).then(({default: html}) => {
+        import(/* webpackChunkName: "[request]" */ `../controllers/${url}`).then((html) => {
             this.loadContent(ctx, route, html, request);
         });
     }
@@ -494,15 +493,15 @@ class AppRouter {
     }
 
     initApiClients() {
-        window.connectionManager.getApiClients().forEach((apiClient) => {
+        window.ConnectionManager.getApiClients().forEach((apiClient) => {
             this.initApiClient(apiClient, this);
         });
 
-        events.on(window.connectionManager, 'apiclientcreated', this.onApiClientCreated);
+        events.on(window.ConnectionManager, 'apiclientcreated', this.onApiClientCreated);
     }
 
     onAppResume() {
-        const apiClient = window.connectionManager.currentApiClient();
+        const apiClient = window.ConnectionManager.currentApiClient();
 
         if (apiClient) {
             apiClient.ensureWebSocket();
@@ -520,7 +519,7 @@ class AppRouter {
             }
         }
 
-        const apiClient = window.connectionManager.currentApiClient();
+        const apiClient = window.ConnectionManager.currentApiClient();
         const pathname = ctx.pathname.toLowerCase();
 
         console.debug('appRouter - processing path request ' + pathname);
@@ -847,4 +846,4 @@ class AppRouter {
     }
 }
 
-export default new AppRouter();
+export const appRouter = new AppRouter();
diff --git a/src/components/apphost.js b/src/components/apphost.js
index c4b1396b1..281e070c7 100644
--- a/src/components/apphost.js
+++ b/src/components/apphost.js
@@ -1,6 +1,7 @@
+
 import appSettings from '../scripts/settings/appSettings';
 import browser from '../scripts/browser';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import * as htmlMediaHelper from '../components/htmlMediaHelper';
 import * as webSettings from '../scripts/settings/webSettings';
 import globalize from '../scripts/globalize';
@@ -318,7 +319,7 @@ let deviceName;
 const appName = 'Jellyfin Web';
 const appVersion = '10.7.0';
 
-const appHost = {
+export const appHost = {
     getWindowState: function () {
         return document.windowState || 'Normal';
     },
@@ -406,5 +407,3 @@ if (window.addEventListener) {
     window.addEventListener('focus', onAppVisible);
     window.addEventListener('blur', onAppHidden);
 }
-
-export default appHost;
diff --git a/src/components/backdrop/backdrop.js b/src/components/backdrop/backdrop.js
index acde031c2..98b577009 100644
--- a/src/components/backdrop/backdrop.js
+++ b/src/components/backdrop/backdrop.js
@@ -1,6 +1,5 @@
 import browser from '../../scripts/browser';
-import connectionManager from 'jellyfin-apiclient';
-import playbackManager from '../playback/playbackmanager';
+import { playbackManager } from '../playback/playbackmanager';
 import dom from '../../scripts/dom';
 import * as userSettings from '../../scripts/settings/userSettings';
 import './backdrop.css';
@@ -177,7 +176,7 @@ import './backdrop.css';
     function getItemImageUrls(item, imageOptions) {
         imageOptions = imageOptions || {};
 
-        const apiClient = window.connectionManager.getApiClient(item.ServerId);
+        const apiClient = window.ConnectionManager.getApiClient(item.ServerId);
         if (item.BackdropImageTags && item.BackdropImageTags.length > 0) {
             return item.BackdropImageTags.map((imgTag, index) => {
                 return apiClient.getScaledImageUrl(item.BackdropItemId || item.Id, Object.assign(imageOptions, {
diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index 70c3c4f80..a000a0640 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -7,7 +7,6 @@
 
 import datetime from '../../scripts/datetime';
 import imageLoader from '../images/imageLoader';
-import connectionManager from 'jellyfin-apiclient';
 import itemHelper from '../itemHelper';
 import focusManager from '../focusManager';
 import indicators from '../indicators/indicators';
@@ -15,7 +14,7 @@ import globalize from '../../scripts/globalize';
 import layoutManager from '../layoutManager';
 import dom from '../../scripts/dom';
 import browser from '../../scripts/browser';
-import playbackManager from '../playback/playbackmanager';
+import { playbackManager } from '../playback/playbackmanager';
 import itemShortcuts from '../shortcuts';
 import imageHelper from '../../scripts/imagehelper';
 import './card.css';
@@ -371,7 +370,7 @@ import '../guide/programs.css';
 
                 if (serverId !== lastServerId) {
                     lastServerId = serverId;
-                    apiClient = window.connectionManager.getApiClient(lastServerId);
+                    apiClient = window.ConnectionManager.getApiClient(lastServerId);
                 }
 
                 if (options.indexBy) {
diff --git a/src/components/cardbuilder/chaptercardbuilder.js b/src/components/cardbuilder/chaptercardbuilder.js
index 2ebdcbe82..33e978c48 100644
--- a/src/components/cardbuilder/chaptercardbuilder.js
+++ b/src/components/cardbuilder/chaptercardbuilder.js
@@ -7,7 +7,7 @@
 
 import datetime from '../../scripts/datetime';
 import imageLoader from '../images/imageLoader';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import layoutManager from '../layoutManager';
 import browser from '../../scripts/browser';
 
@@ -48,7 +48,7 @@ import browser from '../../scripts/browser';
         let html = '';
         let itemsInRow = 0;
 
-        const apiClient = window.connectionManager.getApiClient(item.ServerId);
+        const apiClient = ConnectionManager.getApiClient(item.ServerId);
 
         for (let i = 0, length = chapters.length; i < length; i++) {
             if (options.rows && itemsInRow === 0) {
diff --git a/src/components/channelMapper/channelMapper.js b/src/components/channelMapper/channelMapper.js
index b3a3dc41b..f7c2dcc5c 100644
--- a/src/components/channelMapper/channelMapper.js
+++ b/src/components/channelMapper/channelMapper.js
@@ -1,7 +1,7 @@
 import dom from '../../scripts/dom';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import loading from '../loading/loading';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 import actionsheet from '../actionSheet/actionSheet';
 import '../../elements/emby-input/emby-input';
@@ -16,7 +16,7 @@ export default class channelMapper {
         function mapChannel(button, channelId, providerChannelId) {
             loading.show();
             const providerId = options.providerId;
-            window.connectionManager.getApiClient(options.serverId).ajax({
+            ConnectionManager.getApiClient(options.serverId).ajax({
                 type: 'POST',
                 url: ApiClient.getUrl('LiveTv/ChannelMappings'),
                 data: JSON.stringify({
@@ -59,7 +59,7 @@ export default class channelMapper {
         }
 
         function getChannelMappingOptions(serverId, providerId) {
-            const apiClient = window.connectionManager.getApiClient(serverId);
+            const apiClient = ConnectionManager.getApiClient(serverId);
             return apiClient.getJSON(apiClient.getUrl('LiveTv/ChannelMappingOptions', {
                 providerId: providerId
             }));
diff --git a/src/components/collectionEditor/collectionEditor.js b/src/components/collectionEditor/collectionEditor.js
index e36abd7e0..11de5af8f 100644
--- a/src/components/collectionEditor/collectionEditor.js
+++ b/src/components/collectionEditor/collectionEditor.js
@@ -2,8 +2,8 @@ import dom from '../../scripts/dom';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import loading from '../loading/loading';
 import layoutManager from '../layoutManager';
-import connectionManager from 'jellyfin-apiclient';
-import appRouter from '../appRouter';
+import { ConnectionManager } from 'jellyfin-apiclient';
+import { appRouter } from '../appRouter';
 import globalize from '../../scripts/globalize';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
@@ -25,7 +25,7 @@ import '../../assets/css/flexstyles.css';
 
         const collectionId = panel.querySelector('#selectCollectionToAddTo').value;
 
-        const apiClient = window.connectionManager.getApiClient(currentServerId);
+        const apiClient = ConnectionManager.getApiClient(currentServerId);
 
         if (collectionId) {
             addToCollection(apiClient, panel, collectionId);
@@ -106,7 +106,7 @@ import '../../assets/css/flexstyles.css';
             EnableTotalRecordCount: false
         };
 
-        const apiClient = window.connectionManager.getApiClient(currentServerId);
+        const apiClient = ConnectionManager.getApiClient(currentServerId);
         apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => {
             let html = '';
 
diff --git a/src/components/dialogHelper/dialogHelper.js b/src/components/dialogHelper/dialogHelper.js
index 4eee793a3..20c658df4 100644
--- a/src/components/dialogHelper/dialogHelper.js
+++ b/src/components/dialogHelper/dialogHelper.js
@@ -1,4 +1,4 @@
-import appRouter from '../appRouter';
+import { appRouter } from '../appRouter';
 import focusManager from '../focusManager';
 import browser from '../../scripts/browser';
 import layoutManager from '../layoutManager';
diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js
index d6e4bee2f..575858648 100644
--- a/src/components/displaySettings/displaySettings.js
+++ b/src/components/displaySettings/displaySettings.js
@@ -1,14 +1,13 @@
 import browser from '../../scripts/browser';
 import layoutManager from '../layoutManager';
-import pluginManager from '../pluginManager';
-import appHost from '../apphost';
+import { pluginManager } from '../pluginManager';
+import { appHost } from '../apphost';
 import focusManager from '../focusManager';
 import datetime from '../../scripts/datetime';
 import globalize from '../../scripts/globalize';
 import loading from '../loading/loading';
-import connectionManager from 'jellyfin-apiclient';
 import skinManager from '../../scripts/themeManager';
-import events from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-button/emby-button';
@@ -182,7 +181,7 @@ import '../../elements/emby-button/emby-button';
 
     function onSubmit(e) {
         const self = this;
-        const apiClient = window.connectionManager.getApiClient(self.options.serverId);
+        const apiClient = ConnectionManager.getApiClient(self.options.serverId);
         const userId = self.options.userId;
         const userSettings = self.options.userSettings;
 
@@ -221,7 +220,7 @@ import '../../elements/emby-button/emby-button';
             loading.show();
 
             const userId = self.options.userId;
-            const apiClient = window.connectionManager.getApiClient(self.options.serverId);
+            const apiClient = ConnectionManager.getApiClient(self.options.serverId);
             const userSettings = self.options.userSettings;
 
             return apiClient.getUser(userId).then(user => {
diff --git a/src/components/favoriteitems.js b/src/components/favoriteitems.js
index 7b56967fd..cb1b61c43 100644
--- a/src/components/favoriteitems.js
+++ b/src/components/favoriteitems.js
@@ -1,7 +1,7 @@
 import loading from './loading/loading';
 import cardBuilder from './cardbuilder/cardBuilder';
 import dom from '../scripts/dom';
-import appHost from './apphost';
+import { appHost } from './apphost';
 import imageLoader from './images/imageLoader';
 import globalize from '../scripts/globalize';
 import layoutManager from './layoutManager';
diff --git a/src/components/filterdialog/filterdialog.js b/src/components/filterdialog/filterdialog.js
index 9c5ad5f71..6c694c18f 100644
--- a/src/components/filterdialog/filterdialog.js
+++ b/src/components/filterdialog/filterdialog.js
@@ -1,8 +1,7 @@
 import dom from '../../scripts/dom';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import globalize from '../../scripts/globalize';
-import connectionManager from 'jellyfin-apiclient';
-import events from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-collapse/emby-collapse';
 import './style.css';
@@ -420,7 +419,7 @@ import './style.css';
                     this.bindEvents(dlg);
                     if (enableDynamicFilters(this.options.mode)) {
                         dlg.classList.add('dynamicFilterDialog');
-                        const apiClient = window.connectionManager.getApiClient(this.options.serverId);
+                        const apiClient = ConnectionManager.getApiClient(this.options.serverId);
                         loadDynamicFilters(dlg, apiClient, apiClient.getCurrentUserId(), this.options.query);
                     }
                 });
diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js
index 46c3fc87b..f098cc457 100644
--- a/src/components/filtermenu/filtermenu.js
+++ b/src/components/filtermenu/filtermenu.js
@@ -3,7 +3,7 @@ import focusManager from '../focusManager';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import inputManager from '../../scripts/inputManager';
 import layoutManager from '../layoutManager';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 import * as userSettings from '../../scripts/settings/userSettings';
 import '../../elements/emby-checkbox/emby-checkbox';
@@ -194,7 +194,7 @@ function initEditor(context, settings) {
     }
 }
 function loadDynamicFilters(context, options) {
-    const apiClient = window.connectionManager.getApiClient(options.serverId);
+    var apiClient = ConnectionManager.getApiClient(options.serverId);
 
     const filterMenuOptions = Object.assign(options.filterMenuOptions, {
 
diff --git a/src/components/groupedcards.js b/src/components/groupedcards.js
index c2714eba8..3dd7f6140 100644
--- a/src/components/groupedcards.js
+++ b/src/components/groupedcards.js
@@ -1,13 +1,13 @@
 /* eslint-disable indent */
 
 import dom from '../scripts/dom';
-import appRouter from './appRouter';
-import connectionManager from 'jellyfin-apiclient';
+import { appRouter } from './appRouter';
+import { ConnectionManager } from 'jellyfin-apiclient';
 
     function onGroupedCardClick(e, card) {
         const itemId = card.getAttribute('data-id');
         const serverId = card.getAttribute('data-serverid');
-        const apiClient = window.connectionManager.getApiClient(serverId);
+        const apiClient = window.ConnectionManager.getApiClient(serverId);
         const userId = apiClient.getCurrentUserId();
         const playedIndicator = card.querySelector('.playedIndicator');
         const playedIndicatorHtml = playedIndicator ? playedIndicator.innerHTML : null;
diff --git a/src/components/guide/guide.js b/src/components/guide/guide.js
index 92a528f00..16d6813bd 100644
--- a/src/components/guide/guide.js
+++ b/src/components/guide/guide.js
@@ -1,16 +1,15 @@
 import inputManager from '../../scripts/inputManager';
 import browser from '../../scripts/browser';
 import globalize from '../../scripts/globalize';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import scrollHelper from '../../scripts/scrollHelper';
 import serverNotifications from '../../scripts/serverNotifications';
 import loading from '../loading/loading';
 import datetime from '../../scripts/datetime';
 import focusManager from '../focusManager';
-import playbackManager from '../playback/playbackmanager';
+import { playbackManager } from '../playback/playbackmanager';
 import * as userSettings from '../../scripts/settings/userSettings';
 import imageLoader from '../images/imageLoader';
-import events from 'jellyfin-apiclient';
 import layoutManager from '../layoutManager';
 import itemShortcuts from '../shortcuts';
 import dom from '../../scripts/dom';
@@ -213,7 +212,7 @@ function Guide(options) {
     }
 
     function reloadGuide(context, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
-        const apiClient = window.connectionManager.getApiClient(options.serverId);
+        const apiClient = ConnectionManager.getApiClient(options.serverId);
 
         const channelQuery = {
 
@@ -873,7 +872,7 @@ function Guide(options) {
     function reloadPage(page) {
         showLoading();
 
-        const apiClient = window.connectionManager.getApiClient(options.serverId);
+        const apiClient = ConnectionManager.getApiClient(options.serverId);
 
         apiClient.getLiveTvGuideInfo().then(function (guideInfo) {
             setDateRange(page, guideInfo);
diff --git a/src/components/homeScreenSettings/homeScreenSettings.js b/src/components/homeScreenSettings/homeScreenSettings.js
index 361a91a9e..6c6228332 100644
--- a/src/components/homeScreenSettings/homeScreenSettings.js
+++ b/src/components/homeScreenSettings/homeScreenSettings.js
@@ -3,10 +3,9 @@ import layoutManager from '../layoutManager';
 import focusManager from '../focusManager';
 import globalize from '../../scripts/globalize';
 import loading from '../loading/loading';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import homeSections from '../homesections/homesections';
 import dom from '../../scripts/dom';
-import events from 'jellyfin-apiclient';
 import '../listview/listview.css';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-checkbox/emby-checkbox';
@@ -385,7 +384,7 @@ import '../../elements/emby-checkbox/emby-checkbox';
 
     function onSubmit(e) {
         const self = this;
-        const apiClient = window.connectionManager.getApiClient(self.options.serverId);
+        const apiClient = ConnectionManager.getApiClient(self.options.serverId);
         const userId = self.options.userId;
         const userSettings = self.options.userSettings;
 
@@ -457,7 +456,7 @@ import '../../elements/emby-checkbox/emby-checkbox';
             loading.show();
 
             const userId = self.options.userId;
-            const apiClient = window.connectionManager.getApiClient(self.options.serverId);
+            const apiClient = ConnectionManager.getApiClient(self.options.serverId);
             const userSettings = self.options.userSettings;
 
             apiClient.getUser(userId).then(user => {
diff --git a/src/components/homesections/homesections.js b/src/components/homesections/homesections.js
index 60c5fc0ac..27f1c4d79 100644
--- a/src/components/homesections/homesections.js
+++ b/src/components/homesections/homesections.js
@@ -1,16 +1,15 @@
-import connectionManager from 'jellyfin-apiclient';
 import cardBuilder from '../cardbuilder/cardBuilder';
 import dom from '../../scripts/dom';
 import layoutManager from '../layoutManager';
 import imageLoader from '../images/imageLoader';
 import globalize from '../../scripts/globalize';
-import appRouter from '../appRouter';
+import { appRouter } from '../appRouter';
 import imageHelper from '../../scripts/imagehelper';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 import '../../elements/emby-scroller/emby-scroller';
 import '../../elements/emby-button/emby-button';
-import './homesections';
+import './homesections.css';
 
 /* eslint-disable indent */
 
@@ -212,7 +211,7 @@ import './homesections';
 
     function getFetchLatestItemsFn(serverId, parentId, collectionType) {
         return function () {
-            const apiClient = window.connectionManager.getApiClient(serverId);
+            const apiClient = window.ConnectionManager.getApiClient(serverId);
             let limit = 16;
 
             if (enableScrollX()) {
@@ -368,7 +367,7 @@ import './homesections';
 
     function getContinueWatchingFetchFn(serverId) {
         return function () {
-            const apiClient = window.connectionManager.getApiClient(serverId);
+            const apiClient = window.ConnectionManager.getApiClient(serverId);
             const screenWidth = dom.getWindowSize().innerWidth;
 
             let limit;
@@ -441,7 +440,7 @@ import './homesections';
 
     function getContinueListeningFetchFn(serverId) {
         return function () {
-            const apiClient = window.connectionManager.getApiClient(serverId);
+            const apiClient = window.ConnectionManager.getApiClient(serverId);
             const screenWidth = dom.getWindowSize().innerWidth;
 
             let limit;
@@ -514,7 +513,7 @@ import './homesections';
 
     function getOnNowFetchFn(serverId) {
         return function () {
-            const apiClient = window.connectionManager.getApiClient(serverId);
+            const apiClient = window.ConnectionManager.getApiClient(serverId);
             return apiClient.getLiveTvRecommendedPrograms({
                 userId: apiClient.getCurrentUserId(),
                 IsAiring: true,
@@ -657,7 +656,7 @@ import './homesections';
 
     function getNextUpFetchFn(serverId) {
         return function () {
-            const apiClient = window.connectionManager.getApiClient(serverId);
+            const apiClient = window.ConnectionManager.getApiClient(serverId);
             return apiClient.getNextUpEpisodes({
                 Limit: enableScrollX() ? 24 : 15,
                 Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo,Path',
@@ -728,7 +727,7 @@ import './homesections';
 
     function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) {
         return function () {
-            const apiClient = window.connectionManager.getApiClient(serverId);
+            const apiClient = window.ConnectionManager.getApiClient(serverId);
             return apiClient.getLiveTvRecordings({
                 userId: apiClient.getCurrentUserId(),
                 Limit: enableScrollX() ? 12 : 5,
diff --git a/src/components/htmlMediaHelper.js b/src/components/htmlMediaHelper.js
index 1fab10ef2..45ab7f1e8 100644
--- a/src/components/htmlMediaHelper.js
+++ b/src/components/htmlMediaHelper.js
@@ -3,7 +3,7 @@
 
 import appSettings from '../scripts/settings/appSettings' ;
 import browser from '../scripts/browser';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 
     export function getSavedVolume() {
         return appSettings.get('volume') || 1;
diff --git a/src/components/imageDownloader/imageDownloader.js b/src/components/imageDownloader/imageDownloader.js
index 5abdd588f..66b6c1ff4 100644
--- a/src/components/imageDownloader/imageDownloader.js
+++ b/src/components/imageDownloader/imageDownloader.js
@@ -1,8 +1,8 @@
 import dom from '../../scripts/dom';
 import loading from '../loading/loading';
-import appHost from '../apphost';
+import { appHost } from '../apphost';
 import dialogHelper from '../dialogHelper/dialogHelper';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import imageLoader from '../images/imageLoader';
 import browser from '../../scripts/browser';
 import layoutManager from '../layoutManager';
@@ -317,7 +317,7 @@ import '../cardbuilder/card.css';
         loading.show();
 
         import('./imageDownloader.template.html').then(({default: template}) => {
-            const apiClient = window.connectionManager.getApiClient(serverId);
+            const apiClient = ConnectionManager.getApiClient(serverId);
 
             currentItemId = itemId;
             currentItemType = itemType;
diff --git a/src/components/imageUploader/imageUploader.js b/src/components/imageUploader/imageUploader.js
index 2c32accca..b6305fadb 100644
--- a/src/components/imageUploader/imageUploader.js
+++ b/src/components/imageUploader/imageUploader.js
@@ -6,7 +6,7 @@
  */
 
 import dialogHelper from '../dialogHelper/dialogHelper';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import dom from '../../scripts/dom';
 import loading from '../loading/loading';
 import scrollHelper from '../../scripts/scrollHelper';
@@ -108,7 +108,7 @@ import './style.css';
             return false;
         }
 
-        window.connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => {
+        ConnectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => {
             dlg.querySelector('#uploadImage').value = '';
 
             loading.hide();
diff --git a/src/components/imageeditor/imageeditor.js b/src/components/imageeditor/imageeditor.js
index 09edc072f..acb678c87 100644
--- a/src/components/imageeditor/imageeditor.js
+++ b/src/components/imageeditor/imageeditor.js
@@ -1,5 +1,5 @@
 import dialogHelper from '../dialogHelper/dialogHelper';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import loading from '../loading/loading';
 import dom from '../../scripts/dom';
 import layoutManager from '../layoutManager';
@@ -8,7 +8,7 @@ import globalize from '../../scripts/globalize';
 import scrollHelper from '../../scripts/scrollHelper';
 import imageLoader from '../images/imageLoader';
 import browser from '../../scripts/browser';
-import appHost from '../apphost';
+import { appHost } from '../apphost';
 import '../cardbuilder/card.css';
 import '../formdialog.css';
 import '../../elements/emby-button/emby-button';
@@ -36,10 +36,10 @@ import './imageeditor.css';
         let apiClient;
 
         if (item) {
-            apiClient = window.connectionManager.getApiClient(item.ServerId);
+            apiClient = ConnectionManager.getApiClient(item.ServerId);
             reloadItem(page, item, apiClient, focusContext);
         } else {
-            apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
+            apiClient = ConnectionManager.getApiClient(currentItem.ServerId);
             apiClient.getItem(apiClient.getCurrentUserId(), currentItem.Id).then(function (item) {
                 reloadItem(page, item, apiClient, focusContext);
             });
@@ -293,7 +293,7 @@ import './imageeditor.css';
     function showActionSheet(context, imageCard) {
         const itemId = imageCard.getAttribute('data-id');
         const serverId = imageCard.getAttribute('data-serverid');
-        const apiClient = window.connectionManager.getApiClient(serverId);
+        const apiClient = ConnectionManager.getApiClient(serverId);
 
         const type = imageCard.getAttribute('data-imagetype');
         const index = parseInt(imageCard.getAttribute('data-index'));
@@ -404,7 +404,7 @@ import './imageeditor.css';
             const type = this.getAttribute('data-imagetype');
             let index = this.getAttribute('data-index');
             index = index === 'null' ? null : parseInt(index);
-            const apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
+            const apiClient = ConnectionManager.getApiClient(currentItem.ServerId);
             deleteImage(context, currentItem.Id, type, index, apiClient, true);
         });
 
@@ -412,7 +412,7 @@ import './imageeditor.css';
             const type = this.getAttribute('data-imagetype');
             const index = this.getAttribute('data-index');
             const newIndex = this.getAttribute('data-newindex');
-            const apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
+            const apiClient = ConnectionManager.getApiClient(currentItem.ServerId);
             moveImage(context, apiClient, currentItem.Id, type, index, newIndex, dom.parentWithClass(this, 'itemsContainer'));
         });
     }
@@ -424,7 +424,7 @@ import './imageeditor.css';
         loading.show();
 
         import('./imageeditor.template.html').then(({default: template}) => {
-            const apiClient = window.connectionManager.getApiClient(serverId);
+            const apiClient = ConnectionManager.getApiClient(serverId);
             apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
                 const dialogOptions = {
                     removeOnClose: true
diff --git a/src/components/images/imageLoader.js b/src/components/images/imageLoader.js
index f4a141bc9..47ea38205 100644
--- a/src/components/images/imageLoader.js
+++ b/src/components/images/imageLoader.js
@@ -1,6 +1,6 @@
 import * as lazyLoader from '../lazyLoader/lazyLoaderIntersectionObserver';
 import * as userSettings from '../../scripts/settings/userSettings';
-import * as blurhash from 'blurhash';
+import { decode, isBlurhashValid } from 'blurhash';
 import './style.css';
 /* eslint-disable indent */
 
@@ -13,7 +13,7 @@ import './style.css';
     }
 
     function itemBlurhashing(target, blurhashstr) {
-        if (blurhash.isBlurhashValid(blurhashstr)) {
+        if (isBlurhashValid(blurhashstr)) {
             // Although the default values recommended by Blurhash developers is 32x32, a size of 18x18 seems to be the sweet spot for us,
             // improving the performance and reducing the memory usage, while retaining almost full blur quality.
             // Lower values had more visible pixelation
@@ -21,7 +21,7 @@ import './style.css';
             const height = 18;
             let pixels;
             try {
-                pixels = blurhash.decode(blurhashstr, width, height);
+                pixels = decode(blurhashstr, width, height);
             } catch (err) {
                 console.error('Blurhash decode error: ', err);
                 target.classList.add('non-blurhashable');
@@ -124,15 +124,18 @@ import './style.css';
 
     export function lazyChildren(elem) {
         if (userSettings.enableBlurhash()) {
-            for (const lazyElem of elem.querySelectorAll('.lazy')) {
+            const lazyElems = Array.from(elem.querySelectorAll('.lazy'));
+            console.warn(lazyElems);
+            lazyElems.forEach((lazyElem) => {
                 const blurhashstr = lazyElem.getAttribute('data-blurhash');
                 if (!lazyElem.classList.contains('blurhashed', 'non-blurhashable') && blurhashstr) {
                     itemBlurhashing(lazyElem, blurhashstr);
                 } else if (!blurhashstr && !lazyElem.classList.contains('blurhashed')) {
                     lazyElem.classList.add('non-blurhashable');
                 }
-            }
+            });
         }
+        console.warn(elem);
         lazyLoader.lazyChildren(elem, fillImage);
     }
 
diff --git a/src/components/itemContextMenu.js b/src/components/itemContextMenu.js
index ff58a901f..e16063f64 100644
--- a/src/components/itemContextMenu.js
+++ b/src/components/itemContextMenu.js
@@ -1,11 +1,11 @@
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import browser from '../scripts/browser';
 import globalize from '../scripts/globalize';
 import actionsheet from './actionSheet/actionSheet';
-import appHost from './apphost';
-import appRouter from './appRouter';
+import { appHost } from './apphost';
+import { appRouter } from './appRouter';
 import itemHelper from './itemHelper';
-import playbackManager from './playback/playbackmanager';
+import { playbackManager } from './playback/playbackmanager';
 
 /* eslint-disable indent */
     export function getCommands(options) {
@@ -330,7 +330,7 @@ import playbackManager from './playback/playbackmanager';
     function executeCommand(item, id, options) {
         const itemId = item.Id;
         const serverId = item.ServerId;
-        const apiClient = window.connectionManager.getApiClient(serverId);
+        const apiClient = ConnectionManager.getApiClient(serverId);
 
         return new Promise(function (resolve, reject) {
             switch (id) {
diff --git a/src/components/itemHelper.js b/src/components/itemHelper.js
index b6f30d7ab..de771546b 100644
--- a/src/components/itemHelper.js
+++ b/src/components/itemHelper.js
@@ -1,4 +1,4 @@
-import appHost from './apphost';
+import { appHost } from './apphost';
 import globalize from '../scripts/globalize';
 
 export function getDisplayName(item, options = {}) {
diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js
index 9e036fba9..1d254c264 100644
--- a/src/components/itemMediaInfo/itemMediaInfo.js
+++ b/src/components/itemMediaInfo/itemMediaInfo.js
@@ -8,7 +8,7 @@
 import dialogHelper from '../dialogHelper/dialogHelper';
 import layoutManager from '../layoutManager';
 import globalize from '../../scripts/globalize';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import loading from '../loading/loading';
 import '../../elements/emby-select/emby-select';
 import '../listview/listview.css';
@@ -163,7 +163,7 @@ import '../../assets/css/flexstyles.css';
     }
 
     function loadMediaInfo(itemId, serverId, template) {
-        const apiClient = window.connectionManager.getApiClient(serverId);
+        const apiClient = ConnectionManager.getApiClient(serverId);
         return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
             const dialogOptions = {
                 size: 'small',
diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js
index 77b04a1a5..b65a986de 100644
--- a/src/components/itemidentifier/itemidentifier.js
+++ b/src/components/itemidentifier/itemidentifier.js
@@ -7,7 +7,7 @@
 
 import dialogHelper from '../dialogHelper/dialogHelper';
 import loading from '../loading/loading';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 import scrollHelper from '../../scripts/scrollHelper';
 import layoutManager from '../layoutManager';
@@ -31,7 +31,7 @@ import '../cardbuilder/card.css';
     let currentSearchResult;
 
     function getApiClient() {
-        return window.connectionManager.getApiClient(currentServerId);
+        return ConnectionManager.getApiClient(currentServerId);
     }
 
     function searchForIdentificationResults(page) {
diff --git a/src/components/itemsrefresher.js b/src/components/itemsrefresher.js
index d28361999..9960cac33 100644
--- a/src/components/itemsrefresher.js
+++ b/src/components/itemsrefresher.js
@@ -1,6 +1,6 @@
-import playbackManager from './playback/playbackmanager';
+import { playbackManager } from './playback/playbackmanager';
 import serverNotifications from '../scripts/serverNotifications';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 
 function onUserDataChanged(e, apiClient, userData) {
     const instance = this;
diff --git a/src/components/layoutManager.js b/src/components/layoutManager.js
index c5555d0eb..eaa1dc50b 100644
--- a/src/components/layoutManager.js
+++ b/src/components/layoutManager.js
@@ -1,7 +1,8 @@
-import appHost from './apphost';
+
+import { appHost } from './apphost';
 import browser from '../scripts/browser';
 import { set, get } from '../scripts/settings/appSettings';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 
 function setLayout(instance, layout, selectedLayout) {
     if (layout === selectedLayout) {
diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js
index 33bbdc756..a94e3a143 100644
--- a/src/components/listview/listview.js
+++ b/src/components/listview/listview.js
@@ -8,7 +8,7 @@
 import itemHelper from '../itemHelper';
 import mediaInfo from '../mediainfo/mediainfo';
 import indicators from '../indicators/indicators';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import layoutManager from '../layoutManager';
 import globalize from '../../scripts/globalize';
 import datetime from '../../scripts/datetime';
@@ -77,7 +77,7 @@ import '../../elements/emby-playstatebutton/emby-playstatebutton';
     }
 
     function getImageUrl(item, width) {
-        const apiClient = window.connectionManager.getApiClient(item.ServerId);
+        const apiClient = ConnectionManager.getApiClient(item.ServerId);
         let itemId;
 
         const options = {
@@ -106,7 +106,7 @@ import '../../elements/emby-playstatebutton/emby-playstatebutton';
     }
 
     function getChannelImageUrl(item, width) {
-        const apiClient = window.connectionManager.getApiClient(item.ServerId);
+        const apiClient = ConnectionManager.getApiClient(item.ServerId);
         const options = {
             maxWidth: width,
             type: 'Primary'
diff --git a/src/components/maintabsmanager.js b/src/components/maintabsmanager.js
index 07a150282..2884794bc 100644
--- a/src/components/maintabsmanager.js
+++ b/src/components/maintabsmanager.js
@@ -1,6 +1,6 @@
 import dom from '../scripts/dom';
 import browser from '../scripts/browser';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import '../elements/emby-tabs/emby-tabs';
 import '../elements/emby-button/emby-button';
 
diff --git a/src/components/mediainfo/mediainfo.js b/src/components/mediainfo/mediainfo.js
index 270cfae6d..73193f375 100644
--- a/src/components/mediainfo/mediainfo.js
+++ b/src/components/mediainfo/mediainfo.js
@@ -1,6 +1,6 @@
 import datetime from '../../scripts/datetime';
 import globalize from '../../scripts/globalize';
-import appRouter from '../appRouter';
+import { appRouter } from '../appRouter';
 import itemHelper from '../itemHelper';
 import indicators from '../indicators/indicators';
 import 'material-design-icons-iconfont';
diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js
index 32a0a3751..b6c33f4af 100644
--- a/src/components/metadataEditor/metadataEditor.js
+++ b/src/components/metadataEditor/metadataEditor.js
@@ -4,7 +4,7 @@ import dialogHelper from '../dialogHelper/dialogHelper';
 import datetime from '../../scripts/datetime';
 import loading from '../loading/loading';
 import focusManager from '../focusManager';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 import shell from '../../scripts/shell';
 import '../../elements/emby-checkbox/emby-checkbox';
@@ -290,7 +290,7 @@ import '../../assets/css/flexstyles.css';
     }
 
     function getApiClient() {
-        return window.connectionManager.getApiClient(currentItem.ServerId);
+        return ConnectionManager.getApiClient(currentItem.ServerId);
     }
 
     function bindAll(elems, eventName, fn) {
@@ -370,7 +370,7 @@ import '../../assets/css/flexstyles.css';
     }
 
     function getItem(itemId, serverId) {
-        const apiClient = window.connectionManager.getApiClient(serverId);
+        const apiClient = ConnectionManager.getApiClient(serverId);
 
         if (itemId) {
             return apiClient.getItem(apiClient.getCurrentUserId(), itemId);
@@ -380,7 +380,7 @@ import '../../assets/css/flexstyles.css';
     }
 
     function getEditorConfig(itemId, serverId) {
-        const apiClient = window.connectionManager.getApiClient(serverId);
+        const apiClient = ConnectionManager.getApiClient(serverId);
 
         if (itemId) {
             return apiClient.getJSON(apiClient.getUrl('Items/' + itemId + '/MetadataEditor'));
@@ -1068,7 +1068,7 @@ import '../../assets/css/flexstyles.css';
 
             currentContext = dlg;
 
-            init(dlg, window.connectionManager.getApiClient(serverId));
+            init(dlg, ConnectionManager.getApiClient(serverId));
 
             reload(dlg, itemId, serverId);
         });
@@ -1095,7 +1095,7 @@ import '../../assets/css/flexstyles.css';
 
                     currentContext = elem;
 
-                    init(elem, window.connectionManager.getApiClient(serverId));
+                    init(elem, ConnectionManager.getApiClient(serverId));
                     reload(elem, itemId, serverId);
 
                     focusManager.autoFocus(elem);
diff --git a/src/components/multiSelect/multiSelect.js b/src/components/multiSelect/multiSelect.js
index 52182d440..e37deb2d3 100644
--- a/src/components/multiSelect/multiSelect.js
+++ b/src/components/multiSelect/multiSelect.js
@@ -1,7 +1,7 @@
 import browser from '../../scripts/browser';
-import appHost from '../apphost';
+import { appHost } from '../apphost';
 import loading from '../loading/loading';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 import dom from '../../scripts/dom';
 import './multiSelect.css';
@@ -170,7 +170,7 @@ import './multiSelect.css';
     }
 
     function showMenuForSelectedItems(e) {
-        const apiClient = window.connectionManager.currentApiClient();
+        const apiClient = ConnectionManager.currentApiClient();
 
         apiClient.getCurrentUser().then(user => {
             const menuItems = [];
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 1eca2c380..c50fbc68e 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,6 +1,6 @@
 import serverNotifications from '../../scripts/serverNotifications';
-import playbackManager from '../playback/playbackmanager';
-import events from 'jellyfin-apiclient';
+import { playbackManager } from '../playback/playbackmanager';
+import { events } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 
 function onOneDocumentClick() {
diff --git a/src/components/nowPlayingBar/nowPlayingBar.js b/src/components/nowPlayingBar/nowPlayingBar.js
index 9607fadcb..4a794c956 100644
--- a/src/components/nowPlayingBar/nowPlayingBar.js
+++ b/src/components/nowPlayingBar/nowPlayingBar.js
@@ -1,13 +1,12 @@
 import datetime from '../../scripts/datetime';
-import events from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import browser from '../../scripts/browser';
 import imageLoader from '../../scripts/imagehelper';
 import layoutManager from '../layoutManager';
-import playbackManager from '../playback/playbackmanager';
+import { playbackManager } from '../playback/playbackmanager';
 import nowPlayingHelper from '../playback/nowplayinghelper';
-import appHost from '../apphost';
+import { appHost } from '../apphost';
 import dom from '../../scripts/dom';
-import connectionManager from 'jellyfin-apiclient';
 import itemContextMenu from '../itemContextMenu';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-ratingbutton/emby-ratingbutton';
@@ -452,7 +451,7 @@ import '../../elements/emby-ratingbutton/emby-ratingbutton';
             if (item.SeriesPrimaryImageTag) {
                 options.tag = item.SeriesPrimaryImageTag;
 
-                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+                return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
             }
         }
 
@@ -460,12 +459,12 @@ import '../../elements/emby-ratingbutton/emby-ratingbutton';
             if (item.SeriesThumbImageTag) {
                 options.tag = item.SeriesThumbImageTag;
 
-                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+                return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
             }
             if (item.ParentThumbImageTag) {
                 options.tag = item.ParentThumbImageTag;
 
-                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
+                return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
             }
         }
 
@@ -482,12 +481,12 @@ import '../../elements/emby-ratingbutton/emby-ratingbutton';
 
         if (item.ImageTags && item.ImageTags[options.type]) {
             options.tag = item.ImageTags[options.type];
-            return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
+            return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
         }
 
         if (item.AlbumId && item.AlbumPrimaryImageTag) {
             options.tag = item.AlbumPrimaryImageTag;
-            return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
+            return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
         }
 
         return null;
@@ -548,7 +547,7 @@ import '../../elements/emby-ratingbutton/emby-ratingbutton';
 
         if (nowPlayingItem.Id) {
             if (isRefreshing) {
-                const apiClient = window.connectionManager.getApiClient(nowPlayingItem.ServerId);
+                const apiClient = ConnectionManager.getApiClient(nowPlayingItem.ServerId);
                 apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) {
                     const userData = item.UserData || {};
                     const likes = userData.Likes == null ? '' : userData.Likes;
diff --git a/src/components/packageManager.js b/src/components/packageManager.js
index 0fd5bb750..3890577b2 100644
--- a/src/components/packageManager.js
+++ b/src/components/packageManager.js
@@ -1,5 +1,5 @@
 import appSettings from '../scripts/settings/appSettings';
-import pluginManager from './pluginManager';
+import { pluginManager } from './pluginManager';
 /* eslint-disable indent */
 
     class PackageManager {
diff --git a/src/components/playback/brightnessosd.js b/src/components/playback/brightnessosd.js
index 935656e23..044cb6b75 100644
--- a/src/components/playback/brightnessosd.js
+++ b/src/components/playback/brightnessosd.js
@@ -1,5 +1,5 @@
-import events from 'jellyfin-apiclient';
-import playbackManager from './playbackmanager';
+import { events } from 'jellyfin-apiclient';
+import { playbackManager } from './playbackmanager';
 import dom from '../../scripts/dom';
 import browser from '../../scripts/browser';
 import './iconosd.css';
diff --git a/src/components/playback/mediasession.js b/src/components/playback/mediasession.js
index 52ef5c36e..6283b978f 100644
--- a/src/components/playback/mediasession.js
+++ b/src/components/playback/mediasession.js
@@ -1,7 +1,6 @@
-import playbackManager from '../playback/playbackmanager';
+import { playbackManager } from '../playback/playbackmanager';
 import nowPlayingHelper from '../playback/nowplayinghelper';
-import events from 'jellyfin-apiclient';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 /* eslint-disable indent */
 
     // Reports media playback to the device for lock screen control
@@ -16,16 +15,16 @@ import connectionManager from 'jellyfin-apiclient';
         } else if (options.type === 'Primary' && item.SeriesPrimaryImageTag) {
             options.tag = item.SeriesPrimaryImageTag;
 
-            return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+            return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
         } else if (options.type === 'Thumb') {
             if (item.SeriesThumbImageTag) {
                 options.tag = item.SeriesThumbImageTag;
 
-                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+                return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
             } else if (item.ParentThumbImageTag) {
                 options.tag = item.ParentThumbImageTag;
 
-                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
+                return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
             }
         }
 
@@ -38,11 +37,11 @@ import connectionManager from 'jellyfin-apiclient';
         if (item.ImageTags && item.ImageTags[options.type]) {
             options.tag = item.ImageTags[options.type];
 
-            return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);
+            return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);
         } else if (item.AlbumId && item.AlbumPrimaryImageTag) {
             options.tag = item.AlbumPrimaryImageTag;
 
-            return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
+            return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
         }
 
         return null;
diff --git a/src/components/playback/playbackmanager.js b/src/components/playback/playbackmanager.js
index af60dd61d..f602a8e49 100644
--- a/src/components/playback/playbackmanager.js
+++ b/src/components/playback/playbackmanager.js
@@ -1,15 +1,14 @@
-import events from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import datetime from '../../scripts/datetime';
 import appSettings from '../../scripts/settings/appSettings';
 import itemHelper from '../itemHelper';
-import pluginManager from '../pluginManager';
+import { pluginManager } from '../pluginManager';
 import PlayQueueManager from './playqueuemanager';
 import * as userSettings from '../../scripts/settings/userSettings';
 import globalize from '../../scripts/globalize';
-import connectionManager from 'jellyfin-apiclient';
 import loading from '../loading/loading';
-import appHost from '../apphost';
-import screenfull from 'screenfull';
+import { appHost } from '../apphost';
+import * as Screenfull from 'screenfull';
 
 function enableLocalPlaylistManagement(player) {
     if (player.getPlaylist) {
@@ -24,8 +23,8 @@ function enableLocalPlaylistManagement(player) {
 }
 
 function bindToFullscreenChange(player) {
-    if (screenfull.isEnabled) {
-        screenfull.on('change', function () {
+    if (Screenfull.isEnabled) {
+        Screenfull.on('change', function () {
             events.trigger(player, 'fullscreenchange');
         });
     } else {
@@ -69,7 +68,7 @@ function reportPlayback(playbackManagerInstance, state, player, reportPlaylist,
         addPlaylistToPlaybackReport(playbackManagerInstance, info, player, serverId);
     }
 
-    const apiClient = window.connectionManager.getApiClient(serverId);
+    const apiClient = ConnectionManager.getApiClient(serverId);
     const reportPlaybackPromise = apiClient[method](info);
     // Notify that report has been sent
     reportPlaybackPromise.then(() => {
@@ -106,7 +105,7 @@ function normalizeName(t) {
 }
 
 function getItemsForPlayback(serverId, query) {
-    const apiClient = window.connectionManager.getApiClient(serverId);
+    const apiClient = ConnectionManager.getApiClient(serverId);
 
     if (query.Ids && query.Ids.split(',').length === 1) {
         const itemId = query.Ids.split(',');
@@ -870,7 +869,7 @@ class PlaybackManager {
             const promises = players.filter(displayPlayerIndividually).map(getPlayerTargets);
 
             return Promise.all(promises).then(function (responses) {
-                return window.connectionManager.currentApiClient().getCurrentUser().then(function (user) {
+                return ConnectionManager.currentApiClient().getCurrentUser().then(function (user) {
                     const targets = [];
 
                     targets.push({
@@ -1368,7 +1367,7 @@ class PlaybackManager {
         function getSavedMaxStreamingBitrate(apiClient, mediaType) {
             if (!apiClient) {
                 // This should hopefully never happen
-                apiClient = window.connectionManager.currentApiClient();
+                apiClient = ConnectionManager.currentApiClient();
             }
 
             const endpointInfo = apiClient.getSavedEndpointInfo() || {};
@@ -1391,7 +1390,7 @@ class PlaybackManager {
             const mediaType = playerData.streamInfo ? playerData.streamInfo.mediaType : null;
             const currentItem = self.currentItem(player);
 
-            const apiClient = currentItem ? window.connectionManager.getApiClient(currentItem.ServerId) : window.connectionManager.currentApiClient();
+            const apiClient = currentItem ? ConnectionManager.getApiClient(currentItem.ServerId) : ConnectionManager.currentApiClient();
             return getSavedMaxStreamingBitrate(apiClient, mediaType);
         };
 
@@ -1405,7 +1404,7 @@ class PlaybackManager {
             const mediaType = playerData.streamInfo ? playerData.streamInfo.mediaType : null;
             const currentItem = self.currentItem(player);
 
-            const apiClient = currentItem ? window.connectionManager.getApiClient(currentItem.ServerId) : window.connectionManager.currentApiClient();
+            const apiClient = currentItem ? ConnectionManager.getApiClient(currentItem.ServerId) : ConnectionManager.currentApiClient();
             const endpointInfo = apiClient.getSavedEndpointInfo() || {};
 
             return appSettings.enableAutomaticBitrateDetection(endpointInfo.IsInNetwork, mediaType);
@@ -1417,7 +1416,7 @@ class PlaybackManager {
                 return player.setMaxStreamingBitrate(options);
             }
 
-            const apiClient = window.connectionManager.getApiClient(self.currentItem(player).ServerId);
+            const apiClient = ConnectionManager.getApiClient(self.currentItem(player).ServerId);
 
             apiClient.getEndpointInfo().then(function (endpointInfo) {
                 const playerData = getPlayerData(player);
@@ -1448,12 +1447,12 @@ class PlaybackManager {
                 return player.isFullscreen();
             }
 
-            if (!screenfull.isEnabled) {
+            if (!Screenfull.isEnabled) {
                 // iOS Safari
                 return document.webkitIsFullScreen;
             }
 
-            return screenfull.isFullscreen;
+            return Screenfull.isFullscreen;
         };
 
         self.toggleFullscreen = function (player) {
@@ -1462,8 +1461,8 @@ class PlaybackManager {
                 return player.toggleFullscreen();
             }
 
-            if (screenfull.isEnabled) {
-                screenfull.toggle();
+            if (Screenfull.isEnabled) {
+                Screenfull.toggle();
             } else {
                 // iOS Safari
                 if (document.webkitIsFullScreen && document.webkitCancelFullscreen) {
@@ -1679,7 +1678,7 @@ class PlaybackManager {
                 const subtitleStreamIndex = params.SubtitleStreamIndex == null ? getPlayerData(player).subtitleStreamIndex : params.SubtitleStreamIndex;
 
                 let currentMediaSource = self.currentMediaSource(player);
-                const apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
+                const apiClient = ConnectionManager.getApiClient(currentItem.ServerId);
 
                 if (ticks) {
                     ticks = parseInt(ticks);
@@ -1835,7 +1834,7 @@ class PlaybackManager {
                 }, queryOptions));
             } else if (firstItem.Type === 'Episode' && items.length === 1 && getPlayer(firstItem, options).supportsProgress !== false) {
                 promise = new Promise(function (resolve, reject) {
-                    const apiClient = window.connectionManager.getApiClient(firstItem.ServerId);
+                    const apiClient = ConnectionManager.getApiClient(firstItem.ServerId);
 
                     apiClient.getCurrentUser().then(function (user) {
                         if (!user.Configuration.EnableNextEpisodeAutoPlay || !firstItem.SeriesId) {
@@ -2066,7 +2065,7 @@ class PlaybackManager {
                 return playOther(items, options, user);
             }
 
-            const apiClient = window.connectionManager.getApiClient(firstItem.ServerId);
+            const apiClient = ConnectionManager.getApiClient(firstItem.ServerId);
 
             return getIntros(firstItem, apiClient, options).then(function (introsResult) {
                 const introItems = introsResult.Items;
@@ -2129,14 +2128,14 @@ class PlaybackManager {
                 const mediaType = item.MediaType;
 
                 const onBitrateDetectionFailure = function () {
-                    return playAfterBitrateDetect(getSavedMaxStreamingBitrate(window.connectionManager.getApiClient(item.ServerId), mediaType), item, playOptions, onPlaybackStartedFn);
+                    return playAfterBitrateDetect(getSavedMaxStreamingBitrate(ConnectionManager.getApiClient(item.ServerId), mediaType), item, playOptions, onPlaybackStartedFn);
                 };
 
                 if (!isServerItem(item) || itemHelper.isLocalItem(item)) {
                     return onBitrateDetectionFailure();
                 }
 
-                const apiClient = window.connectionManager.getApiClient(item.ServerId);
+                const apiClient = ConnectionManager.getApiClient(item.ServerId);
                 apiClient.getEndpointInfo().then(function (endpointInfo) {
                     if ((mediaType === 'Video' || mediaType === 'Audio') && appSettings.enableAutomaticBitrateDetection(endpointInfo.IsInNetwork, mediaType)) {
                         return apiClient.detectBitrate().then(function (bitrate) {
@@ -2255,7 +2254,7 @@ class PlaybackManager {
             return Promise.all([promise, player.getDeviceProfile(item)]).then(function (responses) {
                 const deviceProfile = responses[1];
 
-                const apiClient = window.connectionManager.getApiClient(item.ServerId);
+                const apiClient = ConnectionManager.getApiClient(item.ServerId);
 
                 const mediaSourceId = playOptions.mediaSourceId;
                 const audioStreamIndex = playOptions.audioStreamIndex;
@@ -2300,11 +2299,11 @@ class PlaybackManager {
             const startPosition = options.startPositionTicks || 0;
             const mediaType = options.mediaType || item.MediaType;
             const player = getPlayer(item, options);
-            const apiClient = window.connectionManager.getApiClient(item.ServerId);
+            const apiClient = ConnectionManager.getApiClient(item.ServerId);
 
             // Call this just to ensure the value is recorded, it is needed with getSavedMaxStreamingBitrate
             return apiClient.getEndpointInfo().then(function () {
-                const maxBitrate = getSavedMaxStreamingBitrate(window.connectionManager.getApiClient(item.ServerId), mediaType);
+                const maxBitrate = getSavedMaxStreamingBitrate(ConnectionManager.getApiClient(item.ServerId), mediaType);
 
                 return player.getDeviceProfile(item).then(function (deviceProfile) {
                     return getPlaybackMediaSource(player, apiClient, deviceProfile, maxBitrate, item, startPosition, options.mediaSourceId, options.audioStreamIndex, options.subtitleStreamIndex).then(function (mediaSource) {
@@ -2320,11 +2319,11 @@ class PlaybackManager {
             const mediaType = options.mediaType || item.MediaType;
             // TODO: Remove the true forceLocalPlayer hack
             const player = getPlayer(item, options, true);
-            const apiClient = window.connectionManager.getApiClient(item.ServerId);
+            const apiClient = ConnectionManager.getApiClient(item.ServerId);
 
             // Call this just to ensure the value is recorded, it is needed with getSavedMaxStreamingBitrate
             return apiClient.getEndpointInfo().then(function () {
-                const maxBitrate = getSavedMaxStreamingBitrate(window.connectionManager.getApiClient(item.ServerId), mediaType);
+                const maxBitrate = getSavedMaxStreamingBitrate(ConnectionManager.getApiClient(item.ServerId), mediaType);
 
                 return player.getDeviceProfile(item).then(function (deviceProfile) {
                     return getPlaybackInfo(player, apiClient, item, deviceProfile, maxBitrate, startPosition, false, null, null, null, null).then(function (playbackInfoResult) {
@@ -2708,7 +2707,7 @@ class PlaybackManager {
             const queueDirectToPlayer = player && !enableLocalPlaylistManagement(player);
 
             if (queueDirectToPlayer) {
-                const apiClient = window.connectionManager.getApiClient(items[0].ServerId);
+                const apiClient = ConnectionManager.getApiClient(items[0].ServerId);
 
                 player.getDeviceProfile(items[0]).then(function (profile) {
                     setStreamUrls(items, profile, self.getMaxStreamingBitrate(player), apiClient, 0).then(function () {
@@ -3158,13 +3157,13 @@ class PlaybackManager {
 
             streamInfo.lastMediaInfoQuery = new Date().getTime();
 
-            const apiClient = window.connectionManager.getApiClient(serverId);
+            const apiClient = ConnectionManager.getApiClient(serverId);
 
             if (!apiClient.isMinServerVersion('3.2.70.7')) {
                 return;
             }
 
-            window.connectionManager.getApiClient(serverId).getLiveStreamMediaInfo(liveStreamId).then(function (info) {
+            ConnectionManager.getApiClient(serverId).getLiveStreamMediaInfo(liveStreamId).then(function (info) {
                 mediaSource.MediaStreams = info.MediaStreams;
                 events.trigger(player, 'mediastreamschange');
             }, function () {
@@ -3221,7 +3220,7 @@ class PlaybackManager {
             return Promise.reject();
         }
 
-        const apiClient = window.connectionManager.getApiClient(nextItem.item.ServerId);
+        const apiClient = ConnectionManager.getApiClient(nextItem.item.ServerId);
         return apiClient.getItem(apiClient.getCurrentUserId(), nextItem.item.Id);
     }
 
@@ -3362,7 +3361,7 @@ class PlaybackManager {
             return player.playTrailers(item);
         }
 
-        const apiClient = window.connectionManager.getApiClient(item.ServerId);
+        const apiClient = ConnectionManager.getApiClient(item.ServerId);
 
         const instance = this;
 
@@ -3394,7 +3393,7 @@ class PlaybackManager {
     }
 
     getSubtitleUrl(textStream, serverId) {
-        const apiClient = window.connectionManager.getApiClient(serverId);
+        const apiClient = ConnectionManager.getApiClient(serverId);
 
         return !textStream.IsExternalUrl ? apiClient.getUrl(textStream.DeliveryUrl) : textStream.DeliveryUrl;
     }
@@ -3474,7 +3473,7 @@ class PlaybackManager {
             return player.instantMix(item);
         }
 
-        const apiClient = window.connectionManager.getApiClient(item.ServerId);
+        const apiClient = ConnectionManager.getApiClient(item.ServerId);
 
         const options = {};
         options.UserId = apiClient.getCurrentUserId();
@@ -3758,7 +3757,7 @@ class PlaybackManager {
     }
 }
 
-const playbackManager = new PlayQueueManager();
+export const playbackManager = new PlaybackManager();
 
 window.addEventListener('beforeunload', function () {
     try {
@@ -3767,5 +3766,3 @@ window.addEventListener('beforeunload', function () {
         console.error('error in onAppClose: ' + err);
     }
 });
-
-export default playbackManager;
diff --git a/src/components/playback/playbackorientation.js b/src/components/playback/playbackorientation.js
index 6c44d5bbc..79776abd0 100644
--- a/src/components/playback/playbackorientation.js
+++ b/src/components/playback/playbackorientation.js
@@ -1,7 +1,7 @@
 
-import playbackManager from './playbackmanager';
+import { playbackManager } from './playbackmanager';
 import layoutManager from '../layoutManager';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 
 let orientationLocked;
 
diff --git a/src/components/playback/playerSelectionMenu.js b/src/components/playback/playerSelectionMenu.js
index 1bd909025..acc6e2481 100644
--- a/src/components/playback/playerSelectionMenu.js
+++ b/src/components/playback/playerSelectionMenu.js
@@ -1,11 +1,11 @@
 import appSettings from '../../scripts/settings/appSettings';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import browser from '../../scripts/browser';
 import loading from '../loading/loading';
-import playbackManager from '../playback/playbackmanager';
-import appRouter from '../appRouter';
+import { playbackManager } from '../playback/playbackmanager';
+import { appRouter } from '../appRouter';
 import globalize from '../../scripts/globalize';
-import appHost from '../apphost';
+import { appHost } from '../apphost';
 import { enable, isEnabled, supported } from '../../scripts/autocast';
 
 function mirrorItem(info, player) {
diff --git a/src/components/playback/playersettingsmenu.js b/src/components/playback/playersettingsmenu.js
index acec83091..510748949 100644
--- a/src/components/playback/playersettingsmenu.js
+++ b/src/components/playback/playersettingsmenu.js
@@ -1,6 +1,6 @@
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import actionsheet from '../actionSheet/actionSheet';
-import playbackManager from '../playback/playbackmanager';
+import { playbackManager } from '../playback/playbackmanager';
 import globalize from '../../scripts/globalize';
 import qualityoptions from '../qualityOptions';
 
@@ -251,7 +251,7 @@ export function show(options) {
         return showWithUser(options, player, null);
     }
 
-    const apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
+    var apiClient = ConnectionManager.getApiClient(currentItem.ServerId);
     return apiClient.getCurrentUser().then(function (user) {
         return showWithUser(options, player, user);
     });
diff --git a/src/components/playback/remotecontrolautoplay.js b/src/components/playback/remotecontrolautoplay.js
index 532a71237..8e8e8797f 100644
--- a/src/components/playback/remotecontrolautoplay.js
+++ b/src/components/playback/remotecontrolautoplay.js
@@ -1,5 +1,5 @@
-import events from 'jellyfin-apiclient';
-import playbackManager from '../playback/playbackmanager';
+import { events } from 'jellyfin-apiclient';
+import { playbackManager } from '../playback/playbackmanager';
 
 function transferPlayback(oldPlayer, newPlayer) {
     const state = playbackManager.getPlayerState(oldPlayer);
diff --git a/src/components/playback/volumeosd.js b/src/components/playback/volumeosd.js
index 9e8401783..7096c246a 100644
--- a/src/components/playback/volumeosd.js
+++ b/src/components/playback/volumeosd.js
@@ -1,6 +1,6 @@
 
-import events from 'jellyfin-apiclient';
-import playbackManager from './playbackmanager';
+import { events } from 'jellyfin-apiclient';
+import { playbackManager } from './playbackmanager';
 import dom from '../../scripts/dom';
 import browser from '../../scripts/browser';
 import './iconosd.css';
diff --git a/src/components/playbackSettings/playbackSettings.js b/src/components/playbackSettings/playbackSettings.js
index 4d123bb73..aefa69dbc 100644
--- a/src/components/playbackSettings/playbackSettings.js
+++ b/src/components/playbackSettings/playbackSettings.js
@@ -1,12 +1,11 @@
 import browser from '../../scripts/browser';
 import appSettings from '../../scripts/settings/appSettings';
-import appHost from '../apphost';
+import { appHost } from '../apphost';
 import focusManager from '../focusManager';
 import qualityoptions from '../qualityOptions';
 import globalize from '../../scripts/globalize';
 import loading from '../loading/loading';
-import connectionManager from 'jellyfin-apiclient';
-import events from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-checkbox/emby-checkbox';
 
@@ -258,7 +257,7 @@ import '../../elements/emby-checkbox/emby-checkbox';
 
     function onSubmit(e) {
         const self = this;
-        const apiClient = window.connectionManager.getApiClient(self.options.serverId);
+        const apiClient = ConnectionManager.getApiClient(self.options.serverId);
         const userId = self.options.userId;
         const userSettings = self.options.userSettings;
 
@@ -305,7 +304,7 @@ import '../../elements/emby-checkbox/emby-checkbox';
             loading.show();
 
             const userId = self.options.userId;
-            const apiClient = window.connectionManager.getApiClient(self.options.serverId);
+            const apiClient = ConnectionManager.getApiClient(self.options.serverId);
             const userSettings = self.options.userSettings;
 
             apiClient.getUser(userId).then(user => {
diff --git a/src/components/playerstats/playerstats.js b/src/components/playerstats/playerstats.js
index 59f885f32..66d87aad9 100644
--- a/src/components/playerstats/playerstats.js
+++ b/src/components/playerstats/playerstats.js
@@ -1,9 +1,8 @@
-import connectionManager from 'jellyfin-apiclient';
-import events from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import '../../elements/emby-button/paper-icon-button-light';
 import globalize from '../../scripts/globalize';
 import layoutManager from '../layoutManager';
-import playbackManager from '../playback/playbackmanager';
+import { playbackManager } from '../playback/playbackmanager';
 import playMethodHelper from '../playback/playmethodhelper';
 import syncPlayManager from '../syncPlay/syncPlayManager';
 import './playerstats.css';
@@ -95,7 +94,7 @@ import './playerstats.css';
             return Promise.resolve(instance.lastSession);
         }
 
-        const apiClient = window.connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
+        const apiClient = ConnectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
 
         return apiClient.getSessions({
             deviceId: apiClient.deviceId()
@@ -414,7 +413,7 @@ import './playerstats.css';
                 name: 'Original Media Info'
             });
 
-            const apiClient = window.connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
+            var apiClient = ConnectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
             if (syncPlayManager.isSyncPlayEnabled() && apiClient.isMinServerVersion('10.6.0')) {
                 categories.push({
                     stats: getSyncPlayStats(),
diff --git a/src/components/playlisteditor/playlisteditor.js b/src/components/playlisteditor/playlisteditor.js
index a3221ff3c..340fe5a99 100644
--- a/src/components/playlisteditor/playlisteditor.js
+++ b/src/components/playlisteditor/playlisteditor.js
@@ -2,10 +2,10 @@ import dom from '../../scripts/dom';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import loading from '../loading/loading';
 import layoutManager from '../layoutManager';
-import playbackManager from '../playback/playbackmanager';
-import connectionManager from 'jellyfin-apiclient';
+import { playbackManager } from '../playback/playbackmanager';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import * as userSettings from '../../scripts/settings/userSettings';
-import appRouter from '../appRouter';
+import { appRouter } from '../appRouter';
 import globalize from '../../scripts/globalize';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-input/emby-input';
@@ -22,7 +22,7 @@ import '../formdialog.css';
         const panel = dom.parentWithClass(this, 'dialog');
 
         const playlistId = panel.querySelector('#selectPlaylistToAddTo').value;
-        const apiClient = window.connectionManager.getApiClient(currentServerId);
+        const apiClient = ConnectionManager.getApiClient(currentServerId);
 
         if (playlistId) {
             userSettings.set('playlisteditor-lastplaylistid', playlistId);
@@ -113,7 +113,7 @@ import '../formdialog.css';
             EnableTotalRecordCount: false
         };
 
-        const apiClient = window.connectionManager.getApiClient(currentServerId);
+        const apiClient = ConnectionManager.getApiClient(currentServerId);
         apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => {
             let html = '';
 
diff --git a/src/components/playmenu.js b/src/components/playmenu.js
index 8831b4d7b..412c5375e 100644
--- a/src/components/playmenu.js
+++ b/src/components/playmenu.js
@@ -1,6 +1,6 @@
 import actionsheet from './actionSheet/actionSheet';
 import datetime from '../scripts/datetime';
-import playbackManager from './playback/playbackmanager';
+import { playbackManager } from './playback/playbackmanager';
 import globalize from '../scripts/globalize';
 
 export function show(options) {
diff --git a/src/components/pluginManager.js b/src/components/pluginManager.js
index 116281c48..e794a2c98 100644
--- a/src/components/pluginManager.js
+++ b/src/components/pluginManager.js
@@ -1,4 +1,4 @@
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import globalize from '../scripts/globalize';
 /* eslint-disable indent */
 
@@ -41,7 +41,7 @@ import globalize from '../scripts/globalize';
                 return Promise.resolve(plugin);
             } else {
                 return new Promise((resolve, reject) => {
-                    this.#loadStrings(plugin)
+                    PluginManager.loadStrings(plugin)
                         .then(function () {
                             resolve(plugin);
                         })
@@ -52,39 +52,35 @@ import globalize from '../scripts/globalize';
 
         loadPlugin(pluginSpec) {
             if (typeof pluginSpec === 'string') {
-                console.debug('Loading plugin (via deprecated requirejs method): ' + pluginSpec);
+                console.debug('Loading plugin (via dynamic import): ' + pluginSpec);
 
-                return new Promise((resolve, reject) => {
-                    require([pluginSpec], (pluginFactory) => {
-                        const plugin = pluginFactory.default ? new pluginFactory.default() : new pluginFactory();
+                import(/* webpackChunkName: "[request]" */ `../plugins/${pluginSpec}`).then((plugin) => {
+                    // See if it's already installed
+                    const existing = this.plugins.filter(function (p) {
+                        return p.id === plugin.id;
+                    })[0];
 
-                        // See if it's already installed
-                        const existing = this.pluginsList.filter(function (p) {
-                            return p.id === plugin.id;
-                        })[0];
+                    if (existing) {
+                        return Promise.resolve(pluginSpec);
+                    }
 
-                        if (existing) {
-                            resolve(pluginSpec);
-                        }
+                    plugin.installUrl = pluginSpec;
 
-                        plugin.installUrl = pluginSpec;
+                    const separatorIndex = Math.max(pluginSpec.lastIndexOf('/'), pluginSpec.lastIndexOf('\\'));
+                    plugin.baseUrl = pluginSpec.substring(0, separatorIndex);
 
-                        const separatorIndex = Math.max(pluginSpec.lastIndexOf('/'), pluginSpec.lastIndexOf('\\'));
-                        plugin.baseUrl = pluginSpec.substring(0, separatorIndex);
+                    const paths = {};
+                    paths[plugin.id] = plugin.baseUrl;
 
-                        const paths = {};
-                        paths[plugin.id] = plugin.baseUrl;
-
-                        requirejs.config({
-                            waitSeconds: 0,
-                            paths: paths
-                        });
-
-                        this.#registerPlugin(plugin).then(resolve).catch(reject);
+                    requirejs.config({
+                        waitSeconds: 0,
+                        paths: paths
                     });
+
+                    this.#registerPlugin(plugin).then(Promise.resolve).catch(Promise.reject);
                 });
             } else if (pluginSpec.then) {
-                return pluginSpec.then(pluginBuilder => {
+                return pluginSpec.then(({ default: pluginBuilder }) => {
                     return pluginBuilder();
                 }).then((plugin) => {
                     console.debug(`Plugin loaded: ${plugin.id}`);
@@ -148,4 +144,4 @@ import globalize from '../scripts/globalize';
 
 /* eslint-enable indent */
 
-export default new PluginManager();
+export const pluginManager = new PluginManager();
diff --git a/src/components/recordingcreator/recordingbutton.js b/src/components/recordingcreator/recordingbutton.js
index a898cf4a5..41195961d 100644
--- a/src/components/recordingcreator/recordingbutton.js
+++ b/src/components/recordingcreator/recordingbutton.js
@@ -1,4 +1,4 @@
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import dom from '../../scripts/dom';
 import recordingHelper from './recordinghelper';
 import '../../elements/emby-button/paper-icon-button-light';
@@ -53,7 +53,7 @@ class RecordingButton {
     }
 
     refresh(serverId, itemId) {
-        const apiClient = window.connectionManager.getApiClient(serverId);
+        const apiClient = ConnectionManager.getApiClient(serverId);
         const self = this;
         apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
             self.refreshItem(item);
diff --git a/src/components/recordingcreator/recordingcreator.js b/src/components/recordingcreator/recordingcreator.js
index fe5b506c9..06d17de75 100644
--- a/src/components/recordingcreator/recordingcreator.js
+++ b/src/components/recordingcreator/recordingcreator.js
@@ -2,13 +2,12 @@ import dialogHelper from '../dialogHelper/dialogHelper';
 import globalize from '../../scripts/globalize';
 import layoutManager from '../layoutManager';
 import mediaInfo from '../mediainfo/mediainfo';
-import connectionManager from 'jellyfin-apiclient';
 import loading from '../loading/loading';
 import scrollHelper from '../../scripts/scrollHelper';
 import datetime from '../../scripts/datetime';
 import imageLoader from '../images/imageLoader';
 import recordingFields from './recordingfields';
-import events from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-checkbox/emby-checkbox';
@@ -102,7 +101,7 @@ function renderRecording(context, defaultTimer, program, apiClient, refreshRecor
 function reload(context, programId, serverId, refreshRecordingStateOnly) {
     loading.show();
 
-    const apiClient = window.connectionManager.getApiClient(serverId);
+    const apiClient = ConnectionManager.getApiClient(serverId);
 
     const promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
     const promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
@@ -117,8 +116,8 @@ function reload(context, programId, serverId, refreshRecordingStateOnly) {
 
 function executeCloseAction(action, programId, serverId) {
     if (action === 'play') {
-        import('../playback/playbackmanager').then(({ default: playbackManager }) => {
-            const apiClient = connectionManager.getApiClient(serverId);
+        import('../playback/playbackmanager').then((playbackManager) => {
+            const apiClient = ConnectionManager.getApiClient(serverId);
 
             apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
                 playbackManager.play({
diff --git a/src/components/recordingcreator/recordingeditor.js b/src/components/recordingcreator/recordingeditor.js
index 6c5a380d1..068fc60a4 100644
--- a/src/components/recordingcreator/recordingeditor.js
+++ b/src/components/recordingcreator/recordingeditor.js
@@ -2,7 +2,7 @@
 import dialogHelper from '../dialogHelper/dialogHelper';
 import globalize from '../../scripts/globalize';
 import layoutManager from '../layoutManager';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import loading from '../loading/loading';
 import scrollHelper from '../../scripts/scrollHelper';
 import '../../assets/css/scrollstyles.css';
@@ -42,7 +42,7 @@ function closeDialog(isDeleted) {
 function onSubmit(e) {
     const form = this;
 
-    const apiClient = window.connectionManager.getApiClient(currentServerId);
+    const apiClient = ConnectionManager.getApiClient(currentServerId);
 
     apiClient.getLiveTvTimer(currentItemId).then(function (item) {
         item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
@@ -62,7 +62,7 @@ function init(context) {
     });
 
     context.querySelector('.btnCancelRecording').addEventListener('click', function () {
-        const apiClient = window.connectionManager.getApiClient(currentServerId);
+        const apiClient = ConnectionManager.getApiClient(currentServerId);
 
         deleteTimer(apiClient, currentItemId).then(function () {
             closeDialog(true);
@@ -76,7 +76,7 @@ function reload(context, id) {
     loading.show();
     currentItemId = id;
 
-    const apiClient = window.connectionManager.getApiClient(currentServerId);
+    const apiClient = ConnectionManager.getApiClient(currentServerId);
     apiClient.getLiveTvTimer(id).then(function (result) {
         renderTimer(context, result, apiClient);
         loading.hide();
diff --git a/src/components/recordingcreator/recordingfields.js b/src/components/recordingcreator/recordingfields.js
index 39e549ee8..ad14ff273 100644
--- a/src/components/recordingcreator/recordingfields.js
+++ b/src/components/recordingcreator/recordingfields.js
@@ -1,10 +1,9 @@
 import globalize from '../../scripts/globalize';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import serverNotifications from '../../scripts/serverNotifications';
 import loading from '../loading/loading';
 import dom from '../../scripts/dom';
 import recordingHelper from './recordinghelper';
-import events from 'jellyfin-apiclient';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
 import './recordingfields.css';
@@ -46,7 +45,7 @@ function loadData(parent, program, apiClient) {
 
 function fetchData(instance) {
     const options = instance.options;
-    const apiClient = window.connectionManager.getApiClient(options.serverId);
+    const apiClient = ConnectionManager.getApiClient(options.serverId);
 
     options.parent.querySelector('.recordingFields').classList.remove('hide');
     return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
@@ -197,7 +196,7 @@ function onRecordChange(e) {
 
     const self = this;
     const options = this.options;
-    const apiClient = window.connectionManager.getApiClient(options.serverId);
+    const apiClient = ConnectionManager.getApiClient(options.serverId);
 
     const button = dom.parentWithTag(e.target, 'BUTTON');
     const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
@@ -236,7 +235,7 @@ function onRecordSeriesChange(e) {
 
     const self = this;
     const options = this.options;
-    const apiClient = window.connectionManager.getApiClient(options.serverId);
+    const apiClient = ConnectionManager.getApiClient(options.serverId);
 
     const button = dom.parentWithTag(e.target, 'BUTTON');
     const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
diff --git a/src/components/recordingcreator/recordinghelper.js b/src/components/recordingcreator/recordinghelper.js
index 8ba1c4dfe..9ff64f681 100644
--- a/src/components/recordingcreator/recordinghelper.js
+++ b/src/components/recordingcreator/recordinghelper.js
@@ -1,6 +1,6 @@
 import globalize from '../../scripts/globalize';
 import loading from '../loading/loading';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 
 /*eslint prefer-const: "error"*/
 
@@ -40,7 +40,7 @@ function cancelTimerWithConfirmation(timerId, serverId) {
             }).then(function () {
                 loading.show();
 
-                const apiClient = window.connectionManager.getApiClient(serverId);
+                const apiClient = ConnectionManager.getApiClient(serverId);
                 cancelTimer(apiClient, timerId, true).then(resolve, reject);
             }, reject);
         });
@@ -60,7 +60,7 @@ function cancelSeriesTimerWithConfirmation(timerId, serverId) {
             }).then(function () {
                 loading.show();
 
-                const apiClient = window.connectionManager.getApiClient(serverId);
+                const apiClient = ConnectionManager.getApiClient(serverId);
                 apiClient.cancelLiveTvSeriesTimer(timerId).then(function () {
                     import('../toast/toast').then((toast) => {
                         toast(globalize.translate('SeriesCancelled'));
@@ -141,7 +141,7 @@ function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus,
                 buttons: items
 
             }).then(function (result) {
-                const apiClient = window.connectionManager.getApiClient(serverId);
+                const apiClient = ConnectionManager.getApiClient(serverId);
 
                 if (result === 'canceltimer') {
                     loading.show();
@@ -167,7 +167,7 @@ function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus,
 }
 
 function toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId) {
-    const apiClient = window.connectionManager.getApiClient(serverId);
+    const apiClient = ConnectionManager.getApiClient(serverId);
     const hasTimer = timerId && timerStatus !== 'Cancelled';
     if (seriesTimerId && hasTimer) {
         // cancel
diff --git a/src/components/recordingcreator/seriesrecordingeditor.js b/src/components/recordingcreator/seriesrecordingeditor.js
index 6b887280e..282794bb3 100644
--- a/src/components/recordingcreator/seriesrecordingeditor.js
+++ b/src/components/recordingcreator/seriesrecordingeditor.js
@@ -1,7 +1,7 @@
 import dialogHelper from '../dialogHelper/dialogHelper';
 import globalize from '../../scripts/globalize';
 import layoutManager from '../layoutManager';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import loading from '../loading/loading';
 import scrollHelper from '../../scripts/scrollHelper';
 import datetime from '../../scripts/datetime';
@@ -64,7 +64,7 @@ function closeDialog(isDeleted) {
 function onSubmit(e) {
     const form = this;
 
-    const apiClient = window.connectionManager.getApiClient(currentServerId);
+    const apiClient = ConnectionManager.getApiClient(currentServerId);
 
     apiClient.getLiveTvSeriesTimer(currentItemId).then(function (item) {
         item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
@@ -92,7 +92,7 @@ function init(context) {
     });
 
     context.querySelector('.btnCancelRecording').addEventListener('click', function () {
-        const apiClient = window.connectionManager.getApiClient(currentServerId);
+        const apiClient = ConnectionManager.getApiClient(currentServerId);
         deleteTimer(apiClient, currentItemId).then(function () {
             closeDialog(true);
         });
@@ -102,7 +102,7 @@ function init(context) {
 }
 
 function reload(context, id) {
-    const apiClient = window.connectionManager.getApiClient(currentServerId);
+    const apiClient = ConnectionManager.getApiClient(currentServerId);
 
     loading.show();
     if (typeof id === 'string') {
diff --git a/src/components/refreshdialog/refreshdialog.js b/src/components/refreshdialog/refreshdialog.js
index 1338e4b72..b6ea07f46 100644
--- a/src/components/refreshdialog/refreshdialog.js
+++ b/src/components/refreshdialog/refreshdialog.js
@@ -2,7 +2,7 @@ import dom from '../../scripts/dom';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import loading from '../loading/loading';
 import layoutManager from '../layoutManager';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 import '../../elements/emby-input/emby-input';
 import '../../elements/emby-button/emby-button';
@@ -66,7 +66,7 @@ function onSubmit(e) {
     const dlg = dom.parentWithClass(e.target, 'dialog');
     const options = instance.options;
 
-    const apiClient = window.connectionManager.getApiClient(options.serverId);
+    const apiClient = ConnectionManager.getApiClient(options.serverId);
 
     const replaceAllMetadata = dlg.querySelector('#selectMetadataRefreshMode').value === 'all';
 
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index eb897d1fe..d3410274e 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -2,11 +2,10 @@ import datetime from '../../scripts/datetime';
 import backdrop from '../backdrop/backdrop';
 import listView from '../listview/listview';
 import imageLoader from '../images/imageLoader';
-import playbackManager from '../playback/playbackmanager';
+import { playbackManager } from '../playback/playbackmanager';
 import nowPlayingHelper from '../playback/nowplayinghelper';
-import events from 'jellyfin-apiclient';
-import connectionManager from 'jellyfin-apiclient';
-import appHost from '../apphost';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
+import { appHost } from '../apphost';
 import globalize from '../../scripts/globalize';
 import layoutManager from '../layoutManager';
 import * as userSettings from '../../scripts/settings/userSettings';
@@ -96,18 +95,18 @@ function seriesImageUrl(item, options) {
     options.type = options.type || 'Primary';
     if (options.type === 'Primary' && item.SeriesPrimaryImageTag) {
         options.tag = item.SeriesPrimaryImageTag;
-        return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+        return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
     }
 
     if (options.type === 'Thumb') {
         if (item.SeriesThumbImageTag) {
             options.tag = item.SeriesThumbImageTag;
-            return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+            return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
         }
 
         if (item.ParentThumbImageTag) {
             options.tag = item.ParentThumbImageTag;
-            return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
+            return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
         }
     }
 
@@ -120,12 +119,12 @@ function imageUrl(item, options) {
 
     if (item.ImageTags && item.ImageTags[options.type]) {
         options.tag = item.ImageTags[options.type];
-        return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
+        return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
     }
 
     if (item.AlbumId && item.AlbumPrimaryImageTag) {
         options.tag = item.AlbumPrimaryImageTag;
-        return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
+        return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
     }
 
     return null;
@@ -216,7 +215,7 @@ function updateNowPlayingInfo(context, state, serverId) {
             openAlbum: false,
             positionTo: contextButton
         };
-        const apiClient = window.connectionManager.getApiClient(item.ServerId);
+        const apiClient = ConnectionManager.getApiClient(item.ServerId);
         apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
             apiClient.getCurrentUser().then(function (user) {
                 contextButton.addEventListener('click', function () {
diff --git a/src/components/search/searchfields.js b/src/components/search/searchfields.js
index 3b985c05a..01cd504fd 100644
--- a/src/components/search/searchfields.js
+++ b/src/components/search/searchfields.js
@@ -1,6 +1,6 @@
 import layoutManager from '../layoutManager';
 import globalize from '../../scripts/globalize';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import browser from '../../scripts/browser';
 import AlphaPicker from '../alphaPicker/alphaPicker';
 import '../../elements/emby-input/emby-input';
diff --git a/src/components/search/searchresults.js b/src/components/search/searchresults.js
index 9fe1e7b60..a73c489d9 100644
--- a/src/components/search/searchresults.js
+++ b/src/components/search/searchresults.js
@@ -1,8 +1,8 @@
 import layoutManager from '../layoutManager';
 import globalize from '../../scripts/globalize';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import cardBuilder from '../cardbuilder/cardBuilder';
-import appRouter from '../appRouter';
+import { appRouter } from '../appRouter';
 import '../../elements/emby-scroller/emby-scroller';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 import '../../elements/emby-button/emby-button';
@@ -606,7 +606,7 @@ class SearchResults {
         embed(options.element, this, options);
     }
     search(value) {
-        const apiClient = window.connectionManager.getApiClient(this.options.serverId);
+        const apiClient = ConnectionManager.getApiClient(this.options.serverId);
 
         search(this, apiClient, this.options.element, value);
     }
diff --git a/src/components/shortcuts.js b/src/components/shortcuts.js
index 2f83a342f..3472d7a72 100644
--- a/src/components/shortcuts.js
+++ b/src/components/shortcuts.js
@@ -5,10 +5,10 @@
  * @module components/shortcuts
  */
 
-import playbackManager from './playback/playbackmanager';
+import { playbackManager } from './playback/playbackmanager';
 import inputManager from '../scripts/inputManager';
-import connectionManager from 'jellyfin-apiclient';
-import appRouter from './appRouter';
+import { ConnectionManager } from 'jellyfin-apiclient';
+import { appRouter } from './appRouter';
 import globalize from '../scripts/globalize';
 import dom from '../scripts/dom';
 import recordingHelper from './recordingcreator/recordinghelper';
@@ -82,7 +82,7 @@ import recordingHelper from './recordingcreator/recordinghelper';
         const id = button.getAttribute('data-id');
         const type = button.getAttribute('data-type');
 
-        const apiClient = window.connectionManager.getApiClient(serverId);
+        const apiClient = ConnectionManager.getApiClient(serverId);
 
         if (type === 'Timer') {
             return apiClient.getLiveTvTimer(id);
@@ -112,7 +112,7 @@ import recordingHelper from './recordingcreator/recordinghelper';
             }
 
             import('./itemContextMenu').then((itemContextMenu) => {
-                window.connectionManager.getApiClient(item.ServerId).getCurrentUser().then(user => {
+                ConnectionManager.getApiClient(item.ServerId).getCurrentUser().then(user => {
                     itemContextMenu.show(Object.assign({
                         item: item,
                         play: true,
@@ -281,7 +281,7 @@ import recordingHelper from './recordingcreator/recordinghelper';
     }
 
     function playTrailer(item) {
-        const apiClient = window.connectionManager.getApiClient(item.ServerId);
+        const apiClient = ConnectionManager.getApiClient(item.ServerId);
 
         apiClient.getLocalTrailers(apiClient.getCurrentUserId(), item.Id).then(trailers => {
             playbackManager.play({ items: trailers });
@@ -289,7 +289,7 @@ import recordingHelper from './recordingcreator/recordinghelper';
     }
 
     function editItem(item, serverId) {
-        const apiClient = window.connectionManager.getApiClient(serverId);
+        const apiClient = ConnectionManager.getApiClient(serverId);
 
         return new Promise((resolve, reject) => {
             const serverId = apiClient.serverInfo().Id;
diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js
index a33e06b27..4b8a4929b 100644
--- a/src/components/slideshow/slideshow.js
+++ b/src/components/slideshow/slideshow.js
@@ -4,11 +4,11 @@
  */
 import dialogHelper from '../dialogHelper/dialogHelper';
 import inputManager from '../../scripts/inputManager';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import layoutManager from '../layoutManager';
 import focusManager from '../focusManager';
 import browser from '../../scripts/browser';
-import appHost from '../apphost';
+import { appHost } from '../apphost';
 import dom from '../../scripts/dom';
 import './style.css';
 import 'material-design-icons-iconfont';
@@ -85,7 +85,7 @@ function getBackdropImageUrl(item, options, apiClient) {
  * @returns {string} URL of the item's image.
  */
 function getImgUrl(item, user) {
-    const apiClient = window.connectionManager.getApiClient(item.ServerId);
+    const apiClient = ConnectionManager.getApiClient(item.ServerId);
     const imageOptions = {};
 
     if (item.BackdropImageTags && item.BackdropImageTags.length) {
diff --git a/src/components/subtitleeditor/subtitleeditor.js b/src/components/subtitleeditor/subtitleeditor.js
index 6a53b4f54..c3c174ea8 100644
--- a/src/components/subtitleeditor/subtitleeditor.js
+++ b/src/components/subtitleeditor/subtitleeditor.js
@@ -3,7 +3,7 @@ import dialogHelper from '../dialogHelper/dialogHelper';
 import layoutManager from '../layoutManager';
 import globalize from '../../scripts/globalize';
 import * as userSettings from '../../scripts/settings/userSettings';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import loading from '../loading/loading';
 import focusManager from '../focusManager';
 import dom from '../../scripts/dom';
@@ -22,7 +22,7 @@ let hasChanges;
 function downloadRemoteSubtitles(context, id) {
     const url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
 
-    const apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
+    const apiClient = ConnectionManager.getApiClient(currentItem.ServerId);
     apiClient.ajax({
 
         type: 'POST',
@@ -56,7 +56,7 @@ function deleteLocalSubtitle(context, index) {
             const itemId = currentItem.Id;
             const url = 'Videos/' + itemId + '/Subtitles/' + index;
 
-            const apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
+            const apiClient = ConnectionManager.getApiClient(currentItem.ServerId);
 
             apiClient.ajax({
 
@@ -244,7 +244,7 @@ function searchForSubtitles(context, language) {
 
     loading.show();
 
-    const apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
+    const apiClient = ConnectionManager.getApiClient(currentItem.ServerId);
     const url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
 
     apiClient.getJSON(url).then(function (results) {
@@ -357,7 +357,7 @@ function centerFocus(elem, horiz, on) {
 function showEditorInternal(itemId, serverId, template) {
     hasChanges = false;
 
-    const apiClient = window.connectionManager.getApiClient(serverId);
+    const apiClient = ConnectionManager.getApiClient(serverId);
     return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
         const dialogOptions = {
             removeOnClose: true,
diff --git a/src/components/subtitlesettings/subtitlesettings.js b/src/components/subtitlesettings/subtitlesettings.js
index 3462d9542..082781d8b 100644
--- a/src/components/subtitlesettings/subtitlesettings.js
+++ b/src/components/subtitlesettings/subtitlesettings.js
@@ -1,14 +1,13 @@
 import globalize from '../../scripts/globalize';
-import appHost from '../apphost';
+import { appHost } from '../apphost';
 import appSettings from '../../scripts/settings/appSettings';
 import focusManager from '../focusManager';
 import layoutManager from '../layoutManager';
 import loading from '../loading/loading';
-import connectionManager from 'jellyfin-apiclient';
 import subtitleAppearanceHelper from './subtitleappearancehelper';
 import settingsHelper from '../settingshelper';
 import dom from '../../scripts/dom';
-import events from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import '../listview/listview.css';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-slider/emby-slider';
@@ -232,7 +231,7 @@ export class SubtitleSettings {
         loading.show();
 
         const userId = self.options.userId;
-        const apiClient = window.connectionManager.getApiClient(self.options.serverId);
+        const apiClient = ConnectionManager.getApiClient(self.options.serverId);
         const userSettings = self.options.userSettings;
 
         apiClient.getUser(userId).then(function (user) {
@@ -256,7 +255,7 @@ export class SubtitleSettings {
 
     onSubmit(e) {
         const self = this;
-        const apiClient = window.connectionManager.getApiClient(self.options.serverId);
+        const apiClient = ConnectionManager.getApiClient(self.options.serverId);
         const userId = self.options.userId;
         const userSettings = self.options.userSettings;
 
diff --git a/src/components/subtitlesync/subtitlesync.js b/src/components/subtitlesync/subtitlesync.js
index c6d38d2f5..d3477932c 100644
--- a/src/components/subtitlesync/subtitlesync.js
+++ b/src/components/subtitlesync/subtitlesync.js
@@ -1,5 +1,5 @@
 
-import playbackManager from '../playback/playbackmanager';
+import { playbackManager } from '../playback/playbackmanager';
 import layoutManager from '../layoutManager';
 import template from './subtitlesync.template.html';
 import './subtitlesync.css';
diff --git a/src/components/syncPlay/groupSelectionMenu.js b/src/components/syncPlay/groupSelectionMenu.js
index 8882548e9..9269a584c 100644
--- a/src/components/syncPlay/groupSelectionMenu.js
+++ b/src/components/syncPlay/groupSelectionMenu.js
@@ -1,6 +1,5 @@
-import events from 'jellyfin-apiclient';
-import connectionManager from 'jellyfin-apiclient';
-import playbackManager from '../playback/playbackmanager';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
+import { playbackManager } from '../playback/playbackmanager';
 import syncPlayManager from './syncPlayManager';
 import loading from '../loading/loading';
 import toast from '../toast/toast';
@@ -172,8 +171,8 @@ export default function show (button) {
         });
     });
 
-    const apiClient = window.connectionManager.currentApiClient();
-    window.connectionManager.user(apiClient).then((user) => {
+    const apiClient = ConnectionManager.currentApiClient();
+    ConnectionManager.user(apiClient).then((user) => {
         if (syncPlayEnabled) {
             showLeaveGroupSelection(button, user, apiClient);
         } else {
diff --git a/src/components/syncPlay/syncPlayManager.js b/src/components/syncPlay/syncPlayManager.js
index 3a9b6e889..0ff6ad346 100644
--- a/src/components/syncPlay/syncPlayManager.js
+++ b/src/components/syncPlay/syncPlayManager.js
@@ -3,9 +3,8 @@
  * @module components/syncPlay/syncPlayManager
  */
 
-import events from 'jellyfin-apiclient';
-import connectionManager from 'jellyfin-apiclient';
-import playbackManager from '../playback/playbackmanager';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
+import { playbackManager } from '../playback/playbackmanager';
 import timeSyncManager from './timeSyncManager';
 import toast from '../toast/toast';
 import globalize from '../../scripts//globalize';
@@ -128,7 +127,7 @@ class SyncPlayManager {
 
             // Report ping
             if (this.syncEnabled) {
-                const apiClient = window.connectionManager.currentApiClient();
+                const apiClient = ConnectionManager.currentApiClient();
                 const sessionId = getActivePlayerId();
 
                 if (!sessionId) {
@@ -660,7 +659,7 @@ class SyncPlayManager {
      * Overrides PlaybackManager's unpause method.
      */
     playRequest (player) {
-        const apiClient = window.connectionManager.currentApiClient();
+        const apiClient = ConnectionManager.currentApiClient();
         apiClient.requestSyncPlayStart();
     }
 
@@ -668,7 +667,7 @@ class SyncPlayManager {
      * Overrides PlaybackManager's pause method.
      */
     pauseRequest (player) {
-        const apiClient = window.connectionManager.currentApiClient();
+        const apiClient = ConnectionManager.currentApiClient();
         apiClient.requestSyncPlayPause();
         // Pause locally as well, to give the user some little control
         playbackManager._localUnpause(player);
@@ -678,7 +677,7 @@ class SyncPlayManager {
      * Overrides PlaybackManager's seek method.
      */
     seekRequest (PositionTicks, player) {
-        const apiClient = window.connectionManager.currentApiClient();
+        const apiClient = ConnectionManager.currentApiClient();
         apiClient.requestSyncPlaySeek({
             PositionTicks: PositionTicks
         });
diff --git a/src/components/syncPlay/timeSyncManager.js b/src/components/syncPlay/timeSyncManager.js
index d824b2e1d..a39b06968 100644
--- a/src/components/syncPlay/timeSyncManager.js
+++ b/src/components/syncPlay/timeSyncManager.js
@@ -3,8 +3,7 @@
  * @module components/syncPlay/timeSyncManager
  */
 
-import events from 'jellyfin-apiclient';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 
 /**
  * Time estimation
@@ -114,7 +113,7 @@ class TimeSyncManager {
         if (!this.poller) {
             this.poller = setTimeout(() => {
                 this.poller = null;
-                const apiClient = window.connectionManager.currentApiClient();
+                const apiClient = ConnectionManager.currentApiClient();
                 const requestSent = new Date();
                 apiClient.getServerTime().then((response) => {
                     const responseReceived = new Date();
diff --git a/src/components/themeMediaPlayer.js b/src/components/themeMediaPlayer.js
index b1b382e9b..164d144d4 100644
--- a/src/components/themeMediaPlayer.js
+++ b/src/components/themeMediaPlayer.js
@@ -1,6 +1,6 @@
-import playbackManager from './playback/playbackmanager';
+import { playbackManager } from './playback/playbackmanager';
 import * as userSettings from '../scripts/settings/userSettings';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 
 let currentOwnerId;
 let currentThemeIds = [];
@@ -62,7 +62,7 @@ function loadThemeMedia(item) {
         return;
     }
 
-    const apiClient = window.connectionManager.getApiClient(item.ServerId);
+    const apiClient = ConnectionManager.getApiClient(item.ServerId);
     apiClient.getThemeMedia(apiClient.getCurrentUserId(), item.Id, true).then(function (themeMediaResult) {
         const ownerId = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.OwnerId : themeMediaResult.ThemeSongsResult.OwnerId;
 
diff --git a/src/components/tunerPicker.js b/src/components/tunerPicker.js
index e2793bf9d..d47b768d8 100644
--- a/src/components/tunerPicker.js
+++ b/src/components/tunerPicker.js
@@ -1,7 +1,7 @@
 import dialogHelper from './dialogHelper/dialogHelper';
 import dom from '../scripts/dom';
 import layoutManager from './layoutManager';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import globalize from '../scripts/globalize';
 import loading from './loading/loading';
 import browser from '../scripts/browser';
@@ -163,7 +163,7 @@ function tunerPicker() {
             scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
         }
 
-        const apiClient = window.connectionManager.getApiClient(options.serverId);
+        const apiClient = ConnectionManager.getApiClient(options.serverId);
         discoverDevices(dlg, apiClient);
 
         if (layoutManager.tv) {
diff --git a/src/components/upnextdialog/upnextdialog.js b/src/components/upnextdialog/upnextdialog.js
index 9515e2ef3..a7f6ac21d 100644
--- a/src/components/upnextdialog/upnextdialog.js
+++ b/src/components/upnextdialog/upnextdialog.js
@@ -1,7 +1,6 @@
 import dom from '../../scripts/dom';
-import playbackManager from '../playback/playbackmanager';
-import connectionManager from 'jellyfin-apiclient';
-import events from 'jellyfin-apiclient';
+import { playbackManager } from '../playback/playbackmanager';
+import { events } from 'jellyfin-apiclient';
 import mediaInfo from '../mediainfo/mediainfo';
 import layoutManager from '../layoutManager';
 import focusManager from '../focusManager';
diff --git a/src/components/userdatabuttons/userdatabuttons.js b/src/components/userdatabuttons/userdatabuttons.js
index cd906e3bb..d9edda505 100644
--- a/src/components/userdatabuttons/userdatabuttons.js
+++ b/src/components/userdatabuttons/userdatabuttons.js
@@ -1,4 +1,4 @@
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 import dom from '../../scripts/dom';
 import itemHelper from '../itemHelper';
@@ -188,12 +188,12 @@ function markPlayed(link) {
 }
 
 function likes(id, serverId, isLiked) {
-    const apiClient = window.connectionManager.getApiClient(serverId);
+    const apiClient = ConnectionManager.getApiClient(serverId);
     return apiClient.updateUserItemRating(apiClient.getCurrentUserId(), id, isLiked);
 }
 
 function played(id, serverId, isPlayed) {
-    const apiClient = window.connectionManager.getApiClient(serverId);
+    const apiClient = ConnectionManager.getApiClient(serverId);
 
     const method = isPlayed ? 'markPlayed' : 'markUnplayed';
 
@@ -201,13 +201,13 @@ function played(id, serverId, isPlayed) {
 }
 
 function favorite(id, serverId, isFavorite) {
-    const apiClient = window.connectionManager.getApiClient(serverId);
+    const apiClient = ConnectionManager.getApiClient(serverId);
 
     return apiClient.updateFavoriteStatus(apiClient.getCurrentUserId(), id, isFavorite);
 }
 
 function clearLike(id, serverId) {
-    const apiClient = window.connectionManager.getApiClient(serverId);
+    const apiClient = ConnectionManager.getApiClient(serverId);
 
     return apiClient.clearUserItemRating(apiClient.getCurrentUserId(), id);
 }
diff --git a/src/components/viewManager/viewManager.js b/src/components/viewManager/viewManager.js
index cfcd67cf8..91212e2cc 100644
--- a/src/components/viewManager/viewManager.js
+++ b/src/components/viewManager/viewManager.js
@@ -1,6 +1,5 @@
 import viewContainer from '../viewContainer';
 import focusManager from '../focusManager';
-import queryString from 'query-string';
 import layoutManager from '../layoutManager';
 
 let currentView;
@@ -101,7 +100,7 @@ function dispatchViewEvent(view, eventInfo, eventName, isCancellable) {
 function getViewEventDetail(view, options, isRestore) {
     const url = options.url;
     const index = url.indexOf('?');
-    const params = index === -1 ? {} : queryString.parse(url.substring(index + 1));
+    const params = new URLSearchParams(url.substring(index + 1));
 
     return {
         detail: {
diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js
index 692cc020b..e5a34eadc 100644
--- a/src/controllers/dashboard/dashboard.js
+++ b/src/controllers/dashboard/dashboard.js
@@ -1,5 +1,5 @@
 import datetime from '../../scripts/datetime';
-import { connectionManager, events } from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import itemHelper from '../../components/itemHelper';
 import serverNotifications from '../../scripts/serverNotifications';
 import dom from '../../scripts/dom';
@@ -60,7 +60,7 @@ import taskButton from '../../scripts/taskbutton';
                 confirmText: globalize.translate('ButtonSend')
             }).then(function (text) {
                 if (text) {
-                    window.connectionManager.getApiClient(session.ServerId).sendMessageCommand(session.Id, {
+                    ConnectionManager.getApiClient(session.ServerId).sendMessageCommand(session.Id, {
                         Text: text,
                         TimeoutMs: 5e3
                     });
@@ -73,7 +73,7 @@ import taskButton from '../../scripts/taskbutton';
         import('../../components/actionSheet/actionSheet').then(({default: actionsheet}) => {
             const menuItems = [];
 
-            if (session.ServerId && session.DeviceId !== window.connectionManager.deviceId()) {
+            if (session.ServerId && session.DeviceId !== ConnectionManager.deviceId()) {
                 menuItems.push({
                     name: globalize.translate('SendMessage'),
                     id: 'sendmessage'
@@ -123,9 +123,9 @@ import taskButton from '../../scripts/taskbutton';
                     } else if (btn.classList.contains('btnSessionSendMessage')) {
                         showSendMessageForm(btn, session);
                     } else if (btn.classList.contains('btnSessionStop')) {
-                        window.connectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'Stop');
+                        ConnectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'Stop');
                     } else if (btn.classList.contains('btnSessionPlayPause') && session.PlayState) {
-                        window.connectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'PlayPause');
+                        ConnectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'PlayPause');
                     }
                 }
             }
@@ -313,7 +313,7 @@ import taskButton from '../../scripts/taskbutton';
                 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 && session.SupportedCommands.indexOf('DisplayMessage') !== -1 && session.DeviceId !== window.connectionManager.deviceId() ? '' : ' hide';
+                btnCssClass = session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1 && session.DeviceId !== ConnectionManager.deviceId() ? '' : ' hide';
                 html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionSendMessage paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate('SendMessage') + '"><span class="material-icons message"></span></button>';
                 html += '</div>';
 
diff --git a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js
index 436a06b74..7c35bf1fc 100644
--- a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js
+++ b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js
@@ -1,6 +1,6 @@
 import 'jquery';
 import loading from '../../../components/loading/loading';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import globalize from '../../../scripts/globalize';
 import serverNotifications from '../../../scripts/serverNotifications';
 import { formatDistance, formatDistanceToNow } from 'date-fns';
diff --git a/src/controllers/favorites.js b/src/controllers/favorites.js
index 01cd75e6e..41372aa21 100644
--- a/src/controllers/favorites.js
+++ b/src/controllers/favorites.js
@@ -1,9 +1,9 @@
-import appRouter from '../components/appRouter';
+import { appRouter } from '../components/appRouter';
 import cardBuilder from '../components/cardbuilder/cardBuilder';
 import dom from '../scripts/dom';
 import globalize from '../scripts/globalize';
-import connectionManager from 'jellyfin-apiclient';
-import appHost from '../components/apphost';
+import { ConnectionManager } from 'jellyfin-apiclient';
+import { appHost } from '../components/apphost';
 import layoutManager from '../components/layoutManager';
 import focusManager from '../components/focusManager';
 import '../elements/emby-itemscontainer/emby-itemscontainer';
@@ -270,7 +270,7 @@ class FavoritesTab {
     constructor(view, params) {
         this.view = view;
         this.params = params;
-        this.apiClient = window.connectionManager.currentApiClient();
+        this.apiClient = ConnectionManager.currentApiClient();
         this.sectionsContainer = view.querySelector('.sections');
         createSections(this, this.sectionsContainer, this.apiClient);
     }
diff --git a/src/controllers/home.js b/src/controllers/home.js
index 56ad48126..ed447cac8 100644
--- a/src/controllers/home.js
+++ b/src/controllers/home.js
@@ -44,15 +44,15 @@ class HomeView extends TabbedView {
 
         switch (index) {
             case 0:
-                depends = 'controllers/hometab';
+                depends = 'hometab';
                 break;
 
             case 1:
-                depends = 'controllers/favorites';
+                depends = 'favorites';
         }
 
         const instance = this;
-        return import(depends).then(({ default: controllerFactory }) => {
+        return import(/* webpackChunkName: "[request]" */ `../controllers/${depends}`).then(({ default: controllerFactory }) => {
             let controller = instance.tabControllers[index];
 
             if (!controller) {
diff --git a/src/controllers/hometab.js b/src/controllers/hometab.js
index 65047dbaa..d1e18b42c 100644
--- a/src/controllers/hometab.js
+++ b/src/controllers/hometab.js
@@ -1,6 +1,5 @@
 import * as userSettings from '../scripts/settings/userSettings';
 import loading from '../components/loading/loading';
-import connectionManager from 'jellyfin-apiclient';
 import focusManager from '../components/focusManager';
 import homeSections from '../components/homesections/homesections';
 import '../elements/emby-itemscontainer/emby-itemscontainer';
@@ -9,7 +8,7 @@ class HomeTab {
     constructor(view, params) {
         this.view = view;
         this.params = params;
-        this.apiClient = window.connectionManager.currentApiClient();
+        this.apiClient = window.ConnectionManager.currentApiClient();
         this.sectionsContainer = view.querySelector('.sections');
         view.querySelector('.sections').addEventListener('settingschange', onHomeScreenSettingsChanged.bind(this));
     }
diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js
index 16a77076a..02da9460c 100644
--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@@ -1,8 +1,8 @@
-import appHost from '../../components/apphost';
+import { appHost } from '../../components/apphost';
 import loading from '../../components/loading/loading';
-import appRouter from '../../components/appRouter';
+import { appRouter } from '../../components/appRouter';
 import layoutManager from '../../components/layoutManager';
-import { connectionManager, events } from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import * as userSettings from '../../scripts/settings/userSettings';
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import datetime from '../../scripts/datetime';
@@ -17,7 +17,7 @@ import imageLoader from '../../components/images/imageLoader';
 import libraryMenu from '../../scripts/libraryMenu';
 import globalize from '../../scripts/globalize';
 import browser from '../../scripts/browser';
-import playbackManager from '../../components/playback/playbackmanager';
+import { playbackManager } from '../../components/playback/playbackmanager';
 import '../../assets/css/scrollstyles.css';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 import '../../elements/emby-checkbox/emby-checkbox';
@@ -563,7 +563,7 @@ function renderDetailPageBackdrop(page, item, apiClient) {
 }
 
 function reloadFromItem(instance, page, params, item, user) {
-    const apiClient = window.connectionManager.getApiClient(item.ServerId);
+    const apiClient = ConnectionManager.getApiClient(item.ServerId);
 
     Emby.Page.setTitle('');
 
@@ -805,7 +805,7 @@ function renderNextUp(page, item, user) {
         return void section.classList.add('hide');
     }
 
-    window.connectionManager.getApiClient(item.ServerId).getNextUpEpisodes({
+    ConnectionManager.getApiClient(item.ServerId).getNextUpEpisodes({
         SeriesId: item.Id,
         UserId: user.Id
     }).then(function (result) {
@@ -1209,7 +1209,7 @@ function renderSimilarItems(page, item, context) {
         }
 
         similarCollapsible.classList.remove('hide');
-        const apiClient = window.connectionManager.getApiClient(item.ServerId);
+        const apiClient = ConnectionManager.getApiClient(item.ServerId);
         const options = {
             userId: apiClient.getCurrentUserId(),
             limit: 12,
@@ -1323,7 +1323,7 @@ function renderChildren(page, item) {
     }
 
     let promise;
-    const apiClient = window.connectionManager.getApiClient(item.ServerId);
+    const apiClient = ConnectionManager.getApiClient(item.ServerId);
     const userId = apiClient.getCurrentUserId();
 
     if (item.Type == 'Series') {
@@ -1571,7 +1571,7 @@ function renderChannelGuide(page, apiClient, item) {
 }
 
 function renderSeriesSchedule(page, item) {
-    const apiClient = window.connectionManager.getApiClient(item.ServerId);
+    const apiClient = ConnectionManager.getApiClient(item.ServerId);
     apiClient.getLiveTvPrograms({
         UserId: apiClient.getCurrentUserId(),
         HasAired: false,
@@ -1731,7 +1731,7 @@ function renderCollectionItemType(page, parentItem, type, items) {
 }
 
 function renderMusicVideos(page, item, user) {
-    window.connectionManager.getApiClient(item.ServerId).getItems(user.Id, {
+    ConnectionManager.getApiClient(item.ServerId).getItems(user.Id, {
         SortBy: 'SortName',
         SortOrder: 'Ascending',
         IncludeItemTypes: 'MusicVideo',
@@ -1751,7 +1751,7 @@ function renderMusicVideos(page, item, user) {
 }
 
 function renderAdditionalParts(page, item, user) {
-    window.connectionManager.getApiClient(item.ServerId).getAdditionalVideoParts(user.Id, item.Id).then(function (result) {
+    ConnectionManager.getApiClient(item.ServerId).getAdditionalVideoParts(user.Id, item.Id).then(function (result) {
         if (result.Items.length) {
             page.querySelector('#additionalPartsCollapsible').classList.remove('hide');
             const additionalPartsContent = page.querySelector('#additionalPartsContent');
@@ -1796,7 +1796,7 @@ function getVideosHtml(items) {
 }
 
 function renderSpecials(page, item, user) {
-    window.connectionManager.getApiClient(item.ServerId).getSpecialFeatures(user.Id, item.Id).then(function (specials) {
+    ConnectionManager.getApiClient(item.ServerId).getSpecialFeatures(user.Id, item.Id).then(function (specials) {
         const specialsContent = page.querySelector('#specialsContent');
         specialsContent.innerHTML = getVideosHtml(specials);
         imageLoader.lazyChildren(specialsContent);
@@ -1852,7 +1852,7 @@ export default function (view, params) {
     function reload(instance, page, params) {
         loading.show();
 
-        const apiClient = params.serverId ? window.connectionManager.getApiClient(params.serverId) : ApiClient;
+        const apiClient = params.serverId ? ConnectionManager.getApiClient(params.serverId) : ApiClient;
 
         Promise.all([getPromise(apiClient, params), apiClient.getCurrentUser()]).then(([item, user]) => {
             currentItem = item;
@@ -1901,7 +1901,7 @@ export default function (view, params) {
         const item = currentItem;
 
         if (item.Type === 'Program') {
-            const apiClient = window.connectionManager.getApiClient(item.ServerId);
+            const apiClient = ConnectionManager.getApiClient(item.ServerId);
             return void apiClient.getLiveTvChannel(item.ChannelId, apiClient.getCurrentUserId()).then(function (channel) {
                 playbackManager.play({
                     items: [channel]
@@ -1938,7 +1938,7 @@ export default function (view, params) {
 
     function onCancelTimerClick() {
         import('../../components/recordingcreator/recordinghelper').then(({ default: recordingHelper }) => {
-            recordingHelper.cancelTimer(window.connectionManager.getApiClient(currentItem.ServerId), currentItem.TimerId).then(function () {
+            recordingHelper.cancelTimer(ConnectionManager.getApiClient(currentItem.ServerId), currentItem.TimerId).then(function () {
                 reload(self, view, params);
             });
         });
@@ -2002,7 +2002,7 @@ export default function (view, params) {
 
     let currentItem;
     const self = this;
-    const apiClient = params.serverId ? window.connectionManager.getApiClient(params.serverId) : ApiClient;
+    const apiClient = params.serverId ? ConnectionManager.getApiClient(params.serverId) : ApiClient;
 
     const btnResume = view.querySelector('.mainDetailButtons .btnResume');
     const btnPlay = view.querySelector('.mainDetailButtons .btnPlay');
diff --git a/src/controllers/list.js b/src/controllers/list.js
index d356d800a..a18fbeb7f 100644
--- a/src/controllers/list.js
+++ b/src/controllers/list.js
@@ -5,9 +5,9 @@ import * as userSettings from '../scripts/settings/userSettings';
 import focusManager from '../components/focusManager';
 import cardBuilder from '../components/cardbuilder/cardBuilder';
 import loading from '../components/loading/loading';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import AlphaNumericShortcuts from '../scripts/alphanumericshortcuts';
-import playbackManager from '../components/playback/playbackmanager';
+import { playbackManager } from '../components/playback/playbackmanager';
 import AlphaPicker from '../components/alphaPicker/alphaPicker';
 import '../elements/emby-itemscontainer/emby-itemscontainer';
 import '../elements/emby-scroller/emby-scroller';
@@ -16,7 +16,7 @@ import '../elements/emby-scroller/emby-scroller';
 
     function getInitialLiveTvQuery(instance, params) {
         const query = {
-            UserId: window.connectionManager.getApiClient(params.serverId).getCurrentUserId(),
+            UserId: ConnectionManager.getApiClient(params.serverId).getCurrentUserId(),
             StartIndex: 0,
             Fields: 'ChannelInfo,PrimaryImageAspectRatio',
             Limit: 300
@@ -232,7 +232,7 @@ import '../elements/emby-scroller/emby-scroller';
     }
 
     function getItems(instance, params, item, sortBy, startIndex, limit) {
-        const apiClient = window.connectionManager.getApiClient(params.serverId);
+        const apiClient = ConnectionManager.getApiClient(params.serverId);
 
         instance.queryRecursive = false;
         if (params.type === 'Recordings') {
@@ -333,7 +333,7 @@ import '../elements/emby-scroller/emby-scroller';
             return Promise.resolve(null);
         }
 
-        const apiClient = window.connectionManager.getApiClient(params.serverId);
+        const apiClient = ConnectionManager.getApiClient(params.serverId);
         const itemId = params.genreId || params.musicGenreId || params.studioId || params.personId || params.parentId;
 
         if (itemId) {
diff --git a/src/controllers/livetv/livetvchannels.js b/src/controllers/livetv/livetvchannels.js
index 9de6e7178..4ab1f45ed 100644
--- a/src/controllers/livetv/livetvchannels.js
+++ b/src/controllers/livetv/livetvchannels.js
@@ -2,7 +2,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import imageLoader from '../../components/images/imageLoader';
 import libraryBrowser from '../../scripts/libraryBrowser';
 import loading from '../../components/loading/loading';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import * as userSettings from '../../scripts/settings/userSettings';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
diff --git a/src/controllers/livetvguideprovider.js b/src/controllers/livetvguideprovider.js
index 750bbff47..59a19d599 100644
--- a/src/controllers/livetvguideprovider.js
+++ b/src/controllers/livetvguideprovider.js
@@ -1,4 +1,4 @@
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import loading from '../components/loading/loading';
 import globalize from '../scripts/globalize';
 
diff --git a/src/controllers/movies/moviegenres.js b/src/controllers/movies/moviegenres.js
index 2b106dc36..153cc6494 100644
--- a/src/controllers/movies/moviegenres.js
+++ b/src/controllers/movies/moviegenres.js
@@ -4,7 +4,7 @@ import libraryBrowser from '../../scripts/libraryBrowser';
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import lazyLoader from '../../components/lazyLoader/lazyLoaderIntersectionObserver';
 import globalize from '../../scripts/globalize';
-import appRouter from '../../components/appRouter';
+import { appRouter } from '../../components/appRouter';
 import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
diff --git a/src/controllers/movies/movies.js b/src/controllers/movies/movies.js
index 648290abe..736489d3d 100644
--- a/src/controllers/movies/movies.js
+++ b/src/controllers/movies/movies.js
@@ -1,6 +1,6 @@
 import loading from '../../components/loading/loading';
 import * as userSettings from '../../scripts/settings/userSettings';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import libraryBrowser from '../../scripts/libraryBrowser';
 import { AlphaPicker } from '../../components/alphaPicker/alphaPicker';
 import listView from '../../components/listview/listview';
diff --git a/src/controllers/movies/moviesrecommended.js b/src/controllers/movies/moviesrecommended.js
index 1270e9f13..0c02e7c01 100644
--- a/src/controllers/movies/moviesrecommended.js
+++ b/src/controllers/movies/moviesrecommended.js
@@ -1,5 +1,5 @@
 
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import layoutManager from '../../components/layoutManager';
 import inputManager from '../../scripts/inputManager';
 import * as userSettings from '../../scripts/settings/userSettings';
@@ -8,7 +8,7 @@ import * as mainTabsManager from '../../components/maintabsmanager';
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import dom from '../../scripts/dom';
 import imageLoader from '../../components/images/imageLoader';
-import playbackManager from '../../components/playback/playbackmanager';
+import { playbackManager } from '../../components/playback/playbackmanager';
 import globalize from '../../scripts/globalize';
 import '../../elements/emby-scroller/emby-scroller';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
diff --git a/src/controllers/movies/movietrailers.js b/src/controllers/movies/movietrailers.js
index 4f92b139b..92be37720 100644
--- a/src/controllers/movies/movietrailers.js
+++ b/src/controllers/movies/movietrailers.js
@@ -1,5 +1,5 @@
 import loading from '../../components/loading/loading';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import libraryBrowser from '../../scripts/libraryBrowser';
 import imageLoader from '../../components/images/imageLoader';
 import { AlphaPicker } from '../../components/alphaPicker/alphaPicker';
diff --git a/src/controllers/music/musicalbums.js b/src/controllers/music/musicalbums.js
index d9abe48fe..32eb38a84 100644
--- a/src/controllers/music/musicalbums.js
+++ b/src/controllers/music/musicalbums.js
@@ -1,6 +1,6 @@
-import playbackManager from '../../components/playback/playbackmanager';
+import { playbackManager } from '../../components/playback/playbackmanager';
 import loading from '../../components/loading/loading';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import libraryBrowser from '../../scripts/libraryBrowser';
 import imageLoader from '../../components/images/imageLoader';
 import AlphaPicker from '../../components/alphaPicker/alphaPicker';
diff --git a/src/controllers/music/musicartists.js b/src/controllers/music/musicartists.js
index a7c01220c..232b2fdd1 100644
--- a/src/controllers/music/musicartists.js
+++ b/src/controllers/music/musicartists.js
@@ -1,5 +1,5 @@
 import loading from '../../components/loading/loading';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import libraryBrowser from '../../scripts/libraryBrowser';
 import imageLoader from '../../components/images/imageLoader';
 import { AlphaPicker } from '../../components/alphaPicker/alphaPicker';
diff --git a/src/controllers/music/songs.js b/src/controllers/music/songs.js
index cc526df6b..133d9bdab 100644
--- a/src/controllers/music/songs.js
+++ b/src/controllers/music/songs.js
@@ -1,5 +1,5 @@
 
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import libraryBrowser from '../../scripts/libraryBrowser';
 import imageLoader from '../../components/images/imageLoader';
 import listView from '../../components/listview/listview';
diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js
index 5e99971a8..9d531bfdc 100644
--- a/src/controllers/playback/video/index.js
+++ b/src/controllers/playback/video/index.js
@@ -1,4 +1,4 @@
-import playbackManager from '../../../components/playback/playbackmanager';
+import { playbackManager } from '../../../components/playback/playbackmanager';
 import dom from '../../../scripts/dom';
 import inputManager from '../../../scripts/inputManager';
 import mouseManager from '../../../scripts/mouseManager';
@@ -6,10 +6,10 @@ import datetime from '../../../scripts/datetime';
 import itemHelper from '../../../components/itemHelper';
 import mediaInfo from '../../../components/mediainfo/mediainfo';
 import focusManager from '../../../components/focusManager';
-import { connectionManager, events } from 'jellyfin-apiclient';;
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import browser from '../../../scripts/browser';
 import globalize from '../../../scripts/globalize';
-import appHost from '../../../components/apphost';
+import { appHost } from '../../../components/apphost';
 import layoutManager from '../../../components/layoutManager';
 import * as userSettings from '../../../scripts/settings/userSettings';
 import keyboardnavigation from '../../../scripts/keyboardNavigation';
@@ -73,7 +73,7 @@ import '../../../assets/css/videoosd.css';
 
         function getDisplayItem(item) {
             if (item.Type === 'TvChannel') {
-                const apiClient = window.connectionManager.getApiClient(item.ServerId);
+                const apiClient = ConnectionManager.getApiClient(item.ServerId);
                 return apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (refreshedItem) {
                     return {
                         originalItem: refreshedItem,
@@ -97,7 +97,7 @@ import '../../../assets/css/videoosd.css';
                 return void view.querySelector('.btnRecord').classList.add('hide');
             }
 
-            window.connectionManager.getApiClient(item.ServerId).getCurrentUser().then(function (user) {
+            ConnectionManager.getApiClient(item.ServerId).getCurrentUser().then(function (user) {
                 if (user.Policy.EnableLiveTvManagement) {
                     import('../../../components/recordingcreator/recordingbutton').then((RecordingButton) => {
                         if (recordingButtonManager) {
@@ -1515,7 +1515,7 @@ import '../../../assets/css/videoosd.css';
             const item = currentItem;
 
             if (item && item.Chapters && item.Chapters.length && item.Chapters[0].ImageTag) {
-                const html = getChapterBubbleHtml(window.connectionManager.getApiClient(item.ServerId), item, item.Chapters, ticks);
+                const html = getChapterBubbleHtml(ConnectionManager.getApiClient(item.ServerId), item, item.Chapters, ticks);
 
                 if (html) {
                     return html;
diff --git a/src/controllers/searchpage.js b/src/controllers/searchpage.js
index 9b40f6a06..f8cfce373 100644
--- a/src/controllers/searchpage.js
+++ b/src/controllers/searchpage.js
@@ -1,6 +1,6 @@
 import SearchFields from '../components/search/searchfields';
 import SearchResults from '../components/search/searchresults';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 
 export default function (view, params) {
     function onSearch(e, value) {
diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js
index 4aef28b17..e1ac1d125 100644
--- a/src/controllers/session/login/index.js
+++ b/src/controllers/session/login/index.js
@@ -1,7 +1,7 @@
-import appHost from '../../../components/apphost';
+import { appHost } from '../../../components/apphost';
 import appSettings from '../../../scripts/settings/appSettings';
 import dom from '../../../scripts/dom';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import loading from '../../../components/loading/loading';
 import layoutManager from '../../../components/layoutManager';
 import libraryMenu from '../../../scripts/libraryMenu';
@@ -192,7 +192,7 @@ import '../../../elements/emby-checkbox/emby-checkbox';
             const serverId = params.serverid;
 
             if (serverId) {
-                return window.connectionManager.getOrCreateApiClient(serverId);
+                return ConnectionManager.getOrCreateApiClient(serverId);
             }
 
             return ApiClient;
diff --git a/src/controllers/session/selectServer/index.js b/src/controllers/session/selectServer/index.js
index 721cc8c10..accc828ba 100644
--- a/src/controllers/session/selectServer/index.js
+++ b/src/controllers/session/selectServer/index.js
@@ -1,10 +1,10 @@
 import loading from '../../../components/loading/loading';
-import appRouter from '../../../components/appRouter';
+import { appRouter } from '../../../components/appRouter';
 import layoutManager from '../../../components/layoutManager';
 import libraryMenu from '../../../scripts/libraryMenu';
 import appSettings from '../../../scripts/settings/appSettings';
 import focusManager from '../../../components/focusManager';
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import globalize from '../../../scripts/globalize';
 import actionSheet from '../../../components/actionSheet/actionSheet';
 import dom from '../../../scripts/dom';
@@ -113,7 +113,7 @@ import '../../../elements/emby-button/emby-button';
     export default function (view, params) {
         function connectToServer(server) {
             loading.show();
-            window.connectionManager.connectToServer(server, {
+            ConnectionManager.connectToServer(server, {
                 enableAutoLogin: appSettings.enableAutoLogin()
             }).then(function (result) {
                 loading.hide();
@@ -145,7 +145,7 @@ import '../../../elements/emby-button/emby-button';
 
         function deleteServer(server) {
             loading.show();
-            window.connectionManager.deleteServer(server.Id).then(function () {
+            ConnectionManager.deleteServer(server.Id).then(function () {
                 loading.hide();
                 loadServers();
             });
@@ -187,7 +187,7 @@ import '../../../elements/emby-button/emby-button';
 
         function loadServers() {
             loading.show();
-            window.connectionManager.getAvailableServers().then(onServersRetrieved);
+            ConnectionManager.getAvailableServers().then(onServersRetrieved);
         }
 
         let servers;
diff --git a/src/controllers/shows/episodes.js b/src/controllers/shows/episodes.js
index fb78c47b8..76c620f10 100644
--- a/src/controllers/shows/episodes.js
+++ b/src/controllers/shows/episodes.js
@@ -1,5 +1,5 @@
 import loading from '../../components/loading/loading';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import libraryBrowser from '../../scripts/libraryBrowser';
 import imageLoader from '../../components/images/imageLoader';
 import listView from '../../components/listview/listview';
diff --git a/src/controllers/shows/tvgenres.js b/src/controllers/shows/tvgenres.js
index 75e89ea9c..82a15bb0c 100644
--- a/src/controllers/shows/tvgenres.js
+++ b/src/controllers/shows/tvgenres.js
@@ -4,7 +4,7 @@ import libraryBrowser from '../../scripts/libraryBrowser';
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import lazyLoader from '../../components/lazyLoader/lazyLoaderIntersectionObserver';
 import globalize from '../../scripts/globalize';
-import appRouter from '../../components/appRouter';
+import { appRouter } from '../../components/appRouter';
 import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
diff --git a/src/controllers/shows/tvrecommended.js b/src/controllers/shows/tvrecommended.js
index d778beebf..33cd66657 100644
--- a/src/controllers/shows/tvrecommended.js
+++ b/src/controllers/shows/tvrecommended.js
@@ -1,5 +1,5 @@
 
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import inputManager from '../../scripts/inputManager';
 import libraryMenu from '../../scripts/libraryMenu';
 import layoutManager from '../../components/layoutManager';
@@ -7,7 +7,7 @@ import loading from '../../components/loading/loading';
 import dom from '../../scripts/dom';
 import * as userSettings from '../../scripts/settings/userSettings';
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
-import playbackManager from '../../components/playback/playbackmanager';
+import { playbackManager } from '../../components/playback/playbackmanager';
 import * as mainTabsManager from '../../components/maintabsmanager';
 import globalize from '../../scripts/globalize';
 import '../../assets/css/scrollstyles.css';
diff --git a/src/controllers/shows/tvshows.js b/src/controllers/shows/tvshows.js
index b59e5a2c4..2fe940a06 100644
--- a/src/controllers/shows/tvshows.js
+++ b/src/controllers/shows/tvshows.js
@@ -1,5 +1,5 @@
 import loading from '../../components/loading/loading';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import libraryBrowser from '../../scripts/libraryBrowser';
 import imageLoader from '../../components/images/imageLoader';
 import listView from '../../components/listview/listview';
diff --git a/src/controllers/user/menu/index.js b/src/controllers/user/menu/index.js
index e480d0258..f3f92386e 100644
--- a/src/controllers/user/menu/index.js
+++ b/src/controllers/user/menu/index.js
@@ -1,4 +1,4 @@
-import appHost from '../../../components/apphost';
+import { appHost } from '../../../components/apphost';
 import '../../../components/listview/listview.css';
 import '../../../elements/emby-button/emby-button';
 import layoutManager from '../../../components/layoutManager';
diff --git a/src/controllers/user/profile/index.js b/src/controllers/user/profile/index.js
index deedaf306..113f08c4d 100644
--- a/src/controllers/user/profile/index.js
+++ b/src/controllers/user/profile/index.js
@@ -1,7 +1,7 @@
 import UserPasswordPage from '../../dashboard/users/userpasswordpage';
 import loading from '../../../components/loading/loading';
 import libraryMenu from '../../../scripts/libraryMenu';
-import appHost from '../../../components/apphost';
+import { appHost } from '../../../components/apphost';
 import globalize from '../../../scripts/globalize';
 import '../../../elements/emby-button/emby-button';
 
diff --git a/src/elements/emby-button/emby-button.js b/src/elements/emby-button/emby-button.js
index 9eefbcbed..e86901b9a 100644
--- a/src/elements/emby-button/emby-button.js
+++ b/src/elements/emby-button/emby-button.js
@@ -1,12 +1,65 @@
 import { removeEventListener, addEventListener } from '../../scripts/dom';
 import layoutManager from '../../components/layoutManager';
 import shell from '../../scripts/shell';
-import appRouter from '../../components/appRouter';
-import appHost from '../../components/apphost';
+import { appRouter } from '../../components/appRouter';
+import { appHost } from '../../components/apphost';
 import './emby-button.css';
 
-const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
-const EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype);
+class EmbyButton extends HTMLButtonElement {
+    createdCallback() {
+        if (this.classList.contains('emby-button')) {
+            return;
+        }
+
+        this.classList.add('../../elements/emby-button/emby-button');
+        // TODO replace all instances of element-showfocus with this method
+        if (layoutManager.tv) {
+            // handles all special css for tv layout
+            // this method utilizes class chaining
+            this.classList.add('show-focus');
+        }
+    }
+
+    attachedCallback() {
+        if (this.tagName === 'A') {
+            removeEventListener(this, 'click', onAnchorClick, {});
+            addEventListener(this, 'click', onAnchorClick, {});
+
+            if (this.getAttribute('data-autohide') === 'true') {
+                if (appHost.supports('externallinks')) {
+                    this.classList.remove('hide');
+                } else {
+                    this.classList.add('hide');
+                }
+            }
+        }
+    }
+
+    detachedCallback() {
+        removeEventListener(this, 'click', onAnchorClick, {});
+    }
+}
+
+class EmbyLinkButton extends HTMLAnchorElement {
+    attachedCallback() {
+        if (this.tagName === 'A') {
+            removeEventListener(this, 'click', onAnchorClick, {});
+            addEventListener(this, 'click', onAnchorClick, {});
+
+            if (this.getAttribute('data-autohide') === 'true') {
+                if (appHost.supports('externallinks')) {
+                    this.classList.remove('hide');
+                } else {
+                    this.classList.add('hide');
+                }
+            }
+        }
+    }
+
+    detachedCallback() {
+        removeEventListener(this, 'click', onAnchorClick, {});
+    }
+}
 
 function onAnchorClick(e) {
     const href = this.getAttribute('href') || '';
@@ -24,50 +77,8 @@ function onAnchorClick(e) {
     }
 }
 
-EmbyButtonPrototype.createdCallback = function () {
-    if (this.classList.contains('emby-button')) {
-        return;
-    }
+customElements.define('emby-button', EmbyButton, { extends: 'button' });
 
-    this.classList.add('../../elements/emby-button/emby-button');
-    // TODO replace all instances of element-showfocus with this method
-    if (layoutManager.tv) {
-        // handles all special css for tv layout
-        // this method utilizes class chaining
-        this.classList.add('show-focus');
-    }
-};
+customElements.define('emby-linkbutton', EmbyLinkButton, { extends: 'a' });
 
-EmbyButtonPrototype.attachedCallback = function () {
-    if (this.tagName === 'A') {
-        removeEventListener(this, 'click', onAnchorClick, {});
-        addEventListener(this, 'click', onAnchorClick, {});
-
-        if (this.getAttribute('data-autohide') === 'true') {
-            if (appHost.supports('externallinks')) {
-                this.classList.remove('hide');
-            } else {
-                this.classList.add('hide');
-            }
-        }
-    }
-};
-
-EmbyButtonPrototype.detachedCallback = function () {
-    removeEventListener(this, 'click', onAnchorClick, {});
-};
-
-EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback;
-EmbyLinkButtonPrototype.attachedCallback = EmbyButtonPrototype.attachedCallback;
-
-document.registerElement('../../elements/emby-button/emby-button', {
-    prototype: EmbyButtonPrototype,
-    extends: 'button'
-});
-
-document.registerElement('emby-linkbutton', {
-    prototype: EmbyLinkButtonPrototype,
-    extends: 'a'
-});
-
-export default EmbyButtonPrototype;
+export default EmbyButton;
diff --git a/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js b/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js
index 0fd9eeb95..b71a5ab4e 100644
--- a/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js
+++ b/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js
@@ -1,7 +1,7 @@
 import EmbyProgressRing from '../emby-progressring/emby-progressring';
 import dom from '../../scripts/dom';
 import serverNotifications from '../../scripts/serverNotifications';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import 'webcomponents.js';
 
 /* eslint-disable indent */
diff --git a/src/elements/emby-itemscontainer/emby-itemscontainer.js b/src/elements/emby-itemscontainer/emby-itemscontainer.js
index 1f8b1607a..eff9ba255 100644
--- a/src/elements/emby-itemscontainer/emby-itemscontainer.js
+++ b/src/elements/emby-itemscontainer/emby-itemscontainer.js
@@ -1,8 +1,7 @@
 
 import itemShortcuts from '../../components/shortcuts';
 import inputManager from '../../scripts/inputManager';
-import connectionManager from 'jellyfin-apiclient';
-import playbackManager from '../../components/playback/playbackmanager';
+import { playbackManager } from '../../components/playback/playbackmanager';
 import imageLoader from '../../components/images/imageLoader';
 import layoutManager from '../../components/layoutManager';
 import browser from '../../scripts/browser';
@@ -10,7 +9,7 @@ import dom from '../../scripts/dom';
 import loading from '../../components/loading/loading';
 import focusManager from '../../components/focusManager';
 import serverNotifications from '../../scripts/serverNotifications';
-import events from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import 'webcomponents.js';
 
 /* eslint-disable indent */
@@ -104,7 +103,7 @@ import 'webcomponents.js';
         }
 
         const serverId = el.getAttribute('data-serverid');
-        const apiClient = window.connectionManager.getApiClient(serverId);
+        const apiClient = ConnectionManager.getApiClient(serverId);
 
         loading.show();
 
diff --git a/src/elements/emby-playstatebutton/emby-playstatebutton.js b/src/elements/emby-playstatebutton/emby-playstatebutton.js
index 26a5c8280..610d732c9 100644
--- a/src/elements/emby-playstatebutton/emby-playstatebutton.js
+++ b/src/elements/emby-playstatebutton/emby-playstatebutton.js
@@ -1,6 +1,5 @@
-import connectionManager from 'jellyfin-apiclient';
 import serverNotifications from '../../scripts/serverNotifications';
-import events from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 import EmbyButtonPrototype from '../../elements/emby-button/emby-button';
 
@@ -24,7 +23,7 @@ import EmbyButtonPrototype from '../../elements/emby-button/emby-button';
         const button = this;
         const id = button.getAttribute('data-id');
         const serverId = button.getAttribute('data-serverid');
-        const apiClient = window.connectionManager.getApiClient(serverId);
+        const apiClient = ConnectionManager.getApiClient(serverId);
 
         if (!button.classList.contains('playstatebutton-played')) {
             apiClient.markPlayed(apiClient.getCurrentUserId(), id, new Date());
diff --git a/src/elements/emby-ratingbutton/emby-ratingbutton.js b/src/elements/emby-ratingbutton/emby-ratingbutton.js
index 42f7be68f..15c290fa6 100644
--- a/src/elements/emby-ratingbutton/emby-ratingbutton.js
+++ b/src/elements/emby-ratingbutton/emby-ratingbutton.js
@@ -1,6 +1,5 @@
-import connectionManager from 'jellyfin-apiclient';
 import serverNotifications from '../../scripts/serverNotifications';
-import events from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 import EmbyButtonPrototype from '../emby-button/emby-button';
 
@@ -28,7 +27,7 @@ import EmbyButtonPrototype from '../emby-button/emby-button';
         const button = this;
         const id = button.getAttribute('data-id');
         const serverId = button.getAttribute('data-serverid');
-        const apiClient = window.connectionManager.getApiClient(serverId);
+        const apiClient = ConnectionManager.getApiClient(serverId);
 
         let likes = this.getAttribute('data-likes');
         const isFavorite = this.getAttribute('data-isfavorite') === 'true';
diff --git a/src/elements/emby-tabs/emby-tabs.js b/src/elements/emby-tabs/emby-tabs.js
index e34d30d47..51144c7d3 100644
--- a/src/elements/emby-tabs/emby-tabs.js
+++ b/src/elements/emby-tabs/emby-tabs.js
@@ -7,8 +7,6 @@ import './emby-tabs.css';
 import '../../assets/css/scrollstyles.css';
 
 /* eslint-disable indent */
-
-    const EmbyTabs = Object.create(HTMLDivElement.prototype);
     const buttonClass = 'emby-tab-button';
     const activeButtonClass = buttonClass + '-active';
 
@@ -145,182 +143,181 @@ import '../../assets/css/scrollstyles.css';
         }
     }
 
-    EmbyTabs.createdCallback = function () {
-        if (this.classList.contains('emby-tabs')) {
-            return;
+    class EmbyTabs extends HTMLDivElement {
+        createdCallback() {
+            if (this.classList.contains('emby-tabs')) {
+                return;
+            }
+            this.classList.add('emby-tabs');
+            this.classList.add('focusable');
+
+            dom.addEventListener(this, 'click', onClick, {
+                passive: true
+            });
+
+            dom.addEventListener(this, 'focusout', onFocusOut);
         }
-        this.classList.add('emby-tabs');
-        this.classList.add('focusable');
 
-        dom.addEventListener(this, 'click', onClick, {
-            passive: true
-        });
+        focus() {
+            const selected = this.querySelector('.' + activeButtonClass);
 
-        dom.addEventListener(this, 'focusout', onFocusOut);
-    };
-
-    EmbyTabs.focus = function onFocusIn() {
-        const selectedTab = this.querySelector('.' + activeButtonClass);
-        const lastFocused = this.querySelector('.lastFocused');
-
-        if (lastFocused) {
-            focusManager.focus(lastFocused);
-        } else if (selectedTab) {
-            focusManager.focus(selectedTab);
-        } else {
-            focusManager.autoFocus(this);
-        }
-    };
-
-    EmbyTabs.refresh = function () {
-        if (this.scroller) {
-            this.scroller.reload();
-        }
-    };
-
-    EmbyTabs.attachedCallback = function () {
-        initScroller(this);
-
-        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;
-
-            const tabButtons = this.querySelectorAll('.' + buttonClass);
-
-            const newTabButton = tabButtons[currentIndex];
-
-            if (newTabButton) {
-                setActiveTabButton(newTabButton);
+            if (this.lastFocused) {
+                focusManager.focus(this.lastFocused);
+            } else if (this.selectedTab) {
+                focusManager.focus(this.selectedTab);
+            } else {
+                focusManager.autoFocus(this);
             }
         }
 
-        if (!this.readyFired) {
-            this.readyFired = true;
-            this.dispatchEvent(new CustomEvent('ready', {}));
-        }
-    };
-
-    EmbyTabs.detachedCallback = function () {
-        if (this.scroller) {
-            this.scroller.destroy();
-            this.scroller = null;
+        refresh() {
+            if (this.scroller) {
+                this.scroller.reload();
+            }
         }
 
-        dom.removeEventListener(this, 'click', onClick, {
-            passive: true
-        });
-    };
+        attachedCallback() {
+            console.warn(this);
+            initScroller(this);
 
-    function getSelectedTabButton(elem) {
-        return elem.querySelector('.' + activeButtonClass);
-    }
+            const current = this.querySelector('.' + activeButtonClass);
+            const currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0');
 
-    EmbyTabs.selectedIndex = function (selected, triggerEvent) {
-        const tabs = this;
+            if (currentIndex !== -1) {
+                this.selectedTabIndex = currentIndex;
 
-        if (selected == null) {
-            return tabs.selectedTabIndex || 0;
+                const tabButtons = this.querySelectorAll('.' + buttonClass);
+
+                const newTabButton = tabButtons[currentIndex];
+
+                if (newTabButton) {
+                    setActiveTabButton(newTabButton);
+                }
+            }
+
+            if (!this.readyFired) {
+                this.readyFired = true;
+                this.dispatchEvent(new CustomEvent('ready', {}));
+            }
         }
 
-        const current = tabs.selectedIndex();
+        detachedCallback() {
+            if (this.scroller) {
+                this.scroller.destroy();
+                this.scroller = null;
+            }
 
-        tabs.selectedTabIndex = selected;
+            dom.removeEventListener(this, 'click', onClick, {
+                passive: true
+            });
+        }
 
-        const tabButtons = tabs.querySelectorAll('.' + buttonClass);
+        getSelectedTabButton(elem) {
+            return elem.querySelector('.' + activeButtonClass);
+        }
 
-        if (current === selected || triggerEvent === false) {
-            triggerBeforeTabChange(tabs, selected, current);
+        selectedIndex(selected, triggerEvent) {
+            const tabs = this;
+
+            if (selected == null) {
+                return tabs.selectedTabIndex || 0;
+            }
+
+            const current = tabs.selectedIndex();
+
+            tabs.selectedTabIndex = selected;
+
+            const tabButtons = tabs.querySelectorAll('.' + buttonClass);
+
+            if (current === selected || triggerEvent === false) {
+                triggerBeforeTabChange(tabs, selected, current);
+
+                tabs.dispatchEvent(new CustomEvent('tabchange', {
+                    detail: {
+                        selectedTabIndex: selected
+                    }
+                }));
+
+                const currentTabButton = tabButtons[current];
+                setActiveTabButton(tabButtons[selected]);
+
+                if (current !== selected && currentTabButton) {
+                    currentTabButton.classList.remove(activeButtonClass);
+                }
+            } else {
+                onClick.call(tabs, {
+                    target: tabButtons[selected]
+                });
+            }
+        }
+
+        getSibling(elem, method) {
+            let sibling = elem[method];
+
+            while (sibling) {
+                if (sibling.classList.contains(buttonClass)) {
+                    if (!sibling.classList.contains('hide')) {
+                        return sibling;
+                    }
+                }
+
+                sibling = sibling[method];
+            }
+
+            return null;
+        }
+
+        selectNext() {
+            const current = this.getSelectedTabButton(this);
+
+            const sibling = this.getSibling(current, 'nextSibling');
+
+            if (sibling) {
+                onClick.call(this, {
+                    target: sibling
+                });
+            }
+        }
+
+        selectPrevious() {
+            const current = this.getSelectedTabButton(this);
+
+            const sibling = this.getSibling(current, 'previousSibling');
+
+            if (sibling) {
+                onClick.call(this, {
+                    target: sibling
+                });
+            }
+        }
+
+        triggerBeforeTabChange(selected) {
+            const tabs = this;
+
+            triggerBeforeTabChange(tabs, tabs.selectedIndex());
+        }
+
+        triggerTabChange(selected) {
+            const tabs = this;
 
             tabs.dispatchEvent(new CustomEvent('tabchange', {
                 detail: {
-                    selectedTabIndex: selected
+                    selectedTabIndex: tabs.selectedIndex()
                 }
             }));
-
-            const currentTabButton = tabButtons[current];
-            setActiveTabButton(tabButtons[selected]);
-
-            if (current !== selected && currentTabButton) {
-                currentTabButton.classList.remove(activeButtonClass);
-            }
-        } else {
-            onClick.call(tabs, {
-                target: tabButtons[selected]
-            });
-        }
-    };
-
-    function getSibling(elem, method) {
-        let sibling = elem[method];
-
-        while (sibling) {
-            if (sibling.classList.contains(buttonClass)) {
-                if (!sibling.classList.contains('hide')) {
-                    return sibling;
-                }
-            }
-
-            sibling = sibling[method];
         }
 
-        return null;
+        setTabEnabled(index, enabled) {
+            const btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
+
+            if (enabled) {
+                btn.classList.remove('hide');
+            } else {
+                btn.classList.remove('add');
+            }
+        }
     }
 
-    EmbyTabs.selectNext = function () {
-        const current = getSelectedTabButton(this);
-
-        const sibling = getSibling(current, 'nextSibling');
-
-        if (sibling) {
-            onClick.call(this, {
-                target: sibling
-            });
-        }
-    };
-
-    EmbyTabs.selectPrevious = function () {
-        const current = getSelectedTabButton(this);
-
-        const sibling = getSibling(current, 'previousSibling');
-
-        if (sibling) {
-            onClick.call(this, {
-                target: sibling
-            });
-        }
-    };
-
-    EmbyTabs.triggerBeforeTabChange = function (selected) {
-        const tabs = this;
-
-        triggerBeforeTabChange(tabs, tabs.selectedIndex());
-    };
-
-    EmbyTabs.triggerTabChange = function (selected) {
-        const tabs = this;
-
-        tabs.dispatchEvent(new CustomEvent('tabchange', {
-            detail: {
-                selectedTabIndex: tabs.selectedIndex()
-            }
-        }));
-    };
-
-    EmbyTabs.setTabEnabled = function (index, enabled) {
-        const btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
-
-        if (enabled) {
-            btn.classList.remove('hide');
-        } else {
-            btn.classList.remove('add');
-        }
-    };
-
-    document.registerElement('emby-tabs', {
-        prototype: EmbyTabs,
-        extends: 'div'
-    });
+    customElements.define('emby-tabs', EmbyTabs, { extends: 'div' });
 
 /* eslint-enable indent */
diff --git a/src/libraries/navdrawer/navdrawer.js b/src/libraries/navdrawer/navdrawer.js
index 4af9f56a1..214d86a02 100644
--- a/src/libraries/navdrawer/navdrawer.js
+++ b/src/libraries/navdrawer/navdrawer.js
@@ -8,7 +8,7 @@ import dom from '../../scripts/dom';
 import './navdrawer.css';
 import '../../assets/css/scrollstyles.css';
 
-export default function (options) {
+export function NavigationDrawer(options) {
     function getTouches(e) {
         return e.changedTouches || e.targetTouches || e.touches;
     }
diff --git a/src/libraries/screensavermanager.js b/src/libraries/screensavermanager.js
index 93625449f..7d180fb7f 100644
--- a/src/libraries/screensavermanager.js
+++ b/src/libraries/screensavermanager.js
@@ -1,8 +1,7 @@
-import events from 'jellyfin-apiclient';
-import playbackManager from '../components/playback/playbackmanager';
-import pluginManager from '../components/pluginManager';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
+import { playbackManager } from '../components/playback/playbackmanager';
+import { pluginManager } from '../components/pluginManager';
 import inputManager from '../scripts/inputManager';
-import connectionManager from 'jellyfin-apiclient';
 import * as userSettings from '../scripts/settings/userSettings';
 
 function getMinIdleTime() {
@@ -85,7 +84,7 @@ function ScreenSaverManager() {
 
     this.show = function () {
         let isLoggedIn;
-        const apiClient = window.connectionManager.currentApiClient();
+        const apiClient = ConnectionManager.currentApiClient();
 
         if (apiClient && apiClient.isLoggedIn()) {
             isLoggedIn = true;
diff --git a/src/libraries/scroller.js b/src/libraries/scroller.js
index f2baf5157..e6b7aeae0 100644
--- a/src/libraries/scroller.js
+++ b/src/libraries/scroller.js
@@ -195,6 +195,7 @@ const scrollerFactory = function (frame, options) {
 
         self.frameResizeObserver = new ResizeObserver(onResize, observerOptions);
 
+        console.warn(frame);
         self.frameResizeObserver.observe(frame);
     }
 
diff --git a/src/plugins/backdropScreensaver/plugin.js b/src/plugins/backdropScreensaver/plugin.js
index 917d8f48a..0def71878 100644
--- a/src/plugins/backdropScreensaver/plugin.js
+++ b/src/plugins/backdropScreensaver/plugin.js
@@ -1,4 +1,5 @@
 /* eslint-disable indent */
+import { ConnectionManager } from 'jellyfin-apiclient';
 
 class BackdropScreensaver {
     constructor() {
@@ -20,10 +21,10 @@ class BackdropScreensaver {
                 Limit: 200
             };
 
-            const apiClient = window.connectionManager.currentApiClient();
+            const apiClient = ConnectionManager.currentApiClient();
             apiClient.getItems(apiClient.getCurrentUserId(), query).then((result) => {
                 if (result.Items.length) {
-                    import('slideshow').then(({default: Slideshow}) => {
+                    import('../../components/slideshow/slideshow').then(({default: Slideshow}) => {
                         const newSlideShow = new Slideshow({
                             showTitle: true,
                             cover: true,
diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js
index 60f12f2b5..b513cfe60 100644
--- a/src/plugins/bookPlayer/plugin.js
+++ b/src/plugins/bookPlayer/plugin.js
@@ -1,10 +1,9 @@
-import connectionManager from 'jellyfin-apiclient';
 import loading from '../../components/loading/loading';
-import keyboardnavigation from 'keyboardnavigation';
-import dialogHelper from 'dialogHelper';
-import dom from 'dom';
-import events from 'jellyfin-apiclient';
-import './style';
+import keyboardnavigation from '../../scripts/keyboardNavigation';
+import dialogHelper from '../../components/dialogHelper/dialogHelper';
+import dom from '../../scripts/dom';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
+import './style.css';
 import 'material-design-icons-iconfont';
 import '../../elements/emby-button/paper-icon-button-light';
 
@@ -260,7 +259,7 @@ export class BookPlayer {
         };
 
         const serverId = item.ServerId;
-        const apiClient = window.connectionManager.getApiClient(serverId);
+        const apiClient = ConnectionManager.getApiClient(serverId);
 
         return new Promise((resolve, reject) => {
             import('epubjs').then(({default: epubjs}) => {
diff --git a/src/plugins/bookPlayer/tableOfContents.js b/src/plugins/bookPlayer/tableOfContents.js
index 165c1fa9a..db498c10f 100644
--- a/src/plugins/bookPlayer/tableOfContents.js
+++ b/src/plugins/bookPlayer/tableOfContents.js
@@ -1,4 +1,4 @@
-import dialogHelper from 'dialogHelper';
+import dialogHelper from '../../components/dialogHelper/dialogHelper';
 
 export default class TableOfContents {
     constructor(bookPlayer) {
diff --git a/src/plugins/chromecastPlayer/plugin.js b/src/plugins/chromecastPlayer/plugin.js
index ba09f9e20..ad8ecc0b9 100644
--- a/src/plugins/chromecastPlayer/plugin.js
+++ b/src/plugins/chromecastPlayer/plugin.js
@@ -1,9 +1,9 @@
-import appSettings from 'appSettings';
+import appSettings from '../../scripts/settings/appSettings';
 import * as userSettings from '../../scripts/settings/userSettings';
-import playbackManager from 'playbackManager';
-import globalize from 'globalize';
-import events from 'jellyfin-apiclient';
-import castSenderApiLoader from 'castSenderApiLoader';
+import { playbackManager } from '../../components/playback/playbackmanager';
+import globalize from '../../scripts/globalize';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
+import castSenderApiLoader from '../../components/castSenderApi';
 
 // Based on https://github.com/googlecast/CastVideos-chrome/blob/master/CastVideos.js
 
@@ -324,11 +324,11 @@ class CastPlayer {
 
         let apiClient;
         if (message.options && message.options.ServerId) {
-            apiClient = window.connectionManager.getApiClient(message.options.ServerId);
+            apiClient = ConnectionManager.getApiClient(message.options.ServerId);
         } else if (message.options && message.options.items && message.options.items.length) {
-            apiClient = window.connectionManager.getApiClient(message.options.items[0].ServerId);
+            apiClient = ConnectionManager.getApiClient(message.options.items[0].ServerId);
         } else {
-            apiClient = window.connectionManager.currentApiClient();
+            apiClient = ConnectionManager.currentApiClient();
         }
 
         message = Object.assign(message, {
@@ -439,7 +439,7 @@ class CastPlayer {
 }
 
 function alertText(text, title) {
-    import('alert').then(({default: alert}) => {
+    import('../../components/alert').then(({default: alert}) => {
         alert({
             text: text,
             title: title
@@ -672,7 +672,7 @@ class ChromecastPlayer {
 
     playWithCommand(options, command) {
         if (!options.items) {
-            const apiClient = window.connectionManager.getApiClient(options.serverId);
+            const apiClient = ConnectionManager.getApiClient(options.serverId);
             const instance = this;
 
             return apiClient.getItem(apiClient.getCurrentUserId(), options.ids[0]).then(function (item) {
@@ -984,7 +984,7 @@ class ChromecastPlayer {
     }
 
     shuffle(item) {
-        const apiClient = window.connectionManager.getApiClient(item.ServerId);
+        const apiClient = ConnectionManager.getApiClient(item.ServerId);
         const userId = apiClient.getCurrentUserId();
 
         const instance = this;
@@ -997,7 +997,7 @@ class ChromecastPlayer {
     }
 
     instantMix(item) {
-        const apiClient = window.connectionManager.getApiClient(item.ServerId);
+        const apiClient = ConnectionManager.getApiClient(item.ServerId);
         const userId = apiClient.getCurrentUserId();
 
         const instance = this;
@@ -1035,7 +1035,7 @@ class ChromecastPlayer {
             }
 
             const instance = this;
-            const apiClient = window.connectionManager.getApiClient(options.serverId);
+            const apiClient = ConnectionManager.getApiClient(options.serverId);
 
             return getItemsForPlayback(apiClient, {
                 Ids: options.ids.join(',')
diff --git a/src/plugins/experimentalWarnings/plugin.js b/src/plugins/experimentalWarnings/plugin.js
index bc301f01a..fb9957aea 100644
--- a/src/plugins/experimentalWarnings/plugin.js
+++ b/src/plugins/experimentalWarnings/plugin.js
@@ -1,6 +1,6 @@
-import globalize from 'globalize';
-import * as userSettings from 'userSettings';
-import appHost from 'apphost';
+import globalize from '../../scripts/globalize';
+import * as userSettings from '../../scripts/settings/userSettings';
+import { appHost } from '../../components/apphost';
 
 // TODO: Replace with date-fns
 // https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php
@@ -29,7 +29,7 @@ function showMessage(text, userSettingsKey, appHostFeature) {
     return new Promise(function (resolve, reject) {
         userSettings.set(userSettingsKey, '1', false);
 
-        import('alert').then(({default: alert}) => {
+        import('../../components/alert').then(({default: alert}) => {
             return alert(text).then(resolve, resolve);
         });
     });
diff --git a/src/plugins/htmlAudioPlayer/plugin.js b/src/plugins/htmlAudioPlayer/plugin.js
index 68380bcdb..342a8a208 100644
--- a/src/plugins/htmlAudioPlayer/plugin.js
+++ b/src/plugins/htmlAudioPlayer/plugin.js
@@ -1,10 +1,10 @@
-import events from 'jellyfin-apiclient';
-import browser from 'browser';
-import appHost from 'apphost';
-import * as htmlMediaHelper from 'htmlMediaHelper';
+import { events } from 'jellyfin-apiclient';
+import browser from '../../scripts/browser';
+import { appHost } from '../../components/apphost';
+import * as htmlMediaHelper from '../../components/htmlMediaHelper';
 
 function getDefaultProfile() {
-    return import('browserdeviceprofile').then(({ default: profileBuilder }) => {
+    return import('../../scripts/browserDeviceProfile').then(({ default: profileBuilder }) => {
         return profileBuilder({});
     });
 }
@@ -51,7 +51,7 @@ function supportsFade() {
 }
 
 function requireHlsPlayer(callback) {
-    import('hlsjs').then(({ default: hls }) => {
+    import('hls.js').then(({ default: hls }) => {
         window.Hls = hls;
         callback();
     });
@@ -68,7 +68,7 @@ function enableHlsPlayer(url, item, mediaSource, mediaType) {
 
     // issue head request to get content type
     return new Promise(function (resolve, reject) {
-        import('fetchHelper').then((fetchHelper) => {
+        import('../../components/fetchhelper').then((fetchHelper) => {
             fetchHelper.ajax({
                 url: url,
                 type: 'HEAD'
diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js
index f4c7f25b7..2c5072a07 100644
--- a/src/plugins/htmlVideoPlayer/plugin.js
+++ b/src/plugins/htmlVideoPlayer/plugin.js
@@ -1,10 +1,10 @@
-import browser from 'browser';
-import events from 'jellyfin-apiclient';
-import appHost from 'apphost';
+import browser from '../../scripts/browser';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
+import { appHost } from '../../components/apphost';
 import loading from '../../components/loading/loading';
-import dom from 'dom';
-import playbackManager from 'playbackManager';
-import appRouter from 'appRouter';
+import dom from '../../scripts/dom';
+import { playbackManager } from '../../components/playback/playbackmanager';
+import { appRouter } from '../../components/appRouter';
 import {
     bindEventsToHlsPlayer,
     destroyHlsPlayer,
@@ -22,10 +22,10 @@ import {
     getSavedVolume,
     isValidDuration,
     getBufferedRanges
-} from 'htmlMediaHelper';
-import itemHelper from 'itemHelper';
-import screenfull from 'screenfull';
-import globalize from 'globalize';
+} from '../../components/htmlMediaHelper';
+import itemHelper from '../../components/itemHelper';
+import Screenfull from 'screenfull';
+import globalize from '../../scripts/globalize';
 
 /* eslint-disable indent */
 
@@ -85,7 +85,7 @@ function tryRemoveElement(elem) {
     }
 
     function requireHlsPlayer(callback) {
-        import('hlsjs').then(({default: hls}) => {
+        import('hls.js').then(({default: hls}) => {
             window.Hls = hls;
             callback();
         });
@@ -139,7 +139,7 @@ function tryRemoveElement(elem) {
     }
 
     function getDefaultProfile() {
-        return import('browserdeviceprofile').then(({default: profileBuilder}) => {
+        return import('../../scripts/browserDeviceProfile').then(({default: profileBuilder}) => {
             return profileBuilder({});
         });
     }
@@ -323,7 +323,7 @@ function tryRemoveElement(elem) {
 
                 console.debug(`prefetching hls playlist: ${hlsPlaylistUrl}`);
 
-                return window.connectionManager.getApiClient(item.ServerId).ajax({
+                return ConnectionManager.getApiClient(item.ServerId).ajax({
 
                     type: 'GET',
                     url: hlsPlaylistUrl
@@ -362,7 +362,7 @@ function tryRemoveElement(elem) {
          * @private
          */
         setSrcWithFlvJs(elem, options, url) {
-            return import('flvjs').then(({default: flvjs}) => {
+            return import('flv.js').then(({default: flvjs}) => {
                 const flvPlayer = flvjs.createPlayer({
                         type: 'flv',
                         url: url
@@ -704,8 +704,8 @@ function tryRemoveElement(elem) {
                 dlg.parentNode.removeChild(dlg);
             }
 
-            if (screenfull.isEnabled) {
-                screenfull.exit();
+            if (Screenfull.isEnabled) {
+                Screenfull.exit();
             } else {
                 // iOS Safari
                 if (document.webkitIsFullScreen && document.webkitCancelFullscreen) {
@@ -1031,7 +1031,7 @@ function tryRemoveElement(elem) {
          */
         renderSsaAss(videoElement, track, item) {
             const attachments = this._currentPlayOptions.mediaSource.MediaAttachments || [];
-            const apiClient = window.connectionManager.getApiClient(item);
+            const apiClient = ConnectionManager.getApiClient(item);
             const htmlVideoPlayer = this;
             const options = {
                 video: videoElement,
@@ -1058,7 +1058,7 @@ function tryRemoveElement(elem) {
                 resizeVariation: 0.2,
                 renderAhead: 90
             };
-            import('JavascriptSubtitlesOctopus').then(({default: SubtitlesOctopus}) => {
+            import('libass-wasm').then(({default: SubtitlesOctopus}) => {
                 this.#currentSubtitlesOctopus = new SubtitlesOctopus(options);
             });
         }
@@ -1114,7 +1114,7 @@ function tryRemoveElement(elem) {
          * @private
          */
         setSubtitleAppearance(elem, innerElem) {
-            Promise.all([import('userSettings'), import('subtitleAppearanceHelper')]).then(([userSettings, subtitleAppearanceHelper]) => {
+            Promise.all([import('../../scripts/settings/userSettings'), import('../../components/subtitlesettings/subtitleappearancehelper')]).then(([userSettings, subtitleAppearanceHelper]) => {
                 subtitleAppearanceHelper.applyStyles({
                     text: innerElem,
                     window: elem
@@ -1135,7 +1135,7 @@ function tryRemoveElement(elem) {
          * @private
          */
         setCueAppearance() {
-            Promise.all([import('userSettings'), import('subtitleAppearanceHelper')]).then(([userSettings, subtitleAppearanceHelper]) => {
+            Promise.all([import('../../scripts/settings/userSettings'), import('../../components/subtitlesettings/subtitleappearancehelper')]).then(([userSettings, subtitleAppearanceHelper]) => {
                 const elementId = `${this.id}-cuestyle`;
 
                 let styleElem = document.querySelector(`#${elementId}`);
@@ -1190,7 +1190,7 @@ function tryRemoveElement(elem) {
 
             // download the track json
             this.fetchSubtitles(track, item).then(function (data) {
-                import('userSettings').then((userSettings) => {
+                import('../../scripts/settings/userSettings').then((userSettings) => {
                     // show in ui
                     console.debug(`downloaded ${data.TrackEvents.length} track events`);
 
@@ -1282,7 +1282,7 @@ function tryRemoveElement(elem) {
             const dlg = document.querySelector('.videoPlayerContainer');
 
                 if (!dlg) {
-                    return import('./style').then(() => {
+                    return import('./style.css').then(() => {
                         loading.show();
 
                         const dlg = document.createElement('div');
diff --git a/src/plugins/logoScreensaver/plugin.js b/src/plugins/logoScreensaver/plugin.js
index 619c0de25..7c2b71342 100644
--- a/src/plugins/logoScreensaver/plugin.js
+++ b/src/plugins/logoScreensaver/plugin.js
@@ -1,5 +1,3 @@
-import pluginManager from 'pluginManager';
-
 export default function () {
     const self = this;
 
@@ -128,7 +126,7 @@ export default function () {
     }
 
     self.show = function () {
-        import('' + pluginManager.mapPath(self, 'style.css')).then(() => {
+        import('./style.css').then(() => {
             let elem = document.querySelector('.logoScreenSaver');
 
             if (!elem) {
diff --git a/src/plugins/photoPlayer/plugin.js b/src/plugins/photoPlayer/plugin.js
index c40477778..9ea48a11a 100644
--- a/src/plugins/photoPlayer/plugin.js
+++ b/src/plugins/photoPlayer/plugin.js
@@ -1,3 +1,4 @@
+import { ConnectionManager } from 'jellyfin-apiclient';
 
 export default class PhotoPlayer {
     constructor() {
@@ -9,12 +10,12 @@ export default class PhotoPlayer {
 
     play(options) {
         return new Promise(function (resolve, reject) {
-            import('slideshow').then(({default: slideshow}) => {
-                const index = options.startIndex || 0;
+            import('../../components/slideshow/slideshow').then(({default: Slideshow}) => {
+                var index = options.startIndex || 0;
 
-                const apiClient = window.connectionManager.currentApiClient();
+                var apiClient = ConnectionManager.currentApiClient();
                 apiClient.getCurrentUser().then(function(result) {
-                    const newSlideShow = new slideshow({
+                    var newSlideShow = new Slideshow({
                         showTitle: false,
                         cover: false,
                         items: options.items,
diff --git a/src/plugins/playAccessValidation/plugin.js b/src/plugins/playAccessValidation/plugin.js
index c64b63332..65f6732c2 100644
--- a/src/plugins/playAccessValidation/plugin.js
+++ b/src/plugins/playAccessValidation/plugin.js
@@ -1,7 +1,8 @@
-import globalize from 'globalize';
+import { ConnectionManager } from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
 
 function showErrorMessage() {
-    return import('alert').then(({default: alert}) => {
+    return import('../../components/alert').then(({default: alert}) => {
         return alert(globalize.translate('MessagePlayAccessRestricted'));
     });
 }
@@ -24,7 +25,7 @@ class PlayAccessValidation {
             return Promise.resolve();
         }
 
-        return window.connectionManager.getApiClient(serverId).getCurrentUser().then(function (user) {
+        return ConnectionManager.getApiClient(serverId).getCurrentUser().then(function (user) {
             if (user.Policy.EnableMediaPlayback) {
                 return Promise.resolve();
             }
diff --git a/src/plugins/sessionPlayer/plugin.js b/src/plugins/sessionPlayer/plugin.js
index 619266b01..bbf13ffb4 100644
--- a/src/plugins/sessionPlayer/plugin.js
+++ b/src/plugins/sessionPlayer/plugin.js
@@ -1,6 +1,6 @@
-import playbackManager from 'playbackManager';
-import events from 'events';
-import serverNotifications from 'serverNotifications';
+import { playbackManager } from '../../components/playback/playbackmanager';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
+import serverNotifications from '../../scripts/serverNotifications';
 
 function getActivePlayerId() {
     const info = playbackManager.getPlayerInfo();
@@ -53,10 +53,10 @@ function getCurrentApiClient(instance) {
     const currentServerId = instance.currentServerId;
 
     if (currentServerId) {
-        return window.connectionManager.getApiClient(currentServerId);
+        return ConnectionManager.getApiClient(currentServerId);
     }
 
-    return window.connectionManager.currentApiClient();
+    return ConnectionManager.currentApiClient();
 }
 
 function sendCommandByName(instance, name, options) {
diff --git a/src/plugins/youtubePlayer/plugin.js b/src/plugins/youtubePlayer/plugin.js
index 568077b0f..a975d8e34 100644
--- a/src/plugins/youtubePlayer/plugin.js
+++ b/src/plugins/youtubePlayer/plugin.js
@@ -1,6 +1,6 @@
-import events from 'jellyfin-apiclient';
-import browser from 'browser';
-import appRouter from 'appRouter';
+import { events } from 'jellyfin-apiclient';
+import browser from '../../scripts/browser';
+import { appRouter } from '../../components/appRouter';
 import loading from '../../components/loading/loading';
 
 /* globals YT */
@@ -20,7 +20,7 @@ function createMediaElement(instance, options) {
         const dlg = document.querySelector('.youtubePlayerContainer');
 
         if (!dlg) {
-            import('./style').then(() => {
+            import('./style.css').then(() => {
                 loading.show();
 
                 const dlg = document.createElement('div');
@@ -114,7 +114,7 @@ function onPlaying(instance, playOptions, resolve) {
             instance.videoDialog.classList.remove('onTop');
         }
 
-        import('loading').then(({default: loading}) => {
+        import('../../components/loading/loading').then(({default: loading}) => {
             loading.hide();
         });
     }
@@ -122,60 +122,58 @@ function onPlaying(instance, playOptions, resolve) {
 
 function setCurrentSrc(instance, elem, options) {
     return new Promise(function (resolve, reject) {
-        import('queryString').then(({default: queryString}) => {
-            instance._currentSrc = options.url;
-            const params = queryString.parse(options.url.split('?')[1]);
-            // 3. This function creates an <iframe> (and YouTube player)
-            //    after the API code downloads.
-            window.onYouTubeIframeAPIReady = function () {
-                instance.currentYoutubePlayer = new YT.Player('player', {
-                    height: instance.videoDialog.offsetHeight,
-                    width: instance.videoDialog.offsetWidth,
-                    videoId: params.v,
-                    events: {
-                        'onReady': onPlayerReady,
-                        'onStateChange': function (event) {
-                            if (event.data === YT.PlayerState.PLAYING) {
-                                onPlaying(instance, options, resolve);
-                            } else if (event.data === YT.PlayerState.ENDED) {
-                                onEndedInternal(instance);
-                            } else if (event.data === YT.PlayerState.PAUSED) {
-                                events.trigger(instance, 'pause');
-                            }
+        instance._currentSrc = options.url;
+        const params = new URLSearchParams(options.url.split('?')[1]); /* eslint-disable-line compat/compat */
+        // 3. This function creates an <iframe> (and YouTube player)
+        //    after the API code downloads.
+        window.onYouTubeIframeAPIReady = function () {
+            instance.currentYoutubePlayer = new YT.Player('player', {
+                height: instance.videoDialog.offsetHeight,
+                width: instance.videoDialog.offsetWidth,
+                videoId: params.v,
+                events: {
+                    'onReady': onPlayerReady,
+                    'onStateChange': function (event) {
+                        if (event.data === YT.PlayerState.PLAYING) {
+                            onPlaying(instance, options, resolve);
+                        } else if (event.data === YT.PlayerState.ENDED) {
+                            onEndedInternal(instance);
+                        } else if (event.data === YT.PlayerState.PAUSED) {
+                            events.trigger(instance, 'pause');
                         }
-                    },
-                    playerVars: {
-                        controls: 0,
-                        enablejsapi: 1,
-                        modestbranding: 1,
-                        rel: 0,
-                        showinfo: 0,
-                        fs: 0,
-                        playsinline: 1
                     }
-                });
-
-                let resizeListener = instance.resizeListener;
-                if (resizeListener) {
-                    window.removeEventListener('resize', resizeListener);
-                    window.addEventListener('resize', resizeListener);
-                } else {
-                    resizeListener = instance.resizeListener = onVideoResize.bind(instance);
-                    window.addEventListener('resize', resizeListener);
+                },
+                playerVars: {
+                    controls: 0,
+                    enablejsapi: 1,
+                    modestbranding: 1,
+                    rel: 0,
+                    showinfo: 0,
+                    fs: 0,
+                    playsinline: 1
                 }
-                window.removeEventListener('orientationChange', resizeListener);
-                window.addEventListener('orientationChange', resizeListener);
-            };
+            });
 
-            if (!window.YT) {
-                const tag = document.createElement('script');
-                tag.src = 'https://www.youtube.com/iframe_api';
-                const firstScriptTag = document.getElementsByTagName('script')[0];
-                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+            let resizeListener = instance.resizeListener;
+            if (resizeListener) {
+                window.removeEventListener('resize', resizeListener);
+                window.addEventListener('resize', resizeListener);
             } else {
-                window.onYouTubeIframeAPIReady();
+                resizeListener = instance.resizeListener = onVideoResize.bind(instance);
+                window.addEventListener('resize', resizeListener);
             }
-        });
+            window.removeEventListener('orientationChange', resizeListener);
+            window.addEventListener('orientationChange', resizeListener);
+        };
+
+        if (!window.YT) {
+            const tag = document.createElement('script');
+            tag.src = 'https://www.youtube.com/iframe_api';
+            const firstScriptTag = document.getElementsByTagName('script')[0];
+            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+        } else {
+            window.onYouTubeIframeAPIReady();
+        }
     });
 }
 
diff --git a/src/scripts/autoThemes.js b/src/scripts/autoThemes.js
index e28353798..b4b2fb0ef 100644
--- a/src/scripts/autoThemes.js
+++ b/src/scripts/autoThemes.js
@@ -1,14 +1,13 @@
 import * as userSettings from './settings/userSettings';
 import * as webSettings from './settings/webSettings';
 import skinManager from './themeManager';
-import connectionManager from 'jellyfin-apiclient';
-import events from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 
 // set the default theme when loading
 skinManager.setTheme(userSettings.theme());
 
 // set the saved theme once a user authenticates
-events.on(window.connectionManager, 'localusersignedin', function (e, user) {
+events.on(ConnectionManager, 'localusersignedin', function (e, user) {
     skinManager.setTheme(userSettings.theme());
 });
 
diff --git a/src/scripts/browserDeviceProfile.js b/src/scripts/browserDeviceProfile.js
index 03663b288..035186f4f 100644
--- a/src/scripts/browserDeviceProfile.js
+++ b/src/scripts/browserDeviceProfile.js
@@ -1,7 +1,5 @@
-define(['browser'], function (browser) {
-    'use strict';
-
-    browser = browser.default || browser;
+import browser from './browser';
+/* eslint-disable indent */
 
     function canPlayH264(videoTestElement) {
         return !!(videoTestElement.canPlayType && videoTestElement.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
@@ -294,7 +292,7 @@ define(['browser'], function (browser) {
                     (browser.tizen && isTizenFhd ? 20000000 : null)));
     }
 
-    return function (options) {
+    export default function (options) {
         options = options || {};
 
         const physicalAudioChannels = options.audioChannels || (browser.tv || browser.ps4 || browser.xboxOne ? 6 : 2);
@@ -861,4 +859,4 @@ define(['browser'], function (browser) {
 
         return profile;
     };
-});
+/* eslint-enable indent */
diff --git a/src/scripts/clientUtils.js b/src/scripts/clientUtils.js
index 9f1519732..024ffd7d4 100644
--- a/src/scripts/clientUtils.js
+++ b/src/scripts/clientUtils.js
@@ -77,7 +77,7 @@ export function navigate(url, preserveQueryString) {
     }
 
     return new Promise(function (resolve, reject) {
-        import('../components/appRouter').then((appRouter) => {
+        import('../components/appRouter').then(({ appRouter }) => {
             return appRouter.show(url).then(resolve, reject);
         });
     });
diff --git a/src/scripts/deleteHelper.js b/src/scripts/deleteHelper.js
index d20ec362d..56489fb24 100644
--- a/src/scripts/deleteHelper.js
+++ b/src/scripts/deleteHelper.js
@@ -1,7 +1,7 @@
 
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import confirm from '../components/confirm/confirm';
-import appRouter from '../components/appRouter';
+import { appRouter } from '../components/appRouter';
 import globalize from './globalize';
 
 function alertText(options) {
@@ -16,7 +16,7 @@ export function deleteItem(options) {
     const item = options.item;
     const parentId = item.SeasonId || item.SeriesId || item.ParentId;
 
-    const apiClient = window.connectionManager.getApiClient(item.ServerId);
+    const apiClient = ConnectionManager.getApiClient(item.ServerId);
 
     return confirm({
 
diff --git a/src/scripts/gamepadtokey.js b/src/scripts/gamepadtokey.js
index b1976e1f6..e8c2d3667 100644
--- a/src/scripts/gamepadtokey.js
+++ b/src/scripts/gamepadtokey.js
@@ -20,7 +20,7 @@
 // #      OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // #      THE SOFTWARE.
 
-import appHost from 'apphost';
+import { appHost } from '../components/apphost';
 
 const _GAMEPAD_A_BUTTON_INDEX = 0;
 const _GAMEPAD_B_BUTTON_INDEX = 1;
diff --git a/src/scripts/globalize.js b/src/scripts/globalize.js
index a3cbb8cd2..550c60c36 100644
--- a/src/scripts/globalize.js
+++ b/src/scripts/globalize.js
@@ -1,5 +1,5 @@
 import * as userSettings from './settings/userSettings';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 
 /* eslint-disable indent */
 
@@ -156,6 +156,7 @@ import events from 'jellyfin-apiclient';
             });
         }
 
+        //import('../strings/')
         return new Promise(function (resolve, reject) {
             if (!filtered.length) {
                 resolve();
@@ -164,24 +165,11 @@ import events from 'jellyfin-apiclient';
 
             let url = filtered[0].path;
 
-            url += url.indexOf('?') === -1 ? '?' : '&';
-            url += 'v=' + cacheParam;
-
-            const xhr = new XMLHttpRequest();
-            xhr.open('GET', url, true);
-
-            xhr.onload = function (e) {
-                if (this.status < 400) {
-                    resolve(JSON.parse(this.response));
-                } else {
-                    resolve({});
-                }
-            };
-
-            xhr.onerror = function () {
+            import(`../strings/${url}`).then((fileContent) => {
+                resolve(fileContent);
+            }).catch(() => {
                 resolve({});
-            };
-            xhr.send();
+            });
         });
     }
 
@@ -221,6 +209,8 @@ import events from 'jellyfin-apiclient';
     }
 
     export function translateHtml(html, module) {
+        html = html.default || html;
+
         if (!module) {
             module = defaultModule();
         }
diff --git a/src/scripts/inputManager.js b/src/scripts/inputManager.js
index 4f98c6974..82e632a28 100644
--- a/src/scripts/inputManager.js
+++ b/src/scripts/inputManager.js
@@ -1,8 +1,8 @@
-import playbackManager from '../components/playback/playbackmanager';
+import { playbackManager } from '../components/playback/playbackmanager';
 import focusManager from '../components/focusManager';
-import appRouter from '../components/appRouter';
+import { appRouter } from '../components/appRouter';
 import dom from './dom';
-import appHost from '../components/apphost';
+import { appHost } from '../components/apphost';
 
 /* eslint-disable indent */
 
diff --git a/src/scripts/itembynamedetailpage.js b/src/scripts/itembynamedetailpage.js
index 186cc3f70..e7d320582 100644
--- a/src/scripts/itembynamedetailpage.js
+++ b/src/scripts/itembynamedetailpage.js
@@ -1,4 +1,4 @@
-import connectionManager from 'jellyfin-apiclient';
+import { ConnectionManager } from 'jellyfin-apiclient';
 import listView from '../components/listview/listview';
 import cardBuilder from '../components/cardbuilder/cardBuilder';
 import imageLoader from '../components/images/imageLoader';
@@ -358,7 +358,7 @@ function getItemsFunction(options, item) {
             query.Fields += ',' + fields;
         }
 
-        const apiClient = window.connectionManager.getApiClient(item.ServerId);
+        const apiClient = ConnectionManager.getApiClient(item.ServerId);
 
         if (query.IncludeItemTypes === 'MusicArtist') {
             query.IncludeItemTypes = null;
diff --git a/src/scripts/libraryMenu.js b/src/scripts/libraryMenu.js
index fcd4e75d5..b7ec4fd5f 100644
--- a/src/scripts/libraryMenu.js
+++ b/src/scripts/libraryMenu.js
@@ -1,12 +1,11 @@
 import dom from './dom';
 import layoutManager from '../components/layoutManager';
 import inputManager from './inputManager';
-import connectionManager from 'jellyfin-apiclient';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import viewManager from '../components/viewManager/viewManager';
-import appRouter from '../components/appRouter';
-import appHost from '../components/apphost';
-import playbackManager from '../components/playback/playbackmanager';
+import { appRouter } from '../components/appRouter';
+import { appHost } from '../components/apphost';
+import { playbackManager } from '../components/playback/playbackmanager';
 import syncPlayManager from '../components/syncPlay/syncPlayManager';
 import groupSelectionMenu from '../components/syncPlay/groupSelectionMenu';
 import browser from './browser';
@@ -61,10 +60,10 @@ import '../assets/css/flexstyles.css';
 
     function getCurrentApiClient() {
         if (currentUser && currentUser.localUser) {
-            return window.connectionManager.getApiClient(currentUser.localUser.ServerId);
+            return window.ConnectionManager.getApiClient(currentUser.localUser.ServerId);
         }
 
-        return window.connectionManager.currentApiClient();
+        return window.ConnectionManager.currentApiClient();
     }
 
     function lazyLoadViewMenuBarImages() {
@@ -775,7 +774,7 @@ import '../assets/css/flexstyles.css';
         }
 
         if (requiresUserRefresh) {
-            window.connectionManager.user(getCurrentApiClient()).then(updateUserInHeader);
+            window.ConnectionManager.user(getCurrentApiClient()).then(updateUserInHeader);
         }
     }
 
@@ -813,7 +812,7 @@ import '../assets/css/flexstyles.css';
         if (user) {
             Promise.resolve(user);
         } else {
-            window.connectionManager.user(getCurrentApiClient()).then(function (user) {
+            window.ConnectionManager.user(getCurrentApiClient()).then(function (user) {
                 refreshLibraryInfoInDrawer(user);
                 updateLibraryMenu(user.localUser);
             });
@@ -840,8 +839,8 @@ import '../assets/css/flexstyles.css';
         navDrawerScrollContainer = navDrawerElement.querySelector('.scrollContainer');
         navDrawerScrollContainer.addEventListener('click', onMainDrawerClick);
         return new Promise(function (resolve, reject) {
-            import('../libraries/navdrawer/navdrawer').then((navdrawer) => {
-                navDrawerInstance = new navdrawer(getNavDrawerOptions());
+            import('../libraries/navdrawer/navdrawer').then(({ NavigationDrawer }) => {
+                navDrawerInstance = new NavigationDrawer(getNavDrawerOptions());
 
                 if (!layoutManager.tv) {
                     navDrawerElement.classList.remove('hide');
@@ -977,8 +976,10 @@ import '../assets/css/flexstyles.css';
         updateLibraryNavLinks(page);
     });
 
-    events.on(window.connectionManager, 'localusersignedin', function (e, user) {
-        const currentApiClient = window.connectionManager.getApiClient(user.ServerId);
+    renderHeader();
+
+    events.on(window.ConnectionManager, 'localusersignedin', function (e, user) {
+        const currentApiClient = window.ConnectionManager.getApiClient(user.ServerId);
 
         currentDrawerType = null;
         currentUser = {
@@ -987,13 +988,13 @@ import '../assets/css/flexstyles.css';
 
         loadNavDrawer();
 
-        window.connectionManager.user(currentApiClient).then(function (user) {
+        window.ConnectionManager.user(currentApiClient).then(function (user) {
             currentUser = user;
             updateUserInHeader(user);
         });
     });
 
-    events.on(window.connectionManager, 'localusersignedout', function () {
+    events.on(window.ConnectionManager, 'localusersignedout', function () {
         currentUser = {};
         updateUserInHeader();
     });
diff --git a/src/scripts/mouseManager.js b/src/scripts/mouseManager.js
index 0c942fd4d..f2c124cfc 100644
--- a/src/scripts/mouseManager.js
+++ b/src/scripts/mouseManager.js
@@ -1,8 +1,9 @@
+
 import inputManager from './inputManager';
 import focusManager from '../components/focusManager';
 import browser from '../scripts/browser';
 import layoutManager from '../components/layoutManager';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import dom from '../scripts/dom';
 /* eslint-disable indent */
 
diff --git a/src/scripts/routes.js b/src/scripts/routes.js
index 2ebfabbe6..f5933ccd3 100644
--- a/src/scripts/routes.js
+++ b/src/scripts/routes.js
@@ -25,7 +25,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/addserver.html',
-        path: '/controllers/session/addServer/index.html',
+        path: 'session/addServer/index.html',
         autoFocus: false,
         anonymous: true,
         startup: true,
@@ -34,7 +34,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/selectserver.html',
-        path: '/controllers/session/selectServer/index.html',
+        path: 'session/selectServer/index.html',
         autoFocus: false,
         anonymous: true,
         startup: true,
@@ -44,7 +44,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/login.html',
-        path: '/controllers/session/login/index.html',
+        path: 'session/login/index.html',
         autoFocus: false,
         anonymous: true,
         startup: true,
@@ -54,7 +54,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/forgotpassword.html',
-        path: '/controllers/session/forgotPassword/index.html',
+        path: 'session/forgotPassword/index.html',
         anonymous: true,
         startup: true,
         controller: 'session/forgotPassword/index'
@@ -71,28 +71,28 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/mypreferencesmenu.html',
-        path: '/controllers/user/menu/index.html',
+        path: 'user/menu/index.html',
         autoFocus: false,
         controller: 'user/menu/index'
     });
 
     defineRoute({
         alias: '/myprofile.html',
-        path: '/controllers/user/profile/index.html',
+        path: 'user/profile/index.html',
         autoFocus: false,
         controller: 'user/profile/index'
     });
 
     defineRoute({
         alias: '/mypreferencesdisplay.html',
-        path: '/controllers/user/display/index.html',
+        path: 'user/display/index.html',
         autoFocus: false,
         controller: 'user/display/index'
     });
 
     defineRoute({
         alias: '/mypreferenceshome.html',
-        path: '/controllers/user/home/index.html',
+        path: 'user/home/index.html',
         autoFocus: false,
         controller: 'user/home/index'
     });
@@ -106,21 +106,21 @@ import '../assets/css/detailtable.css';
     });
     defineRoute({
         alias: '/mypreferencesplayback.html',
-        path: '/controllers/user/playback/index.html',
+        path: 'user/playback/index.html',
         autoFocus: false,
         controller: 'user/playback/index'
     });
 
     defineRoute({
         alias: '/mypreferencessubtitles.html',
-        path: '/controllers/user/subtitles/index.html',
+        path: 'user/subtitles/index.html',
         autoFocus: false,
         controller: 'user/subtitles/index'
     });
 
     defineRoute({
         alias: '/dashboard.html',
-        path: '/controllers/dashboard/dashboard.html',
+        path: 'dashboard/dashboard.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/dashboard'
@@ -128,7 +128,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/dashboardgeneral.html',
-        path: '/controllers/dashboard/general.html',
+        path: 'dashboard/general.html',
         controller: 'dashboard/general',
         autoFocus: false,
         roles: 'admin'
@@ -136,7 +136,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/networking.html',
-        path: '/controllers/dashboard/networking.html',
+        path: 'dashboard/networking.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/networking'
@@ -144,7 +144,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/devices.html',
-        path: '/controllers/dashboard/devices/devices.html',
+        path: 'dashboard/devices/devices.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/devices/devices'
@@ -152,7 +152,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/device.html',
-        path: '/controllers/dashboard/devices/device.html',
+        path: 'dashboard/devices/device.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/devices/device'
@@ -168,7 +168,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/dlnaprofile.html',
-        path: '/controllers/dashboard/dlna/profile.html',
+        path: 'dashboard/dlna/profile.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/dlna/profile'
@@ -176,7 +176,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/dlnaprofiles.html',
-        path: '/controllers/dashboard/dlna/profiles.html',
+        path: 'dashboard/dlna/profiles.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/dlna/profiles'
@@ -184,7 +184,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/dlnasettings.html',
-        path: '/controllers/dashboard/dlna/settings.html',
+        path: 'dashboard/dlna/settings.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/dlna/settings'
@@ -192,7 +192,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/addplugin.html',
-        path: '/controllers/dashboard/plugins/add/index.html',
+        path: 'dashboard/plugins/add/index.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/plugins/add/index'
@@ -200,7 +200,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/library.html',
-        path: '/controllers/dashboard/library.html',
+        path: 'dashboard/library.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/library'
@@ -208,7 +208,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/librarydisplay.html',
-        path: '/controllers/dashboard/librarydisplay.html',
+        path: 'dashboard/librarydisplay.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/librarydisplay'
@@ -216,14 +216,14 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/edititemmetadata.html',
-        path: '/controllers/edititemmetadata.html',
+        path: 'edititemmetadata.html',
         controller: 'edititemmetadata',
         autoFocus: false
     });
 
     defineRoute({
         alias: '/encodingsettings.html',
-        path: '/controllers/dashboard/encodingsettings.html',
+        path: 'dashboard/encodingsettings.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/encodingsettings'
@@ -231,14 +231,14 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/log.html',
-        path: '/controllers/dashboard/logs.html',
+        path: 'dashboard/logs.html',
         roles: 'admin',
         controller: 'dashboard/logs'
     });
 
     defineRoute({
         alias: '/metadataimages.html',
-        path: '/controllers/dashboard/metadataimages.html',
+        path: 'dashboard/metadataimages.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/metadataImages'
@@ -246,7 +246,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/metadatanfo.html',
-        path: '/controllers/dashboard/metadatanfo.html',
+        path: 'dashboard/metadatanfo.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/metadatanfo'
@@ -254,7 +254,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/notificationsetting.html',
-        path: '/controllers/dashboard/notifications/notification/index.html',
+        path: 'dashboard/notifications/notification/index.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/notifications/notification/index'
@@ -262,7 +262,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/notificationsettings.html',
-        path: '/controllers/dashboard/notifications/notifications/index.html',
+        path: 'dashboard/notifications/notifications/index.html',
         controller: 'dashboard/notifications/notifications/index',
         autoFocus: false,
         roles: 'admin'
@@ -270,7 +270,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/playbackconfiguration.html',
-        path: '/controllers/dashboard/playback.html',
+        path: 'dashboard/playback.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/playback'
@@ -278,7 +278,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/availableplugins.html',
-        path: '/controllers/dashboard/plugins/available/index.html',
+        path: 'dashboard/plugins/available/index.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/plugins/available/index'
@@ -286,7 +286,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/repositories.html',
-        path: '/controllers/dashboard/plugins/repositories/index.html',
+        path: 'dashboard/plugins/repositories/index.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/plugins/repositories/index'
@@ -294,7 +294,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/home.html',
-        path: '/controllers/home.html',
+        path: 'home.html',
         autoFocus: false,
         controller: 'home',
         type: 'home'
@@ -302,34 +302,34 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/search.html',
-        path: '/controllers/search.html',
+        path: 'search.html',
         controller: 'searchpage'
     });
 
     defineRoute({
         alias: '/list.html',
-        path: '/controllers/list.html',
+        path: 'list.html',
         autoFocus: false,
         controller: 'list'
     });
 
     defineRoute({
         alias: '/details',
-        path: '/controllers/itemDetails/index.html',
+        path: 'itemDetails/index.html',
         controller: 'itemDetails/index',
         autoFocus: false
     });
 
     defineRoute({
         alias: '/livetv.html',
-        path: '/controllers/livetv.html',
+        path: 'livetv.html',
         controller: 'livetv/livetvsuggested',
         autoFocus: false
     });
 
     defineRoute({
         alias: '/livetvguideprovider.html',
-        path: '/controllers/livetvguideprovider.html',
+        path: 'livetvguideprovider.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'livetvguideprovider'
@@ -337,14 +337,14 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/livetvsettings.html',
-        path: '/controllers/livetvsettings.html',
+        path: 'livetvsettings.html',
         autoFocus: false,
         controller: 'livetvsettings'
     });
 
     defineRoute({
         alias: '/livetvstatus.html',
-        path: '/controllers/livetvstatus.html',
+        path: 'livetvstatus.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'livetvstatus'
@@ -352,7 +352,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/livetvtuner.html',
-        path: '/controllers/livetvtuner.html',
+        path: 'livetvtuner.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'livetvtuner'
@@ -360,21 +360,21 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/movies.html',
-        path: '/controllers/movies/movies.html',
+        path: 'movies/movies.html',
         autoFocus: false,
         controller: 'movies/moviesrecommended'
     });
 
     defineRoute({
         alias: '/music.html',
-        path: '/controllers/music/music.html',
+        path: 'music/music.html',
         controller: 'music/musicrecommended',
         autoFocus: false
     });
 
     defineRoute({
         alias: '/installedplugins.html',
-        path: '/controllers/dashboard/plugins/installed/index.html',
+        path: 'dashboard/plugins/installed/index.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/plugins/installed/index'
@@ -382,7 +382,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/scheduledtask.html',
-        path: '/controllers/dashboard/scheduledtasks/scheduledtask.html',
+        path: 'dashboard/scheduledtasks/scheduledtask.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/scheduledtasks/scheduledtask'
@@ -390,7 +390,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/scheduledtasks.html',
-        path: '/controllers/dashboard/scheduledtasks/scheduledtasks.html',
+        path: 'dashboard/scheduledtasks/scheduledtasks.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/scheduledtasks/scheduledtasks'
@@ -398,7 +398,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/serveractivity.html',
-        path: '/controllers/dashboard/serveractivity.html',
+        path: 'dashboard/serveractivity.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/serveractivity'
@@ -406,7 +406,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/apikeys.html',
-        path: '/controllers/dashboard/apikeys.html',
+        path: 'dashboard/apikeys.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/apikeys'
@@ -414,7 +414,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/streamingsettings.html',
-        path: '/controllers/dashboard/streaming.html',
+        path: 'dashboard/streaming.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/streaming'
@@ -422,14 +422,14 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/tv.html',
-        path: '/controllers/shows/tvrecommended.html',
+        path: 'shows/tvrecommended.html',
         autoFocus: false,
         controller: 'shows/tvrecommended'
     });
 
     defineRoute({
         alias: '/useredit.html',
-        path: '/controllers/dashboard/users/useredit.html',
+        path: 'dashboard/users/useredit.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/users/useredit'
@@ -437,7 +437,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/userlibraryaccess.html',
-        path: '/controllers/dashboard/users/userlibraryaccess.html',
+        path: 'dashboard/users/userlibraryaccess.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/users/userlibraryaccess'
@@ -445,7 +445,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/usernew.html',
-        path: '/controllers/dashboard/users/usernew.html',
+        path: 'dashboard/users/usernew.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/users/usernew'
@@ -453,7 +453,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/userparentalcontrol.html',
-        path: '/controllers/dashboard/users/userparentalcontrol.html',
+        path: 'dashboard/users/userparentalcontrol.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/users/userparentalcontrol'
@@ -461,14 +461,14 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/userpassword.html',
-        path: '/controllers/dashboard/users/userpassword.html',
+        path: 'dashboard/users/userpassword.html',
         autoFocus: false,
         controller: 'dashboard/users/userpasswordpage'
     });
 
     defineRoute({
         alias: '/userprofiles.html',
-        path: '/controllers/dashboard/users/userprofiles.html',
+        path: 'dashboard/users/userprofiles.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/users/userprofilespage'
@@ -476,7 +476,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/wizardremoteaccess.html',
-        path: '/controllers/wizard/remote/index.html',
+        path: 'wizard/remote/index.html',
         autoFocus: false,
         anonymous: true,
         controller: 'wizard/remote/index'
@@ -484,7 +484,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/wizardfinish.html',
-        path: '/controllers/wizard/finish/index.html',
+        path: 'wizard/finish/index.html',
         autoFocus: false,
         anonymous: true,
         controller: 'wizard/finish/index'
@@ -492,7 +492,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/wizardlibrary.html',
-        path: '/controllers/wizard/library.html',
+        path: 'wizard/library.html',
         autoFocus: false,
         anonymous: true,
         controller: 'dashboard/library'
@@ -500,7 +500,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/wizardsettings.html',
-        path: '/controllers/wizard/settings/index.html',
+        path: 'wizard/settings/index.html',
         autoFocus: false,
         anonymous: true,
         controller: 'wizard/settings/index'
@@ -508,7 +508,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/wizardstart.html',
-        path: '/controllers/wizard/start/index.html',
+        path: 'wizard/start/index.html',
         autoFocus: false,
         anonymous: true,
         controller: 'wizard/start/index'
@@ -516,7 +516,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/wizarduser.html',
-        path: '/controllers/wizard/user/index.html',
+        path: 'wizard/user/index.html',
         controller: 'wizard/user/index',
         autoFocus: false,
         anonymous: true
@@ -524,7 +524,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/video',
-        path: '/controllers/playback/video/index.html',
+        path: 'playback/video/index.html',
         controller: 'playback/video/index',
         autoFocus: false,
         type: 'video-osd',
@@ -535,7 +535,7 @@ import '../assets/css/detailtable.css';
 
     defineRoute({
         alias: '/queue',
-        path: '/controllers/playback/queue/index.html',
+        path: 'playback/queue/index.html',
         controller: 'playback/queue/index',
         autoFocus: false,
         fullscreen: true,
@@ -544,7 +544,7 @@ import '../assets/css/detailtable.css';
     });
 
     defineRoute({
-        path: '/configurationpage',
+        path: 'configurationpage',
         autoFocus: false,
         enableCache: false,
         enableContentQueryString: true,
@@ -552,13 +552,13 @@ import '../assets/css/detailtable.css';
     });
 
     defineRoute({
-        path: '/',
+        path: '',
         isDefaultRoute: true,
         autoFocus: false
     });
 
     defineRoute({
-        path: '/index.html',
+        path: 'index.html',
         autoFocus: false,
         isDefaultRoute: true
     });
diff --git a/src/scripts/serverNotifications.js b/src/scripts/serverNotifications.js
index 7a4a5f3e3..f4a3bdd8a 100644
--- a/src/scripts/serverNotifications.js
+++ b/src/scripts/serverNotifications.js
@@ -1,10 +1,9 @@
-import connectionManager from 'jellyfin-apiclient';
-import playbackManager from '../components/playback/playbackmanager';
+import { playbackManager } from '../components/playback/playbackmanager';
 import syncPlayManager from '../components/syncPlay/syncPlayManager';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 import inputManager from '../scripts/inputManager';
 import focusManager from '../components/focusManager';
-import appRouter from '../components/appRouter';
+import { appRouter } from '../components/appRouter';
 
 const serverNotifications = {};
 
@@ -208,8 +207,8 @@ function bindEvents(apiClient) {
     events.on(apiClient, 'message', onMessageReceived);
 }
 
-window.connectionManager.getApiClients().forEach(bindEvents);
-events.on(window.connectionManager, 'apiclientcreated', function (e, newApiClient) {
+window.ConnectionManager.getApiClients().forEach(bindEvents);
+events.on(window.ConnectionManager, 'apiclientcreated', function (e, newApiClient) {
     bindEvents(newApiClient);
 });
 
diff --git a/src/scripts/settings/userSettings.js b/src/scripts/settings/userSettings.js
index 6ba41ce98..aa31ddd98 100644
--- a/src/scripts/settings/userSettings.js
+++ b/src/scripts/settings/userSettings.js
@@ -1,5 +1,5 @@
 import appSettings from './appSettings';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 
 function onSaveTimeout() {
     const self = this;
diff --git a/src/scripts/settings/webSettings.js b/src/scripts/settings/webSettings.js
index cf1dd23d3..b76e67776 100644
--- a/src/scripts/settings/webSettings.js
+++ b/src/scripts/settings/webSettings.js
@@ -1,3 +1,4 @@
+
 let data;
 
 const urlResolver = document.createElement('a');
@@ -42,16 +43,9 @@ async function fetchLocal(url, options) {
 async function getConfig() {
     if (data) return Promise.resolve(data);
     try {
-        const response = await fetchLocal('config.json', {
-            cache: 'no-cache'
-        });
-
-        if (!response.ok) {
-            throw new Error('network response was not ok');
-        }
-
-        data = await response.json();
+        data = await import('../../config.json');
 
+        console.dir(data);
         return data;
     } catch (error) {
         console.warn('failed to fetch the web config file:', error);
@@ -61,15 +55,9 @@ async function getConfig() {
 
 async function getDefaultConfig() {
     try {
-        const response = await fetchLocal('config.template.json', {
-            cache: 'no-cache'
-        });
+        data = await import('../../config.template.json');
 
-        if (!response.ok) {
-            throw new Error('network response was not ok');
-        }
-
-        data = await response.json();
+        console.dir(data);
         return data;
     } catch (error) {
         console.error('failed to fetch the default web config file:', error);
diff --git a/src/scripts/site.js b/src/scripts/site.js
index 77c6279bd..e66809203 100644
--- a/src/scripts/site.js
+++ b/src/scripts/site.js
@@ -94,15 +94,11 @@ function initClient() {
         return Promise.all([
             import('jellyfin-apiclient'),
             import('../components/apphost'),
-            import('jellyfin-apiclient'),
-            import('jellyfin-apiclient'),
             import('./settings/userSettings')
         ])
-            .then(([ConnectionManager, appHost, credentialProvider, events, userSettings]) => {
-                appHost = appHost.default || appHost;
-
-                const credentialProviderInstance = new credentialProvider();
-                const promises = [appHost.init()];
+            .then(([{ ConnectionManager, Credentials, events }, { appHost} , userSettings]) => {
+                var credentialProviderInstance = new Credentials();
+                var promises = [appHost.init()];
 
                 return Promise.all(promises).then(function (responses) {
                     const capabilities = Dashboard.capabilities(appHost);
@@ -118,10 +114,10 @@ function initClient() {
                             import('jellyfin-apiclient'),
                             import('./clientUtils')
                         ])
-                            .then(([apiClientFactory, clientUtils]) => {
+                            .then(([{ ApiClient }, clientUtils]) => {
                                 console.debug('creating ApiClient singleton');
 
-                                var apiClient = new apiClientFactory(Dashboard.serverAddress(), appHost.appName(), appHost.appVersion(), appHost.deviceName(), appHost.deviceId());
+                                var apiClient = new ApiClient(Dashboard.serverAddress(), appHost.appName(), appHost.appVersion(), appHost.deviceName(), appHost.deviceId());
 
                                 apiClient.enableAutomaticNetworking = false;
                                 apiClient.manualAddressOnly = true;
@@ -160,17 +156,16 @@ function initClient() {
                         .then((keyboardnavigation) => {
                             keyboardnavigation.enable();
                         });
-                    import(['./mouseManager']);
+                    import('./mouseManager');
                     import('../components/autoFocuser').then((autoFocuser) => {
                         autoFocuser.enable();
                     });
                     Promise.all([
                         import('./globalize'),
-                        import('jellyfin-apiclient'),
                         import('jellyfin-apiclient')
                     ])
-                        .then((globalize, connectionManager, events) => {
-                            events.on(connectionManager, 'localusersignedin', globalize.updateCurrentCulture);
+                        .then(([ globalize, { ConnectionManager, events } ]) => {
+                            events.on(ConnectionManager, 'localusersignedin', globalize.updateCurrentCulture);
                         });
                 });
             });
@@ -181,7 +176,7 @@ function initClient() {
         const translations = languages.map(function (language) {
             return {
                 lang: language,
-                path: 'strings/' + language + '.json'
+                path: language + '.json'
             };
         });
         globalize.defaultModule('core');
@@ -208,21 +203,24 @@ function initClient() {
             import('../assets/css/fonts.css');
         }
 
-        Promise.all([
-            import('../components/apphost'),
-            import('../assets/css/librarybrowser.css')
-        ]).then((appHost) => {
-            loadPlugins(appHost, browser).then(function () {
-                onAppReady(browser);
+        import('../assets/css/librarybrowser.css')
+        import('../components/apphost')
+            .then(({ appHost }) => {
+                loadPlugins(appHost, browser).then(function () {
+                    onAppReady(browser);
+                });
             });
-        });
     }
 
     function loadPlugins(appHost, browser, shell) {
         console.groupCollapsed('loading installed plugins');
         return new Promise(function (resolve, reject) {
-            import('./settings/webSettings')
-                .then((webSettings) => {
+            Promise.all([
+                import('./settings/webSettings'),
+                import('../components/pluginManager')
+            ])
+                .then(([webSettings, { pluginManager: pluginManager }]) => {
+                    console.dir(pluginManager);
                     webSettings.getPlugins().then(function (list) {
                         // these two plugins are dependent on features
                         if (!appHost.supports('remotecontrol')) {
@@ -238,15 +236,17 @@ function initClient() {
                             list = list.concat(window.NativeShell.getPlugins());
                         }
 
-                        Promise.all(list.map(loadPlugin))
-                            .then(function () {
+                        Promise.all(list.map((plugin) => {
+                            return pluginManager.loadPlugin(import(/* webpackChunkName: "[request]" */ `../plugins/${plugin}`));
+                        }))
+                            .then(function (pluginPromises) {
                                 console.debug('finished loading plugins');
                             })
                             .catch(() => reject)
                             .finally(() => {
                                 console.groupEnd('loading installed plugins');
                                 import('../components/packageManager')
-                                    .then((packageManager) => {
+                                    .then(({ default: packageManager }) => {
                                         packageManager.init().then(resolve, reject);
                                     });
                             })
@@ -256,27 +256,15 @@ function initClient() {
         });
     }
 
-    function loadPlugin(url) {
-        return new Promise(function (resolve, reject) {
-            import('../components/pluginManager')
-                .then((pluginManager) => {
-                    pluginManager.loadPlugin(url).then(resolve, reject);
-                });
-        });
-    }
-
     function onAppReady(browser) {
         console.debug('begin onAppReady');
 
         // ensure that appHost is loaded in this point
         Promise.all([
-            import('jellyfin-apiclient'),
+            import('../components/apphost'),
             import('../components/appRouter')
         ])
-            .then(([appHost, appRouter]) => {
-                appRouter = appRouter.default || appRouter;
-                appHost = appHost.default || appHost;
-
+            .then(([{ appHost }, { appRouter }]) => {
                 window.Emby = {};
 
                 console.debug('onAppReady: loading dependencies');
diff --git a/src/scripts/standalone.js b/src/scripts/standalone.js
index 237872703..4a455fe9d 100644
--- a/src/scripts/standalone.js
+++ b/src/scripts/standalone.js
@@ -1,4 +1,3 @@
-(function() {
-    'use strict';
-    window.appMode = 'standalone';
-})();
+window.appMode = 'standalone';
+
+import('./site');
diff --git a/src/scripts/taskbutton.js b/src/scripts/taskbutton.js
index 85ee56b86..434565f07 100644
--- a/src/scripts/taskbutton.js
+++ b/src/scripts/taskbutton.js
@@ -1,12 +1,12 @@
 
-import { connectionManager, events } from 'jellyfin-apiclient';
+import { ConnectionManager, events } from 'jellyfin-apiclient';
 import serverNotifications from '../scripts/serverNotifications';
 import globalize from '../scripts/globalize';
 import '../elements/emby-button/emby-button';
 
 export default function (options) {
     function pollTasks() {
-        window.connectionManager.getApiClient(serverId).getScheduledTasks({
+        ConnectionManager.getApiClient(serverId).getScheduledTasks({
             IsEnabled: true
         }).then(updateTasks);
     }
@@ -63,7 +63,7 @@ export default function (options) {
     }
 
     function onScheduledTaskMessageConfirmed(id) {
-        window.connectionManager.getApiClient(serverId).startScheduledTask(id).then(pollTasks);
+        ConnectionManager.getApiClient(serverId).startScheduledTask(id).then(pollTasks);
     }
 
     function onButtonClick() {
@@ -81,13 +81,13 @@ export default function (options) {
     const serverId = ApiClient.serverId();
 
     function onPollIntervalFired() {
-        if (!window.connectionManager.getApiClient(serverId).isMessageChannelOpen()) {
+        if (!ConnectionManager.getApiClient(serverId).isMessageChannelOpen()) {
             pollTasks();
         }
     }
 
     function startInterval() {
-        const apiClient = window.connectionManager.getApiClient(serverId);
+        const apiClient = ConnectionManager.getApiClient(serverId);
 
         if (pollInterval) {
             clearInterval(pollInterval);
@@ -97,7 +97,7 @@ export default function (options) {
     }
 
     function stopInterval() {
-        window.connectionManager.getApiClient(serverId).sendMessage('ScheduledTasksInfoStop');
+        ConnectionManager.getApiClient(serverId).sendMessage('ScheduledTasksInfoStop');
 
         if (pollInterval) {
             clearInterval(pollInterval);
diff --git a/src/scripts/themeManager.js b/src/scripts/themeManager.js
index f7dcf597d..294fc81f6 100644
--- a/src/scripts/themeManager.js
+++ b/src/scripts/themeManager.js
@@ -21,6 +21,14 @@ function getThemeStylesheetInfo(id) {
             return id ? theme.id === id : theme.default;
         });
 
+        if (!theme) {
+            theme = {
+                'name': 'Dark',
+                'id': 'dark',
+                'default': true
+            };
+        }
+
         return {
             stylesheetPath: 'themes/' + theme.id + '/theme.css',
             themeId: theme.id
diff --git a/src/scripts/touchHelper.js b/src/scripts/touchHelper.js
index 578ca02c0..0d135f082 100644
--- a/src/scripts/touchHelper.js
+++ b/src/scripts/touchHelper.js
@@ -1,5 +1,5 @@
 import dom from '../scripts/dom';
-import events from 'jellyfin-apiclient';
+import { events } from 'jellyfin-apiclient';
 
 function getTouches(e) {
     return e.changedTouches || e.targetTouches || e.touches;
diff --git a/webpack.common.js b/webpack.common.js
index 59f78e755..8943644c9 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = {
     context: path.resolve(__dirname, 'src'),
@@ -10,7 +11,19 @@ module.exports = {
         ]
     },
     plugins: [
-        (new CleanWebpackPlugin())
+        new CleanWebpackPlugin(),
+        new CopyPlugin({
+            patterns: [
+                {
+                    from: 'config*.json',
+                    to: '/'
+                },
+                {
+                    from: 'themes/',
+                    to: 'themes/'
+                }
+            ]
+        })
     ],
     output: {
         filename: '[name].bundle.js',
diff --git a/webpack.dev.js b/webpack.dev.js
index 9c52bef3b..a89ff3a75 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -1,3 +1,4 @@
+const path = require('path');
 const common = require('./webpack.common');
 const merge = require('webpack-merge');
 const packageConfig = require('./package.json');
@@ -17,7 +18,7 @@ module.exports = merge(common, {
             },
             {
                 test: /\.js$/,
-                exclude: /node_modules[\\/](?!date-fns|epubjs|libarchive|jellyfin-apiclient|query-string|split-on-first|strict-uri-encode|xmldom)/,
+                exclude: /node_modules[\\/](?!date-fns|epubjs|libarchive|jellyfin-apiclient|split-on-first|strict-uri-encode|xmldom)/,
                 use: {
                     loader: 'babel-loader',
                     options: {
@@ -61,5 +62,9 @@ module.exports = merge(common, {
             filename: 'index.html',
             template: 'index.html'
         })
-    ]
+    ],
+    devServer: {
+        contentBase: path.join(__dirname, 'dist'),
+        compress: true
+    }
 });
diff --git a/yarn.lock b/yarn.lock
index 6c0535a82..4cbeef372 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -922,6 +922,13 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
+"@npmcli/move-file@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@npmcli/move-file/-/move-file-1.0.1.tgz#de103070dac0f48ce49cf6693c23af59c0f70464"
+  integrity sha512-Uv6h1sT+0DrblvIrolFtbvM1FgWm+/sy4B3pvLp67Zys+thcukzS5ekn7HsZFGpWP4Q3fYJCljbWQE/XivMRLw==
+  dependencies:
+    mkdirp "^1.0.4"
+
 "@sindresorhus/is@^0.7.0":
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
@@ -1347,11 +1354,6 @@ ansi-colors@^1.0.1:
   dependencies:
     ansi-wrap "^0.1.0"
 
-ansi-colors@^3.0.0:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
-  integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
-
 ansi-colors@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
@@ -2206,7 +2208,7 @@ bytes@3.1.0:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
 
-cacache@^12.0.2, cacache@^12.0.3:
+cacache@^12.0.2:
   version "12.0.4"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.4.tgz#668bcbd105aeb5f1d92fe25570ec9525c8faa40c"
   integrity sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==
@@ -2227,6 +2229,29 @@ cacache@^12.0.2, cacache@^12.0.3:
     unique-filename "^1.1.1"
     y18n "^4.0.0"
 
+cacache@^15.0.5:
+  version "15.0.5"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.0.5.tgz#69162833da29170d6732334643c60e005f5f17d0"
+  integrity sha512-lloiL22n7sOjEEXdL8NAjTgv9a1u43xICE9/203qonkZUCj5X1UEWIdf2/Y0d6QcCtMzbKQyhrcDbdvlZTs/+A==
+  dependencies:
+    "@npmcli/move-file" "^1.0.1"
+    chownr "^2.0.0"
+    fs-minipass "^2.0.0"
+    glob "^7.1.4"
+    infer-owner "^1.0.4"
+    lru-cache "^6.0.0"
+    minipass "^3.1.1"
+    minipass-collect "^1.0.2"
+    minipass-flush "^1.0.5"
+    minipass-pipeline "^1.2.2"
+    mkdirp "^1.0.3"
+    p-map "^4.0.0"
+    promise-inflight "^1.0.1"
+    rimraf "^3.0.2"
+    ssri "^8.0.0"
+    tar "^6.0.2"
+    unique-filename "^1.1.1"
+
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
@@ -2913,23 +2938,22 @@ copy-props@^2.0.1:
     each-props "^1.3.0"
     is-plain-object "^2.0.1"
 
-copy-webpack-plugin@^5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz#8a889e1dcafa6c91c6cd4be1ad158f1d3823bae2"
-  integrity sha512-Uh7crJAco3AjBvgAy9Z75CjK8IG+gxaErro71THQ+vv/bl4HaQcpkexAY8KVW/T6D2W2IRr+couF/knIRkZMIQ==
+copy-webpack-plugin@^6.0.3:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-6.3.0.tgz#91820b63bbde7d73609accb86dab7e7386863f6f"
+  integrity sha512-kQ2cGGQLO6Ov2fe7rEGVxObI17dPeFkv8bRGnUAGZehOcrrObyAR9yWYlFGlJsyWM4EeuC/ytQNQkXxjYotMzg==
   dependencies:
-    cacache "^12.0.3"
-    find-cache-dir "^2.1.0"
-    glob-parent "^3.1.0"
-    globby "^7.1.1"
-    is-glob "^4.0.1"
-    loader-utils "^1.2.3"
-    minimatch "^3.0.4"
+    cacache "^15.0.5"
+    fast-glob "^3.2.4"
+    find-cache-dir "^3.3.1"
+    glob-parent "^5.1.1"
+    globby "^11.0.1"
+    loader-utils "^2.0.0"
     normalize-path "^3.0.0"
-    p-limit "^2.2.1"
-    schema-utils "^1.0.0"
-    serialize-javascript "^4.0.0"
-    webpack-log "^2.0.0"
+    p-limit "^3.0.2"
+    schema-utils "^3.0.0"
+    serialize-javascript "^5.0.1"
+    webpack-sources "^1.4.3"
 
 core-js-compat@^3.6.2:
   version "3.6.5"
@@ -3561,7 +3585,7 @@ dir-glob@2.0.0:
     arrify "^1.0.1"
     path-type "^3.0.0"
 
-dir-glob@^2.0.0, dir-glob@^2.2.2:
+dir-glob@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.2.2.tgz#fa09f0694153c8918b18ba0deafae94769fc50c4"
   integrity sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==
@@ -4683,6 +4707,15 @@ find-cache-dir@^2.1.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
+find-cache-dir@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880"
+  integrity sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^3.0.2"
+    pkg-dir "^4.1.0"
+
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@@ -5067,7 +5100,7 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
-glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0:
+glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@^5.1.1, glob-parent@~5.1.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
   integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
@@ -5210,18 +5243,6 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-globby@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
-  integrity sha1-+yzP+UAfhgCUXfral0QMypcrhoA=
-  dependencies:
-    array-union "^1.0.1"
-    dir-glob "^2.0.0"
-    glob "^7.1.2"
-    ignore "^3.3.5"
-    pify "^3.0.0"
-    slash "^1.0.0"
-
 globby@^8.0.1:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/globby/-/globby-8.0.2.tgz#5697619ccd95c5275dbb2d6faa42087c1a941d8d"
@@ -6055,7 +6076,7 @@ indexof@0.0.1:
   resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
   integrity sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=
 
-infer-owner@^1.0.3:
+infer-owner@^1.0.3, infer-owner@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
   integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
@@ -7245,6 +7266,13 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
 lru-queue@0.1:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/lru-queue/-/lru-queue-0.1.0.tgz#2738bd9f0d3cf4f84490c5736c48699ac632cda3"
@@ -7267,7 +7295,7 @@ make-dir@^2.0.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.0:
+make-dir@^3.0.0, make-dir@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -7589,7 +7617,28 @@ minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-minipass@^3.0.0:
+minipass-collect@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
+  integrity sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==
+  dependencies:
+    minipass "^3.0.0"
+
+minipass-flush@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/minipass-flush/-/minipass-flush-1.0.5.tgz#82e7135d7e89a50ffe64610a787953c4c4cbb373"
+  integrity sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==
+  dependencies:
+    minipass "^3.0.0"
+
+minipass-pipeline@^1.2.2:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz#68472f79711c084657c067c5c6ad93cddea8214c"
+  integrity sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==
+  dependencies:
+    minipass "^3.0.0"
+
+minipass@^3.0.0, minipass@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
   integrity sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==
@@ -7640,7 +7689,7 @@ mixin-deep@^1.2.0:
   dependencies:
     minimist "^1.2.5"
 
-mkdirp@^1.0.3:
+mkdirp@^1.0.3, mkdirp@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
@@ -8240,7 +8289,7 @@ p-limit@^1.1.0:
   dependencies:
     p-try "^1.0.0"
 
-p-limit@^2.0.0, p-limit@^2.2.0, p-limit@^2.2.1:
+p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
   integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
@@ -8668,7 +8717,7 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
-pkg-dir@^4.2.0:
+pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
   integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
@@ -9616,15 +9665,6 @@ query-string@^5.0.1:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
-query-string@^6.13.6:
-  version "6.13.7"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.13.7.tgz#af53802ff6ed56f3345f92d40a056f93681026ee"
-  integrity sha512-CsGs8ZYb39zu0WLkeOhe0NMePqgYdAuCqxOYKDR5LVCytDZYMGx3Bb+xypvQvPHVPijRXB0HZNFllCzHRe4gEA==
-  dependencies:
-    decode-uri-component "^0.2.0"
-    split-on-first "^1.0.0"
-    strict-uri-encode "^2.0.0"
-
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -10804,11 +10844,6 @@ specificity@^0.4.1:
   resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.4.1.tgz#aab5e645012db08ba182e151165738d00887b019"
   integrity sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==
 
-split-on-first@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
-  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
-
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -10862,6 +10897,13 @@ ssri@^6.0.1:
   dependencies:
     figgy-pudding "^3.5.1"
 
+ssri@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-8.0.0.tgz#79ca74e21f8ceaeddfcb4b90143c458b8d988808"
+  integrity sha512-aq/pz989nxVYwn16Tsbj1TqFpD5LLrQxHf5zaHuieFV+R0Bbr4y8qUsOA45hXT/N4/9UNXTarBjnjVmjSOVaAA==
+  dependencies:
+    minipass "^3.1.1"
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -10972,11 +11014,6 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
-strict-uri-encode@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
-  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
-
 string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -12454,14 +12491,6 @@ webpack-concat-plugin@^3.0.0:
     uglify-es "^3.3.9"
     upath "^1.1.0"
 
-webpack-log@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"
-  integrity sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==
-  dependencies:
-    ansi-colors "^3.0.0"
-    uuid "^3.3.2"
-
 webpack-merge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.2.tgz#a27c52ea783d1398afd2087f547d7b9d2f43634d"
@@ -12469,7 +12498,7 @@ webpack-merge@^4.2.2:
   dependencies:
     lodash "^4.17.15"
 
-webpack-sources@^1.4.0, webpack-sources@^1.4.1:
+webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
   integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==