Tidy config of show non-member settings

public/locales/en-GB/app.json

@@ -152,12 +152,12 @@
     "feedback_tab_thank_you": "Thanks, we received your feedback!",
     "feedback_tab_title": "Feedback",
     "more_tab_title": "More",
-    "non_member_tiles": "Show tiles for non-member media",
     "opt_in_description": "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.",
     "preferences_tab_body": "Here you can configure extra options for an improved experience",
     "preferences_tab_h4": "Preferences",
     "preferences_tab_show_hand_raised_timer_description": "Show a timer when a participant raises their hand",
     "preferences_tab_show_hand_raised_timer_label": "Show hand raise duration",
+    "show_non_member_tiles": "Show tiles for non-member media",
     "speaker_device_selection_label": "Speaker"
   },
   "star_rating_input_label_one": "{{count}} stars",

src/App.tsx

@@ -28,7 +28,7 @@ import { Initializer } from "./initializer";
 import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";
 import { widget } from "./widget";
 import { useTheme } from "./useTheme";
-import { nonMemberTiles } from "./settings/settings";
+import { showNonMemberTiles } from "./settings/settings";
 import { Config } from "./config/Config";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
@@ -76,7 +76,7 @@ export const App: FC<AppProps> = ({ history }) => {
   // Update settings to use the non member tile information from the config if set
   useEffect(() => {
     if (loaded && Config.get().show_non_member_tiles) {
-      nonMemberTiles.setValue(true);
+      showNonMemberTiles.setValue(true);
     }
   });
 

src/config/Config.ts

@@ -13,6 +13,7 @@ import {
   ConfigOptions,
   ResolvedConfigOptions,
 } from "./ConfigOptions";
+import { showNonMemberTiles } from "../settings/settings";
 
 export class Config {
   private static internalInstance: Config | undefined;
@@ -32,6 +33,7 @@ export class Config {
         "../config.json",
       ).then((config) => {
         internalInstance.config = merge({}, DEFAULT_CONFIG, config);
+        internalInstance.applyConfigToSettings();
       });
     }
     return Config.internalInstance.initPromise;
@@ -66,6 +68,14 @@ export class Config {
     return Config.get().default_server_config?.["m.homeserver"].server_name;
   }
 
+  private applyConfigToSettings(): void {
+    if (!this.config) return;
+    // only the value from config if it hasn't been overridden
+    if (showNonMemberTiles.value === undefined) {
+      showNonMemberTiles.setValue(this.config.show_non_member_tiles);
+    }
+  }
+
   public config?: ResolvedConfigOptions;
   private initPromise?: Promise<void>;
 }

src/settings/SettingsModal.tsx

@@ -27,7 +27,7 @@ import {
   useSetting,
   developerSettingsTab as developerSettingsTabSetting,
   duplicateTiles as duplicateTilesSetting,
-  nonMemberTiles as nonMemberTilesSetting,
+  showNonMemberTiles as showNonMemberTilesSetting,
   useOptInAnalytics,
 } from "./settings";
 import { isFirefox } from "../Platform";
@@ -69,7 +69,9 @@ export const SettingsModal: FC<Props> = ({
   );
   const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
 
-  const [nonMemberTiles, setNonMemberTiles] = useSetting(nonMemberTilesSetting);
+  const [showNonMemberTiles, setShowNonMemberTiles] = useSetting(
+    showNonMemberTilesSetting,
+  );
 
   // Generate a `SelectInput` with a list of devices for a given device kind.
   const generateDeviceSelection = (
@@ -241,15 +243,15 @@ export const SettingsModal: FC<Props> = ({
         </FieldRow>
         <FieldRow>
           <InputField
-            id="nonMemberTiles"
+            id="showNonMemberTiles"
             type="checkbox"
-            label={t("settings.non_member_tiles")}
+            label={t("settings.show_non_member_tiles")}
-            checked={nonMemberTiles}
+            checked={showNonMemberTiles}
             onChange={useCallback(
               (event: ChangeEvent<HTMLInputElement>): void => {
-                setNonMemberTiles(event.target.checked);
+                setShowNonMemberTiles(event.target.checked);
               },
-              [setNonMemberTiles],
+              [setShowNonMemberTiles],
             )}
           />
         </FieldRow>

src/settings/settings.ts

@@ -72,7 +72,10 @@ export const developerSettingsTab = new Setting(
 
 export const duplicateTiles = new Setting("duplicate-tiles", 0);
 
-export const nonMemberTiles = new Setting("non-member-tiles", false);
+export const showNonMemberTiles = new Setting<boolean | undefined>(
+  "show-non-member-tiles",
+  undefined,
+);
 
 export const audioInput = new Setting<string | undefined>(
   "audio-input",

src/state/CallViewModel.ts

@@ -67,7 +67,7 @@ import {
 } from "./MediaViewModel";
 import { accumulate, finalizeValue } from "../utils/observable";
 import { ObservableScope } from "./ObservableScope";
-import { duplicateTiles, nonMemberTiles } from "../settings/settings";
+import { duplicateTiles, showNonMemberTiles } from "../settings/settings";
 import { isFirefox } from "../Platform";
 import { setPipEnabled } from "../controls";
 import { GridTileViewModel, SpotlightTileViewModel } from "./TileViewModel";
@@ -434,7 +434,7 @@ export class CallViewModel extends ViewModel {
       this.matrixRTCSession,
       MatrixRTCSessionEvent.MembershipsChanged,
     ).pipe(startWith(null)),
-    nonMemberTiles.value,
+    showNonMemberTiles.value,
   ]).pipe(
     scan(
       (
@@ -444,7 +444,7 @@ export class CallViewModel extends ViewModel {
           { participant: localParticipant },
           duplicateTiles,
           _membershipsChanged,
-          nonMemberTiles,
+          showNonMemberTiles,
         ],
       ) => {
         const newItems = new Map(
@@ -534,7 +534,7 @@ export class CallViewModel extends ViewModel {
         //  - If one wants to test scalability using the livekit cli.
         //  - If an experimental project does not yet do the matrixRTC bits.
         //  - If someone wants to debug if the LK connection works but matrixRTC room state failed to arrive.
-        const debugShowNonMember = nonMemberTiles; //Config.get().show_non_member_tiles;
+        const debugShowNonMember = showNonMemberTiles; //Config.get().show_non_member_tiles;
         const newNonMemberItems = debugShowNonMember
           ? new Map(
               function* (this: CallViewModel): Iterable<[string, MediaItem]> {
@@ -689,7 +689,7 @@ export class CallViewModel extends ViewModel {
         ? ([of(screenShares.map((m) => m.vm)), this.spotlightSpeaker] as const)
         : ([
             this.spotlightSpeaker.pipe(
-              map((speaker) => (speaker && [speaker]) ?? []),
+              map((speaker) => (speaker ? [speaker] : [])),
             ),
             this.spotlightSpeaker.pipe(
               switchMap((speaker) =>
@@ -722,7 +722,7 @@ export class CallViewModel extends ViewModel {
       distinctUntilChanged(),
     );
 
-  private readonly pip: Observable<UserMediaViewModel | null> =
+  private readonly pip: Observable<UserMediaViewModel | undefined> =
     this.spotlightAndPip.pipe(switchMap(([, pip]) => pip));
 
   private readonly pipEnabled: Observable<boolean> = setPipEnabled.pipe(