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

src/settings/DeveloperSettingsTab.tsx

@@ -41,6 +41,7 @@ import {
   matrixRTCMode as matrixRTCModeSetting,
   customLivekitUrl as customLivekitUrlSetting,
   MatrixRTCMode,
+  useSettingWithLastUpdateReason,
 } from "./settings";
 import type { Room as LivekitRoom } from "livekit-client";
 import styles from "./DeveloperSettingsTab.module.css";
@@ -92,9 +93,8 @@ export const DeveloperSettingsTab: FC<Props> = ({
     alwaysShowIphoneEarpieceSetting,
   );
 
-  const [customLivekitUrl, setCustomLivekitUrl] = useSetting(
-    customLivekitUrlSetting,
-  );
+  const [customLivekitUrl, setCustomLivekitUrl, customLivekitUrlUpdateReason] =
+    useSettingWithLastUpdateReason(customLivekitUrlSetting);
   const [customLivekitUrlTextBuffer, setCustomLivekitUrlTextBuffer] =
     useState(customLivekitUrl);
   useEffect(() => {
@@ -220,7 +220,8 @@ export const DeveloperSettingsTab: FC<Props> = ({
         onSubmit={(e) => e.preventDefault()}
         helpLabel={
           customLivekitUrl === null
-            ? t("developer_mode.custom_livekit_url.from_config")
+            ? t("developer_mode.custom_livekit_url.from_config") +
+              (customLivekitUrlUpdateReason ?? "")
             : t("developer_mode.custom_livekit_url.current_url") +
               customLivekitUrl
         }

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 => {
@@ -57,6 +62,19 @@ export function useSetting<T>(setting: Setting<T>): [T, (value: T) => void] {
   return [useBehavior(setting.value$), setting.setValue];
 }
 
+/**
+ * React hook that returns a settings's current value and a setter.
+ */
+export function useSettingWithLastUpdateReason<T>(
+  setting: Setting<T>,
+): [T, (value: T) => void, string | null] {
+  return [
+    useBehavior(setting.value$),
+    setting.setValue,
+    useBehavior(setting.lastUpdateReason$),
+  ];
+}
+
 // null = undecided
 export const optInAnalytics = new Setting<boolean | null>(
   "opt-in-analytics",