Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-08-17 20:39:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/livekit' into livekit

Browse Source
This commit is contained in:
Ryan Emmick
2026-08-05 11:55:38 -05:00
parent 9ef3499418 eb65a28a75
commit f7cf674152
158 changed files with 7301 additions and 8286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
.eslintrc.cjs
View File

@@ -1,116 +0,0 @@
const COPYRIGHT_HEADER = `/*
Copyright %%CURRENT_YEAR%% New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/
`;
module.exports = {
plugins: ["matrix-org", "rxjs", "jsdoc"],
extends: [
"plugin:matrix-org/react",
"plugin:matrix-org/a11y",
"plugin:matrix-org/typescript",
"prettier",
"plugin:rxjs/recommended",
"plugin:storybook/recommended",
],
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
project: ["./tsconfig.json"],
},
env: {
browser: true,
node: true,
},
rules: {
"jsdoc/no-types": "error",
"jsdoc/empty-tags": "error",
"jsdoc/check-property-names": "error",
"jsdoc/check-values": "error",
"jsdoc/check-param-names": "warn",
// "jsdoc/require-param": "warn",
"jsdoc/require-param-description": "warn",
"matrix-org/require-copyright-header": ["error", COPYRIGHT_HEADER],
"jsx-a11y/media-has-caption": "off",
"react/display-name": "error",
// Encourage proper usage of Promises:
"@typescript-eslint/no-floating-promises": "error",
"@typescript-eslint/no-misused-promises": "error",
"@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",
"rxjs/finnish": ["error", { names: { "^this$": false } }],
"no-restricted-imports": [
"error",
{
paths: ["matrix-widget-api", "matrix-js-sdk"].flatMap((lib) =>
["src", "src/", "src/index", "lib", "lib/", "lib/index"]
.map((path) => `${lib}/${path}`)
.map((name) => ({ name, message: `Please use ${lib} instead` })),
),
patterns: [
...["matrix-widget-api"].map((lib) => ({
group: ["src", "src/", "src/**", "lib", "lib/", "lib/**"].map(
(path) => `${lib}/${path}`,
),
message: `Please use ${lib} instead`,
})),
// XXX: We use /lib in lots of places, so allow for now.
...["matrix-js-sdk"].map((lib) => ({
group: ["src", "src/", "src/**"].map((path) => `${lib}/${path}`),
message: `Please use ${lib} instead`,
})),
],
},
],
},
overrides: [
{
files: ["src/*/**"],
rules: {
// In application code we should use the js-sdk logger, never console directly.
"no-console": ["error"],
},
},
{
files: [
"**/*.test.ts",
"**/*.test.tsx",
"**/test.ts",
"**/test.tsx",
"**/test-**",
],
rules: {
"jsdoc/no-types": "off",
"jsdoc/empty-tags": "off",
"jsdoc/check-property-names": "off",
"jsdoc/check-values": "off",
"jsdoc/check-param-names": "off",
"jsdoc/require-param-description": "off",
},
},
{
files: ["playwright/**"],
rules: {
// Playwright as a `use` function that has nothing to do with React hooks.
"react-hooks/rules-of-hooks": "off",
},
},
],
settings: {
react: {
version: "detect",
},
},
};

253
.github/labels.yml vendored Normal file
View File

@@ -0,0 +1,253 @@
- name: "A-1:1"
description: "Calls between two people"
color: "bfd4f2"
- name: "A-Big-Grid"
description: "The freedom layout system used for >12 participants"
color: "bfd4f2"
- name: "A-Developer-Experience"
description: "Workflow of developing: building, linting, debugging, profiling, etc."
color: "c5def5"
- name: "A-E2EE"
description: "End-to-end encryption"
color: "bfd4f2"
- name: "A-Embedded"
description: "Using the app embedded within other Matrix clients (as a widget)"
color: "bfd4f2"
- name: "A-Feedback-Reporting"
description: "Reporting process for bugs, debug logs (rageshakes), suggestions"
color: "bfd4f2"
- name: "A-Freedom"
description: "Freedom layout, where participants can be rearranged and resized"
color: "bfd4f2"
- name: "A-Handset"
description: "Audio playback through the earpiece of a phone. Also known as 'earpiece mode' or 'handset mode'."
color: "bfd4f2"
- name: "A-Huddle"
description: "Ad-hoc calls in a room notifying others"
color: "bfd4f2"
- name: "A-Lobby"
description: "The page before joining a call"
color: "bfd4f2"
- name: "A-Login"
color: "bfd4f2"
- name: "A-Matrix2.0"
description: "Issues relating to the Matrix 2.0 / MSC4143 work, such as sticky events and multi-sfu"
color: "bfd4f2"
- name: "A-Media-Devices"
color: "BFD4F2"
- name: "A-Media-Quality"
description: "Distortions or glitches in audio/video"
color: "bfd4f2"
- name: "A-Meeting"
description: "Scheduled call on the calendar"
color: "bfd4f2"
- name: "A-Mobile"
description: "Using the app on a mobile device"
color: "bfd4f2"
- name: "A-Moderation"
description: "Access to calls and powers within calls"
color: "bfd4f2"
- name: "A-Performance"
color: "bfd4f2"
- name: "A-Reactions"
color: "bfd4f2"
- name: "A-Registration"
color: "bfd4f2"
- name: "A-Screen-Sharing"
color: "bfd4f2"
- name: "A-SDK"
description: "SDK for building MatrixRTC + LiveKit widgets"
color: "c5def5"
- name: "A-Settings"
color: "bfd4f2"
- name: "A-SFU"
description: "Routing calls through a selective forwarding unit"
color: "bfd4f2"
- name: "A-Signaling"
description: "Call signaling"
color: "bfd4f2"
- name: "A-Simulcast"
description: "Automatic selection of variable video resolutions"
color: "bfd4f2"
- name: "A-SPA"
description: "Standalone application accessed via call links"
color: "bfd4f2"
- name: "A-Spatial-Audio"
description: "Directional audio based on where a speaker appears on screen"
color: "bfd4f2"
- name: "A-Speech-Enhancement"
description: "Techniques to enhance the intelligibility of speech in calls"
color: "c5def5"
- name: "A-Split-Grid"
description: "The freedom layout system used for ≤12 participants"
color: "bfd4f2"
- name: "A-Spotlight"
description: "Spotlight layout, where the active speaker is foregrounded"
color: "bfd4f2"
- name: "A-Telemetry-Posthog"
description: "Share opt in usage data for optimizing the app via posthog"
color: "bfd4f2"
- name: "A-Testing"
description: "Integration tests, unit tests, etc."
color: "bfd4f2"
- name: "A-Video-Rooms"
description: "Rooms reserved exclusively for calling"
color: "bfd4f2"
- name: "A-Walkie-Talkie"
description: "Walkie-talkie / PTT (push-to-talk) mode"
color: "bfd4f2"
- name: "A11y"
description: "Accessibility"
color: "4ADEC0"
- name: "backport-candidate"
description: "Something that is a candidate for backport to a particular release branch"
color: "0B8D85"
- name: "customer-retainer"
color: "F44A5F"
- name: "dependencies"
description: "Pull requests that update a dependency file"
color: "0366d6"
- name: "development build"
description: "runs yarn build process in development mode"
color: "1d76db"
- name: "Discord"
description: "Use case familiar to Discord users"
color: "3670d2"
- name: "docker build"
description: "Creates a docker image for this PR"
color: "0e8a16"
- name: "EPIC"
color: "5319E7"
- name: "good first issue"
description: "Good for newcomers"
color: "7057ff"
- name: "Help Wanted"
description: "Community contributions are welcome!"
color: "159818"
- name: "I18n"
description: "Internationalisation"
color: "d4c5f9"
- name: "O-Frequent"
description: "Affects or can be seen by most users regularly or impacts most users' first experience"
color: "0052CC"
- name: "O-Occasional"
description: "Affects or can be seen by some users regularly or most users rarely"
color: "1D76DB"
- name: "O-Uncommon"
description: "Most users are unlikely to come across this or unexpected workflow"
color: "C5DEF5"
- name: "p1"
description: "Must fix/implement before this is usable as a product"
color: "D93F0B"
- name: "p2"
description: "Should fix/implement, but not at the expense of p1s"
color: "FBCA04"
- name: "p3"
description: "Could fix/implement when time allows"
color: "0E8A16"
- name: "PR-Breaking-Change"
description: "A Pull request that changes EC in a way that is incompatible to the previous version."
color: "D93F0B"
- name: "PR-Bug-Fix"
description: "Release note category. A PR that fixes a bug."
color: "C2E0C6"
- name: "PR-Developer-Experience"
description: "Release note category. A PR that does not change EC but improves working with the repository."
color: "C2E0C6"
- name: "PR-Documentation"
description: "Release note category. A PR that improves the documentation."
color: "C2E0C6"
- name: "PR-Feature"
description: "Release note category. A PR that introduces a new user facing feature."
color: "C2E0C6"
- name: "PR-Improvement"
description: "Release note category. A PR that improves EC's performance or stability."
color: "C2E0C6"
- name: "PR-Task"
description: "Release note category. A PR that is hidden from release note."
color: "C2E0C6"
- name: "Privacy"
color: "f41192"
- name: "Roadmap"
color: "57457E"
- name: "S-Critical"
description: "Prevents work, causes data loss and/or has no workaround"
color: "bd0026"
- name: "S-Major"
description: "Severely degrades major functionality or product features, with no satisfactory workaround"
color: "fc4e2a"
- name: "S-Minor"
description: "Impairs non-critical functionality or suitable workarounds exist"
color: "feb24c"
- name: "S-Tolerable"
description: "Low/no impact on users"
color: "ffeda0"
- name: "Security"
color: "b3e5fc"
- name: "storybook build"
description: "Build and deploy the storybook frontend to netlify."
color: "45cd61"
- name: "T-Defect"
description: "Something isn't working: bugs, crashes, hangs, vulnerabilities, or other reported problems"
color: "98e6ae"
- name: "T-Enhancement"
description: "New features, changes in functionality, performance boosts, user-facing improvements"
color: "98e6ae"
- name: "T-Other"
description: "Questions, user support, anything else"
color: "98e6ae"
- name: "T-Task"
description: "Refactoring, enabling or disabling functionality, other engineering tasks"
color: "98e6ae"
- name: "X-Blocked"
description: "Cannot be merged due to external dependencies"
color: "ff7979"
- name: "X-Cannot-Reproduce"
description: "Needs reproduction steps"
color: "ff7979"
- name: "X-Needs-Design"
description: "May require input from the design team"
color: "ff7979"
- name: "X-Needs-Info"
description: "This issue is blocked awaiting information from the reporter"
color: "ff7979"
- name: "X-Needs-Investigation"
color: "ff7979"
- name: "X-Needs-Product"
description: "More input needed from the Product team"
color: "ff7979"
- name: "X-Regression"
color: "ff7979"
- name: "X-Release-Blocker"
color: "ff7979"
- name: "X-Spec-Changes"
description: "May require spec changes"
color: "ff7979"
- name: "X-Won't-Fix"
description: "This will not be worked on"
color: "ff7979"
- name: "Z-Community-Testing"
description: "Issues found during the community testing sessions"
color: "efefef"
- name: "Z-Could"
color: "ededed"
- name: "Z-Design"
color: "ededed"
- name: "Z-Flaky-Test"
color: "aaaaaa"
- name: "Z-Media-Failure"
description: "Someone's audio or video isn't coming through"
color: "ededed"
- name: "Z-Must"
color: "ededed"
- name: "Z-Platform-Specific"
color: "ededed"
- name: "Z-Power-Users"
color: "ededed"
- name: "Z-ProductPolish"
color: "aaaaaa"
- name: "Z-Should"
color: "ededed"
- name: "Z-Splitbrain"
description: "Someone who should be on the call isn't showing up"
color: "ededed"

10
.github/workflows/lint.yaml vendored
View File

@@ -2,7 +2,7 @@ name: Lint, format & type check
on:
pull_request: {}
jobs:
prettier:
lint:
name: Lint, format & type check
runs-on: ubuntu-latest
steps:
@@ -20,12 +20,12 @@ jobs:
- name: Install dependencies
# ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
- name: Prettier
run: "pnpm run prettier:check"
- name: Formatting
run: "pnpm run format:check"
- name: i18n
run: "pnpm run i18n:check"
- name: ESLint
run: "pnpm run lint:eslint"
- name: Lint
run: "pnpm run lint:oxlint"
- name: Type check
run: "pnpm run lint:types"
- name: Dead code analysis

23
.github/workflows/sync-labels.yml vendored Normal file
View File

@@ -0,0 +1,23 @@
name: Sync labels
on:
workflow_dispatch: {}
push:
branches:
- livekit
paths:
- .github/labels.yml
- .github/workflows/sync-labels.yml
permissions: {} # We use ELEMENT_BOT_TOKEN instead
jobs:
sync-labels:
uses: element-hq/element-meta/.github/workflows/sync-labels.yml@7f2f93fb9b52ece7a0998f60e64862aa203c1746
with:
LABELS: |
.github/labels.yml
DELETE: true
WET: true
secrets:
ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

34
.github/workflows/test.yaml vendored
View File

@@ -7,10 +7,6 @@ jobs:
vitest:
name: Run unit tests
runs-on: ubuntu-latest
container:
# Make sure to grab the latest version of the Playwright image
# https://playwright.dev/docs/docker#pull-the-image
image: mcr.microsoft.com/playwright:v1.60.0-noble
steps:
- name: Checkout code
uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
@@ -26,6 +22,18 @@ jobs:
- name: Install dependencies
# ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
- name: Get Playwright version
run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
- name: Cache Playwright binaries
uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6
id: playwright-cache
with:
path: |
~/.cache/ms-playwright
key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
- name: Install Playwright binaries
if: steps.playwright-cache.outputs.cache-hit != 'true'
run: pnpm playwright install --with-deps
- name: Vitest
run: "pnpm run test:coverage"
- name: Upload to codecov
@@ -52,12 +60,22 @@ jobs:
- name: Install dependencies
# ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
run: pnpm install --frozen-lockfile --ignore-pnpmfile
- name: Install Playwright Browsers
run: pnpm exec playwright install --with-deps
- name: Get Playwright version
run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
- name: Cache Playwright binaries
uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6
id: playwright-cache
with:
path: |
~/.cache/ms-playwright
key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
- name: Install Playwright binaries
if: steps.playwright-cache.outputs.cache-hit != 'true'
run: pnpm playwright install --with-deps
- name: Run backend components
run: |
docker compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml pull
docker compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml up -d
docker compose -f docker-compose-dev.yml -f docker-compose-playwright.yml pull
docker compose -f docker-compose-dev.yml -f docker-compose-playwright.yml up -d
docker ps
- name: Run Playwright tests
env:

11
.github/workflows/translations-download.yaml vendored
View File

@@ -40,8 +40,13 @@ jobs:
- name: Fix the owner of the downloaded files
run: "sudo chown runner:docker -R locales"
- name: Prettier
run: pnpm prettier:format
# Localazy doesn't write file contents in the same order that i18next-cli's
# extractor uses. We re-run the extractor after downloading to fix the order.
- name: i18n
run: pnpm i18n
- name: Formatting
run: pnpm format
- name: Create Pull Request
id: cpr
@@ -53,7 +58,7 @@ jobs:
title: Localazy Download
commit-message: Translations updates
labels: |
T-Task
PR-Task
- name: Enable automerge
run: gh pr merge --merge --auto "$PR_NUMBER"

4
.github/workflows/zizmor.yml vendored
View File

@@ -15,9 +15,9 @@ jobs:
security-events: write # Required for upload-sarif (used by zizmor-action) to upload SARIF files.
steps:
- name: Checkout repository
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
with:
persist-credentials: false
- name: Run zizmor 🌈
uses: zizmorcore/zizmor-action@b1d7e1fb5de872772f31590499237e7cce841e8e # v0.5.3
uses: zizmorcore/zizmor-action@192e21d79ab29983730a13d1382995c2307fbcaa # v0.5.7

6
.oxfmtrc.json Normal file
View File

@@ -0,0 +1,6 @@
{
"$schema": "./node_modules/oxfmt/configuration_schema.json",
"printWidth": 80,
"sortPackageJson": false,
"ignorePatterns": ["pnpm-lock.yaml", "node_modules", "dist"]
}

154
.oxlintrc.json Normal file
View File

@@ -0,0 +1,154 @@
{
"$schema": "./node_modules/oxlint/configuration_schema.json",
"plugins": [
"eslint",
"import",
"jsdoc",
"jsx-a11y",
"promise",
"react",
"typescript",
"unicorn",
"vitest"
],
"jsPlugins": [
"eslint-plugin-storybook",
"eslint-plugin-element-call"
// TODO: Re-enable once oxlint supports lint rules that rely on TypeScript type-awareness.
// "eslint-plugin-rxjs"
],
"categories": {
"correctness": "error",
"perf": "error"
},
"options": {
"denyWarnings": true,
"typeAware": true
},
"env": {
"builtin": true
},
"rules": {
"element-call/copyright-header": [
"error",
"/*\nCopyright %%CURRENT_YEAR%% Element Creations Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE in the repository root for full details.\n*/\n\n"
],
"element-call/no-observablescope-leak": "error",
"element-call/no-top-level-logger-get-child": "error",
"jsdoc/empty-tags": "error",
"jsdoc/check-property-names": "error",
"jsdoc/require-param-description": "warn",
"react/display-name": "error",
// TODO: Re-enable once oxlint supports lint rules that rely on TypeScript type-awareness.
// "rxjs/no-exposed-subjects": "error",
// "rxjs/finnish": [
// "error",
// {
// "names": {
// "^this$": false
// }
// }
// ],
"no-restricted-imports": [
"error",
{
"patterns": [
{
"group": [
"matrix-widget-api/src",
"matrix-widget-api/src/",
"matrix-widget-api/src/**",
"matrix-widget-api/lib",
"matrix-widget-api/lib/",
"matrix-widget-api/lib/**"
],
"message": "Please use matrix-widget-api instead"
},
{
"group": [
"matrix-js-sdk/src",
"matrix-js-sdk/src/",
"matrix-js-sdk/src/**",
"matrix-js-sdk/lib",
"matrix-js-sdk/lib/",
"matrix-js-sdk/lib/index"
],
"message": "Please use matrix-js-sdk instead"
}
]
}
],
"typescript/no-floating-promises": "error",
"typescript/no-misused-promises": "error",
"typescript/promise-function-async": "error",
"typescript/require-await": "error",
"typescript/await-thenable": "error",
// To help ensure that we get proper vite/rollup lazy loading (e.g. for matrix-js-sdk).
"typescript/consistent-type-imports": [
"error",
{
"fixStyle": "inline-type-imports"
}
],
// TODO: These had to be disabled in the eslint -> oxlint migration. Would be nice to
// enable them in future or at least document why we're disabling them.
"eslint/no-await-in-loop": "off",
"eslint/no-unused-vars": ["error", { "args": "none" }],
"import/default": "off",
"jsdoc/check-tag-names": "off",
"jsx-a11y/prefer-tag-over-role": "off",
"promise/no-callback-in-promise": "off",
"react/jsx-key": "off",
"react/jsx-no-constructed-context-values": "off",
"react/no-array-index-key": "off",
"react/no-children-prop": "off",
"react/no-object-type-as-default-prop": "off",
"typescript/no-misused-spread": "off",
"typescript/no-useless-default-assignment": "off",
"typescript/restrict-template-expressions": "off",
"typescript/unbound-method": "off",
"vitest/expect-expect": "off",
"vitest/no-conditional-expect": "off",
"vitest/no-disabled-tests": "off",
"vitest/require-mock-type-parameters": "off",
"vitest/require-to-throw-message": "off"
},
"overrides": [
{
"files": ["src/*/**"],
"rules": {
// In application code we should use the js-sdk logger, never console directly.
"no-console": "error"
}
},
{
"files": [
"**/*.test.ts",
"**/*.test.tsx",
"**/test.ts",
"**/test.tsx",
"**/test-**"
],
"rules": {
// Tests often initialize an ObservableScope in an outer scope in
// beforeEach, which is not actually a problem
"element-call/no-observablescope-leak": "off",
"jsdoc/empty-tags": "off",
"jsdoc/check-property-names": "off",
"jsdoc/require-param-description": "off",
"jsx-a11y/media-has-caption": "off"
// TODO: Enable once oxlint supports them.
// "jsdoc/check-values": "off",
// "jsdoc/check-param-names": "off",
// "jsdoc/no-types": "off",
}
},
{
"files": ["playwright/**"],
"rules": {
// Playwright as a `use` function that has nothing to do with React hooks.
"react-hooks/rules-of-hooks": "off"
}
}
]
}

3
.prettierignore
View File

@@ -1,3 +0,0 @@
pnpm-lock.yaml
node_modules
dist

1
.prettierrc.json
View File

@@ -1 +0,0 @@
{}

14
README.md
View File

@@ -212,7 +212,7 @@ See also:
### Backend
A docker compose file `dev-backend-docker-compose.yml` is provided to start the
A docker compose file `docker-compose-dev.yml` is provided to start the
whole stack of components which is required for a local development environment
including federation:
@@ -239,7 +239,7 @@ the backend components:
```sh
pnpm backend
# or for podman-compose:
# podman-compose -f dev-backend-docker-compose.yml up
# podman-compose -f docker-compose-dev.yml up
```
> [!NOTE]
@@ -359,6 +359,16 @@ Usage and other technical details about the project can be found here:
[**Docs**](./docs/README.md)
## GitHub Labels
GitHub labels in this repository are maintained in the [`labels.yml`](.github/labels.yml) file and
automatically synced to GitHub using the [`sync-labels` workflow](.github/workflows/sync-labels.yml).
We do this so that we can reuse the labels between repositories.
> [!WARNING]
> Do not manually edit labels in the GitHub UI. Any manual changes will be overridden by the
> workflow on its next invocation.
## 📝 Copyright & License
Copyright 2021-2025 New Vector Ltd

20
babel.config.cjs
View File

@@ -1,20 +0,0 @@
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
node: "current",
},
},
],
[
"@babel/preset-react",
{
runtime: "automatic",
},
],
"@babel/preset-typescript",
],
plugins: ["babel-plugin-transform-vite-meta-env"],
};

2
config/config.sample.json
View File

