Merge remote-tracking branch 'origin/livekit' into hs/reactions-viewc…

…allmodel

.eslintrc.cjs

@@ -37,6 +37,12 @@ module.exports = {
     "@typescript-eslint/promise-function-async": "error",
     "@typescript-eslint/require-await": "error",
     "@typescript-eslint/await-thenable": "error",
+    // To help ensure that we get proper vite/rollup lazy loading (e.g. for matrix-js-sdk):
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      { fixStyle: "inline-type-imports" },
+    ],
+    // To encourage good usage of RxJS:
     "rxjs/no-exposed-subjects": "error",
   },
   settings: {

config/config_netlify_preview.json

@@ -17,5 +17,9 @@
   },
   "rageshake": {
     "submit_url": "https://element.io/bugreports/submit"
+  },
+  "sentry": {
+    "environment": "netlify-pr-preview",
+    "DSN": "https://[email protected]/41"
   }
 }

locales/en/app.json

@@ -70,6 +70,7 @@
   },
   "developer_mode": {
     "crypto_version": "Crypto version: {{version}}",
+    "debug_tile_layout_label": "Debug tile layout",
     "device_id": "Device ID: {{id}}",
     "duplicate_tiles_label": "Number of additional tile copies per participant",
     "hostname": "Hostname: {{hostname}}",
@@ -147,29 +148,26 @@
   "screenshare_button_label": "Share screen",
   "settings": {
     "audio_tab": {
-      "effect_volume_description": "Volume for sound effects such as: joining or leaving a call, and reactions.",
+      "effect_volume_description": "Adjust the volume at which reactions and hand raised effects play.",
       "effect_volume_label": "Sound effect volume"
     },
-    "developer_settings_label": "Developer Settings",
-    "developer_settings_label_description": "Expose developer settings in the settings window.",
     "developer_tab_title": "Developer",
     "feedback_tab_body": "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.",
     "feedback_tab_description_label": "Your feedback",
     "feedback_tab_h4": "Submit feedback",
     "feedback_tab_send_logs_label": "Include debug logs",
     "feedback_tab_thank_you": "Thanks, we received your feedback!",
     "feedback_tab_title": "Feedback",
-    "more_tab_title": "More",
     "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": {
+      "developer_mode_label": "Developer mode",
+      "developer_mode_label_description": "Enable developer mode and show developer settings tab.",
       "reactions_play_sound_description": "Play a sound effect when anyone sends a reaction into a call.",
       "reactions_play_sound_label": "Play reaction sounds",
       "reactions_show_description": "Show an animation when anyone sends a reaction.",
-      "reactions_show_label": "Show reactions",
-      "reactions_title": "Reactions"
+      "reactions_show_label": "Show reactions"
     },
-    "preferences_tab_body": "Here you can configure extra options for an improved experience",
-    "preferences_tab_h4": "Preferences",
+    "preferences_tab_body": "Here you can configure extra options for an improved experience.",
     "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",
     "speaker_device_selection_label": "Speaker"

package.json

@@ -27,13 +27,13 @@
     "@codecov/vite-plugin": "^1.3.0",
     "@fontsource/inconsolata": "^5.1.0",
     "@fontsource/inter": "^5.1.0",
-    "@formatjs/intl-durationformat": "^0.6.1",
+    "@formatjs/intl-durationformat": "^0.7.0",
     "@formatjs/intl-segmenter": "^11.7.3",
     "@livekit/components-core": "^0.11.0",
     "@livekit/components-react": "^2.0.0",
     "@opentelemetry/api": "^1.4.0",
     "@opentelemetry/core": "^1.25.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.55.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.56.0",
     "@opentelemetry/resources": "^1.25.1",
     "@opentelemetry/sdk-trace-base": "^1.25.1",
     "@opentelemetry/sdk-trace-web": "^1.9.1",
@@ -113,7 +113,7 @@
     "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
     "vaul": "^1.0.0",
-    "vite": "^5.0.0",
+    "vite": "^6.0.0",
     "vite-plugin-compression2": "^1.3.1",
     "vite-plugin-html-template": "^1.1.0",
     "vite-plugin-svgr": "^4.0.0",

src/@types/global.d.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import "matrix-js-sdk/src/@types/global";
 import type { DurationFormat as PolyfillDurationFormat } from "@formatjs/intl-durationformat";
-import { Controls } from "../controls";
+import { type Controls } from "../controls";
 
 declare global {
   interface Document {

src/@types/i18next.d.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import "i18next";
 // import all namespaces (for the default language, only)
-import app from "../../locales/en/app.json";
+import type app from "../../locales/en/app.json";
 
 declare module "i18next" {
   interface CustomTypeOptions {

src/@types/matrix-js-sdk.d.ts

@@ -6,8 +6,8 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  ElementCallReactionEventType,
-  ECallReactionEventContent,
+  type ElementCallReactionEventType,
+  type ECallReactionEventContent,
 } from "../reactions";
 
 // Extend Matrix JS SDK types via Typescript declaration merging to support unspecced event fields and types

src/App.tsx

@@ -5,15 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, Suspense, useEffect, useState } from "react";
+import { type FC, Suspense, useEffect, useState } from "react";
 import {
   BrowserRouter as Router,
   Switch,
   Route,
   useLocation,
 } from "react-router-dom";
 import * as Sentry from "@sentry/react";
-import { History } from "history";
+import { type History } from "history";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 

src/Avatar.test.tsx

@@ -7,8 +7,8 @@ Please see LICENSE in the repository root for full details.
 
 import { afterEach, expect, test, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { MatrixClient } from "matrix-js-sdk/src/client";
-import { FC, PropsWithChildren } from "react";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
+import { type FC, type PropsWithChildren } from "react";
 
 import { ClientContextProvider } from "./ClientContext";
 import { Avatar } from "./Avatar";

src/Avatar.tsx

@@ -5,9 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { useMemo, FC, CSSProperties, useState, useEffect } from "react";
+import {
+  useMemo,
+  type FC,
+  type CSSProperties,
+  useState,
+  useEffect,
+} from "react";
 import { Avatar as CompoundAvatar } from "@vector-im/compound-web";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 
 import { useClientState } from "./ClientContext";
 

src/ClientContext.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  FC,
+  type FC,
   useCallback,
   useEffect,
   useState,
@@ -18,7 +18,7 @@ import {
 import { useHistory } from "react-router-dom";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
-import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
+import { type ISyncStateData, type SyncState } from "matrix-js-sdk/src/sync";
 import { ClientEvent, type MatrixClient } from "matrix-js-sdk/src/client";
 
 import type { WidgetApi } from "matrix-widget-api";

src/DisconnectedBanner.tsx

@@ -6,11 +6,11 @@ Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import { FC, HTMLAttributes, ReactNode } from "react";
+import { type FC, type HTMLAttributes, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
 import styles from "./DisconnectedBanner.module.css";
-import { ValidClientState, useClientState } from "./ClientContext";
+import { type ValidClientState, useClientState } from "./ClientContext";
 
 interface Props extends HTMLAttributes<HTMLElement> {
   children?: ReactNode;

src/FullScreenView.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, ReactNode, useCallback, useEffect } from "react";
+import { type FC, type ReactNode, useCallback, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import classNames from "classnames";
 import { Trans, useTranslation } from "react-i18next";

src/Header.tsx

@@ -6,7 +6,12 @@ Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import { FC, HTMLAttributes, ReactNode, forwardRef } from "react";
+import {
+  type FC,
+  type HTMLAttributes,
+  type ReactNode,
+  forwardRef,
+} from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";

src/Modal.test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { expect, test } from "vitest";
 import { render } from "@testing-library/react";
-import { ReactNode, useState } from "react";
+import { type ReactNode, useState } from "react";
 import { afterEach } from "node:test";
 import userEvent from "@testing-library/user-event";
 

src/Modal.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, ReactNode, useCallback } from "react";
+import { type FC, type ReactNode, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Root as DialogRoot,

src/QrCode.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useEffect, useState } from "react";
+import { type FC, useEffect, useState } from "react";
 import { toDataURL } from "qrcode";
 import classNames from "classnames";
 import { t } from "i18next";

src/Slider.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback } from "react";
+import { type FC, useCallback } from "react";
 import { Root, Track, Range, Thumb } from "@radix-ui/react-slider";
 import classNames from "classnames";
 import { Tooltip } from "@vector-im/compound-web";

src/Toast.tsx

@@ -6,9 +6,9 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  ComponentType,
-  FC,
-  SVGAttributes,
+  type ComponentType,
+  type FC,
+  type SVGAttributes,
   useCallback,
   useEffect,
 } from "react";

src/UrlParams.test.ts

@@ -97,7 +97,102 @@ describe("UrlParams", () => {
     });
 
     it("respected in widget mode", () => {
-      expect(getUrlParams("?preload=true&widgetId=12345").preload).toBe(true);
+      expect(
+        getUrlParams(
+          "?preload=true&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).preload,
+      ).toBe(true);
+    });
+  });
+
+  describe("returnToLobby", () => {
+    it("is true in SPA mode", () => {
+      expect(getUrlParams("?returnToLobby=false").returnToLobby).toBe(true);
+    });
+
+    it("defaults to false in widget mode", () => {
+      expect(
+        getUrlParams("?widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo")
+          .returnToLobby,
+      ).toBe(false);
+    });
+
+    it("respected in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?returnToLobby=true&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).returnToLobby,
+      ).toBe(true);
+    });
+  });
+
+  describe("userId", () => {
+    it("is ignored in SPA mode", () => {
+      expect(getUrlParams("?userId=asd").userId).toBe(null);
+    });
+
+    it("is parsed in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?userId=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).userId,
+      ).toBe("asd");
+    });
+  });
+
+  describe("deviceId", () => {
+    it("is ignored in SPA mode", () => {
+      expect(getUrlParams("?deviceId=asd").deviceId).toBe(null);
+    });
+
+    it("is parsed in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?deviceId=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).deviceId,
+      ).toBe("asd");
+    });
+  });
+
+  describe("baseUrl", () => {
+    it("is ignored in SPA mode", () => {
+      expect(getUrlParams("?baseUrl=asd").baseUrl).toBe(null);
+    });
+
+    it("is parsed in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?baseUrl=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).baseUrl,
+      ).toBe("asd");
+    });
+  });
+
+  describe("viaServers", () => {
+    it("is ignored in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?viaServers=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).viaServers,
+      ).toBe(null);
+    });
+
+    it("is parsed in SPA mode", () => {
+      expect(getUrlParams("?viaServers=asd").viaServers).toBe("asd");
+    });
+  });
+
+  describe("homeserver", () => {
+    it("is ignored in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?homeserver=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).homeserver,
+      ).toBe(null);
+    });
+
+    it("is parsed in SPA mode", () => {
+      expect(getUrlParams("?homeserver=asd").homeserver).toBe("asd");
     });
   });
 });