Handle server id mismatches

src/components/ConnectionErrorPage.tsx

@@ -5,12 +5,22 @@ import Page from 'components/Page';
 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
 }
 
+async function onForceConnect() {
+    try {
+        const server = ServerConnections.getLastUsedServer();
+        await ServerConnections.updateSavedServerId(server);
+        window.location.reload();
+    } catch (err) {
+        console.error('[ConnectionErrorPage] Failed to force connect to server', err);
+    }
+}
+
 const ConnectionErrorPage: FC<ConnectionErrorPageProps> = ({
     state
 }) => {
@@ -20,6 +30,11 @@ const ConnectionErrorPage: FC<ConnectionErrorPageProps> = ({
 
     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,10 +61,15 @@ const ConnectionErrorPage: FC<ConnectionErrorPageProps> = ({
             <div className='padded-left padded-right'>
                 <h1>{title}</h1>
                 {htmlMessage && (
-                    <p dangerouslySetInnerHTML={{ __html: htmlMessage }} />
+                    <p
+                        dangerouslySetInnerHTML={{ __html: htmlMessage }}
+                        style={{ maxWidth: '80ch' }}
+                    />
                 )}
                 {message && (
-                    <p>{message}</p>
+                    <p style={{ maxWidth: '80ch' }}>
+                        {message}
+                    </p>
                 )}
                 {appHost.supports(AppFeature.MultiServer) && (
                     <LinkButton
@@ -59,6 +79,13 @@ const ConnectionErrorPage: FC<ConnectionErrorPageProps> = ({
                         {globalize.translate('ButtonChangeServer')}
                     </LinkButton>
                 )}
+                {state === ConnectionState.ServerMismatch && (
+                    <LinkButton
+                        onClick={onForceConnect}
+                    >
+                        {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)