review: Use Initializer instead of creating a component

src/App.tsx

@@ -32,7 +32,6 @@ import { type AppViewModel } from "./state/AppViewModel";
 import { MediaDevicesContext } from "./MediaDevicesContext";
 import { getUrlParams, HeaderStyle } from "./UrlParams";
 import { AppBar } from "./AppBar";
-import { LivekitLogLevelSync } from "./LivekitLogLevelSync.tsx";
 
 const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
 
@@ -82,7 +81,6 @@ export const App: FC<Props> = ({ vm }) => {
   const content = loaded ? (
     <ClientProvider>
       <MediaDevicesContext value={vm.mediaDevices}>
-        <LivekitLogLevelSync />
         <ProcessorProvider>
           <Sentry.ErrorBoundary
             fallback={(error) => <ErrorPage error={error} widget={widget} />}

src/LivekitLogLevelSync.tsx

@@ -1,22 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-// Syncs the livekit log level with the "Enable extended Livekit logs" developer setting.
-import { type FC, useEffect } from "react";
-import { setLogLevel } from "livekit-client";
-
-import { useSetting, enableExtendedLivekitLogs } from "./settings/settings.ts";
-
-export const LivekitLogLevelSync: FC = () => {
-  const [extendedLivekitLogs] = useSetting(enableExtendedLivekitLogs);
-
-  useEffect(() => {
-    setLogLevel(extendedLivekitLogs ? "trace" : "info");
-  }, [extendedLivekitLogs]);
-
-  return <></>;
-};

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<void> | null {

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"}`);