Update dependency @vector-im/compound-design-tokens to v1.6.1 (#2487)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.env

@@ -1,25 +0,0 @@
-####
-# App Config
-# Environment files are documented here:
-# https://vitejs.dev/guide/env-and-mode.html#env-files
-####
-
-# Used for determining the homeserver to use for short urls etc.
-# VITE_DEFAULT_HOMESERVER=http://localhost:8008
-
-# The room id for the space to use for listing public group call rooms
-# VITE_PUBLIC_SPACE_ROOM_ID=!hjdfshkdskjdsk:myhomeserver.com
-
-# The Sentry DSN to use for error reporting. Leave undefined to disable.
-# VITE_SENTRY_DSN=https://examplePublicKey@o0.ingest.sentry.io/0
-
-# VITE_CUSTOM_THEME=true
-# VITE_PRIMARY_COLOR=#0dbd8b
-# VITE_BG_COLOR_1=#ffffff
-# VITE_BG_COLOR_2=#f0f1f4
-# VITE_BG_COLOR_3=#dbdfe4
-# VITE_BG_COLOR_4=#d1d3d7
-# VITE_INPUT_BORDER_COLOR=#e7e7e7
-# VITE_INPUT_BORDER_COLOR_FOCUSED=#238cf5
-# VITE_TEXT_COLOR_1=#17191c
-# VITE_TEXT_COLOR_2=#61708b

.env.example

@@ -0,0 +1,19 @@
+####
+# Build-time app config
+# Environment files are documented here:
+# https://vitejs.dev/guide/env-and-mode.html#env-files
+####
+# Develop backend settings:
+LIVEKIT_KEY="devkey"
+LIVEKIT_SECRET="secret"
+
+# Used for determining the homeserver to use for short urls etc.
+# VITE_FALLBACK_STUN_ALLOWED=false
+
+# CSS to be injected into the page for the purpose of custom theming.
+# Generally, writing a custom theme involves overriding Compound design tokens,
+# which are documented here:
+# https://compound.element.io/?path=/docs/foundations-design-tokens--docs
+# https://compound.element.io/?path=/docs/tokens-color-palettes--docs
+# https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
+# VITE_CUSTOM_CSS=".cpd-theme-dark.cpd-theme-dark { --cpd-color-theme-bg: #101317; }"

.eslintrc.cjs

@@ -0,0 +1,57 @@
+const COPYRIGHT_HEADER = `/*
+Copyright %%CURRENT_YEAR%% New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+`;
+
+module.exports = {
+  plugins: ["matrix-org"],
+  extends: [
+    "plugin:matrix-org/react",
+    "plugin:matrix-org/a11y",
+    "plugin:matrix-org/typescript",
+    "prettier",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    project: ["./tsconfig.json"],
+  },
+  env: {
+    browser: true,
+    node: true,
+  },
+  rules: {
+    "matrix-org/require-copyright-header": ["error", COPYRIGHT_HEADER],
+    "jsx-a11y/media-has-caption": "off",
+    // We should use the js-sdk logger, never console directly.
+    "no-console": ["error"],
+    "no-restricted-imports": [
+      "error",
+      {
+        name: "@react-rxjs/core",
+        importNames: ["Subscribe", "RemoveSubscribe"],
+        message:
+          "These components are easy to misuse, please use the 'subscribe' component wrapper instead",
+      },
+    ],
+    "react/display-name": "error",
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+};

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @element-hq/element-call-reviewers

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,67 @@
+name: Bug report
+description: Create a report to help us improve
+labels: [T-Defect]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+
+        Please report security issues by email to security@matrix.org
+  - type: textarea
+    id: reproduction-steps
+    attributes:
+      label: Steps to reproduce
+      description: Please attach screenshots, videos or logs if you can.
+      placeholder: Tell us what you see!
+      value: |
+        1. Where are you starting? What can you see?
+        2. What do you click?
+        3. More steps…
+    validations:
+      required: true
+  - type: textarea
+    id: result
+    attributes:
+      label: Outcome
+      placeholder: Tell us what went wrong
+      value: |
+        #### What did you expect?
+
+        #### What happened instead?
+    validations:
+      required: true
+  - type: input
+    id: os
+    attributes:
+      label: Operating system
+      placeholder: Windows, macOS, Ubuntu, Android…
+    validations:
+      required: false
+  - type: input
+    id: browser
+    attributes:
+      label: Browser information
+      description: Which browser are you using? Which version?
+      placeholder: e.g. Chromium Version 92.0.4515.131
+    validations:
+      required: false
+  - type: input
+    id: webapp-url
+    attributes:
+      label: URL for webapp
+      description: Which URL are you using to access the webapp? If a private server, tell us what version of Element Call you are using.
+      placeholder: e.g. call.element.io
+    validations:
+      required: false
+  - type: dropdown
+    id: rageshake
+    attributes:
+      label: Will you send logs?
+      description: |
+        To send them, press the 'Submit Feedback' button and check 'Include Debug Logs'. Please link to this issue in the description field.
+      options:
+        - "Yes"
+        - "No"
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Questions & support
+    url: https://matrix.to/#/#webrtc:matrix.org
+    about: Please ask and answer questions here.

.github/ISSUE_TEMPLATE/enhancement.yml

@@ -0,0 +1,36 @@
+name: Enhancement request
+description: Do you have a suggestion or feature request?
+labels: [T-Enhancement]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for taking the time to propose a new feature or make a suggestion.
+  - type: textarea
+    id: usecase
+    attributes:
+      label: Your use case
+      description: What would you like to be able to do? Please feel welcome to include screenshots or mock ups.
+      placeholder: Tell us what you would like to do!
+      value: |
+        #### What would you like to do?
+
+        #### Why would you like to do it?
+
+        #### How would you like to achieve it?
+    validations:
+      required: true
+  - type: textarea
+    id: alternative
+    attributes:
+      label: Have you considered any alternatives?
+      placeholder: A clear and concise description of any alternative solutions or features you've considered.
+    validations:
+      required: false
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      placeholder: Is there anything else you'd like to add?
+    validations:
+      required: false

.github/workflows/build.yaml

@@ -0,0 +1,25 @@
+name: Build
+on:
+  pull_request:
+    types:
+      - synchronize
+      - opened
+      - labeled
+    paths-ignore:
+      - ".github/**"
+      - "docs/**"
+  push:
+    branches: [livekit, full-mesh]
+    paths-ignore:
+      - ".github/**"
+      - "docs/**"
+jobs:
+  build_element_call:
+    uses: ./.github/workflows/element-call.yaml
+    with:
+      vite_app_version: ${{ github.event.release.tag_name || github.sha }}
+    secrets:
+      SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+      SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+      SENTRY_URL: ${{ secrets.SENTRY_URL }}
+      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}

.github/workflows/docker.yaml

@@ -0,0 +1,60 @@
+name: Docker - Deploy
+on:
+  workflow_call:
+    inputs:
+      docker_tags:
+        required: true
+        type: string
+      artifact_run_id:
+        required: false
+        type: string
+        default: ${{ github.run_id }}
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build_and_deploy:
+    name: Build & publish docker
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # required to upload release asset
+      packages: write
+    steps:
+      - name: Check it out
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+
+      - name: 📥 Download artifact
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          run-id: ${{ inputs.artifact_run_id }}
+          name: build-output
+          path: dist
+
+      - name: Log in to container registry
+        uses: docker/login-action@0d4c9c5ea7693da7b068278f7b52bda2a190a446 # v3.2.0
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@8e5442c4ef9f78752691e2d8f8d19755c6f78e81 # v5.5.1
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: ${{ inputs.docker_tags}}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@d70bba72b1f3fd22344832f00baa16ece964efeb # v3.3.0
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@1a162644f9a7e87d8f4b053101d1d9a712edc18c # v6.3.0
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/e2e.yml

@@ -0,0 +1,24 @@
+name: Run E2E tests
+on:
+  workflow_run:
+    workflows: ["deploy"]
+    types:
+      - completed
+    branches-ignore:
+      - "livekit"
+jobs:
+  e2e:
+    name: E2E tests runs on Element Call
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out test private repo
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+        with:
+          repository: element-hq/static-call-participant
+          ref: refs/heads/main
+          path: static-call-participant
+          token: ${{ secrets.GH_E2E_TEST_TOKEN }}
+      - name: Build E2E Image
+        run: "cd static-call-participant && docker build --no-cache --tag matrixdotorg/chrome-node-static-call-participant:latest ."
+      - name: Run E2E tests in container
+        run: "docker run --rm -v '${{ github.workspace }}/static-call-participant/callemshost-users.txt:/opt/app/callemshost-users.txt' matrixdotorg/chrome-node-static-call-participant:latest ./e2e.sh"

.github/workflows/element-call.yaml

@@ -0,0 +1,46 @@
+name: Element Call - Build
+on:
+  workflow_call:
+    inputs:
+      vite_app_version:
+        required: true
+        type: string
+    secrets:
+      SENTRY_ORG:
+        required: true
+      SENTRY_PROJECT:
+        required: true
+      SENTRY_URL:
+        required: true
+      SENTRY_AUTH_TOKEN:
+        required: true
+
+jobs:
+  build:
+    name: Build Element Call
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+      - name: Yarn cache
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4
+        with:
+          cache: "yarn"
+      - name: Install dependencies
+        run: "yarn install"
+      - name: Build
+        run: "yarn run build"
+        env:
+          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+          SENTRY_URL: ${{ secrets.SENTRY_URL }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          VITE_APP_VERSION: ${{ inputs.vite_app_version }}
+          NODE_OPTIONS: "--max-old-space-size=4096"
+      - name: Upload Artifact
+        uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4
+        with:
+          name: build-output
+          path: dist
+          # We'll only use this in a triggered job, then we're done with it
+          retention-days: 1

.github/workflows/lint.yaml

@@ -0,0 +1,24 @@
+name: Lint, format & type check
+on:
+  pull_request: {}
+jobs:
+  prettier:
+    name: Lint, format & type check
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+      - name: Yarn cache
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4
+        with:
+          cache: "yarn"
+      - name: Install dependencies
+        run: "yarn install"
+      - name: Prettier
+        run: "yarn run prettier:check"
+      - name: i18n
+        run: "yarn run i18n:check"
+      - name: ESLint
+        run: "yarn run lint:eslint"
+      - name: Type check
+        run: "yarn run lint:types"

.github/workflows/netlify.yaml

@@ -0,0 +1,88 @@
+name: Netlify - Deploy
+on:
+  workflow_call:
+    inputs:
+      pr_number:
+        required: true
+        type: string
+      pr_head_full_name:
+        required: true
+        type: string
+      pr_head_ref:
+        required: true
+        type: string
+      deployment_ref:
+        required: true
+        type: string
+      artifact_run_id:
+        required: false
+        type: string
+        default: ${{ github.run_id }}
+    secrets:
+      ELEMENT_BOT_TOKEN:
+        required: true
+      NETLIFY_AUTH_TOKEN:
+        required: true
+      NETLIFY_SITE_ID:
+        required: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      deployments: write
+    environment: Netlify
+    steps:
+      - name: 📝 Create Deployment
+        uses: bobheadxi/deployments@648679e8e4915b27893bd7dbc35cb504dc915bc8 # v1
+        id: deployment
+        with:
+          step: start
+          token: ${{ secrets.GITHUB_TOKEN }}
+          env: Netlify
+          ref: ${{ inputs.deployment_ref }}
+          desc: |
+            Do you trust the author of this PR? Maybe this build will steal your keys or give you malware.
+            Exercise caution. Use test accounts.
+
+      - name: 📥 Download artifact
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4
+        with:
+          github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+          run-id: ${{ inputs.artifact_run_id }}
+          name: build-output
+          path: webapp
+
+      - name: Add redirects file
+        # We fetch from github directly as we don't bother checking out the repo
+        run: curl -s https://raw.githubusercontent.com/element-hq/element-call/main/config/netlify_redirects > webapp/_redirects
+
+      - name: Add config file
+        run: curl -s "https://raw.githubusercontent.com/${{ inputs.pr_head_full_name }}/${{ inputs.pr_head_ref }}/config/element_io_preview.json" > webapp/config.json
+
+      - name: ☁️ Deploy to Netlify
+        id: netlify
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0
+        with:
+          publish-dir: webapp
+          deploy-message: "Deploy from GitHub Actions"
+          alias: pr${{ inputs.pr_number }}
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 1
+
+      - name: 🚦 Update deployment status
+        uses: bobheadxi/deployments@648679e8e4915b27893bd7dbc35cb504dc915bc8 # v1
+        if: always()
+        with:
+          step: finish
+          override: false
+          token: ${{ secrets.GITHUB_TOKEN }}
+          status: ${{ job.status }}
+          env: ${{ steps.deployment.outputs.env }}
+          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
+          env_url: ${{ steps.netlify.outputs.deploy-url }}
+          desc: |
+            Do you trust the author of this PR? Maybe this build will steal your keys or give you malware.
+            Exercise caution. Use test accounts.

.github/workflows/pr-deploy.yaml

@@ -0,0 +1,50 @@
+name: PR Preview Deployments
+on:
+  workflow_run:
+    workflows: ["Build"]
+    types:
+      - completed
+
+jobs:
+  prdetails:
+    if: ${{ github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event == 'pull_request' }}
+    runs-on: ubuntu-latest
+    outputs:
+      pr_number: ${{ steps.prdetails.outputs.pr_id }}
+      pr_data_json: ${{ steps.prdetails.outputs.data }}
+    steps:
+      - id: prdetails
+        uses: matrix-org/pr-details-action@15bde5285d7850ba276cc3bd8a03733e3f24622a # v1.3
+        continue-on-error: true
+        with:
+          owner: ${{ github.event.workflow_run.head_repository.owner.login }}
+          branch: ${{ github.event.workflow_run.head_branch }}
+
+  netlify:
+    needs: prdetails
+    permissions:
+      deployments: write
+    uses: ./.github/workflows/netlify.yaml
+    with:
+      artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
+      pr_number: ${{ needs.prdetails.outputs.pr_number }}
+      pr_head_full_name: ${{ github.event.workflow_run.head_repository.full_name }}
+      pr_head_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.ref }}
+      deployment_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.sha || github.ref || github.head_ref }}
+    secrets:
+      ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+
+  docker:
+    if: ${{ needs.prdetails.outputs.pr_data_json && contains(fromJSON(needs.prdetails.outputs.pr_data_json).labels.*.name, 'docker build') }}
+    needs: prdetails
+    permissions:
+      contents: write
+      packages: write
+    uses: ./.github/workflows/docker.yaml
+    with:
+      artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
+      docker_tags: |
+        type=sha,format=short,event=branch
+        type=raw,value=pr_${{ needs.prdetails.outputs.pr_number }}

.github/workflows/publish.yaml

@@ -3,39 +3,70 @@ name: Build & publish images to the package registry for tags
 on:
   release:
     types: [published]
+  workflow_run:
+    workflows: ["Build"]
+    branches: [livekit]
+    types:
+      - completed
 
 env:
   REGISTRY: ghcr.io
   IMAGE_NAME: ${{ github.repository }}
 
 jobs:
-  build:
-    name: Build & publish
+  build_element_call:
+    if: ${{ github.event_name == 'release' }}
+    uses: ./.github/workflows/element-call.yaml
+    with:
+      vite_app_version: ${{ github.event.release.tag_name || github.sha }}
+    secrets:
+      SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+      SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+      SENTRY_URL: ${{ secrets.SENTRY_URL }}
+      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+  publish_tarball:
+    needs: build_element_call
+    if: always()
+    name: Publish tarball
     runs-on: ubuntu-latest
+    outputs:
+      unix_time: ${{steps.current-time.outputs.unix_time}}
     permissions:
-      contents: read
+      contents: write # required to upload release asset
       packages: write
     steps:
-      - name: Check it out
-        uses: actions/checkout@v2
-
-      - name: Log in to container registry
-        uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
+      - name: Get current time
+        id: current-time
+        run: echo "unix_time=$(date +'%s')" >> $GITHUB_OUTPUT
+      - name: 📥 Download artifact
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4
         with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          run-id: ${{ github.event.workflow_run.id || github.run_id }}
+          name: build-output
+          path: dist
+      - name: Create Tarball
+        env:
+          TARBALL_VERSION: ${{ github.event.release.tag_name || github.sha }}
+        run: |
+          tar --numeric-owner --transform "s/dist/element-call-${TARBALL_VERSION}/" -cvzf element-call-${TARBALL_VERSION}.tar.gz dist
+      - name: Upload
+        uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
         with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
-        with:
-          context: .
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          path: "./element-call-*.tar.gz"
+  publish_docker:
+    needs: publish_tarball
+    if: always()
+    permissions:
+      contents: write
+      packages: write
+    uses: ./.github/workflows/docker.yaml
+    with:
+      artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
+      docker_tags: |
+        type=sha,format=short,event=branch
+        type=semver,pattern=v{{version}}
+        type=raw,value=latest-ci,enable={{is_default_branch}}
+        type=raw,value=latest-ci_${{needs.publish_tarball.outputs.unix_time}},enable={{is_default_branch}}

.github/workflows/test.yaml

@@ -0,0 +1,24 @@
+name: Run unit tests
+on:
+  pull_request: {}
+  push:
+    branches: [livekit, full-mesh]
+jobs:
+  vitest:
+    name: Run vitest tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+      - name: Yarn cache
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4
+        with:
+          cache: "yarn"
+      - name: Install dependencies
+        run: "yarn install"
+      - name: Vitest
+        run: "yarn run test"
+      - name: Upload to codecov
+        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4
+        with:
+          flags: unittests

.github/workflows/translations-download.yaml

@@ -0,0 +1,56 @@
+name: Download translation files from Localazy
+on:
+  workflow_dispatch:
+    secrets:
+      ELEMENT_BOT_TOKEN:
+        required: true
+
+jobs:
+  download:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+
+    steps:
+      - name: Checkout the code
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+
+      - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4
+        with:
+          cache: "yarn"
+
+      - name: Install Deps
+        run: "yarn install --frozen-lockfile"
+
+      - name: Prune i18n
+        run: "rm -R public/locales"
+
+      - name: Download translation files
+        uses: localazy/download@0a79880fb66150601e3b43606fab69c88123c087 # v1.1.0
+        with:
+          groups: "-p includeSourceLang:true"
+
+      - name: Fix the owner of the downloaded files
+        run: "sudo chown runner:docker -R public/locales"
+
+      - name: Prettier
+        run: yarn prettier:format
+
+      - name: Create Pull Request
+        id: cpr
+        uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
+        with:
+          token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+          branch: actions/localazy-download
+          delete-branch: true
+          title: Localazy Download
+          commit-message: Translations updates
+          labels: |
+            T-Task
+
+      - name: Enable automerge
+        run: gh pr merge --merge --auto "$PR_NUMBER"
+        if: steps.cpr.outputs.pull-request-operation == 'created'
+        env:
+          GH_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+          PR_NUMBER: ${{ steps.cpr.outputs.pull-request-number }}

.github/workflows/translations-upload.yaml

@@ -0,0 +1,22 @@
+name: Upload translation files to Localazy
+on:
+  push:
+    branches:
+      - livekit
+    paths-ignore:
+      - ".github/**"
+
+jobs:
+  upload:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+
+    steps:
+      - name: Checkout the code
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+
+      - name: Upload
+        uses: localazy/upload@27e6b5c0fddf4551596b42226b1c24124335d24a # v1
+        with:
+          write_key: ${{ secrets.LOCALAZY_WRITE_KEY }}

.gitignore

@@ -1,5 +1,10 @@
 node_modules
 .DS_Store
+.env
 dist
 dist-ssr
-*.local
+*.local
+.idea/
+public/config.json
+/coverage
+yarn-error.log

.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.prettierrc.json

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

.storybook/main.js

@@ -0,0 +1,25 @@
+const svgrPlugin = require("vite-plugin-svgr");
+const path = require("path");
+
+module.exports = {
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  framework: "@storybook/react",
+  core: {
+    builder: "storybook-builder-vite",
+  },
+  async viteFinal(config) {
+    config.plugins = config.plugins.filter(
+      (item) =>
+        !(
+          Array.isArray(item) &&
+          item.length > 0 &&
+          item[0].name === "vite-plugin-mdx"
+        ),
+    );
+    config.plugins.push(svgrPlugin());
+    config.resolve = config.resolve || {};
+    config.resolve.dedupe = config.resolve.dedupe || [];
+    config.resolve.dedupe.push("react", "react-dom", "matrix-js-sdk");
+    return config;
+  },
+};

.storybook/preview.jsx

@@ -0,0 +1,24 @@
+import { addDecorator } from "@storybook/react";
+import { MemoryRouter } from "react-router-dom";
+import { usePageFocusStyle } from "../src/usePageFocusStyle";
+import { OverlayProvider } from "@react-aria/overlays";
+import "../src/index.css";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+addDecorator((story) => {
+  usePageFocusStyle();
+  return (
+    <MemoryRouter initialEntries={["/"]}>
+      <OverlayProvider>{story()}</OverlayProvider>
+    </MemoryRouter>
+  );
+});

.vscode/settings.json

@@ -1,5 +1,22 @@
 {
   "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.insertSpaces": true,
-  "editor.tabSize": 2
-}
+  "editor.tabSize": 2,
+  "[typescriptreact]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

CONTRIBUTING.md

@@ -0,0 +1,3 @@
+# Contributing code to Element
+
+Element follows the same pattern as the [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.md).

Dockerfile

@@ -1,14 +1,10 @@
-FROM node:16-buster as builder
-
-WORKDIR /src
-
-COPY . /src/matrix-video-chat
-RUN matrix-video-chat/scripts/dockerbuild.sh
-
-# App
 FROM nginxinc/nginx-unprivileged:alpine
 
-COPY --from=builder /src/matrix-video-chat/dist /app
+COPY ./dist /app
+COPY config/nginx.conf /etc/nginx/conf.d/default.conf
 
-RUN rm -rf /usr/share/nginx/html \
-  && ln -s /app /usr/share/nginx/html
+USER root
+
+RUN rm -rf /usr/share/nginx/html
+
+USER 101

README.md

@@ -1,45 +1,148 @@
-# Matrix Video Chat
+# Element Call
 
