extracted connectionManager from site.js

new module ServerConnections for ConnectionManager
all code adapted to this new module
removed Events and ConnectionManager from eslintrc

.eslintrc.js

@@ -85,7 +85,6 @@ module.exports = {
                 'DlnaProfilePage': 'writable',
                 'DashboardPage': 'writable',
                 'Emby': 'readonly',
-                'Events': 'writable',
                 'getParameterByName': 'writable',
                 'getWindowLocationSearch': 'writable',
                 'Globalize': 'writable',

src/components/ServerConnections.js

@@ -0,0 +1,82 @@
+import { ConnectionManager, Credentials, ApiClient, Events } from 'jellyfin-apiclient';
+import { appHost } from './apphost';
+import Dashboard from '../scripts/clientUtils';
+import AppInfo from './AppInfo';
+import { setUserInfo } from '../scripts/settings/userSettings';
+
+class ServerConnections extends ConnectionManager {
+    constructor() {
+        super(...arguments);
+        this.localApiClient = null;
+
+        Events.on(this, 'localusersignedout', function () {
+            setUserInfo(null, null);
+        });
+    }
+
+    initApiClient() {
+        if (!AppInfo.isNativeApp) {
+            console.debug('creating ApiClient singleton');
+
+            var apiClient = new ApiClient(
+                Dashboard.serverAddress(),
+                appHost.appName(),
+                appHost.appVersion(),
+                appHost.deviceName(),
+                appHost.deviceId()
+            );
+
+            apiClient.enableAutomaticNetworking = false;
+            apiClient.manualAddressOnly = true;
+
+            this.addApiClient(apiClient);
+
+            this.setLocalApiClient(apiClient);
+
+            console.debug('loaded ApiClient singleton');
+        }
+    }
+
+    setLocalApiClient(apiClient) {
+        if (apiClient) {
+            this.localApiClient = apiClient;
+            window.ApiClient = apiClient;
+        }
+    }
+
+    getLocalApiClient() {
+        return this.localApiClient;
+    }
+
+    currentApiClient() {
+        let apiClient = this.getLocalApiClient();
+
+        if (!apiClient) {
+            const server = this.getLastUsedServer();
+
+            if (server) {
+                apiClient = this.getApiClient(server.Id);
+            }
+        }
+
+        return apiClient;
+    }
+
+    onLocalUserSignedIn(user) {
+        const apiClient = this.getApiClient(user.ServerId);
+        this.setLocalApiClient(apiClient);
+        return setUserInfo(user.Id, apiClient);
+    }
+}
+
+const credentials = new Credentials();
+
+const capabilities = Dashboard.capabilities(appHost);
+
+export default new ServerConnections(
+    credentials,
+    appHost.appName(),
+    appHost.appVersion(),
+    appHost.deviceName(),
+    appHost.deviceId(),
+    capabilities);

src/components/activitylog.js

@@ -1,4 +1,4 @@
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import globalize from '../scripts/globalize';
 import dom from '../scripts/dom';
 import * as datefns from 'date-fns';
@@ -6,6 +6,7 @@ import dfnshelper from '../scripts/dfnshelper';
 import serverNotifications from '../scripts/serverNotifications';
 import '../elements/emby-button/emby-button';
 import './listview/listview.css';
+import ServerConnections from './ServerConnections';
 
 /* eslint-disable indent */
 
@@ -140,7 +141,7 @@ class ActivityLog {
         const element = options.element;
         element.classList.add('activityLogListWidget');
         element.addEventListener('click', onListClick.bind(this));
-        const apiClient = ConnectionManager.getApiClient(options.serverId);
+        const apiClient = ServerConnections.getApiClient(options.serverId);
         reloadData(this, element, apiClient);
         const onUpdate = onActivityLogUpdate.bind(this);
         this.updateFn = onUpdate;
@@ -152,7 +153,7 @@ class ActivityLog {
 
         if (options) {
             options.element.classList.remove('activityLogListWidget');
-            ConnectionManager.getApiClient(options.serverId).sendMessage('ActivityLogEntryStop', '0,1500');
+            ServerConnections.getApiClient(options.serverId).sendMessage('ActivityLogEntryStop', '0,1500');
         }
 
         const onUpdate = this.updateFn;

src/components/appRouter.js

@@ -10,6 +10,7 @@ import page from 'page';
 import viewManager from './viewManager/viewManager';
 import AppInfo from './AppInfo';
 import Dashboard from '../scripts/clientUtils';
+import ServerConnections from './ServerConnections';
 
 class AppRouter {
     allRoutes = [];
@@ -96,7 +97,7 @@ class AppRouter {
     beginConnectionWizard() {
         backdrop.clearBackdrop();
         loading.show();
-        window.ConnectionManager.connect({
+        ServerConnections.connect({
             enableAutoLogin: appSettings.enableAutoLogin()
         }).then((result) => {
             this.handleConnectionResult(result);
@@ -155,7 +156,7 @@ class AppRouter {
         Events.on(appHost, 'beforeexit', this.onBeforeExit);
         Events.on(appHost, 'resume', this.onAppResume);
 
-        window.ConnectionManager.connect({
+        ServerConnections.connect({
             enableAutoLogin: appSettings.enableAutoLogin()
         }).then((result) => {
             this.firstConnectionResult = result;
@@ -211,7 +212,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 ? ServerConnections.getApiClient(serverId) : ServerConnections.currentApiClient();
             apiClient.getItem(apiClient.getCurrentUserId(), item).then((itemObject) => {
                 this.showItem(itemObject, options);
             });
@@ -495,15 +496,15 @@ class AppRouter {
     }
 
     initApiClients() {
-        window.ConnectionManager.getApiClients().forEach((apiClient) => {
+        ServerConnections.getApiClients().forEach((apiClient) => {
             this.initApiClient(apiClient, this);
         });
 
-        Events.on(window.ConnectionManager, 'apiclientcreated', this.onApiClientCreated);
+        Events.on(ServerConnections, 'apiclientcreated', this.onApiClientCreated);
     }
 
     onAppResume() {
-        const apiClient = window.ConnectionManager.currentApiClient();
+        const apiClient = ServerConnections.currentApiClient();
 
         if (apiClient) {
             apiClient.ensureWebSocket();
@@ -521,7 +522,7 @@ class AppRouter {
             }
         }
 
-        const apiClient = window.ConnectionManager.currentApiClient();
+        const apiClient = ServerConnections.currentApiClient();
         const pathname = ctx.pathname.toLowerCase();
 
         console.debug('appRouter - processing path request ' + pathname);

src/components/apphost.js

@@ -58,24 +58,22 @@ function generateDeviceId() {
 
     if (keys.push(navigator.userAgent), keys.push(new Date().getTime()), window.btoa) {
         const result = replaceAll(btoa(keys.join('|')), '=', '1');
-        return Promise.resolve(result);
+        return result;
     }
 
-    return Promise.resolve(new Date().getTime());
+    return new Date().getTime();
 }
 
 function getDeviceId() {
     const key = '_deviceId2';
-    const deviceId = appSettings.get(key);
+    let deviceId = appSettings.get(key);
 
-    if (deviceId) {
+    if (!deviceId) {
-        return Promise.resolve(deviceId);
+        deviceId = generateDeviceId();
+        appSettings.set(key, deviceId);
     }
 
-    return generateDeviceId().then(function (deviceId) {
-        appSettings.set(key, deviceId);
     return deviceId;
-    });
 }
 
 function getDeviceName() {
@@ -314,8 +312,8 @@ function askForExit() {
     });
 }
 
-let deviceId;
+let deviceId = getDeviceId();
-let deviceName;
+const deviceName = getDeviceName();
 const appName = 'Jellyfin Web';
 const appVersion = '10.7.0';
 
@@ -354,10 +352,10 @@ export const appHost = {
             return window.NativeShell.AppHost.init();
         }
 
-        deviceName = getDeviceName();
+        return {
-        getDeviceId().then(function (id) {
+            deviceId,
-            deviceId = id;
+            deviceName
-        });
+        };
     },
     deviceName: function () {
         return window.NativeShell ? window.NativeShell.AppHost.deviceName() : deviceName;
@@ -407,3 +405,6 @@ if (window.addEventListener) {
     window.addEventListener('focus', onAppVisible);
     window.addEventListener('blur', onAppHidden);
 }
+
+// load app host on module load
+appHost.init();

src/components/backdrop/backdrop.js

@@ -3,6 +3,7 @@ import { playbackManager } from '../playback/playbackmanager';
 import dom from '../../scripts/dom';
 import * as userSettings from '../../scripts/settings/userSettings';
 import './backdrop.css';
+import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */
 
@@ -176,7 +177,7 @@ import './backdrop.css';
     function getItemImageUrls(item, imageOptions) {
         imageOptions = imageOptions || {};
 
-        const apiClient = window.ConnectionManager.getApiClient(item.ServerId);
+        const apiClient = ServerConnections.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, {

src/components/cardbuilder/cardBuilder.js

@@ -20,6 +20,7 @@ import imageHelper from '../../scripts/imagehelper';
 import './card.css';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../guide/programs.css';
+import ServerConnections from '../ServerConnections';
 
         const enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -370,7 +371,7 @@ import '../guide/programs.css';
 
                 if (serverId !== lastServerId) {
                     lastServerId = serverId;
-                    apiClient = window.ConnectionManager.getApiClient(lastServerId);
+                    apiClient = ServerConnections.getApiClient(lastServerId);
                 }
 
                 if (options.indexBy) {

src/components/cardbuilder/chaptercardbuilder.js

@@ -7,9 +7,9 @@
 
 import datetime from '../../scripts/datetime';
 import imageLoader from '../images/imageLoader';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import layoutManager from '../layoutManager';
 import browser from '../../scripts/browser';
+import ServerConnections from '../ServerConnections';
 
     const enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -48,7 +48,7 @@ import browser from '../../scripts/browser';
         let html = '';
         let itemsInRow = 0;
 
-        const apiClient = ConnectionManager.getApiClient(item.ServerId);
+        const apiClient = ServerConnections.getApiClient(item.ServerId);
 
         for (let i = 0, length = chapters.length; i < length; i++) {
             if (options.rows && itemsInRow === 0) {

src/components/channelMapper/channelMapper.js

@@ -1,7 +1,6 @@
 import dom from '../../scripts/dom';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import loading from '../loading/loading';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 import actionsheet from '../actionSheet/actionSheet';
 import '../../elements/emby-input/emby-input';
@@ -10,13 +9,14 @@ import '../../elements/emby-button/emby-button';
 import '../listview/listview.css';
 import 'material-design-icons-iconfont';
 import '../formdialog.css';
+import ServerConnections from '../ServerConnections';
 
 export default class channelMapper {
     constructor(options) {
         function mapChannel(button, channelId, providerChannelId) {
             loading.show();
             const providerId = options.providerId;
-            ConnectionManager.getApiClient(options.serverId).ajax({
+            ServerConnections.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 = ConnectionManager.getApiClient(serverId);
+            const apiClient = ServerConnections.getApiClient(serverId);
             return apiClient.getJSON(apiClient.getUrl('LiveTv/ChannelMappingOptions', {
                 providerId: providerId
             }));

src/components/collectionEditor/collectionEditor.js

@@ -2,7 +2,6 @@ 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 globalize from '../../scripts/globalize';
 import '../../elements/emby-button/emby-button';
@@ -13,6 +12,7 @@ import '../../elements/emby-select/emby-select';
 import 'material-design-icons-iconfont';
 import '../formdialog.css';
 import '../../assets/css/flexstyles.css';
+import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */
 
@@ -25,7 +25,7 @@ import '../../assets/css/flexstyles.css';
 
         const collectionId = panel.querySelector('#selectCollectionToAddTo').value;
 
-        const apiClient = ConnectionManager.getApiClient(currentServerId);
+        const apiClient = ServerConnections.getApiClient(currentServerId);
 
         if (collectionId) {
             addToCollection(apiClient, panel, collectionId);
@@ -106,7 +106,7 @@ import '../../assets/css/flexstyles.css';
             EnableTotalRecordCount: false
         };
 
-        const apiClient = ConnectionManager.getApiClient(currentServerId);
+        const apiClient = ServerConnections.getApiClient(currentServerId);
         apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => {
             let html = '';
 

src/components/displaySettings/displaySettings.js

@@ -7,10 +7,11 @@ import datetime from '../../scripts/datetime';
 import globalize from '../../scripts/globalize';
 import loading from '../loading/loading';
 import skinManager from '../../scripts/themeManager';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-button/emby-button';
+import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */
 
@@ -181,7 +182,7 @@ import '../../elements/emby-button/emby-button';
 
     function onSubmit(e) {
         const self = this;
-        const apiClient = ConnectionManager.getApiClient(self.options.serverId);
+        const apiClient = ServerConnections.getApiClient(self.options.serverId);
         const userId = self.options.userId;
         const userSettings = self.options.userSettings;
 
@@ -220,7 +221,7 @@ import '../../elements/emby-button/emby-button';
             loading.show();
 
             const userId = self.options.userId;
-            const apiClient = ConnectionManager.getApiClient(self.options.serverId);
+            const apiClient = ServerConnections.getApiClient(self.options.serverId);
             const userSettings = self.options.userSettings;
 
             return apiClient.getUser(userId).then(user => {

src/components/filterdialog/filterdialog.js

@@ -1,10 +1,11 @@
 import dom from '../../scripts/dom';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import globalize from '../../scripts/globalize';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-collapse/emby-collapse';
 import './style.css';
+import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */
     function renderOptions(context, selector, cssClass, items, isCheckedFn) {
@@ -419,7 +420,7 @@ import './style.css';
                     this.bindEvents(dlg);
                     if (enableDynamicFilters(this.options.mode)) {
                         dlg.classList.add('dynamicFilterDialog');
-                        const apiClient = ConnectionManager.getApiClient(this.options.serverId);
+                        const apiClient = ServerConnections.getApiClient(this.options.serverId);
                         loadDynamicFilters(dlg, apiClient, apiClient.getCurrentUserId(), this.options.query);
                     }
                 });

src/components/filtermenu/filtermenu.js

@@ -3,7 +3,6 @@ import focusManager from '../focusManager';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import inputManager from '../../scripts/inputManager';
 import layoutManager from '../layoutManager';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 import * as userSettings from '../../scripts/settings/userSettings';
 import '../../elements/emby-checkbox/emby-checkbox';
@@ -14,6 +13,7 @@ import '../../elements/emby-select/emby-select';
 import 'material-design-icons-iconfont';
 import '../formdialog.css';
 import '../../assets/css/flexstyles.css';
+import ServerConnections from '../ServerConnections';
 
 function onSubmit(e) {
     e.preventDefault();
@@ -194,7 +194,7 @@ function initEditor(context, settings) {
     }
 }
 function loadDynamicFilters(context, options) {
-    var apiClient = ConnectionManager.getApiClient(options.serverId);
+    var apiClient = ServerConnections.getApiClient(options.serverId);
 
     const filterMenuOptions = Object.assign(options.filterMenuOptions, {
 

src/components/groupedcards.js

@@ -2,13 +2,13 @@
 
 import dom from '../scripts/dom';
 import { appRouter } from './appRouter';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import Dashboard from '../scripts/clientUtils';
+import ServerConnections from './ServerConnections';
 
     function onGroupedCardClick(e, card) {
         const itemId = card.getAttribute('data-id');
         const serverId = card.getAttribute('data-serverid');
-        const apiClient = window.ConnectionManager.getApiClient(serverId);
+        const apiClient = ServerConnections.getApiClient(serverId);
         const userId = apiClient.getCurrentUserId();
         const playedIndicator = card.querySelector('.playedIndicator');
         const playedIndicatorHtml = playedIndicator ? playedIndicator.innerHTML : null;

src/components/guide/guide.js

@@ -1,7 +1,7 @@
 import inputManager from '../../scripts/inputManager';
 import browser from '../../scripts/browser';
 import globalize from '../../scripts/globalize';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import scrollHelper from '../../scripts/scrollHelper';
 import serverNotifications from '../../scripts/serverNotifications';
 import loading from '../loading/loading';
@@ -24,6 +24,7 @@ import '../../elements/emby-tabs/emby-tabs';
 import '../../elements/emby-scroller/emby-scroller';
 import '../../assets/css/flexstyles.css';
 import 'webcomponents.js/webcomponents-lite';
+import ServerConnections from '../ServerConnections';
 
 function showViewSettings(instance) {
     import('./guide-settings').then((guideSettingsDialog) => {
@@ -212,7 +213,7 @@ function Guide(options) {
     }
 
     function reloadGuide(context, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
-        const apiClient = ConnectionManager.getApiClient(options.serverId);
+        const apiClient = ServerConnections.getApiClient(options.serverId);
 
         const channelQuery = {
 
@@ -872,7 +873,7 @@ function Guide(options) {
     function reloadPage(page) {
         showLoading();
 
-        const apiClient = ConnectionManager.getApiClient(options.serverId);
+        const apiClient = ServerConnections.getApiClient(options.serverId);
 
         apiClient.getLiveTvGuideInfo().then(function (guideInfo) {
             setDateRange(page, guideInfo);

src/components/homeScreenSettings/homeScreenSettings.js

@@ -3,12 +3,13 @@ import layoutManager from '../layoutManager';
 import focusManager from '../focusManager';
 import globalize from '../../scripts/globalize';
 import loading from '../loading/loading';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import homeSections from '../homesections/homesections';
 import dom from '../../scripts/dom';
 import '../listview/listview.css';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-checkbox/emby-checkbox';
+import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */
 
@@ -384,7 +385,7 @@ import '../../elements/emby-checkbox/emby-checkbox';
 
     function onSubmit(e) {
         const self = this;
-        const apiClient = ConnectionManager.getApiClient(self.options.serverId);
+        const apiClient = ServerConnections.getApiClient(self.options.serverId);
         const userId = self.options.userId;
         const userSettings = self.options.userSettings;
 
@@ -456,7 +457,7 @@ import '../../elements/emby-checkbox/emby-checkbox';
             loading.show();
 
             const userId = self.options.userId;
-            const apiClient = ConnectionManager.getApiClient(self.options.serverId);
+            const apiClient = ServerConnections.getApiClient(self.options.serverId);
             const userSettings = self.options.userSettings;
 
             apiClient.getUser(userId).then(user => {

src/components/homesections/homesections.js

@@ -11,6 +11,7 @@ import '../../elements/emby-scroller/emby-scroller';
 import '../../elements/emby-button/emby-button';
 import './homesections.css';
 import Dashboard from '../../scripts/clientUtils';
+import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */
 
@@ -212,7 +213,7 @@ import Dashboard from '../../scripts/clientUtils';
 
     function getFetchLatestItemsFn(serverId, parentId, collectionType) {
         return function () {
-            const apiClient = window.ConnectionManager.getApiClient(serverId);
+            const apiClient = ServerConnections.getApiClient(serverId);
             let limit = 16;
 
             if (enableScrollX()) {
@@ -368,7 +369,7 @@ import Dashboard from '../../scripts/clientUtils';
 
     function getContinueWatchingFetchFn(serverId) {
         return function () {
-            const apiClient = window.ConnectionManager.getApiClient(serverId);
+            const apiClient = ServerConnections.getApiClient(serverId);
             const screenWidth = dom.getWindowSize().innerWidth;
 
             let limit;
@@ -441,7 +442,7 @@ import Dashboard from '../../scripts/clientUtils';
 
     function getContinueListeningFetchFn(serverId) {
         return function () {
-            const apiClient = window.ConnectionManager.getApiClient(serverId);
+            const apiClient = ServerConnections.getApiClient(serverId);
             const screenWidth = dom.getWindowSize().innerWidth;
 
             let limit;
@@ -514,7 +515,7 @@ import Dashboard from '../../scripts/clientUtils';
 
     function getOnNowFetchFn(serverId) {
         return function () {
-            const apiClient = window.ConnectionManager.getApiClient(serverId);
+            const apiClient = ServerConnections.getApiClient(serverId);
             return apiClient.getLiveTvRecommendedPrograms({
                 userId: apiClient.getCurrentUserId(),
                 IsAiring: true,
@@ -657,7 +658,7 @@ import Dashboard from '../../scripts/clientUtils';
 
     function getNextUpFetchFn(serverId) {
         return function () {
-            const apiClient = window.ConnectionManager.getApiClient(serverId);
+            const apiClient = ServerConnections.getApiClient(serverId);
             return apiClient.getNextUpEpisodes({
                 Limit: enableScrollX() ? 24 : 15,
                 Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo,Path',
@@ -728,7 +729,7 @@ import Dashboard from '../../scripts/clientUtils';
 
     function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) {
         return function () {
-            const apiClient = window.ConnectionManager.getApiClient(serverId);
+            const apiClient = ServerConnections.getApiClient(serverId);
             return apiClient.getLiveTvRecordings({
                 userId: apiClient.getCurrentUserId(),
                 Limit: enableScrollX() ? 12 : 5,

src/components/imageDownloader/imageDownloader.js

@@ -2,7 +2,6 @@ import dom from '../../scripts/dom';
 import loading from '../loading/loading';
 import { appHost } from '../apphost';
 import dialogHelper from '../dialogHelper/dialogHelper';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import imageLoader from '../images/imageLoader';
 import browser from '../../scripts/browser';
 import layoutManager from '../layoutManager';
@@ -13,6 +12,7 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-button/emby-button';
 import '../formdialog.css';
 import '../cardbuilder/card.css';
+import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */
 
@@ -317,7 +317,7 @@ import '../cardbuilder/card.css';
         loading.show();
 
         import('./imageDownloader.template.html').then(({default: template}) => {
-            const apiClient = ConnectionManager.getApiClient(serverId);
+            const apiClient = ServerConnections.getApiClient(serverId);
 
             currentItemId = itemId;
             currentItemType = itemType;

src/components/imageUploader/imageUploader.js

@@ -6,7 +6,6 @@
  */
 
 import dialogHelper from '../dialogHelper/dialogHelper';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import dom from '../../scripts/dom';
 import loading from '../loading/loading';
 import scrollHelper from '../../scripts/scrollHelper';
@@ -16,6 +15,7 @@ import '../../elements/emby-button/emby-button';
 import '../../elements/emby-select/emby-select';
 import '../formdialog.css';
 import './style.css';
+import ServerConnections from '../ServerConnections';
 
     let currentItemId;
     let currentServerId;
@@ -108,7 +108,7 @@ import './style.css';
             return false;
         }
 
-        ConnectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => {
+        ServerConnections.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => {
             dlg.querySelector('#uploadImage').value = '';
 
             loading.hide();

src/components/imageeditor/imageeditor.js

@@ -1,5 +1,4 @@
 import dialogHelper from '../dialogHelper/dialogHelper';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import loading from '../loading/loading';
 import dom from '../../scripts/dom';
 import layoutManager from '../layoutManager';
@@ -14,6 +13,7 @@ import '../formdialog.css';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
 import './imageeditor.css';
+import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */
 
@@ -36,10 +36,10 @@ import './imageeditor.css';
         let apiClient;
 
         if (item) {
-            apiClient = ConnectionManager.getApiClient(item.ServerId);
+            apiClient = ServerConnections.getApiClient(item.ServerId);
             reloadItem(page, item, apiClient, focusContext);
         } else {
-            apiClient = ConnectionManager.getApiClient(currentItem.ServerId);
+            apiClient = ServerConnections.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 = ConnectionManager.getApiClient(serverId);
+        const apiClient = ServerConnections.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 = ConnectionManager.getApiClient(currentItem.ServerId);
+            const apiClient = ServerConnections.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 = ConnectionManager.getApiClient(currentItem.ServerId);
+            const apiClient = ServerConnections.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 = ConnectionManager.getApiClient(serverId);
+            const apiClient = ServerConnections.getApiClient(serverId);
             apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
                 const dialogOptions = {
                     removeOnClose: true

src/components/itemContextMenu.js

@@ -1,4 +1,3 @@
-import { ConnectionManager } from 'jellyfin-apiclient';
 import browser from '../scripts/browser';
 import globalize from '../scripts/globalize';
 import actionsheet from './actionSheet/actionSheet';
@@ -6,6 +5,7 @@ import { appHost } from './apphost';
 import { appRouter } from './appRouter';
 import itemHelper from './itemHelper';
 import { playbackManager } from './playback/playbackmanager';
+import ServerConnections from './ServerConnections';
 
 /* 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 = ConnectionManager.getApiClient(serverId);
+        const apiClient = ServerConnections.getApiClient(serverId);
 
         return new Promise(function (resolve, reject) {
             switch (id) {

src/components/itemMediaInfo/itemMediaInfo.js

@@ -8,7 +8,6 @@
 import dialogHelper from '../dialogHelper/dialogHelper';
 import layoutManager from '../layoutManager';
 import globalize from '../../scripts/globalize';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import loading from '../loading/loading';
 import '../../elements/emby-select/emby-select';
 import '../listview/listview.css';
@@ -17,6 +16,7 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../formdialog.css';
 import 'material-design-icons-iconfont';
 import '../../assets/css/flexstyles.css';
+import ServerConnections from '../ServerConnections';
 
     function setMediaInfo(user, page, item) {
         let html = item.MediaSources.map(version => {
@@ -163,7 +163,7 @@ import '../../assets/css/flexstyles.css';
     }
 
     function loadMediaInfo(itemId, serverId, template) {
-        const apiClient = ConnectionManager.getApiClient(serverId);
+        const apiClient = ServerConnections.getApiClient(serverId);
         return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
             const dialogOptions = {
                 size: 'small',

src/components/itemidentifier/itemidentifier.js

@@ -7,7 +7,6 @@
 
 import dialogHelper from '../dialogHelper/dialogHelper';
 import loading from '../loading/loading';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 import scrollHelper from '../../scripts/scrollHelper';
 import layoutManager from '../layoutManager';
@@ -19,6 +18,7 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../formdialog.css';
 import 'material-design-icons-iconfont';
 import '../cardbuilder/card.css';
+import ServerConnections from '../ServerConnections';
 
     const enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -31,7 +31,7 @@ import '../cardbuilder/card.css';
     let currentSearchResult;
 
     function getApiClient() {
-        return ConnectionManager.getApiClient(currentServerId);
+        return ServerConnections.getApiClient(currentServerId);
     }
 
     function searchForIdentificationResults(page) {

src/components/listview/listview.js

@@ -8,7 +8,6 @@
 import itemHelper from '../itemHelper';
 import mediaInfo from '../mediainfo/mediainfo';
 import indicators from '../indicators/indicators';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import layoutManager from '../layoutManager';
 import globalize from '../../scripts/globalize';
 import datetime from '../../scripts/datetime';
@@ -16,6 +15,7 @@ import cardBuilder from '../cardbuilder/cardBuilder';
 import './listview.css';
 import '../../elements/emby-ratingbutton/emby-ratingbutton';
 import '../../elements/emby-playstatebutton/emby-playstatebutton';
+import ServerConnections from '../ServerConnections';
 
     function getIndex(item, options) {
         if (options.index === 'disc') {
@@ -77,7 +77,7 @@ import '../../elements/emby-playstatebutton/emby-playstatebutton';
     }
 
     function getImageUrl(item, width) {
-        const apiClient = ConnectionManager.getApiClient(item.ServerId);
+        const apiClient = ServerConnections.getApiClient(item.ServerId);
         let itemId;
 
         const options = {
@@ -106,7 +106,7 @@ import '../../elements/emby-playstatebutton/emby-playstatebutton';
     }
 
     function getChannelImageUrl(item, width) {
-        const apiClient = ConnectionManager.getApiClient(item.ServerId);
+        const apiClient = ServerConnections.getApiClient(item.ServerId);
         const options = {
             maxWidth: width,
             type: 'Primary'

src/components/metadataEditor/metadataEditor.js

@@ -4,7 +4,6 @@ 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 globalize from '../../scripts/globalize';
 import shell from '../../scripts/shell';
 import '../../elements/emby-checkbox/emby-checkbox';
@@ -17,6 +16,7 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../formdialog.css';
 import '../../assets/css/clearbutton.css';
 import '../../assets/css/flexstyles.css';
+import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */
 
@@ -290,7 +290,7 @@ import '../../assets/css/flexstyles.css';
     }
 
     function getApiClient() {
-        return ConnectionManager.getApiClient(currentItem.ServerId);
+        return ServerConnections.getApiClient(currentItem.ServerId);
     }
 
     function bindAll(elems, eventName, fn) {
@@ -370,7 +370,7 @@ import '../../assets/css/flexstyles.css';
     }
 
     function getItem(itemId, serverId) {
-        const apiClient = ConnectionManager.getApiClient(serverId);
+        const apiClient = ServerConnections.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 = ConnectionManager.getApiClient(serverId);
+        const apiClient = ServerConnections.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, ConnectionManager.getApiClient(serverId));
+            init(dlg, ServerConnections.getApiClient(serverId));
 
             reload(dlg, itemId, serverId);
         });
@@ -1095,7 +1095,7 @@ import '../../assets/css/flexstyles.css';
 
                     currentContext = elem;
 
-                    init(elem, ConnectionManager.getApiClient(serverId));
+                    init(elem, ServerConnections.getApiClient(serverId));
                     reload(elem, itemId, serverId);
 
                     focusManager.autoFocus(elem);

src/components/multiSelect/multiSelect.js

@@ -1,10 +1,10 @@
 import browser from '../../scripts/browser';
 import { appHost } from '../apphost';
 import loading from '../loading/loading';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 import dom from '../../scripts/dom';
 import './multiSelect.css';
+import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */
 
@@ -170,7 +170,7 @@ import './multiSelect.css';
     }
 
     function showMenuForSelectedItems(e) {
-        const apiClient = window.ConnectionManager.currentApiClient();
+        const apiClient = ServerConnections.currentApiClient();
 
         apiClient.getCurrentUser().then(user => {
             const menuItems = [];

src/components/nowPlayingBar/nowPlayingBar.js

@@ -1,5 +1,5 @@
 import datetime from '../../scripts/datetime';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import browser from '../../scripts/browser';
 import imageLoader from '../../scripts/imagehelper';
 import layoutManager from '../layoutManager';
@@ -10,6 +10,7 @@ import dom from '../../scripts/dom';
 import itemContextMenu from '../itemContextMenu';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-ratingbutton/emby-ratingbutton';
+import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */
 
@@ -451,7 +452,7 @@ import '../../elements/emby-ratingbutton/emby-ratingbutton';
             if (item.SeriesPrimaryImageTag) {
                 options.tag = item.SeriesPrimaryImageTag;
 
-                return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+                return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
             }
         }
 
@@ -459,12 +460,12 @@ import '../../elements/emby-ratingbutton/emby-ratingbutton';
             if (item.SeriesThumbImageTag) {
                 options.tag = item.SeriesThumbImageTag;
 
-                return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+                return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
             }
             if (item.ParentThumbImageTag) {
                 options.tag = item.ParentThumbImageTag;
 
-                return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
+                return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
             }
         }
 
@@ -481,12 +482,12 @@ import '../../elements/emby-ratingbutton/emby-ratingbutton';
 
         if (item.ImageTags && item.ImageTags[options.type]) {
             options.tag = item.ImageTags[options.type];
-            return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
+            return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
         }
 
         if (item.AlbumId && item.AlbumPrimaryImageTag) {
             options.tag = item.AlbumPrimaryImageTag;
-            return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
+            return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
         }
 
         return null;
@@ -547,7 +548,7 @@ import '../../elements/emby-ratingbutton/emby-ratingbutton';
 
         if (nowPlayingItem.Id) {
             if (isRefreshing) {
-                const apiClient = ConnectionManager.getApiClient(nowPlayingItem.ServerId);
+                const apiClient = ServerConnections.getApiClient(nowPlayingItem.ServerId);
                 apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) {
                     const userData = item.UserData || {};
                     const likes = userData.Likes == null ? '' : userData.Likes;

src/components/playback/mediasession.js

@@ -1,6 +1,7 @@
 import { playbackManager } from '../playback/playbackmanager';
 import nowPlayingHelper from '../playback/nowplayinghelper';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
+import ServerConnections from '../ServerConnections';
 /* eslint-disable indent */
 
     // Reports media playback to the device for lock screen control
@@ -15,16 +16,16 @@ import { ConnectionManager, Events } from 'jellyfin-apiclient';
         } else if (options.type === 'Primary' && item.SeriesPrimaryImageTag) {
             options.tag = item.SeriesPrimaryImageTag;
 
-            return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+            return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
         } else if (options.type === 'Thumb') {
             if (item.SeriesThumbImageTag) {
                 options.tag = item.SeriesThumbImageTag;
 
-                return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+                return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
             } else if (item.ParentThumbImageTag) {
                 options.tag = item.ParentThumbImageTag;
 
-                return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
+                return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
             }
         }
 
@@ -37,11 +38,11 @@ import { ConnectionManager, Events } from 'jellyfin-apiclient';
         if (item.ImageTags && item.ImageTags[options.type]) {
             options.tag = item.ImageTags[options.type];
 
-            return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);
+            return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);
         } else if (item.AlbumId && item.AlbumPrimaryImageTag) {
             options.tag = item.AlbumPrimaryImageTag;
 
-            return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
+            return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
         }
 
         return null;

src/components/playback/playbackmanager.js

@@ -1,4 +1,4 @@
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import datetime from '../../scripts/datetime';
 import appSettings from '../../scripts/settings/appSettings';
 import itemHelper from '../itemHelper';
@@ -9,6 +9,7 @@ import globalize from '../../scripts/globalize';
 import loading from '../loading/loading';
 import { appHost } from '../apphost';
 import * as Screenfull from 'screenfull';
+import ServerConnections from '../ServerConnections';
 
 function enableLocalPlaylistManagement(player) {
     if (player.getPlaylist) {
@@ -68,7 +69,7 @@ function reportPlayback(playbackManagerInstance, state, player, reportPlaylist,
         addPlaylistToPlaybackReport(playbackManagerInstance, info, player, serverId);
     }
 
-    const apiClient = ConnectionManager.getApiClient(serverId);
+    const apiClient = ServerConnections.getApiClient(serverId);
     const reportPlaybackPromise = apiClient[method](info);
     // Notify that report has been sent
     reportPlaybackPromise.then(() => {
@@ -105,7 +106,7 @@ function normalizeName(t) {
 }
 
 function getItemsForPlayback(serverId, query) {
-    const apiClient = ConnectionManager.getApiClient(serverId);
+    const apiClient = ServerConnections.getApiClient(serverId);
 
     if (query.Ids && query.Ids.split(',').length === 1) {
         const itemId = query.Ids.split(',');
@@ -869,7 +870,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 ServerConnections.currentApiClient().getCurrentUser().then(function (user) {
                     const targets = [];
 
                     targets.push({
@@ -1367,7 +1368,7 @@ class PlaybackManager {
         function getSavedMaxStreamingBitrate(apiClient, mediaType) {
             if (!apiClient) {
                 // This should hopefully never happen
-                apiClient = window.ConnectionManager.currentApiClient();
+                apiClient = ServerConnections.currentApiClient();
             }
 
             const endpointInfo = apiClient.getSavedEndpointInfo() || {};
@@ -1390,7 +1391,7 @@ class PlaybackManager {
             const mediaType = playerData.streamInfo ? playerData.streamInfo.mediaType : null;
             const currentItem = self.currentItem(player);
 
-            const apiClient = currentItem ? ConnectionManager.getApiClient(currentItem.ServerId) : window.ConnectionManager.currentApiClient();
+            const apiClient = currentItem ? ServerConnections.getApiClient(currentItem.ServerId) : ServerConnections.currentApiClient();
             return getSavedMaxStreamingBitrate(apiClient, mediaType);
         };
 
@@ -1404,7 +1405,7 @@ class PlaybackManager {
             const mediaType = playerData.streamInfo ? playerData.streamInfo.mediaType : null;
             const currentItem = self.currentItem(player);
 
-            const apiClient = currentItem ? ConnectionManager.getApiClient(currentItem.ServerId) : window.ConnectionManager.currentApiClient();
+            const apiClient = currentItem ? ServerConnections.getApiClient(currentItem.ServerId) : ServerConnections.currentApiClient();
             const endpointInfo = apiClient.getSavedEndpointInfo() || {};
 
             return appSettings.enableAutomaticBitrateDetection(endpointInfo.IsInNetwork, mediaType);
@@ -1416,7 +1417,7 @@ class PlaybackManager {
                 return player.setMaxStreamingBitrate(options);
             }
 
-            const apiClient = ConnectionManager.getApiClient(self.currentItem(player).ServerId);
+            const apiClient = ServerConnections.getApiClient(self.currentItem(player).ServerId);
 
             apiClient.getEndpointInfo().then(function (endpointInfo) {
                 const playerData = getPlayerData(player);
@@ -1678,7 +1679,7 @@ class PlaybackManager {
                 const subtitleStreamIndex = params.SubtitleStreamIndex == null ? getPlayerData(player).subtitleStreamIndex : params.SubtitleStreamIndex;
 
                 let currentMediaSource = self.currentMediaSource(player);
-                const apiClient = ConnectionManager.getApiClient(currentItem.ServerId);
+                const apiClient = ServerConnections.getApiClient(currentItem.ServerId);
 
                 if (ticks) {
                     ticks = parseInt(ticks);
@@ -1834,7 +1835,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 = ConnectionManager.getApiClient(firstItem.ServerId);
+                    const apiClient = ServerConnections.getApiClient(firstItem.ServerId);
 
                     apiClient.getCurrentUser().then(function (user) {
                         if (!user.Configuration.EnableNextEpisodeAutoPlay || !firstItem.SeriesId) {
@@ -2065,7 +2066,7 @@ class PlaybackManager {
                 return playOther(items, options, user);
             }
 
-            const apiClient = ConnectionManager.getApiClient(firstItem.ServerId);
+            const apiClient = ServerConnections.getApiClient(firstItem.ServerId);
 
             return getIntros(firstItem, apiClient, options).then(function (introsResult) {
                 const introItems = introsResult.Items;
@@ -2128,14 +2129,14 @@ class PlaybackManager {
                 const mediaType = item.MediaType;
 
                 const onBitrateDetectionFailure = function () {
-                    return playAfterBitrateDetect(getSavedMaxStreamingBitrate(ConnectionManager.getApiClient(item.ServerId), mediaType), item, playOptions, onPlaybackStartedFn);
+                    return playAfterBitrateDetect(getSavedMaxStreamingBitrate(ServerConnections.getApiClient(item.ServerId), mediaType), item, playOptions, onPlaybackStartedFn);
                 };
 
                 if (!isServerItem(item) || itemHelper.isLocalItem(item)) {
                     return onBitrateDetectionFailure();
                 }
 
-                const apiClient = ConnectionManager.getApiClient(item.ServerId);
+                const apiClient = ServerConnections.getApiClient(item.ServerId);
                 apiClient.getEndpointInfo().then(function (endpointInfo) {
                     if ((mediaType === 'Video' || mediaType === 'Audio') && appSettings.enableAutomaticBitrateDetection(endpointInfo.IsInNetwork, mediaType)) {
                         return apiClient.detectBitrate().then(function (bitrate) {
@@ -2254,7 +2255,7 @@ class PlaybackManager {
             return Promise.all([promise, player.getDeviceProfile(item)]).then(function (responses) {
                 const deviceProfile = responses[1];
 
-                const apiClient = ConnectionManager.getApiClient(item.ServerId);
+                const apiClient = ServerConnections.getApiClient(item.ServerId);
 
                 const mediaSourceId = playOptions.mediaSourceId;
                 const audioStreamIndex = playOptions.audioStreamIndex;
@@ -2299,11 +2300,11 @@ class PlaybackManager {
             const startPosition = options.startPositionTicks || 0;
             const mediaType = options.mediaType || item.MediaType;
             const player = getPlayer(item, options);
-            const apiClient = ConnectionManager.getApiClient(item.ServerId);
+            const apiClient = ServerConnections.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(ConnectionManager.getApiClient(item.ServerId), mediaType);
+                const maxBitrate = getSavedMaxStreamingBitrate(ServerConnections.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) {
@@ -2319,11 +2320,11 @@ class PlaybackManager {
             const mediaType = options.mediaType || item.MediaType;
             // TODO: Remove the true forceLocalPlayer hack
             const player = getPlayer(item, options, true);
-            const apiClient = ConnectionManager.getApiClient(item.ServerId);
+            const apiClient = ServerConnections.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(ConnectionManager.getApiClient(item.ServerId), mediaType);
+                const maxBitrate = getSavedMaxStreamingBitrate(ServerConnections.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) {
@@ -2707,7 +2708,7 @@ class PlaybackManager {
             const queueDirectToPlayer = player && !enableLocalPlaylistManagement(player);
 
             if (queueDirectToPlayer) {
-                const apiClient = ConnectionManager.getApiClient(items[0].ServerId);
+                const apiClient = ServerConnections.getApiClient(items[0].ServerId);
 
                 player.getDeviceProfile(items[0]).then(function (profile) {
                     setStreamUrls(items, profile, self.getMaxStreamingBitrate(player), apiClient, 0).then(function () {
@@ -3157,13 +3158,13 @@ class PlaybackManager {
 
             streamInfo.lastMediaInfoQuery = new Date().getTime();
 
-            const apiClient = ConnectionManager.getApiClient(serverId);
+            const apiClient = ServerConnections.getApiClient(serverId);
 
             if (!apiClient.isMinServerVersion('3.2.70.7')) {
                 return;
             }
 
-            ConnectionManager.getApiClient(serverId).getLiveStreamMediaInfo(liveStreamId).then(function (info) {
+            ServerConnections.getApiClient(serverId).getLiveStreamMediaInfo(liveStreamId).then(function (info) {
                 mediaSource.MediaStreams = info.MediaStreams;
                 Events.trigger(player, 'mediastreamschange');
             }, function () {
@@ -3220,7 +3221,7 @@ class PlaybackManager {
             return Promise.reject();
         }
 
-        const apiClient = ConnectionManager.getApiClient(nextItem.item.ServerId);
+        const apiClient = ServerConnections.getApiClient(nextItem.item.ServerId);
         return apiClient.getItem(apiClient.getCurrentUserId(), nextItem.item.Id);
     }
 
@@ -3361,7 +3362,7 @@ class PlaybackManager {
             return player.playTrailers(item);
         }
 
-        const apiClient = ConnectionManager.getApiClient(item.ServerId);
+        const apiClient = ServerConnections.getApiClient(item.ServerId);
 
         const instance = this;
 
@@ -3393,7 +3394,7 @@ class PlaybackManager {
     }
 
     getSubtitleUrl(textStream, serverId) {
-        const apiClient = ConnectionManager.getApiClient(serverId);
+        const apiClient = ServerConnections.getApiClient(serverId);
 
         return !textStream.IsExternalUrl ? apiClient.getUrl(textStream.DeliveryUrl) : textStream.DeliveryUrl;
     }
@@ -3473,7 +3474,7 @@ class PlaybackManager {
             return player.instantMix(item);
         }
 
-        const apiClient = ConnectionManager.getApiClient(item.ServerId);
+        const apiClient = ServerConnections.getApiClient(item.ServerId);
 
         const options = {};
         options.UserId = apiClient.getCurrentUserId();

src/components/playback/playersettingsmenu.js

@@ -1,8 +1,8 @@
-import { ConnectionManager } from 'jellyfin-apiclient';
 import actionsheet from '../actionSheet/actionSheet';
 import { playbackManager } from '../playback/playbackmanager';
 import globalize from '../../scripts/globalize';
 import qualityoptions from '../qualityOptions';
+import ServerConnections from '../ServerConnections';
 
 function showQualityMenu(player, btn) {
     const videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
@@ -251,7 +251,7 @@ export function show(options) {
         return showWithUser(options, player, null);
     }
 
-    var apiClient = ConnectionManager.getApiClient(currentItem.ServerId);
+    var apiClient = ServerConnections.getApiClient(currentItem.ServerId);
     return apiClient.getCurrentUser().then(function (user) {
         return showWithUser(options, player, user);
     });

src/components/playbackSettings/playbackSettings.js

@@ -5,9 +5,10 @@ import focusManager from '../focusManager';
 import qualityoptions from '../qualityOptions';
 import globalize from '../../scripts/globalize';
 import loading from '../loading/loading';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-checkbox/emby-checkbox';
+import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */
 
@@ -257,7 +258,7 @@ import '../../elements/emby-checkbox/emby-checkbox';
 
     function onSubmit(e) {
         const self = this;
-        const apiClient = ConnectionManager.getApiClient(self.options.serverId);
+        const apiClient = ServerConnections.getApiClient(self.options.serverId);
         const userId = self.options.userId;
         const userSettings = self.options.userSettings;
 
@@ -304,7 +305,7 @@ import '../../elements/emby-checkbox/emby-checkbox';
             loading.show();
 
             const userId = self.options.userId;
-            const apiClient = ConnectionManager.getApiClient(self.options.serverId);
+            const apiClient = ServerConnections.getApiClient(self.options.serverId);
             const userSettings = self.options.userSettings;
 
             apiClient.getUser(userId).then(user => {

src/components/playerstats/playerstats.js

@@ -1,4 +1,4 @@
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import '../../elements/emby-button/paper-icon-button-light';
 import globalize from '../../scripts/globalize';
 import layoutManager from '../layoutManager';
@@ -6,6 +6,7 @@ import { playbackManager } from '../playback/playbackmanager';
 import playMethodHelper from '../playback/playmethodhelper';
 import syncPlayManager from '../syncPlay/syncPlayManager';
 import './playerstats.css';
+import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */
 
@@ -94,7 +95,7 @@ import './playerstats.css';
             return Promise.resolve(instance.lastSession);
         }
 
-        const apiClient = ConnectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
+        const apiClient = ServerConnections.getApiClient(playbackManager.currentItem(player).ServerId);
 
         return apiClient.getSessions({
             deviceId: apiClient.deviceId()
@@ -413,7 +414,7 @@ import './playerstats.css';
                 name: 'Original Media Info'
             });
 
-            var apiClient = ConnectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
+            var apiClient = ServerConnections.getApiClient(playbackManager.currentItem(player).ServerId);
             if (syncPlayManager.isSyncPlayEnabled() && apiClient.isMinServerVersion('10.6.0')) {
                 categories.push({
                     stats: getSyncPlayStats(),

src/components/playlisteditor/playlisteditor.js

@@ -3,7 +3,6 @@ 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 * as userSettings from '../../scripts/settings/userSettings';
 import { appRouter } from '../appRouter';
 import globalize from '../../scripts/globalize';
@@ -13,6 +12,7 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-select/emby-select';
 import 'material-design-icons-iconfont';
 import '../formdialog.css';
+import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */
 
@@ -22,7 +22,7 @@ import '../formdialog.css';
         const panel = dom.parentWithClass(this, 'dialog');
 
         const playlistId = panel.querySelector('#selectPlaylistToAddTo').value;
-        const apiClient = ConnectionManager.getApiClient(currentServerId);
+        const apiClient = ServerConnections.getApiClient(currentServerId);
 
         if (playlistId) {
             userSettings.set('playlisteditor-lastplaylistid', playlistId);
@@ -113,7 +113,7 @@ import '../formdialog.css';
             EnableTotalRecordCount: false
         };
 
-        const apiClient = ConnectionManager.getApiClient(currentServerId);
+        const apiClient = ServerConnections.getApiClient(currentServerId);
         apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => {
             let html = '';
 

src/components/recordingcreator/recordingbutton.js

@@ -1,9 +1,9 @@
-import { ConnectionManager } from 'jellyfin-apiclient';
 import dom from '../../scripts/dom';
 import recordingHelper from './recordinghelper';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-button/emby-button';
 import './recordingfields.css';
+import ServerConnections from '../ServerConnections';
 
 function onRecordingButtonClick(e) {
     const item = this.item;
@@ -53,7 +53,7 @@ class RecordingButton {
     }
 
     refresh(serverId, itemId) {
-        const apiClient = ConnectionManager.getApiClient(serverId);
+        const apiClient = ServerConnections.getApiClient(serverId);
         const self = this;
         apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
             self.refreshItem(item);

src/components/recordingcreator/recordingcreator.js

@@ -7,7 +7,7 @@ import scrollHelper from '../../scripts/scrollHelper';
 import datetime from '../../scripts/datetime';
 import imageLoader from '../images/imageLoader';
 import recordingFields from './recordingfields';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-checkbox/emby-checkbox';
@@ -16,6 +16,7 @@ import '../../elements/emby-input/emby-input';
 import '../formdialog.css';
 import './recordingcreator.css';
 import 'material-design-icons-iconfont';
+import ServerConnections from '../ServerConnections';
 
 let currentDialog;
 let closeAction;
@@ -101,7 +102,7 @@ function renderRecording(context, defaultTimer, program, apiClient, refreshRecor
 function reload(context, programId, serverId, refreshRecordingStateOnly) {
     loading.show();
 
-    const apiClient = ConnectionManager.getApiClient(serverId);
+    const apiClient = ServerConnections.getApiClient(serverId);
 
     const promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
     const promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
@@ -117,7 +118,7 @@ function reload(context, programId, serverId, refreshRecordingStateOnly) {
 function executeCloseAction(action, programId, serverId) {
     if (action === 'play') {
         import('../playback/playbackmanager').then((playbackManager) => {
-            const apiClient = ConnectionManager.getApiClient(serverId);
+            const apiClient = ServerConnections.getApiClient(serverId);
 
             apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
                 playbackManager.play({

src/components/recordingcreator/recordingeditor.js

@@ -2,7 +2,6 @@
 import dialogHelper from '../dialogHelper/dialogHelper';
 import globalize from '../../scripts/globalize';
 import layoutManager from '../layoutManager';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import loading from '../loading/loading';
 import scrollHelper from '../../scripts/scrollHelper';
 import '../../assets/css/scrollstyles.css';
@@ -14,6 +13,7 @@ import '../formdialog.css';
 import './recordingcreator.css';
 import 'material-design-icons-iconfont';
 import '../../assets/css/flexstyles.css';
+import ServerConnections from '../ServerConnections';
 
 let currentDialog;
 let recordingDeleted = false;
@@ -42,7 +42,7 @@ function closeDialog(isDeleted) {
 function onSubmit(e) {
     const form = this;
 
-    const apiClient = ConnectionManager.getApiClient(currentServerId);
+    const apiClient = ServerConnections.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 = ConnectionManager.getApiClient(currentServerId);
+        const apiClient = ServerConnections.getApiClient(currentServerId);
 
         deleteTimer(apiClient, currentItemId).then(function () {
             closeDialog(true);
@@ -76,7 +76,7 @@ function reload(context, id) {
     loading.show();
     currentItemId = id;
 
-    const apiClient = ConnectionManager.getApiClient(currentServerId);
+    const apiClient = ServerConnections.getApiClient(currentServerId);
     apiClient.getLiveTvTimer(id).then(function (result) {
         renderTimer(context, result, apiClient);
         loading.hide();

src/components/recordingcreator/recordingfields.js

@@ -1,5 +1,5 @@
 import globalize from '../../scripts/globalize';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import serverNotifications from '../../scripts/serverNotifications';
 import loading from '../loading/loading';
 import dom from '../../scripts/dom';
@@ -8,6 +8,7 @@ import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
 import './recordingfields.css';
 import '../../assets/css/flexstyles.css';
+import ServerConnections from '../ServerConnections';
 
 /*eslint prefer-const: "error"*/
 
@@ -45,7 +46,7 @@ function loadData(parent, program, apiClient) {
 
 function fetchData(instance) {
     const options = instance.options;
-    const apiClient = ConnectionManager.getApiClient(options.serverId);
+    const apiClient = ServerConnections.getApiClient(options.serverId);
 
     options.parent.querySelector('.recordingFields').classList.remove('hide');
     return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
@@ -196,7 +197,7 @@ function onRecordChange(e) {
 
     const self = this;
     const options = this.options;
-    const apiClient = ConnectionManager.getApiClient(options.serverId);
+    const apiClient = ServerConnections.getApiClient(options.serverId);
 
     const button = dom.parentWithTag(e.target, 'BUTTON');
     const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
@@ -235,7 +236,7 @@ function onRecordSeriesChange(e) {
 
     const self = this;
     const options = this.options;
-    const apiClient = ConnectionManager.getApiClient(options.serverId);
+    const apiClient = ServerConnections.getApiClient(options.serverId);
 
     const button = dom.parentWithTag(e.target, 'BUTTON');
     const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');

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 ServerConnections from '../ServerConnections';
 
 /*eslint prefer-const: "error"*/
 
@@ -40,7 +40,7 @@ function cancelTimerWithConfirmation(timerId, serverId) {
             }).then(function () {
                 loading.show();
 
-                const apiClient = ConnectionManager.getApiClient(serverId);
+                const apiClient = ServerConnections.getApiClient(serverId);
                 cancelTimer(apiClient, timerId, true).then(resolve, reject);
             }, reject);
         });
@@ -60,7 +60,7 @@ function cancelSeriesTimerWithConfirmation(timerId, serverId) {
             }).then(function () {
                 loading.show();
 
-                const apiClient = ConnectionManager.getApiClient(serverId);
+                const apiClient = ServerConnections.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 = ConnectionManager.getApiClient(serverId);
+                const apiClient = ServerConnections.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 = ConnectionManager.getApiClient(serverId);
+    const apiClient = ServerConnections.getApiClient(serverId);
     const hasTimer = timerId && timerStatus !== 'Cancelled';
     if (seriesTimerId && hasTimer) {
         // cancel

src/components/recordingcreator/seriesrecordingeditor.js

@@ -1,7 +1,6 @@
 import dialogHelper from '../dialogHelper/dialogHelper';
 import globalize from '../../scripts/globalize';
 import layoutManager from '../layoutManager';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import loading from '../loading/loading';
 import scrollHelper from '../../scripts/scrollHelper';
 import datetime from '../../scripts/datetime';
@@ -15,6 +14,7 @@ import '../formdialog.css';
 import './recordingcreator.css';
 import 'material-design-icons-iconfont';
 import '../../assets/css/flexstyles.css';
+import ServerConnections from '../ServerConnections';
 
 /*eslint prefer-const: "error"*/
 
@@ -64,7 +64,7 @@ function closeDialog(isDeleted) {
 function onSubmit(e) {
     const form = this;
 
-    const apiClient = ConnectionManager.getApiClient(currentServerId);
+    const apiClient = ServerConnections.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 = ConnectionManager.getApiClient(currentServerId);
+        const apiClient = ServerConnections.getApiClient(currentServerId);
         deleteTimer(apiClient, currentItemId).then(function () {
             closeDialog(true);
         });
@@ -102,7 +102,7 @@ function init(context) {
 }
 
 function reload(context, id) {
-    const apiClient = ConnectionManager.getApiClient(currentServerId);
+    const apiClient = ServerConnections.getApiClient(currentServerId);
 
     loading.show();
     if (typeof id === 'string') {

src/components/refreshdialog/refreshdialog.js

@@ -2,7 +2,6 @@ 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 globalize from '../../scripts/globalize';
 import '../../elements/emby-input/emby-input';
 import '../../elements/emby-button/emby-button';
@@ -11,6 +10,7 @@ import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-select/emby-select';
 import 'material-design-icons-iconfont';
 import '../formdialog.css';
+import ServerConnections from '../ServerConnections';
 
 /*eslint prefer-const: "error"*/
 
@@ -66,7 +66,7 @@ function onSubmit(e) {
     const dlg = dom.parentWithClass(e.target, 'dialog');
     const options = instance.options;
 
-    const apiClient = ConnectionManager.getApiClient(options.serverId);
+    const apiClient = ServerConnections.getApiClient(options.serverId);
 
     const replaceAllMetadata = dlg.querySelector('#selectMetadataRefreshMode').value === 'all';
 

src/components/remotecontrol/remotecontrol.js

@@ -4,7 +4,7 @@ import listView from '../listview/listview';
 import imageLoader from '../images/imageLoader';
 import { playbackManager } from '../playback/playbackmanager';
 import nowPlayingHelper from '../playback/nowplayinghelper';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import { appHost } from '../apphost';
 import globalize from '../../scripts/globalize';
 import layoutManager from '../layoutManager';
@@ -15,6 +15,7 @@ import '../cardbuilder/card.css';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 import './remotecontrol.css';
 import '../../elements/emby-ratingbutton/emby-ratingbutton';
+import ServerConnections from '../ServerConnections';
 
 /*eslint prefer-const: "error"*/
 
@@ -95,18 +96,18 @@ function seriesImageUrl(item, options) {
     options.type = options.type || 'Primary';
     if (options.type === 'Primary' && item.SeriesPrimaryImageTag) {
         options.tag = item.SeriesPrimaryImageTag;
-        return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+        return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
     }
 
     if (options.type === 'Thumb') {
         if (item.SeriesThumbImageTag) {
             options.tag = item.SeriesThumbImageTag;
-            return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+            return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
         }
 
         if (item.ParentThumbImageTag) {
             options.tag = item.ParentThumbImageTag;
-            return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
+            return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
         }
     }
 
@@ -119,12 +120,12 @@ function imageUrl(item, options) {
 
     if (item.ImageTags && item.ImageTags[options.type]) {
         options.tag = item.ImageTags[options.type];
-        return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
+        return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
     }
 
     if (item.AlbumId && item.AlbumPrimaryImageTag) {
         options.tag = item.AlbumPrimaryImageTag;
-        return ConnectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
+        return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
     }
 
     return null;
@@ -215,7 +216,7 @@ function updateNowPlayingInfo(context, state, serverId) {
             openAlbum: false,
             positionTo: contextButton
         };
-        const apiClient = ConnectionManager.getApiClient(item.ServerId);
+        const apiClient = ServerConnections.getApiClient(item.ServerId);
         apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
             apiClient.getCurrentUser().then(function (user) {
                 contextButton.addEventListener('click', function () {

src/components/search/searchresults.js

@@ -1,11 +1,11 @@
 import layoutManager from '../layoutManager';
 import globalize from '../../scripts/globalize';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import cardBuilder from '../cardbuilder/cardBuilder';
 import { appRouter } from '../appRouter';
 import '../../elements/emby-scroller/emby-scroller';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 import '../../elements/emby-button/emby-button';
+import ServerConnections from '../ServerConnections';
 
 /* eslint-disable indent */
 
@@ -606,7 +606,7 @@ class SearchResults {
         embed(options.element, this, options);
     }
     search(value) {
-        const apiClient = ConnectionManager.getApiClient(this.options.serverId);
+        const apiClient = ServerConnections.getApiClient(this.options.serverId);
 
         search(this, apiClient, this.options.element, value);
     }

src/components/shortcuts.js

@@ -7,11 +7,11 @@
 
 import { playbackManager } from './playback/playbackmanager';
 import inputManager from '../scripts/inputManager';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import { appRouter } from './appRouter';
 import globalize from '../scripts/globalize';
 import dom from '../scripts/dom';
 import recordingHelper from './recordingcreator/recordinghelper';
+import ServerConnections from './ServerConnections';
 
     function playAllFromHere(card, serverId, queue) {
         const parent = card.parentNode;
@@ -82,7 +82,7 @@ import recordingHelper from './recordingcreator/recordinghelper';
         const id = button.getAttribute('data-id');
         const type = button.getAttribute('data-type');
 
-        const apiClient = ConnectionManager.getApiClient(serverId);
+        const apiClient = ServerConnections.getApiClient(serverId);
 
         if (type === 'Timer') {
             return apiClient.getLiveTvTimer(id);
@@ -112,7 +112,7 @@ import recordingHelper from './recordingcreator/recordinghelper';
             }
 
             import('./itemContextMenu').then((itemContextMenu) => {
-                ConnectionManager.getApiClient(item.ServerId).getCurrentUser().then(user => {
+                ServerConnections.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 = ConnectionManager.getApiClient(item.ServerId);
+        const apiClient = ServerConnections.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 = ConnectionManager.getApiClient(serverId);
+        const apiClient = ServerConnections.getApiClient(serverId);
 
         return new Promise((resolve, reject) => {
             const serverId = apiClient.serverInfo().Id;

src/components/slideshow/slideshow.js

@@ -4,7 +4,6 @@
  */
 import dialogHelper from '../dialogHelper/dialogHelper';
 import inputManager from '../../scripts/inputManager';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import layoutManager from '../layoutManager';
 import focusManager from '../focusManager';
 import browser from '../../scripts/browser';
@@ -13,6 +12,7 @@ import dom from '../../scripts/dom';
 import './style.css';
 import 'material-design-icons-iconfont';
 import '../../elements/emby-button/paper-icon-button-light';
+import ServerConnections from '../ServerConnections';
 
 /**
  * Name of transition event.
@@ -85,7 +85,7 @@ function getBackdropImageUrl(item, options, apiClient) {
  * @returns {string} URL of the item's image.
  */
 function getImgUrl(item, user) {
-    const apiClient = ConnectionManager.getApiClient(item.ServerId);
+    const apiClient = ServerConnections.getApiClient(item.ServerId);
     const imageOptions = {};
 
     if (item.BackdropImageTags && item.BackdropImageTags.length) {

src/components/subtitleeditor/subtitleeditor.js

@@ -3,7 +3,6 @@ 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 loading from '../loading/loading';
 import focusManager from '../focusManager';
 import dom from '../../scripts/dom';
@@ -15,6 +14,7 @@ import 'material-design-icons-iconfont';
 import './subtitleeditor.css';
 import '../../elements/emby-button/emby-button';
 import '../../assets/css/flexstyles.css';
+import ServerConnections from '../ServerConnections';
 
 let currentItem;
 let hasChanges;
@@ -22,7 +22,7 @@ let hasChanges;
 function downloadRemoteSubtitles(context, id) {
     const url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
 
-    const apiClient = ConnectionManager.getApiClient(currentItem.ServerId);
+    const apiClient = ServerConnections.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 = ConnectionManager.getApiClient(currentItem.ServerId);
+            const apiClient = ServerConnections.getApiClient(currentItem.ServerId);
 
             apiClient.ajax({
 
@@ -244,7 +244,7 @@ function searchForSubtitles(context, language) {
 
     loading.show();
 
-    const apiClient = ConnectionManager.getApiClient(currentItem.ServerId);
+    const apiClient = ServerConnections.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 = ConnectionManager.getApiClient(serverId);
+    const apiClient = ServerConnections.getApiClient(serverId);
     return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
         const dialogOptions = {
             removeOnClose: true,

src/components/subtitlesettings/subtitlesettings.js

@@ -7,7 +7,7 @@ import loading from '../loading/loading';
 import subtitleAppearanceHelper from './subtitleappearancehelper';
 import settingsHelper from '../settingshelper';
 import dom from '../../scripts/dom';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import '../listview/listview.css';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-slider/emby-slider';
@@ -15,6 +15,7 @@ import '../../elements/emby-input/emby-input';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../assets/css/flexstyles.css';
 import './subtitlesettings.css';
+import ServerConnections from '../ServerConnections';
 
 /**
  * Subtitle settings.
@@ -231,7 +232,7 @@ export class SubtitleSettings {
         loading.show();
 
         const userId = self.options.userId;
-        const apiClient = ConnectionManager.getApiClient(self.options.serverId);
+        const apiClient = ServerConnections.getApiClient(self.options.serverId);
         const userSettings = self.options.userSettings;
 
         apiClient.getUser(userId).then(function (user) {
@@ -255,7 +256,7 @@ export class SubtitleSettings {
 
     onSubmit(e) {
         const self = this;
-        const apiClient = ConnectionManager.getApiClient(self.options.serverId);
+        const apiClient = ServerConnections.getApiClient(self.options.serverId);
         const userId = self.options.userId;
         const userSettings = self.options.userSettings;
 

src/components/syncPlay/groupSelectionMenu.js

@@ -1,4 +1,4 @@
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import { playbackManager } from '../playback/playbackmanager';
 import syncPlayManager from './syncPlayManager';
 import loading from '../loading/loading';
@@ -6,6 +6,7 @@ import toast from '../toast/toast';
 import actionsheet from '../actionSheet/actionSheet';
 import globalize from '../../scripts/globalize';
 import playbackPermissionManager from './playbackPermissionManager';
+import ServerConnections from '../ServerConnections';
 
 /**
  * Gets active player id.
@@ -171,8 +172,8 @@ export default function show (button) {
         });
     });
 
-    const apiClient = window.ConnectionManager.currentApiClient();
+    const apiClient = ServerConnections.currentApiClient();
-    ConnectionManager.user(apiClient).then((user) => {
+    ServerConnections.user(apiClient).then((user) => {
         if (syncPlayEnabled) {
             showLeaveGroupSelection(button, user, apiClient);
         } else {

src/components/syncPlay/syncPlayManager.js

@@ -3,11 +3,12 @@
  * @module components/syncPlay/syncPlayManager
  */
 
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import { playbackManager } from '../playback/playbackmanager';
 import timeSyncManager from './timeSyncManager';
 import toast from '../toast/toast';
 import globalize from '../../scripts//globalize';
+import ServerConnections from '../ServerConnections';
 
 /**
  * Waits for an event to be triggered on an object. An optional timeout can specified after which the promise is rejected.
@@ -127,7 +128,7 @@ class SyncPlayManager {
 
             // Report ping
             if (this.syncEnabled) {
-                const apiClient = window.ConnectionManager.currentApiClient();
+                const apiClient = ServerConnections.currentApiClient();
                 const sessionId = getActivePlayerId();
 
                 if (!sessionId) {
@@ -659,7 +660,7 @@ class SyncPlayManager {
      * Overrides PlaybackManager's unpause method.
      */
     playRequest (player) {
-        const apiClient = ConnectionManager.currentApiClient();
+        const apiClient = ServerConnections.currentApiClient();
         apiClient.requestSyncPlayStart();
     }
 
@@ -667,7 +668,7 @@ class SyncPlayManager {
      * Overrides PlaybackManager's pause method.
      */
     pauseRequest (player) {
-        const apiClient = ConnectionManager.currentApiClient();
+        const apiClient = ServerConnections.currentApiClient();
         apiClient.requestSyncPlayPause();
         // Pause locally as well, to give the user some little control
         playbackManager._localUnpause(player);
@@ -677,7 +678,7 @@ class SyncPlayManager {
      * Overrides PlaybackManager's seek method.
      */
     seekRequest (PositionTicks, player) {
-        const apiClient = ConnectionManager.currentApiClient();
+        const apiClient = ServerConnections.currentApiClient();
         apiClient.requestSyncPlaySeek({
             PositionTicks: PositionTicks
         });

src/components/syncPlay/timeSyncManager.js

@@ -3,7 +3,8 @@
  * @module components/syncPlay/timeSyncManager
  */
 
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
+import ServerConnections from '../ServerConnections';
 
 /**
  * Time estimation
@@ -113,7 +114,7 @@ class TimeSyncManager {
         if (!this.poller) {
             this.poller = setTimeout(() => {
                 this.poller = null;
-                const apiClient = window.ConnectionManager.currentApiClient();
+                const apiClient = ServerConnections.currentApiClient();
                 const requestSent = new Date();
                 apiClient.getServerTime().then((response) => {
                     const responseReceived = new Date();

src/components/themeMediaPlayer.js

@@ -1,6 +1,7 @@
 import { playbackManager } from './playback/playbackmanager';
 import * as userSettings from '../scripts/settings/userSettings';
-import { ConnectionManager } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
+import ServerConnections from './ServerConnections';
 
 let currentOwnerId;
 let currentThemeIds = [];
@@ -62,7 +63,7 @@ function loadThemeMedia(item) {
         return;
     }
 
-    const apiClient = ConnectionManager.getApiClient(item.ServerId);
+    const apiClient = ServerConnections.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;
 

src/components/tunerPicker.js

@@ -1,7 +1,6 @@
 import dialogHelper from './dialogHelper/dialogHelper';
 import dom from '../scripts/dom';
 import layoutManager from './layoutManager';
-import { ConnectionManager } from 'jellyfin-apiclient';
 import globalize from '../scripts/globalize';
 import loading from './loading/loading';
 import browser from '../scripts/browser';
@@ -12,6 +11,7 @@ import './formdialog.css';
 import '../elements/emby-button/emby-button';
 import '../elements/emby-itemscontainer/emby-itemscontainer';
 import './cardbuilder/card.css';
+import ServerConnections from './ServerConnections';
 
 const enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -163,7 +163,7 @@ function tunerPicker() {
             scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
         }
 
-        const apiClient = ConnectionManager.getApiClient(options.serverId);
+        const apiClient = ServerConnections.getApiClient(options.serverId);
         discoverDevices(dlg, apiClient);
 
         if (layoutManager.tv) {

src/components/userdatabuttons/userdatabuttons.js

@@ -1,4 +1,3 @@
-import { ConnectionManager } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 import dom from '../../scripts/dom';
 import itemHelper from '../itemHelper';
@@ -6,6 +5,7 @@ import '../../elements/emby-button/paper-icon-button-light';
 import 'material-design-icons-iconfont';
 import '../../elements/emby-button/emby-button';
 import './userdatabuttons.css';
+import ServerConnections from '../ServerConnections';
 
 const userDataMethods = {
     markPlayed: markPlayed,
@@ -188,12 +188,12 @@ function markPlayed(link) {
 }
 
 function likes(id, serverId, isLiked) {
-    const apiClient = ConnectionManager.getApiClient(serverId);
+    const apiClient = ServerConnections.getApiClient(serverId);
     return apiClient.updateUserItemRating(apiClient.getCurrentUserId(), id, isLiked);
 }
 
 function played(id, serverId, isPlayed) {
-    const apiClient = ConnectionManager.getApiClient(serverId);
+    const apiClient = ServerConnections.getApiClient(serverId);
 
     const method = isPlayed ? 'markPlayed' : 'markUnplayed';
 
@@ -201,13 +201,13 @@ function played(id, serverId, isPlayed) {
 }
 
 function favorite(id, serverId, isFavorite) {
-    const apiClient = ConnectionManager.getApiClient(serverId);
+    const apiClient = ServerConnections.getApiClient(serverId);
 
     return apiClient.updateFavoriteStatus(apiClient.getCurrentUserId(), id, isFavorite);
 }
 
 function clearLike(id, serverId) {
-    const apiClient = ConnectionManager.getApiClient(serverId);
+    const apiClient = ServerConnections.getApiClient(serverId);
 
     return apiClient.clearUserItemRating(apiClient.getCurrentUserId(), id);
 }

src/controllers/dashboard/dashboard.js

@@ -1,5 +1,5 @@
 import datetime from '../../scripts/datetime';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import itemHelper from '../../components/itemHelper';
 import serverNotifications from '../../scripts/serverNotifications';
 import dom from '../../scripts/dom';
@@ -19,6 +19,7 @@ import '../../assets/css/flexstyles.css';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 import taskButton from '../../scripts/taskbutton';
 import Dashboard from '../../scripts/clientUtils';
+import ServerConnections from '../../components/ServerConnections';
 
 /* eslint-disable indent */
 
@@ -61,7 +62,7 @@ import Dashboard from '../../scripts/clientUtils';
                 confirmText: globalize.translate('ButtonSend')
             }).then(function (text) {
                 if (text) {
-                    ConnectionManager.getApiClient(session.ServerId).sendMessageCommand(session.Id, {
+                    ServerConnections.getApiClient(session.ServerId).sendMessageCommand(session.Id, {
                         Text: text,
                         TimeoutMs: 5e3
                     });
@@ -74,7 +75,7 @@ import Dashboard from '../../scripts/clientUtils';
         import('../../components/actionSheet/actionSheet').then(({default: actionsheet}) => {
             const menuItems = [];
 
-            if (session.ServerId && session.DeviceId !== ConnectionManager.deviceId()) {
+            if (session.ServerId && session.DeviceId !== ServerConnections.deviceId()) {
                 menuItems.push({
                     name: globalize.translate('SendMessage'),
                     id: 'sendmessage'
@@ -124,9 +125,9 @@ import Dashboard from '../../scripts/clientUtils';
                     } else if (btn.classList.contains('btnSessionSendMessage')) {
                         showSendMessageForm(btn, session);
                     } else if (btn.classList.contains('btnSessionStop')) {
-                        ConnectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'Stop');
+                        ServerConnections.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'Stop');
                     } else if (btn.classList.contains('btnSessionPlayPause') && session.PlayState) {
-                        ConnectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'PlayPause');
+                        ServerConnections.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'PlayPause');
                     }
                 }
             }
@@ -314,7 +315,7 @@ import Dashboard from '../../scripts/clientUtils';
                 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 !== ConnectionManager.deviceId() ? '' : ' hide';
+                btnCssClass = session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1 && session.DeviceId !== ServerConnections.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>';
 

src/controllers/favorites.js

@@ -2,12 +2,12 @@ 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 layoutManager from '../components/layoutManager';
 import focusManager from '../components/focusManager';
 import '../elements/emby-itemscontainer/emby-itemscontainer';
 import '../elements/emby-scroller/emby-scroller';
+import ServerConnections from '../components/ServerConnections';
 
 /* eslint-disable indent */
 
@@ -270,7 +270,7 @@ class FavoritesTab {
     constructor(view, params) {
         this.view = view;
         this.params = params;
-        this.apiClient = window.ConnectionManager.currentApiClient();
+        this.apiClient = ServerConnections.currentApiClient();
         this.sectionsContainer = view.querySelector('.sections');
         createSections(this, this.sectionsContainer, this.apiClient);
     }

src/controllers/hometab.js

@@ -3,12 +3,13 @@ import loading from '../components/loading/loading';
 import focusManager from '../components/focusManager';
 import homeSections from '../components/homesections/homesections';
 import '../elements/emby-itemscontainer/emby-itemscontainer';
+import ServerConnections from '../components/ServerConnections';
 
 class HomeTab {
     constructor(view, params) {
         this.view = view;
         this.params = params;
-        this.apiClient = window.ConnectionManager.currentApiClient();
+        this.apiClient = ServerConnections.currentApiClient();
         this.sectionsContainer = view.querySelector('.sections');
         view.querySelector('.sections').addEventListener('settingschange', onHomeScreenSettingsChanged.bind(this));
     }

src/controllers/itemDetails/index.js

@@ -2,7 +2,7 @@ import { appHost } from '../../components/apphost';
 import loading from '../../components/loading/loading';
 import { appRouter } from '../../components/appRouter';
 import layoutManager from '../../components/layoutManager';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import * as userSettings from '../../scripts/settings/userSettings';
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import datetime from '../../scripts/datetime';
@@ -28,6 +28,7 @@ import '../../elements/emby-scroller/emby-scroller';
 import '../../elements/emby-select/emby-select';
 import itemShortcuts from '../../components/shortcuts';
 import Dashboard from '../../scripts/clientUtils';
+import ServerConnections from '../../components/ServerConnections';
 
 function getPromise(apiClient, params) {
     const id = params.id;
@@ -564,7 +565,7 @@ function renderDetailPageBackdrop(page, item, apiClient) {
 }
 
 function reloadFromItem(instance, page, params, item, user) {
-    const apiClient = ConnectionManager.getApiClient(item.ServerId);
+    const apiClient = ServerConnections.getApiClient(item.ServerId);
 
     Emby.Page.setTitle('');
 
@@ -806,7 +807,7 @@ function renderNextUp(page, item, user) {
         return void section.classList.add('hide');
     }
 
-    ConnectionManager.getApiClient(item.ServerId).getNextUpEpisodes({
+    ServerConnections.getApiClient(item.ServerId).getNextUpEpisodes({
         SeriesId: item.Id,
         UserId: user.Id
     }).then(function (result) {
@@ -1210,7 +1211,7 @@ function renderSimilarItems(page, item, context) {
         }
 
         similarCollapsible.classList.remove('hide');
-        const apiClient = ConnectionManager.getApiClient(item.ServerId);
+        const apiClient = ServerConnections.getApiClient(item.ServerId);
         const options = {
             userId: apiClient.getCurrentUserId(),
             limit: 12,
@@ -1324,7 +1325,7 @@ function renderChildren(page, item) {
     }
 
     let promise;
-    const apiClient = ConnectionManager.getApiClient(item.ServerId);
+    const apiClient = ServerConnections.getApiClient(item.ServerId);
     const userId = apiClient.getCurrentUserId();
 
     if (item.Type == 'Series') {
@@ -1572,7 +1573,7 @@ function renderChannelGuide(page, apiClient, item) {
 }
 
 function renderSeriesSchedule(page, item) {
-    const apiClient = ConnectionManager.getApiClient(item.ServerId);
+    const apiClient = ServerConnections.getApiClient(item.ServerId);
     apiClient.getLiveTvPrograms({
         UserId: apiClient.getCurrentUserId(),
         HasAired: false,
@@ -1732,7 +1733,7 @@ function renderCollectionItemType(page, parentItem, type, items) {
 }
 
 function renderMusicVideos(page, item, user) {
-    ConnectionManager.getApiClient(item.ServerId).getItems(user.Id, {
+    ServerConnections.getApiClient(item.ServerId).getItems(user.Id, {
         SortBy: 'SortName',
         SortOrder: 'Ascending',
         IncludeItemTypes: 'MusicVideo',
@@ -1752,7 +1753,7 @@ function renderMusicVideos(page, item, user) {
 }
 
 function renderAdditionalParts(page, item, user) {
-    ConnectionManager.getApiClient(item.ServerId).getAdditionalVideoParts(user.Id, item.Id).then(function (result) {
+    ServerConnections.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');
@@ -1797,7 +1798,7 @@ function getVideosHtml(items) {
 }
 
 function renderSpecials(page, item, user) {
-    ConnectionManager.getApiClient(item.ServerId).getSpecialFeatures(user.Id, item.Id).then(function (specials) {
+    ServerConnections.getApiClient(item.ServerId).getSpecialFeatures(user.Id, item.Id).then(function (specials) {
         const specialsContent = page.querySelector('#specialsContent');
         specialsContent.innerHTML = getVideosHtml(specials);
         imageLoader.lazyChildren(specialsContent);
@@ -1853,7 +1854,7 @@ export default function (view, params) {
     function reload(instance, page, params) {
         loading.show();
 
-        const apiClient = params.serverId ? ConnectionManager.getApiClient(params.serverId) : ApiClient;
+        const apiClient = params.serverId ? ServerConnections.getApiClient(params.serverId) : ApiClient;
 
         Promise.all([getPromise(apiClient, params), apiClient.getCurrentUser()]).then(([item, user]) => {
             currentItem = item;
@@ -1902,7 +1903,7 @@ export default function (view, params) {
         const item = currentItem;
 
         if (item.Type === 'Program') {
-            const apiClient = ConnectionManager.getApiClient(item.ServerId);
+            const apiClient = ServerConnections.getApiClient(item.ServerId);
             return void apiClient.getLiveTvChannel(item.ChannelId, apiClient.getCurrentUserId()).then(function (channel) {
                 playbackManager.play({
                     items: [channel]
@@ -1939,7 +1940,7 @@ export default function (view, params) {
 
     function onCancelTimerClick() {
         import('../../components/recordingcreator/recordinghelper').then(({ default: recordingHelper }) => {
-            recordingHelper.cancelTimer(ConnectionManager.getApiClient(currentItem.ServerId), currentItem.TimerId).then(function () {
+            recordingHelper.cancelTimer(ServerConnections.getApiClient(currentItem.ServerId), currentItem.TimerId).then(function () {
                 reload(self, view, params);
             });
         });
@@ -2003,7 +2004,7 @@ export default function (view, params) {
 
     let currentItem;
     const self = this;
-    const apiClient = params.serverId ? ConnectionManager.getApiClient(params.serverId) : ApiClient;
+    const apiClient = params.serverId ? ServerConnections.getApiClient(params.serverId) : ApiClient;
 
     const btnResume = view.querySelector('.mainDetailButtons .btnResume');
     const btnPlay = view.querySelector('.mainDetailButtons .btnPlay');

src/controllers/list.js

@@ -5,18 +5,18 @@ 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 AlphaNumericShortcuts from '../scripts/alphanumericshortcuts';
 import { playbackManager } from '../components/playback/playbackmanager';
 import AlphaPicker from '../components/alphaPicker/alphaPicker';
 import '../elements/emby-itemscontainer/emby-itemscontainer';
 import '../elements/emby-scroller/emby-scroller';
+import ServerConnections from '../components/ServerConnections';
 
 /* eslint-disable indent */
 
     function getInitialLiveTvQuery(instance, params) {
         const query = {
-            UserId: ConnectionManager.getApiClient(params.serverId).getCurrentUserId(),
+            UserId: ServerConnections.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 = ConnectionManager.getApiClient(params.serverId);
+        const apiClient = ServerConnections.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 = ConnectionManager.getApiClient(params.serverId);
+        const apiClient = ServerConnections.getApiClient(params.serverId);
         const itemId = params.genreId || params.musicGenreId || params.studioId || params.personId || params.parentId;
 
         if (itemId) {

src/controllers/playback/video/index.js

@@ -6,7 +6,7 @@ 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 { Events } from 'jellyfin-apiclient';
 import browser from '../../../scripts/browser';
 import globalize from '../../../scripts/globalize';
 import { appHost } from '../../../components/apphost';
@@ -17,6 +17,7 @@ import '../../../assets/css/scrollstyles.css';
 import '../../../elements/emby-slider/emby-slider';
 import '../../../elements/emby-button/paper-icon-button-light';
 import '../../../assets/css/videoosd.css';
+import ServerConnections from '../../../components/ServerConnections';
 
 /* eslint-disable indent */
 
@@ -73,7 +74,7 @@ import '../../../assets/css/videoosd.css';
 
         function getDisplayItem(item) {
             if (item.Type === 'TvChannel') {
-                const apiClient = ConnectionManager.getApiClient(item.ServerId);
+                const apiClient = ServerConnections.getApiClient(item.ServerId);
                 return apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (refreshedItem) {
                     return {
                         originalItem: refreshedItem,
@@ -97,7 +98,7 @@ import '../../../assets/css/videoosd.css';
                 return void view.querySelector('.btnRecord').classList.add('hide');
             }
 
-            ConnectionManager.getApiClient(item.ServerId).getCurrentUser().then(function (user) {
+            ServerConnections.getApiClient(item.ServerId).getCurrentUser().then(function (user) {
                 if (user.Policy.EnableLiveTvManagement) {
                     import('../../../components/recordingcreator/recordingbutton').then((RecordingButton) => {
                         if (recordingButtonManager) {
@@ -1515,7 +1516,7 @@ import '../../../assets/css/videoosd.css';
             const item = currentItem;
 
             if (item && item.Chapters && item.Chapters.length && item.Chapters[0].ImageTag) {
-                const html = getChapterBubbleHtml(ConnectionManager.getApiClient(item.ServerId), item, item.Chapters, ticks);
+                const html = getChapterBubbleHtml(ServerConnections.getApiClient(item.ServerId), item, item.Chapters, ticks);
 
                 if (html) {
                     return html;

src/controllers/session/addServer/index.js

@@ -3,6 +3,7 @@ import loading from '../../../components/loading/loading';
 import globalize from '../../../scripts/globalize';
 import '../../../elements/emby-button/emby-button';
 import Dashboard from '../../../scripts/clientUtils';
+import ServerConnections from '../../../components/ServerConnections';
 
 /* eslint-disable indent */
 
@@ -37,7 +38,7 @@ import Dashboard from '../../../scripts/clientUtils';
     function submitServer(page) {
         loading.show();
         const host = page.querySelector('#txtServerHost').value;
-        window.connectionManager.connectToAddress(host, {
+        ServerConnections.connectToAddress(host, {
             enableAutoLogin: appSettings.enableAutoLogin()
         }).then(function(result) {
             handleConnectionResult(page, result);

src/controllers/session/login/index.js

@@ -9,6 +9,7 @@ import globalize from '../../../scripts/globalize';
 import '../../../components/cardbuilder/card.css';
 import '../../../elements/emby-checkbox/emby-checkbox';
 import Dashboard from '../../../scripts/clientUtils';
+import ServerConnections from '../../../components/ServerConnections';
 
 /* eslint-disable indent */
 
@@ -192,7 +193,7 @@ import Dashboard from '../../../scripts/clientUtils';
             const serverId = params.serverid;
 
             if (serverId) {
-                return ConnectionManager.getOrCreateApiClient(serverId);
+                return ServerConnections.getOrCreateApiClient(serverId);
             }
 
             return ApiClient;

src/controllers/session/selectServer/index.js

@@ -4,7 +4,6 @@ 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 globalize from '../../../scripts/globalize';
 import actionSheet from '../../../components/actionSheet/actionSheet';
 import dom from '../../../scripts/dom';
@@ -16,6 +15,7 @@ import '../../../elements/emby-itemscontainer/emby-itemscontainer';
 import '../../../components/cardbuilder/card.css';
 import '../../../elements/emby-button/emby-button';
 import Dashboard from '../../../scripts/clientUtils';
+import ServerConnections from '../../../components/ServerConnections';
 
 /* eslint-disable indent */
 
@@ -114,7 +114,7 @@ import Dashboard from '../../../scripts/clientUtils';
     export default function (view, params) {
         function connectToServer(server) {
             loading.show();
-            ConnectionManager.connectToServer(server, {
+            ServerConnections.connectToServer(server, {
                 enableAutoLogin: appSettings.enableAutoLogin()
             }).then(function (result) {
                 loading.hide();
@@ -146,7 +146,7 @@ import Dashboard from '../../../scripts/clientUtils';
 
         function deleteServer(server) {
             loading.show();
-            ConnectionManager.deleteServer(server.Id).then(function () {
+            ServerConnections.deleteServer(server.Id).then(function () {
                 loading.hide();
                 loadServers();
             });
@@ -188,7 +188,7 @@ import Dashboard from '../../../scripts/clientUtils';
 
         function loadServers() {
             loading.show();
-            ConnectionManager.getAvailableServers().then(onServersRetrieved);
+            ServerConnections.getAvailableServers().then(onServersRetrieved);
         }
 
         let servers;

src/elements/emby-itemscontainer/emby-itemscontainer.js

@@ -9,8 +9,9 @@ import dom from '../../scripts/dom';
 import loading from '../../components/loading/loading';
 import focusManager from '../../components/focusManager';
 import serverNotifications from '../../scripts/serverNotifications';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import 'webcomponents.js/webcomponents-lite';
+import ServerConnections from '../../components/ServerConnections';
 
 /* eslint-disable indent */
 
@@ -103,7 +104,7 @@ import 'webcomponents.js/webcomponents-lite';
         }
 
         const serverId = el.getAttribute('data-serverid');
-        const apiClient = ConnectionManager.getApiClient(serverId);
+        const apiClient = ServerConnections.getApiClient(serverId);
 
         loading.show();
 

src/elements/emby-playstatebutton/emby-playstatebutton.js

@@ -1,7 +1,8 @@
 import serverNotifications from '../../scripts/serverNotifications';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 import EmbyButtonPrototype from '../../elements/emby-button/emby-button';
+import ServerConnections from '../../components/ServerConnections';
 
 /* eslint-disable indent */
 
@@ -23,7 +24,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 = ConnectionManager.getApiClient(serverId);
+        const apiClient = ServerConnections.getApiClient(serverId);
 
         if (!button.classList.contains('playstatebutton-played')) {
             apiClient.markPlayed(apiClient.getCurrentUserId(), id, new Date());

src/elements/emby-ratingbutton/emby-ratingbutton.js

@@ -1,7 +1,8 @@
 import serverNotifications from '../../scripts/serverNotifications';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
 import EmbyButtonPrototype from '../emby-button/emby-button';
+import ServerConnections from '../../components/ServerConnections';
 
 /* eslint-disable indent */
 
@@ -27,7 +28,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 = ConnectionManager.getApiClient(serverId);
+        const apiClient = ServerConnections.getApiClient(serverId);
 
         let likes = this.getAttribute('data-likes');
         const isFavorite = this.getAttribute('data-isfavorite') === 'true';

src/libraries/screensavermanager.js

@@ -1,8 +1,9 @@
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import { playbackManager } from '../components/playback/playbackmanager';
 import { pluginManager } from '../components/pluginManager';
 import inputManager from '../scripts/inputManager';
 import * as userSettings from '../scripts/settings/userSettings';
+import ServerConnections from '../components/ServerConnections';
 
 function getMinIdleTime() {
     // Returns the minimum amount of idle time required before the screen saver can be displayed
@@ -84,7 +85,7 @@ function ScreenSaverManager() {
 
     this.show = function () {
         let isLoggedIn;
-        const apiClient = window.ConnectionManager.currentApiClient();
+        const apiClient = ServerConnections.currentApiClient();
 
         if (apiClient && apiClient.isLoggedIn()) {
             isLoggedIn = true;

src/plugins/backdropScreensaver/plugin.js

@@ -1,5 +1,5 @@
 /* eslint-disable indent */
-import { ConnectionManager } from 'jellyfin-apiclient';
+import ServerConnections from '../../components/ServerConnections';
 
 class BackdropScreensaver {
     constructor() {
@@ -21,7 +21,7 @@ class BackdropScreensaver {
                 Limit: 200
             };
 
-            const apiClient = window.ConnectionManager.currentApiClient();
+            const apiClient = ServerConnections.currentApiClient();
             apiClient.getItems(apiClient.getCurrentUserId(), query).then((result) => {
                 if (result.Items.length) {
                     import('../../components/slideshow/slideshow').then(({default: Slideshow}) => {

src/plugins/bookPlayer/plugin.js

@@ -2,11 +2,11 @@ import loading from '../../components/loading/loading';
 import keyboardnavigation from '../../scripts/keyboardNavigation';
 import dialogHelper from '../../components/dialogHelper/dialogHelper';
 import dom from '../../scripts/dom';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import './style.css';
 import 'material-design-icons-iconfont';
 import '../../elements/emby-button/paper-icon-button-light';
-
+import ServerConnections from '../../components/ServerConnections';
 import TableOfContents from './tableOfContents';
 
 export class BookPlayer {
@@ -259,7 +259,7 @@ export class BookPlayer {
         };
 
         const serverId = item.ServerId;
-        const apiClient = ConnectionManager.getApiClient(serverId);
+        const apiClient = ServerConnections.getApiClient(serverId);
 
         return new Promise((resolve, reject) => {
             import('epubjs').then(({default: epubjs}) => {

src/plugins/chromecastPlayer/chromecastHelper.js

@@ -1,4 +1,5 @@
-import { Events, ConnectionManager } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
+import ServerConnections from '../../components/ServerConnections';
 
 // LinkParser
 //
@@ -221,8 +222,8 @@ function getCachedValue(key) {
     return null;
 }
 
-Events.on(ConnectionManager, 'localusersignedin', clearCache);
+Events.on(ServerConnections, 'localusersignedin', clearCache);
-Events.on(ConnectionManager, 'localusersignedout', clearCache);
+Events.on(ServerConnections, 'localusersignedout', clearCache);
 
 export default {
     getServerAddress: getServerAddress

src/plugins/chromecastPlayer/plugin.js

@@ -2,8 +2,9 @@ import appSettings from '../../scripts/settings/appSettings';
 import * as userSettings from '../../scripts/settings/userSettings';
 import { playbackManager } from '../../components/playback/playbackmanager';
 import globalize from '../../scripts/globalize';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import castSenderApiLoader from '../../components/castSenderApi';
+import ServerConnections from '../../components/ServerConnections';
 
 // Based on https://github.com/googlecast/CastVideos-chrome/blob/master/CastVideos.js
 
@@ -324,11 +325,11 @@ class CastPlayer {
 
         let apiClient;
         if (message.options && message.options.ServerId) {
-            apiClient = ConnectionManager.getApiClient(message.options.ServerId);
+            apiClient = ServerConnections.getApiClient(message.options.ServerId);
         } else if (message.options && message.options.items && message.options.items.length) {
-            apiClient = ConnectionManager.getApiClient(message.options.items[0].ServerId);
+            apiClient = ServerConnections.getApiClient(message.options.items[0].ServerId);
         } else {
-            apiClient = window.ConnectionManager.currentApiClient();
+            apiClient = ServerConnections.currentApiClient();
         }
 
         message = Object.assign(message, {
@@ -672,7 +673,7 @@ class ChromecastPlayer {
 
     playWithCommand(options, command) {
         if (!options.items) {
-            const apiClient = ConnectionManager.getApiClient(options.serverId);
+            const apiClient = ServerConnections.getApiClient(options.serverId);
             const instance = this;
 
             return apiClient.getItem(apiClient.getCurrentUserId(), options.ids[0]).then(function (item) {
@@ -984,7 +985,7 @@ class ChromecastPlayer {
     }
 
     shuffle(item) {
-        const apiClient = ConnectionManager.getApiClient(item.ServerId);
+        const apiClient = ServerConnections.getApiClient(item.ServerId);
         const userId = apiClient.getCurrentUserId();
 
         const instance = this;
@@ -997,7 +998,7 @@ class ChromecastPlayer {
     }
 
     instantMix(item) {
-        const apiClient = ConnectionManager.getApiClient(item.ServerId);
+        const apiClient = ServerConnections.getApiClient(item.ServerId);
         const userId = apiClient.getCurrentUserId();
 
         const instance = this;
@@ -1035,7 +1036,7 @@ class ChromecastPlayer {
             }
 
             const instance = this;
-            const apiClient = ConnectionManager.getApiClient(options.serverId);
+            const apiClient = ServerConnections.getApiClient(options.serverId);
 
             return getItemsForPlayback(apiClient, {
                 Ids: options.ids.join(',')

src/plugins/htmlVideoPlayer/plugin.js

@@ -1,5 +1,5 @@
 import browser from '../../scripts/browser';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import { appHost } from '../../components/apphost';
 import loading from '../../components/loading/loading';
 import dom from '../../scripts/dom';
@@ -26,6 +26,7 @@ import {
 import itemHelper from '../../components/itemHelper';
 import Screenfull from 'screenfull';
 import globalize from '../../scripts/globalize';
+import ServerConnections from '../../components/ServerConnections';
 
 /* eslint-disable indent */
 
@@ -323,7 +324,7 @@ function tryRemoveElement(elem) {
 
                 console.debug(`prefetching hls playlist: ${hlsPlaylistUrl}`);
 
-                return ConnectionManager.getApiClient(item.ServerId).ajax({
+                return ServerConnections.getApiClient(item.ServerId).ajax({
 
                     type: 'GET',
                     url: hlsPlaylistUrl
@@ -1031,7 +1032,7 @@ function tryRemoveElement(elem) {
          */
         renderSsaAss(videoElement, track, item) {
             const attachments = this._currentPlayOptions.mediaSource.MediaAttachments || [];
-            const apiClient = ConnectionManager.getApiClient(item);
+            const apiClient = ServerConnections.getApiClient(item);
             const htmlVideoPlayer = this;
             const options = {
                 video: videoElement,

src/plugins/photoPlayer/plugin.js

@@ -1,4 +1,4 @@
-import { ConnectionManager } from 'jellyfin-apiclient';
+import ServerConnections from '../../components/ServerConnections';
 
 export default class PhotoPlayer {
     constructor() {
@@ -13,7 +13,7 @@ export default class PhotoPlayer {
             import('../../components/slideshow/slideshow').then(({default: Slideshow}) => {
                 var index = options.startIndex || 0;
 
-                var apiClient = window.ConnectionManager.currentApiClient();
+                var apiClient = ServerConnections.currentApiClient();
                 apiClient.getCurrentUser().then(function(result) {
                     var newSlideShow = new Slideshow({
                         showTitle: false,

src/plugins/playAccessValidation/plugin.js

@@ -1,5 +1,5 @@
-import { ConnectionManager } from 'jellyfin-apiclient';
 import globalize from '../../scripts/globalize';
+import ServerConnections from '../../components/ServerConnections';
 
 function showErrorMessage() {
     return import('../../components/alert').then(({default: alert}) => {
@@ -25,7 +25,7 @@ class PlayAccessValidation {
             return Promise.resolve();
         }
 
-        return ConnectionManager.getApiClient(serverId).getCurrentUser().then(function (user) {
+        return ServerConnections.getApiClient(serverId).getCurrentUser().then(function (user) {
             if (user.Policy.EnableMediaPlayback) {
                 return Promise.resolve();
             }

src/plugins/sessionPlayer/plugin.js

@@ -1,6 +1,7 @@
 import { playbackManager } from '../../components/playback/playbackmanager';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import serverNotifications from '../../scripts/serverNotifications';
+import ServerConnections from '../../components/ServerConnections';
 
 function getActivePlayerId() {
     const info = playbackManager.getPlayerInfo();
@@ -53,10 +54,10 @@ function getCurrentApiClient(instance) {
     const currentServerId = instance.currentServerId;
 
     if (currentServerId) {
-        return ConnectionManager.getApiClient(currentServerId);
+        return ServerConnections.getApiClient(currentServerId);
     }
 
-    return window.ConnectionManager.currentApiClient();
+    return ServerConnections.currentApiClient();
 }
 
 function sendCommandByName(instance, name, options) {

src/scripts/autoThemes.js

@@ -1,13 +1,14 @@
 import * as userSettings from './settings/userSettings';
 import * as webSettings from './settings/webSettings';
 import skinManager from './themeManager';
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
+import ServerConnections from '../components/ServerConnections';
 
 // set the default theme when loading
 skinManager.setTheme(userSettings.theme());
 
 // set the saved theme once a user authenticates
-Events.on(ConnectionManager, 'localusersignedin', function (e, user) {
+Events.on(ServerConnections, 'localusersignedin', function (e, user) {
     skinManager.setTheme(userSettings.theme());
 });
 

src/scripts/clientUtils.js

@@ -1,4 +1,5 @@
 import AppInfo from '../components/AppInfo';
+import ServerConnections from '../components/ServerConnections';
 
 export function getCurrentUser() {
     return window.ApiClient.getCurrentUser(false);
@@ -44,12 +45,11 @@ export function getCurrentUserId() {
 }
 
 export function onServerChanged(userId, accessToken, apiClient) {
-    apiClient = apiClient || window.ApiClient;
+    ServerConnections.setLocalApiClient(apiClient);
-    window.ApiClient = apiClient;
 }
 
 export function logout() {
-    window.connectionManager.logout().then(function () {
+    ServerConnections.logout().then(function () {
         let loginPage;
 
         if (AppInfo.isNativeApp) {

src/scripts/deleteHelper.js

@@ -1,8 +1,8 @@
 
-import { ConnectionManager } from 'jellyfin-apiclient';
 import confirm from '../components/confirm/confirm';
 import { appRouter } from '../components/appRouter';
 import globalize from './globalize';
+import ServerConnections from '../components/ServerConnections';
 
 function alertText(options) {
     return new Promise(function (resolve, reject) {
@@ -16,7 +16,7 @@ export function deleteItem(options) {
     const item = options.item;
     const parentId = item.SeasonId || item.SeriesId || item.ParentId;
 
-    const apiClient = ConnectionManager.getApiClient(item.ServerId);
+    const apiClient = ServerConnections.getApiClient(item.ServerId);
 
     return confirm({
 

src/scripts/itembynamedetailpage.js

@@ -1,10 +1,10 @@
-import { ConnectionManager } from 'jellyfin-apiclient';
 import listView from '../components/listview/listview';
 import cardBuilder from '../components/cardbuilder/cardBuilder';
 import imageLoader from '../components/images/imageLoader';
 import globalize from './globalize';
 import '../elements/emby-itemscontainer/emby-itemscontainer';
 import '../elements/emby-button/emby-button';
+import ServerConnections from '../components/ServerConnections';
 
 function renderItems(page, item) {
     const sections = [];
@@ -358,7 +358,7 @@ function getItemsFunction(options, item) {
             query.Fields += ',' + fields;
         }
 
-        const apiClient = ConnectionManager.getApiClient(item.ServerId);
+        const apiClient = ServerConnections.getApiClient(item.ServerId);
 
         if (query.IncludeItemTypes === 'MusicArtist') {
             query.IncludeItemTypes = null;

src/scripts/libraryMenu.js

@@ -16,6 +16,7 @@ import 'material-design-icons-iconfont';
 import '../assets/css/scrollstyles.css';
 import '../assets/css/flexstyles.css';
 import Dashboard from './clientUtils';
+import ServerConnections from '../components/ServerConnections';
 
 /* eslint-disable indent */
 
@@ -61,10 +62,10 @@ import Dashboard from './clientUtils';
 
     function getCurrentApiClient() {
         if (currentUser && currentUser.localUser) {
-            return window.ConnectionManager.getApiClient(currentUser.localUser.ServerId);
+            return ServerConnections.getApiClient(currentUser.localUser.ServerId);
         }
 
-        return window.ConnectionManager.currentApiClient();
+        return ServerConnections.currentApiClient();
     }
 
     function lazyLoadViewMenuBarImages() {
@@ -775,7 +776,7 @@ import Dashboard from './clientUtils';
         }
 
         if (requiresUserRefresh) {
-            window.ConnectionManager.user(getCurrentApiClient()).then(updateUserInHeader);
+            ServerConnections.user(getCurrentApiClient()).then(updateUserInHeader);
         }
     }
 
@@ -813,7 +814,7 @@ import Dashboard from './clientUtils';
         if (user) {
             Promise.resolve(user);
         } else {
-            window.ConnectionManager.user(getCurrentApiClient()).then(function (user) {
+            ServerConnections.user(getCurrentApiClient()).then(function (user) {
                 refreshLibraryInfoInDrawer(user);
                 updateLibraryMenu(user.localUser);
             });
@@ -979,8 +980,8 @@ import Dashboard from './clientUtils';
 
     renderHeader();
 
-    Events.on(window.ConnectionManager, 'localusersignedin', function (e, user) {
+    Events.on(ServerConnections, 'localusersignedin', function (e, user) {
-        const currentApiClient = window.ConnectionManager.getApiClient(user.ServerId);
+        const currentApiClient = ServerConnections.getApiClient(user.ServerId);
 
         currentDrawerType = null;
         currentUser = {
@@ -989,13 +990,13 @@ import Dashboard from './clientUtils';
 
         loadNavDrawer();
 
-        window.ConnectionManager.user(currentApiClient).then(function (user) {
+        ServerConnections.user(currentApiClient).then(function (user) {
             currentUser = user;
             updateUserInHeader(user);
         });
     });
 
-    Events.on(window.ConnectionManager, 'localusersignedout', function () {
+    Events.on(ServerConnections, 'localusersignedout', function () {
         currentUser = {};
         updateUserInHeader();
     });

src/scripts/serverNotifications.js

@@ -4,6 +4,7 @@ import { Events } from 'jellyfin-apiclient';
 import inputManager from '../scripts/inputManager';
 import focusManager from '../components/focusManager';
 import { appRouter } from '../components/appRouter';
+import ServerConnections from '../components/ServerConnections';
 
 const serverNotifications = {};
 
@@ -207,8 +208,8 @@ function bindEvents(apiClient) {
     Events.on(apiClient, 'message', onMessageReceived);
 }
 
-window.ConnectionManager.getApiClients().forEach(bindEvents);
+ServerConnections.getApiClients().forEach(bindEvents);
-Events.on(window.ConnectionManager, 'apiclientcreated', function (e, newApiClient) {
+Events.on(ServerConnections, 'apiclientcreated', function (e, newApiClient) {
     bindEvents(newApiClient);
 });
 

src/scripts/site.js

@@ -9,7 +9,8 @@ import 'resize-observer-polyfill';
 import 'jellyfin-noto';
 import '../assets/css/site.css';
 import AppInfo from '../components/AppInfo';
-import Dashboard from './clientUtils';
+import { Events } from 'jellyfin-apiclient';
+import ServerConnections from '../components/ServerConnections';
 
 // TODO: Move this elsewhere
 window.getWindowLocationSearch = function(win) {
@@ -69,88 +70,16 @@ if (self.appMode === 'cordova' || self.appMode === 'android' || self.appMode ===
 Object.freeze(AppInfo);
 
 function initClient() {
-    function bindConnectionManagerEvents(connectionManager, events, userSettings) {
-        window.Events = events;
-
-        window.connectionManager.currentApiClient = function () {
-            if (!localApiClient) {
-                const server = window.connectionManager.getLastUsedServer();
-
-                if (server) {
-                    localApiClient = window.connectionManager.getApiClient(server.Id);
-                }
-            }
-
-            return localApiClient;
-        };
-
-        window.connectionManager.onLocalUserSignedIn = function (user) {
-            localApiClient = window.connectionManager.getApiClient(user.ServerId);
-            window.ApiClient = localApiClient;
-            return userSettings.setUserInfo(user.Id, localApiClient);
-        };
-
-        events.on(connectionManager, 'localusersignedout', function () {
-            userSettings.setUserInfo(null, null);
-        });
-    }
-
-    function createConnectionManager() {
-        return Promise.all([
-            import('jellyfin-apiclient'),
-            import('../components/apphost'),
-            import('./settings/userSettings')
-        ])
-            .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);
-
-                    window.ConnectionManager = new ConnectionManager(credentialProviderInstance, appHost.appName(), appHost.appVersion(), appHost.deviceName(), appHost.deviceId(), capabilities);
-
-                    bindConnectionManagerEvents(window.ConnectionManager, Events, userSettings);
-
-                    if (!AppInfo.isNativeApp) {
-                        console.debug('loading ApiClient singleton');
-
-                        return Promise.all([
-                            import('jellyfin-apiclient')
-                        ])
-                            .then(([{ ApiClient }]) => {
-                                console.debug('creating ApiClient singleton');
-
-                                var apiClient = new ApiClient(Dashboard.serverAddress(), appHost.appName(), appHost.appVersion(), appHost.deviceName(), appHost.deviceId());
-
-                                apiClient.enableAutomaticNetworking = false;
-                                apiClient.manualAddressOnly = true;
-
-                                window.ConnectionManager.addApiClient(apiClient);
-
-                                window.ApiClient = apiClient;
-                                localApiClient = apiClient;
-
-                                console.debug('loaded ApiClient singleton');
-                            });
-                    }
-
-                    return Promise.resolve();
-                });
-            });
-    }
-
     function init() {
-        import('./clientUtils')
+        ServerConnections.initApiClient();
-            .then(function () {
+
-                createConnectionManager().then(function () {
         console.debug('initAfterDependencies promises resolved');
 
         Promise.all([
             import('./globalize'),
             import('./browser')
         ])
-                        .then(([globalize, {default: browser}]) => {
+            .then(([globalize, browser]) => {
                 window.Globalize = globalize;
                 loadCoreDictionary(globalize).then(function () {
                     onGlobalizeInit(browser, globalize);
@@ -168,11 +97,9 @@ function initClient() {
             import('./globalize'),
             import('jellyfin-apiclient')
         ])
-                        .then(([ globalize, { ConnectionManager, events } ]) => {
+            .then(([ globalize, { ConnectionManager } ]) => {
                 Events.on(ConnectionManager, 'localusersignedin', globalize.updateCurrentCulture);
             });
-                });
-            });
     }
 
     function loadCoreDictionary(globalize) {
@@ -326,7 +253,7 @@ function initClient() {
 
                         import('../components/playback/playerSelectionMenu');
 
-                        const apiClient = window.ConnectionManager && window.ConnectionManager.currentApiClient();
+                        const apiClient = ServerConnections.currentApiClient();
                         if (apiClient) {
                             fetch(apiClient.getUrl('Branding/Css'))
                                 .then(function(response) {
@@ -368,7 +295,7 @@ function initClient() {
         /* eslint-enable compat/compat */
     }
 
-    let localApiClient;
+    //var localApiClient;
 
     init();
 }

src/scripts/taskbutton.js

@@ -1,12 +1,13 @@
 
-import { ConnectionManager, Events } from 'jellyfin-apiclient';
+import { Events } from 'jellyfin-apiclient';
 import serverNotifications from '../scripts/serverNotifications';
 import globalize from '../scripts/globalize';
 import '../elements/emby-button/emby-button';
+import ServerConnections from '../components/ServerConnections';
 
 export default function (options) {
     function pollTasks() {
-        ConnectionManager.getApiClient(serverId).getScheduledTasks({
+        ServerConnections.getApiClient(serverId).getScheduledTasks({
             IsEnabled: true
         }).then(updateTasks);
     }
@@ -63,7 +64,7 @@ export default function (options) {
     }
 
     function onScheduledTaskMessageConfirmed(id) {
-        ConnectionManager.getApiClient(serverId).startScheduledTask(id).then(pollTasks);
+        ServerConnections.getApiClient(serverId).startScheduledTask(id).then(pollTasks);
     }
 
     function onButtonClick() {
@@ -81,13 +82,13 @@ export default function (options) {
     const serverId = ApiClient.serverId();
 
     function onPollIntervalFired() {
-        if (!ConnectionManager.getApiClient(serverId).isMessageChannelOpen()) {
+        if (!ServerConnections.getApiClient(serverId).isMessageChannelOpen()) {
             pollTasks();
         }
     }
 
     function startInterval() {
-        const apiClient = ConnectionManager.getApiClient(serverId);
+        const apiClient = ServerConnections.getApiClient(serverId);
 
         if (pollInterval) {
             clearInterval(pollInterval);
@@ -97,7 +98,7 @@ export default function (options) {
     }
 
     function stopInterval() {
-        ConnectionManager.getApiClient(serverId).sendMessage('ScheduledTasksInfoStop');
+        ServerConnections.getApiClient(serverId).sendMessage('ScheduledTasksInfoStop');
 
         if (pollInterval) {
             clearInterval(pollInterval);