Honor font settings in Element Call (#9751)

Because this encodes font settings into widget URLs at the time that the client first loads a call, this has the consequence that users may need to restart their client to see font setting changes take effect in Element Call. For users who rely on these settings for accessibility, it's a lot better than nothing, though.

Author: robintown

src/models/Call.ts

@@ -52,6 +52,7 @@ import PlatformPeg from "../PlatformPeg";
 import { getCurrentLanguage } from "../languageHandler";
 import DesktopCapturerSourcePicker from "../components/views/elements/DesktopCapturerSourcePicker";
 import Modal from "../Modal";
+import { FontWatcher } from "../settings/watchers/FontWatcher";
 
 const TIMEOUT_MS = 16000;
 
@@ -626,8 +627,6 @@ export class ElementCall extends Call {
 
     private constructor(public readonly groupCall: GroupCall, client: MatrixClient) {
         // Splice together the Element Call URL for this call
-        const url = new URL(SdkConfig.get("element_call").url ?? DEFAULTS.element_call.url!);
-        url.pathname = "/room";
         const params = new URLSearchParams({
             embed: "",
             preload: "",
@@ -637,7 +636,24 @@ export class ElementCall extends Call {
             roomId: groupCall.room.roomId,
             baseUrl: client.baseUrl,
             lang: getCurrentLanguage().replace("_", "-"),
+            fontScale: `${SettingsStore.getValue("baseFontSize") / FontWatcher.DEFAULT_SIZE}`,
         });
+
+        // Set custom fonts
+        if (SettingsStore.getValue("useSystemFont")) {
+            SettingsStore.getValue<string>("systemFont")
+                .split(",")
+                .map((font) => {
+                    // Strip whitespace and quotes
+                    font = font.trim();
+                    if (font.startsWith('"') && font.endsWith('"')) font = font.slice(1, -1);
+                    return font;
+                })
+                .forEach((font) => params.append("font", font));
+        }
+
+        const url = new URL(SdkConfig.get("element_call").url ?? DEFAULTS.element_call.url!);
+        url.pathname = "/room";
         url.hash = `#?${params.toString()}`;
 
         // To use Element Call without touching room state, we create a virtual

test/models/Call-test.ts

@@ -596,6 +596,32 @@ describe("ElementCall", () => {
 
             expect(Call.get(room)).toBeNull();
         });
+
+        it("passes font settings through widget URL", async () => {
+            const originalGetValue = SettingsStore.getValue;
+            SettingsStore.getValue = <T>(name: string, roomId?: string, excludeDefault?: boolean) => {
+                switch (name) {
+                    case "baseFontSize":
+                        return 12 as T;
+                    case "useSystemFont":
+                        return true as T;
+                    case "systemFont":
+                        return "OpenDyslexic, DejaVu Sans" as T;
+                    default:
+                        return originalGetValue<T>(name, roomId, excludeDefault);
+                }
+            };
+
+            await ElementCall.create(room);
+            const call = Call.get(room);
+            if (!(call instanceof ElementCall)) throw new Error("Failed to create call");
+
+            const urlParams = new URLSearchParams(new URL(call.widget.url).hash.slice(1));
+            expect(urlParams.get("fontScale")).toBe("1.2");
+            expect(urlParams.getAll("font")).toEqual(["OpenDyslexic", "DejaVu Sans"]);
+
+            SettingsStore.getValue = originalGetValue;
+        });
     });
 
     describe("instance in a non-video room", () => {