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)