Merge branch 'livekit' into fkwp/feature/matrix_rtc_mode_config

.github/workflows/test.yaml

@@ -29,7 +29,7 @@ jobs:
       - name: Vitest
         run: "pnpm run test:coverage"
       - name: Upload to codecov
-        uses: codecov/codecov-action@75cd11691c0faa626561e295848008c8a7dddffe # v5
+        uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
         with:

README.md

@@ -252,6 +252,14 @@ pnpm backend
 > browser's trusted certificates or by simply copying and pasting each URL into
 > your browser’s address bar and follow the prompts to add the exception.
 
+### Updating snapshots
+
+To update snapshots used in tests, use Vitest's `-u` flag, e.g.:
+
+```sh
+pnpm test DeveloperSettingsTab -u
+```
+
 ### Playwright tests
 
 Our Playwright tests run automatically as part of our CI along with our other

i18next-parser.config.ts

@@ -1,32 +0,0 @@
-import type { UserConfig } from "i18next-parser";
-
-const config: UserConfig = {
-  keySeparator: ".",
-  namespaceSeparator: false,
-  contextSeparator: "|",
-  pluralSeparator: "_",
-  createOldCatalogs: false,
-  defaultNamespace: "app",
-  lexers: {
-    ts: [
-      {
-        lexer: "JavascriptLexer",
-        functions: ["t", "translatedError"],
-        namespaceFunctions: ["useTranslation", "withTranslation"],
-      },
-    ],
-    tsx: [
-      {
-        lexer: "JsxLexer",
-        functions: ["t", "translatedError"],
-        namespaceFunctions: ["useTranslation", "withTranslation"],
-      },
-    ],
-  },
-  locales: ["en"],
-  output: "locales/$LOCALE/$NAMESPACE.json",
-  input: ["src/**/*.{ts,tsx}"],
-  sort: true,
-};
-
-export default config;

i18next.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from "i18next-cli";
+
+export default defineConfig({
+  locales: ["en"],
+  extract: {
+    input: ["src/**/*.{ts,tsx}"],
+    output: "locales/{{language}}/{{namespace}}.json",
+    defaultNS: "app",
+    keySeparator: ".",
+    nsSeparator: false,
+    contextSeparator: "|",
+    extractFromComments: false,
+    functions: ["t", "*.t", "translatedError", "i18nKey"],
+    transComponents: ["Trans"],
+  },
+  types: {
+    input: ["locales/{{language}}/{{namespace}}.json"],
+    output: "src/types/i18next.d.ts",
+  },
+});

knip.ts

