diff --git a/src/initializer.tsx b/src/initializer.tsx index 2bd6f577..7c6fc529 100644 --- a/src/initializer.tsx +++ b/src/initializer.tsx @@ -23,12 +23,17 @@ import { createRoutesFromChildren, matchRoutes, } from "react-router-dom"; +import { + setLogExtension as setLKLogExtension, + setLogLevel as setLKLogLevel, +} from "livekit-client"; import { getUrlParams } from "./UrlParams"; import { Config } from "./config/Config"; import { platform } from "./Platform"; import { isFailure } from "./utils/fetch"; import { initializeWidget } from "./widget"; +import { enableExtendedLivekitLogs } from "./settings/settings.ts"; // This generates a map of locale names to their URL (based on import.meta.url), which looks like this: // { @@ -189,6 +194,18 @@ export class Initializer { // Add the platform to the DOM, so CSS can query it document.body.setAttribute("data-platform", platform); + + // livekit logging configuration + setLKLogExtension((level, msg, context) => { + // we pass a synthetic logger name of "livekit" to the rageshake to make it easier to read + global.mx_rage_logger.log(level, "livekit", msg, context); + }); + + enableExtendedLivekitLogs.value$.subscribe((enabled) => { + setLKLogLevel(enabled ? "trace" : "info"); + }); + + window.setLKLogLevel = setLKLogLevel; } public static init(): Promise | null { diff --git a/src/main.tsx b/src/main.tsx index 6cbf75fa..8f64c680 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -15,10 +15,6 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import "./index.css"; import { logger } from "matrix-js-sdk/lib/logger"; -import { - setLogExtension as setLKLogExtension, - setLogLevel as setLKLogLevel, -} from "livekit-client"; import { App } from "./App"; import { init as initRageshake } from "./settings/rageshake"; @@ -26,16 +22,9 @@ import { Initializer } from "./initializer"; import { AppViewModel } from "./state/AppViewModel"; import { globalScope } from "./state/ObservableScope"; -window.setLKLogLevel = setLKLogLevel; - initRageshake().catch((e) => { logger.error("Failed to initialize rageshake", e); }); -setLKLogLevel("info"); -setLKLogExtension((level, msg, context) => { - // we pass a synthetic logger name of "livekit" to the rageshake to make it easier to read - global.mx_rage_logger.log(level, "livekit", msg, context); -}); logger.info(`Element Call ${import.meta.env.VITE_APP_VERSION || "dev"}`); diff --git a/src/settings/DeveloperSettingsTab.test.tsx b/src/settings/DeveloperSettingsTab.test.tsx index 77ea81d6..5ff0d4d2 100644 --- a/src/settings/DeveloperSettingsTab.test.tsx +++ b/src/settings/DeveloperSettingsTab.test.tsx @@ -14,7 +14,11 @@ import type { MatrixClient } from "matrix-js-sdk"; import type { Room as LivekitRoom } from "livekit-client"; import { DeveloperSettingsTab } from "./DeveloperSettingsTab"; import { getSFUConfigWithOpenID } from "../livekit/openIDSFU"; -import { customLivekitUrl as customLivekitUrlSetting } from "./settings"; +import { + customLivekitUrl as customLivekitUrlSetting, + enableExtendedLivekitLogs as enableExtendedLivekitLogsSetting, +} from "./settings"; + // Mock url params hook to avoid environment-dependent snapshot churn. vi.mock("../UrlParams", () => ({ useUrlParams: (): { mocked: boolean; answer: number } => ({ @@ -248,4 +252,63 @@ describe("DeveloperSettingsTab", () => { expect(customLivekitUrlSetting.getValue()).toBe(null); }); }); + + // Add this test inside the describe("DeveloperSettingsTab", () => { block, + // after the custom livekit url tests: + + describe("enable extended livekit logs", () => { + afterEach(() => { + enableExtendedLivekitLogsSetting.setValue(false); + }); + + it("toggles extended livekit logs setting", async () => { + const user = userEvent.setup(); + const client = createMockMatrixClient(); + + render( + + + , + ); + + const checkbox = screen.getByLabelText("Enable extended livekit logs"); + + // Initial state should be unchecked (default false) + expect(checkbox).not.toBeChecked(); + expect(enableExtendedLivekitLogsSetting.getValue()).toBe(false); + + // Click to enable + await user.click(checkbox); + expect(checkbox).toBeChecked(); + expect(enableExtendedLivekitLogsSetting.getValue()).toBe(true); + + // Click to disable + await user.click(checkbox); + expect(checkbox).not.toBeChecked(); + expect(enableExtendedLivekitLogsSetting.getValue()).toBe(false); + }); + + it("Use the current setting value on render", () => { + const client = createMockMatrixClient(); + + // Set the value to true before rendering + enableExtendedLivekitLogsSetting.setValue(true); + + render( + + + , + ); + + const checkbox = screen.getByLabelText("Enable extended livekit logs"); + expect(checkbox).toBeChecked(); + expect(enableExtendedLivekitLogsSetting.getValue()).toBe(true); + }); + }); }); diff --git a/src/settings/DeveloperSettingsTab.tsx b/src/settings/DeveloperSettingsTab.tsx index 9df6181f..74c878e9 100644 --- a/src/settings/DeveloperSettingsTab.tsx +++ b/src/settings/DeveloperSettingsTab.tsx @@ -43,6 +43,7 @@ import { matrixRTCMode as matrixRTCModeSetting, customLivekitUrl as customLivekitUrlSetting, MatrixRTCMode, + enableExtendedLivekitLogs as enableExtendedLivekitLogsSetting, } from "./settings"; import styles from "./DeveloperSettingsTab.module.css"; import { useUrlParams } from "../UrlParams"; @@ -101,6 +102,10 @@ export const DeveloperSettingsTab: FC = ({ alwaysShowIphoneEarpieceSetting, ); + const [enableExtendedLivekitLogs, setEnableExtendedLivekitLogs] = useSetting( + enableExtendedLivekitLogsSetting, + ); + const [customLivekitUrlUpdateError, setCustomLivekitUrlUpdateError] = useState(null); const [customLivekitUrl, setCustomLivekitUrl] = useSetting( @@ -225,7 +230,21 @@ export const DeveloperSettingsTab: FC = ({ }, [setAlwaysShowIphoneEarpiece], )} - />{" "} + /> + + + ): void => { + setEnableExtendedLivekitLogs(event.target.checked); + }, + [setEnableExtendedLivekitLogs], + )} + /> e.preventDefault()} diff --git a/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap b/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap index 7d66f0ac..36e29d80 100644 --- a/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap +++ b/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap @@ -185,7 +185,43 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = ` Show iPhone earpiece option on all platforms - + +
+
+ + +
renders and matches snapshot 1`] = ` > @@ -203,9 +239,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = ` class="_controls_17lij_8" > renders and matches snapshot 1`] = ` Currently, no overwrite is set. Url from well-known or config is used. @@ -237,10 +273,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = ` class="_container_1ug7n_10" > renders and matches snapshot 1`] = ` > Compatible with old versions of EC that do not support multi SFU @@ -278,9 +314,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = ` class="_container_1ug7n_10" > renders and matches snapshot 1`] = ` > Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later) @@ -318,9 +354,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = ` class="_container_1ug7n_10" > renders and matches snapshot 1`] = ` > Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later diff --git a/src/settings/settings.ts b/src/settings/settings.ts index 917c79f1..cf0d9d66 100644 --- a/src/settings/settings.ts +++ b/src/settings/settings.ts @@ -129,6 +129,11 @@ export const alwaysShowIphoneEarpiece = new Setting( false, ); +export const enableExtendedLivekitLogs = new Setting( + "extended-livekit-logs", + false, +); + export enum MatrixRTCMode { Legacy = "legacy", Compatibility = "compatibility",