Fix unavailable server handling

src/components/ConnectionErrorPage.tsx

@@ -1,6 +1,8 @@
 import React, { FC, useEffect, useState } from 'react';
 
+import { appHost } from 'components/apphost';
 import Page from 'components/Page';
+import LinkButton from 'elements/emby-button/LinkButton';
 import globalize from 'lib/globalize';
 import { ConnectionState } from 'lib/jellyfin-apiclient';
 
@@ -13,14 +15,22 @@ const ConnectionErrorPage: FC<ConnectionErrorPageProps> = ({
 }) => {
     const [ title, setTitle ] = useState<string>();
     const [ htmlMessage, setHtmlMessage ] = useState<string>();
+    const [ message, setMessage ] = useState<string>();
 
     useEffect(() => {
-        if (state === ConnectionState.ServerUpdateNeeded) {
-            setTitle(globalize.translate('HeaderUpdateRequired'));
-            setHtmlMessage(globalize.translate(
-                'ServerUpdateNeeded',
-                '<a href="https://jellyfin.org/downloads/server/">jellyfin.org/downloads/server</a>'
-            ));
+        switch (state) {
+            case ConnectionState.ServerUpdateNeeded:
+                setTitle(globalize.translate('HeaderUpdateRequired'));
+                setHtmlMessage(globalize.translate(
+                    'ServerUpdateNeeded',
+                    '<a href="https://jellyfin.org/downloads/server/">jellyfin.org/downloads/server</a>'
+                ));
+                setMessage(undefined);
+                return;
+            case ConnectionState.Unavailable:
+                setTitle(globalize.translate('HeaderServerUnavailable'));
+                setHtmlMessage(undefined);
+                setMessage(globalize.translate('MessageUnableToConnectToServer'));
         }
     }, [ state ]);
 
@@ -37,6 +47,17 @@ const ConnectionErrorPage: FC<ConnectionErrorPageProps> = ({
                 {htmlMessage && (
                     <p dangerouslySetInnerHTML={{ __html: htmlMessage }} />
                 )}
+                {message && (
+                    <p>{message}</p>
+                )}
+                {appHost.supports('multiserver') && (
+                    <LinkButton
+                        className='raised'
+                        href='/selectserver'
+                    >
+                        {globalize.translate('ButtonChangeServer')}
+                    </LinkButton>
+                )}
             </div>
         </Page>
     );

src/components/ConnectionRequired.tsx

@@ -184,7 +184,7 @@ const ConnectionRequired: FunctionComponent<ConnectionRequiredProps> = ({
             console.debug('[ConnectionRequired] connection state', firstConnection?.State);
             ServerConnections.firstConnection = true;
 
-            if (firstConnection?.State === ConnectionState.ServerUpdateNeeded) {
+            if ([ ConnectionState.ServerUpdateNeeded, ConnectionState.Unavailable ].includes(firstConnection?.State)) {
                 setErrorState(firstConnection.State);
             } else if (level === AccessLevel.Wizard) {
                 handleWizard(firstConnection)

src/lib/jellyfin-apiclient/connectionManager.js

@@ -423,10 +423,6 @@ export default class ConnectionManager {
             // See if we have any saved credentials and can auto sign in
             if (firstServer) {
                 return self.connectToServer(firstServer, options).then((result) => {
-                    if (result.State === ConnectionState.Unavailable) {
-                        result.State = ConnectionState.ServerSelection;
-                    }
-
                     console.log('resolving connectToServers with result.State: ' + result.State);
                     return result;
                 });

src/strings/en-us.json

@@ -515,6 +515,7 @@
     "HeaderSeriesOptions": "Series Options",
     "HeaderSeriesStatus": "Series Status",
     "HeaderServerAddressSettings": "Server Address Settings",
+    "HeaderServerUnavailable": "Server Unavailable",
     "HeaderSetupLibrary": "Set up your media libraries",
     "HeaderSortBy": "Sort By",
     "HeaderSortOrder": "Sort Order",