@@ -12,7 +12,7 @@
"feature_use_device_session_member_events": true
},
"ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
"matrix_rtc_mode": "legacy",
"matrix_rtc_mode": "compatibility",
"matrix_rtc_session": {
"wait_for_key_rotation_ms": 3000,
"membership_event_expiry_ms": 180000000,

6
dev-backend-docker-compose.yml → docker-compose-dev.yml
View File

@@ -47,7 +47,7 @@ services:
- ecbackend
livekit:
image: livekit/livekit-server:v1.10.1
image: livekit/livekit-server:v1.13.4
pull_policy: always
hostname: livekit-sfu
command: --dev --config /etc/livekit.yaml
@@ -70,7 +70,7 @@ services:
- ecbackend
livekit-1:
image: livekit/livekit-server:v1.10.1
image: livekit/livekit-server:v1.13.4
pull_policy: always
hostname: livekit-sfu-1
command: --dev --config /etc/livekit.yaml
@@ -156,7 +156,7 @@ services:
nginx:
# see backend/dev_tls_setup for how to generate the tls certs
hostname: synapse.m.localhost
image: nginx:latest
image: nginx:latest@sha256:4ae259ae64fbedb67918c07d167fdcb0e05855a1615480ca445bea485e7d65ff
pull_policy: always
volumes:
- ./backend/dev_nginx.conf:/etc/nginx/conf.d/default.conf:Z

19
docker-compose-playwright.yml Normal file
View File

@@ -0,0 +1,19 @@
# This file contains overrides to docker-compose-dev.yml and should
# only be used in combination with that file.
services:
synapse:
# Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
image: ghcr.io/element-hq/synapse:latest@sha256:da325af40104051923899e5f5a2f1d537e6e3ccf2f0f38285689ae9bbfdb190a
volumes:
- ./backend/playwright_homeserver.yaml:/data/cfg/homeserver.yaml:Z
synapse-1:
# Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
image: ghcr.io/element-hq/synapse:latest@sha256:da325af40104051923899e5f5a2f1d537e6e3ccf2f0f38285689ae9bbfdb190a
volumes:
- ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
element-web:
# Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
image: ghcr.io/element-hq/element-web:develop@sha256:b4e2d2d0919f26362755d4df29dbc7a55075880fdef329f53a7937241712c526
element-web-1:
# Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
image: ghcr.io/element-hq/element-web:develop@sha256:b4e2d2d0919f26362755d4df29dbc7a55075880fdef329f53a7937241712c526

3
docs/controls.md
View File

@@ -7,6 +7,9 @@ A few aspects of Element Call's interface can be controlled through a global API
- `controls.canEnterPip(): boolean` Determines whether it's possible to enter picture-in-picture mode.
- `controls.enablePip(): void` Puts the call interface into picture-in-picture mode. Throws if not in a call.
- `controls.disablePip(): void` Takes the call interface out of picture-in-picture mode, restoring it to its natural display mode. Throws if not in a call.
- `controls.onPipMediaOrientationUpdate: ((orientation: "landscape"|"portrait") => void) | undefined` Callback called whenever the PiP media orientation changes.
The client should track this value to already initiate the pip in the right orientation.
It should update the orientation of the current Pip window when called.
## Audio devices

7
docs/self_hosting.md
View File

@@ -86,10 +86,11 @@ to implement
In the context of MatrixRTC, we suggest using a single hostname for backend
communication by implementing endpoint routing within a reverse proxy setup. For
the example above, this results in:
| Service | Endpoint | Example |
| -------- | ------- | ------- |
| Service | Endpoint | Example |
| --------------------------------------------------------------------------------- | -------------- | ------------------------------------ |
| [Livekit SFU](https://github.com/livekit/livekit) WebSocket signalling connection | `/livekit/sfu` | `matrix-rtc.example.com/livekit/sfu` |
| [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service) | `/livekit/jwt` | `matrix-rtc.example.com/livekit/jwt` |
| [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service) | `/livekit/jwt` | `matrix-rtc.example.com/livekit/jwt` |
Using Nginx, you can achieve this by:

3
docs/url_params.md
View File

@@ -67,9 +67,10 @@ These parameters are relevant to both [widget](./embedded_standalone.md) and [st
| `showControls` | `true` or `false` | No, defaults to `true` | No, defaults to `true` | Displays controls like mute, screen-share, invite, and hangup buttons during a call. |
| `skipLobby` (deprecated: use `intent` instead) | `true` or `false` | No. If `intent` is explicitly `start_call` then defaults to `true`. Otherwise defaults to `false` | No, defaults to `false` | Skips the lobby to join a call directly, can be combined with preload in widget. When `true` the audio and video inputs will be muted by default. (This means there currently is no way to start without muted video if one wants to skip the lobby. Also not in widget mode.) |
| `theme` | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast` | No, defaults to `dark` | No, defaults to `dark` | UI theme to use. |
| `background` | One of: `solid`, `gradient` | No, defaults to `gradient` | No, defaults to `gradient` | Visual style of the page background. |
| `viaServers` | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name) | Not applicable | No | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver. |
| `sendNotificationType` | `ring` or `notification` | No | No | Will send a "ring" or "notification" `m.rtc.notification` event if the user is the first one in the call. |
| `autoLeaveWhenOthersLeft` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Whether the app should automatically leave the call when there is no one left in the call. |
| `autoLeave` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Whether the app should automatically leave the call when there is no one left in the call. |
| `waitForCallPickup` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | When sending a notification, show UI that the app is awaiting an answer, play a dial tone, and (in widget mode) auto-close the widget once the notification expires. |
### Widget-only parameters

2
embedded/android/gradle/libs.versions.toml
View File

@@ -9,4 +9,4 @@ android_gradle_plugin = { module = "com.android.tools.build:gradle", version.ref
[plugins]
android_library = { id = "com.android.library", version.ref = "android_gradle_plugin" }
maven_publish = { id = "com.vanniktech.maven.publish", version = "0.36.0" }
maven_publish = { id = "com.vanniktech.maven.publish", version = "0.36.0" }

66
eslint/CopyrightHeader.js Normal file
View File

@@ -0,0 +1,66 @@
/*
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.
*/
import { ESLintUtils } from "@typescript-eslint/utils";
const rule = ESLintUtils.RuleCreator(
() => "https://github.com/element-hq/element-call",
)({
name: "copyright-header",
meta: {
type: "problem",
fixable: "code",
docs: {
description: "Require a copyright header in files.",
},
messages: {
noHeader: "Copyright header is required.",
},
schema: [{ type: "string" }],
},
create(context) {
const code = context.getSourceCode();
return {
Program(node) {
const firstToken = code.getFirstToken(node, { includeComments: false });
if (!firstToken) {
return;
}
const headComments = code.getCommentsBefore(firstToken);
const hasSomeCopyrightHeader = headComments?.some((comment) =>
comment?.value?.includes("Copyright"),
);
if (hasSomeCopyrightHeader) {
return;
}
const headerTemplate = context.options[0];
const fix = headerTemplate
? function (fixer) {
return fixer.insertTextBefore(
firstToken,
headerTemplate.replace(
/%%CURRENT_YEAR%%/g,
new Date().getFullYear(),
),
);
}
: undefined;
context.report({
messageId: "noHeader",
node,
fix,
});
},
};
},
});
export default rule;

78
eslint/NoObservableScopeLeak.js Normal file
View File

@@ -0,0 +1,78 @@
/*
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.
*/
import { ESLintUtils } from "@typescript-eslint/utils";
// These ObservableScope methods will not generally cause resource leaks even if
// called from a callback
const safeScopeMethods = new Set(["bind", "end"]);
/**
* Determines whether the variable with the given name is local to
* the enclosing function or class scope.
*/
function isLocal(name, scope) {
// If it is nowhere to be found in the "through" scope, it is local.
if (!scope.through.some(({ identifier }) => identifier.name === name))
return true;
if (scope.type === "function" || scope.type === "class") return false;
// If this is something other than a function or class scope, check its outer
// scope.
return !scope.upper || isLocal(name, scope.upper);
}
const rule = ESLintUtils.RuleCreator(
() => "https://github.com/element-hq/element-call",
)({
name: "no-observablescope-leak",
meta: {
type: "problem",
docs: {
description:
"Require referenced ObservableScopes to be defined in the very same scope to avoid resource leaks.",
},
messages: {
scopeLeak:
"Do not reference ObservableScopes defined in an outer scope; this may create resource leaks.",
},
schema: [],
},
create(context) {
return {
Identifier(node) {
const scope = context.sourceCode.getScope(node);
if (
// Is this a reference to a variable defined in an outer scope?
!isLocal(node.name, scope) &&
// Exclude calls to "safe" ObservableScope methods
node.parent?.type === "MemberExpression" &&
node.parent.object === node &&
node.parent.property.type === "Identifier" &&
!safeScopeMethods.has(node.parent.property.name) &&
/(^s|S)cope$/.test(node.name)
) {
// TODO: Once oxlint supports lint rules that rely on TypeScript type-awareness,
// Verify that the variable is actually of type ObservableScope rather than just
// checking its name. This is expensive so we should do this last.
//
// const services = ESLintUtils.getParserServices(context);
// const type = services.getTypeAtLocation(node);
// if (type.symbol?.name === "ObservableScope") { ... }
// This ObservableScope method call may be causing resource leaks.
context.report({
messageId: "scopeLeak",
loc: node.loc,
node,
});
}
},
};
},
});
export default rule;

92
eslint/NoTopLevelLoggerGetChild.js Normal file
View File

@@ -0,0 +1,92 @@
/*
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.
*/
import { ESLintUtils } from "@typescript-eslint/utils";
/**
* Node types that introduce a new non-module scope. A getChild() call nested
* inside any of these is considered "not at the top level".
*/
const FUNCTION_OR_CLASS_TYPES = new Set([
"FunctionDeclaration",
"FunctionExpression",
"ArrowFunctionExpression",
"ClassBody",
]);
const rule = ESLintUtils.RuleCreator(
() => "https://github.com/element-hq/element-call",
)({
name: "no-top-level-logger-get-child",
meta: {
type: "problem",
docs: {
description:
"Disallow calling logger.getChild() at the top level of a module." +
"`getChild` has to be called after the rageshake logger `init()`." +
"If it is called at the top level the child logger will never be setup for rageshakes.",
},
messages: {
noTopLevelGetChild:
"Do not call logger.getChild() at the top level of a module; move it inside a function or class instead that gets called after rageshake logger `init()` is called.",
},
schema: [],
},
create(context) {
// Tracks the local binding names that refer to the logger imported from
// 'matrix-js-sdk/lib/logger', e.g. both `logger` and `rootLogger` in:
// import { logger } from "matrix-js-sdk/lib/logger";
// import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
const loggerNames = new Set();
return {
ImportDeclaration(node) {
if (node.source.value !== "matrix-js-sdk/lib/logger") return;
for (const specifier of node.specifiers) {
if (
specifier.type === "ImportSpecifier" &&
specifier.imported.name === "logger"
) {
loggerNames.add(specifier.local.name);
}
}
},
CallExpression(node) {
// Must be a non-computed member expression call: something.getChild(...)
if (
node.callee.type !== "MemberExpression" ||
node.callee.computed ||
node.callee.property.type !== "Identifier" ||
node.callee.property.name !== "getChild"
)
return;
// The receiver must be one of the tracked logger names.
const object = node.callee.object;
if (object.type !== "Identifier" || !loggerNames.has(object.name))
return;
// Flag the call only when it is at module top level — i.e. there is no
// enclosing function or class body anywhere in the ancestor chain.
const ancestors = context.sourceCode.getAncestors(node);
const isTopLevel = !ancestors.some((a) =>
FUNCTION_OR_CLASS_TYPES.has(a.type),
);
if (isTopLevel) {
context.report({
messageId: "noTopLevelGetChild",
node,
});
}
},
};
},
});
export default rule;

8
eslint/index.js Normal file
View File

@@ -0,0 +1,8 @@
module.exports = {
rules: {
"copyright-header": require("./CopyrightHeader").default,
"no-observablescope-leak": require("./NoObservableScopeLeak").default,
"no-top-level-logger-get-child": require("./NoTopLevelLoggerGetChild")
.default,
},
};

4
eslint/package.json Normal file
View File

@@ -0,0 +1,4 @@
{
"name": "eslint-plugin-element-call",
"version": "0.0.0"
}

14
knip.ts
View File

@@ -11,14 +11,21 @@ export default {
vite: {
config: ["vite.config.ts", "vite-embedded.config.ts", "vite-sdk.config.ts"],
},
entry: ["src/main.tsx", "i18next.config.ts"],
entry: ["src/main.tsx", "eslint/index.js", "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:
// https://docs.docker.com/compose/migrate/
"docker-compose",
// This is a shell built-in.
"printf",
],
ignoreFiles: [
"scripts/.pnpmfile.cjs",
// Deliberately added prior to any component or business logic
// implementation
"src/state/ServiceInterruptionsViewModel.ts",
],
ignoreFiles: ["scripts/.pnpmfile.cjs"],
ignoreDependencies: [
// Used in CSS
"normalize.css",
@@ -30,6 +37,9 @@ export default {
// https://github.com/webpro-nl/knip/issues/766
"@vector-im/compound-web",
"matrix-widget-api",
// Used by oxlint
"eslint-plugin-element-call",
"eslint-plugin-storybook",
],
ignoreExportsUsedInFile: true,
} satisfies KnipConfig;

8
locales/cs/app.json
View File

@@ -102,11 +102,15 @@
"connection_lost_description": "Hovor byl přerušen.",
"e2ee_unsupported": "Nekompatibilní prohlížeč",
"e2ee_unsupported_description": "Váš webový prohlížeč nepodporuje šifrované hovory. Mezi podporované prohlížeče patří Chrome, Safari a Firefox 117+.",
"failed_to_start_livekit": "Nepodařilo se navázat připojení k Livekitu",
"generic": "Něco se pokazilo.",
"generic_description": "Odeslání protokolů ladění nám pomůže vystopovat problém.",
"insufficient_capacity": "Nedostatečná kapacita",
"insufficient_capacity_description": "Server dosáhl své maximální kapacity a v tuto chvíli se nemůžete připojit k hovoru. Zkuste to později nebo se obraťte na správce serveru, pokud problém přetrvává.",
"matrix_rtc_transport_missing": "Server není nakonfigurován pro práci s {{brand}}. Obraťte se na správce serveru (Doména: {{domain}}, Kód chyby: {{ errorCode }}).",
"membership_manager": "Chyba Správce členství",
"membership_manager_description": "Správce členství musel být ukončen. To je způsobeno mnoha po sobě jdoucími neúspěšnými síťovými požadavky.",
"no_matrix_2_authorization_service": "Autorizační služba vašeho mediálního serveru (SFU) je zastaralá.",
"open_elsewhere": "Otevřeno na jiné kartě",
"open_elsewhere_description": "{{brand}} byl otevřen v jiné záložce. Pokud to nezní správně, zkuste stránku znovu načíst.",
"room_creation_restricted": "Nepodařilo se vytvořit hovor",
@@ -141,6 +145,7 @@
},
"layout_grid_label": "Mřížka",
"layout_spotlight_label": "Soustředěný mód",
"layout_switch_label": "Rozvržení",
"lobby": {
"ask_to_join": "Žádost o připojení k hovoru",
"join_as_guest": "Připojte se jako host",
@@ -241,11 +246,14 @@
"version": "{{productName}}verze: {{version}}",
"video_tile": {
"always_show": "Vždy zobrazit",
"call_ended": "Hovor ukončen",
"calling": "Volání…",
"camera_starting": "Načítání videa...",
"collapse": "Sbalit",
"expand": "Rozbalit",
"mute_for_me": "Pro mě ztlumit",
"muted_for_me": "Pro mě ztlumené",
"screen_share_volume": "Hlasitost sdílení obrazovky",
"volume": "Hlasitost",
"waiting_for_media": "Čekání na média..."
}

1
locales/en/app.json
View File

@@ -215,6 +215,7 @@
"codec_label": "Codec",
"developer_tab_title": "Developer",
"devices": {
"activating": "Activating…",
"camera": "Camera",
"camera_numbered": "Camera {{n}}",
"change_device_button": "Change audio device",

28
locales/et/app.json
View File

@@ -3,6 +3,7 @@
"user_menu": "Kasutajamenüü"
},
"action": {
"blur_background": "Hägusta tausta",
"close": "Sulge",
"copy_link": "Kopeeri link",
"edit": "Muuda",
@@ -72,8 +73,20 @@
"environment_variables": "Keskkonnamuutujad",
"hostname": "Hosti nimi: {{hostname}}",
"livekit_server_info": "LiveKiti serveri teave",
"livekit_sfu": "LiveKit SFU: {{url}}",
"livekit_sfu": "LiveKiti meediaedastusserver (SFU): {{url}}",
"matrixRTCMode": {
"Comptibility": {
"description": "Ühildub koduserveritega, mis ei toeta määratud kestusega sündmuseid (kuid kõik teised EC kliendid on v0.17.0 või hilisemad)",
"label": "Ühilduvus: olekusündmused ja mitu meediaedastusserverit (SFU)"
},
"Legacy": {
"description": "Ühildub EC vanemate versioonidega, millel puudub mitme meediaedastusserveri (SFU) tugi",
"label": "Vana lahendus: oleku üritused ja vanim meediaedastusserver (SFU)"
},
"Matrix_2_0": {
"description": "Ühildub ainult määratud kestusega sündmuseid toetavate koduserveritega ja kõigi EC-klientidega alates versioonist 0.17.0",
"label": "Matrix 2.0: määratud kestusega sündmused ja mitu meediaedastusserverit (SFU)"
},
"title": "MatrixRTC režiim"
},
"matrix_id": "Matrixi kasutajatunnus: {{id}}",
@@ -95,13 +108,20 @@
"generic_description": "Silumis- ja vealogide saatmine võib aidata meid vea põhjuseni jõuda.",
"insufficient_capacity": "Mittepiisav jõudlus",
"insufficient_capacity_description": "Serveri jõudluse ülempiir on hetkel ületatud ja sa ei saa hetkel selle kõnega liituda. Proovi hiljem uuesti või kui probleem kestab kauem, siis võta ühendust serveri haldajaga.",
"livekit_connection_error": "Livekiti serveriga ühendamine ei õnnestunud",
"livekit_connection_error_description": "Livekiti serveriga ühendamisel tekkis viga (<1>Põhjus: </1> <2>{{ reason }}</2>).",
"matrix_rtc_transport_missing": "See server pole seadistatud töötama rakendusega {{brand}}. Palun võta ühendust serveri halduriga (domeen: {{domain}}, veakood: {{ errorCode }}).",
"membership_manager": "Viga liikmelisuse haldamisel",
"membership_manager_description": "Liikmelisuse haldur pidi oma töö lõpetama. Selle põhjuseks olid paljud järjestikused ebaõnnestunud võrgupäringud.",
"no_matrix_2_authorization_service": "Sinu meediaedastusserveri (SFU) autoriseerimisteenus on aegunud.",
"open_elsewhere": "Avatud teisel vahekaardil",
"open_elsewhere_description": "{{brand}} on avatud teisel vahekaardil. Kui see ei tundu olema õige, proovi selle lehe uuesti laadimist.",
"peer_connection_timeout": "Ühendus aegus",
"peer_connection_timeout_description": "Meediaserveriga ühenduspäring aegus. Proovi kasutada muud võrku või keelata VPN-i kasutamine. Kui probleem püsib, vaata meie <0> veaotsingu juhendit</0> või võta ühendust oma serveri peakasutajaga.",
"room_creation_restricted": "Kõne loomine ei õnnestunud",
"room_creation_restricted_description": "Kõne loomine võib olla lubatud ainult volitatud kasutajatele. Proovi hiljem uuesti või probleemi püsimisel võta ühendust oma serveri haldajaga.",
"sticky_events_required": "Koduserver ei toeta Matrix 2.0 kõnesid",
"sticky_events_required_description": "See server on seadistatud kasutama Matrix 2.0 kõnerežiimi, kuid koduserver ei teata, et tal selleks vajalike sündmuste (MSC4354) tugi. Palu serveri peakasutajal see uuendada või kasuta koduserveris ühilduvat režiimi.",
"unexpected_ec_error": "Tekkis ootamatu viga (<0>Veakood:</0> <1>{{ errorCode }}</1>). Palun võta ühendust serveri haldajaga."
},
"group_call_loader": {
@@ -132,6 +152,7 @@
},
"layout_grid_label": "Ruudustik",
"layout_spotlight_label": "Rambivalgus",
"layout_switch_label": "Paigutus",
"lobby": {
"ask_to_join": "Küsi võimalust liituda kõnega",
"join_as_guest": "Liitu külalisena",
@@ -184,6 +205,7 @@
"blur_not_supported_by_browser": "(Tausta hägustamine pole selles seadmes toetatud.)",
"developer_tab_title": "Arendaja",
"devices": {
"activating": "Aktiveerin…",
"camera": "Kaamera",
"camera_numbered": "Kaamera {{n}}",
"change_device_button": "Muuda heliseadet",
@@ -223,6 +245,7 @@
"stop_video_button_label": "Peata videovoog",
"submitting": "Saadan…",
"switch_camera": "Vaheta kaamerat",
"technical_details": "Tehnilised üksikasjad",
"unauthenticated_view_body": "Sa pole veel registreerunud? <2>Loo kasutajakonto</2>",
"unauthenticated_view_login_button": "Logi oma kontosse sisse",
"unauthenticated_view_ssla_caption": "Klõpsides „Jätka“ nõustud sa meie <2>Tarkvara ja teenuste litsentseerimise lepinguga (Software and Services License Agreement - SSLA)</2>",
@@ -230,11 +253,14 @@
"version": "{{productName}}, versioon: {{version}}",
"video_tile": {
"always_show": "Näita alati",
"call_ended": "Kõne lõppes",
"calling": "Helistan…",
"camera_starting": "Video on laadimisel...",
"collapse": "Näita vähem",
"expand": "Näita rohkem",
"mute_for_me": "Summuta minu jaoks",
"muted_for_me": "Minule summutatud",
"screen_share_volume": "Helivaljus ekraanijagaamisel",
"volume": "Helivaljus",
"waiting_for_media": "Ootame kuni meedia on olemas..."
}

10
locales/fi/app.json
View File

@@ -3,6 +3,7 @@
"user_menu": "Käyttäjävalikko"
},
"action": {
"blur_background": "Sumenna tausta",
"close": "Sulje",
"copy_link": "Kopioi linkki",
"edit": "Muokkaa",
@@ -107,14 +108,20 @@
"generic_description": "Vianmäärityslokien lähettäminen auttaa meitä jäljittämään ongelman.",
"insufficient_capacity": "Riittämätön kapasiteetti",
"insufficient_capacity_description": "Palvelin on saavuttanut maksimikapasiteettinsa, etkä voi liittyä puheluun tällä hetkellä. Yritä myöhemmin uudelleen tai ota yhteyttä palvelimen ylläpitäjään, jos ongelma jatkuu.",
"livekit_connection_error": "Yhteyden muodostaminen Livekit-palvelimeen epäonnistui",
"livekit_connection_error_description": "Livekit-palvelimeen yhteyden muodostamisessa tapahtui virhe (<1>Syy: </1> <2>{{ reason }}</2>).",
"matrix_rtc_transport_missing": "Palvelinta ei ole määritetty toimimaan {{brand}} -sovelluksen kanssa. Ota yhteyttä palvelimen ylläpitäjään (Verkkotunnus: {{domain}}, Virhekoodi: {{ errorCode }}).",
"membership_manager": "Jäsenyydenhallinnan virhe",
"membership_manager_description": "Jäsenyyshallinta jouduttiin sulkemaan. Tämä johtui useista peräkkäisistä epäonnistuneista verkkopyynnöistä.",
"no_matrix_2_authorization_service": "Mediapalvelimesi (SFU) valtuutuspalvelu on vanhentunut.",
"open_elsewhere": "Avattu toisessa välilehdessä",
"open_elsewhere_description": "{{brand}} on avattu toisessa välilehdessä. Jos tämä ei kuulosta oikealta, yritä ladata sivu uudelleen.",
"peer_connection_timeout": "Yhteyden aikakatkaisu",
"peer_connection_timeout_description": "Yhteys mediapalvelimeen aikakatkaistiin. Kokeile vaihtaa verkkoa tai poistaa VPN käytöstä. Jos ongelma jatkuu, katso <0>vianetsintäoppaamme</0> tai ota yhteyttä palvelimesi ylläpitäjään.",
"room_creation_restricted": "Puhelun luominen epäonnistui",
"room_creation_restricted_description": "Puheluiden luominen saattaa olla rajoitettu vain valtuutetuille käyttäjille. Yritä myöhemmin uudelleen tai ota yhteyttä palvelimen ylläpitäjään, jos ongelma jatkuu.",
"sticky_events_required": "Kotipalvelin ei tue Matrix 2.0 -puheluita",
"sticky_events_required_description": "Tämä asennus on määritetty käyttämään Matrix 2.0 -puhelutilaa, mutta kotipalvelin ei mainosta tukea tarttuville tapahtumille (MSC4354). Pyydä palvelimen järjestelmänvalvojaa päivittämään tai vaihtamaan asennus yhteensopivaan tilaan.",
"unexpected_ec_error": "Tapahtui odottamaton virhe (<0>Virhekoodi:</0> <1>{{ errorCode }}</1>). Ota yhteyttä palvelimen ylläpitäjään."
},
"group_call_loader": {
@@ -145,6 +152,7 @@
},
"layout_grid_label": "Ruudukko",
"layout_spotlight_label": "Valokeila",
"layout_switch_label": "Asettelu",
"lobby": {
"ask_to_join": "Pyydä liittymistä puheluun",
"join_as_guest": "Liity vieraana",
@@ -197,6 +205,7 @@
"blur_not_supported_by_browser": "(Tämä laite ei tue taustan sumennusta.)",
"developer_tab_title": "Kehittäjä",
"devices": {
"activating": "Aktivoidaan…",
"camera": "Kamera",
"camera_numbered": "Kamera {{n}}",
"change_device_button": "Vaihda äänilaite",
@@ -236,6 +245,7 @@
"stop_video_button_label": "Lopeta video",
"submitting": "Lähetetään…",
"switch_camera": "Vaihda kameraa",
"technical_details": "Tekniset tiedot",
"unauthenticated_view_body": "Etkö ole vielä rekisteröitynyt? <2>Luo tili</2>",
"unauthenticated_view_login_button": "Kirjaudu tilillesi",
"unauthenticated_view_ssla_caption": "Klikkaamalla \"Siirry\" hyväksyt <2>ohjelmisto- ja palvelulisenssisopimuksen (SSLA)</2>",

72
locales/pl/app.json
View File

@@ -3,6 +3,7 @@
"user_menu": "Menu użytkownika"
},
"action": {
"blur_background": "Rozmycie tła",
"close": "Zamknij",
"copy_link": "Kopiuj link",
"edit": "Edytuj",
@@ -21,7 +22,7 @@
"submit": "Wyślij",
"upload_file": "Prześlij plik"
},
"analytics_notice": "Uczestnicząc w tej becie, upoważniasz nas do zbierania anonimowych danych, które wykorzystamy do ulepszenia produktu. Dowiedz się więcej na temat danych, które zbieramy w naszej <2>Polityce prywatności</2> i <5>Polityce ciasteczek</5>.",
"analytics_notice": "Biorąc udział w wersji beta, wyrażasz zgodę na gromadzenie anonimowych danych, które wykorzystujemy w celu ulepszenia naszego produktu. Więcej informacji na temat danych, które śledzimy, znajdziesz w naszej <2>Polityce prywatności</2> dla i <6>Polityce ciasteczek</6>.",
"call_ended_view": {
"create_account_button": "Utwórz konto",
"create_account_prompt": "<0>Może zechcesz ustawić hasło, aby zachować swoje konto?</0><1>Będziesz w stanie utrzymać swoją nazwę i ustawić awatar do wyświetlania podczas połączeń w przyszłości</1>",
@@ -41,7 +42,7 @@
"display_name": "Nazwa wyświetlana",
"encrypted": "Szyfrowane",
"home": "Strona domowa",
"loading": "Ładowanie…",
"loading": "Wczytywanie…",
"next": "Dalej",
"options": "Opcje",
"password": "Hasło",
@@ -58,6 +59,14 @@
"developer_mode": {
"always_show_iphone_earpiece": "Pokaż opcję słuchawki iPhone na wszystkich platformach",
"crypto_version": "Wersja krypto: {{version}}",
"custom_livekit_url": {
"current_url": "Aktualnie ustawione na: ",
"from_config": "Aktualnie nie nadpisano ustawienia. Używany jest adres URL z dobrego źródła lub konfiguracji.",
"label": "Własny Livekit-url",
"reset": "Zresetuj nadpisanie",
"save": "Zapisz",
"saving": "Zapisuję..."
},
"debug_tile_layout_label": "Układ kafelków Debug",
"device_id": "ID urządzenia: {{id}}",
"duplicate_tiles_label": "Liczba dodatkowych kopii kafelków na uczestnika",
@@ -65,6 +74,21 @@
"hostname": "Nazwa hosta: {{hostname}}",
"livekit_server_info": "Informacje serwera LiveKit",
"livekit_sfu": "LiveKit SFU: {{url}}",
"matrixRTCMode": {
"Comptibility": {
"description": "Kompatybilny z serwerami domowymi, które nie obsługują sticky events (ale wszyscy inni klienci EC mają wersję v0.17.0 lub nowszą)",
"label": "Kompatybilność: state events & multi SFU"
},
"Legacy": {
"description": "Kompatybilny ze starszymi wersjami EC, które nie wspierają multi SFU",
"label": "Przestarzałe: state events & oldest membership SFU"
},
"Matrix_2_0": {
"description": "Kompatybilny tylko z serwerami domowymi obsługującymi sticky events i wszystkimi klientami EC w wersji v0.17.0 lub nowszej",
"label": "Matrix 2.0: sticky events & multi SFU"
},
"title": "Tryb MatrixRTC"
},
"matrix_id": "ID Matrix: {{id}}",
"mute_all_audio": "Wycisz cały dźwięk (uczestnicy, reakcje, dźwięki dołączenia)",
"show_connection_stats": "Pokaż statystyki połączenia",
@@ -74,25 +98,36 @@
"error": {
"call_is_not_supported": "Połączenie nie jest obsługiwane",
"call_not_found": "Nie znaleziono połączenia",
"call_not_found_description": "<0>Wygląda na to, że ten link nie należy do żadnego istniejącego połączenia. Sprawdź, czy posiadasz prawidłowy link lub <1>utwórz nowy</1>.</0>",
"call_not_found_description": "<0>Wygląda na to, że ten link nie należy do żadnego istniejącego połączenia. Sprawdź, czy masz prawidłowy link lub <2> utwórz nowy</2>.</0>",
"connection_lost": "Utracono połączenie",
"connection_lost_description": "Zostałeś rozłączony z rozmowy.",
"e2ee_unsupported": "Niekompatybilna przeglądarka",
"e2ee_unsupported_description": "Twoja przeglądarka nie wspiera szyfrowanych połączeń. Obsługiwane przeglądarki obejmują Chrome, Safari i Firefox 117+.",
"failed_to_start_livekit": "Nie udało się uruchomić połączenia Livekit",
"generic": "Coś poszło nie tak",
"generic_description": "Wysłanie dziennika debug, pozwoli nam namierzyć problem.",
"insufficient_capacity": "Za mało miejsca",
"insufficient_capacity_description": "Serwer osiągnął maksymalną pojemność, przez co nie możesz dołączyć do połączenia. Spróbuj ponownie później lub skontaktuj się z administratorem serwera, jeśli problem nie zniknie.",
"livekit_connection_error": "Nie udało się połączyć z serwerem Livekit",
"livekit_connection_error_description": "Wystąpił błąd podczas łączenia się z serwerem Livekit (<1>Przyczyna:</1> <2>{{ reason }}</2>).",
"matrix_rtc_transport_missing": "Serwer nie jest skonfigurowany do pracy z {{brand}}. Prosimy o kontakt z administratorem serwera (Domena: {{domain}}, Kod błędu: {{ errorCode }}).",
"membership_manager": "Błąd menedżera członkostwa",
"membership_manager_description": "Menedżer członkostwa został zamknięty przez zbyt wiele powtarzających się błędów połączenia.",
"no_matrix_2_authorization_service": "Usługa autoryzacji dla serwera multimediów (SFU) jest nieaktualna.",
"open_elsewhere": "Otwarto w innej karcie",
"open_elsewhere_description": "{{brand}} został otwarty w innej karcie. Jeśli tak nie jest, spróbuj odświeżyć stronę.",
"peer_connection_timeout": "Upłynął limit czasu połączenia",
"peer_connection_timeout_description": "Upłynął czas oczekiwania na połączenie z serwerem multimediów. Spróbuj połączyć się z inną siecią lub wyłączyć VPN. Jeśli problem nadal występuje, zapoznaj się z naszym <0>poradnikiem rozwiązywania problemów</0> lub skontaktuj się z administratorem serwera.",
"room_creation_restricted": "Nie udało się utworzyć połączenia",
"room_creation_restricted_description": "Tworzenie połączeń mogło zostać ograniczone tylko do autoryzowanych użytkowników. Spróbuj ponownie później lub skontaktuj się z administratorem serwera, jeśli problem nie minie.",
"sticky_events_required": "Serwer domowy nie wspiera połączeń Matrix 2.0",
"sticky_events_required_description": "Wybrana konfiguracja została ustawiona na korzystanie z połączeń Matrix 2.0, lecz serwer domowy nie wspiera ogłaszania sticky events (MSC4354). Poproś administratora serwera o aktualizację lub zmień konfigurację.",
"unexpected_ec_error": "Wystąpił nieoczekiwany błąd (<0>Kod błędu:</0> <1>{{ errorCode }}</1>). Skontaktuj się z administratorem serwera."
},
"group_call_loader": {
"banned_body": "Zostałeś zbanowany z pokoju.",
"banned_heading": "Zbanowany",
"call_ended_body": "Zostałeś usunięty z rozmowy.",
"call_ended_body": "Zostałeś usunięty z połączenia.",
"call_ended_heading": "Połączenie zakończone",
"knock_reject_body": "Członkowie pokoju odrzucili Twoją prośbę o dołączenie.",
"knock_reject_heading": "Nie możesz dołączyć",
@@ -112,17 +147,18 @@
},
"join_existing_call_modal": {
"join_button": "Tak, dołącz do połączenia",
"text": "Te połączenie już istnieje, czy chcesz do niego dołączyć?",
"text": "Połączenie już istnieje, czy chcesz do niej dołączyć?",
"title": "Dołączyć do istniejącego połączenia?"
},
"layout_grid_label": "Siatka",
"layout_spotlight_label": "Centrum uwagi",
"layout_switch_label": "Układ",
"lobby": {
"ask_to_join": "Poproś o dołączenie do rozmowy",
"ask_to_join": "Poproś o dołączenie do połączenia",
"join_as_guest": "Dołącz jako gość",
"join_button": "Dołącz do połączenia",
"leave_button": "Wróć do ostatnie",
"waiting_for_invite": "Żądanie wysłane"
"waiting_for_invite": "Prośba wysłana! Oczekiwanie na zatwierdzenie…"
},
"log_in": "Zaloguj",
"logging_in": "Logowanie…",
@@ -162,14 +198,15 @@
"screenshare_button_label": "Udostępnij ekran",
"settings": {
"audio_tab": {
"effect_volume_description": "Dostosuj głośność, z jaką odtwarzane są efekty reakcji i podniesionej ręki",
"effect_volume_label": "Głośność efektu dźwiękowego"
"effect_volume_description": "Dostosuj głośność efektów reakcji i podniesienia ręki.",
"effect_volume_label": "Głośność efektów dźwiękowych"
},
"background_blur_header": "Tło",
"background_blur_label": "Rozmycie tła wideo",
"blur_not_supported_by_browser": "(Rozmycie tła nie jest wspierane przez to urządzenie.)",
"developer_tab_title": "Programista",
"devices": {
"activating": "Aktywuję…",
"camera": "Kamera",
"camera_numbered": "Kamera {{n}}",
"change_device_button": "Zmień urządzenie audio",
@@ -192,7 +229,7 @@
"preferences_tab": {
"developer_mode_label": "Tryb programisty",
"developer_mode_label_description": "Włącz tryb programisty i wyświetl kartę ustawień programisty.",
"introduction": "Tutaj możesz skonfigurować dodatkowe opcje dla lepszych doświadczeń.",
"introduction": "Tutaj możesz skonfigurować dodatkowe opcje dla lepszego komfortu użytkowania.",
"reactions_play_sound_description": "Odtwórz efekt dźwiękowy, gdy ktoś wyślę reakcję w trakcie połączenia.",
"reactions_play_sound_label": "Odtwórz dźwięki reakcji",
"reactions_show_description": "Odtwórz animację, gdy ktoś wyślę reakcję.",
@@ -201,26 +238,31 @@
"show_hand_raised_timer_label": "Pokaż czas po podniesieniu ręki"
}
},
"star_rating_input_label_one": "{{count}} gwiazdki",
"star_rating_input_label_other": "{{count}} gwiazdki",
"star_rating_input_label_one": "{{count}} gwiazdka",
"star_rating_input_label_few": "{{count}} gwiazdki",
"star_rating_input_label_many": "{{count}} gwiazdek",
"start_new_call": "Rozpocznij nowe połączenie",
"start_video_button_label": "Rozpocznij wideo",
"stop_screenshare_button_label": "Udostępnianie ekranu",
"stop_video_button_label": "Zakończ wideo",
"submitting": "Wysyłanie…",
"switch_camera": "Przełącz kamerę",
"technical_details": "Szczegóły techniczne",
"unauthenticated_view_body": "Nie masz konta? <2>Utwórz je</2>",
"unauthenticated_view_login_button": "Zaloguj się do swojego konta",
"unauthenticated_view_login_button": "Zaloguj się na swoje konto",
"unauthenticated_view_ssla_caption": "Klikając \"Przejdź\", wyrażasz zgodę na naszą <2>Umowę licencyjną oprogramowania i usług (SSLA)</2>",
"unmute_microphone_button_label": "Odcisz mikrofon",
"version": "Wersja: {{version}}",
"unmute_microphone_button_label": "Wyłącz wyciszenie mikrofonu",
"version": "{{productName}} wersja: {{version}}",
"video_tile": {
"always_show": "Zawsze pokazuj",
"call_ended": "Połączenie zakończone",
"calling": "Łączenie...",
"camera_starting": "Wczytywanie wideo...",
"collapse": "Zwiń",
"expand": "Rozwiń",
"mute_for_me": "Wycisz dla mnie",
"muted_for_me": "Wyciszone dla mnie",
"screen_share_volume": "Głośność udostępniania ekranu",
"volume": "Głośność",
"waiting_for_media": "Oczekiwanie na media..."
}

68
package.json
View File

@@ -17,11 +17,11 @@
"build:sdk": "pnpm build:full --config vite-sdk.config.js",
"build:sdk:production": "pnpm build:sdk",
"serve": "vite preview",
"prettier:check": "prettier -c .",
"prettier:format": "prettier -w .",
"lint": "pnpm lint:types && pnpm lint:eslint && pnpm lint:knip",
"lint:eslint": "eslint --max-warnings 0 src playwright",
"lint:eslint-fix": "eslint --max-warnings 0 src playwright --fix",
"format": "oxfmt",
"format:check": "oxfmt --check; rc=$?; [[ $rc -ne 0 ]] && printf '\\033[46;30m INFO \\033[0m To fix, run: pnpm format\\n' >&2; exit $rc",
"lint": "pnpm lint:types && pnpm lint:oxlint && pnpm lint:knip",
"lint:oxlint": "oxlint src playwright",
"lint:oxlint-fix": "oxlint --fix src playwright",
"lint:knip": "knip",
"lint:types": "tsc",
"i18n": "npx i18next-cli extract",
@@ -30,8 +30,8 @@
"test:storybook": "vitest --project=storybook",
"test:unit": "vitest --project=unit",
"test:coverage": "vitest --coverage",
"backend": "docker-compose -f dev-backend-docker-compose.yml up",
"backend-playwright": "docker-compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml up",
"backend": "docker-compose -f docker-compose-dev.yml up",
"backend-playwright": "docker-compose -f docker-compose-dev.yml -f docker-compose-playwright.yml up",
"test:playwright": "playwright test",
"test:playwright:open": "pnpm test:playwright --ui",
"links:on": "cp scripts/.pnpmfile.cjs .pnpmfile.cjs & pnpm install",
@@ -40,10 +40,6 @@
"build-storybook": "storybook build"
},
"devDependencies": {
"@babel/core": "^7.16.5",
"@babel/preset-env": "^7.29.5",
"@babel/preset-react": "^7.22.15",
"@babel/preset-typescript": "^7.23.0",
"@codecov/vite-plugin": "^1.3.0",
"@fontsource/inconsolata": "^5.1.0",
"@fontsource/inter": "^5.1.0",
@@ -51,7 +47,6 @@
"@formatjs/intl-segmenter": "^11.7.3",
"@livekit/components-core": "^0.12.0",
"@livekit/components-react": "^2.0.0",
"@livekit/protocol": "^1.42.2",
"@livekit/track-processors": "^0.7.1",
"@mediapipe/tasks-vision": "^0.10.18",
"@playwright/test": "^1.60.0",
@@ -59,16 +54,17 @@
"@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-visually-hidden": "^1.0.3",
"@react-spring/web": "^10.0.0",
"@rolldown/plugin-babel": "^0.2.3",
"@sentry/react": "^8.0.0",
"@sentry/vite-plugin": "^3.0.0",
"@storybook/addon-docs": "^10.3.6",
"@storybook/addon-vitest": "^10.3.6",
"@storybook/react-vite": "^10.3.6",
"@stylistic/eslint-plugin": "^3.0.0",
"@testing-library/dom": "^10.1.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.1",
"@types/eslint": "^9.6.1",
"@types/grecaptcha": "^3.0.9",
"@types/jsdom": "^21.1.7",
"@types/lodash-es": "^4.17.12",
@@ -78,34 +74,21 @@
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@types/sdp-transform": "^2.4.5",
"@typescript-eslint/eslint-plugin": "^8.31.0",
"@typescript-eslint/parser": "^8.31.0",
"@typescript-eslint/utils": "^8.61.0",
"@use-gesture/react": "^10.2.11",
"@vector-im/compound-design-tokens": "^10.0.0",
"@vector-im/compound-web": "^9.3.0",
"@vitejs/plugin-react": "^4.0.1",
"@vitejs/plugin-react": "^6.0.2",
"@vitest/browser-playwright": "^4.1.5",
"@vitest/coverage-v8": "^4.0.18",
"@vitest/ui": "4.1.7",
"babel-plugin-transform-vite-meta-env": "^1.0.3",
"@vitest/ui": "4.1.10",
"babel-plugin-react-compiler": "^1.0.0",
"classnames": "^2.3.1",
"copy-to-clipboard": "^3.3.3",
"eslint": "^8.14.0",
"eslint-config-google": "^0.14.0",
"eslint-config-prettier": "^10.0.0",
"eslint-plugin-deprecate": "^0.9.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsdoc": "^61.5.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-matrix-org": "2.1.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-rxjs": "^5.0.3",
"eslint-plugin-element-call": "link:eslint",
"eslint-plugin-storybook": "^10.3.6",
"eslint-plugin-unicorn": "^56.0.0",
"fetch-mock": "11.1.5",
"global-jsdom": "^26.0.0",
"i18next": "^25.0.0",
"i18next": "^26.0.0",
"i18next-browser-languagedetector": "^8.0.0",
"i18next-cli": "^1.61.0",
"jsdom": "^26.0.0",
@@ -118,11 +101,13 @@
"node-stdlib-browser": "^1.3.1",
"normalize.css": "^8.0.1",
"observable-hooks": "^4.2.3",
"oxfmt": "^0.61.0",
"oxlint": "^1.70.0",
"oxlint-tsgolint": "^0.25.0",
"pako": "^2.0.4",
"postcss": "^8.4.41",
"postcss-preset-env": "^10.0.0",
"posthog-js": "1.374.0",
"prettier": "^3.0.0",
"posthog-js": "1.408.2",
"qrcode": "^1.5.4",
"react": "19",
"react-dom": "19",
@@ -133,7 +118,6 @@
"sass": "^1.42.1",
"storybook": "^10.3.6",
"typescript": "^5.8.3",
"typescript-eslint-language-service": "^5.0.5",
"unique-names-generator": "^4.6.0",
"uuid": "^14.0.0",
"vaul": "^1.0.0",
@@ -147,17 +131,5 @@
"vitest": "^4.1.5",
"vitest-axe": "^1.0.0-pre.3"
},
"pnpm": {
"overrides": {
"@livekit/components-core>rxjs": "^7.8.1",
"@livekit/track-processors>@mediapipe/tasks-vision": "^0.10.18",
"minimatch": "^10.2.3",
"tar": "^7.5.11",
"glob": "^10.5.0",
"qs": "^6.14.1",
"js-yaml": "^4.1.1",
"esbuild": "^0.28.0"
}
},
"packageManager": "pnpm@10.33.0"
"packageManager": "pnpm@11.6.0+sha512.9a36518224080c6fe5165afdcfe79bfa118c29be703f3f462b1e32efe1e98e47e8750b148e08286250aad4113cc7993ca413c4e2cd447752708c2ee5751bc95f"
}

7
playwright-backend-docker-compose.override.yml
View File

@@ -1,7 +0,0 @@
services:
synapse:
volumes:
- ./backend/playwright_homeserver.yaml:/data/cfg/homeserver.yaml:Z
synapse-1:
volumes:
- ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z

2
playwright-backend-docker-compose.yml
View File

@@ -1,2 +0,0 @@
include:
- dev-backend-docker-compose.yml

5
playwright/fixtures/widget-user.ts
View File

@@ -120,6 +120,11 @@ export const widgetTest = test.extend<MyFixtures>({
.getByRole("heading", { name: "Welcome Room" }),
).toBeVisible();
} else if (callType === "dm") {
await TestHelpers.closeReleaseAnnouncement(
ewPage1,
"Introducing Sections",
);
await ewPage1
.getByRole("navigation", { name: "Room list" })
.getByRole("button", { name: "New conversation" })

9
playwright/sfu-reconnect-bug.spec.ts
View File

@@ -88,15 +88,18 @@ test("When creator left, avoid reconnect to the same SFU", async ({
await guestCPage.getByRole("radio", { name: "Spotlight" }).check();
await guestCPage.waitForTimeout(1000);
if (wsConnectionCount === 2) {
console.warn("wsConnectionCount is 2, expecting 1 after join");
}
const wsConnectionCountBeforeLeave = wsConnectionCount;
// ========
// the creator leaves the call
await creatorPage.getByTestId("incall_leave").click();
// https://github.com/element-hq/element-call/issues/3344
// The app used to request a new jwt token then to reconnect to the SFU
expect(wsConnectionCount).toBe(1);
expect(wsConnectionCount).toBe(wsConnectionCountBeforeLeave);
// Wait a bit to be sure that if there was a reconnect, it would have happened by now
await guestCPage.waitForTimeout(6000);
expect(wsConnectionCount).toBe(1);
expect(wsConnectionCount).toBe(wsConnectionCountBeforeLeave);
});

19
playwright/spa-helpers.ts
View File

@@ -125,21 +125,10 @@ async function expectVideoTilesCount(page: Page, count: number): Promise<void> {
});
// There should be `count` video elements, visible and autoplaying
await expect(page.locator("video")).toHaveCount(count);
await expect(async () => {
const videoBlockCount = await page
.locator("video")
.evaluateAll(
(videos: Element[]) =>
videos.filter(
(v: Element) => window.getComputedStyle(v).display === "block",
).length,
);
expect(videoBlockCount).toBe(count);
}).toPass({
timeout: 10000,
});
await expect(page.locator("video").filter({ visible: true })).toHaveCount(
count,
{ timeout: 10000 },
);
}
export const SpaHelpers = {

1
playwright/widget/pip-call-button-interaction.test.ts
View File

@@ -36,6 +36,7 @@ widgetTest("Footer interaction in PiP", async ({ addUser, browserName }) => {
await valere.page.waitForTimeout(600);
// Switch to the other room, the call should go to PIP
await TestHelpers.expandRoomList(valere.page);
await TestHelpers.switchToRoomNamed(valere.page, "OtherRoom");
// We should see the PIP overlay

1
playwright/widget/pip-call.test.ts
View File

@@ -53,6 +53,7 @@ widgetTest("Put call in PIP", async ({ addUser, browserName }) => {
});
// Switch to the other room, the call should go to PIP
await TestHelpers.expandRoomList(valere.page);
await TestHelpers.switchToRoomNamed(valere.page, "DoubleTask");
// We should see the PIP overlay

54
playwright/widget/test-helpers.ts
View File

@@ -73,9 +73,6 @@ export class TestHelpers {
audioOnly: boolean = false,
isDM: boolean = false,
): Promise<void> {
// XXX This using the notification toast to join the room.
// Not the button in the header
await page.waitForTimeout(3000);
const label = isDM
? audioOnly
@@ -85,7 +82,9 @@ export class TestHelpers {
await expect(page.getByText(label)).toBeVisible({
timeout: 10000,
});
await page.getByRole("button", { name: "Join" }).click({
// XXX This using the notification toast to join the room.
// Not the buttons in the header or timeline
await page.getByRole("alert").getByRole("button", { name: "Join" }).click({
timeout: 5000,
});
}
@@ -160,6 +159,7 @@ export class TestHelpers {
const expectedToasts = [
{ title: "Failed to load service worker", button: "OK" },
{ title: "Back up your chats", button: "Dismiss" },
{ title: "Turn on key storage", button: "Dismiss" },
{ title: "Element does not support this browser", button: "Dismiss" },
];
@@ -189,11 +189,27 @@ export class TestHelpers {
}
}
public static async closeReleaseAnnouncement(
page: Page,
name: string,
): Promise<void> {
try {
await page
.getByRole("dialog", { name })
.getByRole("button", { name: "OK" })
.click({ timeout: 2000 });
} catch {
// Announcement not shown; nothing to do
}
}
public static async createRoom(
name: string,
page: Page,
andInvite: string[] = [],
): Promise<void> {
await TestHelpers.closeReleaseAnnouncement(page, "Introducing Sections");
await page
.getByRole("navigation", { name: "Room list" })
.getByRole("button", { name: "New conversation" })
@@ -330,6 +346,12 @@ export class TestHelpers {
}
}
public static async expandRoomList(page: Page): Promise<void> {
await page
.getByRole("separator", { name: "Click or drag to expand" })
.click();
}
/**
* Switches to a room in the room list by its name.
* @param page - The EW page
@@ -368,25 +390,9 @@ export class TestHelpers {
frame: FrameLocator,
count: number,
): Promise<void> {
// XXX we need to be better at our HTML markup and accessibility, it would make
// this kind of stuff way easier to test if we could look out for aria attributes.
await expect
.poll(
async () => {
return await frame
.locator("video")
.evaluateAll(
(videos: Element[]) =>
videos.filter(
(v: Element) =>
window.getComputedStyle(v).display === "block",
).length,
);
},
{
timeout: 10000,
},
)
.toBe(count);
await expect(frame.locator("video").filter({ visible: true })).toHaveCount(
count,
{ timeout: 10000 },
);
}
}

37
playwright/widget/voice-call-dm.spec.ts
View File

@@ -31,17 +31,18 @@ widgetTest(
const brooksFrame = brooks.page
.locator('iframe[title="Element Call"]')
.contentFrame();
// We should show a ringing tile, let's check for that
await expect(
brooksFrame
.getByTestId("videoTile")
.filter({ has: brooksFrame.getByText(whistler.displayName) })
.filter({ has: brooksFrame.getByText("Calling…") }),
).toBeVisible();
await expect(whistler.page.getByText("Incoming voice call")).toBeVisible();
await whistler.page.getByRole("button", { name: "Join" }).click();
await whistler.page
.getByRole("alert")
.getByRole("button", { name: "Join" })
.click();
await expect(
whistler.page.locator('iframe[title="Element Call"]'),
@@ -83,23 +84,22 @@ widgetTest(
}),
).toBeVisible();
// In order to confirm that the call is disconnected we will check that the message composer is shown again.
// So first we need to confirm that it is hidden when in the call.
await expect(
whistler.page.locator(".mx_BasicMessageComposer"),
).not.toBeVisible();
await expect(
brooks.page.locator(".mx_BasicMessageComposer"),
).not.toBeVisible();
// ASSERT hanging up on one side ends the call for both
await brooksFrame.getByRole("button", { name: "End call" }).click();
// The widget should be closed on both sides and the timeline should be back on screen
// We confirm that we started in Pip mode (voice call) and check that we still see the composer.
await expect(
whistler.page.locator(".mx_BasicMessageComposer"),
).toBeVisible();
await expect(brooks.page.locator(".mx_BasicMessageComposer")).toBeVisible();
// ASSERT hanging up on one side ends the call for both
await brooksFrame.getByRole("button", { name: "End call" }).click();
// The widget should be closed on both sides
await expect(
whistler.page.locator('iframe[title="Element Call"]'),
).not.toBeVisible();
await expect(
whistler.page.locator('iframe[title="Element Call"]'),
).not.toBeVisible();
},
);
@@ -132,7 +132,10 @@ widgetTest(
).toBeVisible();
await expect(whistler.page.getByText("Incoming video call")).toBeVisible();
await whistler.page.getByRole("button", { name: "Join" }).click();
await whistler.page
.getByRole("alert")
.getByRole("button", { name: "Join" })
.click();
await expect(
whistler.page.locator('iframe[title="Element Call"]'),

8883
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

61
pnpm-workspace.yaml
View File

@@ -1,3 +1,58 @@
# dependencies where we use branches and hashes in the package.json. But that also use a pre/post install script.
onlyBuiltDependencies:
- "matrix-js-sdk"
minimumReleaseAgeExclude:
- "@vector-im/compound-design-tokens"
- "@vector-im/compound-web"
- matrix-js-sdk
- matrix-widget-api
allowBuilds:
"@parcel/watcher": true
"@sentry/cli": true
"@swc/core": true
"core-js": true
"esbuild": true
"matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/8c95727b6278fe7942c20d0b9485f984dd0694b7": true
"protobufjs": true
overrides:
# We need compatible versions of RxJS in our dependencies and LiveKit's dependencies, but
# LiveKit has pinned it to a very specific version which is now holding us back from updating.
# See livekit/components-js#1101 for a request for a proper solution.
"@livekit/components-core>rxjs": "^7.8.1"
# Dedupe Mediapipe dependencies.
"@livekit/track-processors>@mediapipe/tasks-vision": "^0.10.18"
# Security fix: https://security-tracker.debian.org/tracker/CVE-2026-31802
"tar": "^7.5.11"
# Security fixes:
# - https://github.com/advisories/GHSA-7r86-cg39-jmmj
# - https://github.com/advisories/GHSA-23c5-xmqv-rm74
"minimatch": "^10.2.3"
# Security fix: https://github.com/element-hq/element-call/security/dependabot/109
"glob": "^10.5.0"
# Security fixes:
# - https://github.com/element-hq/element-call/security/dependabot/110
# - https://github.com/element-hq/element-call/security/dependabot/122
# - https://github.com/element-hq/element-call/security/dependabot/179
"qs": "^6.15.2"
# Security fixes:
# - https://github.com/element-hq/element-call/security/dependabot/106
# - https://github.com/element-hq/element-call/security/dependabot/203
"js-yaml": "^4.2.0"
# Storybook declares support for 0.27.0 only but empirically works fine with 0.28.0.
"esbuild": "^0.28.0"
# Security fixes:
# - https://github.com/nodejs/undici/releases/tag/v6.24.0
# - https://github.com/element-hq/element-call/security/dependabot/201
# - https://github.com/element-hq/element-call/security/dependabot/199
"undici": "^6.27.0"
# Security fix: https://github.com/advisories/GHSA-rf6f-7fwh-wjgh
"flatted": "^3.4.2"
# Security fix: https://github.com/element-hq/element-call/security/dependabot/184
"ws": "^8.21.0"
# Security fixes:
# - https://github.com/element-hq/element-call/security/dependabot/191
# - https://github.com/element-hq/element-call/security/dependabot/190
# - https://github.com/element-hq/element-call/security/dependabot/192
# - https://github.com/element-hq/element-call/security/dependabot/194
# - https://github.com/element-hq/element-call/security/dependabot/198
# - https://github.com/element-hq/element-call/security/dependabot/196
# - https://github.com/element-hq/element-call/security/dependabot/195
# - https://github.com/element-hq/element-call/security/dependabot/193
"dompurify": "^3.4.11"

11
renovate.json
View File

@@ -61,10 +61,19 @@
{
"groupName": "Pnpm",
"matchDepNames": ["pnpm"]
},
{
"description": "Update the element-web image digest daily, in its own PR",
"groupName": "Element Web",
"matchPackageNames": ["ghcr.io/element-hq/element-web"],
"matchUpdateTypes": ["digest"],
"schedule": ["* 0-3 * * *"],
"minimumReleaseAge": null,
"automerge": true
}
],
"semanticCommits": "disabled",
"ignoreDeps": ["eslint-plugin-matrix-org"],
"ignoreDeps": [],
"vulnerabilityAlerts": {
"schedule": ["at any time"],
"prHourlyLimit": 0,

3
sdk/helper.ts
View File

@@ -15,9 +15,8 @@ import { scan } from "rxjs";
import { type WidgetHelpers } from "../src/widget";
import { type LivekitRoomItem } from "../src/state/CallViewModel/CallViewModel";
export const logger = rootLogger.getChild("[MatrixRTCSdk]");
export const tryMakeSticky = (widget: WidgetHelpers): void => {
const logger = rootLogger.getChild("[MatrixRTCSdk]");
logger.info("try making sticky MatrixRTCSdk");
void widget.api
.setAlwaysOnScreen(true)

14
sdk/main.ts
View File

@@ -52,7 +52,8 @@ import { getUrlParams } from "../src/UrlParams";
import { MuteStates } from "../src/state/MuteStates";
import { MediaDevices } from "../src/state/MediaDevices";
import { E2eeType } from "../src/e2ee/e2eeType";
import { currentAndPrev, logger, TEXT_LK_TOPIC, tryMakeSticky } from "./helper";
import { currentAndPrev, TEXT_LK_TOPIC, tryMakeSticky } from "./helper";
import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
import {
ElementWidgetActions,
widget as _widget,
@@ -76,9 +77,9 @@ interface MatrixRTCSdk {
stop: () => void;
data$: Observable<{ rtcBackendIdentity: string; data: string }>;
/**
* flattened list of members
* flattened list of remote members
*/
members$: Behavior<
remoteMembers$: Behavior<
{
connection: Connection | null;
membership: CallMembership;
@@ -86,7 +87,7 @@ interface MatrixRTCSdk {
}[]
>;
/**
* flattened local members
* flattened local member
*/
localMember$: Behavior<{
connection: Connection | null;
@@ -104,6 +105,7 @@ export async function createMatrixRTCSdk(
id: string = "",
sticky: boolean = false,
): Promise<MatrixRTCSdk> {
const logger = rootLogger.getChild("[MatrixRTCSdk]");
const scope = new ObservableScope();
// widget client
@@ -338,8 +340,8 @@ export async function createMatrixRTCSdk(
),
),
connected$: callViewModel.connected$,
members$: scope.behavior(
callViewModel.matrixLivekitMembers$.pipe(
remoteMembers$: scope.behavior(
callViewModel.remoteMatrixLivekitMembers$.pipe(
switchMap((members) => {
const listOfMemberObservables = members.map((member) =>
combineLatest([

18
src/App.tsx
View File

@@ -30,7 +30,7 @@ import { useTheme } from "./useTheme";
import { ProcessorProvider } from "./livekit/TrackProcessorContext";
import { type AppViewModel } from "./state/AppViewModel";
import { MediaDevicesContext } from "./MediaDevicesContext";
import { getUrlParams, HeaderStyle } from "./UrlParams";
import { getUrlParams, HeaderStyle, useUrlParams } from "./UrlParams";
import { AppBar } from "./AppBar";
const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
@@ -41,19 +41,17 @@ interface SimpleProviderProps {
const BackgroundProvider: FC<SimpleProviderProps> = ({ children }) => {
const { pathname } = useLocation();
const { background } = useUrlParams();
useEffect(() => {
let backgroundImage = "";
if (!["/login", "/register"].includes(pathname) && !widget) {
backgroundImage = "var(--background-gradient)";
}
document
.getElementsByTagName("body")[0]
.setAttribute("data-background", background);
}, [pathname, background]);
document.getElementsByTagName("body")[0].style.backgroundImage =
backgroundImage;
}, [pathname]);
return <>{children}</>;
return children;
};
const ThemeProvider: FC<SimpleProviderProps> = ({ children }) => {
useTheme();
return children;

155
src/AppBar.module.css
View File

@@ -1,6 +1,12 @@
.bar {
flex-shrink: 0;
position: relative;
z-index: var(--call-view-header-footer-layer);
padding-left: var(--content-inset-left);
padding-right: var(--content-inset-right);
padding-top: env(safe-area-inset-top);
opacity: 1;
transition: opacity 0.15s;
}
/* Pseudo-element for the gradient background */
@@ -9,8 +15,7 @@
position: absolute;
inset-inline: 0;
/* Extend the gradient beyond the bottom of the header for readability */
inset-block: -24px;
z-index: var(--call-view-header-footer-layer);
inset-block: 0 -16px;
background: linear-gradient(
0deg,
rgba(0, 0, 0, 0) 0%,
@@ -18,21 +23,157 @@
);
}
.bar.hidden {
opacity: 0;
pointer-events: none;
/* Switch to position: absolute so the bar takes up no space in the layout
when hidden. */
position: absolute;
inset-block-start: 0;
inset-inline: 0;
}
.bar:has(:focus-visible) {
opacity: 1;
pointer-events: initial;
}
.bar > header {
flex-shrink: 0;
position: sticky;
inset-inline: 0;
inset-block-start: 0;
block-size: 64px;
z-index: var(--call-view-header-footer-layer);
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows:
var(--cpd-space-3x) minmax(var(--cpd-space-10x), auto)
var(--cpd-space-3x);
grid-template-areas:
". . ."
"primaryButton title secondaryButton"
". . .";
place-items: center;
column-gap: var(--cpd-space-2x);
}
.bar svg path {
fill: var(--cpd-color-icon-primary);
.bar:has(.subtitle) > header {
grid-template-rows:
var(--cpd-space-3x) minmax(var(--cpd-space-10x), auto) var(--cpd-space-5x)
minmax(var(--cpd-space-8x), auto);
grid-template-areas:
". . ."
"primaryButton title secondaryButton"
". . ."
"subtitle subtitle subtitle";
}
.bar > header > h1 {
/* Hide everything but the subtitle in small windows */
@media (max-height: 450px) {
.bar {
display: none;
}
.bar:has(.subtitle) {
display: initial;
.title,
.primaryButton,
.secondaryButton {
display: none;
}
> header {
grid-template-columns: 1fr;
grid-template-rows: var(--cpd-space-5x) minmax(var(--cpd-space-5x), auto);
grid-template-areas: "." "subtitle";
}
}
}
.primaryButton {
grid-area: primaryButton;
justify-self: start;
}
.title {
grid-area: title;
}
.subtitle {
grid-area: subtitle;
svg {
color: var(--cpd-color-icon-tertiary);
margin-inline-end: var(--cpd-space-2x);
block-size: 1.2em;
inline-size: 1.2em;
vertical-align: text-bottom;
}
}
.title,
.subtitle {
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.secondaryButton {
grid-area: secondaryButton;
justify-self: end;
}
.primaryButton,
.secondaryButton {
svg * {
color: var(--cpd-color-icon-primary);
}
}
body[data-platform="ios"] {
.bar > header {
grid-template-rows: minmax(var(--cpd-space-11x), auto) var(--cpd-space-4x);
grid-template-areas: "primaryButton title secondaryButton";
}
.bar:has(.subtitle) > header {
grid-template-rows:
minmax(var(--cpd-space-6x), auto) minmax(var(--cpd-space-5x), auto)
var(--cpd-space-4x);
grid-template-areas:
"primaryButton title secondaryButton"
"primaryButton subtitle secondaryButton";
.title {
align-self: end;
/* Nudge the title and subtitle even closer together to replicate native
iOS styles */
transform: translateY(2px);
}
.subtitle {
align-self: start;
}
}
.subtitle {
color: var(--cpd-color-text-secondary);
svg {
display: none;
}
}
/* Hide everything but the subtitle in small windows */
@media (max-height: 450px) {
.bar:has(.subtitle) > header {
grid-template-rows: var(--cpd-space-4x) minmax(var(--cpd-space-5x), auto);
grid-template-areas: "." "subtitle";
}
.subtitle {
color: var(--cpd-color-text-primary);
}
}
}

32
src/AppBar.test.tsx
View File

@@ -5,21 +5,33 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/
import { type FC, type ReactNode } from "react";
import { render } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { TooltipProvider } from "@vector-im/compound-web";
import { AppBar } from "./AppBar";
import { AppBar, useAppBarSubtitle, useAppBarTitle } from "./AppBar";
const content = <p>This is the content.</p>;
function snapshotAppBar(content: ReactNode): void {
const { container } = render(
<TooltipProvider>
<AppBar>{content}</AppBar>
</TooltipProvider>,
);
expect(container).toMatchSnapshot();
}
describe("AppBar", () => {
it("renders", () => {
const { container } = render(
<TooltipProvider>
<AppBar>
<p>This is the content.</p>
</AppBar>
</TooltipProvider>,
);
expect(container).toMatchSnapshot();
it("renders", () => snapshotAppBar(content));
it("renders with title and subtitle", () => {
const TestComponent: FC = () => {
useAppBarTitle("Title");
useAppBarSubtitle("Subtitle");
return content;
};
snapshotAppBar(<TestComponent />);
});
});

124
src/AppBar.tsx
View File

@@ -6,28 +6,34 @@ Please see LICENSE in the repository root for full details.
*/
import {
createContext,
type FC,
type MouseEvent,
type ReactNode,
use,
useCallback,
useEffect,
useMemo,
useState,
createContext,
type FC,
type MouseEvent,
type ReactNode,
} from "react";
import { Heading, IconButton, Tooltip } from "@vector-im/compound-web";
import { CollapseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import classNames from "classnames";
import { Heading, IconButton, Text, Tooltip } from "@vector-im/compound-web";
import {
ArrowLeftIcon,
ChevronLeftIcon,
CollapseIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import { useTranslation } from "react-i18next";
import { logger } from "matrix-js-sdk/lib/logger";
import { Header, LeftNav, RightNav } from "./Header";
import { platform } from "./Platform";
import styles from "./AppBar.module.css";
interface AppBarContext {
setTitle: (value: string) => void;
setSubtitle: (value: ReactNode) => void;
setSecondaryButton: (value: ReactNode) => void;
setPrimaryButtonIconKind: (value: "back" | "minimise") => void;
setHidden: (value: boolean) => void;
}
@@ -49,44 +55,76 @@ export const AppBar: FC<Props> = ({ children }) => {
}, []);
const [title, setTitle] = useState<string>("");
const [subtitle, setSubtitle] = useState<ReactNode>(undefined);
const [hidden, setHidden] = useState<boolean>(false);
const [secondaryButton, setSecondaryButton] = useState<ReactNode | null>(
null,
);
const [primaryButtonIcon, setPrimaryButtonIconKind] = useState<
"back" | "minimise"
>("minimise");
const context = useMemo(
() => ({ setTitle, setSecondaryButton, setHidden }),
[setTitle, setHidden, setSecondaryButton],
() => ({
setTitle,
setSubtitle,
setSecondaryButton,
setHidden,
setPrimaryButtonIconKind,
}),
[
setTitle,
setSubtitle,
setHidden,
setSecondaryButton,
setPrimaryButtonIconKind,
],
);
const BackIcon = platform === "android" ? ArrowLeftIcon : ChevronLeftIcon;
return (
<>
<div
style={{ display: hidden ? "none" : "block" }}
className={styles.bar}
>
<Header
// App bar is mainly seen in the call view, which has its own
// 'reconnecting' toast
disconnectedBanner={false}
>
<LeftNav>
<Tooltip label={t("common.back")}>
<IconButton size="24px" onClick={onBackClick}>
{/* Wrap the header in a div due to annoying z-index issues with the
gradient background */}
<div className={classNames(styles.bar, { [styles.hidden]: hidden })}>
<header>
<Tooltip label={t("common.back")}>
<IconButton
className={styles.primaryButton}
// We render the back button (PrimaryButtonIcon) the same size as the native os.
// We render the minimise icon (default) smaller as per designs.
size={primaryButtonIcon === "back" ? "32px" : "24px"}
onClick={onBackClick}
>
{primaryButtonIcon === "back" ? (
<BackIcon aria-hidden />
) : (
<CollapseIcon aria-hidden />
</IconButton>
</Tooltip>
</LeftNav>
)}
</IconButton>
</Tooltip>
{title && (
<Heading
className={styles.title}
type="body"
size="lg"
weight={platform === "android" ? "medium" : "semibold"}
size={platform === "ios" ? "md" : "lg"}
weight={platform === "ios" ? "semibold" : "medium"}
>
{title}
</Heading>
)}
<RightNav>{secondaryButton}</RightNav>
</Header>
{subtitle && (
<Text
className={styles.subtitle}
as="span"
size={platform === "ios" ? "sm" : "lg"}
>
{subtitle}
</Text>
)}
<div className={styles.secondaryButton}>{secondaryButton}</div>
</header>
</div>
<AppBarContext value={context}>{children}</AppBarContext>
</>
@@ -107,6 +145,36 @@ export function useAppBarTitle(title: string): void {
}, [title, setTitle]);
}
/**
* React hook which sets the subtitle to be shown in the app bar, if present. It
* is an error to call this hook from multiple sites in the same component tree.
*/
export function useAppBarSubtitle(subtitle: ReactNode): void {
const setSubtitle = use(AppBarContext)?.setSubtitle;
useEffect(() => {
if (setSubtitle !== undefined) {
setSubtitle(subtitle);
return (): void => setSubtitle("");
}
}, [subtitle, setSubtitle]);
}
/**
* React hook which sets the primary button icon kind. Can only be "minimise" or "back"
* It is an error to call this hook from multiple sites in the same component tree.
*/
export function useAppBarPrimaryButtonIconKind(
icon: "back" | "minimise",
): void {
const setIconKind = use(AppBarContext)?.setPrimaryButtonIconKind;
useEffect(() => {
if (setIconKind !== undefined) {
setIconKind(icon);
return (): void => setIconKind("minimise");
}
}, [setIconKind, icon]);
}
/**
* React hook which sets the title to be shown in the app bar, if present. It is
* an error to call this hook from multiple sites in the same component tree.

2
src/FullScreenView.tsx
View File

@@ -47,7 +47,7 @@ export const FullScreenView: FC<FullScreenViewProps> = ({
};
interface ErrorPageProps {
error: Error | unknown;
error: unknown;
widget: WidgetHelpers | null;
}

3
src/UrlParams.test.ts
View File

@@ -16,12 +16,15 @@ import {
HeaderStyle,
getUrlParams,
} from "../src/UrlParams";
import { mockConfig } from "./utils/test";
const ROOM_NAME = "roomNameHere";
const ROOM_ID = "!d45f138fsd";
const ORIGIN = "https://call.element.io";
const HOMESERVER = "localhost";
mockConfig();
describe("UrlParams", () => {
describe("handles URL with /room/", () => {
it("and nothing else", () => {

15
src/UrlParams.ts
View File

@@ -19,6 +19,7 @@ import { Config } from "./config/Config";
import { type EncryptionSystem } from "./e2ee/sharedKeyManagement";
import { E2eeType } from "./e2ee/e2eeType";
import { platform } from "./Platform";
import { redact } from "./utils/redact";
interface RoomIdentifier {
roomAlias: string | null;
@@ -44,6 +45,11 @@ export enum HeaderStyle {
AppBar = "app_bar",
}
export enum BackgroundStyle {
Solid = "solid",
Gradient = "gradient",
}
/**
* The UrlProperties are used to pass required data to the widget.
* Those are different in different rooms, users, devices. They do not configure the behavior of the
@@ -144,6 +150,10 @@ export interface UrlProperties {
* can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
*/
theme: string | null;
/**
* The visual style of the page background.
*/
background: BackgroundStyle;
}
/**
@@ -451,6 +461,9 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
fonts: parser.getAllParams("font"),
fontScale: Number.isNaN(fontScale) ? null : fontScale,
theme: parser.getParam("theme"),
background:
parser.getEnumParam("background", BackgroundStyle) ??
BackgroundStyle.Gradient,
viaServers: !isWidget ? parser.getParam("viaServers") : null,
homeserver: !isWidget ? parser.getParam("homeserver") : null,
posthogApiHost: parser.getParam("posthogApiHost"),
@@ -494,7 +507,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
"intent:",
intent,
"\nproperties:",
properties,
redact(properties, "password"),
"configuration:",
configuration,
);

112
src/__snapshots__/AppBar.test.tsx.snap
View File

@@ -3,44 +3,90 @@
exports[`AppBar > renders 1`] = `
<div>
<div
class="bar"
style="display: block;"
class="_bar_221541"
>
<header
class="header"
>
<div
class="nav leftNav"
<header>
<button
aria-labelledby="_r_0_"
class="_icon-button_1215g_8 _primaryButton_221541"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 24px;"
tabindex="0"
>
<button
aria-labelledby="_r_0_"
class="_icon-button_1215g_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 24px;"
tabindex="0"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
/>
</svg>
</div>
</button>
</div>
<path
d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
/>
</svg>
</div>
</button>
<div
class="nav rightNav"
class="_secondaryButton_221541"
/>
</header>
</div>
<p>
This is the content.
</p>
</div>
`;
exports[`AppBar > renders with title and subtitle 1`] = `
<div>
<div
class="_bar_221541"
>
<header>
<button
aria-labelledby="_r_6_"
class="_icon-button_1215g_8 _primaryButton_221541"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 24px;"
tabindex="0"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
/>
</svg>
</div>
</button>
<h1
class="_typography_6v6n8_153 _font-body-lg-medium_6v6n8_79 _title_221541"
>
Title
</h1>
<span
class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69 _subtitle_221541"
>
Subtitle
</span>
<div
class="_secondaryButton_221541"
/>
</header>
</div>

18
src/__snapshots__/Modal.test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`the content is rendered when the modal is open 1`] = `
<div
aria-labelledby="radix-_r_4_"
class="overlay animate modal dialog _glass_sepwu_8"
class="_overlay_2f5303 _animate_2f5303 _modal_dbeffe _dialog_dbeffe _glass_sepwu_8"
data-state="open"
id="radix-_r_3_"
role="dialog"
@@ -11,10 +11,10 @@ exports[`the content is rendered when the modal is open 1`] = `
tabindex="-1"
>
<div
class="content"
class="_content_dbeffe"
>
<div
class="header"
class="_header_dbeffe"
>
<h2
class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
@@ -24,7 +24,7 @@ exports[`the content is rendered when the modal is open 1`] = `
</h2>
</div>
<div
class="body"
class="_body_dbeffe"
>
<p>
This is the content.
@@ -37,7 +37,7 @@ exports[`the content is rendered when the modal is open 1`] = `
exports[`the modal renders as a drawer in mobile viewports 1`] = `
<div
aria-labelledby="radix-_r_a_"
class="overlay modal drawer"
class="_overlay_2f5303 _modal_dbeffe _drawer_dbeffe"
data-state="open"
data-vaul-animate="true"
data-vaul-custom-container="false"
@@ -51,13 +51,13 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
tabindex="-1"
>
<div
class="content"
class="_content_dbeffe"
>
<div
class="header"
class="_header_dbeffe"
>
<div
class="handle"
class="_handle_dbeffe"
/>
<h2
id="radix-_r_a_"
@@ -67,7 +67,7 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
</h2>
</div>
<div
class="body"
class="_body_dbeffe"
>
<p>
This is the content.

2
src/__snapshots__/QrCode.test.tsx.snap
View File

@@ -2,7 +2,7 @@
exports[`QrCode > renders 1`] = `
<div
class="qrCode bar"
class="_qrCode_458264 bar"
>
<img
alt="QR Code"

2
src/__snapshots__/Toast.test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`Toast > renders 1`] = `
<button
aria-labelledby="radix-_r_4_"
class="overlay animate toast"
class="_overlay_2f5303 _animate_2f5303 _toast_15a045"
data-state="open"
id="radix-_r_3_"
role="dialog"

4
src/button/Button.module.css
View File

@@ -5,10 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/
.endCall > svg {
color: var(--stopgap-color-on-solid-accent);
}
.rotate > svg {
animation: spin 1s linear infinite;
}

15
src/button/Button.tsx
View File

@@ -135,21 +135,12 @@ interface EndCallButtonProps extends ComponentPropsWithoutRef<"button"> {
size?: "md" | "lg";
}
export const EndCallButton: FC<EndCallButtonProps> = ({
className,
...props
}) => {
export const EndCallButton: FC<EndCallButtonProps> = (props) => {
const { t } = useTranslation();
return (
<Tooltip label={t("hangup_button_label")}>
<CpdButton
className={classNames(className, styles.endCall)}
iconOnly
Icon={EndCallIcon}
destructive
{...props}
/>
<CpdButton iconOnly Icon={EndCallIcon} destructive {...props} />
</Tooltip>
);
};
@@ -173,7 +164,7 @@ export const LoudspeakerButton: FC<LoudspeakerButtonProps> = ({
iconOnly
Icon={loudspeakerModeEnabled ? VolumeOnSolidIcon : VolumeOffSolidIcon}
{...props}
kind={loudspeakerModeEnabled ? "primary" : "secondary"}
kind={loudspeakerModeEnabled ? "secondary" : "primary"}
aria-checked={loudspeakerModeEnabled}
/>
</Tooltip>

2
src/button/__snapshots__/ReactionToggleButton.test.tsx.snap
View File

@@ -140,7 +140,7 @@ exports[`Can raise hand 1`] = `
aria-expanded="false"
aria-haspopup="true"
aria-labelledby="_r_1j_"
class="_button_1nw83_8 raisedButton _has-icon_1nw83_60 _icon-only_1nw83_53"
class="_button_1nw83_8 _raisedButton_fb25ab _has-icon_1nw83_60 _icon-only_1nw83_53"
data-kind="primary"
data-size="lg"
role="button"

5
src/components/CallFooter.module.css
View File

@@ -19,11 +19,6 @@ Please see LICENSE in the repository root for full details.
padding-right: calc(env(safe-area-inset-right) + var(--cpd-space-6x));
padding-block: var(--cpd-space-10x)
calc(env(safe-area-inset-bottom) + var(--cpd-space-10x));
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
var(--cpd-color-bg-canvas-default) 100%
);
}
.footer.hidden {

95
src/components/CallFooter.stories.tsx
View File

@@ -16,10 +16,12 @@ import inCallViewStyles from "../room/InCallView.module.css";
import { useStaticViewModel } from "../state/ViewModel";
import { ReactionsSenderContext } from "../reactions/useReactionsSender";
import { type ReactionOption } from "../reactions";
import { type GridMode } from "../state/CallViewModel/CallViewModel";
import { MediaDevicesContext } from "../MediaDevicesContext";
import { MediaDevices } from "../state/MediaDevices";
import { globalScope } from "../state/ObservableScope";
import { constant } from "../state/Behavior";
import { type LayoutMode } from "../state/LayoutSwitchViewModel";
// consts for tests
const reactionIdentifier = "@user:example.com:DEVICE";
const reactionData = {
@@ -32,6 +34,7 @@ const mediaDevices = new MediaDevices(globalScope);
/**
* A wrapper component that is used for:
* - exposing the snapshot via props so the storybook documents the snapshot properties (basically unpack them form the vm)
* - constructing the layout switch view model
* - Add additional react context
* The paraeters are all params from the FooterSnapshot,
* the Snapshot of the vm, the wrapper will create a mocked vm from it and pass it to the CallFooter.
@@ -40,11 +43,18 @@ const mediaDevices = new MediaDevices(globalScope);
*/
function CallFooterStoryWrapper({
children,
layout,
setLayout,
...vmSnapshot
}: FooterSnapshot & {
}: Omit<FooterSnapshot, "layoutSwitchVm"> & {
children?: false | JSX.Element | JSX.Element[] | undefined;
layout: LayoutMode | null;
setLayout: (value: LayoutMode) => void;
}): ReactNode {
const vm = useStaticViewModel(vmSnapshot);
const vm = useStaticViewModel({
...vmSnapshot,
layoutSwitchVm: layout && { layout$: constant(layout), setLayout },
});
return (
<MediaDevicesContext value={mediaDevices}>
<div className={inCallViewStyles.inRoom}>
@@ -62,28 +72,50 @@ function CallFooterStoryWrapper({
);
}
const meta = {
component: CallFooterStoryWrapper,
} satisfies Meta<typeof CallFooterStoryWrapper>;
export default meta;
type Story = StoryObj<typeof meta>;
const fnArgType = {
control: { type: "select" as const },
options: ["MockedCallback", "undefined"],
mapping: { MockedCallback: fn(), undefined: undefined },
};
const meta = {
component: CallFooterStoryWrapper,
argTypes: {
layout: {
control: "radio",
options: ["grid", "spotlight"] satisfies LayoutMode[],
},
audioOutputSwitcher: {
control: "select",
options: ["NoOutputCallback", "speaker", "earpiece"],
table: { defaultValue: { summary: "NoOutputCallback" } },
mapping: {
NoOutputCallback: undefined,
// This is inverersed (speaker<->earpice) because the switcher object stores the target output, not the current one.
speaker: { targetOutput: "earpiece", switch: fn() },
earpiece: { targetOutput: "speaker", switch: fn() },
},
},
toggleScreenSharing: fnArgType,
openSettings: fnArgType,
toggleAudio: fnArgType,
toggleVideo: fnArgType,
hangup: fnArgType,
},
} satisfies Meta<typeof CallFooterStoryWrapper>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
showLogo: false,
layoutMode: "grid",
layout: "grid",
setLayout: fn(),
audioEnabled: true,
audioBusy: false,
videoEnabled: true,
videoBusy: false,
setLayoutMode: fn(),
openSettings: fn(),
toggleAudio: fn(),
toggleVideo: fn(),
@@ -111,29 +143,6 @@ export const Default: Story = {
parameters: {
layout: "fullscreen",
},
argTypes: {
layoutMode: {
control: "radio",
options: ["grid", "spotlight"] satisfies GridMode[],
},
audioOutputSwitcher: {
control: "select",
options: ["NoOutputCallback", "speaker", "earpiece"],
table: { defaultValue: { summary: "NoOutputCallback" } },
mapping: {
NoOutputCallback: undefined,
// This is inverersed (speaker<->earpice) because the switcher object stores the target output, not the current one.
speaker: { targetOutput: "earpiece", switch: fn() },
earpiece: { targetOutput: "speaker", switch: fn() },
},
},
toggleScreenSharing: fnArgType,
setLayoutMode: fnArgType,
openSettings: fnArgType,
toggleAudio: fnArgType,
toggleVideo: fnArgType,
hangup: fnArgType,
},
};
export const WithAudioAndVideoOptions: Story = {
@@ -194,7 +203,7 @@ export const AudioVideoEnabled: Story = {
const spotlightRadio = canvas.getByRole("radio", { name: "Spotlight" });
await userEvent.click(spotlightRadio);
await expect(args.setLayoutMode).toHaveBeenCalledWith("spotlight");
await expect(args.setLayout).toHaveBeenCalledWith("spotlight");
const micButtonMute = canvas.getByRole("switch", {
name: "Mute microphone",
@@ -225,14 +234,14 @@ export const SpotlightMode: Story = {
...Default,
args: {
...Default.args,
layoutMode: "spotlight",
layout: "spotlight",
},
play: async ({ args, canvasElement }) => {
const canvas = within(canvasElement);
const spotlightRadio = canvas.getByRole("radio", { name: "Grid" });
await userEvent.click(spotlightRadio);
await expect(args.setLayoutMode).toHaveBeenCalledWith("grid");
await expect(args.setLayout).toHaveBeenCalledWith("grid");
},
};
@@ -264,7 +273,7 @@ export const Pip: Story = {
args: {
...Default.args,
buttonSize: "md",
layoutMode: undefined,
layout: null,
},
play: async ({ args, canvasElement }) => {
const canvas = within(canvasElement);
@@ -348,7 +357,7 @@ export const Lobby: Story = {
...Default.args,
showLogo: false,
openSettings: undefined,
setLayoutMode: undefined,
layout: null,
toggleScreenSharing: undefined,
},
parameters: {
@@ -362,7 +371,7 @@ export const LobbyMobile: Story = {
...Default.args,
showLogo: false,
setLayoutMode: undefined,
layout: null,
toggleScreenSharing: undefined,
},
globals: {
@@ -379,7 +388,7 @@ export const LobbyRecentButton: Story = {
...Default.args,
children: <Link>Back To Recents</Link>,
showLogo: false,
setLayoutMode: undefined,
layout: null,
toggleScreenSharing: undefined,
},
parameters: {
@@ -393,7 +402,7 @@ export const LobbyRecentButtonMobile: Story = {
...Default.args,
children: <Link>Back To Recents</Link>,
showLogo: false,
setLayoutMode: undefined,
layout: null,
toggleScreenSharing: undefined,
},
globals: {

43
src/components/CallFooter.tsx
View File

@@ -7,12 +7,6 @@ Please see LICENSE in the repository root for full details.
import { type FC, type JSX, type Ref, useMemo } from "react";
import classNames from "classnames";
import {
SpotlightIcon,
GridIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import { Switch } from "@vector-im/compound-web";
import { t } from "i18next";
import LogoMark from "../icons/LogoMark.svg?react";
import LogoType from "../icons/LogoType.svg?react";
@@ -28,13 +22,14 @@ import {
type ReactionData,
} from "../button";
import styles from "./CallFooter.module.css";
import { type GridMode } from "../state/CallViewModel/CallViewModel";
import {
MediaMuteAndSwitchButton,
type MenuOptions,
} from "./MediaMuteAndSwitchButton";
import { type ViewModel } from "../state/ViewModel";
import { useBehavior } from "../useBehavior";
import { type LayoutSwitchViewModel } from "../state/LayoutSwitchViewModel";
import { LayoutSwitch } from "../room/LayoutSwitch";
export interface AudioOutputSwitcher {
targetOutput: string;
@@ -61,8 +56,6 @@ export interface FooterActions {
/** Also controls if the videoMute button is disabled */
toggleVideo: (() => void) | undefined;
toggleBlur: (() => void) | undefined;
/** Also controls if the layout button is visible */
setLayoutMode: ((mode: GridMode) => void) | undefined;
toggleScreenSharing: (() => void) | undefined;
/** Also controls if the settings button is visible */
openSettings: (() => void) | undefined;
@@ -87,7 +80,8 @@ export interface FooterState {
buttonSize: "md" | "lg";
showLogo: boolean;
layoutMode: GridMode | undefined;
/** Also controls if the layout switch is visible */
layoutSwitchVm: LayoutSwitchViewModel | null;
sharingScreen: boolean;
@@ -112,16 +106,21 @@ export interface FooterState {
}
export interface FooterProps {
className?: string;
ref?: Ref<HTMLDivElement>;
children?: JSX.Element | JSX.Element[] | false;
vm: ViewModel<FooterSnapshot>;
}
export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
export const CallFooter: FC<FooterProps> = ({
className,
ref,
children,
vm,
}) => {
const asOverlay = useBehavior(vm.asOverlay$);
const showFooter = useBehavior(vm.showFooter$);
const hideControls = useBehavior(vm.hideControls$);
const layoutMode = useBehavior(vm.layoutMode$);
const setLayoutMode = useBehavior(vm.setLayoutMode$);
const layoutSwitchVm = useBehavior(vm.layoutSwitchVm$);
const openSettings = useBehavior(vm.openSettings$);
const audioEnabled = useBehavior(vm.audioEnabled$);
const audioBusy = useBehavior(vm.audioBusy$);
@@ -292,7 +291,7 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
<div
ref={ref}
data-testid="footer-container"
className={classNames(styles.footer, {
className={classNames(className, styles.footer, {
[styles.overlay]: asOverlay,
[styles.hidden]: !showFooter,
})}
@@ -311,20 +310,8 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
{(showLogo || debugTileLayout) && logoDebugContainer}
</div>
{!hideControls && <div className={styles.buttons}>{buttons}</div>}
{!hideControls && setLayoutMode && layoutMode && (
<Switch<"spotlight", "grid">
name="layoutMode"
aria-label={t("layout_switch_label")}
leftLabel={t("layout_spotlight_label")}
leftValue="spotlight"
leftIcon={SpotlightIcon}
rightLabel={t("layout_grid_label")}
rightValue="grid"
rightIcon={GridIcon}
className={styles.layout}
value={layoutMode}
onChange={setLayoutMode}
/>
{!hideControls && layoutSwitchVm && (
<LayoutSwitch vm={layoutSwitchVm} className={styles.layout} />
)}
</div>
);

17
src/components/CallFooterViewModel.tsx
View File

@@ -173,9 +173,7 @@ export function createCallFooterViewModel(
callModel.setSettingsOpen$,
]).pipe(
map(([isPip, showHeader, setSettingsOpen]) =>
!isPip &&
!(headerStyle === HeaderStyle.AppBar && showHeader) &&
showControls
!isPip && headerStyle !== HeaderStyle.AppBar && showControls
? (): void => setSettingsOpen(true)
: undefined,
),
@@ -184,14 +182,7 @@ export function createCallFooterViewModel(
showLogo$: scope.behavior(isPip$.pipe(map((isPip) => showLogo && !isPip))),
layoutMode$: callModel.gridMode$,
setLayoutMode$: scope.behavior(
isPip$.pipe(
map((isPip) =>
!isPip && showControls ? callModel.setGridMode : undefined,
),
),
),
layoutSwitchVm$: callModel.layoutSwitchVm$,
sharingScreen$: callModel.sharingScreen$,
toggleScreenSharing$: constant(callModel.toggleScreenSharing ?? undefined),
@@ -249,20 +240,18 @@ export function createLobbyFooterViewModel(
hideControls: false,
asOverlay: false,
buttonSize: "lg",
showLayoutSwitcher: false,
openSettings,
hangup,
debugTileLayout: false,
showFooter: true,
toggleAudio: undefined,
toggleVideo: undefined,
setLayoutMode: undefined,
toggleScreenSharing: undefined,
audioEnabled: undefined,
audioBusy: false,
videoEnabled: undefined,
videoBusy: false,
layoutMode: undefined,
layoutSwitchVm: null,
sharingScreen: false,
audioOutputSwitcher: undefined,
reactionIdentifier: undefined,

46
src/components/MediaMuteAndSwitchButton.test.tsx
View File

@@ -180,12 +180,12 @@ describe("MediaMuteAndSwitchButton", () => {
);
await user.click(screen.getByRole("button", { name: "Microphone" }));
screen.getByRole("menuitem", { name: "Microphone 1" });
screen.getByRole("menuitem", { name: "Microphone 2" });
screen.getByRole("menuitemradio", { name: "Microphone 1" });
screen.getByRole("menuitemradio", { name: "Microphone 2" });
await user.keyboard("[Escape]");
await user.click(screen.getByRole("button", { name: "Camera" }));
screen.getByRole("menuitem", { name: "Camera 1" });
screen.getByRole("menuitem", { name: "Camera 2" });
screen.getByRole("menuitemradio", { name: "Camera 1" });
screen.getByRole("menuitemradio", { name: "Camera 2" });
});
test("calls select callback on menu click", async () => {
@@ -206,7 +206,9 @@ describe("MediaMuteAndSwitchButton", () => {
);
await user.click(getByRole("button", { name: "Microphone" }));
await user.click(screen.getByRole("menuitem", { name: "Microphone 2" }));
await user.click(
screen.getByRole("menuitemradio", { name: "Microphone 2" }),
);
expect(onSelect).toHaveBeenCalledWith("mic2");
});
@@ -228,7 +230,9 @@ describe("MediaMuteAndSwitchButton", () => {
);
await user.click(getByRole("button", { name: "Microphone" }));
await user.click(screen.getByRole("menuitem", { name: "Microphone 1" }));
await user.click(
screen.getByRole("menuitemradio", { name: "Microphone 1" }),
);
expect(onSelect).not.toHaveBeenCalled();
});
@@ -264,18 +268,24 @@ describe("MediaMuteAndSwitchButton", () => {
const { getByRole } = renderComponent(<Wrapper />);
await user.click(getByRole("button", { name: "Microphone" }));
await user.click(screen.getByRole("menuitem", { name: "Microphone 2" }));
await user.click(
screen.getByRole("menuitemradio", { name: "Microphone 2" }),
);
expect(onSelectPressed).toHaveBeenCalled();
expect(onOptionUpdated).not.toHaveBeenCalled();
// After clicking, plannedSelection="mic2" but selectedOption is still "mic1",
// so a spinner should appear on the mic2 item
const mic2Item = screen.getByRole("menuitem", { name: "Microphone 2" });
expect(mic2Item.querySelector(".rotate")).toBeTruthy();
// so mic2 should be in an activating state
screen.getByRole("menuitemradio", {
name: "Microphone 2 Activating…",
checked: false,
});
// The currently-selected mic1 item should not have a spinner
const mic1Item = screen.getByRole("menuitem", { name: "Microphone 1" });
expect(mic1Item.querySelector(".rotate")).toBeNull();
// The currently-selected mic1 item should not be activating
screen.getByRole("menuitemradio", {
name: "Microphone 1",
checked: true,
});
await act(async () => {
// resolve the promise that acutally updates the select option.
resolve();
@@ -284,7 +294,7 @@ describe("MediaMuteAndSwitchButton", () => {
expect(onOptionUpdated).toHaveBeenCalled();
// Spinner should now be gone since the selection has caught up
const mic2ItemAfter = screen.getByRole("menuitem", {
const mic2ItemAfter = screen.getByRole("menuitemradio", {
name: "Microphone 2",
});
expect(mic2ItemAfter.querySelector(".rotate")).toBeNull();
@@ -336,11 +346,15 @@ describe("MediaMuteAndSwitchButton", () => {
await user.click(getByRole("button", { name: "Microphone" }));
// The selected item (mic2) renders both an IconOptions SVG and a CheckIcon SVG
const mic1Item = screen.getByRole("menuitem", { name: "Microphone 2" });
const mic1Item = screen.getByRole("menuitemradio", {
name: "Microphone 2",
});
expect(mic1Item.querySelectorAll("svg").length).toBe(2);
// The unselected item (mic1) only renders its IconOptions SVG
const mic2Item = screen.getByRole("menuitem", { name: "Microphone 1" });
const mic2Item = screen.getByRole("menuitemradio", {
name: "Microphone 1",
});
expect(mic2Item.querySelectorAll("svg").length).toBe(1);
});
});

18
src/components/MediaMuteAndSwitchButton.tsx
View File

@@ -191,6 +191,7 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
width={24}
height={24}
className={styles.itemIcon}
aria-hidden
/>
)
}
@@ -201,10 +202,23 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
onSelect?.(id);
}}
key={id}
role="menuitemradio"
aria-checked={selectedOption === id}
>
{selectedOption === id && <CheckIcon width={24} height={24} />}
{selectedOption === id && (
<CheckIcon
width={24}
height={24}
aria-hidden // A label would be redundant to aria-checked above
/>
)}
{selectedOption !== id && plannedSelection === id && (
<SpinnerIcon width={24} height={24} className={styles.rotate} />
<SpinnerIcon
width={24}
height={24}
className={styles.rotate}
aria-label={t("settings.devices.activating")}
/>
)}
</MenuItem>
);

4
src/components/__snapshots__/MediaMuteAndSwitchButton.test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`MediaMuteAndSwitchButton > renders 1`] = `
<div>
<div
class="container"
class="_container_e649de"
>
<button
aria-busy="false"
@@ -35,7 +35,7 @@ exports[`MediaMuteAndSwitchButton > renders 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Microphone"
class="_button_1nw83_8 menuButton _has-icon_1nw83_60 _icon-only_1nw83_53"
class="_button_1nw83_8 _menuButton_e649de _has-icon_1nw83_60 _icon-only_1nw83_53"
data-kind="tertiary"
data-size="lg"
data-state="closed"

12
src/config/ConfigOptions.ts
View File

@@ -238,12 +238,6 @@ export interface ConfigOptions {
// Overrides members from ConfigOptions that are always provided by the
// default config and are therefore non-optional.
export interface ResolvedConfigOptions extends ConfigOptions {
default_server_config: {
["m.homeserver"]: {
base_url: string;
server_name: string;
};
};
sync_disconnect_grace_period_ms: number;
ssla: string;
media_quality: Required<
@@ -275,12 +269,6 @@ export interface ResolvedConfigOptions extends ConfigOptions {
}
export const DEFAULT_CONFIG: ResolvedConfigOptions = {
default_server_config: {
["m.homeserver"]: {
base_url: "http://localhost:8008",
server_name: "localhost",
},
},
features: {
feature_use_device_session_member_events: true,
},

1
src/controls.ts
View File

@@ -12,6 +12,7 @@ export interface Controls {
canEnterPip(): boolean;
enablePip(): void;
disablePip(): void;
onPipMediaOrientationUpdate?: (orientation: "landscape" | "portrait") => void;
setAvailableAudioDevices(devices: OutputDevice[]): void;
setAudioDevice(id: string): void;

10
src/e2ee/matrixKeyProvider.ts
View File

@@ -10,15 +10,15 @@ import {
type MatrixRTCSession,
MatrixRTCSessionEvent,
} from "matrix-js-sdk/lib/matrixrtc";
import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
import { logger as rootLogger, type Logger } from "matrix-js-sdk/lib/logger";
import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
const logger = rootLogger.getChild("[MatrixKeyProvider]");
export class MatrixKeyProvider extends BaseKeyProvider {
private rtcSession?: MatrixRTCSession;
private logger: Logger;
public constructor() {
super({ ratchetWindowSize: 10, keyringSize: 256 });
this.logger = rootLogger.getChild("[MatrixKeyProvider]");
}
public setRTCSession(rtcSession: MatrixRTCSession): void {
@@ -60,12 +60,12 @@ export class MatrixKeyProvider extends BaseKeyProvider {
encryptionKeyIndex,
);
logger.debug(
this.logger.debug(
`Sent new key to livekit room=${this.rtcSession?.room.roomId} participantId=${rtcBackendIdentity} (before hash: ${membershipParts.userId}:${membershipParts.deviceId}) encryptionKeyIndex=${encryptionKeyIndex}`,
);
},
(e) => {
logger.error(
this.logger.error(
`Failed to create key material from buffer for livekit room=${this.rtcSession?.room.roomId} participantId before hash=${membershipParts.userId}:${membershipParts.deviceId} encryptionKeyIndex=${encryptionKeyIndex}`,
e,
);

0
src/graphics/backgroundGradient.svg → src/graphics/desktop-gradient.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 938 B

After

Width:  |  Height:  |  Size: 938 B

48
src/graphics/loggedOutGradient.svg
View File

@@ -1,48 +0,0 @@
<svg width="1440" height="500" viewBox="0 0 1440 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f_4162_80135)">
<circle cx="720" cy="1620" r="1500" fill="url(#paint0_linear_4162_80135)"/>
<circle cx="720" cy="1620" r="1498.92" stroke="white" stroke-opacity="0.5" stroke-width="2.16028" style="mix-blend-mode:overlay"/>
</g>
<g filter="url(#filter1_f_4162_80135)">
<circle cx="720" cy="1550.86" r="1272.86" fill="white"/>
</g>
<defs>
<filter id="filter0_f_4162_80135" x="-900" y="0" width="3240" height="3240" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_4162_80135"/>
</filter>
<filter id="filter1_f_4162_80135" x="-672.863" y="158" width="2785.73" height="2785.73" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_4162_80135"/>
</filter>
<linearGradient id="paint0_linear_4162_80135" x1="549.5" y1="120" x2="549.5" y2="505.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#062993"/>
<stop offset="0.040404" stop-color="#02389D"/>
<stop offset="0.0808081" stop-color="#0045A6"/>
<stop offset="0.121212" stop-color="#0051AD"/>
<stop offset="0.161616" stop-color="#005DB4"/>
<stop offset="0.20202" stop-color="#0069BA"/>
<stop offset="0.242424" stop-color="#0075BB"/>
<stop offset="0.282828" stop-color="#0081BB"/>
<stop offset="0.323232" stop-color="#008CB9"/>
<stop offset="0.363636" stop-color="#0098B7"/>
<stop offset="0.40404" stop-color="#00A3B3"/>
<stop offset="0.444444" stop-color="#00AEAD"/>
<stop offset="0.484848" stop-color="#00B8A4"/>
<stop offset="0.525253" stop-color="#00C2A0"/>
<stop offset="0.565657" stop-color="#00CC99"/>
<stop offset="0.606061" stop-color="#3AD396"/>
<stop offset="0.646465" stop-color="#5DD898"/>
<stop offset="0.686869" stop-color="#79DD99"/>
<stop offset="0.727273" stop-color="#92E29B"/>
<stop offset="0.767677" stop-color="#A8E69F"/>
<stop offset="0.808081" stop-color="#BBEAA5"/>
<stop offset="0.848485" stop-color="#CDEEAE"/>
<stop offset="0.888889" stop-color="#DCF2B9"/>
<stop offset="0.929293" stop-color="#EAF6C7"/>
<stop offset="0.969697" stop-color="#F5FBD5"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

86
src/graphics/mobile-gradient.svg Normal file
View File

@@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="1200"
height="285"
viewBox="0 0 1200 285"
fill="none"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<g
filter="url(#filter0_f_3970_9366)"
id="g2"
transform="translate(422.00201)">
<path
d="m -164.342,495.134 c 188.2881,-188.288 494.684,-190 684.684,0"
stroke="url(#paint0_linear_3970_9366)"
stroke-width="235.517"
stroke-linecap="round"
id="path1"
style="stroke:url(#paint0_linear_3970_9366)" />
<path
d="m -164.342,495.134 c 188.2881,-188.288 494.684,-190 684.684,0"
stroke="url(#paint1_linear_3970_9366)"
style="mix-blend-mode:overlay;stroke:url(#paint1_linear_3970_9366)"
stroke-width="235.517"
stroke-linecap="round"
id="path2" />
</g>
<defs
id="defs5">
<filter
id="filter0_f_3970_9366"
x="-517.617"
y="-0.00012207"
width="1391.23"
height="848.409"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood
flood-opacity="0"
result="BackgroundImageFix"
id="feFlood2" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
id="feBlend2" />
<feGaussianBlur
stdDeviation="117.758"
result="effect1_foregroundBlur_3970_9366"
id="feGaussianBlur2" />
</filter>
<linearGradient
id="paint0_linear_3970_9366"
x1="349.17099"
y1="323.96301"
x2="6.82898"
y2="666.30499"
gradientUnits="userSpaceOnUse">
<stop
stop-color="#0D5CBD"
id="stop2" />
<stop
offset="0.730863"
stop-color="#0DBDA8"
id="stop3" />
</linearGradient>
<linearGradient
id="paint1_linear_3970_9366"
x1="349.17099"
y1="323.96301"
x2="6.82898"
y2="666.30499"
gradientUnits="userSpaceOnUse">
<stop
stop-color="#0D5CBD"
id="stop4" />
<stop
offset="0.730863"
stop-color="#0DBDA8"
id="stop5" />
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/graphics/video-placeholder.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 B

0
src/grid/OneOnOneLandscapeLayout.module.css → src/grid/OneOnOneDesktopLayout.module.css
View File

14
src/grid/OneOnOneLandscapeLayout.tsx → src/grid/OneOnOneDesktopLayout.tsx
View File

@@ -10,28 +10,28 @@ import { type ReactNode, useCallback, useMemo } from "react";
import { useObservableEagerState } from "observable-hooks";
import classNames from "classnames";
import { type OneOnOneLandscapeLayout as OneOnOneLandscapeLayoutModel } from "../state/layout-types.ts";
import { type OneOnOneDesktopLayout as OneOnOneDesktopLayoutModel } from "../state/layout-types.ts";
import { type CallLayout, arrangeTiles } from "./CallLayout";
import styles from "./OneOnOneLandscapeLayout.module.css";
import styles from "./OneOnOneDesktopLayout.module.css";
import { type DragCallback, useUpdateLayout } from "./Grid";
import { useBehavior } from "../useBehavior";
/**
* An implementation of the "one-on-one" layout for landscape screens, in which
* An implementation of the "one-on-one" layout for desktop platforms, in which
* the remote participant is shown at maximum size, overlaid by a small view of
* the local participant.
*/
export const makeOneOnOneLandscapeLayout: CallLayout<
OneOnOneLandscapeLayoutModel
export const makeOneOnOneDesktopLayout: CallLayout<
OneOnOneDesktopLayoutModel
> = ({ minBounds$ }) => ({
foreground: "fixed",
fixed: function OneOnOneLandscapeLayoutFixed({ ref }): ReactNode {
fixed: function OneOnOneDesktopLayoutFixed({ ref }): ReactNode {
useUpdateLayout();
return <div ref={ref} />;
},
scrolling: function OneOnOneLandscapeLayoutScrolling({
scrolling: function OneOnOneDesktopLayoutScrolling({
ref,
model,
Slot,

22
src/grid/OneOnOnePortraitLayout.module.css → src/grid/OneOnOneMobileLayout.module.css
View File

@@ -19,14 +19,28 @@ Please see LICENSE in the repository root for full details.
inset: var(--cpd-space-4x);
}
/* Give the PiP a landscape aspect ratio */
.pip[data-size="sm"] {
inline-size: 88px;
block-size: 132px;
inline-size: 132px;
block-size: 88px;
}
.pip[data-size="lg"] {
inline-size: 140px;
block-size: 210px;
inline-size: 210px;
block-size: 140px;
}
@media (max-width: 600px) {
/* Give the PiP a portrait aspect ratio */
.pip[data-size="sm"] {
inline-size: 88px;
block-size: 132px;
}
.pip[data-size="lg"] {
inline-size: 140px;
block-size: 210px;
}
}
.pip[data-block-alignment="start"] {

14
src/grid/OneOnOnePortraitLayout.tsx → src/grid/OneOnOneMobileLayout.tsx
View File

@@ -9,23 +9,23 @@ Please see LICENSE in the repository root for full details.
import { type ReactNode, useCallback } from "react";
import classNames from "classnames";
import { type OneOnOnePortraitLayout as OneOnOnePortraitLayoutModel } from "../state/layout-types.ts";
import { type OneOnOneMobileLayout as OneOnOneMobileLayoutModel } from "../state/layout-types.ts";
import { type CallLayout } from "./CallLayout";
import styles from "./OneOnOnePortraitLayout.module.css";
import styles from "./OneOnOneMobileLayout.module.css";
import { type DragCallback, useUpdateLayout } from "./Grid";
import { useBehavior } from "../useBehavior";
/**
* An implementation of the "one-on-one" layout for portrait screens, in which
* An implementation of the "one-on-one" layout for mobile platforms, in which
* the remote participant is shown at maximum size, overlaid by a small view of
* the local participant.
*/
export const makeOneOnOnePortraitLayout: CallLayout<
OneOnOnePortraitLayoutModel
export const makeOneOnOneMobileLayout: CallLayout<
OneOnOneMobileLayoutModel
> = () => ({
foreground: "scrolling",
fixed: function OneOnOnePortraitLayoutFixed({ ref, model, Slot }): ReactNode {
fixed: function OneOnOneMobileLayoutFixed({ ref, model, Slot }): ReactNode {
useUpdateLayout();
return (
<div ref={ref} className={styles.layer}>
@@ -38,7 +38,7 @@ export const makeOneOnOnePortraitLayout: CallLayout<
);
},
scrolling: function OneOnOnePortraitLayoutScrolling({
scrolling: function OneOnOneMobileLayoutScrolling({
ref,
model,
Slot,

31
src/index.css
View File

@@ -15,8 +15,7 @@ Please see LICENSE in the repository root for full details.
@import url("@fontsource/inconsolata/700.css");
@import url("normalize.css/normalize.css") layer(normalize);
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css")
layer(compound);
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
@import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
:root {
@@ -28,12 +27,6 @@ layer(compound);
--font-size-title: calc(24px * var(--font-scale));
--font-size-headline: calc(32px * var(--font-scale));
/* These colors are needed during the transitionary period between the old and
new Compound design systems, but should be removed ASAP */
--stopgap-color-on-solid-accent: var(--cpd-color-bg-canvas-default);
--stopgap-background-85: rgba(255, 255, 255, 0.85);
--stopgap-bgColor3: #444;
--cpd-color-border-accent: var(--cpd-color-green-800);
/* The distance to inset non-full-width content from the edge of the window
along the inline axis. This ramps up from 16px for typical mobile windows, to
@@ -55,7 +48,6 @@ layer(compound);
--small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
--big-drop-shadow: 0px 0px 24px 0px #1b1d221a;
--subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
--background-gradient: url("graphics/backgroundGradient.svg");
--call-view-overlay-layer: 1;
--call-view-header-footer-layer: 2;
@@ -74,9 +66,6 @@ layer(compound);
body {
background-color: var(--cpd-color-bg-canvas-default);
background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
background-repeat: no-repeat;
background-position: center;
color: var(--cpd-color-text-primary);
color-scheme: dark;
margin: 0;
@@ -85,6 +74,24 @@ body {
-webkit-tap-highlight-color: transparent;
}
@media (min-height: 330px) {
body[data-background="gradient"]::before {
content: "";
position: fixed;
inset: 0;
background-image: url("graphics/mobile-gradient.svg");
background-size: auto;
background-position: bottom;
background-repeat: no-repeat;
}
body[data-background="gradient"][data-platform="desktop"]::before {
background-image: url("graphics/desktop-gradient.svg");
background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
background-position: center;
}
}
/* This prohibits the view to scroll for pages smaller than 122px in width
we use this for mobile pip webviews */
.no-scroll-body {

8
src/input/Input.module.css
View File

@@ -173,14 +173,6 @@ Please see LICENSE in the repository root for full details.
border-color: var(--cpd-color-border-disabled);
}
.checkbox svg {
display: none;
}
.checkbox svg * {
stroke: var(--stopgap-color-on-solid-accent);
}
.checkboxField input[type="checkbox"]:checked + label > .checkbox {
background: var(--cpd-color-text-action-accent);
border-color: var(--cpd-color-text-action-accent);

2
src/livekit/MatrixAudioRenderer.test.tsx
View File

@@ -99,7 +99,7 @@ function renderTestComponent(
),
} as unknown as Room;
if (explicitTracks?.length ?? 0 > 0) {
if ((explicitTracks?.length ?? 0) > 0) {
tracks = explicitTracks!.map(({ participantId, source, kind }) => {
const participant =
liveKitParticipants.find((p) => p.identity === participantId) ??

6
src/livekit/MatrixAudioRenderer.tsx
View File

@@ -14,7 +14,7 @@ import {
AudioTrack,
type AudioTrackProps,
} from "@livekit/components-react";
import { logger } from "matrix-js-sdk/lib/logger";
import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
import { useEarpieceAudioConfig } from "../MediaDevicesContext";
import { useReactiveState } from "../useReactiveState";
@@ -40,7 +40,6 @@ export interface MatrixAudioRendererProps {
muted?: boolean;
}
const prefixedLogger = logger.getChild("[MatrixAudioRenderer]");
/**
* Takes care of handling remote participants’ audio tracks and makes sure that microphones and screen share are audible.
*
@@ -60,6 +59,7 @@ export function LivekitRoomAudioRenderer({
validIdentities,
muted,
}: MatrixAudioRendererProps): ReactNode {
const logger = rootLogger.getChild("[MatrixAudioRenderer]");
const tracks = useTracks(
[
Track.Source.Microphone,
@@ -80,7 +80,7 @@ export function LivekitRoomAudioRenderer({
if (!isValid) {
// TODO make sure to also skip the warn logging for the local identity
// Log that there is an invalid identity, that means that someone is publishing audio that is not expected to be in the call.
prefixedLogger.warn(
logger.warn(
`Audio track ${ref.participant.identity} from ${url} has no matching matrix call member`,
`current members: ${validIdentities.join()}`,
`track will not get rendered`,

7
src/livekit/TrackProcessorContext.tsx
View File

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
import {
ProcessorWrapper,
supportsBackgroundProcessors,
supportsBackgroundProcessors as supportsBackgroundProcessorsLivekitSdk,
type BackgroundOptions,
} from "@livekit/track-processors";
import {
@@ -29,6 +29,7 @@ import {
import { BlurBackgroundTransformer } from "./BlurBackgroundTransformer";
import { type Behavior } from "../state/Behavior";
import { type ObservableScope } from "../state/ObservableScope";
import { platform } from "../Platform";
//TODO-MULTI-SFU: This is not yet fully there.
// it is a combination of exposing observable and react hooks.
@@ -106,6 +107,10 @@ interface Props {
children: JSX.Element;
}
function supportsBackgroundProcessors(): boolean {
return supportsBackgroundProcessorsLivekitSdk() && platform === "desktop";
}
export const ProcessorProvider: FC<Props> = ({ children }) => {
// The setting the user wants to have
const [blurActivated] = useSetting(backgroundBlurSettings);

12
src/reactions/__snapshots__/RaisedHandIndicator.test.tsx.snap
View File

@@ -2,10 +2,10 @@
exports[`RaisedHandIndicator > renders a smaller indicator when miniature is specified 1`] = `
<div
class="reactionIndicatorWidget"
class="_reactionIndicatorWidget_abd277"
>
<div
class="reaction"
class="_reaction_abd277"
>
<span
aria-label="Reaction"
@@ -22,10 +22,10 @@ exports[`RaisedHandIndicator > renders a smaller indicator when miniature is spe
exports[`RaisedHandIndicator > renders an indicator when a hand has been raised 1`] = `
<div
class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
class="_reactionIndicatorWidget_abd277 _reactionIndicatorWidgetLarge_abd277"
>
<div
class="reaction reactionLarge"
class="_reaction_abd277 _reactionLarge_abd277"
>
<span
aria-label="Reaction"
@@ -42,10 +42,10 @@ exports[`RaisedHandIndicator > renders an indicator when a hand has been raised
exports[`RaisedHandIndicator > renders an indicator when a hand has been raised with the expected time 1`] = `
<div
class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
class="_reactionIndicatorWidget_abd277 _reactionIndicatorWidgetLarge_abd277"
>
<div
class="reaction reactionLarge"
class="_reaction_abd277 _reactionLarge_abd277"
>
<span
aria-label="Reaction"

35
src/room/GroupCallView.test.tsx
View File

@@ -272,7 +272,7 @@ test.skip("GroupCallView plays a leave sound synchronously in widget mode", asyn
expect(leaveRTCSession).toHaveBeenCalledOnce();
});
test("Should close widget when all other left and have time to play a sound", async () => {
test("Should close widget when all other left and play a sound", async () => {
const user = userEvent.setup();
let widgetClosedCalled = false;
const { promise: widgetClosedPromise, resolve: widgetClosedResolver } =
@@ -310,8 +310,6 @@ test("Should close widget when all other left and have time to play a sound", as
expect(widgetClosedCalled).toBeFalsy();
resolvePlaySound.resolve();
// Expect the leave sound to be played but silent (volumeOverwrite = 0)
// The allOthersLeft effect should already play a leave sound for the last user in the call.
expect(playSound).toHaveBeenCalledWith("left", 0);
await widgetClosedPromise;
await flushPromises();
@@ -319,37 +317,6 @@ test("Should close widget when all other left and have time to play a sound", as
expect(widgetStopMock).toHaveBeenCalledOnce();
}, 80000);
test("Should close widget when all other left", async () => {
const user = userEvent.setup();
const widgetClosedCalled = Promise.withResolvers<void>();
const widgetSendMock = vi.fn().mockImplementation((action: string) => {
if (action === ElementWidgetActions.Close) {
widgetClosedCalled.resolve();
}
});
const widgetStopMock = vi.fn().mockResolvedValue(undefined);
const widget = {
api: {
setAlwaysOnScreen: vi.fn().mockResolvedValue(true),
transport: {
send: widgetSendMock,
reply: vi.fn().mockResolvedValue(undefined),
stop: widgetStopMock,
} as unknown as ITransport,
} as Partial<WidgetHelpers["api"]>,
lazyActions: new LazyEventEmitter(),
};
const { getByText } = createGroupCallView(widget as WidgetHelpers);
const leaveButton = getByText("SimulateOtherLeft");
await user.click(leaveButton);
await flushPromises();
await widgetClosedCalled.promise;
await flushPromises();
expect(widgetStopMock).toHaveBeenCalledOnce();
});
test("Should not close widget when auto leave due to error", async () => {
const user = userEvent.setup();

8
src/room/GroupCallView.tsx
View File

@@ -553,11 +553,9 @@ export const GroupCallView: FC<Props> = ({
});
}
}}
onError={
(/**error*/) => {
if (rtcSession.isJoined()) onLeft("error");
}
}
onError={(_error) => {
if (rtcSession.isJoined()) onLeft("error");
}}
>
{body}
</GroupCallErrorBoundary>

34
src/room/InCallView.module.css
View File

@@ -14,6 +14,23 @@ Please see LICENSE in the repository root for full details.
overflow-y: auto;
}
/* Normally the footer uses a transparent background to allow our expressive
page gradients to shine through. However, we sometimes need to visually separate
it from the content underneath. If the call layout is overflowing, or if the
spotlight tile is maximised and displaying video, apply a gradient background. */
.overflowing > .footer,
.fixedGrid:has(
> .tile[data-maximised="true"]
.spotlightItem[data-background="transparent"][data-video-enabled="true"][aria-hidden="false"]
)
~ .footer {
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
var(--cpd-color-bg-canvas-default) 100%
);
}
.header {
position: sticky;
flex-shrink: 0;
@@ -82,19 +99,18 @@ Please see LICENSE in the repository root for full details.
/* Disable pointer events so the overlay doesn't block interaction with
elements behind it */
pointer-events: none;
}
.fixedGrid > :not(:first-child),
.scrollingGrid > :not(:first-child) {
pointer-events: initial;
> :not(:first-child) {
pointer-events: initial;
}
.tile {
position: absolute;
inset-block-start: 0;
}
}
.tile {
position: absolute;
inset-block-start: 0;
}
.tile.maximised {
position: relative;
flex-grow: 1;
}

48
src/room/InCallView.test.tsx
View File

@@ -7,7 +7,6 @@ Please see LICENSE in the repository root for full details.
*/
import {
afterEach,
beforeEach,
describe,
expect,
@@ -15,12 +14,7 @@ import {
type MockedFunction,
vi,
} from "vitest";
import {
render,
type RenderResult,
getByRole,
screen,
} from "@testing-library/react";
import { render, type RenderResult } from "@testing-library/react";
import { type LocalParticipant } from "livekit-client";
import { BehaviorSubject, of } from "rxjs";
import { BrowserRouter } from "react-router-dom";
@@ -50,7 +44,6 @@ import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer";
import { MediaDevicesContext } from "../MediaDevicesContext";
import { type MediaDevices as ECMediaDevices } from "../state/MediaDevices";
import { constant } from "../state/Behavior";
import { AppBar } from "../AppBar";
import { initializeWidget } from "../widget";
@@ -195,45 +188,6 @@ describe("InCallView", () => {
});
});
describe("settings button with AppBar header", () => {
beforeEach(() => {
// getUrlParams() reads window.location directly rather than from the
// React Router context, so MemoryRouter alone is not enough to make
// it see "header=app_bar". Push the real URL so both paths agree.
window.history.pushState({}, "", "?header=app_bar");
});
afterEach(() => {
window.history.pushState({}, "", "/");
});
it("mobile portrait, is visible in the header", () => {
createInCallView({
withAppBar: true,
callViewModelOptions: {
// Narrow like a mobile phone in portrait orientation
windowSize$: constant({ width: 400, height: 700 }),
},
});
getByRole(screen.getByRole("banner"), "button", {
name: "Settings",
});
});
it("mobile landscape, is not visible anywhere", () => {
const { queryByRole } = createInCallView({
withAppBar: true,
callViewModelOptions: {
// Flat like a mobile phone in landscape orientation
windowSize$: constant({ width: 700, height: 400 }),
},
});
expect(queryByRole("button", { name: "Settings" })).not.toBeVisible();
});
});
describe("audioOutputSwitcher", () => {
it("is visible and can be clicked", async () => {
const user = userEvent.setup();

88
src/room/InCallView.tsx
View File

@@ -44,14 +44,13 @@ import {
createCallViewModel$,
} from "../state/CallViewModel/CallViewModel.ts";
import { Grid, type TileProps } from "../grid/Grid";
import { useInitial } from "../useInitial";
import { SpotlightTile } from "../tile/SpotlightTile";
import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
import { E2eeType } from "../e2ee/e2eeType";
import { makeGridLayout } from "../grid/GridLayout";
import { type CallLayoutOutputs } from "../grid/CallLayout";
import { makeOneOnOneLandscapeLayout } from "../grid/OneOnOneLandscapeLayout";
import { makeOneOnOnePortraitLayout } from "../grid/OneOnOnePortraitLayout";
import { makeOneOnOneDesktopLayout } from "../grid/OneOnOneDesktopLayout";
import { makeOneOnOneMobileLayout } from "../grid/OneOnOneMobileLayout";
import { makeSpotlightExpandedLayout } from "../grid/SpotlightExpandedLayout";
import { makeSpotlightLandscapeLayout } from "../grid/SpotlightLandscapeLayout";
import { makeSpotlightPortraitLayout } from "../grid/SpotlightPortraitLayout";
@@ -69,22 +68,24 @@ import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer.tsx";
import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
import { useMediaDevices } from "../MediaDevicesContext.ts";
import { EarpieceOverlay } from "./EarpieceOverlay.tsx";
import { useAppBarHidden, useAppBarSecondaryButton } from "../AppBar.tsx";
import {
useAppBarHidden,
useAppBarSecondaryButton,
useAppBarSubtitle,
} from "../AppBar.tsx";
import { useBehavior } from "../useBehavior.ts";
import { constant } from "../state/Behavior.ts";
import { Toast } from "../Toast.tsx";
import overlayStyles from "../Overlay.module.css";
import { prefetchSounds } from "../soundUtils";
import { useAudioContext } from "../useAudioContext";
import ringtoneMp3 from "../sound/ringtone.mp3?url";
import ringtoneOgg from "../sound/ringtone.ogg?url";
import { useTrackProcessorObservable$ } from "../livekit/TrackProcessorContext.tsx";
import { type Layout } from "../state/layout-types.ts";
import { ObservableScope } from "../state/ObservableScope.ts";
import { useLatest } from "../useLatest.ts";
import { CallFooter, type FooterSnapshot } from "../components/CallFooter.tsx";
import { SettingsIconButton } from "../button/Button.tsx";
import { createCallFooterViewModel } from "../components/CallFooterViewModel.tsx";
import { type ViewModel } from "../state/ViewModel.ts";
import { RingingStatus } from "../tile/RingingStatus.tsx";
import { RingingAudioRenderer } from "./RingingAudioRenderer.tsx";
declare module "react" {
interface CSSProperties {
@@ -93,8 +94,6 @@ declare module "react" {
}
}
const logger = rootLogger.getChild("[InCallView]");
export interface ActiveCallProps extends Omit<
InCallViewProps,
"vm" | "livekitRoom" | "connState" | "footerVm"
@@ -115,7 +114,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
const mediaDevices = useMediaDevices();
const trackProcessorState$ = useTrackProcessorObservable$();
useEffect(() => {
logger.info("START CALL VIEW SCOPE");
rootLogger.info("START CALL VIEW SCOPE");
const scope = new ObservableScope();
const reactionsReader = new ReactionsReader(scope, props.rtcSession);
const { autoLeaveWhenOthersLeft, waitForCallPickup, sendNotificationType } =
@@ -217,6 +216,7 @@ export const InCallView: FC<InCallViewProps> = ({
muteStates,
onShareClick,
}) => {
const logger = rootLogger.getChild("[InCallView]");
const { t } = useTranslation();
const { sendReaction, toggleRaisedHand } = useReactionsSender();
@@ -240,20 +240,6 @@ export const InCallView: FC<InCallViewProps> = ({
const { showControls, header: headerStyle } = useUrlParams();
const muteAllAudio = useBehavior(muteAllAudio$);
// Preload a waiting and decline sounds
const pickupPhaseSoundCache = useInitial(async () => {
return prefetchSounds({
waiting: { mp3: ringtoneMp3, ogg: ringtoneOgg },
});
});
const pickupPhaseAudio = useAudioContext({
sounds: pickupPhaseSoundCache,
latencyHint: "interactive",
muted: muteAllAudio,
});
const latestPickupPhaseAudio = useLatest(pickupPhaseAudio);
const toggleAudio = useBehavior(muteStates.audio.toggle$);
const toggleVideo = useBehavior(muteStates.video.toggle$);
const setAudioEnabled = useBehavior(muteStates.audio.setEnabled$);
@@ -266,12 +252,13 @@ export const InCallView: FC<InCallViewProps> = ({
() => void toggleRaisedHand(),
);
const ringing = useBehavior(vm.ringing$);
const ringingVm = useBehavior(vm.ringingVm$);
const audioParticipants = useBehavior(vm.livekitRoomItems$);
const participantCount = useBehavior(vm.participantCount$);
const reconnecting = useBehavior(vm.reconnecting$);
const layout = useBehavior(vm.layout$);
const edgeToEdge = useBehavior(vm.edgeToEdge$);
const overflowing = useBehavior(vm.overflowing$);
const showNameTags = useBehavior(vm.showNameTags$);
const showHeader = useBehavior(vm.showHeader$);
const settingsOpen = useBehavior(vm.settingsOpen$);
@@ -286,22 +273,6 @@ export const InCallView: FC<InCallViewProps> = ({
throw fatalCallError;
}
// While ringing, loop the ringtone
useEffect((): void | (() => void) => {
const audio = latestPickupPhaseAudio.current;
if (ringing && audio) {
const endSound = audio.playSoundLooping(
"waiting",
audio.soundDuration["waiting"] ?? 1,
);
return () => {
void endSound().catch((e) => {
logger.error("Failed to stop ringing sound", e);
});
};
}
}, [ringing, latestPickupPhaseAudio]);
// iOS Safari doesn't reliably fire `click` on plain <div>s, so we listen
// for `pointerup` instead. Scrolls end in `pointercancel`, not `pointerup`,
// so this still only fires for taps.
@@ -363,6 +334,11 @@ export const InCallView: FC<InCallViewProps> = ({
);
useAppBarHidden(!showHeader);
useAppBarSubtitle(
ringingVm && vm.ringingStatusLocation === "app_bar" && (
<RingingStatus vm={ringingVm} />
),
);
let header: ReactNode = null;
switch (headerStyle) {
@@ -457,6 +433,12 @@ export const InCallView: FC<InCallViewProps> = ({
);
const showSpeakingIndicators = useBehavior(vm.showSpeakingIndicators$);
const showNameTags = useBehavior(vm.showNameTags$);
const showRingingStatus = vm.ringingStatusLocation === "tile";
const showOutline = useBehavior(
model instanceof GridTileViewModel
? model.showOutline$
: constant(false),
);
return model instanceof GridTileViewModel ? (
<GridTile
@@ -469,6 +451,8 @@ export const InCallView: FC<InCallViewProps> = ({
style={style}
showSpeakingIndicators={showSpeakingIndicators}
showNameTags={showNameTags}
showRingingStatus={showRingingStatus}
showOutline={showOutline}
focusable={!contentObscured}
/>
) : (
@@ -481,8 +465,10 @@ export const InCallView: FC<InCallViewProps> = ({
targetHeight={targetHeight}
showIndicators={showSpotlightIndicators}
showNameTags={showNameTags}
showRingingStatus={showRingingStatus}
focusable={!contentObscured}
className={classNames(className, styles.tile)}
itemClassName={styles.spotlightItem}
style={style}
/>
);
@@ -497,8 +483,8 @@ export const InCallView: FC<InCallViewProps> = ({
"spotlight-landscape": makeSpotlightLandscapeLayout(inputs),
"spotlight-portrait": makeSpotlightPortraitLayout(inputs),
"spotlight-expanded": makeSpotlightExpandedLayout(inputs),
"one-on-one-landscape": makeOneOnOneLandscapeLayout(inputs),
"one-on-one-portrait": makeOneOnOnePortraitLayout(inputs),
"one-on-one-desktop": makeOneOnOneDesktopLayout(inputs),
"one-on-one-mobile": makeOneOnOneMobileLayout(inputs),
};
}, [gridBoundsObservable$]);
@@ -507,7 +493,9 @@ export const InCallView: FC<InCallViewProps> = ({
if (layout.type === "pip") {
return (
<SpotlightTile
className={classNames(styles.tile, styles.maximised)}
className={styles.tile}
itemClassName={styles.spotlightItem}
data-maximised
vm={layout.spotlight}
expanded
onToggleExpanded={null}
@@ -515,6 +503,7 @@ export const InCallView: FC<InCallViewProps> = ({
targetHeight={gridBounds.height}
showIndicators={false}
showNameTags={showNameTags}
showRingingStatus={vm.ringingStatusLocation === "tile"}
focusable={!contentObscured}
aria-hidden={contentObscured}
/>
@@ -598,7 +587,7 @@ export const InCallView: FC<InCallViewProps> = ({
// Only hide the settings button if we have an AppBar header and we are showing the header
const footer = footerVm !== null && (
<CallFooter ref={footerRef} vm={footerVm} />
<CallFooter className={styles.footer} ref={footerRef} vm={footerVm} />
);
const allConnections = useBehavior(vm.allConnections$);
@@ -607,7 +596,9 @@ export const InCallView: FC<InCallViewProps> = ({
// and the footer is also viewable by moving focus into it, so this is fine.
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div
className={styles.inRoom}
className={classNames(styles.inRoom, {
[styles.overflowing]: overflowing,
})}
ref={containerRef}
onPointerUp={onViewPointerUp}
onPointerMove={onPointerMove}
@@ -626,6 +617,7 @@ export const InCallView: FC<InCallViewProps> = ({
{renderContent()}
<CallEventAudioRenderer vm={vm} muted={muteAllAudio} />
<ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />
<RingingAudioRenderer vm={ringingVm} muted={muteAllAudio} />
{reconnectingToast}
{earpieceOverlay}
<ReactionsOverlay vm={vm} />

44
src/room/LayoutSwitch.tsx Normal file
View File

@@ -0,0 +1,44 @@
/*
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.
*/
import { useId, type FC } from "react";
import {
SpotlightViewIcon,
GridIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import { type LayoutSwitchViewModel } from "../state/LayoutSwitchViewModel";
import { useBehavior } from "../useBehavior";
import { useTranslation } from "react-i18next";
import { Switch } from "@vector-im/compound-web";
interface Props {
vm: LayoutSwitchViewModel;
className?: string;
}
export const LayoutSwitch: FC<Props> = ({ vm, className }) => {
const { t } = useTranslation();
const layout = useBehavior(vm.layout$);
const name = useId();
return (
<Switch<"spotlight", "grid">
name={name}
aria-label={t("layout_switch_label")}
leftLabel={t("layout_spotlight_label")}
leftValue="spotlight"
leftIcon={SpotlightViewIcon}
rightLabel={t("layout_grid_label")}
rightValue="grid"
rightIcon={GridIcon}
className={className}
value={layout}
onChange={vm.setLayout}
/>
);
};

96
src/room/LobbyView.test.tsx
View File

@@ -11,6 +11,10 @@ import { BrowserRouter } from "react-router-dom";
import { TooltipProvider } from "@vector-im/compound-web";
import { type MatrixClient } from "matrix-js-sdk";
import { axe } from "vitest-axe";
import {
ArrowLeftIcon,
ChevronLeftIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import { LobbyView } from "./LobbyView";
import { E2eeType } from "../e2ee/e2eeType";
@@ -20,6 +24,7 @@ import { type ProcessorState } from "../livekit/TrackProcessorContext";
import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
import lobbyStyles from "./LobbyView.module.css";
import headerStyles from "../Header.module.css";
import { AppBar } from "../AppBar";
vi.mock("@livekit/components-react", () => ({
usePreviewTracks: (): unknown[] => [],
@@ -47,6 +52,13 @@ const mockClient = {
getDeviceId: () => "DEVICE",
} as Partial<MatrixClient> as MatrixClient;
const platformMock = vi.hoisted(() => vi.fn(() => "desktop"));
vi.mock("../Platform", () => ({
get platform(): string {
return platformMock();
},
}));
const matrixInfo = {
userId: "@user:example.org",
displayName: "Test User",
@@ -60,25 +72,32 @@ const matrixInfo = {
function renderLobbyView(
props: Partial<Parameters<typeof LobbyView>[0]> = {},
withAppBar = false,
platform = "android",
): ReturnType<typeof render> {
platformMock.mockReturnValue(platform);
const mediaDevices = mockMediaDevices({});
const muteStates = mockMuteStates();
const hideHeader = withAppBar ? true : false;
const lobbyView = (
<LobbyView
client={mockClient}
matrixInfo={matrixInfo}
muteStates={muteStates}
onEnter={() => {}}
confineToRoom={false}
hideHeader={hideHeader}
participantCount={3}
onShareClick={null}
{...props}
/>
);
return render(
<BrowserRouter>
<MediaDevicesContext value={mediaDevices}>
<TooltipProvider>
<LobbyView
client={mockClient}
matrixInfo={matrixInfo}
muteStates={muteStates}
onEnter={() => {}}
confineToRoom={false}
hideHeader={false}
participantCount={3}
onShareClick={null}
{...props}
/>
{withAppBar && <AppBar>{lobbyView}</AppBar>}
{!withAppBar && lobbyView}
</TooltipProvider>
</MediaDevicesContext>
</BrowserRouter>,
@@ -97,9 +116,10 @@ describe("LobbyView", () => {
it("renders without header", () => {
const { container } = renderLobbyView({ hideHeader: true });
expect(
container.getElementsByClassName(headerStyles.header).length,
).toBeFalsy();
const els = container.getElementsByClassName(headerStyles.header);
for (const el of els) {
expect(el).not.toBeVisible();
}
});
it("renders with waiting for invite state", () => {
@@ -108,4 +128,50 @@ describe("LobbyView", () => {
});
expect(getByTestId("lobby_joinCall")).toHaveClass(lobbyStyles.wait);
});
it("renders with AppBar android", async () => {
const { container, getByRole } = renderLobbyView(
{
waitingForInvite: true,
},
true,
"android",
);
getByRole("banner");
// Check that the primary button uses ArrowLeftIcon (the back/return icon),
// not the default CollapseIcon
const { container: iconContainer } = render(<ArrowLeftIcon />);
const expectedSvgPath = iconContainer
.querySelector("path")!
.getAttribute("d");
const primaryButtonSvgPath = container
.querySelector("path")
?.getAttribute("d");
expect(primaryButtonSvgPath).toBe(expectedSvgPath);
expect(container).toMatchSnapshot();
expect(await axe(container)).toHaveNoViolations();
});
it("renders with AppBar ios", async () => {
const { container, getByRole } = renderLobbyView(
{
waitingForInvite: true,
},
true,
"ios",
);
getByRole("banner");
// Check that the primary button uses ArrowLeftIcon (the back/return icon),
// not the default CollapseIcon
const { container: iconContainer } = render(<ChevronLeftIcon />);
const expectedSvgPath = iconContainer
.querySelector("path")!
.getAttribute("d");
const primaryButtonSvgPath = container
.querySelector("path")
?.getAttribute("d");
expect(primaryButtonSvgPath).toBe(expectedSvgPath);
expect(container).toMatchSnapshot();
expect(await axe(container)).toHaveNoViolations();
});
});

4
src/room/LobbyView.tsx
View File

@@ -51,6 +51,7 @@ import { CallFooter, type FooterSnapshot } from "../components/CallFooter";
import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
import { createLobbyFooterViewModel } from "../components/CallFooterViewModel";
import { type ViewModel } from "../state/ViewModel";
import { useAppBarPrimaryButtonIconKind } from "../AppBar";
interface Props {
client: MatrixClient;
@@ -85,8 +86,9 @@ export const LobbyView: FC<Props> = ({
}, []);
const { t } = useTranslation();
usePageTitle(matrixInfo.roomName);
usePageTitle(matrixInfo.roomName);
useAppBarPrimaryButtonIconKind("back");
const audioEnabled = useBehavior(muteStates.audio.enabled$);
const videoEnabled = useBehavior(muteStates.video.enabled$);
const toggleAudio = useBehavior(muteStates.audio.toggle$);

59
src/room/RingingAudioRenderer.test.tsx Normal file
View File

@@ -0,0 +1,59 @@
/*
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.
*/
import { expect, type MockedFunction, test, vi } from "vitest";
import { act, render } from "@testing-library/react";
import { BehaviorSubject } from "rxjs";
import { useAudioContext } from "../useAudioContext";
import { createRingingMedia } from "../state/media/RingingMediaViewModel";
import { alice, aliceId } from "../utils/test-fixtures";
import { constant } from "../state/Behavior";
import { RingingAudioRenderer } from "./RingingAudioRenderer";
import { prefetchSounds } from "../soundUtils";
vi.mock("../useAudioContext");
vi.mock("../soundUtils");
test("ringtone plays on loop while ringing", () => {
(prefetchSounds as MockedFunction<typeof prefetchSounds>).mockResolvedValue({
sound: new ArrayBuffer(0),
});
const endSoundLooping = vi.fn().mockReturnValue(Promise.resolve());
const playSoundLooping = vi.fn().mockReturnValue(endSoundLooping);
(useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
playSound: vi.fn(),
playSoundLooping,
soundDuration: {},
});
const pickupState$ = new BehaviorSubject<"ringing" | "timeout" | "decline">(
"ringing",
);
const vm = createRingingMedia({
id: aliceId,
userId: alice.userId,
displayName$: constant("Alice"),
mxcAvatarUrl$: constant(undefined),
intent: "audio",
pickupState$,
});
// Begin ringing
render(<RingingAudioRenderer vm={vm} muted={false} />);
expect(playSoundLooping).toHaveBeenCalledExactlyOnceWith(
"ringtone",
expect.any(Number),
);
expect(endSoundLooping).not.toHaveBeenCalled();
vi.clearAllMocks();
// End ringing
act(() => pickupState$.next("decline"));
expect(playSoundLooping).not.toHaveBeenCalled();
expect(endSoundLooping).toHaveBeenCalledExactlyOnceWith();
});

72
src/room/RingingAudioRenderer.tsx Normal file
View File

@@ -0,0 +1,72 @@
/*
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.
*/
import { useEffect, type FC } from "react";
import { logger } from "matrix-js-sdk/lib/logger";
import { type RingingMediaViewModel } from "../state/media/RingingMediaViewModel";
import { useBehavior } from "../useBehavior";
import { useInitial } from "../useInitial";
import { prefetchSounds } from "../soundUtils";
import ringtoneMp3 from "../sound/ringtone.mp3?url";
import ringtoneOgg from "../sound/ringtone.ogg?url";
import { type UseAudioContext, useAudioContext } from "../useAudioContext";
import { useLatest } from "../useLatest";
interface RingingAudioRendererProps {
vm: RingingMediaViewModel | null;
muted: boolean;
}
export const RingingAudioRenderer: FC<RingingAudioRendererProps> = ({
vm,
muted,
}) => {
// Preload a waiting and decline sounds
const sounds = useInitial(async () => {
return prefetchSounds({
ringtone: { mp3: ringtoneMp3, ogg: ringtoneOgg },
});
});
const audio = useAudioContext({
sounds,
latencyHint: "interactive",
muted,
});
return vm && <ActiveRingingAudioRenderer vm={vm} audio={audio} />;
};
interface ActiveRingingAudioRendererProps {
vm: RingingMediaViewModel;
audio: UseAudioContext<"ringtone"> | null;
}
const ActiveRingingAudioRenderer: FC<ActiveRingingAudioRendererProps> = ({
vm,
audio,
}) => {
const audio_ = useLatest(audio);
const pickupState = useBehavior(vm.pickupState$);
// While ringing, loop the ringtone
useEffect((): void | (() => void) => {
if (pickupState === "ringing" && audio_.current) {
const endSound = audio_.current.playSoundLooping(
"ringtone",
audio_.current.soundDuration["ringtone"] ?? 1,
);
return () => {
void endSound().catch((e) => {
logger.error("Failed to stop ringing sound", e);
});
};
}
}, [pickupState, audio_]);
return null;
};

8
src/room/VideoPreview.module.css
View File

@@ -10,6 +10,8 @@ Please see LICENSE in the repository root for full details.
margin-right: var(--content-inset-right);
min-block-size: 0;
block-size: 50vh;
aspect-ratio: 16 / 9;
max-width: 100%;
border-radius: var(--cpd-space-4x);
position: relative;
overflow: hidden;
@@ -66,12 +68,6 @@ video.mirror {
);
}
@media (min-aspect-ratio: 1 / 1) {
.preview > video {
aspect-ratio: 16 / 9;
}
}
@media (max-width: 550px) {
.preview {
margin-inline: 0;

4
src/room/VideoPreview.tsx
View File

@@ -14,6 +14,7 @@ import { useTranslation } from "react-i18next";
import { TileAvatar } from "../tile/TileAvatar";
import styles from "./VideoPreview.module.css";
import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
import videoPlaceholder from "../graphics/video-placeholder.gif";
export type MatrixInfo = {
userId: string;
@@ -74,6 +75,9 @@ export const VideoPreview: FC<Props> = ({
// There's no reason for this to be focusable
tabIndex={-1}
disablePictureInPicture
// Set the placeholder to a small transparent image. (On Android web
// views the default poster image is particularly ugly.)
poster={videoPlaceholder}
/>
{(!videoEnabled || cameraIsStarting) && (
<>

252
src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap
View File

@@ -3,17 +3,17 @@
exports[`ConnectionLostError: Action handling should reset error state 1`] = `
<DocumentFragment>
<div
class="page"
class="_page_4be5c0"
>
<header
class="header"
class="_header_e4b327"
>
<div
class="nav leftNav"
class="_nav_e4b327 _leftNav_e4b327"
>
<a
aria-label="Element Call Home"
class="headerLogo"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
>
@@ -95,20 +95,20 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
</a>
</div>
<div
class="nav rightNav"
class="_nav_e4b327 _rightNav_e4b327"
/>
</header>
<div
class="container"
class="_container_4be5c0"
>
<div
class="content"
class="_content_4be5c0"
>
<div
class="error"
class="_error_a69dc5"
>
<div
class="_big-icon_1ssbv_8 icon"
class="_big-icon_1ssbv_8 _icon_a69dc5"
data-kind="primary"
data-size="lg"
>
@@ -161,17 +161,17 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' error correctly 1`] = `
<DocumentFragment>
<div
class="page"
class="_page_4be5c0"
>
<header
class="header"
class="_header_e4b327"
>
<div
class="nav leftNav"
class="_nav_e4b327 _leftNav_e4b327"
>
<a
aria-label="Element Call Home"
class="headerLogo"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
>
@@ -253,20 +253,20 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' er
</a>
</div>
<div
class="nav rightNav"
class="_nav_e4b327 _rightNav_e4b327"
/>
</header>
<div
class="container"
class="_container_4be5c0"
>
<div
class="content"
class="_content_4be5c0"
>
<div
class="error"
class="_error_a69dc5"
>
<div
class="_big-icon_1ssbv_8 icon"
class="_big-icon_1ssbv_8 _icon_a69dc5"
data-kind="primary"
data-size="lg"
>
@@ -318,17 +318,17 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' er
exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed' error correctly 1`] = `
<DocumentFragment>
<div
class="page"
class="_page_4be5c0"
>
<header
class="header"
class="_header_e4b327"
>
<div
class="nav leftNav"
class="_nav_e4b327 _leftNav_e4b327"
>
<a
aria-label="Element Call Home"
class="headerLogo"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
>
@@ -410,20 +410,20 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed'
</a>
</div>
<div
class="nav rightNav"
class="_nav_e4b327 _rightNav_e4b327"
/>
</header>
<div
class="container"
class="_container_4be5c0"
>
<div
class="content"
class="_content_4be5c0"
>
<div
class="error"
class="_error_a69dc5"
>
<div
class="_big-icon_1ssbv_8 icon"
class="_big-icon_1ssbv_8 _icon_a69dc5"
data-kind="primary"
data-size="lg"
>
@@ -475,17 +475,17 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed'
exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreachable' error correctly 1`] = `
<DocumentFragment>
<div
class="page"
class="_page_4be5c0"
>
<header
class="header"
class="_header_e4b327"
>
<div
class="nav leftNav"
class="_nav_e4b327 _leftNav_e4b327"
>
<a
aria-label="Element Call Home"
class="headerLogo"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
>
@@ -567,20 +567,20 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreac
</a>
</div>
<div
class="nav rightNav"
class="_nav_e4b327 _rightNav_e4b327"
/>
</header>
<div
class="container"
class="_container_4be5c0"
>
<div
class="content"
class="_content_4be5c0"
>
<div
class="error"
class="_error_a69dc5"
>
<div
class="_big-icon_1ssbv_8 icon"
class="_big-icon_1ssbv_8 _icon_a69dc5"
data-kind="primary"
data-size="lg"
>
@@ -632,17 +632,17 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreac
exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFound' error correctly 1`] = `
<DocumentFragment>
<div
class="page"
class="_page_4be5c0"
>
<header
class="header"
class="_header_e4b327"
>
<div
class="nav leftNav"
class="_nav_e4b327 _leftNav_e4b327"
>
<a
aria-label="Element Call Home"
class="headerLogo"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
>
@@ -724,20 +724,20 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFo
</a>
</div>
<div
class="nav rightNav"
class="_nav_e4b327 _rightNav_e4b327"
/>
</header>
<div
class="container"
class="_container_4be5c0"
>
<div
class="content"
class="_content_4be5c0"
>
<div
class="error"
class="_error_a69dc5"
>
<div
class="_big-icon_1ssbv_8 icon"
class="_big-icon_1ssbv_8 _icon_a69dc5"
data-kind="primary"
data-size="lg"
>
@@ -789,17 +789,17 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFo
exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' error correctly 1`] = `
<DocumentFragment>
<div
class="page"
class="_page_4be5c0"
>
<header
class="header"
class="_header_e4b327"
>
<div
class="nav leftNav"
class="_nav_e4b327 _leftNav_e4b327"
>
<a
aria-label="Element Call Home"
class="headerLogo"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
>
@@ -881,20 +881,20 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' err
</a>
</div>
<div
class="nav rightNav"
class="_nav_e4b327 _rightNav_e4b327"
/>
</header>
<div
class="container"
class="_container_4be5c0"
>
<div
class="content"
class="_content_4be5c0"
>
<div
class="error"
class="_error_a69dc5"
>
<div
class="_big-icon_1ssbv_8 icon"
class="_big-icon_1ssbv_8 _icon_a69dc5"
data-kind="primary"
data-size="lg"
>
@@ -946,17 +946,17 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' err
exports[`LiveKit ConnectionError variants > should link to troubleshoot guide when timeout error 1`] = `
<DocumentFragment>
<div
class="page"
class="_page_4be5c0"
>
<header
class="header"
class="_header_e4b327"
>
<div
class="nav leftNav"
class="_nav_e4b327 _leftNav_e4b327"
>
<a
aria-label="Element Call Home"
class="headerLogo"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
>
@@ -1038,20 +1038,20 @@ exports[`LiveKit ConnectionError variants > should link to troubleshoot guide wh
</a>
</div>
<div
class="nav rightNav"
class="_nav_e4b327 _rightNav_e4b327"
/>
</header>
<div
class="container"
class="_container_4be5c0"
>
<div
class="content"
class="_content_4be5c0"
>
<div
class="error"
class="_error_a69dc5"
>
<div
class="_big-icon_1ssbv_8 icon"
class="_big-icon_1ssbv_8 _icon_a69dc5"
data-kind="primary"
data-size="lg"
>
@@ -1103,17 +1103,17 @@ exports[`LiveKit ConnectionError variants > should link to troubleshoot guide wh
exports[`should have a close button in widget mode 1`] = `
<DocumentFragment>
<div
class="page"
class="_page_4be5c0"
>
<header
class="header"
class="_header_e4b327"
>
<div
class="nav leftNav"
class="_nav_e4b327 _leftNav_e4b327"
>
<a
aria-label="Element Call Home"
class="headerLogo"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
>
@@ -1195,20 +1195,20 @@ exports[`should have a close button in widget mode 1`] = `
</a>
</div>
<div
class="nav rightNav"
class="_nav_e4b327 _rightNav_e4b327"
/>
</header>
<div
class="container"
class="_container_4be5c0"
>
<div
class="content"
class="_content_4be5c0"
>
<div
class="error"
class="_error_a69dc5"
>
<div
class="_big-icon_1ssbv_8 icon"
class="_big-icon_1ssbv_8 _icon_a69dc5"
data-kind="primary"
data-size="lg"
>
@@ -1257,17 +1257,17 @@ exports[`should have a close button in widget mode 1`] = `
exports[`should render the error page with link back to home 1`] = `
<DocumentFragment>
<div
class="page"
class="_page_4be5c0"
>
<header
class="header"
class="_header_e4b327"
>
<div
class="nav leftNav"
class="_nav_e4b327 _leftNav_e4b327"
>
<a
aria-label="Element Call Home"
class="headerLogo"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
>
@@ -1349,20 +1349,20 @@ exports[`should render the error page with link back to home 1`] = `
</a>
</div>
<div
class="nav rightNav"
class="_nav_e4b327 _rightNav_e4b327"
/>
</header>
<div
class="container"
class="_container_4be5c0"
>
<div
class="content"
class="_content_4be5c0"
>
<div
class="error"
class="_error_a69dc5"
>
<div
class="_big-icon_1ssbv_8 icon"
class="_big-icon_1ssbv_8 _icon_a69dc5"
data-kind="primary"
data-size="lg"
>
@@ -1411,17 +1411,17 @@ exports[`should render the error page with link back to home 1`] = `
exports[`should report correct error for 'Call is not supported' 1`] = `
<DocumentFragment>
<div
class="page"
class="_page_4be5c0"
>
<header
class="header"
class="_header_e4b327"
>
<div
class="nav leftNav"
class="_nav_e4b327 _leftNav_e4b327"
>
<a
aria-label="Element Call Home"
class="headerLogo"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
>
@@ -1503,20 +1503,20 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
</a>
</div>
<div
class="nav rightNav"
class="_nav_e4b327 _rightNav_e4b327"
/>
</header>
<div
class="container"
class="_container_4be5c0"
>
<div
class="content"
class="_content_4be5c0"
>
<div
class="error"
class="_error_a69dc5"
>
<div
class="_big-icon_1ssbv_8 icon"
class="_big-icon_1ssbv_8 _icon_a69dc5"
data-kind="primary"
data-size="lg"
>
@@ -1565,17 +1565,17 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
exports[`should report correct error for 'Connection lost' 1`] = `
<DocumentFragment>
<div
class="page"
class="_page_4be5c0"
>
<header
class="header"
class="_header_e4b327"
>
<div
class="nav leftNav"
class="_nav_e4b327 _leftNav_e4b327"
>
<a
aria-label="Element Call Home"
class="headerLogo"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
>
@@ -1657,20 +1657,20 @@ exports[`should report correct error for 'Connection lost' 1`] = `
</a>
</div>
<div
class="nav rightNav"
class="_nav_e4b327 _rightNav_e4b327"
/>
</header>
<div
class="container"
class="_container_4be5c0"
>
<div
class="content"
class="_content_4be5c0"
>
<div
class="error"
class="_error_a69dc5"
>
<div
class="_big-icon_1ssbv_8 icon"
class="_big-icon_1ssbv_8 _icon_a69dc5"
data-kind="primary"
data-size="lg"
>
@@ -1723,17 +1723,17 @@ exports[`should report correct error for 'Connection lost' 1`] = `
exports[`should report correct error for 'Homeserver does not support Matrix 2.…' 1`] = `
<DocumentFragment>
<div
class="page"
class="_page_4be5c0"
>
<header
class="header"
class="_header_e4b327"
>
<div
class="nav leftNav"
class="_nav_e4b327 _leftNav_e4b327"
>
<a
aria-label="Element Call Home"
class="headerLogo"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
>
@@ -1815,20 +1815,20 @@ exports[`should report correct error for 'Homeserver does not support Matrix 2.
</a>
</div>
<div
class="nav rightNav"
class="_nav_e4b327 _rightNav_e4b327"
/>
</header>
<div
class="container"
class="_container_4be5c0"
>
<div
class="content"
class="_content_4be5c0"
>
<div
class="error"
class="_error_a69dc5"
>
<div
class="_big-icon_1ssbv_8 icon"
class="_big-icon_1ssbv_8 _icon_a69dc5"
data-kind="primary"
data-size="lg"
>
@@ -1877,17 +1877,17 @@ exports[`should report correct error for 'Homeserver does not support Matrix 2.
exports[`should report correct error for 'Incompatible browser' 1`] = `
<DocumentFragment>
<div
class="page"
class="_page_4be5c0"
>
<header
class="header"
class="_header_e4b327"
>
<div
class="nav leftNav"
class="_nav_e4b327 _leftNav_e4b327"
>
<a
aria-label="Element Call Home"
class="headerLogo"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
>
@@ -1969,20 +1969,20 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
</a>
</div>
<div
class="nav rightNav"
class="_nav_e4b327 _rightNav_e4b327"
/>
</header>
<div
class="container"
class="_container_4be5c0"
>
<div
class="content"
class="_content_4be5c0"
>
<div
class="error"
class="_error_a69dc5"
>
<div
class="_big-icon_1ssbv_8 icon"
class="_big-icon_1ssbv_8 _icon_a69dc5"
data-kind="primary"
data-size="lg"
>
@@ -2026,17 +2026,17 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
exports[`should report correct error for 'Insufficient capacity' 1`] = `
<DocumentFragment>
<div
class="page"
class="_page_4be5c0"
>
<header
class="header"
class="_header_e4b327"
>
<div
class="nav leftNav"
class="_nav_e4b327 _leftNav_e4b327"
>
<a
aria-label="Element Call Home"
class="headerLogo"
class="_headerLogo_e4b327"
data-discover="true"
href="/"
>
@@ -2118,20 +2118,20 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
</a>
</div>
<div
class="nav rightNav"
class="_nav_e4b327 _rightNav_e4b327"
/>
</header>
<div
class="container"
class="_container_4be5c0"
>
<div
class="content"
class="_content_4be5c0"
>
<div
class="error"
class="_error_a69dc5"
>
<div
class="_big-icon_1ssbv_8 icon"
class="_big-icon_1ssbv_8 _icon_a69dc5"
data-kind="primary"
data-size="lg"
>

68
src/room/__snapshots__/InCallView.test.tsx.snap
View File

@@ -3,28 +3,28 @@
exports[`InCallView > rendering > renders 1`] = `
<div>
<div
class="inRoom"
class="_inRoom_4e7ff8"
>
<header
class="header header"
class="_header_e4b327 _header_4e7ff8"
>
<div
class="nav leftNav"
class="_nav_e4b327 _leftNav_e4b327"
>
<div
class="roomHeaderInfo"
class="_roomHeaderInfo_e4b327"
data-size="lg"
>
<span
aria-label=""
class="_avatar_va14e_8 roomAvatar _avatar-imageless_va14e_55"
class="_avatar_va14e_8 _roomAvatar_e4b327 _avatar-imageless_va14e_55"
data-color="1"
data-type="round"
role="img"
style="--cpd-avatar-size: 56px;"
/>
<div
class="nameLine"
class="_nameLine_e4b327"
>
<h1
class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
@@ -35,7 +35,7 @@ exports[`InCallView > rendering > renders 1`] = `
>
<svg
aria-labelledby="_r_0_"
class="lock"
class="_lock_edc97d"
data-encrypted="false"
fill="currentColor"
height="16"
@@ -50,7 +50,7 @@ exports[`InCallView > rendering > renders 1`] = `
</span>
</div>
<div
class="participantsLine"
class="_participantsLine_e4b327"
>
<svg
aria-label="Participants"
@@ -80,21 +80,21 @@ exports[`InCallView > rendering > renders 1`] = `
</div>
</div>
<div
class="nav rightNav"
class="_nav_e4b327 _rightNav_e4b327"
/>
</header>
<div
class="scrollingGrid grid"
class="_scrollingGrid_4e7ff8 _grid_b0d1cd"
>
<div
class="layer"
class="_layer_185815"
>
<div
class="container slot"
class="_container_185815 _slot_b0d1cd"
data-id="1"
>
<div
class="slot local slot"
class="_slot_185815 _local_185815 _slot_b0d1cd"
data-block-alignment="start"
data-id="0"
data-inline-alignment="end"
@@ -103,22 +103,22 @@ exports[`InCallView > rendering > renders 1`] = `
</div>
</div>
<div
class="fixedGrid grid"
class="_fixedGrid_4e7ff8 _grid_b0d1cd"
style="inset-block-start: NaNpx;"
>
<div />
</div>
<div
class="bg animate"
class="_bg_2f5303 _animate_2f5303"
data-state="closed"
/>
<div
aria-hidden="true"
class="overlay"
class="_overlay_eb6724"
data-show="false"
>
<div
class="_big-icon_1ssbv_8 icon"
class="_big-icon_1ssbv_8 _icon_eb6724"
data-kind="primary"
data-size="lg"
>
@@ -157,22 +157,22 @@ exports[`InCallView > rendering > renders 1`] = `
Back to Speaker Mode
</button>
<div
class="spacer"
class="_spacer_eb6724"
/>
</div>
<div
class="container"
class="_container_8084b5"
/>
<div
class="footer"
class="_footer_4e7ff8 _footer_20b7b4"
data-testid="footer-container"
>
<div
class="settingsLogoContainer"
class="_settingsLogoContainer_20b7b4"
>
<button
aria-labelledby="_r_8_"
class="_icon-button_1215g_8 settingsOnlyShowWide"
class="_icon-button_1215g_8 _settingsOnlyShowWide_20b7b4"
data-kind="secondary"
data-testid="settings-bottom-left"
role="button"
@@ -198,7 +198,7 @@ exports[`InCallView > rendering > renders 1`] = `
</div>
</button>
<div
class="logo"
class="_logo_20b7b4"
>
<svg
aria-hidden="true"
@@ -303,11 +303,11 @@ exports[`InCallView > rendering > renders 1`] = `
</div>
</div>
<div
class="buttons"
class="_buttons_20b7b4"
>
<button
aria-labelledby="_r_d_"
class="_button_1nw83_8 settingsOnlyShowNarrow _has-icon_1nw83_60 _icon-only_1nw83_53"
class="_button_1nw83_8 _settingsOnlyShowNarrow_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
data-kind="secondary"
data-size="lg"
data-testid="settings-bottom-center"
@@ -382,7 +382,7 @@ exports[`InCallView > rendering > renders 1`] = `
aria-expanded="false"
aria-haspopup="true"
aria-labelledby="_r_s_"
class="_button_1nw83_8 raiseHand _has-icon_1nw83_60 _icon-only_1nw83_53"
class="_button_1nw83_8 _raiseHand_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
data-kind="secondary"
data-size="lg"
role="button"
@@ -405,7 +405,7 @@ exports[`InCallView > rendering > renders 1`] = `
</button>
<button
aria-labelledby="_r_14_"
class="_button_1nw83_8 endCall _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
data-kind="primary"
data-size="lg"
data-testid="incall_leave"
@@ -428,12 +428,12 @@ exports[`InCallView > rendering > renders 1`] = `
</div>
<fieldset
aria-label="Layout"
class="_toggle_13rnk_9 layout"
class="_toggle_1t5ha_9 _layout_20b7b4"
data-size="lg"
>
<input
aria-labelledby="_r_19_"
name="layoutMode"
aria-labelledby="_r_1a_"
name="_r_19_"
type="radio"
value="spotlight"
/>
@@ -446,13 +446,15 @@ exports[`InCallView > rendering > renders 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 5h14v8h-5a1 1 0 0 0-1 1v5H5zm10 14v-4h4v4zM5 21h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2"
clip-rule="evenodd"
d="M20 6H4v12h16zM4 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"
fill-rule="evenodd"
/>
</svg>
<input
aria-labelledby="_r_1e_"
aria-labelledby="_r_1f_"
checked=""
name="layoutMode"
name="_r_19_"
type="radio"
value="grid"
/>

513
src/room/__snapshots__/LobbyView.test.tsx.snap
View File

@@ -1,23 +1,487 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`LobbyView > renders with AppBar android 1`] = `
<div>
<div
class="_bar_221541"
>
<header>
<button
aria-labelledby="_r_36_"
class="_icon-button_1215g_8 _primaryButton_221541"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0"
/>
</svg>
</div>
</button>
<div
class="_secondaryButton_221541"
/>
</header>
</div>
<div
class="_inRoom_4e7ff8"
>
<div
class="_content_f9ee84"
>
<div
class="_preview_dd2178"
>
<video
disablepictureinpicture=""
playsinline=""
poster="/src/graphics/video-placeholder.gif"
tabindex="-1"
/>
<div
class="_avatarContainer_dd2178"
>
<div>
<span
aria-label="@user:example.org"
class="_avatar_va14e_8 _avatar-imageless_va14e_55"
data-color="6"
data-type="round"
role="img"
style="--cpd-avatar-size: NaNpx;"
>
T
</span>
</div>
</div>
<div
class="_buttonBar_dd2178"
>
<button
aria-disabled="true"
class="_button_1nw83_8 _join_f9ee84 _wait_f9ee84"
data-kind="primary"
data-size="md"
data-testid="lobby_joinCall"
role="button"
tabindex="0"
>
Join call
</button>
</div>
</div>
<a
class="_link_13esb_8"
data-kind="primary"
data-size="md"
href="/"
rel="noreferrer noopener"
>
Back to recents
</a>
</div>
<div
class="_footer_20b7b4"
data-testid="footer-container"
>
<div
class="_settingsLogoContainer_20b7b4"
>
<button
aria-labelledby="_r_3c_"
class="_icon-button_1215g_8 _settingsOnlyShowWide_20b7b4"
data-kind="secondary"
data-testid="settings-bottom-left"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 20q-.825 0-1.412-.587A1.93 1.93 0 0 1 10 18q0-.824.588-1.413A1.93 1.93 0 0 1 12 16q.825 0 1.412.587Q14 17.176 14 18t-.588 1.413A1.93 1.93 0 0 1 12 20m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 6q0-.824.588-1.412A1.93 1.93 0 0 1 12 4q.825 0 1.412.588Q14 5.175 14 6q0 .824-.588 1.412A1.93 1.93 0 0 1 12 8"
/>
</svg>
</div>
</button>
</div>
<div
class="_buttons_20b7b4"
>
<button
aria-labelledby="_r_3h_"
class="_button_1nw83_8 _settingsOnlyShowNarrow_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
data-kind="secondary"
data-size="lg"
data-testid="settings-bottom-center"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 20q-.825 0-1.412-.587A1.93 1.93 0 0 1 10 18q0-.824.588-1.413A1.93 1.93 0 0 1 12 16q.825 0 1.412.587Q14 17.176 14 18t-.588 1.413A1.93 1.93 0 0 1 12 20m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 6q0-.824.588-1.412A1.93 1.93 0 0 1 12 4q.825 0 1.412.588Q14 5.175 14 6q0 .824-.588 1.412A1.93 1.93 0 0 1 12 8"
/>
</svg>
</button>
<button
aria-busy="false"
aria-checked="false"
aria-disabled="true"
aria-labelledby="_r_3m_"
class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
data-kind="primary"
data-size="lg"
data-testid="incall_mute"
role="switch"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.95 7.95 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8 8 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5zm9.417 6.583 1.478 1.477A7.96 7.96 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583M8.073 5.238l7.793 7.793q.132-.495.134-1.031V6a4 4 0 0 0-7.927-.762"
/>
</svg>
</button>
<button
aria-busy="false"
aria-checked="false"
aria-disabled="true"
aria-labelledby="_r_3r_"
class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
data-kind="primary"
data-size="lg"
data-testid="incall_videomute"
role="switch"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.747 2.753 4.35 4.355l.007-.003L18 17.994v.012l3.247 3.247a1 1 0 0 1-1.414 1.414l-2.898-2.898A2 2 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414M18 15.166 6.834 4H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715z"
/>
</svg>
</button>
<button
aria-labelledby="_r_40_"
class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
data-kind="primary"
data-size="lg"
data-testid="incall_leave"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m2.765 16.02-2.47-2.416A1.02 1.02 0 0 1 0 12.852q0-.456.295-.751a15.6 15.6 0 0 1 5.316-3.786A15.9 15.9 0 0 1 12 7q3.355 0 6.39 1.329a16 16 0 0 1 5.315 3.772q.295.294.295.751t-.295.752l-2.47 2.416a1.047 1.047 0 0 1-1.396.108l-3.114-2.363a1.1 1.1 0 0 1-.322-.376 1.1 1.1 0 0 1-.108-.483v-2.27a13.6 13.6 0 0 0-2.12-.524C13.459 9.996 12 9.937 12 9.937s-1.459.059-2.174.175q-1.074.174-2.121.523v2.271q0 .268-.108.483a1.1 1.1 0 0 1-.322.376l-3.114 2.363a1.047 1.047 0 0 1-1.396-.107"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
`;
exports[`LobbyView > renders with AppBar ios 1`] = `
<div>
<div
class="_bar_221541"
>
<header>
<button
aria-labelledby="_r_4a_"
class="_icon-button_1215g_8 _primaryButton_221541"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m13.3 17.3-4.6-4.6a.9.9 0 0 1-.213-.325A1.1 1.1 0 0 1 8.425 12q0-.2.062-.375A.9.9 0 0 1 8.7 11.3l4.6-4.6a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7L10.8 12l3.9 3.9a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
/>
</svg>
</div>
</button>
<div
class="_secondaryButton_221541"
/>
</header>
</div>
<div
class="_inRoom_4e7ff8"
>
<div
class="_content_f9ee84"
>
<div
class="_preview_dd2178"
>
<video
disablepictureinpicture=""
playsinline=""
poster="/src/graphics/video-placeholder.gif"
tabindex="-1"
/>
<div
class="_avatarContainer_dd2178"
>
<div>
<span
aria-label="@user:example.org"
class="_avatar_va14e_8 _avatar-imageless_va14e_55"
data-color="6"
data-type="round"
role="img"
style="--cpd-avatar-size: NaNpx;"
>
T
</span>
</div>
</div>
<div
class="_buttonBar_dd2178"
>
<button
aria-disabled="true"
class="_button_1nw83_8 _join_f9ee84 _wait_f9ee84"
data-kind="primary"
data-size="md"
data-testid="lobby_joinCall"
role="button"
tabindex="0"
>
Join call
</button>
</div>
</div>
<a
class="_link_13esb_8"
data-kind="primary"
data-size="md"
href="/"
rel="noreferrer noopener"
>
Back to recents
</a>
</div>
<div
class="_footer_20b7b4"
data-testid="footer-container"
>
<div
class="_settingsLogoContainer_20b7b4"
>
<button
aria-labelledby="_r_4g_"
class="_icon-button_1215g_8 _settingsOnlyShowWide_20b7b4"
data-kind="secondary"
data-testid="settings-bottom-left"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</div>
</button>
</div>
<div
class="_buttons_20b7b4"
>
<button
aria-labelledby="_r_4l_"
class="_button_1nw83_8 _settingsOnlyShowNarrow_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
data-kind="secondary"
data-size="lg"
data-testid="settings-bottom-center"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</button>
<button
aria-busy="false"
aria-checked="false"
aria-disabled="true"
aria-labelledby="_r_4q_"
class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
data-kind="primary"
data-size="lg"
data-testid="incall_mute"
role="switch"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.95 7.95 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8 8 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5zm9.417 6.583 1.478 1.477A7.96 7.96 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583M8.073 5.238l7.793 7.793q.132-.495.134-1.031V6a4 4 0 0 0-7.927-.762"
/>
</svg>
</button>
<button
aria-busy="false"
aria-checked="false"
aria-disabled="true"
aria-labelledby="_r_4v_"
class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
data-kind="primary"
data-size="lg"
data-testid="incall_videomute"
role="switch"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.747 2.753 4.35 4.355l.007-.003L18 17.994v.012l3.247 3.247a1 1 0 0 1-1.414 1.414l-2.898-2.898A2 2 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414M18 15.166 6.834 4H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715z"
/>
</svg>
</button>
<button
aria-labelledby="_r_54_"
class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
data-kind="primary"
data-size="lg"
data-testid="incall_leave"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m2.765 16.02-2.47-2.416A1.02 1.02 0 0 1 0 12.852q0-.456.295-.751a15.6 15.6 0 0 1 5.316-3.786A15.9 15.9 0 0 1 12 7q3.355 0 6.39 1.329a16 16 0 0 1 5.315 3.772q.295.294.295.751t-.295.752l-2.47 2.416a1.047 1.047 0 0 1-1.396.108l-3.114-2.363a1.1 1.1 0 0 1-.322-.376 1.1 1.1 0 0 1-.108-.483v-2.27a13.6 13.6 0 0 0-2.12-.524C13.459 9.996 12 9.937 12 9.937s-1.459.059-2.174.175q-1.074.174-2.121.523v2.271q0 .268-.108.483a1.1 1.1 0 0 1-.322.376l-3.114 2.363a1.047 1.047 0 0 1-1.396-.107"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
`;
exports[`LobbyView > renders with header and participant count 1`] = `
<div>
<div
class="inRoom"
class="_inRoom_4e7ff8"
>
<header
class="header"
class="_header_e4b327"
>
<div
class="nav leftNav"
class="_nav_e4b327 _leftNav_e4b327"
>
<div
class="roomHeaderInfo"
class="_roomHeaderInfo_e4b327"
data-size="lg"
>
<span
aria-label="!room:example.org"
class="_avatar_va14e_8 roomAvatar _avatar-imageless_va14e_55"
class="_avatar_va14e_8 _roomAvatar_e4b327 _avatar-imageless_va14e_55"
data-color="3"
data-type="round"
role="img"
@@ -26,7 +490,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
T
</span>
<div
class="nameLine"
class="_nameLine_e4b327"
>
<h1
class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
@@ -39,7 +503,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
>
<svg
aria-labelledby="_r_0_"
class="lock"
class="_lock_edc97d"
data-encrypted="false"
fill="currentColor"
height="16"
@@ -54,7 +518,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
</span>
</div>
<div
class="participantsLine"
class="_participantsLine_e4b327"
>
<svg
aria-label="Participants"
@@ -84,22 +548,23 @@ exports[`LobbyView > renders with header and participant count 1`] = `
</div>
</div>
<div
class="nav rightNav"
class="_nav_e4b327 _rightNav_e4b327"
/>
</header>
<div
class="content"
class="_content_f9ee84"
>
<div
class="preview"
class="_preview_dd2178"
>
<video
disablepictureinpicture=""
playsinline=""
poster="/src/graphics/video-placeholder.gif"
tabindex="-1"
/>
<div
class="avatarContainer"
class="_avatarContainer_dd2178"
>
<div>
<span
@@ -115,10 +580,10 @@ exports[`LobbyView > renders with header and participant count 1`] = `
</div>
</div>
<div
class="buttonBar"
class="_buttonBar_dd2178"
>
<button
class="_button_1nw83_8 join"
class="_button_1nw83_8 _join_f9ee84"
data-kind="primary"
data-size="lg"
data-testid="lobby_joinCall"
@@ -130,7 +595,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
</div>
</div>
<a
class="_link_k9ljz_8"
class="_link_13esb_8"
data-kind="primary"
data-size="md"
href="/"
@@ -140,15 +605,15 @@ exports[`LobbyView > renders with header and participant count 1`] = `
</a>
</div>
<div
class="footer"
class="_footer_20b7b4"
data-testid="footer-container"
>
<div
class="settingsLogoContainer"
class="_settingsLogoContainer_20b7b4"
>
<button
aria-labelledby="_r_6_"
class="_icon-button_1215g_8 settingsOnlyShowWide"
class="_icon-button_1215g_8 _settingsOnlyShowWide_20b7b4"
data-kind="secondary"
data-testid="settings-bottom-left"
role="button"
@@ -168,13 +633,13 @@ exports[`LobbyView > renders with header and participant count 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
d="M12 20q-.825 0-1.412-.587A1.93 1.93 0 0 1 10 18q0-.824.588-1.413A1.93 1.93 0 0 1 12 16q.825 0 1.412.587Q14 17.176 14 18t-.588 1.413A1.93 1.93 0 0 1 12 20m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 6q0-.824.588-1.412A1.93 1.93 0 0 1 12 4q.825 0 1.412.588Q14 5.175 14 6q0 .824-.588 1.412A1.93 1.93 0 0 1 12 8"
/>
</svg>
</div>
</button>
<div
class="logo"
class="_logo_20b7b4"
>
<svg
aria-hidden="true"
@@ -279,11 +744,11 @@ exports[`LobbyView > renders with header and participant count 1`] = `
</div>
</div>
<div
class="buttons"
class="_buttons_20b7b4"
>
<button
aria-labelledby="_r_b_"
class="_button_1nw83_8 settingsOnlyShowNarrow _has-icon_1nw83_60 _icon-only_1nw83_53"
class="_button_1nw83_8 _settingsOnlyShowNarrow_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
data-kind="secondary"
data-size="lg"
data-testid="settings-bottom-center"
@@ -299,7 +764,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
d="M12 20q-.825 0-1.412-.587A1.93 1.93 0 0 1 10 18q0-.824.588-1.413A1.93 1.93 0 0 1 12 16q.825 0 1.412.587Q14 17.176 14 18t-.588 1.413A1.93 1.93 0 0 1 12 20m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 6q0-.824.588-1.412A1.93 1.93 0 0 1 12 4q.825 0 1.412.588Q14 5.175 14 6q0 .824-.588 1.412A1.93 1.93 0 0 1 12 8"
/>
</svg>
</button>
@@ -355,7 +820,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
</button>
<button
aria-labelledby="_r_q_"
class="_button_1nw83_8 endCall _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
data-kind="primary"
data-size="lg"
data-testid="incall_leave"

40
src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap
View File

@@ -18,10 +18,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
Device ID: DEVICE123
</p>
<div
class="fieldRow"
class="_fieldRow_1bd8c0"
>
<div
class="field inputField"
class="_field_1bd8c0 _inputField_1bd8c0"
>
<input
aria-describedby="_r_1_"
@@ -38,10 +38,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
</div>
</div>
<div
class="fieldRow"
class="_fieldRow_1bd8c0"
>
<div
class="field checkboxField"
class="_field_1bd8c0 _checkboxField_1bd8c0"
>
<input
aria-describedby="_r_2_"
@@ -52,7 +52,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
for="debugTileLayout"
>
<div
class="checkbox"
class="_checkbox_1bd8c0"
>
<svg
fill="none"
@@ -75,10 +75,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
</div>
</div>
<div
class="fieldRow"
class="_fieldRow_1bd8c0"
>
<div
class="field checkboxField"
class="_field_1bd8c0 _checkboxField_1bd8c0"
>
<input
aria-describedby="_r_3_"
@@ -89,7 +89,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
for="showConnectionStats"
>
<div
class="checkbox"
class="_checkbox_1bd8c0"
>
<svg
fill="none"
@@ -112,10 +112,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
</div>
</div>
<div
class="fieldRow"
class="_fieldRow_1bd8c0"
>
<div
class="field checkboxField"
class="_field_1bd8c0 _checkboxField_1bd8c0"
>
<input
aria-describedby="_r_4_"
@@ -126,7 +126,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
for="muteAllAudio"
>
<div
class="checkbox"
class="_checkbox_1bd8c0"
>
<svg
fill="none"
@@ -150,10 +150,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
</div>
<div
class="fieldRow"
class="_fieldRow_1bd8c0"
>
<div
class="field checkboxField"
class="_field_1bd8c0 _checkboxField_1bd8c0"
>
<input
aria-describedby="_r_5_"
@@ -164,7 +164,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
for="alwaysShowIphoneEarpiece"
>
<div
class="checkbox"
class="_checkbox_1bd8c0"
>
<svg
fill="none"
@@ -187,10 +187,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
</div>
</div>
<div
class="fieldRow"
class="_fieldRow_1bd8c0"
>
<div
class="field checkboxField"
class="_field_1bd8c0 _checkboxField_1bd8c0"
>
<input
aria-describedby="_r_6_"
@@ -201,7 +201,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
for="enableLivekitExtendedLogs"
>
<div
class="checkbox"
class="_checkbox_1bd8c0"
>
<svg
fill="none"
@@ -274,7 +274,6 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
>
<input
aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
checked=""
class="_input_1ug7n_18"
id="radix-_r_9_"
name="_r_0_"
@@ -315,6 +314,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
>
<input
aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
checked=""
class="_input_1ug7n_18"
id="radix-_r_b_"
name="_r_0_"
@@ -386,7 +386,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
</div>
</form>
<div
class="livekit_room_box"
class="_livekit_room_box_2ddec4"
>
<h4>
LiveKit SFU: wss://local-sfu.example.org
@@ -427,7 +427,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
<ul />
</div>
<div
class="livekit_room_box"
class="_livekit_room_box_2ddec4"
>
<h4>
LiveKit SFU: wss://remote-sfu.example.org

Some files were not shown because too many files have changed in this diff Show More