@@ -11,7 +11,7 @@ export default {
   vite: {
     config: ["vite.config.ts", "vite-embedded.config.ts", "vite-sdk.config.ts"],
   },
-  entry: ["src/main.tsx", "i18next-parser.config.ts"],
+  entry: ["src/main.tsx", "i18next.config.ts"],
   ignoreBinaries: [
     // This is deprecated, so Knip doesn't actually recognize it as a globally
     // installed binary. TODO We should switch to Compose v2:
@@ -30,7 +30,6 @@ export default {
     // these look unused to Knip
     "@types/content-type",
     "@types/sdp-transform",
-    "@types/uuid",
     // We obviously use this, but if the package has been linked with pnpm link,
     // then Knip will flag it as a false positive
     // https://github.com/webpro-nl/knip/issues/766

package.json

@@ -24,8 +24,8 @@
     "lint:eslint-fix": "eslint --max-warnings 0 src playwright --fix",
     "lint:knip": "knip",
     "lint:types": "tsc",
-    "i18n": "i18next",
-    "i18n:check": "i18next --fail-on-warnings --fail-on-update",
+    "i18n": "npx i18next-cli extract",
+    "i18n:check": "npx i18next-cli extract --ci",
     "test": "vitest",
     "test:storybook": "vitest --project=storybook",
     "test:unit": "vitest --project=unit",
@@ -79,7 +79,6 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@types/sdp-transform": "^2.4.5",
-    "@types/uuid": "10",
     "@typescript-eslint/eslint-plugin": "^8.31.0",
     "@typescript-eslint/parser": "^8.31.0",
     "@use-gesture/react": "^10.2.11",
@@ -109,7 +108,7 @@
     "global-jsdom": "^26.0.0",
     "i18next": "^25.0.0",
     "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-parser": "^9.1.0",
+    "i18next-cli": "^1.61.0",
     "jsdom": "^26.0.0",
     "knip": "^5.86.0",
     "livekit-client": "^2.18.1",

src/reactions/ReactionIndicator.module.css

@@ -1,9 +1,9 @@
 .reactionIndicatorWidget {
   display: flex;
-  background-color: #00000030;
   border-radius: var(--cpd-radius-pill-effect);
   box-shadow: 0 0 var(--cpd-space-2x) #00000040;
-  background: "ffffff40";
+  color: var(--cpd-color-text-on-solid-primary);
+  background: var(--cpd-color-icon-secondary-alpha);
   backdrop-filter: blur(10px);
   outline: var(--cpd-border-width-1) solid var(--cpd-color-alpha-gray-400);
   outline-offset: calc(-1 * var(--cpd-border-width-1));
@@ -33,7 +33,6 @@
 
 .reaction {
   margin: var(--cpd-space-1x);
-  color: white;
   display: flex;
   align-items: center;
   border-radius: var(--cpd-radius-pill-effect);

src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap

@@ -224,13 +224,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     </div>
   </div>
   <form
-    class="_root_19upo_16"
+    class="_root_1o4d9_17"
   >
     <div
-      class="_field_19upo_26"
+      class="_field_1o4d9_27"
     >
       <label
-        class="_label_19upo_59"
+        class="_label_1o4d9_60"
         for="radix-_r_7_"
       >
         Custom Livekit-url
@@ -248,7 +248,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         />
       </div>
       <span
-        class="_message_19upo_85 _help-message_19upo_91"
+        class="_message_1o4d9_86 _help-message_1o4d9_92"
         id="radix-_r_8_"
       >
         Currently, no overwrite is set. Url from well-known or config is used.
@@ -261,13 +261,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     MatrixRTC mode
   </h3>
   <form
-    class="_root_19upo_16"
+    class="_root_1o4d9_17"
   >
     <div
-      class="_inline-field_19upo_32"
+      class="_inline-field_1o4d9_33"
     >
       <div
-        class="_inline-field-control_19upo_44"
+        class="_inline-field-control_1o4d9_45"
       >
         <div
           class="_container_1ug7n_10"
@@ -288,16 +288,16 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         </div>
       </div>
       <div
-        class="_inline-field-body_19upo_38"
+        class="_inline-field-body_1o4d9_39"
       >
         <label
-          class="_label_19upo_59"
+          class="_label_1o4d9_60"
           for="radix-_r_9_"
         >
           Legacy: state events & oldest membership SFU
         </label>
         <span
-          class="_message_19upo_85 _help-message_19upo_91"
+          class="_message_1o4d9_86 _help-message_1o4d9_92"
           id="radix-_r_a_"
         >
           Compatible with old versions of EC that do not support multi SFU
@@ -305,10 +305,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="_inline-field_19upo_32"
+      class="_inline-field_1o4d9_33"
     >
       <div
-        class="_inline-field-control_19upo_44"
+        class="_inline-field-control_1o4d9_45"
       >
         <div
           class="_container_1ug7n_10"
@@ -328,16 +328,16 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         </div>
       </div>
       <div
-        class="_inline-field-body_19upo_38"
+        class="_inline-field-body_1o4d9_39"
       >
         <label
-          class="_label_19upo_59"
+          class="_label_1o4d9_60"
           for="radix-_r_b_"
         >
           Compatibility: state events & multi SFU
         </label>
         <span
-          class="_message_19upo_85 _help-message_19upo_91"
+          class="_message_1o4d9_86 _help-message_1o4d9_92"
           id="radix-_r_c_"
         >
           Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later)
@@ -345,10 +345,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="_inline-field_19upo_32"
+      class="_inline-field_1o4d9_33"
     >
       <div
-        class="_inline-field-control_19upo_44"
+        class="_inline-field-control_1o4d9_45"
       >
         <div
           class="_container_1ug7n_10"
@@ -368,16 +368,16 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         </div>
       </div>
       <div
-        class="_inline-field-body_19upo_38"
+        class="_inline-field-body_1o4d9_39"
       >
         <label
-          class="_label_19upo_59"
+          class="_label_1o4d9_60"
           for="radix-_r_d_"
         >
           Matrix 2.0: sticky events & multi SFU
         </label>
         <span
-          class="_message_19upo_85 _help-message_19upo_91"
+          class="_message_1o4d9_86 _help-message_1o4d9_92"
           id="radix-_r_e_"
         >
           Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later

src/utils/errors.ts

@@ -8,6 +8,8 @@ Please see LICENSE in the repository root for full details.
 import { t } from "i18next";
 import { type ConnectionError } from "livekit-client";
 
+import { i18nKey } from "./i18n";
+
 export enum ErrorCode {
   /**
    * Configuration problem due to no MatrixRTC backend/SFU is exposed via .well-known and no fallback configured.
@@ -268,9 +270,9 @@ export class PeerConnectionTimeoutError extends ElementCallError {
       ErrorCode.SFU_ERROR,
       ErrorCategory.NETWORK_CONNECTIVITY,
     );
-    // Mark translation key for i18n extraction
-    // t("error.peer_connection_timeout_description");
-    this.localisedMessageKey = "error.peer_connection_timeout_description";
+    this.localisedMessageKey = i18nKey(
+      "error.peer_connection_timeout_description",
+    );
     this.localisedMessageValues = {
       linkUrl:
         "https://docs.element.io/latest/element-server-suite-pro/configuring-components/configuring-matrix-rtc/#sfu-connectivity-troubleshooting",
@@ -285,9 +287,9 @@ export class LivekitConnectionError extends ElementCallError {
       ErrorCode.SFU_ERROR,
       ErrorCategory.NETWORK_CONNECTIVITY,
     );
-    // Mark translation key for i18n extraction
-    // t("error.livekit_connection_error_description");
-    this.localisedMessageKey = "error.livekit_connection_error_description";
+    this.localisedMessageKey = i18nKey(
+      "error.livekit_connection_error_description",
+    );
     this.localisedMessageValues = { reason: cause.reasonName };
   }
 }

src/utils/i18n.ts

@@ -0,0 +1,9 @@
+/*
+Copyright 2026 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+// Custom marker function to allow i18next extraction
+export const i18nKey = (key: string): string => key;