-Testbed for full mesh video chat.
+[![Chat](https://img.shields.io/matrix/webrtc:matrix.org)](https://matrix.to/#/#webrtc:matrix.org)
+[![Localazy](https://img.shields.io/endpoint?url=https%3A%2F%2Fconnect.localazy.com%2Fstatus%2Felement-call%2Fdata%3Fcontent%3Dall%26title%3Dlocalazy%26logo%3Dtrue)](https://localazy.com/p/element-call)
 
-## Getting Started
+Group calls with WebRTC that leverage [Matrix](https://matrix.org) and an open-source WebRTC toolkit from [LiveKit](https://livekit.io/).
 
-`matrix-video-chat` is built against the `robertlong/group-call` branch of both [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/pull/1902) and [matrix-react-sdk](https://github.com/matrix-org/matrix-react-sdk/pull/6848). Because of how these packages are configured and Vite's requirements, you will need to clone them locally and use `yarn link` to stich things together.
+For prior version of the Element Call that relied solely on full-mesh logic, check [`full-mesh`](https://github.com/element-hq/element-call/tree/full-mesh) branch.
 
-First clone, install, and link `matrix-js-sdk`
+![A demo of Element Call with six people](demo.jpg)
+
+To try it out, visit our hosted version at [call.element.io](https://call.element.io). You can also find the latest development version continuously deployed to [call.element.dev](https://call.element.dev/).
+
+## Host it yourself
+
+Until prebuilt tarballs are available, you'll need to build Element Call from source. First, clone and install the package:
+
+```
+git clone https://github.com/element-hq/element-call.git
+cd element-call
+yarn
+yarn build
+```
+
+If all went well, you can now find the build output under `dist` as a series of static files. These can be hosted using any web server of your choice.
+
+You may also wish to add a configuration file (Element Call uses the domain it's hosted on as a Homeserver URL by default,
+but you can change this in the config file). This goes in `public/config.json` - you can use the sample as a starting point:
+
+```
+cp config/config.sample.json public/config.json
+# edit public/config.json
+```
+
+Because Element Call uses client-side routing, your server must be able to route any requests to non-existing paths back to `/index.html`. For example, in Nginx you can achieve this with the `try_files` directive:
+
+```
+server {
+    ...
+    location / {
+        ...
+        try_files $uri /$uri /index.html;
+    }
+}
+```
+
+By default, the app expects you to have a Matrix homeserver (such as [Synapse](https://matrix-org.github.io/synapse/latest/setup/installation.html)) installed locally and running on port 8008. If you wish to use a homeserver on a different URL or one that is hosted on a different server, you can add a config file as above, and include the homeserver URL that you'd like to use.
+
+Element Call requires a homeserver with registration enabled without any 3pid or token requirements, if you want it to be used by unregistered users. Furthermore, it is not recommended to use it with an existing homeserver where user accounts have joined normal rooms, as it may not be able to handle those yet and it may behave unreliably.
+
+Therefore, to use a self-hosted homeserver, this is recommended to be a new server where any user account created has not joined any normal rooms anywhere in the Matrix federated network. The homeserver used can be setup to disable federation, so as to prevent spam registrations (if you keep registrations open) and to ensure Element Call continues to work in case any user decides to log in to their Element Call account using the standard Element app and joins normal rooms that Element Call cannot handle.
+
+## Configuration
+
+There are currently two different config files. `.env` holds variables that are used at build time, while `public/config.json` holds variables that are used at runtime. Documentation and default values for `public/config.json` can be found in [ConfigOptions.ts](src/config/ConfigOptions.ts).
+
+If you're using [Synapse](https://github.com/element-hq/synapse/), you'll need to additionally add the following to `homeserver.yaml` or Element Call won't work:
+
+```
+experimental_features:
+    msc3266_enabled: true
+```
+
+MSC3266 allows to request a room summary of rooms you are not joined.
+The summary contains the room join rules. We need that to decide if the user gets prompted with the option to knock ("ask to join"), a cannot join error or the join view.
+
+Element Call requires a Livekit SFU behind a Livekit jwt service to work. The url to the Livekit jwt service can either be configured in the config of Element Call (fallback/legacy configuration) or be configured by your homeserver via the `.well-known`.
+This is the recommended method.
+
+The configuration is a list of Foci configs:
+
+```json
+"org.matrix.msc4143.rtc_foci": [
+    {
+        "type": "livekit",
+        "livekit_service_url": "https://someurl.com"
+    },
+     {
+        "type": "livekit",
+        "livekit_service_url": "https://livekit2.com"
+    },
+    {
+        "type": "another_foci",
+        "props_for_another_foci": "val"
+    },
+]
+```
+
+## Translation
+
+If you'd like to help translate Element Call, head over to [Localazy](https://localazy.com/p/element-call). You're also encouraged to join the [Element Translators](https://matrix.to/#/#translators:element.io) space to discuss and coordinate translation efforts.
+
+## Development
+
+### Frontend
+
+Element Call is built against [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/pull/2553). To get started, clone, install, and link the package:
 
 ```
 git clone https://github.com/matrix-org/matrix-js-sdk.git
 cd matrix-js-sdk
-git checkout robertlong/group-call
 yarn
 yarn link
 ```
 
-Then clone, install, link `matrix-js-sdk` into `matrix-react-sdk`, and link `matrix-react-sdk`
+Next, we can set up this project:
 
 ```
-git clone https://github.com/matrix-org/matrix-react-sdk.git
-cd matrix-react-sdk
-git checkout robertlong/group-call
+git clone https://github.com/element-hq/element-call.git
+cd element-call
 yarn
 yarn link matrix-js-sdk
-yarn link
 ```
 
-Next you'll also need [Synapse](https://matrix-org.github.io/synapse/latest/setup/installation.html) installed locally and running on port 8008.
-
-Finally we can set up this project.
+You're now ready to launch the development server:
 
 ```
-git clone https://github.com/vector-im/matrix-video-chat.git
-cd matrix-video-chat
-yarn
-yarn link matrix-js-sdk
-yarn link matrix-react-sdk
 yarn dev
 ```
 
-## Config
+### Backend
 
-Configuration options are documented in the `.env` file.
+A docker compose file is provided to start a LiveKit server and auth
+service for development. These use a test 'secret' published in this
+repository, so this must be used only for local development and
+**_never be exposed to the public Internet._**
+
+To use it, add a SFU parameter in your local config `./public/config.json`:
+(Be aware, that this is only the fallback Livekit SFU. If the homeserver
+advertises one in the client well-known, this will not be used.)
+
+```json
+"livekit": {
+  "livekit_service_url": "http://localhost:7881"
+},
+```
+
+Run backend components:
+
+```
+yarn backend
+```
+
+## Documentation
+
+Usage and other technical details about the project can be found here:
+
+[**Docs**](./docs/README.md)

babel.config.cjs

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

backend-docker-compose.yml

@@ -0,0 +1,44 @@
+version: "3.9"
+
+networks:
+  lkbackend:
+
+services:
+  auth-service:
+    image: ghcr.io/element-hq/lk-jwt-service:latest-ci
+    hostname: auth-server
+    ports:
+      - 8881:8080
+    environment:
+      - LIVEKIT_URL=ws://localhost:7880
+      - LIVEKIT_KEY=devkey
+      - LIVEKIT_SECRET=secret
+    deploy:
+      restart_policy:
+        condition: on-failure
+    networks:
+      - lkbackend
+
+  livekit:
+    image: livekit/livekit-server:latest
+    command: --dev --config /etc/livekit.yaml
+    restart: unless-stopped
+    ports:
+      - "7880:7880"
+      - "7881:7881"
+      - "7882:7882"
+      - "50100-50200:50100-50200"
+    volumes:
+      - ./backend/livekit.yaml:/etc/livekit.yaml
+    networks:
+      - lkbackend
+
+  redis:
+    image: redis:6-alpine
+    command: redis-server /etc/redis.conf
+    ports:
+      - 6379:6379
+    volumes:
+      - ./backend/redis.conf:/etc/redis.conf
+    networks:
+      - lkbackend

backend/livekit.yaml

@@ -0,0 +1,23 @@
+port: 7880
+bind_addresses:
+  - "0.0.0.0"
+rtc:
+  tcp_port: 7881
+  port_range_start: 50100
+  port_range_end: 50200
+  use_external_ip: false
+#redis:
+#    address: redis:6379
+#    username: ""
+#    password: ""
+#    db: 0
+turn:
+  enabled: false
+  domain: localhost
+  cert_file: ""
+  key_file: ""
+  tls_port: 5349
+  udp_port: 443
+  external_tls: true
+keys:
+  devkey: secret

backend/redis.conf

@@ -0,0 +1,5 @@
+bind 0.0.0.0
+protected-mode yes
+port 6379
+timeout 0
+tcp-keepalive 300

config/config.sample.json

@@ -0,0 +1,12 @@
+{
+  "default_server_config": {
+    "m.homeserver": {
+      "base_url": "https://call.ems.host",
+      "server_name": "call.ems.host"
+    }
+  },
+  "livekit": {
+    "livekit_service_url": "http://localhost:7881"
+  },
+  "eula": "https://static.element.io/legal/online-EULA.pdf"
+}

config/element_io_develop.json

@@ -0,0 +1,19 @@
+{
+  "default_server_config": {
+    "m.homeserver": {
+      "base_url": "https://call.ems.host",
+      "server_name": "call.ems.host"
+    }
+  },
+  "posthog": {
+    "api_key": "phc_rXGHx9vDmyEvyRxPziYtdVIv0ahEv8A9uLWFcCi1WcU",
+    "api_host": "https://posthog-element-call.element.io"
+  },
+  "sentry": {
+    "environment": "main-branch-cd",
+    "DSN": "https://b1e328d49be3402ba96101338989fb35@sentry.matrix.org/41"
+  },
+  "rageshake": {
+    "submit_url": "https://element.io/bugreports/submit"
+  }
+}

config/element_io_preview.json

@@ -0,0 +1,18 @@
+{
+  "default_server_config": {
+    "m.homeserver": {
+      "base_url": "https://call-unstable.ems.host",
+      "server_name": "call-unstable.ems.host"
+    }
+  },
+  "livekit": {
+    "livekit_service_url": "https://livekit-jwt.call.element.dev"
+  },
+  "posthog": {
+    "api_key": "phc_rXGHx9vDmyEvyRxPziYtdVIv0ahEv8A9uLWFcCi1WcU",
+    "api_host": "https://posthog-element-call.element.io"
+  },
+  "rageshake": {
+    "submit_url": "https://element.io/bugreports/submit"
+  }
+}

config/httpd.conf

@@ -0,0 +1,30 @@
+<VirtualHost *:8080>
+    ServerName localhost
+
+    DocumentRoot "/app"
+
+    <Location "/">
+        # disable cache entriely by default (apart from Etag which is accurate enough)
+        Header add Cache-Control "private no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0"
+        CacheDisable on
+        ExpiresActive off
+
+        # also turn off last-modified since they are just the timestamps of the file in the docker image
+        # and may or may not bear any resemblance to when the resource changed
+        Header add Last-Modified ""
+
+        DirectoryIndex index.html
+    </Location>
+
+    # assets can be cached because they have hashed filenames
+    <Location "/assets">
+        ExpiresActive on
+        ExpiresDefault "access plus 1 week"
+        Header add Cache-Control "public, no-transform"
+    </Location>
+
+    <Location "/apple-app-site-association">
+        ForceType application/json
+    </Location>
+</VirtualHost>
+

config/netlify_redirects

@@ -0,0 +1,4 @@
+# This file is copied to the netlify deploy dir in the upload stage
+
+# Redirect any unknown path to index.html
+/*  /index.html 200

config/nginx.conf

@@ -0,0 +1,29 @@
+server {
+    listen       8080;
+    server_name  localhost;
+
+    root   /app;
+
+    location / {
+        # disable cache entriely by default (apart from Etag which is accurate enough)
+        add_header Cache-Control 'private no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
+        if_modified_since off;
+        expires off;
+        # also turn off last-modified since they are just the timestamps of the file in the docker image
+        # and may or may not bear any resemblance to when the resource changed
+        add_header Last-Modified "";
+
+        try_files $uri /$uri /index.html;
+    }
+
+    # assets can be cached because they have hashed filenames
+    location /assets {
+        expires 1w;
+        add_header Cache-Control "public, no-transform";
+    }
+
+    location /apple-app-site-association {
+        default_type application/json;
+    }
+}
+

config/otel_dev/README.md

@@ -0,0 +1,18 @@
+# OpenTelemetry Collector for development
+
+This directory contains a docker compose file that starts a jaeger all-in-one instance
+with an in-memory database, along with a standalone OpenTelemetry collector that forwards
+traces into the jaeger. Jaeger has a built-in OpenTelemetry collector, but it can't be
+configured to send CORS headers so can't be used from a browser. This sets the config on
+the collector to send CORS headers.
+
+This also adds an nginx to add CORS headers to the jaeger query endpoint, such that it can
+be used from webapps like stalk (https://deniz.co/stalk/). The CORS enabled endpoint is
+exposed on port 16687. To use stalk, you should simply be able to navigate to it and add
+http://127.0.0.1:16687/api as a data source.
+
+(Yes, we could enable the OTLP collector in jaeger all-in-one and passed this through
+the nginx to enable CORS too, rather than running a separate collector. There's no reason
+it's done this way other than that I'd already set up the separate collector.)
+
+Running `docker compose up` in this directory should be all you need.

config/otel_dev/collector-gateway.yaml

@@ -0,0 +1,41 @@
+receivers:
+  otlp:
+    protocols:
+      http:
+        endpoint: 0.0.0.0:4318
+        cors:
+          allowed_origins:
+            # This can't be '*' because opentelemetry-js uses sendBeacon which always operates
+            # in 'withCredentials' mode, which browsers don't allow with an allow-origin of '*'
+            #- "https://pr976--element-call.netlify.app"
+            - "http://*"
+          allowed_headers:
+            - "*"
+processors:
+  batch:
+    timeout: 1s
+  resource:
+    attributes:
+      - key: test.key
+        value: "test-value"
+        action: insert
+exporters:
+  logging:
+    loglevel: info
+  jaeger:
+    endpoint: jaeger-all-in-one:14250
+    tls:
+      insecure: true
+extensions:
+  health_check:
+  pprof:
+    endpoint: :1888
+  zpages:
+    endpoint: :55679
+service:
+  extensions: [pprof, zpages, health_check]
+  pipelines:
+    traces:
+      receivers: [otlp]
+      processors: [batch, resource]
+      exporters: [logging, jaeger]

config/otel_dev/docker-compose.yaml

@@ -0,0 +1,29 @@
+version: "2"
+services:
+  # Jaeger
+  jaeger-all-in-one:
+    image: jaegertracing/all-in-one:latest
+    ports:
+      - "16686:16686"
+      - "14268"
+      - "14250"
+  # Collector
+  collector-gateway:
+    image: otel/opentelemetry-collector:latest
+    volumes:
+      - ./collector-gateway.yaml:/etc/collector-gateway.yaml
+    command: ["--config=/etc/collector-gateway.yaml"]
+    ports:
+      - "1888:1888" # pprof extension
+      - "13133:13133" # health_check extension
+      - "4317:4317" # OTLP gRPC receiver
+      - "4318:4318" # OTLP HTTP receiver
+      - "55670:55679" # zpages extension
+    depends_on:
+      - jaeger-all-in-one
+  nginx:
+    image: nginxinc/nginx-unprivileged:latest
+    volumes:
+      - ./nginx_otel.conf:/etc/nginx/conf.d/default.conf:ro
+    ports:
+      - "16687:8080"

config/otel_dev/nginx_otel.conf

@@ -0,0 +1,16 @@
+server {
+    listen       8080;
+    server_name  localhost;
+
+    location / {
+            proxy_pass  http://jaeger-all-in-one:16686/;
+            add_header Access-Control-Allow-Origin *;
+
+            if ($request_method = OPTIONS) {
+                add_header Access-Control-Allow-Origin *;
+                add_header Content-Type text/plain;
+                add_header Content-Length 0;
+                return 204;
+            }
+    }
+}

docs/README.md

@@ -0,0 +1,6 @@
+## Element Call Docs
+
+This folder contains documentation for Element Call setup and usage.
+
+- [Url format and parameters](./url-params.md)
+- [Embedded vs standalone mode](./embedded-standalone.md)

docs/embedded-standalone.md

@@ -0,0 +1,9 @@
+## Embedded vs standalone mode
+
+Element call is developed using the js-sdk with matroska mode. This means the app can run either as a standalone app directly connected to a homeserver providing login interfaces or it can be used as a widget.
+
+As a widget the app only uses the core calling (matrixRTC) parts. The rest (authentication, sending events, getting room state updates about calls) is done by the hosting client.
+Element Call and the hosting client are connected via the widget api.
+
+Element call detects that it is run as a widget if a widgetId is defined in the url parameters. If `widgetId` is present element call will try to connect to the client via the widget postMessage api using the parameters provided in [Url Format and parameters
+](./url-params.md).

docs/url-params.md

@@ -0,0 +1,252 @@
+# Url Format and parameters
+
+There are two formats for Element Call urls.
+
+- **Current Format**
+
+  ```text
+  https://element_call.domain/room/#
+  /<room_name_alias>?roomId=!id:domain&password=1234&<other params see below>
+  ```
+
+  The url is split into two sections. The `https://element_call.domain/room/#`
+  contains the app and the intend that the link brings you into a specific room
+  (`https://call.element.io/#` would be the homepage). The fragment is used for
+  query parameters to make sure they never get sent to the element_call.domain
+  server. Here we have the actual matrix roomId and the password which are used
+  to connect all participants with e2ee. This allows that `<room_name_alias>` does
+  not need to be unique. Multiple meetings with the label weekly-sync can be created
+  without collisions.
+
+- **deprecated**
+
+  ```text
+  https://element_call.domain/<room_name>
+  ```
+
+  With this format the livekit alias that will be used is the `<room_name>`.
+  All ppl connecting to this url will end up in the same unencrypted room.
+  This does not scale, is super unsecure
+  (ppl could end up in the same room by accident) and it also is not really
+  possible to support encryption.
+  The url parameters are spit into two categories: **general** and **widget related**.
+
+## Widget related params
+
+**widgetId**
+The id used by the widget. The presence of this parameter implies that element
+call will not connect to a homeserver directly and instead tries to establish
+postMessage communication via the `parentUrl`.
+
+```ts
+widgetId: string | null;
+```
+
+**parentUrl**
+The url used to send widget action postMessages. This should be the domain of
+the client or the webview the widget is hosted in. (in case the widget is not
+in an Iframe but in a dedicated webview we send the postMessages same webview
+the widget lives in. Filtering is done in the widget so it ignores the messages
+it receives from itself)
+
+```ts
+parentUrl: string | null;
+```
+
+**userId**
+The user's ID (only used in matryoshka mode).
+
+```ts
+userId: string | null;
+```
+
+**deviceId**
+The device's ID (only used in matryoshka mode).
+
+```ts
+deviceId: string | null;
+```
+
+**baseUrl**
+The base URL of the homeserver to use for media lookups in matryoshka mode.
+
+```ts
+baseUrl: string | null;
+```
+
+### General url parameters
+
+**roomId**
+Anything about what room we're pointed to should be from useRoomIdentifier which
+parses the path and resolves alias with respect to the default server name, however
+roomId is an exception as we need the room ID in embedded (matroyska) mode, and not
+the room alias (or even the via params because we are not trying to join it). This
+is also not validated, where it is in useRoomIdentifier().
+
+```ts
+roomId: string | null;
+```
+
+**confineToRoom**
+Whether the app should keep the user confined to the current call/room.
+
+```ts
+confineToRoom: boolean; (default: false)
+```
+
+**appPrompt**
+Whether upon entering a room, the user should be prompted to launch the
+native mobile app. (Affects only Android and iOS.)
+
+```ts
+appPrompt: boolean; (default: true)
+```
+
+**preload**
+Whether the app should pause before joining the call until it sees an
+io.element.join widget action, allowing it to be preloaded.
+
+```ts
+preload: boolean; (default: false)
+```
+
+**hideHeader**
+Whether to hide the room header when in a call.
+
+```ts
+hideHeader: boolean; (default: false)
+```
+
+**showControls**
+Whether to show the buttons to mute, screen-share, invite, hangup are shown
+when in a call.
+
+```ts
+showControls: boolean; (default: true)
+```
+
+**hideScreensharing**
+Whether to hide the screen-sharing button.
+
+```ts
+hideScreensharing: boolean; (default: false)
+```
+
+**enableE2EE** (Deprecated)
+Whether to use end-to-end encryption. This is a legacy flag for the full mesh branch.
+It is not used on the livekit branch and has no impact there!
+
+```ts
+enableE2EE: boolean; (default: true)
+```
+
+**perParticipantE2EE**
+Whether to use per participant encryption.
+Keys will be exchanged over encrypted matrix room messages.
+
+```ts
+perParticipantE2EE: boolean; (default: false)
+```
+
+**password**
+E2EE password when using a shared secret.
+(For individual sender keys in embedded mode this is not required.)
+
+```ts
+password: string | null;
+```
+
+**displayName**
+The display name to use for auto-registration.
+
+```ts
+displayName: string | null;
+```
+
+**lang**
+The BCP 47 code of the language the app should use.
+
+```ts
+lang: string | null;
+```
+
+**fonts**
+The font/fonts which the interface should use.
+There can be multiple font url parameters: `?font=font-one&font=font-two...`
+
+```ts
+font: string;
+font: string;
+...
+```
+
+**fontScale**
+The factor by which to scale the interface's font size.
+
+```ts
+fontScale: number | null;
+```
+
+**analyticsID**
+The Posthog analytics ID. It is only available if the user has given consent for
+sharing telemetry in element web.
+
+```ts
+analyticsID: string | null;
+```
+
+**allowIceFallback**
+Whether the app is allowed to use fallback STUN servers for ICE in case the
+user's homeserver doesn't provide any.
+
+```ts
+allowIceFallback: boolean; (default: false)
+```
+
+**skipLobby**
+Setting this flag skips the lobby and brings you in the call directly.
+In the widget this can be combined with preload to pass the device settings
+with the join widget action.
+
+```ts
+skipLobby: boolean; (default: false)
+```
+
+**returnToLobby**
+Setting this flag makes element call show the lobby in widget mode after leaving
+a call.
+This is useful for video rooms.
+If set to false, the widget will show a blank page after leaving the call.
+
+```ts
+returnToLobby: boolean; (default: false)
+```
+
+**theme**
+The theme to use for element call.
+can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
+If not set element call will use the dark theme.
+
+```ts
+theme: string | null;
+```
+
+**viaServers**
+This defines the homeserver that is going to be used when joining a room.
+It has to be set to a non default value for links to rooms
+that are not on the default homeserver,
+that is in use for the current user.
+
+```ts
+viaServers: string; (default: undefined)
+```
+
+**homeserver**
+This defines the homeserver that is going to be used when registering
+a new (guest) user.
+This can be user to configure a non default guest user server when
+creating a spa link.
+
+```ts
+homeserver: string; (default: undefined)
+```

i18next-parser.config.ts

@@ -0,0 +1,28 @@
+export default {
+  keySeparator: ".",
+  namespaceSeparator: false,
+  contextSeparator: "|",
+  pluralSeparator: "_",
+  createOldCatalogs: false,
+  defaultNamespace: "app",
+  lexers: {
+    ts: [
+      {
+        lexer: "JavascriptLexer",
+        functions: ["t", "translatedError"],
+        namespaceFunctions: ["useTranslation", "withTranslation"],
+      },
+    ],
+    tsx: [
+      {
+        lexer: "JsxLexer",
+        functions: ["t", "translatedError"],
+        namespaceFunctions: ["useTranslation", "withTranslation"],
+      },
+    ],
+  },
+  locales: ["en-GB"],
+  output: "public/locales/$LOCALE/$NAMESPACE.json",
+  input: ["src/**/*.{ts,tsx}"],
+  sort: true,
+};

index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-    <title>Matrix Video Chat</title>
-    <script>
-      window.global = window;
-    </script>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>

localazy.json

@@ -0,0 +1,33 @@
+{
+  "readKey": "a7580769542256117579-70975387172511848f4c6533943d776547bad4853931ba352ee684b738f4494e",
+
+  "upload": {
+    "type": "json",
+    "deprecate": "file",
+    "features": ["plural_postfix_us", "filter_untranslated"],
+    "files": [
+      {
+        "pattern": "public/locales/en-GB/*.json",
+        "lang": "inherited"
+      },
+      {
+        "group": "existing",
+        "pattern": "public/locales/*/*.json",
+        "excludes": ["public/locales/en-GB/*.json"],
+        "lang": "${autodetectLang}"
+      }
+    ]
+  },
+
+  "download": {
+    "files": [
+      {
+        "output": "public/locales/${langLsrDash}/${file}"
+      }
+    ],
+    "includeSourceLang": "${includeSourceLang|false}",
+    "langAliases": {
+      "en": "en_GB"
+    }
+  }
+}

package.json

@@ -1,13 +1,39 @@
 {
+  "name": "element-call",
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "serve": "vite preview"
+    "build": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
+    "serve": "vite preview",
+    "prettier:check": "prettier -c .",
+    "prettier:format": "prettier -w .",
+    "lint": "yarn lint:types && yarn lint:eslint",
+    "lint:eslint": "eslint --max-warnings 0 src",
+    "lint:eslint-fix": "eslint --max-warnings 0 src --fix",
+    "lint:types": "tsc",
+    "i18n": "node_modules/i18next-parser/bin/cli.js",
+    "i18n:check": "node_modules/i18next-parser/bin/cli.js --fail-on-warnings --fail-on-update",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "backend": "docker-compose -f backend-docker-compose.yml up"
   },
   "dependencies": {
+    "@juggle/resize-observer": "^3.3.1",
+    "@livekit/components-core": "^0.10.0",
+    "@livekit/components-react": "^2.0.0",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
+    "@opentelemetry/api": "^1.4.0",
+    "@opentelemetry/context-zone": "^1.9.1",
+    "@opentelemetry/exporter-jaeger": "^1.9.1",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.52.0",
+    "@opentelemetry/instrumentation-document-load": "^0.39.0",
+    "@opentelemetry/instrumentation-user-interaction": "^0.39.0",
+    "@opentelemetry/sdk-trace-web": "^1.9.1",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-visually-hidden": "^1.0.3",
     "@react-aria/button": "^3.3.4",
-    "@react-aria/dialog": "^3.1.4",
     "@react-aria/focus": "^3.5.0",
     "@react-aria/menu": "^3.3.0",
     "@react-aria/overlays": "^3.7.3",
@@ -15,30 +41,91 @@
     "@react-aria/tabs": "^3.1.0",
     "@react-aria/tooltip": "^3.1.3",
     "@react-aria/utils": "^3.10.0",
+    "@react-rxjs/core": "^0.10.7",
+    "@react-spring/web": "^9.4.4",
     "@react-stately/collections": "^3.3.4",
-    "@react-stately/overlays": "^3.1.3",
     "@react-stately/select": "^3.1.3",
     "@react-stately/tooltip": "^3.0.5",
     "@react-stately/tree": "^3.2.0",
-    "@sentry/react": "^6.13.3",
-    "@sentry/tracing": "^6.13.3",
+    "@sentry/react": "^8.0.0",
+    "@sentry/tracing": "^7.0.0",
+    "@types/lodash": "^4.14.199",
+    "@use-gesture/react": "^10.2.11",
+    "@vector-im/compound-design-tokens": "^1.0.0",
+    "@vector-im/compound-web": "^3.0.0",
+    "@vitejs/plugin-basic-ssl": "^1.0.1",
+    "@vitejs/plugin-react": "^4.0.1",
+    "buffer": "^6.0.3",
     "classnames": "^2.3.1",
-    "color-hash": "^2.0.1",
     "events": "^3.3.0",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#robertlong/group-call",
-    "matrix-react-sdk": "github:matrix-org/matrix-react-sdk#robertlong/group-call",
-    "postcss-preset-env": "^6.7.0",
-    "re-resizable": "^6.9.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-json-view": "^1.21.3",
-    "react-router": "6",
+    "i18next": "^23.0.0",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^2.0.0",
+    "livekit-client": "^2.0.2",
+    "lodash": "^4.17.21",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#238eea0ef5c82d0a11b8d5cc5c04104d6c94c4c1",
+    "matrix-widget-api": "^1.3.1",
+    "normalize.css": "^8.0.1",
+    "pako": "^2.0.4",
+    "postcss-preset-env": "^9.0.0",
+    "posthog-js": "^1.29.0",
+    "react": "18",
+    "react-dom": "18",
+    "react-i18next": "^15.0.0",
     "react-router-dom": "^5.2.0",
-    "react-use-clipboard": "^1.0.7"
+    "react-use-clipboard": "^1.0.7",
+    "react-use-measure": "^2.1.1",
+    "rxjs": "^7.8.1",
+    "sdp-transform": "^2.14.1",
+    "tinyqueue": "^3.0.0",
+    "unique-names-generator": "^4.6.0",
+    "uuid": "10",
+    "vaul": "^0.9.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.16.5",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.0",
+    "@react-spring/rafz": "^9.7.3",
+    "@react-types/dialog": "^3.5.5",
+    "@sentry/vite-plugin": "^2.0.0",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/content-type": "^1.1.5",
+    "@types/dom-screen-wake-lock": "^1.0.1",
+    "@types/dompurify": "^3.0.2",
+    "@types/grecaptcha": "^3.0.4",
+    "@types/node": "^20.0.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/request": "^2.48.8",
+    "@types/sdp-transform": "^2.4.5",
+    "@types/uuid": "10",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "babel-loader": "^9.0.0",
+    "babel-plugin-transform-vite-meta-env": "^1.0.3",
+    "eslint": "^8.14.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-deprecate": "^0.8.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-matrix-org": "^1.2.1",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-unicorn": "^54.0.0",
+    "i18next-parser": "^9.0.0",
+    "jsdom": "^24.0.0",
+    "prettier": "^3.0.0",
     "sass": "^1.42.1",
-    "vite": "^2.4.2",
-    "vite-plugin-svgr": "^0.4.0"
+    "typescript": "^5.1.6",
+    "typescript-eslint-language-service": "^5.0.5",
+    "vite": "^5.0.0",
+    "vite-plugin-html-template": "^1.1.0",
+    "vite-plugin-svgr": "^4.0.0",
+    "vitest": "^2.0.0"
   }
 }

public/.well-known/apple-app-site-association

@@ -0,0 +1,26 @@
+{
+  "applinks": {
+    "details": [
+      {
+        "appIDs": [
+          "7J4U792NQT.io.element.elementx",
+          "7J4U792NQT.io.element.elementx.nightly",
+          "7J4U792NQT.io.element.elementx.pr"
+        ],
+        "components": [
+          {
+            "?": {
+              "no_universal_links": "?*"
+            },
+            "exclude": true,
+            "comment": "Opt out of universal links"
+          },
+          {
+            "/": "/*",
+            "comment": "Matches any URL"
+          }
+        ]
+      }
+    ]
+  }
+}

public/.well-known/assetlinks.json

@@ -0,0 +1,32 @@
+[
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "io.element.android.x.debug",
+      "sha256_cert_fingerprints": [
+        "B0:B0:51:DC:56:5C:81:2F:E1:7F:6F:3E:94:5B:4D:79:04:71:23:AB:0D:A6:12:86:76:9E:B2:94:91:97:13:0E"
+      ]
+    }
+  },
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "io.element.android.x.nightly",
+      "sha256_cert_fingerprints": [
+        "CA:D3:85:16:84:3A:05:CC:EB:00:AB:7B:D3:80:0F:01:BA:8F:E0:4B:38:86:F3:97:D8:F7:9A:1B:C4:54:E4:0F"
+      ]
+    }
+  },
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "io.element.android.x",
+      "sha256_cert_fingerprints": [
+        "C6:DB:9B:9C:8C:BD:D6:5D:16:E8:EC:8C:8B:91:C8:31:B9:EF:C9:5C:BF:98:AE:41:F6:A9:D8:35:15:1A:7E:16"
+      ]
+    }
+  }
+]

public/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="favicon.png" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
+    />
+    <title><%- title %></title>
+    <script>
+      window.global = window;
+    </script>
+  </head>
+
+  <!-- The default class is: .no-theme {display: none}. It will be overwritten once the app is loaded. -->
+  <body class="no-theme">
+    <div id="root"></div>
+  </body>
+</html>

public/locales/bg/app.json

@@ -0,0 +1,75 @@
+{
+  "a11y": {
+    "user_menu": "Потребителско меню"
+  },
+  "action": {
+    "close": "Затвори",
+    "go": "Напред",
+    "no": "Не",
+    "register": "Регистрация",
+    "remove": "Премахни",
+    "sign_in": "Влез",
+    "sign_out": "Излез"
+  },
+  "call_ended_view": {
+    "create_account_button": "Създай акаунт",
+    "create_account_prompt": "<0>Защо не настройте парола за да запазите акаунта си?</0><1>Ще можете да запазите името и аватара си за бъдещи разговори</1>",
+    "not_now_button": "Не сега, върни се на началния екран"
+  },
+  "common": {
+    "audio": "Звук",
+    "avatar": "Аватар",
+    "camera": "Камера",
+    "copied": "Копирано!",
+    "display_name": "Име/псевдоним",
+    "home": "Начало",
+    "loading": "Зареждане…",
+    "microphone": "Микрофон",
+    "password": "Парола",
+    "profile": "Профил",
+    "settings": "Настройки",
+    "username": "Потребителско име",
+    "video": "Видео"
+  },
+  "join_existing_call_modal": {
+    "join_button": "Да, присъедини се",
+    "text": "Този разговор вече съществува, искате ли да се присъедините?",
+    "title": "Присъединяване към съществуващ разговор?"
+  },
+  "layout_spotlight_label": "Прожектор",
+  "lobby": {
+    "join_button": "Влез в разговора"
+  },
+  "logging_in": "Влизане…",
+  "login_auth_links": "<0>Създайте акаунт</0> или <2>Влезте като гост</2>",
+  "login_title": "Влез",
+  "rageshake_request_modal": {
+    "body": "Друг потребител в този разговор има проблем. За да диагностицираме този проблем по-добре ни се иска да съберем debug логове.",
+    "title": "Заявка за debug логове"
+  },
+  "rageshake_send_logs": "Изпратете debug логове",
+  "rageshake_sending": "Изпращане…",
+  "recaptcha_dismissed": "Recaptcha отхвърлена",
+  "recaptcha_not_loaded": "Recaptcha не е заредена",
+  "register": {
+    "passwords_must_match": "Паролите не съвпадат",
+    "registering": "Регистриране…"
+  },
+  "register_auth_links": "<0>Вече имате акаунт?</0><1><0>Влезте с него</0> или <2>Влезте като гост</2></1>",
+  "register_confirm_password_label": "Потвърди паролата",
+  "return_home_button": "Връщане на началния екран",
+  "room_auth_view_join_button": "Влез в разговора сега",
+  "screenshare_button_label": "Сподели екрана",
+  "select_input_unset_button": "Изберете опция",
+  "settings": {
+    "developer_tab_title": "Разработчик",
+    "feedback_tab_h4": "Изпрати обратна връзка",
+    "feedback_tab_send_logs_label": "Включи debug логове",
+    "more_tab_title": "Още",
+    "speaker_device_selection_label": "Говорител"
+  },
+  "unauthenticated_view_body": "Все още не сте регистрирани? <2>Създайте акаунт</2>",
+  "unauthenticated_view_login_button": "Влезте в акаунта си",
+  "version": "Версия: {{version}}",
+  "waiting_for_participants": "Изчакване на други участници…"
+}

public/locales/cs/app.json

@@ -0,0 +1,79 @@
+{
+  "a11y": {
+    "user_menu": "Uživatelské menu"
+  },
+  "action": {
+    "close": "Zavřít",
+    "copy": "Kopírovat",
+    "go": "Pokračovat",
+    "no": "Ne",
+    "register": "Registrace",
+    "remove": "Odstranit",
+    "sign_in": "Přihlásit se",
+    "sign_out": "Odhlásit se"
+  },
+  "call_ended_view": {
+    "create_account_button": "Vytvořit účet",
+    "create_account_prompt": "<0>Proč neskončit nastavením hesla, abyste mohli účet použít znovu?</0><1>Budete si moci nechat své jméno a nastavit si avatar pro budoucí hovory </1>",
+    "not_now_button": "Teď ne, vrátit se na domovskou obrazovku"
+  },
+  "common": {
+    "camera": "Kamera",
+    "copied": "Zkopírováno!",
+    "display_name": "Zobrazované jméno",
+    "home": "Domov",
+    "loading": "Načítání…",
+    "microphone": "Mikrofon",
+    "password": "Heslo",
+    "profile": "Profil",
+    "settings": "Nastavení",
+    "username": "Uživatelské jméno"
+  },
+  "full_screen_view_description": "<0>Odeslání ladících záznamů nám pomůže diagnostikovat problém.</0>",
+  "full_screen_view_h1": "<0>Oops, něco se pokazilo.</0>",
+  "header_label": "Domov Element Call",
+  "join_existing_call_modal": {
+    "join_button": "Ano, připojit se",
+    "text": "Tento hovor již existuje, chcete se připojit?",
+    "title": "Připojit se k existujícimu hovoru?"
+  },
+  "layout_spotlight_label": "Soustředěný mód",
+  "lobby": {
+    "join_button": "Připojit se k hovoru"
+  },
+  "logging_in": "Přihlašování se…",
+  "login_auth_links": "<0>Vytvořit účet</0> Or <2>Jako host</2>",
+  "login_title": "Přihlášení",
+  "rageshake_request_modal": {
+    "body": "Jiný uživatel v tomto hovoru má problémy. Abychom mohli diagnostikovat problém, rádi bychom shromáždili protokoly ladění.",
+    "title": "Žádost o protokoly ladění"
+  },
+  "rageshake_send_logs": "Poslat ladící záznam",
+  "rageshake_sending": "Posílání…",
+  "rageshake_sending_logs": "Posílání ladícího záznamu…",
+  "recaptcha_dismissed": "Recaptcha byla zamítnuta",
+  "recaptcha_not_loaded": "Recaptcha se nenačetla",
+  "register": {
+    "passwords_must_match": "Hesla se musí shodovat",
+    "registering": "Registrování…"
+  },
+  "register_auth_links": "<0>Už máte účet?</0><1><0>Přihlásit se</0> Or <2>Jako host</2></1>",
+  "register_confirm_password_label": "Potvrdit heslo",
+  "return_home_button": "Vrátit se na domácí obrazovku",
+  "room_auth_view_join_button": "Připojit se k hovoru",
+  "screenshare_button_label": "Sdílet obrazovku",
+  "select_input_unset_button": "Vyberte možnost",
+  "settings": {
+    "developer_settings_label": "Vývojářské nastavení",
+    "developer_settings_label_description": "Zobrazit vývojářské nastavení.",
+    "developer_tab_title": "Vývojář",
+    "feedback_tab_h4": "Dát feedback",
+    "feedback_tab_send_logs_label": "Zahrnout ladící záznamy",
+    "more_tab_title": "Více",
+    "speaker_device_selection_label": "Reproduktor"
+  },
+  "unauthenticated_view_body": "Nejste registrovaní? <2>Vytvořit účet</2>",
+  "unauthenticated_view_login_button": "Přihlásit se ke svému účtu",
+  "version": "Verze: {{version}}",
+  "waiting_for_participants": "Čekání na další účastníky…"
+}

public/locales/de/app.json

@@ -0,0 +1,144 @@
+{
+  "a11y": {
+    "user_menu": "Benutzermenü"
+  },
+  "action": {
+    "close": "Schließen",
+    "copy": "Kopieren",
+    "copy_link": "Link kopieren",
+    "go": "Los geht’s",
+    "invite": "Einladen",
+    "no": "Nein",
+    "register": "Registrieren",
+    "remove": "Entfernen",
+    "sign_in": "Anmelden",
+    "sign_out": "Abmelden",
+    "submit": "Absenden"
+  },
+  "analytics_notice": "Mit der Teilnahme an der Beta akzeptierst du die Sammlung von anonymen Daten, die wir zur Verbesserung des Produkts verwenden. Weitere Informationen zu den von uns erhobenen Daten findest du in unserer <2>Datenschutzerklärung</2> und unseren <5>Cookie-Richtlinien</5>.",
+  "app_selection_modal": {
+    "continue_in_browser": "Weiter im Browser",
+    "open_in_app": "In der App öffnen",
+    "text": "Bereit, beizutreten?",
+    "title": "App auswählen"
+  },
+  "application_opened_another_tab": "Diese Anwendung wurde in einem anderen Tab geöffnet.",
+  "browser_media_e2ee_unsupported": "Dein Webbrowser unterstützt keine Medien-Ende-zu-Ende-Verschlüsselung. Unterstützte Browser sind Chrome, Safari, Firefox >=117",
+  "browser_media_e2ee_unsupported_heading": "Inkompatibler Browser",
+  "call_ended_view": {
+    "body": "Deine Verbindung wurde getrennt",
+    "create_account_button": "Konto erstellen",
+    "create_account_prompt": "<0>Warum vergibst du nicht abschließend ein Passwort, um dein Konto zu erhalten?</0><1>Du kannst deinen Namen behalten und ein Profilbild für zukünftige Anrufe festlegen.</1>",
+    "feedback_done": "<0>Danke für deine Rückmeldung!</0>",
+    "feedback_prompt": "<0>Wir würden uns freuen, deine Rückmeldung zu hören, um deine Erfahrung verbessern zu können.</0>",
+    "headline": "{{displayName}}, dein Anruf wurde beendet.",
+    "not_now_button": "Nicht jetzt, zurück zur Startseite",
+    "reconnect_button": "Erneut verbinden",
+    "survey_prompt": "Wie ist es gelaufen?"
+  },
+  "call_name": "Name des Anrufs",
+  "common": {
+    "audio": "Audio",
+    "avatar": "Profilbild",
+    "camera": "Kamera",
+    "copied": "Kopiert!",
+    "display_name": "Anzeigename",
+    "encrypted": "Verschlüsselt",
+    "error": "Fehler",
+    "home": "Startseite",
+    "loading": "Lade …",
+    "microphone": "Mikrofon",
+    "password": "Passwort",
+    "profile": "Profil",
+    "settings": "Einstellungen",
+    "unencrypted": "Nicht verschlüsselt",
+    "username": "Benutzername",
+    "video": "Video"
+  },
+  "disconnected_banner": "Die Verbindung zum Server wurde getrennt.",
+  "full_screen_view_description": "<0>Übermittelte Problemberichte helfen uns, Fehler zu beheben.</0>",
+  "full_screen_view_h1": "<0>Hoppla, etwas ist schiefgelaufen.</0>",
+  "group_call_loader_failed_heading": "Anruf nicht gefunden",
+  "group_call_loader_failed_text": "Anrufe sind nun Ende-zu-Ende-verschlüsselt und müssen auf der Startseite erstellt werden. Damit stellen wir sicher, dass alle denselben Schlüssel verwenden.",
+  "hangup_button_label": "Anruf beenden",
+  "header_label": "Element Call-Startseite",
+  "header_participants_label": "Teilnehmende",
+  "invite_modal": {
+    "link_copied_toast": "Link in Zwischenablage kopiert",
+    "title": "Zu diesem Anruf einladen"
+  },
+  "join_existing_call_modal": {
+    "join_button": "Ja, Anruf beitreten",
+    "text": "Dieser Aufruf existiert bereits, möchtest Du teilnehmen?",
+    "title": "An bestehendem Anruf teilnehmen?"
+  },
+  "layout_grid_label": "Raster",
+  "layout_spotlight_label": "Rampenlicht",
+  "lobby": {
+    "join_button": "Anruf beitreten",
+    "leave_button": "Zurück zu kürzlichen Anrufen"
+  },
+  "log_in": "Anmelden",
+  "logging_in": "Anmelden …",
+  "login_auth_links": "<0>Konto erstellen</0> Oder <2>Als Gast betreten</2>",
+  "login_auth_links_prompt": "Noch nicht registriert?",
+  "login_subheading": "Weiter zu Element",
+  "login_title": "Anmelden",
+  "microphone_off": "Mikrofon aus",
+  "microphone_on": "Mikrofon an",
+  "mute_microphone_button_label": "Mikrofon deaktivieren",
+  "rageshake_button_error_caption": "Protokolle erneut senden",
+  "rageshake_request_modal": {
+    "body": "Ein anderer Benutzer dieses Anrufs hat ein Problem. Um es besser diagnostizieren zu können, würden wir gerne ein Debug-Protokoll erstellen.",
+    "title": "Debug-Log Anfrage"
+  },
+  "rageshake_send_logs": "Debug-Logs senden",
+  "rageshake_sending": "Senden …",
+  "rageshake_sending_logs": "Sende Debug-Protokolle …",
+  "rageshake_sent": "Danke!",
+  "recaptcha_caption": "Diese Seite wird durch reCAPTCHA geschützt und es gelten Googles <2>Datenschutzerklärung</2> und <6>Nutzungsbedingungen</6>. <9></9>Mit einem Klick auf „Registrieren“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
+  "recaptcha_dismissed": "Recaptcha abgelehnt",
+  "recaptcha_not_loaded": "Recaptcha nicht geladen",
+  "register": {
+    "passwords_must_match": "Passwörter müssen übereinstimmen",
+    "registering": "Registrierung …"
+  },
+  "register_auth_links": "<0>Du hast bereits ein Konto?</0><1><0>Anmelden</0> Oder <2>Als Gast betreten</2></1>",
+  "register_confirm_password_label": "Passwort bestätigen",
+  "return_home_button": "Zurück zur Startseite",
+  "room_auth_view_eula_caption": "Mit einem Klick auf „Anruf beitreten“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
+  "room_auth_view_join_button": "Anruf beitreten",
+  "screenshare_button_label": "Bildschirm teilen",
+  "select_input_unset_button": "Wähle eine Option",
+  "settings": {
+    "developer_settings_label": "Entwicklereinstellungen",
+    "developer_settings_label_description": "Zeige die Entwicklereinstellungen im Einstellungsfenster.",
+    "developer_tab_title": "Entwickler",
+    "feedback_tab_body": "Falls du auf Probleme stößt oder einfach nur eine Rückmeldung geben möchtest, sende uns bitte eine kurze Beschreibung.",
+    "feedback_tab_description_label": "Deine Rückmeldung",
+    "feedback_tab_h4": "Rückmeldung geben",
+    "feedback_tab_send_logs_label": "Debug-Protokolle einschließen",
+    "feedback_tab_thank_you": "Danke, wir haben deine Rückmeldung erhalten!",
+    "feedback_tab_title": "Rückmeldung",
+    "more_tab_title": "Mehr",
+    "opt_in_description": "<0></0><1></1>Du kannst deine Zustimmung durch Abwählen dieses Kästchens zurückziehen. Falls du dich aktuell in einem Anruf befindest, wird diese Einstellung nach dem Ende des Anrufs wirksam.",
+    "show_connection_stats_label": "Verbindungsstatistiken zeigen",
+    "speaker_device_selection_label": "Wiedergabegerät"
+  },
+  "star_rating_input_label_one": "{{count}} Stern",
+  "star_rating_input_label_other": "{{count}} Sterne",
+  "start_new_call": "Neuen Anruf beginnen",
+  "start_video_button_label": "Video aktivieren",
+  "stop_screenshare_button_label": "Bildschirm wird geteilt",
+  "stop_video_button_label": "Video deaktivieren",
+  "submitting": "Sende …",
+  "unauthenticated_view_body": "Noch nicht registriert? <2>Konto erstellen</2>",
+  "unauthenticated_view_eula_caption": "Mit einem Klick auf „Los geht’s“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
+  "unauthenticated_view_login_button": "Melde dich mit deinem Konto an",
+  "unmute_microphone_button_label": "Mikrofon aktivieren",
+  "version": "Version: {{version}}",
+  "video_tile": {
+    "sfu_participant_local": "Du"
+  },
+  "waiting_for_participants": "Warte auf weitere Teilnehmer …"
+}

public/locales/el/app.json

@@ -0,0 +1,95 @@
+{
+  "a11y": {
+    "user_menu": "Μενού χρήστη"
+  },
+  "action": {
+    "close": "Κλείσιμο",
+    "copy": "Αντιγραφή",
+    "go": "Μετάβαση",
+    "no": "Όχι",
+    "register": "Εγγραφή",
+    "remove": "Αφαίρεση",
+    "sign_in": "Σύνδεση",
+    "sign_out": "Αποσύνδεση",
+    "submit": "Υποβολή"
+  },
+  "analytics_notice": "Συμμετέχοντας σε αυτή τη δοκιμαστική έκδοση, συναινείτε στη συλλογή ανώνυμων δεδομένων, τα οποία χρησιμοποιούμε για τη βελτίωση του προϊόντος. Μπορείτε να βρείτε περισσότερες πληροφορίες σχετικά με το ποια δεδομένα καταγράφουμε στην <2>Πολιτική απορρήτου</2> και στην <5>Πολιτική cookies</5>.",
+  "call_ended_view": {
+    "create_account_button": "Δημιουργία λογαριασμού",
+    "create_account_prompt": "<0>Γιατί να μην ολοκληρώσετε με τη δημιουργία ενός κωδικού πρόσβασης για τη διατήρηση του λογαριασμού σας;</0><1>Θα μπορείτε να διατηρήσετε το όνομά σας και να ορίσετε ένα avatar για χρήση σε μελλοντικές κλήσεις.</1>",
+    "feedback_done": "<0>Ευχαριστώ για τα σχόλιά σας!</0>",
+    "feedback_prompt": "<0>Θα θέλαμε να ακούσουμε τα σχόλιά σας ώστε να βελτιώσουμε την εμπειρία σας.</0>",
+    "headline": "{{displayName}}, η κλήση σας τερματίστηκε.",
+    "not_now_button": "Όχι τώρα, επιστροφή στην αρχική οθόνη",
+    "survey_prompt": "Πώς σας φάνηκε;"
+  },
+  "common": {
+    "audio": "Ήχος",
+    "camera": "Κάμερα",
+    "copied": "Αντιγράφηκε!",
+    "display_name": "Εμφανιζόμενο όνομα",
+    "home": "Αρχική",
+    "loading": "Φόρτωση…",
+    "microphone": "Μικρόφωνο",
+    "password": "Κωδικός",
+    "profile": "Προφίλ",
+    "settings": "Ρυθμίσεις",
+    "username": "Όνομα χρήστη",
+    "video": "Βίντεο"
+  },
+  "full_screen_view_description": "<0>Η υποβολή αρχείων καταγραφής σφαλμάτων θα μας βοηθήσει να εντοπίσουμε το πρόβλημα.</0>",
+  "full_screen_view_h1": "<0>Ωχ, κάτι πήγε στραβά.</0>",
+  "header_label": "Element Κεντρική Οθόνη Κλήσεων",
+  "join_existing_call_modal": {
+    "join_button": "Ναι, συμμετοχή στην κλήση",
+    "text": "Αυτή η κλήση υπάρχει ήδη, θα θέλατε να συμμετάσχετε;",
+    "title": "Συμμετοχή στην υπάρχουσα κλήση;"
+  },
+  "lobby": {
+    "join_button": "Συμμετοχή στην κλήση"
+  },
+  "logging_in": "Σύνδεση…",
+  "login_auth_links": "<0>Δημιουργήστε λογαριασμό</0> Ή <2>Συμμετέχετε ως επισκέπτης</2>",
+  "login_title": "Σύνδεση",
+  "rageshake_request_modal": {
+    "body": "Ένας άλλος χρήστης σε αυτή την κλήση έχει ένα πρόβλημα. Για την καλύτερη διάγνωση αυτών των προβλημάτων θα θέλαμε να συλλέξουμε ένα αρχείο καταγραφής σφαλμάτων.",
+    "title": "Αίτημα αρχείου καταγραφής"
+  },
+  "rageshake_send_logs": "Αποστολή αρχείων καταγραφής",
+  "rageshake_sending": "Αποστολή…",
+  "rageshake_sending_logs": "Αποστολή αρχείων καταγραφής…",
+  "recaptcha_dismissed": "Το recaptcha απορρίφθηκε",
+  "recaptcha_not_loaded": "Το Recaptcha δεν φορτώθηκε",
+  "register": {
+    "passwords_must_match": "Οι κωδικοί πρέπει να ταιριάζουν",
+    "registering": "Εγγραφή…"
+  },
+  "register_auth_links": "<0>Έχετε ήδη λογαριασμό;</0><1><0>Συνδεθείτε</0> Ή <2>Συμμετέχετε ως επισκέπτης</2></1>",
+  "register_confirm_password_label": "Επιβεβαίωση κωδικού",
+  "return_home_button": "Επιστροφή στην αρχική οθόνη",
+  "room_auth_view_join_button": "Συμμετοχή στην κλήση τώρα",
+  "screenshare_button_label": "Κοινή χρήση οθόνης",
+  "select_input_unset_button": "Επιλέξτε μια επιλογή",
+  "settings": {
+    "developer_settings_label": "Ρυθμίσεις προγραμματιστή",
+    "developer_settings_label_description": "Εμφάνιση ρυθμίσεων προγραμματιστή στο παράθυρο ρυθμίσεων.",
+    "developer_tab_title": "Προγραμματιστής",
+    "feedback_tab_body": "Εάν αντιμετωπίζετε προβλήματα ή απλά θέλετε να μας δώσετε κάποια σχόλια, παρακαλούμε στείλτε μας μια σύντομη περιγραφή παρακάτω.",
+    "feedback_tab_description_label": "Τα σχόλιά σας",
+    "feedback_tab_h4": "Υποβάλετε σχόλια",
+    "feedback_tab_send_logs_label": "Να συμπεριληφθούν αρχεία καταγραφής",
+    "feedback_tab_thank_you": "Ευχαριστούμε, λάβαμε τα σχόλιά σας!",
+    "feedback_tab_title": "Ανατροφοδότηση",
+    "more_tab_title": "Περισσότερα",
+    "opt_in_description": "<0></0><1></1>Μπορείτε να ανακαλέσετε τη συγκατάθεσή σας αποεπιλέγοντας αυτό το πλαίσιο. Εάν βρίσκεστε σε κλήση, η ρύθμιση αυτή θα τεθεί σε ισχύ στο τέλος της.",
+    "show_connection_stats_label": "Εμφάνιση στατιστικών σύνδεσης",
+    "speaker_device_selection_label": "Ηχείο"
+  },
+  "star_rating_input_label_one": "{{count}} αστέρι",
+  "star_rating_input_label_other": "{{count}} αστέρια",
+  "submitting": "Υποβολή…",
+  "unauthenticated_view_body": "Δεν έχετε εγγραφεί ακόμα; <2>Δημιουργήστε λογαριασμό</2>",
+  "unauthenticated_view_login_button": "Συνδεθείτε στον λογαριασμό σας",
+  "version": "Έκδοση: {{version}}",
+  "waiting_for_participants": "Αναμονή για άλλους συμμετέχοντες…"
+}

public/locales/en-GB/app.json

@@ -0,0 +1,165 @@
+{
+  "a11y": {
+    "user_menu": "User menu"
+  },
+  "action": {
+    "close": "Close",
+    "copy": "Copy",
+    "copy_link": "Copy link",
+    "go": "Go",
+    "invite": "Invite",
+    "no": "No",
+    "register": "Register",
+    "remove": "Remove",
+    "sign_in": "Sign in",
+    "sign_out": "Sign out",
+    "submit": "Submit"
+  },
+  "analytics_notice": "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.",
+  "app_selection_modal": {
+    "continue_in_browser": "Continue in browser",
+    "open_in_app": "Open in the app",
+    "text": "Ready to join?",
+    "title": "Select app"
+  },
+  "application_opened_another_tab": "This application has been opened in another tab.",
+  "browser_media_e2ee_unsupported": "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117",
+  "browser_media_e2ee_unsupported_heading": "Incompatible Browser",
+  "call_ended_view": {
+    "body": "You were disconnected from the call",
+    "create_account_button": "Create account",
+    "create_account_prompt": "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>",
+    "feedback_done": "<0>Thanks for your feedback!</0>",
+    "feedback_prompt": "<0>We'd love to hear your feedback so we can improve your experience.</0>",
+    "headline": "{{displayName}}, your call has ended.",
+    "not_now_button": "Not now, return to home screen",
+    "reconnect_button": "Reconnect",
+    "survey_prompt": "How did it go?"
+  },
+  "call_name": "Name of call",
+  "common": {
+    "analytics": "Analytics",
+    "audio": "Audio",
+    "avatar": "Avatar",
+    "camera": "Camera",
+    "copied": "Copied!",
+    "display_name": "Display name",
+    "encrypted": "Encrypted",
+    "error": "Error",
+    "home": "Home",
+    "loading": "Loading…",
+    "microphone": "Microphone",
+    "options": "Options",
+    "password": "Password",
+    "profile": "Profile",
+    "settings": "Settings",
+    "unencrypted": "Not encrypted",
+    "username": "Username",
+    "video": "Video"
+  },
+  "disconnected_banner": "Connectivity to the server has been lost.",
+  "full_screen_view_description": "<0>Submitting debug logs will help us track down the problem.</0>",
+  "full_screen_view_h1": "<0>Oops, something's gone wrong.</0>",
+  "group_call_loader": {
+    "banned_body": "You have been banned from the room.",
+    "banned_heading": "Banned",
+    "call_ended_body": "You have been removed from the call.",
+    "call_ended_heading": "Call ended",
+    "failed_heading": "Failed to join",
+    "failed_text": "Call not found or is not accessible.",
+    "knock_reject_body": "The room members declined your request to join.",
+    "knock_reject_heading": "Not allowed to join",
+    "reason": "Reason"
+  },
+  "hangup_button_label": "End call",
+  "header_label": "Element Call Home",
+  "header_participants_label": "Participants",
+  "invite_modal": {
+    "link_copied_toast": "Link copied to clipboard",
+    "title": "Invite to this call"
+  },
+  "join_existing_call_modal": {
+    "join_button": "Yes, join call",
+    "text": "This call already exists, would you like to join?",
+    "title": "Join existing call?"
+  },
+  "layout_grid_label": "Grid",
+  "layout_spotlight_label": "Spotlight",
+  "lobby": {
+    "ask_to_join": "Ask to join call",
+    "join_button": "Join call",
+    "leave_button": "Back to recents",
+    "waiting_for_invite": "Request sent"
+  },
+  "log_in": "Log In",
+  "logging_in": "Logging in…",
+  "login_auth_links": "<0>Create an account</0> Or <2>Access as a guest</2>",
+  "login_auth_links_prompt": "Not registered yet?",
+  "login_subheading": "To continue to Element",
+  "login_title": "Login",
+  "microphone_off": "Microphone off",
+  "microphone_on": "Microphone on",
+  "mute_microphone_button_label": "Mute microphone",
+  "participant_count_one": "{{count, number}}",
+  "participant_count_other": "{{count, number}}",
+  "rageshake_button_error_caption": "Retry sending logs",
+  "rageshake_request_modal": {
+    "body": "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.",
+    "title": "Debug log request"
+  },
+  "rageshake_send_logs": "Send debug logs",
+  "rageshake_sending": "Sending…",
+  "rageshake_sending_logs": "Sending debug logs…",
+  "rageshake_sent": "Thanks!",
+  "recaptcha_caption": "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>",
+  "recaptcha_dismissed": "Recaptcha dismissed",
+  "recaptcha_not_loaded": "Recaptcha not loaded",
+  "register": {
+    "passwords_must_match": "Passwords must match",
+    "registering": "Registering…"
+  },
+  "register_auth_links": "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>",
+  "register_confirm_password_label": "Confirm password",
+  "register_heading": "Create your account",
+  "return_home_button": "Return to home screen",
+  "room_auth_view_eula_caption": "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
+  "room_auth_view_join_button": "Join call now",
+  "screenshare_button_label": "Share screen",
+  "select_input_unset_button": "Select an option",
+  "settings": {
+    "developer_settings_label": "Developer Settings",
+    "developer_settings_label_description": "Expose developer settings in the settings window.",
+    "developer_tab_title": "Developer",
+    "feedback_tab_body": "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.",
+    "feedback_tab_description_label": "Your feedback",
+    "feedback_tab_h4": "Submit feedback",
+    "feedback_tab_send_logs_label": "Include debug logs",
+    "feedback_tab_thank_you": "Thanks, we received your feedback!",
+    "feedback_tab_title": "Feedback",
+    "more_tab_title": "More",
+    "opt_in_description": "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.",
+    "show_connection_stats_label": "Show connection stats",
+    "speaker_device_selection_label": "Speaker"
+  },
+  "star_rating_input_label_one": "{{count}} stars",
+  "star_rating_input_label_other": "{{count}} stars",
+  "start_new_call": "Start new call",
+  "start_video_button_label": "Start video",
+  "stop_screenshare_button_label": "Sharing screen",
+  "stop_video_button_label": "Stop video",
+  "submitting": "Submitting…",
+  "unauthenticated_view_body": "Not registered yet? <2>Create an account</2>",
+  "unauthenticated_view_eula_caption": "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
+  "unauthenticated_view_login_button": "Login to your account",
+  "unmute_microphone_button_label": "Unmute microphone",
+  "version": "Version: {{version}}",
+  "video_tile": {
+    "change_fit_contain": "Fit to frame",
+    "exit_full_screen": "Exit full screen",
+    "full_screen": "Full screen",
+    "mute_for_me": "Mute for me",
+    "sfu_participant_local": "You",
+    "volume": "Volume"
+  },
+  "waiting_for_participants": "Waiting for other participants…"
+}

public/locales/es/app.json

@@ -0,0 +1,96 @@
+{
+  "a11y": {
+    "user_menu": "Menú de usuario"
+  },
+  "action": {
+    "close": "Cerrar",
+    "copy": "Copiar",
+    "go": "Comenzar",
+    "register": "Registrarse",
+    "remove": "Eliminar",
+    "sign_in": "Iniciar sesión",
+    "sign_out": "Cerrar sesión",
+    "submit": "Enviar"
+  },
+  "analytics_notice": "Al participar en esta beta, consientes a la recogida de datos anónimos, los cuales usaremos para mejorar el producto. Puedes encontrar más información sobre que datos recogemos en nuestra <2>Política de privacidad</2> y en nuestra <5>Política sobre Cookies</5>.",
+  "call_ended_view": {
+    "create_account_button": "Crear cuenta",
+    "create_account_prompt": "<0>¿Por qué no mantienes tu cuenta estableciendo una contraseña?</0><1>Podrás mantener tu nombre y establecer un avatar para usarlo en futuras llamadas</1>",
+    "feedback_done": "<0>¡Gracias por tus comentarios!</0>",
+    "feedback_prompt": "<0>Nos encantaría conocer tu opinión para que podamos mejorar tu experiencia</0>",
+    "headline": "{{displayName}}, tu llamada ha finalizado.",
+    "not_now_button": "Ahora no, volver a la pantalla de inicio",
+    "survey_prompt": "¿Cómo ha ido?"
+  },
+  "common": {
+    "camera": "Cámara",
+    "copied": "¡Copiado!",
+    "display_name": "Nombre a mostrar",
+    "home": "Inicio",
+    "loading": "Cargando…",
+    "microphone": "Micrófono",
+    "password": "Contraseña",
+    "profile": "Perfil",
+    "settings": "Ajustes",
+    "username": "Nombre de usuario"
+  },
+  "full_screen_view_description": "<0>Subir los registros de depuración nos ayudará a encontrar el problema.</0>",
+  "full_screen_view_h1": "<0>Ups, algo ha salido mal.</0>",
+  "header_label": "Inicio de Element Call",
+  "join_existing_call_modal": {
+    "join_button": "Si, unirse a la llamada",
+    "text": "Esta llamada ya existe, ¿te gustaría unirte?",
+    "title": "¿Unirse a llamada existente?"
+  },
+  "layout_spotlight_label": "Foco",
+  "lobby": {
+    "join_button": "Unirse a la llamada"
+  },
+  "logging_in": "Iniciando sesión…",
+  "login_auth_links": "<0>Crear una cuenta</0> o <2>Acceder como invitado</2>",
+  "login_title": "Iniciar sesión",
+  "rageshake_request_modal": {
+    "body": "Otro usuario en esta llamada está teniendo problemas. Para diagnosticar estos problemas nos gustaría recopilar un registro de depuración.",
+    "title": "Petición de registros de depuración"
+  },
+  "rageshake_send_logs": "Enviar registros de depuración",
+  "rageshake_sending": "Enviando…",
+  "rageshake_sending_logs": "Enviando registros de depuración…",
+  "recaptcha_caption": "Este sitio está protegido por ReCAPTCHA y se aplican la <2>Política de Privacidad</2> y los <6>Términos de Servicio de Google.<9></9>Al hacer clic en \"Registrar\", aceptas nuestro <12>Contrato de Licencia de Usuario Final (CLUF)</12>",
+  "recaptcha_dismissed": "Recaptcha cancelado",
+  "recaptcha_not_loaded": "No se ha cargado el Recaptcha",
+  "register": {
+    "passwords_must_match": "Las contraseñas deben coincidir",
+    "registering": "Registrando…"
+  },
+  "register_auth_links": "<0>¿Ya tienes una cuenta?</0><1><0>Iniciar sesión</0> o <2>Acceder como invitado</2></1>",
+  "register_confirm_password_label": "Confirmar contraseña",
+  "return_home_button": "Volver a la pantalla de inicio",
+  "room_auth_view_eula_caption": "Al hacer clic en \"Unirse a la llamada ahora\", aceptas nuestro <2>Contrato de Licencia de Usuario Final (CLUF)</2>",
+  "room_auth_view_join_button": "Unirse a la llamada ahora",
+  "screenshare_button_label": "Compartir pantalla",
+  "select_input_unset_button": "Selecciona una opción",
+  "settings": {
+    "developer_settings_label": "Ajustes de desarrollador",
+    "developer_settings_label_description": "Muestra los ajustes de desarrollador en la ventana de ajustes.",
+    "developer_tab_title": "Desarrollador",
+    "feedback_tab_body": "Si tienes algún problema o simplemente quieres darnos tu opinión, por favor envíanos una breve descripción.",
+    "feedback_tab_description_label": "Tus comentarios",
+    "feedback_tab_h4": "Enviar comentarios",
+    "feedback_tab_send_logs_label": "Incluir registros de depuración",
+    "feedback_tab_thank_you": "¡Gracias, hemos recibido tus comentarios!",
+    "feedback_tab_title": "Danos tu opinión",
+    "more_tab_title": "Más",
+    "opt_in_description": "<0></0><1></1>Puedes retirar tu consentimiento desmarcando esta casilla. Si estás en una llamada, este ajuste se aplicará al final de esta.",
+    "show_connection_stats_label": "Mostrar estadísticas de conexión",
+    "speaker_device_selection_label": "Altavoz"
+  },
+  "star_rating_input_label_one": "{{count}} estrella",
+  "star_rating_input_label_other": "{{count}} estrellas",
+  "submitting": "Enviando…",
+  "unauthenticated_view_body": "¿No estás registrado todavía? <2>Crear una cuenta</2>",
+  "unauthenticated_view_eula_caption": "Al hacer clic en \"Comenzar\", aceptas nuestro <2>Contrato de Licencia de Usuario Final (CLUF)</2>",
+  "unauthenticated_view_login_button": "Iniciar sesión en tu cuenta",
+  "version": "Versión: {{version}}",
+  "waiting_for_participants": "Esperando a los otros participantes…"
+}

public/locales/et/app.json

@@ -0,0 +1,136 @@
+{
+  "a11y": {
+    "user_menu": "Kasutajamenüü"
+  },
+  "action": {
+    "close": "Sulge",
+    "copy": "Kopeeri",
+    "copy_link": "Kopeeri link",
+    "go": "Jätka",
+    "invite": "Kutsu",
+    "no": "Ei",
+    "register": "Registreeru",
+    "remove": "Eemalda",
+    "sign_in": "Logi sisse",
+    "sign_out": "Logi välja",
+    "submit": "Saada"
+  },
+  "analytics_notice": "Nõustudes selle beetaversiooni kasutamisega sa nõustud ka toote arendamiseks kasutatavate anonüümsete andmete kogumisega. Täpsemat teavet kogutavate andmete kohta leiad meie <2>Privaatsuspoliitikast</2> ja meie <5>Küpsiste kasutamise reeglitest</5>.",
+  "app_selection_modal": {
+    "continue_in_browser": "Jätka veebibrauseris",
+    "open_in_app": "Ava rakenduses",
+    "text": "Oled valmis liituma?",
+    "title": "Vali rakendus"
+  },
+  "browser_media_e2ee_unsupported": "Sinu veebibrauser ei toeta meedia läbivat krüptimist. Toetatud brauserid on Chrome, Chromium, Safari ja Firefox >=117",
+  "call_ended_view": {
+    "body": "Sinu ühendus kõnega katkes",
+    "create_account_button": "Loo konto",
+    "create_account_prompt": "<0>Kas soovid salasõna seadistada ja sellega oma kasutajakonto alles jätta?</0><1>Nii saad säilitada oma nime ja määrata profiilipildi, mida saad kasutada tulevastes kõnedes</1>",
+    "feedback_done": "<0>Täname Sind tagasiside eest!</0>",
+    "feedback_prompt": "<0>Meie rakenduse paremaks muutmiseks me hea meelega ootame Sinu arvamusi.</0>",
+    "headline": "{{displayName}}, sinu kõne on lõppenud.",
+    "not_now_button": "Mitte praegu, mine tagasi avalehele",
+    "reconnect_button": "Ühenda uuesti",
+    "survey_prompt": "Kuidas sujus?"
+  },
+  "call_name": "Kõne nimi",
+  "common": {
+    "audio": "Heli",
+    "avatar": "Tunnuspilt",
+    "camera": "Kaamera",
+    "copied": "Kopeeritud!",
+    "display_name": "Kuvatav nimi",
+    "encrypted": "Krüptitud",
+    "home": "Avavaatesse",
+    "loading": "Laadimine …",
+    "microphone": "Mikrofon",
+    "password": "Salasõna",
+    "profile": "Profiil",
+    "settings": "Seadistused",
+    "unencrypted": "Krüptimata",
+    "username": "Kasutajanimi"
+  },
+  "disconnected_banner": "Võrguühendus serveriga on katkenud.",
+  "full_screen_view_description": "<0>Kui saadad meile vealogid, siis on lihtsam vea põhjust otsida.</0>",
+  "full_screen_view_h1": "<0>Ohoo, midagi on nüüd katki.</0>",
+  "group_call_loader_failed_heading": "Kõnet ei leidu",
+  "group_call_loader_failed_text": "Kõned on nüüd läbivalt krüptitud ning need pead looma kodulehelt. Sellega tagad, et kõik kasutavad samu krüptovõtmeid.",
+  "hangup_button_label": "Lõpeta kõne",
+  "header_participants_label": "Osalejad",
+  "invite_modal": {
+    "link_copied_toast": "Link on kopeeritud lõikelauale",
+    "title": "Kutsu liituma selle kõnaga"
+  },
+  "join_existing_call_modal": {
+    "join_button": "Jah, liitu kõnega",
+    "text": "See kõne on juba olemas, kas soovid liituda?",
+    "title": "Liitu juba käimasoleva kõnega?"
+  },
+  "layout_grid_label": "Ruudustik",
+  "layout_spotlight_label": "Rambivalgus",
+  "lobby": {
+    "join_button": "Kõnega liitumine",
+    "leave_button": "Tagasi hiljutiste kõnede juurde"
+  },
+  "logging_in": "Sisselogimine …",
+  "login_auth_links": "<0>Loo konto</0> Või <2>Sisene külalisena</2>",
+  "login_title": "Sisselogimine",
+  "microphone_off": "Mikrofon ei tööta",
+  "microphone_on": "Mikrofon töötab",
+  "mute_microphone_button_label": "Summuta mikrofon",
+  "rageshake_button_error_caption": "Proovi uuesti logisid saata",
+  "rageshake_request_modal": {
+    "body": "Ühel teisel selles kõnes osalejal on lahenduse kasutamisel tekkinud probleem ning selle põhjuse leidmiseks me sooviksime koguda silumislogisid.",
+    "title": "Veaotsingulogi päring"
+  },
+  "rageshake_send_logs": "Saada veaotsingulogid",
+  "rageshake_sending": "Saatmine…",
+  "rageshake_sending_logs": "Veaotsingulogide saatmine…",
+  "rageshake_sent": "Tänud!",
+  "recaptcha_caption": "Selles saidis on kasutusel ReCAPTCHA ja kehtivad Google'i <2>Privaatsuspoliitika</2> ning <6>Teenusetingimused</6>.<9></9>Klõpsides „Registreeru“, sa nõustud meie <12>Lõppkasutaja litsentsilepingu (EULA) tingimustega</12>",
+  "recaptcha_dismissed": "Robotilõks on vahele jäetud",
+  "recaptcha_not_loaded": "Robotilõks pole laetud",
+  "register": {
+    "passwords_must_match": "Salasõnad ei klapi",
+    "registering": "Registreerimine…"
+  },
+  "register_auth_links": "<0>On sul juba konto?</0><1><0>Logi sisse</0> Või <2>Logi sisse külalisena</2></1>",
+  "register_confirm_password_label": "Kinnita salasõna",
+  "return_home_button": "Tagasi avalehele",
+  "room_auth_view_eula_caption": "Klõpsides „Liitu kõnega kohe“, nõustud sa meie <2>Lõppkasutaja litsentsilepinguga (EULA)</2>",
+  "room_auth_view_join_button": "Liitu kõnega kohe",
+  "screenshare_button_label": "Jaga ekraani",
+  "select_input_unset_button": "Vali oma eelistus",
+  "settings": {
+    "developer_settings_label": "Arendaja seadistused",
+    "developer_settings_label_description": "Näita seadistuste aknas arendajale vajalikke seadeid.",
+    "developer_tab_title": "Arendaja",
+    "feedback_tab_body": "Kui selle rakenduse kasutamisel tekib sul probleeme või lihtsalt soovid oma arvamust avaldada, siis palun täida alljärgnev lühike kirjeldus.",
+    "feedback_tab_description_label": "Sinu tagasiside",
+    "feedback_tab_h4": "Jaga tagasisidet",
+    "feedback_tab_send_logs_label": "Lisa veatuvastuslogid",
+    "feedback_tab_thank_you": "Tänud, me oleme sinu tagasiside kätte saanud!",
+    "feedback_tab_title": "Tagasiside",
+    "more_tab_title": "Rohkem",
+    "opt_in_description": "<0></0><1></1>Sa võid selle valiku eelmaldamisega alati oma nõusoleku tagasi võtta. Kui sul parasjagu on kõne pooleli, siis seadistuste muudatus jõustub pärast kõne lõppu.",
+    "show_connection_stats_label": "Näita ühenduse statistikat",
+    "speaker_device_selection_label": "Kõlar"
+  },
+  "star_rating_input_label_one": "{{count}} tärni",
+  "star_rating_input_label_other": "{{count}} tärni",
+  "start_new_call": "Algata uus kõne",
+  "start_video_button_label": "Lülita videovoog sisse",
+  "stop_screenshare_button_label": "Ekraanivaade on jagamisel",
+  "stop_video_button_label": "Peata videovoog",
+  "submitting": "Saadan…",
+  "unauthenticated_view_body": "Sa pole veel registreerunud? <2>Loo kasutajakonto</2>",
+  "unauthenticated_view_eula_caption": "Klõpsides „Jätka“, nõustud sa meie <2>Lõppkasutaja litsentsilepinguga (EULA)</2>",
+  "unauthenticated_view_login_button": "Logi oma kontosse sisse",
+  "unmute_microphone_button_label": "Lülita mikrofon sisse",
+  "version": "Versioon: {{version}}",
+  "video_tile": {
+    "sfu_participant_local": "Sina"
+  },
+  "waiting_for_participants": "Ootame teiste osalejate lisandumist…"
+}

public/locales/fa/app.json

@@ -0,0 +1,78 @@
+{
+  "a11y": {
+    "user_menu": "فهرست کاربر"
+  },
+  "action": {
+    "close": "بستن",
+    "copy": "رونوشت",
+    "go": "رفتن",
+    "no": "خیر",
+    "register": "ثبت‌نام",
+    "remove": "حذف",
+    "sign_in": "ورود",
+    "sign_out": "خروج"
+  },
+  "call_ended_view": {
+    "create_account_button": "ساخت حساب کاربری",
+    "create_account_prompt": "<0>چرا یک رمز عبور برای حساب کاربری خود تنظیم نمی‌کنید؟</0><1>شما می‌توانید نام خود را حفظ کنید و یک آواتار برای تماس‌های آینده بسازید</1>",
+    "not_now_button": "الان نه، به صفحه اصلی برگردید"
+  },
+  "common": {
+    "audio": "صدا",
+    "avatar": "آواتار",
+    "camera": "دوربین",
+    "copied": "کپی شد!",
+    "display_name": "نام نمایشی",
+    "home": "خانه",
+    "loading": "بارگزاری…",
+    "microphone": "میکروفون",
+    "password": "رمز عبور",
+    "profile": "پروفایل",
+    "settings": "تنظیمات",
+    "username": "نام کاربری",
+    "video": "ویدیو"
+  },
+  "header_label": "خانهٔ تماس المنت",
+  "join_existing_call_modal": {
+    "join_button": "بله، به تماس بپیوندید",
+    "text": "این تماس از قبل وجود دارد، می‌خواهید بپیوندید؟",
+    "title": "پیوست به تماس؟"
+  },
+  "layout_spotlight_label": "نور افکن",
+  "lobby": {
+    "join_button": "پیوستن به تماس"
+  },
+  "logging_in": "ورود…",
+  "login_auth_links": "<0>ساخت حساب کاربری</0> Or <2>دسترسی به عنوان میهمان</2>",
+  "login_title": "ورود",
+  "rageshake_request_modal": {
+    "body": "کاربر دیگری در این تماس مشکلی دارد. برای تشخیص بهتر مشکل، بهتر است ما لاگ عیب‌یابی را جمع‌آوری کنیم.",
+    "title": "درخواست لاگ عیب‌یابی"
+  },
+  "rageshake_send_logs": "ارسال لاگ‌های عیب‌یابی",
+  "rageshake_sending": "در حال ارسال…",
+  "rageshake_sending_logs": "در حال ارسال باگ‌های عیب‌یابی…",
+  "recaptcha_dismissed": "ریکپچا رد شد",
+  "recaptcha_not_loaded": "کپچا بارگیری نشد",
+  "register": {
+    "passwords_must_match": "رمز عبور باید همخوانی داشته باشد",
+    "registering": "ثبت‌نام…"
+  },
+  "register_auth_links": "<0>از قبل حساب کاربری دارید؟</0><1><0>ورود</0> Or <2>به عنوان یک میهمان وارد شوید</2></1>",
+  "register_confirm_password_label": "تایید رمزعبور",
+  "return_home_button": "برگشت به صفحه اصلی",
+  "room_auth_view_join_button": "الان به تماس بپیوند",
+  "screenshare_button_label": "اشتراک گذاری صفحه نمایش",
+  "select_input_unset_button": "یک گزینه را انتخاب کنید",
+  "settings": {
+    "developer_tab_title": "توسعه دهنده",
+    "feedback_tab_h4": "بازخورد ارائه دهید",
+    "feedback_tab_send_logs_label": "شامل لاگ‌های عیب‌یابی",
+    "more_tab_title": "بیشتر",
+    "speaker_device_selection_label": "بلندگو"
+  },
+  "unauthenticated_view_body": "هنوز ثبت‌نام نکرده‌اید؟ <2>ساخت حساب کاربری</2>",
+  "unauthenticated_view_login_button": "به حساب کاربری خود وارد شوید",
+  "version": "نسخه: {{نسخه}}",
+  "waiting_for_participants": "در انتظار برای دیگر شرکت‌کنندگان…"
+}

public/locales/fr/app.json

@@ -0,0 +1,134 @@
+{
+  "a11y": {
+    "user_menu": "Menu utilisateur"
+  },
+  "action": {
+    "close": "Fermer",
+    "copy": "Copier",
+    "copy_link": "Copier le lien",
+    "go": "Commencer",
+    "invite": "Inviter",
+    "no": "Non",
+    "register": "S’enregistrer",
+    "remove": "Supprimer",
+    "sign_in": "Connexion",
+    "sign_out": "Déconnexion",
+    "submit": "Envoyer"
+  },
+  "analytics_notice": "En participant à cette beta, vous consentez à la collecte de données anonymes, qui seront utilisées pour améliorer le produit. Vous trouverez plus d’informations sur les données collectées dans notre <2>Politique de vie privée</2> et notre <5>Politique de cookies</5>.",
+  "app_selection_modal": {
+    "continue_in_browser": "Continuer dans le navigateur",
+    "open_in_app": "Ouvrir dans l’application",
+    "text": "Prêt à rejoindre ?",
+    "title": "Choisissez l’application"
+  },
+  "browser_media_e2ee_unsupported": "Votre navigateur web ne prend pas en charge le chiffrement de bout-en-bout des médias. Les navigateurs pris en charge sont Chrome, Safari, Firefox >= 117",
+  "call_ended_view": {
+    "body": "Vous avez été déconnecté de l’appel",
+    "create_account_button": "Créer un compte",
+    "create_account_prompt": "<0>Pourquoi ne pas créer un mot de passe pour conserver votre compte ?</0><1>Vous pourrez garder votre nom et définir un avatar pour vos futurs appels</1>",
+    "feedback_done": "<0>Merci pour votre commentaire !</0>",
+    "feedback_prompt": "<0>Nous aimerions avoir vos commentaires afin que nous puissions améliorer votre expérience.</0>",
+    "headline": "{{displayName}}, votre appel est terminé.",
+    "not_now_button": "Pas maintenant, retourner à l’accueil",
+    "reconnect_button": "Se reconnecter",
+    "survey_prompt": "Comment cela s’est-il passé ?"
+  },
+  "call_name": "Nom de l’appel",
+  "common": {
+    "camera": "Caméra",
+    "copied": "Copié !",
+    "display_name": "Nom d’affichage",
+    "encrypted": "Chiffré",
+    "home": "Accueil",
+    "loading": "Chargement…",
+    "password": "Mot de passe",
+    "profile": "Profil",
+    "settings": "Paramètres",
+    "unencrypted": "Non chiffré",
+    "username": "Nom d’utilisateur",
+    "video": "Vidéo"
+  },
+  "disconnected_banner": "La connexion avec le serveur a été perdue.",
+  "full_screen_view_description": "<0>Soumettre les journaux de débogage nous aidera à déterminer le problème.</0>",
+  "full_screen_view_h1": "<0>Oups, quelque chose s’est mal passé.</0>",
+  "group_call_loader_failed_heading": "Appel non trouvé",
+  "group_call_loader_failed_text": "Les appels sont maintenant chiffrés de bout-en-bout et doivent être créés depuis la page d’accueil. Cela permet d’être sûr que tout le monde utilise la même clé de chiffrement.",
+  "hangup_button_label": "Terminer l’appel",
+  "header_label": "Accueil Element Call",
+  "invite_modal": {
+    "link_copied_toast": "Lien copié dans le presse-papier",
+    "title": "Inviter dans cet appel"
+  },
+  "join_existing_call_modal": {
+    "join_button": "Oui, rejoindre l’appel",
+    "text": "Cet appel existe déjà, voulez-vous le rejoindre ?",
+    "title": "Rejoindre un appel existant ?"
+  },
+  "layout_grid_label": "Grille",
+  "layout_spotlight_label": "Premier plan",
+  "lobby": {
+    "join_button": "Rejoindre l’appel",
+    "leave_button": "Revenir à l’historique des appels"
+  },
+  "logging_in": "Connexion…",
+  "login_auth_links": "<0>Créer un compte</0> Or <2>Accès invité</2>",
+  "login_title": "Connexion",
+  "microphone_off": "Microphone éteint",
+  "microphone_on": "Microphone allumé",
+  "mute_microphone_button_label": "Couper le microphone",
+  "rageshake_button_error_caption": "Réessayer d’envoyer les journaux",
+  "rageshake_request_modal": {
+    "body": "Un autre utilisateur dans cet appel a un problème. Pour nous permettre de résoudre le problème, nous aimerions récupérer un journal de débogage.",
+    "title": "Demande d’un journal de débogage"
+  },
+  "rageshake_send_logs": "Envoyer les journaux de débogage",
+  "rageshake_sending": "Envoi…",
+  "rageshake_sending_logs": "Envoi des journaux de débogage…",
+  "rageshake_sent": "Merci !",
+  "recaptcha_caption": "Ce site est protégé par ReCAPTCHA, la <2>politique de confidentialité</2> et les <6>conditions d’utilisation</6> de Google s’appliquent.<9></9>En cliquant sur « S’enregistrer » vous acceptez également notre <12>Contrat de Licence Utilisateur Final (CLUF)</12>",
+  "recaptcha_dismissed": "Recaptcha refusé",
+  "recaptcha_not_loaded": "Recaptcha non chargé",
+  "register": {
+    "passwords_must_match": "Les mots de passe doivent correspondre",
+    "registering": "Enregistrement…"
+  },
+  "register_auth_links": "<0>Vous avez déjà un compte ?</0><1><0>Se connecter</0> Ou <2>Accès invité</2></1>",
+  "register_confirm_password_label": "Confirmer le mot de passe",
+  "return_home_button": "Retour à l’accueil",
+  "room_auth_view_eula_caption": "En cliquant sur « Rejoindre l’appel maintenant », vous acceptez notre <2>Contrat de Licence Utilisateur Final (CLUF)</2>",
+  "room_auth_view_join_button": "Rejoindre l’appel maintenant",
+  "screenshare_button_label": "Partage d’écran",
+  "select_input_unset_button": "Sélectionnez une option",
+  "settings": {
+    "developer_settings_label": "Paramètres développeurs",
+    "developer_settings_label_description": "Affiche les paramètres développeurs dans la fenêtre des paramètres.",
+    "developer_tab_title": "Développeur",
+    "feedback_tab_body": "Si vous rencontrez des problèmes, ou vous voulez simplement faire un commentaire, faites-en une courte description ci-dessous.",
+    "feedback_tab_description_label": "Votre commentaire",
+    "feedback_tab_h4": "Envoyer un commentaire",
+    "feedback_tab_send_logs_label": "Inclure les journaux de débogage",
+    "feedback_tab_thank_you": "Merci, nous avons reçu vos commentaires !",
+    "feedback_tab_title": "Commentaires",
+    "more_tab_title": "Plus",
+    "opt_in_description": "<0></0><1></1>Vous pouvez retirer votre consentement en décochant cette case. Si vous êtes actuellement en communication, ce paramètre prendra effet à la fin de l’appel.",
+    "show_connection_stats_label": "Afficher les statistiques de la connexion",
+    "speaker_device_selection_label": "Intervenant"
+  },
+  "star_rating_input_label_one": "{{count}} favori",
+  "star_rating_input_label_other": "{{count}} favoris",
+  "start_new_call": "Démarrer un nouvel appel",
+  "start_video_button_label": "Démarrer la vidéo",
+  "stop_screenshare_button_label": "L’écran est partagé",
+  "stop_video_button_label": "Arrêter la vidéo",
+  "submitting": "Envoi…",
+  "unauthenticated_view_body": "Pas encore de compte ? <2>En créer un</2>",
+  "unauthenticated_view_eula_caption": "En cliquant sur « Commencer », vous acceptez notre <2>Contrat de Licence Utilisateur Final (CLUF)</2>",
+  "unauthenticated_view_login_button": "Connectez vous à votre compte",
+  "unmute_microphone_button_label": "Allumer le microphone",
+  "version": "Version : {{version}}",
+  "video_tile": {
+    "sfu_participant_local": "Vous"
+  },
+  "waiting_for_participants": "En attente d’autres participants…"
+}

public/locales/id/app.json

@@ -0,0 +1,135 @@
+{
+  "a11y": {
+    "user_menu": "Menu pengguna"
+  },
+  "action": {
+    "close": "Tutup",
+    "copy": "Salin",
+    "copy_link": "Salin tautan",
+    "go": "Bergabung",
+    "invite": "Undang",
+    "no": "Tidak",
+    "register": "Daftar",
+    "remove": "Hapus",
+    "sign_in": "Masuk",
+    "sign_out": "Keluar",
+    "submit": "Kirim"
+  },
+  "analytics_notice": "Dengan bergabung dalam beta ini, Anda mengizinkan kami untuk mengumpulkan data anonim, yang kami gunakan untuk meningkatkan produk ini. Anda dapat mempelajari lebih lanjut tentang data apa yang kami lacak dalam <2>Kebijakan Privasi</2> dan <5>Kebijakan Kuki</5> kami.",
+  "app_selection_modal": {
+    "continue_in_browser": "Lanjutkan dalam peramban",
+    "open_in_app": "Buka dalam aplikasi",
+    "text": "Siap untuk bergabung?",
+    "title": "Pilih plikasi"
+  },
+  "browser_media_e2ee_unsupported": "Peramban web Anda tidak mendukung enkripsi media ujung ke ujung. Peramban yang didukung adalah Chrome, Safari, dan Firefox >=117",
+  "call_ended_view": {
+    "body": "Anda terputus dari panggilan",
+    "create_account_button": "Buat akun",
+    "create_account_prompt": "<0>Kenapa tidak selesaikan dengan mengatur sebuah kata sandi untuk menjaga akun Anda?</0><1>Anda akan dapat tetap menggunakan nama Anda dan atur sebuah avatar untuk digunakan dalam panggilan di masa mendatang</1>",
+    "feedback_done": "<0>Terima kasih atas masukan Anda!</0>",
+    "feedback_prompt": "<0>Kami ingin mendengar masukan Anda supaya kami bisa meningkatkan pengalaman Anda.</0>",
+    "headline": "{{displayName}}, panggilan Anda telah berakhir.",
+    "not_now_button": "Tidak sekarang, kembali ke layar beranda",
+    "reconnect_button": "Hubungkan ulang",
+    "survey_prompt": "Bagaimana rasanya?"
+  },
+  "call_name": "Nama panggilan",
+  "common": {
+    "camera": "Kamera",
+    "copied": "Disalin!",
+    "display_name": "Nama tampilan",
+    "encrypted": "Terenkripsi",
+    "home": "Beranda",
+    "loading": "Memuat…",
+    "microphone": "Mikrofon",
+    "password": "Kata sandi",
+    "profile": "Profil",
+    "settings": "Pengaturan",
+    "unencrypted": "Tidak terenkripsi",
+    "username": "Nama pengguna"
+  },
+  "disconnected_banner": "Koneksi ke server telah hilang.",
+  "full_screen_view_description": "<0>Mengirim catatan pengawakutuan akan membantu kami melacak masalahnya.</0>",
+  "full_screen_view_h1": "<0>Aduh, ada yang salah.</0>",
+  "group_call_loader_failed_heading": "Panggilan tidak ditemukan",
+  "group_call_loader_failed_text": "Panggilan sekarang terenkripsi secara ujung ke ujung dan harus dibuat dari laman beranda. Ini memastikan bahwa semuanya menggunakan kunci enkripsi yang sama.",
+  "hangup_button_label": "Akhiri panggilan",
+  "header_label": "Beranda Element Call",
+  "header_participants_label": "Peserta",
+  "invite_modal": {
+    "link_copied_toast": "Tautan disalin ke papan klip",
+    "title": "Undang ke panggilan ini"
+  },
+  "join_existing_call_modal": {
+    "join_button": "Ya, bergabung ke panggilan",
+    "text": "Panggilan ini sudah ada, apakah Anda ingin bergabung?",
+    "title": "Bergabung ke panggilan yang sudah ada?"
+  },
+  "layout_grid_label": "Kisi",
+  "layout_spotlight_label": "Sorotan",
+  "lobby": {
+    "join_button": "Bergabung ke panggilan",
+    "leave_button": "Kembali ke terkini"
+  },
+  "logging_in": "Memasuki…",
+  "login_auth_links": "<0>Buat akun</0> Atau <2>Akses sebagai tamu</2>",
+  "login_title": "Masuk",
+  "microphone_off": "Mikrofon dimatikan",
+  "microphone_on": "Mikrofon dinyalakan",
+  "mute_microphone_button_label": "Matikan mikrofon",
+  "rageshake_button_error_caption": "Kirim ulang catatan",
+  "rageshake_request_modal": {
+    "body": "Pengguna yang lain di panggilan ini sedang mengalami masalah. Supaya dapat mendiagnosa masalah ini, kami ingin mengumpulkan sebuah catatan pengawakutuan.",
+    "title": "Permintaan catatan pengawakutuan"
+  },
+  "rageshake_send_logs": "Kirim catatan pengawakutuan",
+  "rageshake_sending": "Mengirimkan…",
+  "rageshake_sending_logs": "Mengirimkan catatan pengawakutuan…",
+  "rageshake_sent": "Terima kasih!",
+  "recaptcha_caption": "Situs ini dilindungi oleh reCAPTCHA dan <2>Kebijakan Privasi</2> dan <6>Ketentuan Layanan</6> Google berlaku.<9></9>Dengan mengeklik \"Daftar\", Anda menyetujui <12>Perjanjian Lisensi Pengguna Akhir (EULA)</12> kami",
+  "recaptcha_dismissed": "Recaptcha ditutup",
+  "recaptcha_not_loaded": "Recaptcha tidak dimuat",
+  "register": {
+    "passwords_must_match": "Kata sandi harus cocok",
+    "registering": "Mendaftarkan…"
+  },
+  "register_auth_links": "<0>Sudah punya akun?</0><1><0>Masuk</0> Atau <2>Akses sebagai tamu</2></1>",
+  "register_confirm_password_label": "Konfirmasi kata sandi",
+  "return_home_button": "Kembali ke layar beranda",
+  "room_auth_view_eula_caption": "Dengan mengeklik \"Bergabung ke panggilan sekarang\", Anda menyetujui <2>Perjanjian Lisensi Pengguna Akhir (EULA)</2> kami",
+  "room_auth_view_join_button": "Bergabung ke panggilan sekarang",
+  "screenshare_button_label": "Bagikan layar",
+  "select_input_unset_button": "Pilih sebuah opsi",
+  "settings": {
+    "developer_settings_label": "Pengaturan Pengembang",
+    "developer_settings_label_description": "Ekspos pengaturan pengembang dalam jendela pengaturan.",
+    "developer_tab_title": "Pengembang",
+    "feedback_tab_body": "Jika Anda mengalami masalah atau hanya ingin memberikan masukan, silakan kirimkan kami deskripsi pendek di bawah.",
+    "feedback_tab_description_label": "Masukan Anda",
+    "feedback_tab_h4": "Kirim masukan",
+    "feedback_tab_send_logs_label": "Termasuk catatan pengawakutuan",
+    "feedback_tab_thank_you": "Terima kasih, kami telah menerima masukan Anda!",
+    "feedback_tab_title": "Masukan",
+    "more_tab_title": "Lainnya",
+    "opt_in_description": "<0></0><1></1>Anda dapat mengurungkan kembali izin dengan mencentang kotak ini. Jika Anda saat ini dalam panggilan, pengaturan ini akan diterapkan di akhir panggilan.",
+    "show_connection_stats_label": "Tampilkan statistik koneksi",
+    "speaker_device_selection_label": "Pembicara"
+  },
+  "star_rating_input_label_one": "{{count}} bintang",
+  "star_rating_input_label_other": "{{count}} bintang",
+  "start_new_call": "Mulai panggilan baru",
+  "start_video_button_label": "Nyalakan video",
+  "stop_screenshare_button_label": "Berbagi layar",
+  "stop_video_button_label": "Matikan video",
+  "submitting": "Mengirim…",
+  "unauthenticated_view_body": "Belum terdaftar? <2>Buat sebuah akun</2>",
+  "unauthenticated_view_eula_caption": "Dengan mengeklik \"Bergabung\", Anda menyetujui <2>Perjanjian Lisensi Pengguna Akhir (EULA)</2>",
+  "unauthenticated_view_login_button": "Masuk ke akun Anda",
+  "unmute_microphone_button_label": "Nyalakan mikrofon",
+  "version": "Versi: {{version}}",
+  "video_tile": {
+    "sfu_participant_local": "Anda"
+  },
+  "waiting_for_participants": "Menunggu peserta lain…"
+}

public/locales/it/app.json

@@ -0,0 +1,132 @@
+{
+  "a11y": {
+    "user_menu": "Menu utente"
+  },
+  "action": {
+    "close": "Chiudi",
+    "copy": "Copia",
+    "copy_link": "Copia collegamento",
+    "go": "Vai",
+    "invite": "Invita",
+    "register": "Registra",
+    "remove": "Rimuovi",
+    "sign_in": "Accedi",
+    "sign_out": "Disconnetti",
+    "submit": "Invia"
+  },
+  "analytics_notice": "Partecipando a questa beta, acconsenti alla raccolta di dati anonimi che usiamo per migliorare il prodotto. Puoi trovare più informazioni su quali dati monitoriamo nella nostra <2>informativa sulla privacy</2> e nell'<5>informativa sui cookie</5>.",
+  "app_selection_modal": {
+    "continue_in_browser": "Continua nel browser",
+    "open_in_app": "Apri nell'app",
+    "text": "Tutto pronto per entrare?",
+    "title": "Seleziona app"
+  },
+  "browser_media_e2ee_unsupported": "Il tuo browser non supporta la crittografia end-to-end dei media. I browser supportati sono Chrome, Safari, Firefox >=117",
+  "call_ended_view": {
+    "body": "Sei stato disconnesso dalla chiamata",
+    "create_account_button": "Crea profilo",
+    "create_account_prompt": "<0>Ti va di terminare impostando una password per mantenere il profilo?</0><1>Potrai mantenere il tuo nome e impostare un avatar da usare in chiamate future</1>",
+    "feedback_done": "<0>Grazie per la tua opinione!</0>",
+    "feedback_prompt": "<0>Vorremmo sapere la tua opinione in modo da migliorare l'esperienza.</0>",
+    "headline": "{{displayName}}, la chiamata è terminata.",
+    "not_now_button": "Non ora, torna alla schermata principale",
+    "reconnect_button": "Riconnetti",
+    "survey_prompt": "Com'è andata?"
+  },
+  "call_name": "Nome della chiamata",
+  "common": {
+    "camera": "Fotocamera",
+    "copied": "Copiato!",
+    "display_name": "Il tuo nome",
+    "encrypted": "Cifrata",
+    "home": "Pagina iniziale",
+    "loading": "Caricamento…",
+    "microphone": "Microfono",
+    "profile": "Profilo",
+    "settings": "Impostazioni",
+    "unencrypted": "Non cifrata",
+    "username": "Nome utente"
+  },
+  "disconnected_banner": "La connessione al server è stata persa.",
+  "full_screen_view_description": "<0>L'invio di registri di debug ci aiuterà ad individuare il problema.</0>",
+  "full_screen_view_h1": "<0>Ops, qualcosa è andato storto.</0>",
+  "group_call_loader_failed_heading": "Chiamata non trovata",
+  "group_call_loader_failed_text": "Le chiamate ora sono cifrate end-to-end e devono essere create dalla pagina principale. Ciò assicura che chiunque usi la stessa chiave di crittografia.",
+  "hangup_button_label": "Termina chiamata",
+  "header_label": "Inizio di Element Call",
+  "header_participants_label": "Partecipanti",
+  "invite_modal": {
+    "link_copied_toast": "Collegamento copiato negli appunti",
+    "title": "Invita a questa chiamata"
+  },
+  "join_existing_call_modal": {
+    "join_button": "Sì, entra in chiamata",
+    "text": "Questa chiamata esiste già, vuoi entrare?",
+    "title": "Entrare in una chiamata esistente?"
+  },
+  "layout_grid_label": "Griglia",
+  "layout_spotlight_label": "In primo piano",
+  "lobby": {
+    "join_button": "Entra in chiamata",
+    "leave_button": "Torna ai recenti"
+  },
+  "logging_in": "Accesso…",
+  "login_auth_links": "<0>Crea un profilo</0> o <2>Accedi come ospite</2>",
+  "login_title": "Accedi",
+  "microphone_off": "Microfono spento",
+  "microphone_on": "Microfono acceso",
+  "mute_microphone_button_label": "Spegni il microfono",
+  "rageshake_button_error_caption": "Riprova l'invio dei registri",
+  "rageshake_request_modal": {
+    "body": "Un altro utente in questa chiamata sta avendo problemi. Per diagnosticare meglio questi problemi, vorremmo raccogliere un registro di debug.",
+    "title": "Richiesta registro di debug"
+  },
+  "rageshake_send_logs": "Invia registri di debug",
+  "rageshake_sending": "Invio…",
+  "rageshake_sending_logs": "Invio dei registri di debug…",
+  "rageshake_sent": "Grazie!",
+  "recaptcha_caption": "Questo sito è protetto da ReCAPTCHA e si applicano l'<2>informativa sulla privacy</2> e i <6>termini di servizio</6> di Google.<9></9>Cliccando \"Registra\", accetti il nostro <12>accordo di licenza con l'utente finale (EULA)</12>",
+  "recaptcha_dismissed": "Recaptcha annullato",
+  "recaptcha_not_loaded": "Recaptcha non caricato",
+  "register": {
+    "passwords_must_match": "Le password devono coincidere",
+    "registering": "Registrazione…"
+  },
+  "register_auth_links": "<0>Hai già un profilo?</0><1><0>Accedi</0> o <2>Accedi come ospite</2></1>",
+  "register_confirm_password_label": "Conferma password",
+  "return_home_button": "Torna alla schermata di iniziale",
+  "room_auth_view_eula_caption": "Cliccando \"Entra in chiamata ora\", accetti il nostro <2>accordo di licenza con l'utente finale (EULA)</2>",
+  "room_auth_view_join_button": "Entra in chiamata ora",
+  "screenshare_button_label": "Condividi schermo",
+  "select_input_unset_button": "Seleziona un'opzione",
+  "settings": {
+    "developer_settings_label": "Impostazioni per sviluppatori",
+    "developer_settings_label_description": "Mostra le impostazioni per sviluppatori nella finestra delle impostazioni.",
+    "developer_tab_title": "Sviluppatore",
+    "feedback_tab_body": "Se stai riscontrando problemi o semplicemente vuoi dare un'opinione, inviaci una breve descrizione qua sotto.",
+    "feedback_tab_description_label": "Il tuo commento",
+    "feedback_tab_h4": "Invia commento",
+    "feedback_tab_send_logs_label": "Includi registri di debug",
+    "feedback_tab_thank_you": "Grazie, abbiamo ricevuto il tuo commento!",
+    "more_tab_title": "Altro",
+    "opt_in_description": "<0></0><1></1>Puoi revocare il consenso deselezionando questa casella. Se attualmente sei in una chiamata, avrà effetto al termine di essa.",
+    "show_connection_stats_label": "Mostra statistiche connessione",
+    "speaker_device_selection_label": "Altoparlante"
+  },
+  "star_rating_input_label_one": "{{count}} stelle",
+  "star_rating_input_label_other": "{{count}} stelle",
+  "start_new_call": "Inizia una nuova chiamata",
+  "start_video_button_label": "Avvia video",
+  "stop_screenshare_button_label": "Condivisione schermo",
+  "stop_video_button_label": "Ferma video",
+  "submitting": "Invio…",
+  "unauthenticated_view_body": "Non hai ancora un profilo? <2>Creane uno</2>",
+  "unauthenticated_view_eula_caption": "Cliccando \"Vai\", accetti il nostro <2>accordo di licenza con l'utente finale (EULA)</2>",
+  "unauthenticated_view_login_button": "Accedi al tuo profilo",
+  "unmute_microphone_button_label": "Riaccendi il microfono",
+  "version": "Versione: {{version}}",
+  "video_tile": {
+    "sfu_participant_local": "Tu"
+  },
+  "waiting_for_participants": "In attesa di altri partecipanti…"
+}

public/locales/ja/app.json

@@ -0,0 +1,73 @@
+{
+  "a11y": {
+    "user_menu": "ユーザーメニュー"
+  },
+  "action": {
+    "close": "閉じる",
+    "copy": "コピー",
+    "go": "続行",
+    "no": "いいえ",
+    "register": "登録",
+    "remove": "削除",
+    "sign_in": "サインイン",
+    "sign_out": "サインアウト"
+  },
+  "call_ended_view": {
+    "create_account_button": "アカウントを作成"
+  },
+  "common": {
+    "audio": "音声",
+    "avatar": "アバター",
+    "camera": "カメラ",
+    "copied": "コピーしました！",
+    "display_name": "表示名",
+    "home": "ホーム",
+    "loading": "読み込んでいます…",
+    "microphone": "マイク",
+    "password": "パスワード",
+    "profile": "プロフィール",
+    "settings": "設定",
+    "username": "ユーザー名",
+    "video": "ビデオ"
+  },
+  "full_screen_view_h1": "<0>何かがうまく行きませんでした。</0>",
+  "header_label": "Element Call ホーム",
+  "join_existing_call_modal": {
+    "join_button": "はい、通話に参加",
+    "text": "この通話は既に存在します。参加しますか？",
+    "title": "既存の通話に参加しますか？"
+  },
+  "layout_spotlight_label": "スポットライト",
+  "lobby": {
+    "join_button": "通話に参加"
+  },
+  "logging_in": "ログインしています…",
+  "login_auth_links": "<0>アカウントを作成</0>または<2>ゲストとしてアクセス</2>",
+  "login_title": "ログイン",
+  "rageshake_request_modal": {
+    "title": "デバッグログを要求"
+  },
+  "rageshake_send_logs": "デバッグログを送信",
+  "rageshake_sending": "送信しています…",
+  "rageshake_sending_logs": "デバッグログを送信しています…",
+  "register": {
+    "passwords_must_match": "パスワードが一致する必要があります",
+    "registering": "登録しています…"
+  },
+  "register_auth_links": "<0>既にアカウントをお持ちですか？</0><1><0>ログイン</0>または<2>ゲストとしてアクセス</2></1>",
+  "register_confirm_password_label": "パスワードを確認",
+  "return_home_button": "ホーム画面に戻る",
+  "room_auth_view_join_button": "今すぐ通話に参加",
+  "screenshare_button_label": "画面共有",
+  "select_input_unset_button": "オプションを選択",
+  "settings": {
+    "developer_tab_title": "開発者",
+    "feedback_tab_h4": "フィードバックを送信",
+    "feedback_tab_send_logs_label": "デバッグログを含める",
+    "speaker_device_selection_label": "スピーカー"
+  },
+  "unauthenticated_view_body": "アカウントがありませんか？ <2>アカウントを作成</2>",
+  "unauthenticated_view_login_button": "アカウントにログイン",
+  "version": "バージョン：{{version}}",
+  "waiting_for_participants": "他の参加者を待機しています…"
+}

public/locales/lv/app.json

@@ -0,0 +1,104 @@
+{
+  "a11y": {
+    "user_menu": "Lietotāja izvēlne"
+  },
+  "action": {
+    "close": "Aizvērt",
+    "copy": "Ievietot starpliktuvē",
+    "go": "Aiziet",
+    "no": "Nē",
+    "register": "Reģistrēties",
+    "remove": "Noņemt",
+    "sign_in": "Pieteikties",
+    "sign_out": "Atteikties",
+    "submit": "Iesniegt"
+  },
+  "analytics_notice": "Piedalīšanās šajā beta apliecina piekrišanu anonīmu datu ievākšanai, ko mēs izmantojam, lai uzlabotu izstrādājumu. Vairāk informācijas par datiem, ko mēs ievācam, var atrast mūsu <2>privātuma nosacījumos</2> un <5>sīkdatņu nosacījumos</5>.",
+  "call_ended_view": {
+    "body": "Tu tiki atvienots no zvana",
+    "create_account_button": "Izveidot kontu",
+    "create_account_prompt": "<0>Kādēļ nepabeigt ar paroles iestatīšanu, lai paturētu savu kontu?</0><1>Būs iespējams paturēt savu vārdu un iestatīt attēlu izmantošanai turpmākajos zvanos</1>",
+    "feedback_done": "<0>Paldies par atsauksmi!</0>",
+    "feedback_prompt": "<0>Mums patiktu saņemt Tavu atsauksmi, lai mēs varētu uzlabot Tavu pieredzi.</0>",
+    "headline": "{{displayName}}, Tavs zvans ir beidzies.",
+    "not_now_button": "Ne tagad, atgriezties sākuma ekrānā",
+    "reconnect_button": "Atkārtoti savienoties",
+    "survey_prompt": "Kā Tev veicās?"
+  },
+  "common": {
+    "audio": "Skaņa",
+    "avatar": "Attēls",
+    "camera": "Kamera",
+    "copied": "Ievietots starpliktuvē.",
+    "display_name": "Attēlojamais vārds",
+    "home": "Sākums",
+    "loading": "Lādējas…",
+    "microphone": "Mikrofons",
+    "password": "Parole",
+    "profile": "Profils",
+    "settings": "Iestatījumi",
+    "username": "Lietotājvārds"
+  },
+  "disconnected_banner": "Ir zaudēts savienojums ar serveri.",
+  "full_screen_view_description": "<0>Atkļūdošanas žurnāla ierakstu iesūtīšana palīdzēs mums atklāt nepilnību.</0>",
+  "full_screen_view_h1": "<0>Ak vai, kaut kas nogāja greizi!</0>",
+  "header_label": "Element Call sākums",
+  "join_existing_call_modal": {
+    "join_button": "Jā, pievienoties zvanam",
+    "text": "Šis zvans jau pastāv. Vai vēlies pievienoties?",
+    "title": "Pievienoties esošam zvanam?"
+  },
+  "layout_spotlight_label": "Starmešu gaisma",
+  "lobby": {
+    "join_button": "Pievienoties zvanam"
+  },
+  "logging_in": "Piesakās…",
+  "login_auth_links": "<0>Izveidot kontu</0> vai <2>Piekļūt kā viesim</2>",
+  "login_title": "Pieteikties",
+  "rageshake_button_error_caption": "Atkārtoti mēģināt žurnāla ierakstu nosūtīšanu",
+  "rageshake_request_modal": {
+    "body": "Citam lietotājam šajā zvanā ir sarežģījumi. Lai labāk atklātu šīs nepilnības, mēs gribētu iegūt atkļūdošanas žurnālu.",
+    "title": "Atkļūdošanas žurnāla pieprasījums"
+  },
+  "rageshake_send_logs": "Nosūtīt atkļūdošanas žurnāla ierakstus",
+  "rageshake_sending": "Nosūta…",
+  "rageshake_sending_logs": "Nosūta atkļūdošanas žurnāla ierakstus…",
+  "rageshake_sent": "Paldies!",
+  "recaptcha_caption": "Šo vietni aizsargā ReCAPTCHA, un ir attiecināmi Google <2>privātuma nosacījumi</2> un <6>pakalpojuma noteikumi</6>.<9></9>Klikšķināšana uz \"Reģistrēties\" sniedz piekrišanu mūsu <12>galalietotāja licencēšanas nolīgumam (GLLN)</12>",
+  "recaptcha_dismissed": "ReCaptcha atmesta",
+  "recaptcha_not_loaded": "ReCaptcha nav ielādēta",
+  "register": {
+    "passwords_must_match": "Parolēm ir jāsakrīt",
+    "registering": "Reģistrē…"
+  },
+  "register_auth_links": "<0>Jau ir konts?</0><1><0>Pieteikties</0> vai <2>Piekļūt kā viesim</2></1>",
+  "register_confirm_password_label": "Apstiprināt paroli",
+  "return_home_button": "Atgriezties sākuma ekrānā",
+  "room_auth_view_eula_caption": "Klikšķināšana uz \"Pievienoties zvanam tagad\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
+  "room_auth_view_join_button": "Pievienoties zvanam tagad",
+  "screenshare_button_label": "Kopīgot ekrānu",
+  "select_input_unset_button": "Atlasīt iespēju",
+  "settings": {
+    "developer_settings_label": "Izstrādātāja iestatījumi",
+    "developer_settings_label_description": "Izstādīt izstrādātāja iestatījumus iestatījumu logā.",
+    "developer_tab_title": "Izstrādātājs",
+    "feedback_tab_body": "Ja tiek piedzīvoti sarežģījumi vai vienkārši ir vēlme sniegt kādu atsauksmi, lūgums zemāk nosūtīt mums īsu aprakstu.",
+    "feedback_tab_description_label": "Tava atsauksme",
+    "feedback_tab_h4": "Iesniegt atsauksmi",
+    "feedback_tab_send_logs_label": "Iekļaut atkļūdošanas žurnāla ierakstus",
+    "feedback_tab_thank_you": "Paldies, mēs saņēmām atsauksmi!",
+    "feedback_tab_title": "Atsauksmes",
+    "more_tab_title": "Vairāk",
+    "opt_in_description": "<0></0><1></1>Savu piekrišanu var atsaukt ar atzīmes noņemšanu no šīs rūtiņas. Ja pašreiz atrodies zvanā, šis iestatījums stāsies spēkā zvana beigās.",
+    "show_connection_stats_label": "Rādīt savienojuma apkopojumu",
+    "speaker_device_selection_label": "Runātājs"
+  },
+  "star_rating_input_label_one": "{{count}} zvaigzne",
+  "star_rating_input_label_other": "{{count}} zvaigznes",
+  "submitting": "Iesniedz…",
+  "unauthenticated_view_body": "Vēl neesi reģistrējies? <2>Izveidot kontu</2>",
+  "unauthenticated_view_eula_caption": "Klikšķināšana uz \"Aiziet\" apliecina piekrišanu mūsu <2>galalietotāja licencēšanas nolīgumam (GLLN)</2>",
+  "unauthenticated_view_login_button": "Pieteikties kontā",
+  "version": "Versija: {{version}}",
+  "waiting_for_participants": "Gaida citus dalībniekus…"
+}

public/locales/pl/app.json

@@ -0,0 +1,138 @@
+{
+  "a11y": {
+    "user_menu": "Menu użytkownika"
+  },
+  "action": {
+    "close": "Zamknij",
+    "copy": "Kopiuj",
+    "copy_link": "Kopiuj link",
+    "go": "Przejdź",
+    "invite": "Zaproś",
+    "no": "Nie",
+    "register": "Zarejestruj",
+    "remove": "Usuń",
+    "sign_in": "Zaloguj się",
+    "sign_out": "Wyloguj się",
+    "submit": "Wyślij"
+  },
+  "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>.",
+  "app_selection_modal": {
+    "continue_in_browser": "Kontynuuj w przeglądarce",
+    "open_in_app": "Otwórz w aplikacji",
+    "text": "Gotowy, by dołączyć?",
+    "title": "Wybierz aplikację"
+  },
+  "browser_media_e2ee_unsupported": "Twoja przeglądarka nie wspiera szyfrowania end-to-end. Wspierane przeglądarki to Chrome, Safari, Firefox >=117",
+  "call_ended_view": {
+    "body": "Rozłączono Cię z połączenia",
+    "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>",
+    "feedback_done": "<0>Dziękujemy za Twoją opinię!</0>",
+    "feedback_prompt": "<0>Z przyjemnością wysłuchamy Twojej opinii, aby poprawić Twoje doświadczenia.</0>",
+    "headline": "{{displayName}}, Twoje połączenie zostało zakończone.",
+    "not_now_button": "Nie teraz, powróć do ekranu domowego",
+    "reconnect_button": "Połącz ponownie",
+    "survey_prompt": "Jak poszło?"
+  },
+  "call_name": "Nazwa połączenia",
+  "common": {
+    "audio": "Dźwięk",
+    "avatar": "Awatar",
+    "camera": "Kamera",
+    "copied": "Skopiowano!",
+    "display_name": "Nazwa wyświetlana",
+    "encrypted": "Szyfrowane",
+    "home": "Strona domowa",
+    "loading": "Ładowanie…",
+    "microphone": "Mikrofon",
+    "password": "Hasło",
+    "profile": "Profil",
+    "settings": "Ustawienia",
+    "unencrypted": "Nie szyfrowane",
+    "username": "Nazwa użytkownika",
+    "video": "Wideo"
+  },
+  "disconnected_banner": "Utracono połączenie z serwerem.",
+  "full_screen_view_description": "<0>Wysłanie dzienników debuggowania pomoże nam ustalić przyczynę problemu.</0>",
+  "full_screen_view_h1": "<0>Ojej, coś poszło nie tak.</0>",
+  "group_call_loader_failed_heading": "Nie znaleziono połączenia",
+  "group_call_loader_failed_text": "Połączenia są teraz szyfrowane end-to-end i muszą zostać utworzone ze strony głównej. Pomaga to upewnić się, że każdy korzysta z tego samego klucza szyfrującego.",
+  "hangup_button_label": "Zakończ połączenie",
+  "header_label": "Strona główna Element Call",
+  "header_participants_label": "Uczestnicy",
+  "invite_modal": {
+    "link_copied_toast": "Skopiowano link do schowka",
+    "title": "Zaproś do połączenia"
+  },
+  "join_existing_call_modal": {
+    "join_button": "Tak, dołącz do połączenia",
+    "text": "Te połączenie już istnieje, czy chcesz do niego dołączyć?",
+    "title": "Dołączyć do istniejącego połączenia?"
+  },
+  "layout_grid_label": "Siatka",
+  "layout_spotlight_label": "Centrum uwagi",
+  "lobby": {
+    "join_button": "Dołącz do połączenia",
+    "leave_button": "Wróć do ostatnie"
+  },
+  "logging_in": "Logowanie…",
+  "login_auth_links": "<0>Utwórz konto</0> lub <2>Dołącz jako gość</2>",
+  "login_title": "Zaloguj się",
+  "microphone_off": "Mikrofon wyłączony",
+  "microphone_on": "Mikrofon włączony",
+  "mute_microphone_button_label": "Wycisz mikrofon",
+  "rageshake_button_error_caption": "Wyślij logi ponownie",
+  "rageshake_request_modal": {
+    "body": "Inny użytkownik w tym połączeniu napotkał problem. Aby lepiej zdiagnozować tę usterkę, chcielibyśmy zebrać dzienniki debugowania.",
+    "title": "Prośba o dzienniki debugowania"
+  },
+  "rageshake_send_logs": "Wyślij dzienniki debugowania",
+  "rageshake_sending": "Wysyłanie…",
+  "rageshake_sending_logs": "Wysyłanie dzienników debugowania…",
+  "rageshake_sent": "Dziękujemy!",
+  "recaptcha_caption": "Ta witryna jest chroniona przez ReCAPTCHA, więc obowiązują <2>Polityka prywatności</2> i <6>Warunki usług</6> Google. Klikając \"Zarejestruj\", zgadzasz się na naszą <12>Umowę licencyjną (EULA)</12>",
+  "recaptcha_dismissed": "Recaptcha odrzucona",
+  "recaptcha_not_loaded": "Recaptcha nie została załadowana",
+  "register": {
+    "passwords_must_match": "Hasła muszą pasować",
+    "registering": "Rejestrowanie…"
+  },
+  "register_auth_links": "<0>Masz już konto?</0><1><0>Zaloguj się</0> lub <2>Dołącz jako gość</2></1>",
+  "register_confirm_password_label": "Potwierdź hasło",
+  "return_home_button": "Powróć do strony głównej",
+  "room_auth_view_eula_caption": "Klikając \"Dołącz teraz do rozmowy\", zgadzasz się na naszą <2>Umowę licencyjną (EULA)</2>",
+  "room_auth_view_join_button": "Dołącz do połączenia teraz",
+  "screenshare_button_label": "Udostępnij ekran",
+  "select_input_unset_button": "Wybierz opcję",
+  "settings": {
+    "developer_settings_label": "Opcje programisty",
+    "developer_settings_label_description": "Wyświetl opcje programisty w oknie ustawień.",
+    "developer_tab_title": "Programista",
+    "feedback_tab_body": "Jeśli posiadasz problemy lub chciałbyś zgłosić swoją opinię, wyślij nam krótki opis.",
+    "feedback_tab_description_label": "Twoje opinie",
+    "feedback_tab_h4": "Prześlij opinię",
+    "feedback_tab_send_logs_label": "Dołącz dzienniki debugowania",
+    "feedback_tab_thank_you": "Dziękujemy, otrzymaliśmy Twoją opinię!",
+    "feedback_tab_title": "Opinia użytkownika",
+    "more_tab_title": "Więcej",
+    "opt_in_description": "<0></0><1></1>Możesz wycofać swoją zgodę poprzez odznaczenie tego pola. Jeśli już jesteś w trakcie rozmowy, opcja zostanie zastosowana po jej zakończeniu.",
+    "show_connection_stats_label": "Pokaż statystyki połączenia",
+    "speaker_device_selection_label": "Głośnik"
+  },
+  "star_rating_input_label_one": "{{count}} gwiazdki",
+  "star_rating_input_label_other": "{{count}} gwiazdki",
+  "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…",
+  "unauthenticated_view_body": "Nie masz konta? <2>Utwórz je</2>",
+  "unauthenticated_view_eula_caption": "Klikając \"Przejdź\", zgadzasz się na naszą <2>Umowę licencyjną (EULA)</2>",
+  "unauthenticated_view_login_button": "Zaloguj się do swojego konta",
+  "unmute_microphone_button_label": "Odcisz mikrofon",
+  "version": "Wersja: {{version}}",
+  "video_tile": {
+    "sfu_participant_local": "Ty"
+  },
+  "waiting_for_participants": "Oczekiwanie na pozostałych uczestników…"
+}

public/locales/ru/app.json

@@ -0,0 +1,97 @@
+{
+  "a11y": {
+    "user_menu": "Меню пользователя"
+  },
+  "action": {
+    "close": "Закрыть",
+    "copy": "Копировать",
+    "go": "Далее",
+    "no": "Нет",
+    "register": "Зарегистрироваться",
+    "remove": "Удалить",
+    "sign_in": "Войти",
+    "sign_out": "Выйти",
+    "submit": "Отправить"
+  },
+  "analytics_notice": "Участвуя в этой бета-версии, вы соглашаетесь на сбор анонимных данных, которые мы используем для улучшения продукта. Более подробную информацию о том, какие данные мы отслеживаем, вы можете найти в нашей <2> Политике конфиденциальности</2> и нашей <5> Политике использования файлов cookie</5>.",
+  "call_ended_view": {
+    "create_account_button": "Создать аккаунт",
+    "create_account_prompt": "<0>Почему бы не задать пароль, тем самым сохранив аккаунт?</0><1>Так вы можете оставить своё имя и задать аватар для будущих звонков.</1>",
+    "feedback_done": "<0>Спасибо за обратную связь!</0>",
+    "feedback_prompt": "<0>Мы будем рады видеть ваши отзывы, чтобы мы могли улучшить ваш опыт.</0>",
+    "headline": "{{displayName}}, ваш звонок окончен.",
+    "not_now_button": "Не сейчас, вернуться в Начало",
+    "survey_prompt": "Как всё прошло?"
+  },
+  "common": {
+    "audio": "Аудио",
+    "avatar": "Аватар",
+    "camera": "Камера",
+    "copied": "Скопировано!",
+    "display_name": "Видимое имя",
+    "home": "Начало",
+    "loading": "Загрузка…",
+    "microphone": "Микрофон",
+    "password": "Пароль",
+    "profile": "Профиль",
+    "settings": "Настройки",
+    "username": "Имя пользователя",
+    "video": "Видео"
+  },
+  "full_screen_view_description": "<0>Отправка журналов поможет нам найти и устранить проблему.</0>",
+  "full_screen_view_h1": "<0>Упс, что-то пошло не так.</0>",
+  "header_label": "Главная Element Call",
+  "join_existing_call_modal": {
+    "join_button": "Да, присоединиться",
+    "text": "Этот звонок уже существует, хотите присоединиться?",
+    "title": "Присоединиться к существующему звонку?"
+  },
+  "layout_spotlight_label": "Внимание",
+  "lobby": {
+    "join_button": "Присоединиться"
+  },
+  "logging_in": "Вход…",
+  "login_auth_links": "<0>Создать аккаунт</0> или <2>Зайти как гость</2>",
+  "login_title": "Вход",
+  "rageshake_request_modal": {
+    "body": "У одного из участников звонка есть неполадки. Чтобы лучше диагностировать похожие проблемы, нам нужен журнал отладки.",
+    "title": "Запрос журнала отладки"
+  },
+  "rageshake_send_logs": "Отправить журнал отладки",
+  "rageshake_sending": "Отправка…",
+  "rageshake_sending_logs": "Отправка журнала отладки…",
+  "recaptcha_dismissed": "Проверка не пройдена",
+  "recaptcha_not_loaded": "Невозможно начать проверку",
+  "register": {
+    "passwords_must_match": "Пароли должны совпадать",
+    "registering": "Регистрация…"
+  },
+  "register_auth_links": "<0>Уже есть аккаунт?</0><1><0>Войти с ним</0> или <2>Зайти как гость</2></1>",
+  "register_confirm_password_label": "Подтвердите пароль",
+  "return_home_button": "Вернуться в Начало",
+  "room_auth_view_join_button": "Присоединиться сейчас",
+  "screenshare_button_label": "Поделиться экраном",
+  "select_input_unset_button": "Выберите вариант",
+  "settings": {
+    "developer_settings_label": "Настройки Разработчика",
+    "developer_settings_label_description": "Раскрыть настройки разработчика в окне настроек.",
+    "developer_tab_title": "Разработчику",
+    "feedback_tab_body": "Если у вас возникли проблемы или вы просто хотите оставить отзыв, отправьте нам краткое описание ниже.",
+    "feedback_tab_description_label": "Ваш отзыв",
+    "feedback_tab_h4": "Отправить отзыв",
+    "feedback_tab_send_logs_label": "Приложить журнал отладки",
+    "feedback_tab_thank_you": "Спасибо. Мы получили ваш отзыв!",
+    "feedback_tab_title": "Отзыв",
+    "more_tab_title": "Больше",
+    "opt_in_description": "<0></0><1></1>Вы можете отозвать согласие, сняв этот флажок. Если вы в данный момент находитесь в разговоре, эта настройка вступит в силу по окончании разговора.",
+    "show_connection_stats_label": "Показать статистику соединения",
+    "speaker_device_selection_label": "Динамик"
+  },
+  "star_rating_input_label_one": "{{count}} отмечен",
+  "star_rating_input_label_other": "{{count}} отмеченных",
+  "submitting": "Отправляем…",
+  "unauthenticated_view_body": "Ещё не зарегистрированы? <2>Создайте аккаунт</2>",
+  "unauthenticated_view_login_button": "Войдите в свой аккаунт",
+  "version": "Версия: {{version}}",
+  "waiting_for_participants": "Ожидание других участников…"
+}

public/locales/sk/app.json

@@ -0,0 +1,136 @@
+{
+  "a11y": {
+    "user_menu": "Používateľské menu"
+  },
+  "action": {
+    "close": "Zatvoriť",
+    "copy": "Kopírovať",
+    "copy_link": "Kopírovať odkaz",
+    "go": "Prejsť",
+    "invite": "Pozvať",
+    "no": "Nie",
+    "register": "Registrovať sa",
+    "remove": "Odstrániť",
+    "sign_in": "Prihlásiť sa",
+    "sign_out": "Odhlásiť sa",
+    "submit": "Odoslať"
+  },
+  "analytics_notice": "Účasťou v tejto beta verzii súhlasíte so zhromažďovaním anonymných údajov, ktoré použijeme na zlepšenie produktu. Viac informácií o tom, ktoré údaje sledujeme, nájdete v našich <2>Zásadách ochrany osobných údajov</2> a <5>Zásadách používania súborov cookie</5>.",
+  "app_selection_modal": {
+    "continue_in_browser": "Pokračovať v prehliadači",
+    "open_in_app": "Otvoriť v aplikácii",
+    "text": "Ste pripravení sa pridať?",
+    "title": "Vybrať aplikáciu"
+  },
+  "browser_media_e2ee_unsupported": "Váš webový prehliadač nepodporuje end-to-end šifrovanie médií. Podporované prehliadače sú Chrome, Safari, Firefox >=117",
+  "call_ended_view": {
+    "body": "Boli ste odpojení z hovoru",
+    "create_account_button": "Vytvoriť účet",
+    "create_account_prompt": "<0>Prečo neskončiť nastavením hesla, aby ste si zachovali svoj účet? </0><1>Budete si môcť ponechať svoje meno a nastaviť obrázok, ktorý sa bude používať pri budúcich hovoroch</1>",
+    "feedback_done": "<0> Ďakujeme za vašu spätnú väzbu!</0>",
+    "feedback_prompt": "<0> Radi si vypočujeme vašu spätnú väzbu, aby sme mohli zlepšiť vaše skúsenosti.</0>",
+    "headline": "{{displayName}}, váš hovor skončil.",
+    "not_now_button": "Teraz nie, vrátiť sa na domovskú obrazovku",
+    "reconnect_button": "Znovu pripojiť",
+    "survey_prompt": "Ako to išlo?"
+  },
+  "call_name": "Názov hovoru",
+  "common": {
+    "avatar": "Obrázok",
+    "camera": "Kamera",
+    "copied": "Skopírované!",
+    "display_name": "Zobrazované meno",
+    "encrypted": "Šifrované",
+    "home": "Domov",
+    "loading": "Načítanie…",
+    "microphone": "Mikrofón",
+    "password": "Heslo",
+    "profile": "Profil",
+    "settings": "Nastavenia",
+    "unencrypted": "Nie je zašifrované",
+    "username": "Meno používateľa"
+  },
+  "disconnected_banner": "Spojenie so serverom sa stratilo.",
+  "full_screen_view_description": "<0>Odoslanie záznamov ladenia nám pomôže nájsť problém.</0>",
+  "full_screen_view_h1": "<0>Hups, niečo sa pokazilo.</0>",
+  "group_call_loader_failed_heading": "Hovor nebol nájdený",
+  "group_call_loader_failed_text": "Hovory sú teraz end-to-end šifrované a je potrebné ich vytvoriť z domovskej stránky. To pomáha zabezpečiť, aby všetci používali rovnaký šifrovací kľúč.",
+  "hangup_button_label": "Ukončiť hovor",
+  "header_label": "Domov Element Call",
+  "header_participants_label": "Účastníci",
+  "invite_modal": {
+    "link_copied_toast": "Odkaz skopírovaný do schránky",
+    "title": "Pozvať na tento hovor"
+  },
+  "join_existing_call_modal": {
+    "join_button": "Áno, pripojiť sa k hovoru",
+    "text": "Tento hovor už existuje, chceli by ste sa k nemu pripojiť?",
+    "title": "Pripojiť sa k existujúcemu hovoru?"
+  },
+  "layout_grid_label": "Sieť",
+  "layout_spotlight_label": "Stredobod",
+  "lobby": {
+    "join_button": "Pripojiť sa k hovoru",
+    "leave_button": "Späť k nedávnym"
+  },
+  "logging_in": "Prihlasovanie…",
+  "login_auth_links": "<0>Vytvoriť konto</0> Alebo <2>Prihlásiť sa ako hosť</2>",
+  "login_title": "Prihlásiť sa",
+  "microphone_off": "Mikrofón vypnutý",
+  "microphone_on": "Mikrofón zapnutý",
+  "mute_microphone_button_label": "Stlmiť mikrofón",
+  "rageshake_button_error_caption": "Opakovať odoslanie záznamov",
+  "rageshake_request_modal": {
+    "body": "Ďalší používateľ v tomto hovore má problém. Aby sme mohli lepšie diagnostikovať tieto problémy, chceli by sme získať záznam o ladení.",
+    "title": "Žiadosť o záznam ladenia"
+  },
+  "rageshake_send_logs": "Odoslať záznamy o ladení",
+  "rageshake_sending": "Odosielanie…",
+  "rageshake_sending_logs": "Odosielanie záznamov o ladení…",
+  "rageshake_sent": "Ďakujeme!",
+  "recaptcha_caption": "Táto stránka je chránená systémom ReCAPTCHA a platia na ňu <2>Pravidlá ochrany osobných údajov spoločnosti Google</2> a <6>Podmienky poskytovania služieb</6>.<9></9>Kliknutím na tlačidlo \"Registrovať sa\" súhlasíte s našou <12>Licenčnou zmluvou s koncovým používateľom (EULA)</12>",
+  "recaptcha_dismissed": "Recaptcha zamietnutá",
+  "recaptcha_not_loaded": "Recaptcha sa nenačítala",
+  "register": {
+    "passwords_must_match": "Heslá sa musia zhodovať",
+    "registering": "Registrácia…"
+  },
+  "register_auth_links": "<0>Už máte konto?</0><1><0>Prihláste sa</0> Alebo <2>Prihlásiť sa ako hosť</2></1>",
+  "register_confirm_password_label": "Potvrdiť heslo",
+  "return_home_button": "Návrat na domovskú obrazovku",
+  "room_auth_view_eula_caption": "Kliknutím na \"Pripojiť sa k hovoru teraz\" súhlasíte s našou <2>Licenčnou zmluvou s koncovým používateľom (EULA)</2>",
+  "room_auth_view_join_button": "Pripojiť sa k hovoru teraz",
+  "screenshare_button_label": "Zdieľať obrazovku",
+  "select_input_unset_button": "Vyberte možnosť",
+  "settings": {
+    "developer_settings_label": "Nastavenia pre vývojárov",
+    "developer_settings_label_description": "Zobraziť nastavenia pre vývojárov v okne nastavení.",
+    "developer_tab_title": "Vývojár",
+    "feedback_tab_body": "Ak máte problémy alebo jednoducho chcete poskytnúť spätnú väzbu, pošlite nám krátky popis nižšie.",
+    "feedback_tab_description_label": "Vaša spätná väzba",
+    "feedback_tab_h4": "Odoslať spätnú väzbu",
+    "feedback_tab_send_logs_label": "Zahrnúť záznamy o ladení",
+    "feedback_tab_thank_you": "Ďakujeme, dostali sme vašu spätnú väzbu!",
+    "feedback_tab_title": "Spätná väzba",
+    "more_tab_title": "Viac",
+    "opt_in_description": "<0></0><1></1>Súhlas môžete odvolať zrušením označenia tohto políčka. Ak práve prebieha hovor, toto nastavenie nadobudne platnosť po skončení hovoru.",
+    "show_connection_stats_label": "Zobraziť štatistiky pripojenia",
+    "speaker_device_selection_label": "Reproduktor"
+  },
+  "star_rating_input_label_one": "{{count}} hviezdička",
+  "star_rating_input_label_other": "{{count}} hviezdičiek",
+  "start_new_call": "Spustiť nový hovor",
+  "start_video_button_label": "Spustiť video",
+  "stop_screenshare_button_label": "Zdieľanie obrazovky",
+  "stop_video_button_label": "Zastaviť video",
+  "submitting": "Odosielanie…",
+  "unauthenticated_view_body": "Ešte nie ste zaregistrovaný? <2>Vytvorte si účet</2>",
+  "unauthenticated_view_eula_caption": "Kliknutím na tlačidlo \"Prejsť\" vyjadrujete súhlas s našou <2>Licenčnou zmluvou s koncovým používateľom (EULA)</2>",
+  "unauthenticated_view_login_button": "Prihláste sa do svojho konta",
+  "unmute_microphone_button_label": "Zrušiť stlmenie mikrofónu",
+  "version": "Verzia: {{version}}",
+  "video_tile": {
+    "sfu_participant_local": "Vy"
+  },
+  "waiting_for_participants": "Čaká sa na ďalších účastníkov…"
+}

public/locales/sv/app.json

@@ -0,0 +1,7 @@
+{
+  "call_ended_view": {
+    "headline": "{{displayName}}, ditt samtal har avslutats."
+  },
+  "star_rating_input_label_one": "{{count}} stjärna",
+  "star_rating_input_label_other": "{{count}} stjärnor"
+}

public/locales/tr/app.json

@@ -0,0 +1,63 @@
+{
+  "action": {
+    "close": "Kapat",
+    "go": "Git",
+    "no": "Hayır",
+    "register": "Kaydol",
+    "remove": "Çıkar",
+    "sign_in": "Gir",
+    "sign_out": "Çık"
+  },
+  "call_ended_view": {
+    "create_account_button": "Hesap aç",
+    "create_account_prompt": "<0>Hesabınızı tutmak için niye bir parola açmıyorsunuz?</0><1>Böylece ileriki aramalarda adınızı ve avatarınızı kullanabileceksiniz</1>",
+    "not_now_button": "Şimdi değil, ev ekranına dön"
+  },
+  "common": {
+    "audio": "Ses",
+    "camera": "Kamera",
+    "copied": "Kopyalandı",
+    "display_name": "Ekran adı",
+    "home": "Ev",
+    "loading": "Yükleniyor…",
+    "microphone": "Mikrofon",
+    "password": "Parola",
+    "settings": "Ayarlar"
+  },
+  "join_existing_call_modal": {
+    "text": "Bu arama zaten var, katılmak ister misiniz?",
+    "title": "Mevcut aramaya katıl?"
+  },
+  "lobby": {
+    "join_button": "Aramaya katıl"
+  },
+  "logging_in": "Giriliyor…",
+  "login_auth_links": "<0>Hesap oluştur</0> yahut <2>Konuk olarak gir</2>",
+  "login_title": "Gir",
+  "rageshake_request_modal": {
+    "body": "Bu aramadaki başka bir kullanıcı sorun yaşıyor. Sorunu daha iyi çözebilmemiz için hata ayıklama kütüğünü almak isteriz.",
+    "title": "Hata ayıklama kütük istemi"
+  },
+  "rageshake_send_logs": "Hata ayıklama kütüğünü gönder",
+  "rageshake_sending": "Gönderiliyor…",
+  "recaptcha_dismissed": "reCAPTCHA atlandı",
+  "recaptcha_not_loaded": "reCAPTCHA yüklenmedi",
+  "register": {
+    "passwords_must_match": "Parolalar aynı olmalı",
+    "registering": "Kaydediyor…"
+  },
+  "register_auth_links": "<0>Mevcut hesabınız mı var?</0><1><0>Gir</0> yahut <2>Konuk girişi</2></1>",
+  "register_confirm_password_label": "Parolayı tekrar edin",
+  "return_home_button": "Ev ekranına geri dön",
+  "room_auth_view_join_button": "Aramaya katıl",
+  "screenshare_button_label": "Ekran paylaş",
+  "select_input_unset_button": "Bir seçenek seç",
+  "settings": {
+    "developer_tab_title": "Geliştirici",
+    "feedback_tab_h4": "Geri bildirim ver",
+    "feedback_tab_send_logs_label": "Hata ayıklama kütüğünü dahil et",
+    "more_tab_title": "Daha"
+  },
+  "unauthenticated_view_body": "Kaydolmadınız mı? <2>Hesap açın</2>",
+  "unauthenticated_view_login_button": "Hesabınıza girin"
+}

public/locales/uk/app.json

@@ -0,0 +1,138 @@
+{
+  "a11y": {
+    "user_menu": "Меню користувача"
+  },
+  "action": {
+    "close": "Закрити",
+    "copy": "Копіювати",
+    "copy_link": "Скопіювати посилання",
+    "go": "Далі",
+    "invite": "Запросити",
+    "no": "Ні",
+    "register": "Зареєструватися",
+    "remove": "Вилучити",
+    "sign_in": "Увійти",
+    "sign_out": "Вийти",
+    "submit": "Надіслати"
+  },
+  "analytics_notice": "Користуючись дочасним доступом, ви даєте згоду на збір анонімних даних, які ми використовуємо для вдосконалення продукту. Ви можете знайти більше інформації про те, які дані ми відстежуємо в нашій <2>Політиці Приватності</2> і нашій <5>Політиці про куки</5>.",
+  "app_selection_modal": {
+    "continue_in_browser": "Продовжити у браузері",
+    "open_in_app": "Відкрити у застосунку",
+    "text": "Готові приєднатися?",
+    "title": "Вибрати застосунок"
+  },
+  "browser_media_e2ee_unsupported": "Ваш браузер не підтримує наскрізне шифрування мультимедійних даних. Підтримувані браузери: Chrome, Safari, Firefox >=117",
+  "call_ended_view": {
+    "body": "Вас від'єднано від виклику",
+    "create_account_button": "Створити обліковий запис",
+    "create_account_prompt": "<0>Чому б не завершити, налаштувавши пароль для збереження свого облікового запису?</0><1>Ви зможете зберегти своє ім'я та встановити аватарку для подальшого користування під час майбутніх викликів</1>",
+    "feedback_done": "<0>Дякуємо за ваш відгук!</0>",
+    "feedback_prompt": "<0>Ми будемо раді почути ваші відгуки, щоб поліпшити роботу застосунку.</0>",
+    "headline": "{{displayName}}, ваш виклик завершено.",
+    "not_now_button": "Не зараз, повернутися на екран домівки",
+    "reconnect_button": "Під'єднати повторно",
+    "survey_prompt": "Вам усе сподобалось?"
+  },
+  "call_name": "Назва виклику",
+  "common": {
+    "audio": "Звук",
+    "avatar": "Аватар",
+    "camera": "Камера",
+    "copied": "Скопійовано!",
+    "display_name": "Псевдонім",
+    "encrypted": "Зашифровано",
+    "home": "Домівка",
+    "loading": "Завантаження…",
+    "microphone": "Мікрофон",
+    "password": "Пароль",
+    "profile": "Профіль",
+    "settings": "Налаштування",
+    "unencrypted": "Не зашифровано",
+    "username": "Ім'я користувача",
+    "video": "Відео"
+  },
+  "disconnected_banner": "Втрачено зв'язок з сервером.",
+  "full_screen_view_description": "<0>Надсилання журналів налагодження допоможе нам виявити проблему.</0>",
+  "full_screen_view_h1": "<0>Йой, щось пішло не за планом.</0>",
+  "group_call_loader_failed_heading": "Виклик не знайдено",
+  "group_call_loader_failed_text": "Відтепер виклики захищено наскрізним шифруванням, і їх потрібно створювати з домашньої сторінки. Це допомагає переконатися, що всі користувачі використовують один і той самий ключ шифрування.",
+  "hangup_button_label": "Завершити виклик",
+  "header_label": "Домівка Element Call",
+  "header_participants_label": "Учасники",
+  "invite_modal": {
+    "link_copied_toast": "Посилання скопійовано до буфера обміну",
+    "title": "Запросити до цього виклику"
+  },
+  "join_existing_call_modal": {
+    "join_button": "Так, приєднатися до виклику",
+    "text": "Цей виклик уже існує, бажаєте приєднатися?",
+    "title": "Приєднатися до наявного виклику?"
+  },
+  "layout_grid_label": "Сітка",
+  "layout_spotlight_label": "У центрі уваги",
+  "lobby": {
+    "join_button": "Приєднатися до виклику",
+    "leave_button": "Повернутися до недавніх"
+  },
+  "logging_in": "Вхід…",
+  "login_auth_links": "<0>Створити обліковий запис</0> або <2>Отримати доступ як гість</2>",
+  "login_title": "Увійти",
+  "microphone_off": "Мікрофон вимкнено",
+  "microphone_on": "Мікрофон увімкнено",
+  "mute_microphone_button_label": "Вимкнути мікрофон",
+  "rageshake_button_error_caption": "Повторити надсилання журналів",
+  "rageshake_request_modal": {
+    "body": "Інший користувач у цьому виклику має проблему. Щоб краще визначити ці проблеми, ми хотіли б зібрати журнал налагодження.",
+    "title": "Запит журналу налагодження"
+  },
+  "rageshake_send_logs": "Надіслати журнал налагодження",
+  "rageshake_sending": "Надсилання…",
+  "rageshake_sending_logs": "Надсилання журналу налагодження…",
+  "rageshake_sent": "Дякуємо!",
+  "recaptcha_caption": "Цей сайт захищений ReCAPTCHA і до нього застосовується <2>Політика приватності</2> і <6>Умови надання послуг</6> Google.<9></9>Натискаючи \"Зареєструватися\", ви погоджуєтеся з нашою <12>Ліцензійною угодою з кінцевим користувачем (EULA)</12>",
+  "recaptcha_dismissed": "Recaptcha не пройдено",
+  "recaptcha_not_loaded": "Recaptcha не завантажено",
+  "register": {
+    "passwords_must_match": "Паролі відрізняються",
+    "registering": "Реєстрація…"
+  },
+  "register_auth_links": "<0>Уже маєте обліковий запис?</0><1><0>Увійти</0> Or <2>Отримати доступ як гість</2></1>",
+  "register_confirm_password_label": "Підтвердити пароль",
+  "return_home_button": "Повернутися на екран домівки",
+  "room_auth_view_eula_caption": "Натискаючи \"Приєднатися до виклику зараз\", ви погоджуєтеся з нашою <2>Ліцензійною угодою з кінцевим користувачем (EULA)</2>",
+  "room_auth_view_join_button": "Приєднатися до виклику зараз",
+  "screenshare_button_label": "Поділитися екраном",
+  "select_input_unset_button": "Вибрати опцію",
+  "settings": {
+    "developer_settings_label": "Налаштування розробника",
+    "developer_settings_label_description": "Відкрийте налаштування розробника у вікні налаштувань.",
+    "developer_tab_title": "Розробнику",
+    "feedback_tab_body": "Якщо у вас виникли проблеми або ви просто хочете залишити відгук, надішліть нам короткий опис нижче.",
+    "feedback_tab_description_label": "Ваш відгук",
+    "feedback_tab_h4": "Надіслати відгук",
+    "feedback_tab_send_logs_label": "Долучити журнали налагодження",
+    "feedback_tab_thank_you": "Дякуємо, ми отримали ваш відгук!",
+    "feedback_tab_title": "Відгук",
+    "more_tab_title": "Докладніше",
+    "opt_in_description": "<0></0><1></1>Ви можете відкликати згоду, прибравши цей прапорець. Якщо ви зараз розмовляєте, це налаштування застосується після завершення виклику.",
+    "show_connection_stats_label": "Показати стан з'єднання",
+    "speaker_device_selection_label": "Динамік"
+  },
+  "star_rating_input_label_one": "{{count}} зірок",
+  "star_rating_input_label_other": "{{count}} зірок",
+  "start_new_call": "Розпочати новий виклик",
+  "start_video_button_label": "Розпочати відео",
+  "stop_screenshare_button_label": "Презентація екрана",
+  "stop_video_button_label": "Зупинити відео",
+  "submitting": "Надсилання…",
+  "unauthenticated_view_body": "Ще не зареєстровані? <2>Створіть обліковий запис</2>",
+  "unauthenticated_view_eula_caption": "Натискаючи \"Далі\", ви погоджуєтеся з нашою <2>Ліцензійною угодою з кінцевим користувачем (EULA)</2>",
+  "unauthenticated_view_login_button": "Увійдіть до свого облікового запису",
+  "unmute_microphone_button_label": "Увімкнути мікрофон",
+  "version": "Версія: {{version}}",
+  "video_tile": {
+    "sfu_participant_local": "Ви"
+  },
+  "waiting_for_participants": "Очікування на інших учасників…"
+}

public/locales/vi/app.json

@@ -0,0 +1,75 @@
+{
+  "action": {
+    "close": "Đóng",
+    "copy": "Sao chép",
+    "no": "Không",
+    "register": "Đăng ký",
+    "sign_in": "Đăng nhập",
+    "sign_out": "Đăng xuất",
+    "submit": "Gửi"
+  },
+  "call_ended_view": {
+    "create_account_button": "Tạo tài khoản",
+    "create_account_prompt": "<0>Tại sao lại không hoàn thiện bằng cách đặt mật khẩu để giữ tài khoản của bạn?</0><1>Bạn sẽ có thể giữ tên và đặt ảnh đại diện cho những cuộc gọi tiếp theo.</1>",
+    "feedback_done": "<0>Cảm hơn vì đã phản hồi!</0>",
+    "feedback_prompt": "<0>Chúng tôi muốn nghe phản hồi của bạn để còn cải thiện trải nghiệm cho bạn.</0>",
+    "headline": "{{displayName}}, cuộc gọi đã kết thúc."
+  },
+  "common": {
+    "audio": "Âm thanh",
+    "avatar": "Ảnh đại diện",
+    "camera": "Máy quay",
+    "copied": "Đã sao chép!",
+    "display_name": "Tên hiển thị",
+    "loading": "Đang tải…",
+    "microphone": "Micrô",
+    "password": "Mật khẩu",
+    "profile": "Hồ sơ",
+    "settings": "Cài đặt",
+    "username": "Tên người dùng",
+    "video": "Truyền hình"
+  },
+  "full_screen_view_description": "<0>Gửi nhật ký gỡ lỗi sẽ giúp chúng tôi theo dõi vấn đề.</0>",
+  "full_screen_view_h1": "<0>Ối, có cái gì đó sai.</0>",
+  "join_existing_call_modal": {
+    "join_button": "Vâng, tham gia cuộc gọi",
+    "text": "Cuộc gọi đã tồn tại, bạn có muốn tham gia không?",
+    "title": "Tham gia cuộc gọi?"
+  },
+  "layout_spotlight_label": "Tiêu điểm",
+  "lobby": {
+    "join_button": "Tham gia cuộc gọi"
+  },
+  "logging_in": "Đang đăng nhập…",
+  "login_auth_links": "<0>Tạo tài khoản</0> Hay <2>Tham gia dưới tên khác</2>",
+  "login_title": "Đăng nhập",
+  "rageshake_request_modal": {
+    "body": "Một người dùng khác trong cuộc gọi đang gặp vấn đề. Để có thể chẩn đoán tốt hơn chúng tôi muốn thu thập nhật ký gỡ lỗi.",
+    "title": "Yêu cầu nhật ký gỡ lỗi"
+  },
+  "rageshake_sending": "Đang gửi…",
+  "recaptcha_not_loaded": "Chưa tải được Recaptcha",
+  "register": {
+    "passwords_must_match": "Mật khẩu phải khớp",
+    "registering": "Đang đăng ký…"
+  },
+  "register_auth_links": "<0>Đã có tài khoản?</0><1><0>Đăng nhập</0> Hay <2>Tham gia dưới tên Khách</2></1>",
+  "register_confirm_password_label": "Xác nhận mật khẩu",
+  "room_auth_view_join_button": "Tham gia cuộc gọi",
+  "screenshare_button_label": "Chia sẻ màn hình",
+  "settings": {
+    "developer_settings_label": "Cài đặt phát triển",
+    "developer_tab_title": "Nhà phát triển",
+    "feedback_tab_description_label": "Phản hồi của bạn",
+    "feedback_tab_h4": "Gửi phản hồi",
+    "feedback_tab_send_logs_label": "Kèm theo nhật ký gỡ lỗi",
+    "feedback_tab_thank_you": "Cảm ơn, chúng tôi đã nhận được phản hồi!",
+    "feedback_tab_title": "Phản hồi",
+    "speaker_device_selection_label": "Loa"
+  },
+  "submitting": "Đang gửi…",
+  "unauthenticated_view_body": "Chưa đăng ký? <2>Tạo tài khoản</2>",
+  "unauthenticated_view_login_button": "Đăng nhập vào tài khoản của bạn",
+  "version": "Phiên bản: {{version}}",
+  "waiting_for_participants": "Đang đợi những người khác…"
+}

public/locales/zh-Hans/app.json

@@ -0,0 +1,131 @@
+{
+  "a11y": {
+    "user_menu": "用户菜单"
+  },
+  "action": {
+    "close": "关闭",
+    "copy": "复制",
+    "go": "开始",
+    "no": "否",
+    "register": "注册",
+    "remove": "移除",
+    "sign_in": "登录",
+    "sign_out": "登出",
+    "submit": "提交"
+  },
+  "analytics_notice": "参与测试即表示您同意我们收集匿名数据，用于改进产品。您可以在我们的<2>隐私政策</2>和<5>Cookie政策</5>中找到有关我们跟踪哪些数据以及更多信息。",
+  "app_selection_modal": {
+    "continue_in_browser": "在浏览器中继续",
+    "open_in_app": "在应用中打开",
+    "text": "准备好加入了吗？",
+    "title": "选择应用程序"
+  },
+  "browser_media_e2ee_unsupported": "您的浏览器不支持媒体端对端加密。支持的浏览器有 Chrome、Safari、Firefox >=117",
+  "call_ended_view": {
+    "body": "通话已中断",
+    "create_account_button": "创建账户",
+    "create_account_prompt": "<0>为何不设置密码来保留你的账户？</0><1>保留昵称并设置头像，以便在未来的通话中使用。</1>",
+    "feedback_done": "<0>感谢反馈！</0>",
+    "feedback_prompt": "<0>我们需要您的反馈以提升用户体验。</0>",
+    "headline": "{{displayName}}，通话已结束。",
+    "not_now_button": "暂不，返回主页",
+    "reconnect_button": "重新连接",
+    "survey_prompt": "进展如何？"
+  },
+  "call_name": "通话名称",
+  "common": {
+    "audio": "音频",
+    "avatar": "头像",
+    "camera": "摄像头",
+    "copied": "已复制！",
+    "display_name": "显示名称",
+    "encrypted": "已加密",
+    "home": "主页",
+    "loading": "加载中……",
+    "microphone": "麦克风",
+    "password": "密码",
+    "profile": "个人信息",
+    "settings": "设置",
+    "unencrypted": "未加密",
+    "username": "用户名",
+    "video": "视频"
+  },
+  "disconnected_banner": "与服务器的连接中断。",
+  "full_screen_view_description": "<0>提交日志以帮助我们修复问题。</0>",
+  "full_screen_view_h1": "<0>哎哟，出问题了。</0>",
+  "group_call_loader_failed_heading": "未找到通话",
+  "group_call_loader_failed_text": "现在，通话是端对端加密的，需要从主页创建。这有助于确保每个人都使用相同的加密密钥。",
+  "hangup_button_label": "通话结束",
+  "header_label": "Element Call主页",
+  "join_existing_call_modal": {
+    "join_button": "是，加入通话",
+    "text": "该通话已存在，你想加入吗？",
+    "title": "是否加入现有的通话？"
+  },
+  "layout_grid_label": "网格",
+  "layout_spotlight_label": "聚焦模式",
+  "lobby": {
+    "join_button": "加入通话",
+    "leave_button": "返回最近通话"
+  },
+  "logging_in": "登录中……",
+  "login_auth_links": "<0>创建账户</0> Or <2>以访客身份继续</2>",
+  "login_title": "登录",
+  "microphone_off": "麦克风关闭",
+  "microphone_on": "麦克风开启",
+  "mute_microphone_button_label": "静音麦克风",
+  "rageshake_button_error_caption": "重传日志",
+  "rageshake_request_modal": {
+    "body": "这个通话中的另一个用户出现了问题。为了更好地诊断这些问题，我们想收集调试日志。",
+    "title": "调试日志请求"
+  },
+  "rageshake_send_logs": "发送调试日志",
+  "rageshake_sending": "正在发送……",
+  "rageshake_sending_logs": "正在发送调试日志……",
+  "rageshake_sent": "谢谢！",
+  "recaptcha_caption": "该站点受 ReCAPTCHA 保护，适用于Google的 <2>隐私政策</2>和 <6>服务条款</6>。 <9></9>点击 \"注册\"，即表示您同意我们的 <12>最终用户许可协议 (EULA)</12>",
+  "recaptcha_dismissed": "人机验证失败",
+  "recaptcha_not_loaded": "recaptcha未加载",
+  "register": {
+    "passwords_must_match": "密码必须匹配",
+    "registering": "正在注册……"
+  },
+  "register_auth_links": "<0>已有账户？</0><1><0>登录</0> Or <2>以访客身份继续</2></1>",
+  "register_confirm_password_label": "确认密码",
+  "return_home_button": "返回主页",
+  "room_auth_view_eula_caption": "点击 \"加入通话\"，即表示您同意我们的<2>最终用户许可协议 (EULA)</2>",
+  "room_auth_view_join_button": "现在加入通话",
+  "screenshare_button_label": "屏幕共享",
+  "select_input_unset_button": "选择一个选项",
+  "settings": {
+    "developer_settings_label": "开发者设置",
+    "developer_settings_label_description": "在设置中显示开发者设置。",
+    "developer_tab_title": "开发者",
+    "feedback_tab_body": "如果遇到问题或想提供一些反馈意见，请在下面向我们发送简短描述。",
+    "feedback_tab_description_label": "您的反馈",
+    "feedback_tab_h4": "提交反馈",
+    "feedback_tab_send_logs_label": "包含调试日志",
+    "feedback_tab_thank_you": "谢谢，我们收到了反馈！",
+    "feedback_tab_title": "反馈",
+    "more_tab_title": "更多",
+    "opt_in_description": "<0></0><1></1>您可以取消选中复选框来撤回同意。如果正在通话中，此设置将在通话结束时生效。",
+    "show_connection_stats_label": "显示连接统计信息",
+    "speaker_device_selection_label": "发言人"
+  },
+  "star_rating_input_label_one": "{{count}} 个星",
+  "star_rating_input_label_other": "{{count}} 个星",
+  "start_new_call": "开始新通话",
+  "start_video_button_label": "开始视频",
+  "stop_screenshare_button_label": "屏幕共享",
+  "stop_video_button_label": "停止视频",
+  "submitting": "提交中…",
+  "unauthenticated_view_body": "还没有注册？ <2>创建账户<2>",
+  "unauthenticated_view_eula_caption": "点击 \"开始\"，即表示您同意我们的<2>最终用户许可协议 (EULA)</2>",
+  "unauthenticated_view_login_button": "登录你的账户",
+  "unmute_microphone_button_label": "取消麦克风静音",
+  "version": "版本：{{version}}",
+  "video_tile": {
+    "sfu_participant_local": "你"
+  },
+  "waiting_for_participants": "等待其他参与者……"
+}

public/locales/zh-Hant/app.json

@@ -0,0 +1,138 @@
+{
+  "a11y": {
+    "user_menu": "使用者選單"
+  },
+  "action": {
+    "close": "關閉",
+    "copy": "複製",
+    "copy_link": "複製連結",
+    "go": "前往",
+    "invite": "邀請",
+    "no": "否",
+    "register": "註冊",
+    "remove": "移除",
+    "sign_in": "登入",
+    "sign_out": "登出",
+    "submit": "遞交"
+  },
+  "analytics_notice": "參與此測試版即表示您同意蒐集匿名資料，我們使用這些資料來改進產品。您可以在我們的<2>隱私政策</2>與我們的 <5>Cookie 政策</5> 中找到關於我們追蹤哪些資料的更多資訊。",
+  "app_selection_modal": {
+    "continue_in_browser": "在瀏覽器中繼續",
+    "open_in_app": "在應用程式中開啟",
+    "text": "準備好加入了？",
+    "title": "選取應用程式"
+  },
+  "browser_media_e2ee_unsupported": "您的網路瀏覽器不支援媒體端到端加密。支援的瀏覽器包含了 Chrome、Safari、Firefox >=117",
+  "call_ended_view": {
+    "body": "您已從通話斷線",
+    "create_account_button": "建立帳號",
+    "create_account_prompt": "<0>何不設定密碼以保留此帳號？</0><1>您可以保留暱稱並設定頭像，以便未來通話時使用</1>",
+    "feedback_done": "<0>感謝您的回饋！</0>",
+    "feedback_prompt": "<0>我們想要聽到您的回饋，如此我們才能改善您的體驗。</0>",
+    "headline": "{{displayName}}，您的通話已結束。",
+    "not_now_button": "現在不行，回到首頁",
+    "reconnect_button": "重新連線",
+    "survey_prompt": "進展如何？"
+  },
+  "call_name": "通話名稱",
+  "common": {
+    "audio": "語音",
+    "avatar": "大頭照",
+    "camera": "相機",
+    "copied": "已複製！",
+    "display_name": "顯示名稱",
+    "encrypted": "已加密",
+    "home": "首頁",
+    "loading": "載入中…",
+    "microphone": "麥克風",
+    "password": "密碼",
+    "profile": "個人檔案",
+    "settings": "設定",
+    "unencrypted": "未加密",
+    "username": "使用者名稱",
+    "video": "視訊"
+  },
+  "disconnected_banner": "到伺服器的連線已遺失。",
+  "full_screen_view_description": "<0>送出除錯紀錄，可幫助我們修正問題。</0>",
+  "full_screen_view_h1": "<0>喔喔，有些地方怪怪的。</0>",
+  "group_call_loader_failed_heading": "找不到通話",
+  "group_call_loader_failed_text": "通話現在是端對端加密的，必須從首頁建立。這有助於確保每個人都使用相同的加密金鑰。",
+  "hangup_button_label": "結束通話",
+  "header_label": "Element Call 首頁",
+  "header_participants_label": "參與者",
+  "invite_modal": {
+    "link_copied_toast": "連結已複製到剪貼簿",
+    "title": "邀請到此通話"
+  },
+  "join_existing_call_modal": {
+    "join_button": "是，加入對話",
+    "text": "通話已經開始，請問您要加入嗎？",
+    "title": "加入已開始的通話嗎？"
+  },
+  "layout_grid_label": "網格",
+  "layout_spotlight_label": "聚焦",
+  "lobby": {
+    "join_button": "加入通話",
+    "leave_button": "回到最近的通話"
+  },
+  "logging_in": "登入中…",
+  "login_auth_links": "<0>建立帳號</0> 或<2>以訪客身份登入</2>",
+  "login_title": "登入",
+  "microphone_off": "麥克風關閉",
+  "microphone_on": "麥克風開啟",
+  "mute_microphone_button_label": "將麥克風靜音",
+  "rageshake_button_error_caption": "重試傳送紀錄檔",
+  "rageshake_request_modal": {
+    "body": "這通對話中的另一位使用者遇到了某些問題。為了診斷問題，我們將會建立除錯紀錄。",
+    "title": "請求偵錯報告"
+  },
+  "rageshake_send_logs": "傳送除錯紀錄",
+  "rageshake_sending": "傳送中…",
+  "rageshake_sending_logs": "傳送除錯記錄檔中…",
+  "rageshake_sent": "感謝！",
+  "recaptcha_caption": "此網站被 ReCAPTCHA 保護，並適用 Google 的<2>隱私權政策</2>與<6>服務條款</6>。<9></9>點擊「註冊」即表示您同意我們的<12>終端使用者授權協議 (EULA)</12>",
+  "recaptcha_dismissed": "略過驗證碼",
+  "recaptcha_not_loaded": "驗證碼未載入",
+  "register": {
+    "passwords_must_match": "密碼必須相符",
+    "registering": "註冊中…"
+  },
+  "register_auth_links": "<0>已經有帳號?</0><1><0>登入</0> 或<2>以訪客身份登入</2></1>",
+  "register_confirm_password_label": "確認密碼",
+  "return_home_button": "回到首頁",
+  "room_auth_view_eula_caption": "點擊「立刻加入通話」即表示您同意我們的<2>終端使用者授權協議 (EULA)</2>",
+  "room_auth_view_join_button": "現在加入通話",
+  "screenshare_button_label": "分享畫面",
+  "select_input_unset_button": "選擇一個選項",
+  "settings": {
+    "developer_settings_label": "開發者設定",
+    "developer_settings_label_description": "在設定視窗中顯示開發者設定。",
+    "developer_tab_title": "開發者",
+    "feedback_tab_body": "若您遇到問題或只是想提供一些回饋，請在下方傳送簡短說明給我們。",
+    "feedback_tab_description_label": "您的回饋",
+    "feedback_tab_h4": "遞交回覆",
+    "feedback_tab_send_logs_label": "包含除錯紀錄",
+    "feedback_tab_thank_you": "感謝，我們已經收到您的回饋了！",
+    "feedback_tab_title": "回饋",
+    "more_tab_title": "更多",
+    "opt_in_description": "<0></0><1></1>您可以透過取消核取此方塊來撤回同意。若您目前正在通話中，此設定將在通話結束時生效。",
+    "show_connection_stats_label": "顯示連線統計資料",
+    "speaker_device_selection_label": "發言者"
+  },
+  "star_rating_input_label_one": "{{count}} 個星星",
+  "star_rating_input_label_other": "{{count}} 個星星",
+  "start_new_call": "開始新通話",
+  "start_video_button_label": "開始影片",
+  "stop_screenshare_button_label": "分享畫面",
+  "stop_video_button_label": "停止影片",
+  "submitting": "正在遞交……",
+  "unauthenticated_view_body": "還沒註冊嗎？<2>建立帳號</2>",
+  "unauthenticated_view_eula_caption": "點擊「前往」即表示您同意我們的<2>終端使用者授權協議 (EULA)</2>",
+  "unauthenticated_view_login_button": "登入您的帳號",
+  "unmute_microphone_button_label": "將麥克風取消靜音",
+  "version": "版本： {{version}}",
+  "video_tile": {
+    "sfu_participant_local": "您"
+  },
+  "waiting_for_participants": "等待其他參加者…"
+}

renovate.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:base"],
+  "packageRules": [
+    {
+      "extends": ["group:allNonMajor", "schedule:weekly"]
+    },
+    {
+      "groupName": "GitHub Actions",
+      "matchDepTypes": ["action"],
+      "pinDigests": true,
+      "extends": ["schedule:monthly"]
+    },
+    {
+      "description": "Disable Renovate for packages we want to monitor ourselves",
+      "groupName": "manually updated packages",
+      "matchDepNames": ["matrix-js-sdk"],
+      "enabled": false
+    },
+    {
+      "groupName": "matrix-widget-api",
+      "matchDepNames": ["matrix-widget-api"]
+    },
+    {
+      "groupName": "Compound",
+      "matchPackagePrefixes": ["@vector-im/compound-"],
+      "schedule": "before 5am on Tuesday and Friday"
+    },
+    {
+      "groupName": "LiveKit client",
+      "matchDepNames": ["livekit-client"]
+    },
+    {
+      "groupName": "LiveKit components",
+      "matchPackagePrefixes": ["@livekit/components-"]
+    },
+    {
+      "groupName": "Vaul",
+      "matchDepNames": ["vaul"],
+      "extends": ["schedule:monthly"],
+      "prHeader": "Please review modals on mobile for visual regressions."
+    }
+  ],
+  "semanticCommits": "disabled",
+  "ignoreDeps": [
+    "@react-aria/button",
+    "@react-aria/focus",
+    "@react-aria/menu",
+    "@react-aria/overlays",
+    "@react-aria/select",
+    "@react-aria/tabs",
+    "@react-aria/tooltip",
+    "@react-aria/utils",
+    "@react-stately/collections",
+    "@react-stately/select",
+    "@react-stately/tooltip",
+    "@react-stately/tree",
+    "@react-types/dialog"
+  ]
+}

scripts/dockerbuild.sh

@@ -2,28 +2,7 @@
 
 set -ex
 
-VITE_DEFAULT_HOMESERVER=https://call.ems.host
-VITE_SENTRY_DSN=https://b1e328d49be3402ba96101338989fb35@sentry.matrix.org/41
+export VITE_APP_VERSION=$(git describe --tags --abbrev=0)
 
-git clone https://github.com/matrix-org/matrix-js-sdk.git
-cd matrix-js-sdk
-git checkout robertlong/group-call
-yarn install
-yarn run build
-yarn link
-cd ..
-
-git clone https://github.com/matrix-org/matrix-react-sdk.git
-cd matrix-react-sdk
-git checkout robertlong/group-call
-yarn link matrix-js-sdk
-yarn install
-yarn run build
-yarn link
-cd ..
-
-cd matrix-video-chat
-yarn link matrix-js-sdk
-yarn link matrix-react-sdk
 yarn install
 yarn run build

scripts/reformat-release-notes.py

@@ -0,0 +1,15 @@
+#!/usr/bin/env python3
+
+# This script can be used to reformat the release notes generated by
+# GitHub releases into a format slightly more appropriate for our
+# project (ie. we don't really need to mention the author of every PR)
+#
+# eg. in: * OpenTelemetry by @dbkr in https://github.com/vector-im/element-call/pull/961
+#    out: * OpenTelemetry (https://github.com/vector-im/element-call/pull/961)
+
+import sys
+import re
+
+for line in sys.stdin:
+    matches = re.match(r'^\* (.*) by (\S+) in (\S+)$', line.strip())
+    print("* %s (%s)" % (matches[1], matches[3]))

src/@types/global.d.ts

@@ -0,0 +1,35 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import "matrix-js-sdk/src/@types/global";
+
+declare global {
+  interface Document {
+    // Safari only supports this prefixed, so tell the type system about it
+    webkitExitFullscreen: () => void;
+    webkitFullscreenElement: HTMLElement | null;
+  }
+
+  interface Window {
+    // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
+    OLM_OPTIONS: Record<string, string>;
+  }
+
+  interface HTMLElement {
+    // Safari only supports this prefixed, so tell the type system about it
+    webkitRequestFullscreen: () => void;
+  }
+}

src/@types/i18next.d.ts

@@ -0,0 +1,29 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import "i18next";
+// import all namespaces (for the default language, only)
+import app from "../../public/locales/en-GB/app.json";
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    defaultNS: "app";
+    keySeparator: ".";
+    resources: {
+      app: typeof app;
+    };
+  }
+}

