Remove api client setup from app router

src/components/ServerConnections.js

@@ -1,20 +1,49 @@
 import { ConnectionManager, Credentials, ApiClient, Events } from 'jellyfin-apiclient';
+
 import { appHost } from './apphost';
 import Dashboard from '../utils/dashboard';
 import { setUserInfo } from '../scripts/settings/userSettings';
+import appSettings from '../scripts/settings/appSettings';
+
+const normalizeImageOptions = options => {
+    if (!options.quality && (options.maxWidth || options.width || options.maxHeight || options.height || options.fillWidth || options.fillHeight)) {
+        options.quality = 90;
+    }
+};
+
+const getMaxBandwidth = () => {
+    /* eslint-disable compat/compat */
+    if (navigator.connection) {
+        let max = navigator.connection.downlinkMax;
+        if (max && max > 0 && max < Number.POSITIVE_INFINITY) {
+            max /= 8;
+            max *= 1000000;
+            max *= 0.7;
+            return parseInt(max, 10);
+        }
+    }
+    /* eslint-enable compat/compat */
+
+    return null;
+};
 
 class ServerConnections extends ConnectionManager {
     constructor() {
         super(...arguments);
         this.localApiClient = null;
 
-        Events.on(this, 'localusersignedout', function (eventName, logoutInfo) {
+        Events.on(this, 'localusersignedout', (_e, logoutInfo) => {
             setUserInfo(null, null);
 
             if (window.NativeShell && typeof window.NativeShell.onLocalUserSignedOut === 'function') {
                 window.NativeShell.onLocalUserSignedOut(logoutInfo);
             }
         });
+
+        Events.on(this, 'apiclientcreated', (_e, apiClient) => {
+            apiClient.getMaxBandwidth = getMaxBandwidth;
+            apiClient.normalizeImageOptions = normalizeImageOptions;
+        });
     }
 
     initApiClient(server) {
@@ -38,6 +67,13 @@ class ServerConnections extends ConnectionManager {
         console.debug('loaded ApiClient singleton');
     }
 
+    connect(options) {
+        return super.connect({
+            enableAutoLogin: appSettings.enableAutoLogin(),
+            options
+        });
+    }
+
     setLocalApiClient(apiClient) {
         if (apiClient) {
             this.localApiClient = apiClient;

src/components/appRouter.js

@@ -2,7 +2,6 @@ import { Events } from 'jellyfin-apiclient';
 import { Action, createHashHistory } from 'history';
 
 import { appHost } from './apphost';
-import appSettings from '../scripts/settings/appSettings';
 import { clearBackdrop, setBackdropTransparency } from './backdrop/backdrop';
 import globalize from '../scripts/globalize';
 import itemHelper from './itemHelper';
@@ -14,33 +13,6 @@ import reactControllerFactory from './reactControllerFactory';
 
 const history = createHashHistory();
 
-const normalizeImageOptions = options => {
-    let setQuality;
-    if (options.maxWidth || options.width || options.maxHeight || options.height || options.fillWidth || options.fillHeight) {
-        setQuality = true;
-    }
-
-    if (setQuality && !options.quality) {
-        options.quality = 90;
-    }
-};
-
-const getMaxBandwidth = () => {
-    /* eslint-disable compat/compat */
-    if (navigator.connection) {
-        let max = navigator.connection.downlinkMax;
-        if (max && max > 0 && max < Number.POSITIVE_INFINITY) {
-            max /= 8;
-            max *= 1000000;
-            max *= 0.7;
-            return parseInt(max, 10);
-        }
-    }
-    /* eslint-enable compat/compat */
-
-    return null;
-};
-
 /**
  * Page types of "no return" (when "Go back" should behave differently, probably quitting the application).
  */
@@ -80,9 +52,7 @@ class AppRouter {
     #beginConnectionWizard() {
         clearBackdrop();
         loading.show();
-        ServerConnections.connect({
-            enableAutoLogin: appSettings.enableAutoLogin()
-        }).then((result) => {
+        ServerConnections.connect().then(result => {
             this.#handleConnectionResult(result);
         });
     }
@@ -169,13 +139,18 @@ class AppRouter {
 
     start() {
         loading.show();
-        this.#initApiClients();
 
-        Events.on(appHost, 'resume', this.#onAppResume);
+        ServerConnections.getApiClients().forEach(apiClient => {
+            Events.off(apiClient, 'requestfail', this.onRequestFail);
+            Events.on(apiClient, 'requestfail', this.onRequestFail);
+        });
 
-        ServerConnections.connect({
-            enableAutoLogin: appSettings.enableAutoLogin()
-        }).then((result) => {
+        Events.on(ServerConnections, 'apiclientcreated', (_e, apiClient) => {
+            Events.off(apiClient, 'requestfail', this.onRequestFail);
+            Events.on(apiClient, 'requestfail', this.onRequestFail);
+        });
+
+        ServerConnections.connect().then(result => {
             this.firstConnectionResult = result;
 
             // Handle the initial route
@@ -239,9 +214,7 @@ class AppRouter {
             }
 
             const url = this.getRouteUrl(item, options);
-            this.show(url, {
-                item: item
-            });
+            this.show(url, { item });
         }
     }
 
@@ -417,7 +390,7 @@ class AppRouter {
         this.msgTimeout = setTimeout(this.onForcedLogoutMessageTimeout, 100);
     }
 
-    onRequestFail(e, data) {
+    onRequestFail(_e, data) {
         const apiClient = this;
 
         if (data.status === 403) {
@@ -433,34 +406,6 @@ class AppRouter {
         }
     }
 
-    onApiClientCreated(e, newApiClient) {
-        newApiClient.normalizeImageOptions = normalizeImageOptions;
-        newApiClient.getMaxBandwidth = getMaxBandwidth;
-
-        Events.off(newApiClient, 'requestfail', this.onRequestFail);
-        Events.on(newApiClient, 'requestfail', this.onRequestFail);
-    }
-
-    #initApiClient(apiClient, instance) {
-        instance.onApiClientCreated({}, apiClient);
-    }
-
-    #initApiClients() {
-        ServerConnections.getApiClients().forEach((apiClient) => {
-            this.#initApiClient(apiClient, this);
-        });
-
-        Events.on(ServerConnections, 'apiclientcreated', this.onApiClientCreated);
-    }
-
-    #onAppResume() {
-        const apiClient = ServerConnections.currentApiClient();
-
-        if (apiClient) {
-            apiClient.ensureWebSocket();
-        }
-    }
-
     #authenticate(ctx, route, callback) {
         const firstResult = this.firstConnectionResult;
 

src/scripts/site.js

@@ -163,6 +163,10 @@ async function onAppReady() {
         import('../assets/css/ios.scss');
     }
 
+    Events.on(appHost, 'resume', () => {
+        ServerConnections.currentApiClient()?.ensureWebSocket();
+    });
+
     appRouter.start();
 
     if (!browser.tv && !browser.xboxOne && !browser.ps4) {