Reset overwrite url if it is invalid (does fail to reach sfu)

src/settings/DeveloperSettingsTab.tsx

@@ -28,6 +28,7 @@ import {
   InlineField,
   Label,
   RadioControl,
+  Text,
 } from "@vector-im/compound-web";
 
 import { FieldRow, InputField } from "../input/Input";
@@ -45,6 +46,7 @@ import {
 import type { Room as LivekitRoom } from "livekit-client";
 import styles from "./DeveloperSettingsTab.module.css";
 import { useUrlParams } from "../UrlParams";
+import { getSFUConfigWithOpenID } from "../livekit/openIDSFU";
 
 interface Props {
   client: MatrixClient;
@@ -92,6 +94,8 @@ export const DeveloperSettingsTab: FC<Props> = ({
     alwaysShowIphoneEarpieceSetting,
   );
 
+  const [customLivekitUrlUpdateError, setCustomLivekitUrlUpdateError] =
+    useState<string | null>(null);
   const [customLivekitUrl, setCustomLivekitUrl] = useSetting(
     customLivekitUrlSetting,
   );
@@ -217,6 +221,7 @@ export const DeveloperSettingsTab: FC<Props> = ({
         />{" "}
       </FieldRow>
       <EditInPlace
+        serverInvalid={customLivekitUrlUpdateError !== null}
         onSubmit={(e) => e.preventDefault()}
         helpLabel={
           customLivekitUrl === null
@@ -229,14 +234,36 @@ export const DeveloperSettingsTab: FC<Props> = ({
         savingLabel={t("developer_mode.custom_livekit_url.saving")}
         cancelButtonLabel={t("developer_mode.custom_livekit_url.reset")}
         onSave={useCallback(
-          (e: React.FormEvent<HTMLFormElement>) => {
-            setCustomLivekitUrl(
-              customLivekitUrlTextBuffer === ""
-                ? null
-                : customLivekitUrlTextBuffer,
-            );
+          async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
+            if (
+              customLivekitUrlTextBuffer === "" ||
+              customLivekitUrlTextBuffer === null
+            ) {
+              setCustomLivekitUrl(null);
+              return Promise.resolve();
+            }
+
+            try {
+              logger.debug("try setting");
+              await getSFUConfigWithOpenID(
+                client,
+                customLivekitUrlTextBuffer,
+                "Test-room-alias-" + Date.now().toString() + client.getUserId(),
+              );
+              logger.debug("done setting! Success");
+              setCustomLivekitUrlUpdateError(null);
+              setCustomLivekitUrl(customLivekitUrlTextBuffer);
+            } catch (e) {
+              logger.error("failed setting", e);
+              setCustomLivekitUrlUpdateError("invalid URL (did not update)");
+              // automatically unset the error after 4 seconds (2 seconds will be for the save label)
+              setTimeout(() => {
+                logger.debug("unsetting error");
+                setCustomLivekitUrlUpdateError(null);
+              }, 2000);
+            }
           },
-          [setCustomLivekitUrl, customLivekitUrlTextBuffer],
+          [customLivekitUrlTextBuffer, setCustomLivekitUrl, client],
         )}
         value={customLivekitUrlTextBuffer ?? ""}
         onChange={useCallback(
@@ -251,7 +278,13 @@ export const DeveloperSettingsTab: FC<Props> = ({
           },
           [setCustomLivekitUrl],
         )}
-      />
+      >
+        {customLivekitUrlUpdateError !== null && (
+          <Text size="sm" priority="low">
+            {customLivekitUrlUpdateError}
+          </Text>
+        )}
+      </EditInPlace>
       <Heading as="h3" type="body" weight="semibold" size="lg">
         {t("developer_mode.matrixRTCMode.title")}
       </Heading>

src/settings/settings.ts

@@ -34,15 +34,20 @@ export class Setting<T> {
 
     this._value$ = new BehaviorSubject(initialValue);
     this.value$ = this._value$;
+    this._lastUpdateReason$ = new BehaviorSubject<string | null>(null);
+    this.lastUpdateReason$ = this._lastUpdateReason$;
   }
 
   private readonly key: string;
 
   private readonly _value$: BehaviorSubject<T>;
+  private readonly _lastUpdateReason$: BehaviorSubject<string | null>;
   public readonly value$: Behavior<T>;
+  public readonly lastUpdateReason$: Behavior<string | null>;
 
-  public readonly setValue = (value: T): void => {
+  public readonly setValue = (value: T, reason?: string): void => {
     this._value$.next(value);
+    this._lastUpdateReason$.next(reason ?? null);
     localStorage.setItem(this.key, JSON.stringify(value));
   };
   public readonly getValue = (): T => {