src/@types/modules.d.ts

@@ -0,0 +1,18 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

src/App.jsx

@@ -1,105 +0,0 @@
-/*
-Copyright 2021 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, { useEffect, useState } from "react";
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  useLocation,
-  useHistory,
-} from "react-router-dom";
-import * as Sentry from "@sentry/react";
-import { OverlayProvider } from "@react-aria/overlays";
-import { Home } from "./Home";
-import { LoginPage } from "./LoginPage";
-import { RegisterPage } from "./RegisterPage";
-import { Room } from "./Room";
-import {
-  ClientProvider,
-  defaultHomeserverHost,
-} from "./ConferenceCallManagerHooks";
-import { useFocusVisible } from "@react-aria/interactions";
-import styles from "./App.module.css";
-import { LoadingView } from "./FullScreenView";
-
-const SentryRoute = Sentry.withSentryRouting(Route);
-
-export default function App({ history }) {
-  const { isFocusVisible } = useFocusVisible();
-
-  useEffect(() => {
-    const classList = document.body.classList;
-    const hasClass = classList.contains(styles.hideFocus);
-
-    if (isFocusVisible && hasClass) {
-      classList.remove(styles.hideFocus);
-    } else if (!isFocusVisible && !hasClass) {
-      classList.add(styles.hideFocus);
-    }
-
-    return () => {
-      classList.remove(styles.hideFocus);
-    };
-  }, [isFocusVisible]);
-
-  return (
-    <Router history={history}>
-      <ClientProvider>
-        <OverlayProvider>
-          <Switch>
-            <SentryRoute exact path="/">
-              <Home />
-            </SentryRoute>
-            <SentryRoute exact path="/login">
-              <LoginPage />
-            </SentryRoute>
-            <SentryRoute exact path="/register">
-              <RegisterPage />
-            </SentryRoute>
-            <SentryRoute path="/room/:roomId?">
-              <Room />
-            </SentryRoute>
-            <SentryRoute path="*">
-              <RoomRedirect />
-            </SentryRoute>
-          </Switch>
-        </OverlayProvider>
-      </ClientProvider>
-    </Router>
-  );
-}
-
-function RoomRedirect() {
-  const { pathname } = useLocation();
-  const history = useHistory();
-
-  useEffect(() => {
-    let roomId = pathname;
-
-    if (pathname.startsWith("/")) {
-      roomId = roomId.substr(1, roomId.length);
-    }
-
-    if (!roomId.startsWith("#") && !roomId.startsWith("!")) {
-      roomId = `#${roomId}:${defaultHomeserverHost}`;
-    }
-
-    history.replace(`/room/${roomId}`);
-  }, [pathname, history]);
-
-  return <LoadingView />;
-}

src/App.module.css

@@ -1,3 +0,0 @@
-.hideFocus * {
-  outline: none;
-}

src/App.tsx

@@ -0,0 +1,124 @@
+/*
+Copyright 2021 - 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { FC, Suspense, useEffect, useState } from "react";
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  useLocation,
+} from "react-router-dom";
+import * as Sentry from "@sentry/react";
+import { OverlayProvider } from "@react-aria/overlays";
+import { History } from "history";
+import { TooltipProvider } from "@vector-im/compound-web";
+
+import { HomePage } from "./home/HomePage";
+import { LoginPage } from "./auth/LoginPage";
+import { RegisterPage } from "./auth/RegisterPage";
+import { RoomPage } from "./room/RoomPage";
+import { ClientProvider } from "./ClientContext";
+import { CrashView, LoadingView } from "./FullScreenView";
+import { DisconnectedBanner } from "./DisconnectedBanner";
+import { Initializer } from "./initializer";
+import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";
+import { widget } from "./widget";
+import { useTheme } from "./useTheme";
+
+const SentryRoute = Sentry.withSentryRouting(Route);
+
+interface SimpleProviderProps {
+  children: JSX.Element;
+}
+
+const BackgroundProvider: FC<SimpleProviderProps> = ({ children }) => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    let backgroundImage = "";
+    if (!["/login", "/register"].includes(pathname) && !widget) {
+      backgroundImage = "var(--background-gradient)";
+    }
+
+    document.getElementsByTagName("body")[0].style.backgroundImage =
+      backgroundImage;
+  }, [pathname]);
+
+  return <>{children}</>;
+};
+const ThemeProvider: FC<SimpleProviderProps> = ({ children }) => {
+  useTheme();
+  return children;
+};
+
+interface AppProps {
+  history: History;
+}
+
+export const App: FC<AppProps> = ({ history }) => {
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => {
+    Initializer.init()?.then(() => {
+      if (loaded) return;
+      setLoaded(true);
+      widget?.api.sendContentLoaded();
+    });
+  });
+
+  const errorPage = <CrashView />;
+
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <Router history={history}>
+      <BackgroundProvider>
+        <ThemeProvider>
+          <TooltipProvider>
+            {loaded ? (
+              <Suspense fallback={null}>
+                <ClientProvider>
+                  <MediaDevicesProvider>
+                    <Sentry.ErrorBoundary fallback={errorPage}>
+                      <OverlayProvider>
+                        <DisconnectedBanner />
+                        <Switch>
+                          <SentryRoute exact path="/">
+                            <HomePage />
+                          </SentryRoute>
+                          <SentryRoute exact path="/login">
+                            <LoginPage />
+                          </SentryRoute>
+                          <SentryRoute exact path="/register">
+                            <RegisterPage />
+                          </SentryRoute>
+                          <SentryRoute path="*">
+                            <RoomPage />
+                          </SentryRoute>
+                        </Switch>
+                      </OverlayProvider>
+                    </Sentry.ErrorBoundary>
+                  </MediaDevicesProvider>
+                </ClientProvider>
+              </Suspense>
+            ) : (
+              <LoadingView />
+            )}
+          </TooltipProvider>
+        </ThemeProvider>
+      </BackgroundProvider>
+    </Router>
+  );
+};

src/Avatar.jsx

@@ -1,58 +0,0 @@
-import React, { useMemo } from "react";
-import classNames from "classnames";
-import styles from "./Avatar.module.css";
-
-const backgroundColors = [
-  "#5C56F5",
-  "#03B381",
-  "#368BD6",
-  "#AC3BA8",
-  "#E64F7A",
-  "#FF812D",
-  "#2DC2C5",
-  "#74D12C",
-];
-
-function hashStringToArrIndex(str, arrLength) {
-  let sum = 0;
-
-  for (let i = 0; i < str.length; i++) {
-    sum += str.charCodeAt(i);
-  }
-
-  return sum % arrLength;
-}
-
-export function Avatar({
-  bgKey,
-  src,
-  fallback,
-  size,
-  className,
-  style,
-  ...rest
-}) {
-  const backgroundColor = useMemo(() => {
-    const index = hashStringToArrIndex(
-      bgKey || fallback || src,
-      backgroundColors.length
-    );
-    return backgroundColors[index];
-  }, [bgKey, src, fallback]);
-
-  return (
-    <div
-      className={classNames(styles.avatar, styles[size || "md"], className)}
-      style={{ backgroundColor, ...style }}
-      {...rest}
-    >
-      {src ? (
-        <img src={src} />
-      ) : typeof fallback === "string" ? (
-        <span>{fallback}</span>
-      ) : (
-        fallback
-      )}
-    </div>
-  );
-}

src/Avatar.module.css

@@ -1,59 +0,0 @@
-.avatar {
-  position: relative;
-  color: #ffffff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  font-weight: 600;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.avatar svg * {
-  fill: #ffffff;
-}
-
-.avatar span {
-  padding-top: 1px;
-}
-
-.xs {
-  width: 22px;
-  height: 22px;
-  border-radius: 22px;
-  font-size: 14px;
-}
-
-.sm {
-  width: 32px;
-  height: 32px;
-  border-radius: 32px;
-  font-size: 15px;
-}
-
-.md {
-  width: 36px;
-  height: 36px;
-  border-radius: 36px;
-  font-size: 20px;
-}
-
-.lg {
-  width: 42px;
-  height: 42px;
-  border-radius: 42px;
-  font-size: 36px;
-}
-
-.xl {
-  width: 90px;
-  height: 90px;
-  border-radius: 90px;
-}

src/Avatar.tsx

@@ -0,0 +1,78 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useMemo, FC } from "react";
+import { Avatar as CompoundAvatar } from "@vector-im/compound-web";
+
+import { getAvatarUrl } from "./matrix-utils";
+import { useClient } from "./ClientContext";
+
+export enum Size {
+  XS = "xs",
+  SM = "sm",
+  MD = "md",
+  LG = "lg",
+  XL = "xl",
+}
+
+export const sizes = new Map([
+  [Size.XS, 22],
+  [Size.SM, 32],
+  [Size.MD, 36],
+  [Size.LG, 42],
+  [Size.XL, 90],
+]);
+
+interface Props {
+  id: string;
+  name: string;
+  className?: string;
+  src?: string;
+  size?: Size | number;
+}
+
+export const Avatar: FC<Props> = ({
+  className,
+  id,
+  name,
+  src,
+  size = Size.MD,
+}) => {
+  const { client } = useClient();
+
+  const sizePx = useMemo(
+    () =>
+      Object.values(Size).includes(size as Size)
+        ? sizes.get(size as Size)
+        : (size as number),
+    [size],
+  );
+
+  const resolvedSrc = useMemo(() => {
+    if (!client || !src || !sizePx) return undefined;
+    return src.startsWith("mxc://") ? getAvatarUrl(client, src, sizePx) : src;
+  }, [client, src, sizePx]);
+
+  return (
+    <CompoundAvatar
+      className={className}
+      id={id}
+      name={name}
+      size={`${sizePx}px`}
+      src={resolvedSrc}
+    />
+  );
+};

src/Banner.module.css

@@ -0,0 +1,22 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.banner {
+  flex: 1;
+  border-radius: 8px;
+  padding: 16px;
+  background-color: var(--cpd-color-bg-subtle-primary);
+}

src/Banner.tsx

@@ -0,0 +1,27 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { FC, ReactNode } from "react";
+
+import styles from "./Banner.module.css";
+
+interface Props {
+  children: ReactNode;
+}
+
+export const Banner: FC<Props> = ({ children }) => {
+  return <div className={styles.banner}>{children}</div>;
+};

src/CallList.jsx

@@ -1,57 +0,0 @@
-import React, { useMemo } from "react";
-import { Link } from "react-router-dom";
-import { CopyButton } from "./button";
-import { Facepile } from "./Facepile";
-import { Avatar } from "./Avatar";
-import { ReactComponent as VideoIcon } from "./icons/Video.svg";
-import styles from "./CallList.module.css";
-import { getRoomUrl } from "./ConferenceCallManagerHooks";
-
-export function CallList({ title, rooms, client }) {
-  return (
-    <>
-      <h3>{title}</h3>
-      <div className={styles.callList}>
-        {rooms.map(({ roomId, roomName, avatarUrl, participants }) => (
-          <CallTile
-            key={roomId}
-            client={client}
-            name={roomName}
-            avatarUrl={avatarUrl}
-            roomId={roomId}
-            participants={participants}
-          />
-        ))}
-      </div>
-    </>
-  );
-}
-
-function CallTile({ name, avatarUrl, roomId, participants, client }) {
-  return (
-    <div className={styles.callTile}>
-      <Link to={`/room/${roomId}`} className={styles.callTileLink}>
-        <Avatar
-          size="md"
-          bgKey={name}
-          src={avatarUrl}
-          fallback={<VideoIcon width={16} height={16} />}
-          className={styles.avatar}
-        />
-        <div className={styles.callInfo}>
-          <h5>{name}</h5>
-          <p>{getRoomUrl(roomId)}</p>
-          {participants && (
-            <Facepile client={client} participants={participants} />
-          )}
-        </div>
-        <div className={styles.copyButtonSpacer} />
-      </Link>
-      <CopyButton
-        className={styles.copyButton}
-        variant="icon"
-        value={getRoomUrl(roomId)}
-      />
-    </div>
-  );
-}

src/CallList.module.css

@@ -1,74 +0,0 @@
-.callTile {
-  min-width: 240px;
-  height: 94px;
-  padding: 12px;
-  background-color: var(--bgColor2);
-  border-radius: 8px;
-  overflow: hidden;
-  box-sizing: border-box;
-  position: relative;
-  user-select: none;
-}
-
-.callTileLink {
-  display: flex;
-  text-decoration: none;
-  width: 100%;
-}
-
-.avatar,
-.copyButtonSpacer {
-  flex-shrink: 0;
-}
-
-.callInfo {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  padding: 0 16px;
-  color: var(--textColor1);
-  min-width: 0;
-}
-
-.callInfo > * {
-  margin-top: 0;
-  margin-bottom: 8px;
-}
-
-.callInfo > :last-child {
-  margin-bottom: 0;
-}
-
-.callInfo h5 {
-  font-size: 15px;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.callInfo p {
-  font-weight: 400;
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.copyButtonSpacer,
-.copyButton {
-  width: 16px;
-  height: 16px;
-}
-
-.copyButton {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-}
-
-.callList {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 24px;
-}

src/ClientContext.tsx

@@ -0,0 +1,430 @@
+/*
+Copyright 2021-2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {
+  FC,
+  useCallback,
+  useEffect,
+  useState,
+  createContext,
+  useContext,
+  useRef,
+  useMemo,
+} from "react";
+import { useHistory } from "react-router-dom";
+import {
+  ClientEvent,
+  ICreateClientOpts,
+  MatrixClient,
+} from "matrix-js-sdk/src/client";
+import { logger } from "matrix-js-sdk/src/logger";
+import { useTranslation } from "react-i18next";
+import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
+
+import { ErrorView } from "./FullScreenView";
+import {
+  CryptoStoreIntegrityError,
+  fallbackICEServerAllowed,
+  initClient,
+} from "./matrix-utils";
+import { widget } from "./widget";
+import {
+  PosthogAnalytics,
+  RegistrationType,
+} from "./analytics/PosthogAnalytics";
+import { translatedError } from "./TranslatedError";
+import { useEventTarget } from "./useEvents";
+import { Config } from "./config/Config";
+
+declare global {
+  interface Window {
+    matrixclient: MatrixClient;
+    passwordlessUser: boolean;
+  }
+}
+
+export type ClientState = ValidClientState | ErrorState;
+
+export type ValidClientState = {
+  state: "valid";
+  authenticated?: AuthenticatedClient;
+  // 'Disconnected' rather than 'connected' because it tracks specifically
+  // whether the client is supposed to be connected but is not
+  disconnected: boolean;
+  setClient: (params?: SetClientParams) => void;
+};
+
+export type AuthenticatedClient = {
+  client: MatrixClient;
+  isPasswordlessUser: boolean;
+  changePassword: (password: string) => Promise<void>;
+  logout: () => void;
+};
+
+export type ErrorState = {
+  state: "error";
+  error: Error;
+};
+
+export type SetClientParams = {
+  client: MatrixClient;
+  session: Session;
+};
+
+const ClientContext = createContext<ClientState | undefined>(undefined);
+
+export const useClientState = (): ClientState | undefined =>
+  useContext(ClientContext);
+
+export function useClient(): {
+  client?: MatrixClient;
+  setClient?: (params?: SetClientParams) => void;
+} {
+  let client;
+  let setClient;
+
+  const clientState = useClientState();
+  if (clientState?.state === "valid") {
+    client = clientState.authenticated?.client;
+    setClient = clientState.setClient;
+  }
+
+  return { client, setClient };
+}
+
+// Plain representation of the `ClientContext` as a helper for old components that expected an object with multiple fields.
+export function useClientLegacy(): {
+  client?: MatrixClient;
+  setClient?: (params?: SetClientParams) => void;
+  passwordlessUser: boolean;
+  loading: boolean;
+  authenticated: boolean;
+  logout?: () => void;
+  error?: Error;
+} {
+  const clientState = useClientState();
+
+  let client;
+  let setClient;
+  let passwordlessUser = false;
+  let loading = true;
+  let error;
+  let authenticated = false;
+  let logout;
+
+  if (clientState?.state === "valid") {
+    client = clientState.authenticated?.client;
+    setClient = clientState.setClient;
+    passwordlessUser = clientState.authenticated?.isPasswordlessUser ?? false;
+    loading = false;
+    authenticated = client !== undefined;
+    logout = clientState.authenticated?.logout;
+  } else if (clientState?.state === "error") {
+    error = clientState.error;
+    loading = false;
+  }
+
+  return {
+    client,
+    setClient,
+    passwordlessUser,
+    loading,
+    authenticated,
+    logout,
+    error,
+  };
+}
+
+const loadChannel =
+  "BroadcastChannel" in window ? new BroadcastChannel("load") : null;
+
+interface Props {
+  children: JSX.Element;
+}
+
+export const ClientProvider: FC<Props> = ({ children }) => {
+  const history = useHistory();
+
+  // null = signed out, undefined = loading
+  const [initClientState, setInitClientState] = useState<
+    InitResult | null | undefined
+  >(undefined);
+
+  const initializing = useRef(false);
+  useEffect(() => {
+    // In case the component is mounted, unmounted, and remounted quickly (as
+    // React does in strict mode), we need to make sure not to doubly initialize
+    // the client.
+    if (initializing.current) return;
+    initializing.current = true;
+
+    loadClient()
+      .then(setInitClientState)
+      .catch((err) => logger.error(err))
+      .finally(() => (initializing.current = false));
+  }, []);
+
+  const changePassword = useCallback(
+    async (password: string) => {
+      const session = loadSession();
+      if (!initClientState?.client || !session) {
+        return;
+      }
+
+      await initClientState.client.setPassword(
+        {
+          type: "m.login.password",
+          identifier: {
+            type: "m.id.user",
+            user: session.user_id,
+          },
+          user: session.user_id,
+          password: session.tempPassword,
+        },
+        password,
+      );
+
+      saveSession({ ...session, passwordlessUser: false });
+
+      setInitClientState({
+        client: initClientState.client,
+        passwordlessUser: false,
+      });
+    },
+    [initClientState?.client],
+  );
+
+  const setClient = useCallback(
+    (clientParams?: SetClientParams) => {
+      const oldClient = initClientState?.client;
+      const newClient = clientParams?.client;
+      if (oldClient && oldClient !== newClient) {
+        oldClient.stopClient();
+      }
+
+      if (clientParams) {
+        saveSession(clientParams.session);
+        setInitClientState({
+          client: clientParams.client,
+          passwordlessUser: clientParams.session.passwordlessUser,
+        });
+      } else {
+        clearSession();
+        setInitClientState(null);
+      }
+    },
+    [initClientState?.client],
+  );
+
+  const logout = useCallback(async () => {
+    const client = initClientState?.client;
+    if (!client) {
+      return;
+    }
+
+    await client.logout(true);
+    await client.clearStores();
+    clearSession();
+    setInitClientState(null);
+    history.push("/");
+    PosthogAnalytics.instance.setRegistrationType(RegistrationType.Guest);
+  }, [history, initClientState?.client]);
+
+  const { t } = useTranslation();
+
+  // To protect against multiple sessions writing to the same storage
+  // simultaneously, we send a broadcast message that shuts down all other
+  // running instances of the app. This isn't necessary if the app is running in
+  // a widget though, since then it'll be mostly stateless.
+  useEffect(() => {
+    if (!widget) loadChannel?.postMessage({});
+  }, []);
+
+  const [alreadyOpenedErr, setAlreadyOpenedErr] = useState<Error | undefined>(
+    undefined,
+  );
+  useEventTarget(
+    loadChannel,
+    "message",
+    useCallback(() => {
+      initClientState?.client.stopClient();
+      setAlreadyOpenedErr(translatedError("application_opened_another_tab", t));
+    }, [initClientState?.client, setAlreadyOpenedErr, t]),
+  );
+
+  const [isDisconnected, setIsDisconnected] = useState(false);
+
+  const state: ClientState | undefined = useMemo(() => {
+    if (alreadyOpenedErr) {
+      return { state: "error", error: alreadyOpenedErr };
+    }
+
+    if (initClientState === undefined) return undefined;
+
+    const authenticated =
+      initClientState === null
+        ? undefined
+        : {
+            client: initClientState.client,
+            isPasswordlessUser: initClientState.passwordlessUser,
+            changePassword,
+            logout,
+          };
+
+    return {
+      state: "valid",
+      authenticated,
+      setClient,
+      disconnected: isDisconnected,
+    };
+  }, [
+    alreadyOpenedErr,
+    changePassword,
+    initClientState,
+    logout,
+    setClient,
+    isDisconnected,
+  ]);
+
+  const onSync = useCallback(
+    (state: SyncState, _old: SyncState | null, data?: ISyncStateData) => {
+      setIsDisconnected(clientIsDisconnected(state, data));
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (!initClientState) {
+      return;
+    }
+
+    window.matrixclient = initClientState.client;
+    window.passwordlessUser = initClientState.passwordlessUser;
+
+    if (PosthogAnalytics.hasInstance())
+      PosthogAnalytics.instance.onLoginStatusChanged();
+
+    if (initClientState.client) {
+      initClientState.client.on(ClientEvent.Sync, onSync);
+    }
+
+    return (): void => {
+      if (initClientState.client) {
+        initClientState.client.removeListener(ClientEvent.Sync, onSync);
+      }
+    };
+  }, [initClientState, onSync]);
+
+  if (alreadyOpenedErr) {
+    return <ErrorView error={alreadyOpenedErr} />;
+  }
+
+  return (
+    <ClientContext.Provider value={state}>{children}</ClientContext.Provider>
+  );
+};
+
+type InitResult = {
+  client: MatrixClient;
+  passwordlessUser: boolean;
+};
+
+async function loadClient(): Promise<InitResult | null> {
+  if (widget) {
+    // We're inside a widget, so let's engage *matryoshka mode*
+    logger.log("Using a matryoshka client");
+    const client = await widget.client;
+    return {
+      client,
+      passwordlessUser: false,
+    };
+  } else {
+    // We're running as a standalone application
+    try {
+      const session = loadSession();
+      if (!session) {
+        logger.log("No session stored; continuing without a client");
+        return null;
+      }
+
+      logger.log("Using a standalone client");
+
+      /* eslint-disable camelcase */
+      const { user_id, device_id, access_token, passwordlessUser } = session;
+      const initClientParams: ICreateClientOpts = {
+        baseUrl: Config.defaultHomeserverUrl()!,
+        accessToken: access_token,
+        userId: user_id,
+        deviceId: device_id,
+        fallbackICEServerAllowed: fallbackICEServerAllowed,
+        livekitServiceURL: Config.get().livekit?.livekit_service_url,
+      };
+
+      try {
+        const client = await initClient(initClientParams, true);
+        return {
+          client,
+          passwordlessUser,
+        };
+      } catch (err) {
+        if (err instanceof CryptoStoreIntegrityError) {
+          // We can't use this session anymore, so let's log it out
+          try {
+            const client = await initClient(initClientParams, false); // Don't need the crypto store just to log out)
+            await client.logout(true);
+          } catch (err) {
+            logger.warn(
+              "The previous session was lost, and we couldn't log it out, " +
+                err +
+                "either",
+            );
+          }
+        }
+        throw err;
+      }
+      /* eslint-enable camelcase */
+    } catch (err) {
+      clearSession();
+      throw err;
+    }
+  }
+}
+
+export interface Session {
+  user_id: string;
+  device_id: string;
+  access_token: string;
+  passwordlessUser: boolean;
+  tempPassword?: string;
+}
+
+const clearSession = (): void => localStorage.removeItem("matrix-auth-store");
+const saveSession = (s: Session): void =>
+  localStorage.setItem("matrix-auth-store", JSON.stringify(s));
+const loadSession = (): Session | undefined => {
+  const data = localStorage.getItem("matrix-auth-store");
+  if (!data) {
+    return undefined;
+  }
+
+  return JSON.parse(data);
+};
+
+const clientIsDisconnected = (
+  syncState: SyncState,
+  syncData?: ISyncStateData,
+): boolean =>
+  syncState === "ERROR" && syncData?.error?.name === "ConnectionError";

