Merge pull request #6975 from thornbill/server-id-mismatch

src/components/ConnectionErrorPage.tsx

@@ -1,11 +1,13 @@
-import React, { FC, useEffect, useState } from 'react';
+import DOMPurify from 'dompurify';
+import React, { FC, useCallback, useEffect, useState } from 'react';
 
 import { appHost } from 'components/apphost';
 import Page from 'components/Page';
+import toast from 'components/toast/toast';
 import { AppFeature } from 'constants/appFeature';
 import LinkButton from 'elements/emby-button/LinkButton';
 import globalize from 'lib/globalize';
-import { ConnectionState } from 'lib/jellyfin-apiclient';
+import { ConnectionState, ServerConnections } from 'lib/jellyfin-apiclient';
 
 interface ConnectionErrorPageProps {
     state: ConnectionState
@@ -17,9 +19,29 @@ const ConnectionErrorPage: FC<ConnectionErrorPageProps> = ({
     const [ title, setTitle ] = useState<string>();
     const [ htmlMessage, setHtmlMessage ] = useState<string>();
     const [ message, setMessage ] = useState<string>();
+    const [ isConnectDisabled, setIsConnectDisabled ] = useState(false);
+
+    const onForceConnect = useCallback(async () => {
+        setIsConnectDisabled(true);
+
+        try {
+            const server = ServerConnections.getLastUsedServer();
+            await ServerConnections.updateSavedServerId(server);
+            window.location.reload();
+        } catch (err) {
+            console.error('[ConnectionErrorPage] Failed to force connect to server', err);
+            toast(globalize.translate('HeaderConnectionFailure'));
+            setIsConnectDisabled(false);
+        }
+    }, []);
 
     useEffect(() => {
         switch (state) {
+            case ConnectionState.ServerMismatch:
+                setTitle(globalize.translate('HeaderServerMismatch'));
+                setHtmlMessage(undefined);
+                setMessage(globalize.translate('MessageServerMismatch'));
+                return;
             case ConnectionState.ServerUpdateNeeded:
                 setTitle(globalize.translate('HeaderUpdateRequired'));
                 setHtmlMessage(globalize.translate(
@@ -46,11 +68,17 @@ const ConnectionErrorPage: FC<ConnectionErrorPageProps> = ({
             <div className='padded-left padded-right'>
                 <h1>{title}</h1>
                 {htmlMessage && (
-                    <p dangerouslySetInnerHTML={{ __html: htmlMessage }} />
+                    <p
+                        dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(htmlMessage) }}
+                        style={{ maxWidth: '80ch' }}
+                    />
                 )}
                 {message && (
-                    <p>{message}</p>
+                    <p style={{ maxWidth: '80ch' }}>
+                        {message}
+                    </p>
                 )}
+
                 {appHost.supports(AppFeature.MultiServer) && (
                     <LinkButton
                         className='raised'
@@ -59,6 +87,15 @@ const ConnectionErrorPage: FC<ConnectionErrorPageProps> = ({
                         {globalize.translate('ButtonChangeServer')}
                     </LinkButton>
                 )}
+
+                {state === ConnectionState.ServerMismatch && (
+                    <LinkButton
+                        onClick={onForceConnect}
+                        style={ isConnectDisabled ? { pointerEvents: 'none' } : undefined }
+                    >
+                        {globalize.translate('ConnectAnyway')}
+                    </LinkButton>
+                )}
             </div>
         </Page>
     );

src/components/ConnectionRequired.tsx

@@ -31,6 +31,12 @@ type ConnectionRequiredProps = {
     level?: AccessLevelValue
 };
 
+const ERROR_STATES = [
+    ConnectionState.ServerMismatch,
+    ConnectionState.ServerUpdateNeeded,
+    ConnectionState.Unavailable
+];
+
 const fetchPublicSystemInfo = async (apiClient: ApiClient) => {
     const infoResponse = await fetch(
         `${apiClient.serverAddress()}/System/Info/Public`,
@@ -184,7 +190,7 @@ const ConnectionRequired: FunctionComponent<ConnectionRequiredProps> = ({
             console.debug('[ConnectionRequired] connection state', firstConnection?.State);
             ServerConnections.firstConnection = true;
 
-            if ([ ConnectionState.ServerUpdateNeeded, ConnectionState.Unavailable ].includes(firstConnection?.State)) {
+            if (ERROR_STATES.includes(firstConnection?.State)) {
                 setErrorState(firstConnection.State);
             } else if (level === AccessLevel.Wizard) {
                 handleWizard(firstConnection)