src/ConferenceCallDebugger.js

@@ -1,437 +0,0 @@
-/*
-Copyright 2021 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import EventEmitter from "events";
-
-export class ConferenceCallDebugger extends EventEmitter {
-  constructor(client, groupCall) {
-    super();
-
-    this.client = client;
-    this.groupCall = groupCall;
-
-    this.debugState = {
-      users: new Map(),
-      calls: new Map(),
-    };
-
-    this.bufferedEvents = [];
-
-    client.on("event", this._onEvent);
-    groupCall.on("call", this._onCall);
-    groupCall.on("debugstate", this._onDebugStateChanged);
-    groupCall.on("entered", this._onEntered);
-    groupCall.on("left", this._onLeft);
-  }
-
-  _onEntered = () => {
-    const eventCount = this.bufferedEvents.length;
-
-    for (let i = 0; i < eventCount; i++) {
-      const event = this.bufferedEvents.pop();
-      this._onEvent(event);
-    }
-  };
-
-  _onLeft = () => {
-    this.bufferedEvents = [];
-    this.debugState = {
-      users: new Map(),
-      calls: new Map(),
-    };
-    this.emit("debug");
-  };
-
-  _onEvent = (event) => {
-    if (!this.groupCall.entered) {
-      this.bufferedEvents.push(event);
-      return;
-    }
-
-    const roomId = event.getRoomId();
-    const type = event.getType();
-
-    if (
-      roomId === this.groupCall.room.roomId &&
-      (type.startsWith("m.call.") ||
-        type === "me.robertlong.call.info" ||
-        type === "m.room.member")
-    ) {
-      const sender = event.getSender();
-      const { call_id } = event.getContent();
-
-      if (call_id) {
-        if (this.debugState.calls.has(call_id)) {
-          const callState = this.debugState.calls.get(call_id);
-          callState.events.push(event);
-        } else {
-          this.debugState.calls.set(call_id, {
-            state: "unknown",
-            events: [event],
-          });
-        }
-      }
-
-      if (this.debugState.users.has(sender)) {
-        const userState = this.debugState.users.get(sender);
-        userState.events.push(event);
-      } else {
-        this.debugState.users.set(sender, {
-          state: "unknown",
-          events: [event],
-        });
-      }
-
-      this.emit("debug");
-    }
-  };
-
-  _onDebugStateChanged = (userId, callId, state) => {
-    if (userId) {
-      const userState = this.debugState.users.get(userId);
-
-      if (userState) {
-        userState.state = state;
-      } else {
-        this.debugState.users.set(userId, {
-          state,
-          events: [],
-        });
-      }
-    }
-
-    if (callId) {
-      const callState = this.debugState.calls.get(callId);
-
-      if (callState) {
-        callState.state = state;
-      } else {
-        this.debugState.calls.set(callId, {
-          state,
-          events: [],
-        });
-      }
-    }
-
-    this.emit("debug");
-  };
-
-  _onCall = (call) => {
-    const peerConnection = call.peerConn;
-
-    if (!peerConnection) {
-      return;
-    }
-
-    const sendWebRTCInfoEvent = async (eventType) => {
-      const event = {
-        call_id: call.callId,
-        eventType,
-        iceConnectionState: peerConnection.iceConnectionState,
-        iceGatheringState: peerConnection.iceGatheringState,
-        signalingState: peerConnection.signalingState,
-        selectedCandidatePair: null,
-        localCandidate: null,
-        remoteCandidate: null,
-      };
-
-      // getStats doesn't support selectors in Firefox so get all stats by passing null.
-      // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/getStats#browser_compatibility
-      const stats = await peerConnection.getStats(null);
-
-      const statsArr = Array.from(stats.values());
-
-      // Matrix doesn't support floats so we convert time in seconds to ms
-      function secToMs(time) {
-        if (time === undefined) {
-          return undefined;
-        }
-
-        return Math.round(time * 1000);
-      }
-
-      function processTransportStats(transportStats) {
-        if (!transportStats) {
-          return undefined;
-        }
-
-        return {
-          packetsSent: transportStats.packetsSent,
-          packetsReceived: transportStats.packetsReceived,
-          bytesSent: transportStats.bytesSent,
-          bytesReceived: transportStats.bytesReceived,
-          iceRole: transportStats.iceRole,
-          iceState: transportStats.iceState,
-          dtlsState: transportStats.dtlsState,
-          dtlsCipher: transportStats.dtlsCipher,
-          tlsVersion: transportStats.tlsVersion,
-        };
-      }
-
-      function processCandidateStats(candidateStats) {
-        if (!candidateStats) {
-          return undefined;
-        }
-
-        // TODO: Figure out how to normalize ip and address across browsers
-        // networkType property excluded for privacy reasons:
-        // https://www.w3.org/TR/webrtc-stats/#sotd
-        return {
-          priority:
-            candidateStats.priority && candidateStats.priority.toString(),
-          candidateType: candidateStats.candidateType,
-          protocol: candidateStats.protocol,
-          address: !!candidateStats.address
-            ? candidateStats.address
-            : candidateStats.ip,
-          port: candidateStats.port,
-          url: candidateStats.url,
-          relayProtocol: candidateStats.relayProtocol,
-        };
-      }
-
-      function processCandidatePair(candidatePairStats) {
-        if (!candidatePairStats) {
-          return undefined;
-        }
-
-        const localCandidateStats = statsArr.find(
-          (stat) => stat.id === candidatePairStats.localCandidateId
-        );
-        event.localCandidate = processCandidateStats(localCandidateStats);
-
-        const remoteCandidateStats = statsArr.find(
-          (stat) => stat.id === candidatePairStats.remoteCandidateId
-        );
-        event.remoteCandidate = processCandidateStats(remoteCandidateStats);
-
-        const transportStats = statsArr.find(
-          (stat) => stat.id === candidatePairStats.transportId
-        );
-        event.transport = processTransportStats(transportStats);
-
-        return {
-          state: candidatePairStats.state,
-          bytesSent: candidatePairStats.bytesSent,
-          bytesReceived: candidatePairStats.bytesReceived,
-          requestsSent: candidatePairStats.requestsSent,
-          requestsReceived: candidatePairStats.requestsReceived,
-          responsesSent: candidatePairStats.responsesSent,
-          responsesReceived: candidatePairStats.responsesReceived,
-          currentRoundTripTime: secToMs(
-            candidatePairStats.currentRoundTripTime
-          ),
-          totalRoundTripTime: secToMs(candidatePairStats.totalRoundTripTime),
-        };
-      }
-
-      // Firefox uses the deprecated "selected" property for the nominated ice candidate.
-      const selectedCandidatePair = statsArr.find(
-        (stat) =>
-          stat.type === "candidate-pair" && (stat.selected || stat.nominated)
-      );
-
-      event.selectedCandidatePair = processCandidatePair(selectedCandidatePair);
-
-      function processCodecStats(codecStats) {
-        if (!codecStats) {
-          return undefined;
-        }
-
-        // Payload type enums and MIME types listed here:
-        // https://www.iana.org/assignments/rtp-parameters/rtp-parameters.xhtml
-        return {
-          mimeType: codecStats.mimeType,
-          clockRate: codecStats.clockRate,
-          payloadType: codecStats.payloadType,
-          channels: codecStats.channels,
-          sdpFmtpLine: codecStats.sdpFmtpLine,
-        };
-      }
-
-      function processRTPStreamStats(rtpStreamStats) {
-        const codecStats = statsArr.find(
-          (stat) => stat.id === rtpStreamStats.codecId
-        );
-        const codec = processCodecStats(codecStats);
-
-        return {
-          kind: rtpStreamStats.kind,
-          codec,
-        };
-      }
-
-      function processInboundRTPStats(inboundRTPStats) {
-        const rtpStreamStats = processRTPStreamStats(inboundRTPStats);
-
-        return {
-          ...rtpStreamStats,
-          decoderImplementation: inboundRTPStats.decoderImplementation,
-          bytesReceived: inboundRTPStats.bytesReceived,
-          packetsReceived: inboundRTPStats.packetsReceived,
-          packetsLost: inboundRTPStats.packetsLost,
-          jitter: secToMs(inboundRTPStats.jitter),
-          frameWidth: inboundRTPStats.frameWidth,
-          frameHeight: inboundRTPStats.frameHeight,
-          frameBitDepth: inboundRTPStats.frameBitDepth,
-          framesPerSecond:
-            inboundRTPStats.framesPerSecond &&
-            inboundRTPStats.framesPerSecond.toString(),
-          framesReceived: inboundRTPStats.framesReceived,
-          framesDecoded: inboundRTPStats.framesDecoded,
-          framesDropped: inboundRTPStats.framesDropped,
-          totalSamplesDecoded: inboundRTPStats.totalSamplesDecoded,
-          totalDecodeTime: secToMs(inboundRTPStats.totalDecodeTime),
-          totalProcessingDelay: secToMs(inboundRTPStats.totalProcessingDelay),
-        };
-      }
-
-      function processOutboundRTPStats(outboundRTPStats) {
-        const rtpStreamStats = processRTPStreamStats(outboundRTPStats);
-
-        return {
-          ...rtpStreamStats,
-          encoderImplementation: outboundRTPStats.encoderImplementation,
-          bytesSent: outboundRTPStats.bytesSent,
-          packetsSent: outboundRTPStats.packetsSent,
-          frameWidth: outboundRTPStats.frameWidth,
-          frameHeight: outboundRTPStats.frameHeight,
-          frameBitDepth: outboundRTPStats.frameBitDepth,
-          framesPerSecond:
-            outboundRTPStats.framesPerSecond &&
-            outboundRTPStats.framesPerSecond.toString(),
-          framesSent: outboundRTPStats.framesSent,
-          framesEncoded: outboundRTPStats.framesEncoded,
-          qualityLimitationReason: outboundRTPStats.qualityLimitationReason,
-          qualityLimitationResolutionChanges:
-            outboundRTPStats.qualityLimitationResolutionChanges,
-          totalEncodeTime: secToMs(outboundRTPStats.totalEncodeTime),
-          totalPacketSendDelay: secToMs(outboundRTPStats.totalPacketSendDelay),
-        };
-      }
-
-      function processRemoteInboundRTPStats(remoteInboundRTPStats) {
-        const rtpStreamStats = processRTPStreamStats(remoteInboundRTPStats);
-
-        return {
-          ...rtpStreamStats,
-          packetsReceived: remoteInboundRTPStats.packetsReceived,
-          packetsLost: remoteInboundRTPStats.packetsLost,
-          jitter: secToMs(remoteInboundRTPStats.jitter),
-          framesDropped: remoteInboundRTPStats.framesDropped,
-          roundTripTime: secToMs(remoteInboundRTPStats.roundTripTime),
-          totalRoundTripTime: secToMs(remoteInboundRTPStats.totalRoundTripTime),
-          fractionLost:
-            remoteInboundRTPStats.fractionLost !== undefined &&
-            remoteInboundRTPStats.fractionLost.toString(),
-          reportsReceived: remoteInboundRTPStats.reportsReceived,
-          roundTripTimeMeasurements:
-            remoteInboundRTPStats.roundTripTimeMeasurements,
-        };
-      }
-
-      function processRemoteOutboundRTPStats(remoteOutboundRTPStats) {
-        const rtpStreamStats = processRTPStreamStats(remoteOutboundRTPStats);
-
-        return {
-          ...rtpStreamStats,
-          encoderImplementation: remoteOutboundRTPStats.encoderImplementation,
-          bytesSent: remoteOutboundRTPStats.bytesSent,
-          packetsSent: remoteOutboundRTPStats.packetsSent,
-          roundTripTime: secToMs(remoteOutboundRTPStats.roundTripTime),
-          totalRoundTripTime: secToMs(
-            remoteOutboundRTPStats.totalRoundTripTime
-          ),
-          reportsSent: remoteOutboundRTPStats.reportsSent,
-          roundTripTimeMeasurements:
-            remoteOutboundRTPStats.roundTripTimeMeasurements,
-        };
-      }
-
-      event.inboundRTP = statsArr
-        .filter((stat) => stat.type === "inbound-rtp")
-        .map(processInboundRTPStats);
-
-      event.outboundRTP = statsArr
-        .filter((stat) => stat.type === "outbound-rtp")
-        .map(processOutboundRTPStats);
-
-      event.remoteInboundRTP = statsArr
-        .filter((stat) => stat.type === "remote-inbound-rtp")
-        .map(processRemoteInboundRTPStats);
-
-      event.remoteOutboundRTP = statsArr
-        .filter((stat) => stat.type === "remote-outbound-rtp")
-        .map(processRemoteOutboundRTPStats);
-
-      this.client.sendEvent(
-        this.groupCall.room.roomId,
-        "me.robertlong.call.info",
-        event
-      );
-    };
-
-    let statsTimeout;
-
-    const sendStats = () => {
-      if (
-        call.state === "ended" ||
-        peerConnection.connectionState === "closed"
-      ) {
-        clearTimeout(statsTimeout);
-        return;
-      }
-
-      sendWebRTCInfoEvent("stats");
-      statsTimeout = setTimeout(sendStats, 30 * 1000);
-    };
-
-    setTimeout(sendStats, 30 * 1000);
-
-    peerConnection.addEventListener("iceconnectionstatechange", () => {
-      sendWebRTCInfoEvent("iceconnectionstatechange");
-    });
-    peerConnection.addEventListener("icegatheringstatechange", () => {
-      sendWebRTCInfoEvent("icegatheringstatechange");
-    });
-    peerConnection.addEventListener("negotiationneeded", () => {
-      sendWebRTCInfoEvent("negotiationneeded");
-    });
-    peerConnection.addEventListener("track", () => {
-      sendWebRTCInfoEvent("track");
-    });
-    // NOTE: Not available on Firefox
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1561441
-    peerConnection.addEventListener(
-      "icecandidateerror",
-      ({ errorCode, url, errorText }) => {
-        this.client.sendEvent(
-          this.groupCall.room.roomId,
-          "me.robertlong.call.ice_error",
-          {
-            call_id: call.callId,
-            errorCode,
-            url,
-            errorText,
-          }
-        );
-      }
-    );
-    peerConnection.addEventListener("signalingstatechange", () => {
-      sendWebRTCInfoEvent("signalingstatechange");
-    });
-  };
-}

src/ConferenceCallManagerHooks.jsx

@@ -1,720 +0,0 @@
-/*
-Copyright 2021 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-  createContext,
-  useMemo,
-  useContext,
-} from "react";
-import matrix from "matrix-js-sdk/src/browser-index";
-import {
-  GroupCallIntent,
-  GroupCallType,
-} from "matrix-js-sdk/src/browser-index";
-import { useHistory } from "react-router-dom";
-
-export const defaultHomeserver =
-  import.meta.env.VITE_DEFAULT_HOMESERVER ||
-  `${window.location.protocol}//${window.location.host}`;
-
-export const defaultHomeserverHost = new URL(defaultHomeserver).host;
-
-const ClientContext = createContext();
-
-function waitForSync(client) {
-  return new Promise((resolve, reject) => {
-    const onSync = (state, _old, data) => {
-      if (state === "PREPARED") {
-        resolve();
-        client.removeListener("sync", onSync);
-      } else if (state === "ERROR") {
-        reject(data?.error);
-        client.removeListener("sync", onSync);
-      }
-    };
-    client.on("sync", onSync);
-  });
-}
-
-async function initClient(clientOptions, guest) {
-  const client = matrix.createClient(clientOptions);
-
-  if (guest) {
-    client.setGuest(true);
-  }
-
-  await client.startClient({
-    // dirty hack to reduce chance of gappy syncs
-    // should be fixed by spotting gaps and backpaginating
-    initialSyncLimit: 50,
-  });
-
-  await waitForSync(client);
-
-  return client;
-}
-
-export async function fetchGroupCall(
-  client,
-  roomIdOrAlias,
-  viaServers = undefined,
-  timeout = 5000
-) {
-  const { roomId } = await client.joinRoom(roomIdOrAlias, { viaServers });
-
-  return new Promise((resolve, reject) => {
-    let timeoutId;
-
-    function onGroupCallIncoming(groupCall) {
-      if (groupCall && groupCall.room.roomId === roomId) {
-        clearTimeout(timeoutId);
-        client.removeListener("GroupCall.incoming", onGroupCallIncoming);
-        resolve(groupCall);
-      }
-    }
-
-    const groupCall = client.getGroupCallForRoom(roomId);
-
-    if (groupCall) {
-      resolve(groupCall);
-    }
-
-    client.on("GroupCall.incoming", onGroupCallIncoming);
-
-    if (timeout) {
-      timeoutId = setTimeout(() => {
-        client.removeListener("GroupCall.incoming", onGroupCallIncoming);
-        reject(new Error("Fetching group call timed out."));
-      }, timeout);
-    }
-  });
-}
-
-export function ClientProvider({ children }) {
-  const history = useHistory();
-  const [
-    { loading, isAuthenticated, isPasswordlessUser, isGuest, client, userName },
-    setState,
-  ] = useState({
-    loading: true,
-    isAuthenticated: false,
-    isPasswordlessUser: false,
-    isGuest: false,
-    client: undefined,
-    userName: null,
-  });
-
-  useEffect(() => {
-    async function restore() {
-      try {
-        const authStore = localStorage.getItem("matrix-auth-store");
-
-        if (authStore) {
-          const {
-            user_id,
-            device_id,
-            access_token,
-            guest,
-            passwordlessUser,
-            tempPassword,
-          } = JSON.parse(authStore);
-
-          const client = await initClient(
-            {
-              baseUrl: defaultHomeserver,
-              accessToken: access_token,
-              userId: user_id,
-              deviceId: device_id,
-            },
-            guest
-          );
-
-          localStorage.setItem(
-            "matrix-auth-store",
-            JSON.stringify({
-              user_id,
-              device_id,
-              access_token,
-              guest,
-              passwordlessUser,
-              tempPassword,
-            })
-          );
-
-          return { client, guest, passwordlessUser };
-        }
-
-        return { client: undefined, guest: false };
-      } catch (err) {
-        localStorage.removeItem("matrix-auth-store");
-        throw err;
-      }
-    }
-
-    restore()
-      .then(({ client, guest, passwordlessUser }) => {
-        setState({
-          client,
-          loading: false,
-          isAuthenticated: !!client,
-          isPasswordlessUser: !!passwordlessUser,
-          isGuest: guest,
-          userName: client?.getUserIdLocalpart(),
-        });
-      })
-      .catch(() => {
-        setState({
-          client: undefined,
-          loading: false,
-          isAuthenticated: false,
-          isPasswordlessUser: false,
-          isGuest: false,
-          userName: null,
-        });
-      });
-  }, []);
-
-  const login = useCallback(async (homeserver, username, password) => {
-    try {
-      let loginHomeserverUrl = homeserver.trim();
-
-      if (!loginHomeserverUrl.includes("://")) {
-        loginHomeserverUrl = "https://" + loginHomeserverUrl;
-      }
-
-      try {
-        const wellKnownUrl = new URL(
-          "/.well-known/matrix/client",
-          window.location
-        );
-        const response = await fetch(wellKnownUrl);
-        const config = await response.json();
-
-        if (config["m.homeserver"]) {
-          loginHomeserverUrl = config["m.homeserver"];
-        }
-      } catch (error) {}
-
-      const registrationClient = matrix.createClient(loginHomeserverUrl);
-
-      const { user_id, device_id, access_token } =
-        await registrationClient.loginWithPassword(username, password);
-
-      const client = await initClient({
-        baseUrl: loginHomeserverUrl,
-        accessToken: access_token,
-        userId: user_id,
-        deviceId: device_id,
-      });
-
-      localStorage.setItem(
-        "matrix-auth-store",
-        JSON.stringify({ user_id, device_id, access_token })
-      );
-
-      setState({
-        client,
-        loading: false,
-        isAuthenticated: true,
-        isPasswordlessUser: false,
-        isGuest: false,
-        userName: client.getUserIdLocalpart(),
-      });
-    } catch (err) {
-      localStorage.removeItem("matrix-auth-store");
-      setState({
-        client: undefined,
-        loading: false,
-        isAuthenticated: false,
-        isPasswordlessUser: false,
-        isGuest: false,
-        userName: null,
-      });
-      throw err;
-    }
-  }, []);
-
-  const registerGuest = useCallback(async () => {
-    try {
-      const registrationClient = matrix.createClient(defaultHomeserver);
-
-      const { user_id, device_id, access_token } =
-        await registrationClient.registerGuest({});
-
-      const client = await initClient(
-        {
-          baseUrl: defaultHomeserver,
-          accessToken: access_token,
-          userId: user_id,
-          deviceId: device_id,
-        },
-        true
-      );
-
-      await client.setProfileInfo("displayname", {
-        displayname: `Guest ${client.getUserIdLocalpart()}`,
-      });
-
-      localStorage.setItem(
-        "matrix-auth-store",
-        JSON.stringify({ user_id, device_id, access_token, guest: true })
-      );
-
-      setState({
-        client,
-        loading: false,
-        isAuthenticated: true,
-        isGuest: true,
-        isPasswordlessUser: false,
-        userName: client.getUserIdLocalpart(),
-      });
-    } catch (err) {
-      localStorage.removeItem("matrix-auth-store");
-      setState({
-        client: undefined,
-        loading: false,
-        isAuthenticated: false,
-        isPasswordlessUser: false,
-        isGuest: false,
-        userName: null,
-      });
-      throw err;
-    }
-  }, []);
-
-  const register = useCallback(async (username, password, passwordlessUser) => {
-    try {
-      const registrationClient = matrix.createClient(defaultHomeserver);
-
-      const { user_id, device_id, access_token } =
-        await registrationClient.register(username, password, null, {
-          type: "m.login.dummy",
-        });
-
-      const client = await initClient({
-        baseUrl: defaultHomeserver,
-        accessToken: access_token,
-        userId: user_id,
-        deviceId: device_id,
-      });
-
-      const session = { user_id, device_id, access_token, passwordlessUser };
-
-      if (passwordlessUser) {
-        session.tempPassword = password;
-      }
-
-      localStorage.setItem("matrix-auth-store", JSON.stringify(session));
-
-      setState({
-        client,
-        loading: false,
-        isGuest: false,
-        isAuthenticated: true,
-        isPasswordlessUser: passwordlessUser,
-        userName: client.getUserIdLocalpart(),
-      });
-
-      return client;
-    } catch (err) {
-      localStorage.removeItem("matrix-auth-store");
-      setState({
-        client: undefined,
-        loading: false,
-        isGuest: false,
-        isAuthenticated: false,
-        isPasswordlessUser: false,
-        userName: null,
-      });
-      throw err;
-    }
-  }, []);
-
-  const changePassword = useCallback(
-    async (password) => {
-      const { tempPassword, passwordlessUser, ...existingSession } = JSON.parse(
-        localStorage.getItem("matrix-auth-store")
-      );
-
-      await client.setPassword(
-        {
-          type: "m.login.password",
-          identifier: {
-            type: "m.id.user",
-            user: existingSession.user_id,
-          },
-          user: existingSession.user_id,
-          password: tempPassword,
-        },
-        password
-      );
-
-      localStorage.setItem(
-        "matrix-auth-store",
-        JSON.stringify({
-          ...existingSession,
-          passwordlessUser: false,
-        })
-      );
-
-      setState({
-        client,
-        loading: false,
-        isGuest: false,
-        isAuthenticated: true,
-        isPasswordlessUser: false,
-        userName: client.getUserIdLocalpart(),
-      });
-    },
-    [client]
-  );
-
-  const logout = useCallback(() => {
-    localStorage.removeItem("matrix-auth-store");
-    window.location = "/";
-  }, [history]);
-
-  const context = useMemo(
-    () => ({
-      loading,
-      isAuthenticated,
-      isPasswordlessUser,
-      isGuest,
-      client,
-      login,
-      registerGuest,
-      register,
-      changePassword,
-      logout,
-      userName,
-    }),
-    [
-      loading,
-      isAuthenticated,
-      isPasswordlessUser,
-      isGuest,
-      client,
-      login,
-      registerGuest,
-      register,
-      changePassword,
-      logout,
-      userName,
-    ]
-  );
-
-  return (
-    <ClientContext.Provider value={context}>{children}</ClientContext.Provider>
-  );
-}
-
-export function useClient() {
-  return useContext(ClientContext);
-}
-
-export function roomAliasFromRoomName(roomName) {
-  return roomName
-    .trim()
-    .replace(/\s/g, "-")
-    .replace(/[^\w-]/g, "")
-    .toLowerCase();
-}
-
-export async function createRoom(client, name) {
-  const { room_id, room_alias } = await client.createRoom({
-    visibility: "private",
-    preset: "public_chat",
-    name,
-    room_alias_name: roomAliasFromRoomName(name),
-    power_level_content_override: {
-      invite: 100,
-      kick: 100,
-      ban: 100,
-      redact: 50,
-      state_default: 0,
-      events_default: 0,
-      users_default: 0,
-      events: {
-        "m.room.power_levels": 100,
-        "m.room.history_visibility": 100,
-        "m.room.tombstone": 100,
-        "m.room.encryption": 100,
-        "m.room.name": 50,
-        "m.room.message": 0,
-        "m.room.encrypted": 50,
-        "m.sticker": 50,
-        "org.matrix.msc3401.call.member": 0,
-      },
-      users: {
-        [client.getUserId()]: 100,
-      },
-    },
-  });
-
-  await client.setGuestAccess(room_id, {
-    allowJoin: true,
-    allowRead: true,
-  });
-
-  await client.createGroupCall(
-    room_id,
-    GroupCallType.Video,
-    GroupCallIntent.Prompt
-  );
-
-  return room_alias || room_id;
-}
-
-export function useLoadGroupCall(client, roomId, viaServers) {
-  const [state, setState] = useState({
-    loading: true,
-    error: undefined,
-    groupCall: undefined,
-  });
-
-  useEffect(() => {
-    setState({ loading: true });
-    fetchGroupCall(client, roomId, viaServers, 30000)
-      .then((groupCall) => setState({ loading: false, groupCall }))
-      .catch((error) => setState({ loading: false, error }));
-  }, [client, roomId]);
-
-  return state;
-}
-
-const tsCache = {};
-
-function getLastTs(client, r) {
-  if (tsCache[r.roomId]) {
-    return tsCache[r.roomId];
-  }
-
-  if (!r || !r.timeline) {
-    const ts = Number.MAX_SAFE_INTEGER;
-    tsCache[r.roomId] = ts;
-    return ts;
-  }
-
-  const myUserId = client.getUserId();
-
-  if (r.getMyMembership() !== "join") {
-    const membershipEvent = r.currentState.getStateEvents(
-      "m.room.member",
-      myUserId
-    );
-
-    if (membershipEvent && !Array.isArray(membershipEvent)) {
-      const ts = membershipEvent.getTs();
-      tsCache[r.roomId] = ts;
-      return ts;
-    }
-  }
-
-  for (let i = r.timeline.length - 1; i >= 0; --i) {
-    const ev = r.timeline[i];
-    const ts = ev.getTs();
-
-    if (ts) {
-      tsCache[r.roomId] = ts;
-      return ts;
-    }
-  }
-
-  const ts = Number.MAX_SAFE_INTEGER;
-  tsCache[r.roomId] = ts;
-  return ts;
-}
-
-function sortRooms(client, rooms) {
-  return rooms.sort((a, b) => {
-    return getLastTs(client, b) - getLastTs(client, a);
-  });
-}
-
-export function useGroupCallRooms(client) {
-  const [rooms, setRooms] = useState([]);
-
-  useEffect(() => {
-    function updateRooms() {
-      const groupCalls = client.groupCallEventHandler.groupCalls.values();
-      const rooms = Array.from(groupCalls).map((groupCall) => groupCall.room);
-      const sortedRooms = sortRooms(client, rooms);
-      const items = sortedRooms.map((room) => {
-        const groupCall = client.getGroupCallForRoom(room.roomId);
-
-        return {
-          roomId: room.getCanonicalAlias() || room.roomId,
-          roomName: room.name,
-          avatarUrl: null,
-          room,
-          groupCall,
-          participants: [...groupCall.participants],
-        };
-      });
-      setRooms(items);
-    }
-
-    updateRooms();
-
-    client.on("GroupCall.incoming", updateRooms);
-    client.on("GroupCall.participants", updateRooms);
-
-    return () => {
-      client.removeListener("GroupCall.incoming", updateRooms);
-      client.removeListener("GroupCall.participants", updateRooms);
-    };
-  }, []);
-
-  return rooms;
-}
-
-export function usePublicRooms(client, publicSpaceRoomId, maxRooms = 50) {
-  const [rooms, setRooms] = useState([]);
-
-  useEffect(() => {
-    if (publicSpaceRoomId) {
-      client.getRoomHierarchy(publicSpaceRoomId, maxRooms).then(({ rooms }) => {
-        const filteredRooms = rooms
-          .filter((room) => room.room_type !== "m.space")
-          .map((room) => ({
-            roomId: room.room_alias || room.room_id,
-            roomName: room.name,
-            avatarUrl: null,
-            room,
-            participants: [],
-          }));
-
-        setRooms(filteredRooms);
-      });
-    } else {
-      setRooms([]);
-    }
-  }, [publicSpaceRoomId]);
-
-  return rooms;
-}
-
-export function getRoomUrl(roomId) {
-  if (roomId.startsWith("#")) {
-    const [localPart, host] = roomId.replace("#", "").split(":");
-
-    if (host !== defaultHomeserverHost) {
-      return `${window.location.host}/room/${roomId}`;
-    } else {
-      return `${window.location.host}/${localPart}`;
-    }
-  } else {
-    return `${window.location.host}/room/${roomId}`;
-  }
-}
-
-export function getAvatarUrl(client, mxcUrl, avatarSize = 96) {
-  const width = Math.floor(avatarSize * window.devicePixelRatio);
-  const height = Math.floor(avatarSize * window.devicePixelRatio);
-  return mxcUrl && client.mxcUrlToHttp(mxcUrl, width, height, "crop");
-}
-
-export function useProfile(client) {
-  const [{ loading, displayName, avatarUrl, error, success }, setState] =
-    useState(() => {
-      const user = client?.getUser(client.getUserId());
-
-      return {
-        success: false,
-        loading: false,
-        displayName: user?.displayName,
-        avatarUrl: user && client && getAvatarUrl(client, user.avatarUrl),
-        error: null,
-      };
-    });
-
-  useEffect(() => {
-    const onChangeUser = (_event, { displayName, avatarUrl }) => {
-      setState({
-        success: false,
-        loading: false,
-        displayName,
-        avatarUrl: getAvatarUrl(client, avatarUrl),
-        error: null,
-      });
-    };
-
-    let user;
-
-    if (client) {
-      const userId = client.getUserId();
-      user = client.getUser(userId);
-      user.on("User.displayName", onChangeUser);
-      user.on("User.avatarUrl", onChangeUser);
-    }
-
-    return () => {
-      if (user) {
-        user.removeListener("User.displayName", onChangeUser);
-        user.removeListener("User.avatarUrl", onChangeUser);
-      }
-    };
-  }, [client]);
-
-  const saveProfile = useCallback(
-    async ({ displayName, avatar }) => {
-      if (client) {
-        setState((prev) => ({
-          ...prev,
-          loading: true,
-          error: null,
-          success: false,
-        }));
-
-        try {
-          await client.setDisplayName(displayName);
-
-          let mxcAvatarUrl;
-
-          if (avatar) {
-            mxcAvatarUrl = await client.uploadContent(avatar);
-            await client.setAvatarUrl(mxcAvatarUrl);
-          }
-
-          setState((prev) => ({
-            ...prev,
-            displayName,
-            avatarUrl: mxcAvatarUrl
-              ? getAvatarUrl(client, mxcAvatarUrl)
-              : prev.avatarUrl,
-            loading: false,
-            success: true,
-          }));
-        } catch (error) {
-          setState((prev) => ({
-            ...prev,
-            loading: false,
-            error,
-            success: false,
-          }));
-        }
-      } else {
-        console.error("Client not initialized before calling saveProfile");
-      }
-    },
-    [client]
-  );
-
-  return { loading, error, displayName, avatarUrl, saveProfile, success };
-}

src/DisconnectedBanner.module.css

@@ -0,0 +1,27 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.banner {
+  position: absolute;
+  padding: 29px;
+  background-color: var(--cpd-color-bg-subtle-primary);
+  vertical-align: middle;
+  font-size: var(--font-size-body);
+  text-align: center;
+  z-index: 1;
+  top: 76px;
+  width: calc(100% - 58px);
+}

src/DisconnectedBanner.tsx

@@ -0,0 +1,53 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import classNames from "classnames";
+import { FC, HTMLAttributes, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
+import styles from "./DisconnectedBanner.module.css";
+import { ValidClientState, useClientState } from "./ClientContext";
+
+interface Props extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export const DisconnectedBanner: FC<Props> = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const { t } = useTranslation();
+  const clientState = useClientState();
+  let shouldShowBanner = false;
+
+  if (clientState?.state === "valid") {
+    const validClientState = clientState as ValidClientState;
+    shouldShowBanner = validClientState.disconnected;
+  }
+
+  return (
+    <>
+      {shouldShowBanner && (
+        <div className={classNames(styles.banner, className)} {...rest}>
+          {children}
+          {t("disconnected_banner")}
+        </div>
+      )}
+    </>
+  );
+};

src/Facepile.jsx

@@ -1,38 +0,0 @@
-import React from "react";
-import styles from "./Facepile.module.css";
-import classNames from "classnames";
-import { Avatar } from "./Avatar";
-import { getAvatarUrl } from "./ConferenceCallManagerHooks";
-
-export function Facepile({ className, client, participants, ...rest }) {
-  return (
-    <div
-      className={classNames(styles.facepile, className)}
-      title={participants.map((member) => member.name).join(", ")}
-      {...rest}
-    >
-      {participants.slice(0, 3).map((member, i) => {
-        const avatarUrl = member.user?.avatarUrl;
-        return (
-          <Avatar
-            key={member.userId}
-            size="xs"
-            src={avatarUrl && getAvatarUrl(client, avatarUrl, 22)}
-            fallback={member.name.slice(0, 1).toUpperCase()}
-            className={styles.avatar}
-            style={{ left: i * 22 }}
-          />
-        );
-      })}
-      {participants.length > 3 && (
-        <Avatar
-          key="additional"
-          size="xs"
-          fallback={`+${participants.length - 3}`}
-          className={styles.avatar}
-          style={{ left: 3 * 22 }}
-        />
-      )}
-    </div>
-  );
-}

src/Facepile.module.css

@@ -1,11 +0,0 @@
-.facepile {
-  width: 100%;
-  height: 24px;
-  position: relative;
-}
-
-.facepile .avatar {
-  position: absolute;
-  top: 0;
-  border: 1px solid var(--bgColor2);
-}

src/FullScreenView.jsx

@@ -1,68 +0,0 @@
-import React, { useCallback, useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import styles from "./FullScreenView.module.css";
-import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
-import classNames from "classnames";
-import { LinkButton, Button } from "./button";
-
-export function FullScreenView({ className, children }) {
-  return (
-    <div className={classNames(styles.page, className)}>
-      <Header>
-        <LeftNav>
-          <HeaderLogo />
-        </LeftNav>
-        <RightNav />
-      </Header>
-      <div className={styles.container}>
-        <div className={styles.content}>{children}</div>
-      </div>
-    </div>
-  );
-}
-
-export function ErrorView({ error }) {
-  const location = useLocation();
-
-  useEffect(() => {
-    console.error(error);
-  }, [error]);
-
-  const onReload = useCallback(() => {
-    window.location = "/";
-  }, []);
-
-  return (
-    <FullScreenView>
-      <h1>Error</h1>
-      <p>{error.message}</p>
-      {location.pathname === "/" ? (
-        <Button
-          size="lg"
-          variant="default"
-          className={styles.homeLink}
-          onPress={onReload}
-        >
-          Return to home screen
-        </Button>
-      ) : (
-        <LinkButton
-          size="lg"
-          variant="default"
-          className={styles.homeLink}
-          to="/"
-        >
-          Return to home screen
-        </LinkButton>
-      )}
-    </FullScreenView>
-  );
-}
-
-export function LoadingView() {
-  return (
-    <FullScreenView>
-      <h1>Loading...</h1>
-    </FullScreenView>
-  );
-}

src/FullScreenView.module.css

@@ -1,3 +1,19 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 .page {
   position: relative;
   display: flex;
@@ -36,6 +52,12 @@
   margin-bottom: 0;
 }
 
-.homeLink {
+/* Make the buttons the same width */
+.wideButton {
   width: 291px;
 }
+
+/* Fixed height to avoid content jumping around*/
+.sendLogsSection {
+  height: 50px;
+}