diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 98e6e4c8..067c5246 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -43,6 +43,29 @@ module.exports = { // To encourage good usage of RxJS: "rxjs/no-exposed-subjects": "error", "rxjs/finnish": ["error", { names: { "^this$": false } }], + "no-restricted-imports": [ + "error", + { + paths: ["matrix-widget-api", "matrix-js-sdk"].flatMap((lib) => + ["src", "src/", "src/index", "lib", "lib/", "lib/index"] + .map((path) => `${lib}/${path}`) + .map((name) => ({ name, message: `Please use ${lib} instead` })), + ), + patterns: [ + ...["matrix-widget-api"].map((lib) => ({ + group: ["src", "src/", "src/**", "lib", "lib/", "lib/**"].map( + (path) => `${lib}/${path}`, + ), + message: `Please use ${lib} instead`, + })), + // XXX: We use /lib in lots of places, so allow for now. + ...["matrix-js-sdk"].map((lib) => ({ + group: ["src", "src/", "src/**"].map((path) => `${lib}/${path}`), + message: `Please use ${lib} instead`, + })), + ], + }, + ], }, overrides: [ { diff --git a/.github/workflows/blocked.yaml b/.github/workflows/blocked.yaml index f3c99b3e..12a4b020 100644 --- a/.github/workflows/blocked.yaml +++ b/.github/workflows/blocked.yaml @@ -10,7 +10,7 @@ jobs: pull-requests: read steps: - name: Add notice - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7 + uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7 if: contains(github.event.pull_request.labels.*.name, 'X-Blocked') with: script: | diff --git a/.github/workflows/build-and-publish-docker.yaml b/.github/workflows/build-and-publish-docker.yaml index 3ebb594a..a50fca48 100644 --- a/.github/workflows/build-and-publish-docker.yaml +++ b/.github/workflows/build-and-publish-docker.yaml @@ -23,7 +23,7 @@ jobs: packages: write steps: - name: Check it out - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 + uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4 - name: 📥 Download artifact uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4 @@ -34,7 +34,7 @@ jobs: path: dist - name: Log in to container registry - uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3.4.0 + uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef # v3.6.0 with: registry: ${{ env.REGISTRY }} username: ${{ github.actor }} @@ -42,7 +42,7 @@ jobs: - name: Extract metadata (tags, labels) for Docker id: meta - uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5.7.0 + uses: docker/metadata-action@c1e51972afc2121e065aed6d45c65596fe445f3f # v5.8.0 with: images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} tags: ${{ inputs.docker_tags}} @@ -50,10 +50,10 @@ jobs: org.opencontainers.image.licenses=AGPL-3.0-only OR LicenseRef-Element-Commercial - name: Set up Docker Buildx - uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3.10.0 + uses: docker/setup-buildx-action@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3.11.1 - name: Build and push Docker image - uses: docker/build-push-action@14487ce63c7a62a4a324b0bfb37086795e31c6c1 # v6.16.0 + uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6.18.0 with: context: . platforms: linux/amd64,linux/arm64 diff --git a/.github/workflows/build-element-call.yaml b/.github/workflows/build-element-call.yaml index 49542e5d..214c78d6 100644 --- a/.github/workflows/build-element-call.yaml +++ b/.github/workflows/build-element-call.yaml @@ -32,7 +32,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout code - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 + uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4 - name: Enable Corepack run: corepack enable - name: Yarn cache diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml index 0efbcf5a..e0271231 100644 --- a/.github/workflows/lint.yaml +++ b/.github/workflows/lint.yaml @@ -7,7 +7,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout code - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 + uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4 - name: Enable Corepack run: corepack enable - name: Yarn cache diff --git a/.github/workflows/publish-embedded-packages.yaml b/.github/workflows/publish-embedded-packages.yaml index c309c91c..546191ab 100644 --- a/.github/workflows/publish-embedded-packages.yaml +++ b/.github/workflows/publish-embedded-packages.yaml @@ -44,6 +44,8 @@ jobs: run: | if [[ "${VERSION}" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then echo "TAG=latest" >> "$GITHUB_OUTPUT" + elif [[ "${VERSION}" =~ ^v[0-9]+\.[0-9]+\.[0-9]+\-rc\.[0-9]+$ ]]; then + echo "TAG=rc" >> "$GITHUB_OUTPUT" else echo "TAG=other" >> "$GITHUB_OUTPUT" fi @@ -83,7 +85,7 @@ jobs: run: find ${{ env.FILENAME_PREFIX }} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${{ env.FILENAME_PREFIX }}.sha256 - name: Upload if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }} - uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # v2 + uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2 with: files: | ${{ env.FILENAME_PREFIX }}.tar.gz @@ -98,10 +100,10 @@ jobs: ARTIFACT_VERSION: ${{ steps.artifact_version.outputs.ARTIFACT_VERSION }} permissions: contents: read - id-token: write # required for the provenance flag on npm publish + id-token: write # Allow npm to authenticate as a trusted publisher steps: - name: Checkout - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 + uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4 - name: 📥 Download built element-call artifact uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4 @@ -124,8 +126,6 @@ jobs: npm version ${{ needs.versioning.outputs.PREFIXED_VERSION }} --no-git-tag-version echo "ARTIFACT_VERSION=$(jq '.version' --raw-output package.json)" >> "$GITHUB_ENV" npm publish --provenance --access public --tag ${{ needs.versioning.outputs.TAG }} ${{ needs.versioning.outputs.DRY_RUN == 'true' && '--dry-run' || '' }} - env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_RELEASE_TOKEN }} - id: artifact_version name: Output artifact version @@ -142,7 +142,7 @@ jobs: contents: read steps: - name: Checkout - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 + uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4 - name: 📥 Download built element-call artifact uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4 @@ -163,6 +163,8 @@ jobs: run: | if [[ "${{ needs.versioning.outputs.TAG }}" == "latest" ]]; then echo "ARTIFACT_VERSION=${{ needs.versioning.outputs.UNPREFIXED_VERSION }}" >> "$GITHUB_ENV" + elif [[ "${{ needs.versioning.outputs.TAG }}" == "rc" ]]; then + echo "ARTIFACT_VERSION=${{ needs.versioning.outputs.UNPREFIXED_VERSION }}" >> "$GITHUB_ENV" else echo "ARTIFACT_VERSION=${{ needs.versioning.outputs.UNPREFIXED_VERSION }}-SNAPSHOT" >> "$GITHUB_ENV" fi @@ -195,7 +197,7 @@ jobs: contents: read steps: - name: Checkout - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 + uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4 with: path: element-call @@ -208,7 +210,7 @@ jobs: path: element-call/embedded/ios/Sources/dist - name: Checkout element-call-swift - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 + uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4 with: repository: element-hq/element-call-swift path: element-call-swift @@ -260,7 +262,7 @@ jobs: echo "iOS: ${{ needs.publish_ios.outputs.ARTIFACT_VERSION }}" - name: Add release notes if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }} - uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # v2 + uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2 with: append_body: true body: | diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml index 86169e16..34835635 100644 --- a/.github/workflows/publish.yaml +++ b/.github/workflows/publish.yaml @@ -42,7 +42,7 @@ jobs: - name: Create Checksum run: find ${{ env.FILENAME_PREFIX }} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${{ env.FILENAME_PREFIX }}.sha256 - name: Upload - uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # v2 + uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2 with: files: | ${{ env.FILENAME_PREFIX }}.tar.gz @@ -68,7 +68,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Add release note - uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # v2 + uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2 with: append_body: true body: | diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml index f532cda6..54035ea4 100644 --- a/.github/workflows/test.yaml +++ b/.github/workflows/test.yaml @@ -9,7 +9,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout code - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 + uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4 - name: Enable Corepack run: corepack enable - name: Yarn cache @@ -22,7 +22,7 @@ jobs: - name: Vitest run: "yarn run test:coverage" - name: Upload to codecov - uses: codecov/codecov-action@18283e04ce6e62d37312384ff67231eb8fd56d24 # v5 + uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 # v5 env: CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} with: @@ -30,10 +30,10 @@ jobs: fail_ci_if_error: true playwright: name: Run end-to-end tests - timeout-minutes: 30 + timeout-minutes: 60 runs-on: ubuntu-latest steps: - - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 + - uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4 - name: Enable Corepack run: corepack enable - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4 diff --git a/.github/workflows/translations-download.yaml b/.github/workflows/translations-download.yaml index fc4fbf40..39e68ec3 100644 --- a/.github/workflows/translations-download.yaml +++ b/.github/workflows/translations-download.yaml @@ -13,7 +13,7 @@ jobs: steps: - name: Checkout the code - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 + uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4 - name: Enable Corepack run: corepack enable diff --git a/.github/workflows/translations-upload.yaml b/.github/workflows/translations-upload.yaml index bab7a0d2..e7c3ee3d 100644 --- a/.github/workflows/translations-upload.yaml +++ b/.github/workflows/translations-upload.yaml @@ -14,7 +14,7 @@ jobs: steps: - name: Checkout the code - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 + uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4 - name: Upload uses: localazy/upload@27e6b5c0fddf4551596b42226b1c24124335d24a # v1 diff --git a/.gitignore b/.gitignore index 3e9016a6..5751844a 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,7 @@ dist-ssr .idea/ public/config.json backend/synapse_tmp/* +backend/synapse_tmp_othersite/* /coverage config.json @@ -28,4 +29,4 @@ yarn-error.log /test-results/ /playwright-report/ /blob-report/ -/playwright/.cache/ \ No newline at end of file +/playwright/.cache/ diff --git a/.node-version b/.node-version index 2bd5a0a9..a45fd52c 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -22 +24 diff --git a/README.md b/README.md index 8ca7fa96..73505a8d 100644 --- a/README.md +++ b/README.md @@ -206,22 +206,22 @@ See also: ### Backend A docker compose file `dev-backend-docker-compose.yml` is provided to start the -whole stack of components which is required for a local development environment: +whole stack of components which is required for a local development environment +including federation: -- Minimum Synapse Setup (servername: `synapse.m.localhost`) +- Minimum Synapse Setup (servernameis: `synapse.m.localhost`, `synapse.othersite.m.localhost`) - MatrixRTC Authorization Service (Note requires Federation API and hence a TLS reverse proxy) -- Minimum LiveKit SFU Setup using dev defaults for config -- Redis db for completeness +- Minimum LiveKit SFU setup using dev defaults for config - Minimum `localhost` Certificate Authority (CA) for Transport Layer Security (TLS) - - Hostnames: `m.localhost`, `*.m.localhost` + - Hostnames: `m.localhost`, `*.m.localhost`, `*.othersite.m.localhost` - Add [./backend/dev_tls_local-ca.crt](./backend/dev_tls_local-ca.crt) to your web browsers trusted certificates - Minimum TLS reverse proxy for - - Synapse homeserver: `synapse.m.localhost` - - MatrixRTC backend: `matrix-rtc.m.localhost` + - Synapse homeserver: `synapse.m.localhost` and `synapse.othersite.m.localhost` + - MatrixRTC backend: `matrix-rtc.m.localhost` and `matrix-rtc.othersite.m.localhost` - Local Element Call development `call.m.localhost` via `yarn dev --host ` - - Element Web `app.m.localhost` - - Note certificates will expire on Thu, 03 May 2035 10:32:02 GMT + - Element Web `app.m.localhost` and `app.othersite.m.localhost` + - Note certificates will expire on Thr, 20 September 2035 14:27:35 CEST 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._** diff --git a/backend/dev_homeserver-othersite.yaml b/backend/dev_homeserver-othersite.yaml new file mode 100644 index 00000000..947e33cd --- /dev/null +++ b/backend/dev_homeserver-othersite.yaml @@ -0,0 +1,64 @@ +server_name: "synapse.othersite.m.localhost" +public_baseurl: https://synapse.othersite.m.localhost/ + +pid_file: /data/homeserver.pid + +listeners: + - port: 18008 + tls: false + type: http + x_forwarded: true + resources: + - names: [client, federation, openid] + compress: false + +database: + name: sqlite3 + args: + database: /data/homeserver.db + +media_store_path: /data/media_store +signing_key_path: "/data/SERVERNAME.signing.key" + +# Due to custom TLS certificate with domains +# - m.localhost, localhost +# - *.m.localhost +# - *.othersite.m.localhost +# we disable certificate verification to allow for federation +# WARNING: DO NOT USE IN PRODUCTION!!! +federation_verify_certificates: false +ip_range_blacklist: [] +trusted_key_servers: + - server_name: "synapse.m.localhost" + accept_keys_insecurely: true + +experimental_features: + # MSC3266: Room summary API. Used for knocking over federation + msc3266_enabled: true + # MSC4222 needed for syncv2 state_after. This allow clients to + # correctly track the state of the room. + msc4222_enabled: true + +# The maximum allowed duration by which sent events can be delayed, as +# per MSC4140. Must be a positive value if set. Defaults to no +# duration (null), which disallows sending delayed events. +max_event_delay_duration: 24h + +# Required for Element Call in Single Page Mode due to on-the-fly user registration +enable_registration: true +enable_registration_without_verification: true + +report_stats: false +serve_server_wellknown: true + +# Ratelimiting settings for client actions (registration, login, messaging). +# +# Each ratelimiting configuration is made of two parameters: +# - per_second: number of requests a client can send per second. +# - burst_count: number of requests a client can send before being throttled. + +rc_message: + # This needs to match at least the heart-beat frequency plus a bit of headroom + # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2s + per_second: 0.5 + burst_count: 30 diff --git a/backend/dev_homeserver.yaml b/backend/dev_homeserver.yaml index eab4e698..fe89d95a 100644 --- a/backend/dev_homeserver.yaml +++ b/backend/dev_homeserver.yaml @@ -19,8 +19,18 @@ database: media_store_path: /data/media_store signing_key_path: "/data/SERVERNAME.signing.key" + +# Due to custom TLS certificate with domains +# - m.localhost, localhost +# - *.m.localhost +# - *.othersite.m.localhost +# we disable certificate verification to allow for federation. +# WARNING: DO NOT USE IN PRODUCTION!!! +federation_verify_certificates: false +ip_range_blacklist: [] trusted_key_servers: - - server_name: "matrix.org" + - server_name: "synapse.othersite.m.localhost" + accept_keys_insecurely: true experimental_features: # MSC3266: Room summary API. Used for knocking over federation @@ -28,12 +38,21 @@ experimental_features: # MSC4222 needed for syncv2 state_after. This allow clients to # correctly track the state of the room. msc4222_enabled: true + # sticky events for matrixRTC user state + msc4354_enabled: true # The maximum allowed duration by which sent events can be delayed, as # per MSC4140. Must be a positive value if set. Defaults to no # duration (null), which disallows sending delayed events. max_event_delay_duration: 24h +# Required for Element Call in Single Page Mode due to on-the-fly user registration +enable_registration: true +enable_registration_without_verification: true + +report_stats: false +serve_server_wellknown: true + # Ratelimiting settings for client actions (registration, login, messaging). # # Each ratelimiting configuration is made of two parameters: @@ -45,10 +64,3 @@ rc_message: # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2s per_second: 0.5 burst_count: 30 - -# Required for Element Call in Single Page Mode due to on-the-fly user registration -enable_registration: true -enable_registration_without_verification: true - -report_stats: false -serve_server_wellknown: true diff --git a/backend/dev_livekit-othersite.yaml b/backend/dev_livekit-othersite.yaml new file mode 100644 index 00000000..0ae98c24 --- /dev/null +++ b/backend/dev_livekit-othersite.yaml @@ -0,0 +1,20 @@ +port: 17880 +bind_addresses: + - "0.0.0.0" +rtc: + tcp_port: 17881 + port_range_start: 50300 + port_range_end: 50400 + use_external_ip: false +turn: + enabled: false + domain: localhost + cert_file: "" + key_file: "" + tls_port: 5349 + udp_port: 443 + external_tls: true +keys: + devkey: secret +room: + auto_create: false diff --git a/backend/dev_livekit.yaml b/backend/dev_livekit.yaml index f0c5b3a4..157e4d04 100644 --- a/backend/dev_livekit.yaml +++ b/backend/dev_livekit.yaml @@ -6,11 +6,6 @@ rtc: 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 diff --git a/backend/dev_nginx.conf b/backend/dev_nginx.conf index a29b06d7..be015060 100644 --- a/backend/dev_nginx.conf +++ b/backend/dev_nginx.conf @@ -1,4 +1,5 @@ # Synapse reverse proxy including .well-known/matrix/client +# domain synapse.m.localhost server { listen 80; listen [::]:80; @@ -26,14 +27,53 @@ server { # This is also required for development environment. # Reason: the lk-jwt-service uses the federation API for the openid token # verification, which requires TLS - location / { - proxy_pass "http://homeserver:8008"; + location ~ ^(/_matrix|/_synapse/client) { + proxy_pass "http://homeserver:8008"; proxy_http_version 1.1; - proxy_set_header Upgrade $http_upgrade; - proxy_set_header Connection "upgrade"; - proxy_set_header Host $host; proxy_set_header X-Forwarded-For $remote_addr; proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header Host $host; + } + + error_page 500 502 503 504 /50x.html; + +} + +# Synapse reverse proxy including .well-known/matrix/client +# domain synapse.othersite.m.localhost +server { + listen 80; + listen [::]:80; + listen 443 ssl; + listen 8448 ssl; + listen [::]:443 ssl; + listen [::]:8448 ssl; + server_name synapse.othersite.m.localhost; + ssl_certificate /root/ssl/cert.pem; + ssl_certificate_key /root/ssl/key.pem; + + # well-known config adding rtc_foci backend + # Note well-known is currently not effective due to: + # https://spec.matrix.org/v1.12/client-server-api/#well-known-uri the spec + # says it must be at https://$server_name/... (implied port 443) Hence, we + # currently rely for local development environment on deprecated config.json + # setting for livekit_service_url + location /.well-known/matrix/client { + add_header Access-Control-Allow-Origin *; + return 200 '{"m.homeserver": {"base_url": "https://synapse.othersite.m.localhost"}, "org.matrix.msc4143.rtc_foci": [{"type": "livekit", "livekit_service_url": "https://matrix-rtc.othersite.m.localhost/livekit/jwt"}]}'; + default_type application/json; + } + + # Reverse proxy for Matrix Synapse Homeserver + # This is also required for development environment. + # Reason: the lk-jwt-service uses the federation API for the openid token + # verification, which requires TLS + location ~ ^(/_matrix|/_synapse/client) { + proxy_pass "http://homeserver-1:18008"; + proxy_http_version 1.1; + proxy_set_header X-Forwarded-For $remote_addr; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header Host $host; } error_page 500 502 503 504 /50x.html; @@ -41,6 +81,7 @@ server { } # MatrixRTC reverse proxy +# domain matrix-rtc.m.localhost # - MatrixRTC Authorization Service # - LiveKit SFU websocket signaling connection upstream jwt-auth-services { @@ -49,16 +90,14 @@ upstream jwt-auth-services { } server { - listen 80; - listen [::]:80; listen 443 ssl; listen [::]:443 ssl; - listen 8448 ssl; - listen [::]:8448 ssl; server_name matrix-rtc.m.localhost; ssl_certificate /root/ssl/cert.pem; ssl_certificate_key /root/ssl/key.pem; + http2 on; + location ^~ /livekit/jwt/ { @@ -94,6 +133,54 @@ server { } +# MatrixRTC reverse proxy +# domain matrix-rtc.othersite.m.localhost +# - MatrixRTC Authorization Service +# - LiveKit SFU websocket signaling connection +server { + listen 443 ssl; + listen [::]:443 ssl; + server_name matrix-rtc.othersite.m.localhost; + ssl_certificate /root/ssl/cert.pem; + ssl_certificate_key /root/ssl/key.pem; + + http2 on; + + + location ^~ /livekit/jwt/ { + + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + + # JWT Service running at port 16080 + proxy_pass http://auth-service-1:16080/; + + } + + location ^~ /livekit/sfu/ { + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + + proxy_send_timeout 120; + proxy_read_timeout 120; + proxy_buffering off; + + proxy_set_header Accept-Encoding gzip; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection "upgrade"; + + # LiveKit SFU websocket connection running at port 17880 + proxy_pass http://livekit-sfu-1:17880/; + } + + error_page 500 502 503 504 /50x.html; + +} + # Convenience reverse proxy for the call.m.localhost domain to yarn dev --host server { listen 80; @@ -159,3 +246,36 @@ server { error_page 500 502 503 504 /50x.html; } + +# Convenience reverse proxy app.othersite.m.localhost for element web +server { + listen 80; + listen [::]:80; + server_name app.othersite.m.localhost; + + return 301 https://$host$request_uri; +} + +server { + listen 443 ssl; + listen [::]:443 ssl; + server_name app.othersite.m.localhost; + ssl_certificate /root/ssl/cert.pem; + ssl_certificate_key /root/ssl/key.pem; + + + location ^~ / { + + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + + proxy_pass http://element-web-1:18081; + proxy_ssl_verify off; + + } + + error_page 500 502 503 504 /50x.html; + +} diff --git a/backend/dev_tls_local-ca.crt b/backend/dev_tls_local-ca.crt index 9c8ee3d7..963089ad 100644 --- a/backend/dev_tls_local-ca.crt +++ b/backend/dev_tls_local-ca.crt @@ -1,19 +1,19 @@ -----BEGIN CERTIFICATE----- -MIIDGjCCAgKgAwIBAgIUGdiFHhH4KL2pqBjMQHQ+PVIkSV8wDQYJKoZIhvcNAQEL -BQAwHjEcMBoGA1UEAwwTRWxlbWVudCBDYWxsIERldiBDQTAeFw0yNTA1MDUxMDMy -MDJaFw0zNTA1MDMxMDMyMDJaMB4xHDAaBgNVBAMME0VsZW1lbnQgQ2FsbCBEZXYg -Q0EwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDA2y0hjmNn1vRsVSdy -8IOfo8N1q9UgkhQWpGKXzPh+D5d1fnuJEmHIVwtDEtS/PwQ43LTmegChPtKH9jdT -tG0IihW9Ja5YNG+9xAwaoA/sB3CGCBYsz+2/XjVUpXoBJXIPoFBWsn+K0oeFw9fw -eRO1z9abM4cl+LjKzMNM8CCyu9uI1MaGjYez2YIWvG854VucLxX7HSlMJxZNWnie -Ui7fMakuJhB2+aiIQjdKxy4E5RHNhzYG/LXhvP+wBYBDPNRsP3rtzEaE9HAveL9K -FGqd3R4cBia6r1WIXmpAzyu5RGP5Eou0TZlGkal96/bF0I7q/pKlL23Jt1BLPiQU -KGKrAgMBAAGjUDBOMB0GA1UdDgQWBBQJqBjMu61c1p24txw/y+kv3D+V6DAfBgNV -HSMEGDAWgBQJqBjMu61c1p24txw/y+kv3D+V6DAMBgNVHRMEBTADAQH/MA0GCSqG -SIb3DQEBCwUAA4IBAQB8m2YfFGLugNt5vAAOvNxVqDA8c72yCVYr3CBCpmTIEY5Z -d3qVGhG9//ux6+J8ntkSwd9nV5GJyYXHukCG1VavnAWolWdNF/WAllf0jhLuz7kD -/cJnuI1By4tBsBmSz851i6HJ4t5k99Be+6GQVzi0e7zzfxTHZE4xP2J6Ox8QbPsP -n0m76nIp/WbWaJqzvIIjJhmUUPPv+4wN+eOArgjiGLzptM2qTtGZtd0c9nS5gvep -+mEbSUN9zkhAroZf80wf+hEvy+fJ94VbZ9QjTzTg7odZLrsXGIe8DaG63EYRQ25b -W5iYBAreln5fGSt7qHsGfqwZibTEk/Lx3dydO1Kg +MIIDGjCCAgKgAwIBAgIUbSbx+1UGptOTGefqEn7Zh3yoChIwDQYJKoZIhvcNAQEL +BQAwHjEcMBoGA1UEAwwTRWxlbWVudCBDYWxsIERldiBDQTAeFw0yNTA5MjIxMjI3 +MzVaFw0zNTA5MjAxMjI3MzVaMB4xHDAaBgNVBAMME0VsZW1lbnQgQ2FsbCBEZXYg +Q0EwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDHODfkrFsOkqCnXnTb +QWz3LkUtNCoVvM7wFouirRnITJYG+lFwF+zNl89Eaq+uUN4bwd8ml1ZuR9p+1azC +SlklD5adhCR/ErknfUWamQEf6amSs3p0NnqnhXbnDEEbQOwNaPU/aGc6aw0+I9O6 +NQ/H830GlVuKd24Bfv0mx6Imo0Hi9jxKYhqFh80nmltk2uyXefaJxuo1jXBhwLyC +DW8RVj55QvkZyBUzid8yslxrlo0LHKCCjZflwJJv5f+jaubkH5c0qxVaoR4+Liyt +X/4viIwt3Mhj04ppudTvt973mTbjRG5haCz9y7OkT1mMWhc0xrdMFX+gjPERYS2H +Ru/RAgMBAAGjUDBOMB0GA1UdDgQWBBTXNfLAKVayGQda/JZLPszrpz6LVzAfBgNV +HSMEGDAWgBTXNfLAKVayGQda/JZLPszrpz6LVzAMBgNVHRMEBTADAQH/MA0GCSqG +SIb3DQEBCwUAA4IBAQCvGfyopHHgZB+horGH6i/Xg41V+r4d0o092F1Lfr4vh86e +XMakRw92vsyk/iWOnLPNPcpVWzPcvINaCs/bahgnGSOAnrA4jjcXqymyGIy/6xc5 +1EeZAxehiL9E5q4LQ841HDX0gps4ZzUO1BRYQcjG9Rdts83JO2ekkfHkZdNj2eQr +KOrr92Na1/w+EQdo/T9Rs2ES623xKEOxPqb8d/rx5Z4DdeuGx1u+3AfS76Lpo4ni +EJ0g1ImqdSUtiOLzeCQh6pqqb+vuFbxAyeyYSAJ49847EtFBvZCmWmPL2JICg9uq +7rKW/qDfEK9GUs0GWCs3+mJkNvOOxBwtMuQrL7ZF -----END CERTIFICATE----- diff --git a/backend/dev_tls_local-ca.key b/backend/dev_tls_local-ca.key index c6de05c4..04da3869 100644 --- a/backend/dev_tls_local-ca.key +++ b/backend/dev_tls_local-ca.key @@ -1,28 +1,28 @@ -----BEGIN PRIVATE KEY----- -MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDA2y0hjmNn1vRs -VSdy8IOfo8N1q9UgkhQWpGKXzPh+D5d1fnuJEmHIVwtDEtS/PwQ43LTmegChPtKH -9jdTtG0IihW9Ja5YNG+9xAwaoA/sB3CGCBYsz+2/XjVUpXoBJXIPoFBWsn+K0oeF -w9fweRO1z9abM4cl+LjKzMNM8CCyu9uI1MaGjYez2YIWvG854VucLxX7HSlMJxZN -WnieUi7fMakuJhB2+aiIQjdKxy4E5RHNhzYG/LXhvP+wBYBDPNRsP3rtzEaE9HAv -eL9KFGqd3R4cBia6r1WIXmpAzyu5RGP5Eou0TZlGkal96/bF0I7q/pKlL23Jt1BL -PiQUKGKrAgMBAAECggEAAPX2kxi5AQ7ul82SzT1KgpSXyDHLdYaUyAoYnaX9RO+B -8ylmpyeqygs4+KQS4EMJm9jpo85Oy37bIKdG3kljU6wQcKlL5Y+ZUOo1nzpV6fid -hGVs6ts8VXw8KshKQ9AyccZ8L/pirUfgOffgTwfjY7/90zceAL/s98GuZWc62nkX -55joQv/OikqYfAGP/U6Bp2Zyf23DwJB09Z3B6NnZj/ZyAbDrDEHuA15LhCOcCczp -IU/mFEywBPHT9Tg4w4Beq78PeAETvku2UalYRLhP3RLlXr2oEbwUtINRVt2QjZ85 -Esps4uCqL/mgQluIebtudD9HL/YMlNPXue1mDXFxJQKBgQDgZZY4yJBcf488T1V6 -HNm06b/LvVGj253pKgw14hpY1xQu3Ymgzv1GEqzhSYdzxhpmj0tMUNHxAp+YdGQu -SZ0wcPKhw0aYVkIjDRYDC3Wn5GJhyIEYHGYMo/n4l49UzHRBPOTDzp49DkHTKBgh -XgIIazYT3CkjTIMRrkUv+qfIPQKBgQDcBGu/mqbjxs4sN3zqPS4aB21o6t6W0sXs -ZP9w6RlTPQi5U2oRbftjZtYc0bbEgkMUImB1HwYPQT5pJ+MyC414xDvSc2exBr5d -To6yyPIy78Tf5PHM12fpKV92nSvoz/pSjYcGxxDtKfPqu+t8mOJfjCV1lLLA+xuB -DDaE4p8dBwKBgQCdAne6A5v/HMH8UQZeCxHJpESvKiiVnnU/UEx651nID7XvlNNX -0X0mKqsMd4ZvW43ddSYan/JF0LAa3FW8jYWO/3jF9vzOWoysOdvNBZetgf/Uq5ao -aDZ/YbzmVCXWD7jIbPMkjs3pqrAkL0mzDzQc7+dGviWKrV6IYIfIqnn7gQKBgDCz -vdIk/qpO+JZrFfiX4Fucp0hhLTJ/p5ZDaRPqVVPKn+K+Jy2ChfIj8mNgvK9VEloj -nexvGJ1J2PHYBX+vdPp1nbRhHWPfVUY8PHQw7QP/dToGaMvqJrNDGEGeWvjnCMc7 -UtdaO1H0Rm0AegkTopB56lTTvJnhO95eALd7nrMDAoGAEPdzJtWoKafp49svhSj0 -hiXQv2SPBwVUN4LZ4SOWiXUcmYYm80aNpYKLkBxYjrfqFWhE7NUHLGp8YorQWKY2 -acD9AReHk/xku0ABy6jeYmSCmCxASxst5liKD+l12sk0gB0rk5MBxB4Uu1MIbQZ2 -aCASX3AVD2/XyC2MKkzc8Eg= +MIIEvwIBADANBgkqhkiG9w0BAQEFAASCBKkwggSlAgEAAoIBAQDHODfkrFsOkqCn +XnTbQWz3LkUtNCoVvM7wFouirRnITJYG+lFwF+zNl89Eaq+uUN4bwd8ml1ZuR9p+ +1azCSlklD5adhCR/ErknfUWamQEf6amSs3p0NnqnhXbnDEEbQOwNaPU/aGc6aw0+ +I9O6NQ/H830GlVuKd24Bfv0mx6Imo0Hi9jxKYhqFh80nmltk2uyXefaJxuo1jXBh +wLyCDW8RVj55QvkZyBUzid8yslxrlo0LHKCCjZflwJJv5f+jaubkH5c0qxVaoR4+ +LiytX/4viIwt3Mhj04ppudTvt973mTbjRG5haCz9y7OkT1mMWhc0xrdMFX+gjPER +YS2HRu/RAgMBAAECggEABhB9CxYAE5p9D3s9nWsJcSDUdELRQSYlOoPFLmeMkF9c +dcvq7LmduMh1Q8TnoivOBxRIwbj7pZHEYfYJM0TmH82wrQzXu5KLVltm4gTkVt9b +DR8vjBgYdb8HVpM17Cl2xhW62XpJIiseFRUsHc/9sf2Egc3MIpPuIleGR0budbSW +ybBkqEokTYTSiAztcu3G+VN0U9MsJgLMa8HApya7M48ojdrhzngVHZRUOXul9o7u +zYJWSxPHIIYp5C4pYQBAx8OttThwKK1A9lwbQ2EJx0KnTbBC6O5Gna/jENpGd1h2 +rzK/9MONtsjln7IejP+4mDlNupS6SF3zzHPBHjqKAQKBgQDtXUIKPiVTFS45yWtK +XD62s3j8jfIi+22b/C30fCPtppn0cm/0zY+vovgWVUBnQXkExafRthZCuxnE8ry7 +E29S40+4z9yivAC9dz7vHZUbyIFP6VG9WyhUYo+/WqOIePyh+iBISQ9TA1DneIYz ++VZ8iU5GvdybUPl2C5WN8seaoQKBgQDW3EwVN2EEkChLRJbQYN2qpjn+0vYESMJ8 +K0sgMRtgh4+/T2Xb9b8O/dd87Fi/4oaUqWZ2E2sdsXq8P/IEo0cv6SRfHMy7GyxL +RM7ztwUfMC4LVWi0ZIXMrm4gRDGN2XjGvhkX6fU2lSf6azWL1K3wI3amNV2b7P7d +ItpvdkH3MQKBgQCXf29YJEQkXB9t6J3fDzND3xb4cwy5wSo7ZeBa7CTuWOhoeeX1 +JIJyAp0/e9goT0SThChRlFtu6gZPivJkoMnr6IOInLrg7we15fc4HPR/kCDgxTVT +m2wJOAMxigNYZogwRfn2yRLL1BD+PBHD+H936xcX1bSJOUyPSGOC/xLhIQKBgQCb +kCDd85ygyycBaAWxlZCor3WqFF/fNjbp5Aaepi9mMoBXSUs8eK7+UbelURHozEAY +fpYaw3B4rTlp9vppdTZjb+/PlXB9v+zQCl+0gTyKGj4cIpiOk4F0co51eipOw7f4 +XUaZ0+CgxlmNq/W26iONjH+pU1YVQQA+Z6+zp/GW4QKBgQCrzYgeugxxqgJzyIRu +0njJkIg+T5gHvsQrtpzq7LVob+HBiBiT7eDOeGDXTK8F//sk969QVrDMQsTMvGW9 +sG1oTqxciALTMqkJTf8+hT9Uogir0/iTbJUzTt5vPYpQOEQwQHIXMUTjZ9C6NDKT +QlmeMCxeWyPYqoMfwKmdtDP/Iw== -----END PRIVATE KEY----- diff --git a/backend/dev_tls_m.localhost.crt b/backend/dev_tls_m.localhost.crt index 5d6251a9..e6c64f03 100644 --- a/backend/dev_tls_m.localhost.crt +++ b/backend/dev_tls_m.localhost.crt @@ -1,21 +1,21 @@ -----BEGIN CERTIFICATE----- -MIIDZzCCAk+gAwIBAgIUXizLjwkdqepX0bh0K3abeJxj68IwDQYJKoZIhvcNAQEL -BQAwHjEcMBoGA1UEAwwTRWxlbWVudCBDYWxsIERldiBDQTAeFw0yNTA1MDUxMzU5 -MTFaFw0zNTA1MDMxMzU5MTFaMBgxFjAUBgNVBAMMDSoubS5sb2NhbGhvc3QwggEi -MA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCrzGSScSgaQuZdELGFYiLiYRwr -LKyUdNr0rsPcOo0bvbeZ3zQMeUMRNlA69zGFdarumiDRXUoAmZI39WmH95aX3d+A -U7EFnWev7xpWSVhSYj8T0d4rke8HjGk3LpaffJ93tbJuagBIH1ouuN6AOdzWs8hp -RYIomWleEeeuVnnfaMwaXOdc+ihJJ6wzm2hwQSfdpjZPWBDd/DFft1ZXxIZOCjDs -rEIiI7uU8iZPLB3QEM/tgxSSAOxrcKvQvxZokk+FD7aMJFP71IfieLCEzMTP1VXa -tP7UTAKAqB2NyDJ8m3IHbOINiqcdFvFR3R1D9bXOYE4oRynNvYZrQUGnL2RtAgMB -AAGjgaIwgZ8wHwYDVR0jBBgwFoAUCagYzLutXNaduLccP8vpL9w/legwCQYDVR0T -BAIwADALBgNVHQ8EBAMCBaAwEwYDVR0lBAwwCgYIKwYBBQUHAwEwMAYDVR0RBCkw -J4IJbG9jYWxob3N0ggttLmxvY2FsaG9zdIINKi5tLmxvY2FsaG9zdDAdBgNVHQ4E -FgQUfdh1p52ZgWyZcBgBXGwKi4EnUE0wDQYJKoZIhvcNAQELBQADggEBAKrHEuB6 -33j8+EwSHw3zrvt/DRXK2BDHI1Ir9JcztSunaKAjZXVvf/dvZp0Xs1dEdJIdnv6G -iZYhBbOqDqpQZbf2h/h0kuu5yZSBUdnQXnYNxlhp2UaC/UEgw5iZT/p1rm7RjVie -y4Dp2WytV5iZOLmLj6xDvd3DXazgJPWIRX8p8qJZbKTkwCjTr7nDIj8jjG1sVFf7 -1RJBO5/6WSnImrpDmlLUrvjiKvbxcdseDJyBOhTwdRdSk4S2M+s5tR5j2I1gXLOq -J5ioN76+SCrTY0K0WKRy9oOXWO1/X3+VYcekp+0F3SGkd5w17jylCv1XIGHAdEsQ -v2z2/aMI/7sAD2Q= +MIIDgDCCAmigAwIBAgIUT9NYpZbrAKokSPSTE3zzsAMowvEwDQYJKoZIhvcNAQEL +BQAwHjEcMBoGA1UEAwwTRWxlbWVudCBDYWxsIERldiBDQTAeFw0yNTA5MjIxMjI3 +MzVaFw0zNTA5MjAxMjI3MzVaMBgxFjAUBgNVBAMMDSoubS5sb2NhbGhvc3QwggEi +MA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDK1DNwTQWmyK71Ar56NvmSMQ8s +qUY3jGqqPVORjfDUtDCrPPdCxT+ZlnsAgdonElWoWqczMrSyBRgfJlZMd4lEvt6V +EEiZGUvA/lG1XIVgrx1kMSHKBoJj7lCBN6r3IWmYe6CxgfZurgp+7Z22i6cGMOnQ +0XduX5Asup6zk5V7AE6i9eKrJsUjYmRBXtk099IitkER4TMqh6WxJmFF+eV9P/ax +fxkon+bQWITwP1PLC1UOTK7lR0EcVan5aY6WMs/6RfO4Gw/dvuiVG1jCrVcaKNGT +PYqmQqs+MOvyIqJ9kYELRZu+6bhPWSXk2ESpSIUIPH9twfnmWrncneIJR24/AgMB +AAGjgbswgbgwHwYDVR0jBBgwFoAU1zXywClWshkHWvyWSz7M66c+i1cwCQYDVR0T +BAIwADALBgNVHQ8EBAMCBaAwEwYDVR0lBAwwCgYIKwYBBQUHAwEwSQYDVR0RBEIw +QIIJbG9jYWxob3N0ggttLmxvY2FsaG9zdIINKi5tLmxvY2FsaG9zdIIXKi5vdGhl +cnNpdGUubS5sb2NhbGhvc3QwHQYDVR0OBBYEFIkGX+cEJ1ISKIwuT1zzp7uHJ90e +MA0GCSqGSIb3DQEBCwUAA4IBAQBnnnfB7KmyYo16ZYUCmoqGhbM4p8npeYTh5ySb +K01YwGCnMU1qGfJnKHaRwQ2+KtVGZnpBdjmsHcOUetA3V2BirPaYowMCMtaI36LD +LnxvboSZLX0mgEYuN7HmxW4a7fSelDecTYa7xti1sNhE/w8xW7Lky046/DousyUy +d9x3wJ183GGj1W2p6bR1E4sqTr/VbmoULQxnqA3GUNOxW3lRL5e8lQ6jJVRmMF4k +92BtMPrI/m7jwHj0f/WBLI8mdJ/O/W/NxQOG475FZePDfrg+MkeXPChPggf42/ou +AMm56FNB7e1l0b1Fots730RfpCPuXpiAxL4pisS0X1dMVeeM -----END CERTIFICATE----- diff --git a/backend/dev_tls_m.localhost.key b/backend/dev_tls_m.localhost.key index 73d89ce4..0373a6f1 100644 --- a/backend/dev_tls_m.localhost.key +++ b/backend/dev_tls_m.localhost.key @@ -1,28 +1,28 @@ -----BEGIN PRIVATE KEY----- -MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCrzGSScSgaQuZd -ELGFYiLiYRwrLKyUdNr0rsPcOo0bvbeZ3zQMeUMRNlA69zGFdarumiDRXUoAmZI3 -9WmH95aX3d+AU7EFnWev7xpWSVhSYj8T0d4rke8HjGk3LpaffJ93tbJuagBIH1ou -uN6AOdzWs8hpRYIomWleEeeuVnnfaMwaXOdc+ihJJ6wzm2hwQSfdpjZPWBDd/DFf -t1ZXxIZOCjDsrEIiI7uU8iZPLB3QEM/tgxSSAOxrcKvQvxZokk+FD7aMJFP71Ifi -eLCEzMTP1VXatP7UTAKAqB2NyDJ8m3IHbOINiqcdFvFR3R1D9bXOYE4oRynNvYZr -QUGnL2RtAgMBAAECggEAJaFQii8U/KOYt9vXNoMnZvSkaeSQLLhn2V6Kciu1CtWE -aMTWLsFE6nk+G5xXkYcTmM3T0GghtH3u5CjyI6EcsEkeEorCZJt0wbmayDmqiekR -LfMzOdHuTHX5+edPgMGYYG1BFyRKyYFsjH1b5zRFZhXdGQnrl5760GsVlz9D1KZQ -iHcT+q1S2tmZeoUukQnADENKXUMCyTGM5FCddgNtsWnGDsTDayh7hUdvDkB+mW4G -lSp+BZuc3PCwpbD6qkXvfugWs6CUAAtXoV3ceWgxQ+TEnNlwxaG1AyugfgNUBolk -8xgeZt4r5QId03jsHDf7hpBAofcaCd5EMIIQYFvWoQKBgQDlbAvAzEFPTZZn2nRV -Xagw4xjqVc1LLEKLCWq0N5rEkwn0h90Dz5N7/3NuonP/sIDsDHCbyiOYBI1Ck6Xi -0WuB+OyKDh+xeF2mekN9G9ywPahdK5lT/TVsxXFyZlwtVv1x/6KBO4yv5URizxqU -gyAPDDxfD/KcNjkOBaodWEwQGQKBgQC/s2gPDBtQkjLwkHXchBomLww5eLlVrac1 -WK4UX6uSdOgrjJ375OOgMTxe8NVZdOuAKytGXRWDwgH3nVWvuZhe7dGlX3JMuSer -e9VwDpBESrvqcR4ruL6wm8wej6BXyjH0wD3FHb0S5HfuBDxTn+4bDwrbRzOUMNgy -lSppuflxdQKBgQDiZcIfazFT8evn5nMAvuC4BZNTxIJHmZC9JfjPiUPIkpWzYtOe -7BvNtKOT3Op9uw8uYYRKqKqBXJSNy6ha8XCXHS9HeXKbLn20SFkLQBCDNwVLlDfF -40zyXtF6JDr4XyzSb4NM5pgKCER5AYloXxGm59s3sEQpFXUuOjbKqJS/GQKBgAoI -c7vF4HAZFr1sch62cz/oWnVvkhOf4Q5zs7ixQSOLJtOQqnwSgK9TpFs7s47ZBbJR -kBRAru2Ua9Hv1Bo8VnMxczV6h1roneDlvEf/GyHX33nnrbKQGrrXjJlU3wl5NaAf -p5v3cHvapUQ5yIZ/6lBUOzc6xMJOxCHxmKSr7Rg5AoGAbEE4lt6Xh2dnBPJ81eNI -IDrw/3ITY53qAY4Bx88CByIFuu8CEUdUZprh98jSl6ic1tMinZfUhRMwABLrUD51 -DGst8iGLPD9u83iMcUHI/L+p7AbxrKLvWXZrF5UZm440c9mSWqfhPaTBosPtNDsG -LfETwH1flKXMTXd2xA9RTE4= +MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDK1DNwTQWmyK71 +Ar56NvmSMQ8sqUY3jGqqPVORjfDUtDCrPPdCxT+ZlnsAgdonElWoWqczMrSyBRgf +JlZMd4lEvt6VEEiZGUvA/lG1XIVgrx1kMSHKBoJj7lCBN6r3IWmYe6CxgfZurgp+ +7Z22i6cGMOnQ0XduX5Asup6zk5V7AE6i9eKrJsUjYmRBXtk099IitkER4TMqh6Wx +JmFF+eV9P/axfxkon+bQWITwP1PLC1UOTK7lR0EcVan5aY6WMs/6RfO4Gw/dvuiV +G1jCrVcaKNGTPYqmQqs+MOvyIqJ9kYELRZu+6bhPWSXk2ESpSIUIPH9twfnmWrnc +neIJR24/AgMBAAECggEANRp6vzfDN4gKWoaV5TyYegCTNv+4rRl74cd9pjmx6Jam +uWaUXCx1etpNqPPWcG1Z9OKLLRnk+kjgKGOqq4mObGvGreNeBot7bHOJZADtwMMI +YG+Gp7StlclS1YoEHoDmezA/AcqDgTXa9KF0rdMBb1sGFJCLAuBNSJCxtVV6CQIz +X26uT0m+Wx8MQyQWA7Sqy6DQNJo++IZkvr7a3cidqBOUPs+QvnIV5JsUb2gp5tGn +zk+ObeRjoFFWYAN/NK7bneRenkP40m3MSL8ZfaEuuonui7CrxM1SiQyq2N1u/Aoy +OE1JtNaVPbLBo6kG5al7Sj4Z0zhRt+iv93S2lZMkBQKBgQD2+FpLTqyLO1NDOFkE +kxU+LdLOx0OV9wASC0ApPOu1dHMG6ksByr7TWeiu6GJDgajusPB7NVPOt2cm4iWU +xPxXPO5l87uiSvu80h5uG4Qdj8KEijHkdap2wbVkU/mm8lBKC36jyBQIlJKySyXY +zSEMfLK9jQPKz5cKKT3dVj/fAwKBgQDSPq9oks6K96MAB66o6cm214otQlnTQkPM +xgjtjddX+Lp9tgihGvtSfPbyy89oUDHCfKvW/AHG52e5dec5YUi6mVdHEWbk33Kt +BoQuxeK3XseIDlD/JD9Dd7KfUyO5w2jtYLfNdqez41O4qj2N52m1KwJYTwMsc8Kq +izVgkC5hFQKBgBFAc/5CtqbbNAvECePZ6mf3h3xOSxhUsrqP8qFu0gBQ7CAVibvM +T9wvsaNWNFcG3age0A2rQfl0sk3zCjEEOaRWa0jP59GEb2VXQCzs2yO9gRcFGEsf +NRMqoOMrQos47gbeGrCSL2QSDNVLjo9AdQiMRWgcS6GFMsXQ77NgbQHFAoGBAI4a +YGTGFWRITJvQlXUFz5kNxg8hMaVgvILDt3UY0dxb+XDOgLajjgsK+77Pkrhmu7tA +mMUOQAU4kxr/XfGil43H5v3Z/Tnk7ZWVOfKDPeHC5gpH4ucQkNIBLXISt6rvMRSA +srrk4CTuGcBPEJvBNemF0Gfvv61j8MdkoAdMbIyhAoGAfGR6yZLBmRMsW5PKmcpT +nq2oSeUpmtGZra6pWz/3XU7AgrCLcx1DmqEjm4w7y5NQJmxyMZqqdTJILCjr3Srt ++2F0NqQL6Li+xQGibAvDj0Jxyol38RvFC0J/w2vQmuF0hTuH95yknSd7FPXK+DPG +qYgXLjun9dht6kx9vGJ69wI= -----END PRIVATE KEY----- diff --git a/backend/dev_tls_setup b/backend/dev_tls_setup index 8a778dc8..9d40f5d9 100644 --- a/backend/dev_tls_setup +++ b/backend/dev_tls_setup @@ -34,5 +34,6 @@ subjectAltName = @alt_names DNS.1 = localhost DNS.2 = m.localhost DNS.3 = *.m.localhost +DNS.4 = *.othersite.m.localhost EOF ) diff --git a/backend/ew.test.othersite.config.json b/backend/ew.test.othersite.config.json new file mode 100644 index 00000000..2ad3df4f --- /dev/null +++ b/backend/ew.test.othersite.config.json @@ -0,0 +1,53 @@ +{ + "default_server_config": { + "m.homeserver": { + "base_url": "https://synapse.othersite.m.localhost", + "server_name": "synapse.othersite.m.localhost" + } + }, + "disable_custom_urls": false, + "disable_guests": false, + "disable_login_language_selector": false, + "disable_3pid_login": false, + "force_verification": false, + "brand": "Element", + "integrations_ui_url": "https://scalar.vector.im/", + "integrations_rest_url": "https://scalar.vector.im/api", + "integrations_widgets_urls": [ + "https://scalar.vector.im/_matrix/integrations/v1", + "https://scalar.vector.im/api", + "https://scalar-staging.vector.im/_matrix/integrations/v1", + "https://scalar-staging.vector.im/api", + "https://scalar-staging.riot.im/scalar/api" + ], + "default_widget_container_height": 280, + "default_country_code": "GB", + "show_labs_settings": false, + "features": { + "feature_element_call_video_rooms": true, + "feature_video_rooms": true, + "feature_group_calls": true, + "feature_release_announcement": false + }, + "default_federate": true, + "default_theme": "light", + "room_directory": { + "servers": ["matrix.org"] + }, + "enable_presence_by_hs_url": { + "https://matrix.org": false, + "https://matrix-client.matrix.org": false + }, + "setting_defaults": { + "breadcrumbs": true, + "feature_group_calls": true + }, + "jitsi": { + "preferred_domain": "meet.element.io" + }, + "element_call": { + "participant_limit": 8, + "brand": "Element Call" + }, + "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx" +} diff --git a/backend/playwright_homeserver-othersite.yaml b/backend/playwright_homeserver-othersite.yaml new file mode 100644 index 00000000..5cb0dd65 --- /dev/null +++ b/backend/playwright_homeserver-othersite.yaml @@ -0,0 +1,81 @@ +server_name: "synapse.othersite.m.localhost" +public_baseurl: https://synapse.othersite.m.localhost/ + +pid_file: /data/homeserver.pid + +listeners: + - port: 18008 + tls: false + type: http + x_forwarded: true + resources: + - names: [client, federation, openid] + compress: false + +database: + name: sqlite3 + args: + database: /data/homeserver.db + +media_store_path: /data/media_store +signing_key_path: "/data/SERVERNAME.signing.key" + +# Due to custom TLS certificate with domains +# - m.localhost, localhost +# - *.m.localhost +# - *.othersite.m.localhost +# we disable certificate verification to allow for federation. +# WARNING: DO NOT USE IN PRODUCTION!!! +federation_verify_certificates: false +ip_range_blacklist: [] +trusted_key_servers: + - server_name: "synapse.m.localhost" + accept_keys_insecurely: true + +experimental_features: + # MSC3266: Room summary API. Used for knocking over federation + msc3266_enabled: true + # MSC4222 needed for syncv2 state_after. This allow clients to + # correctly track the state of the room. + msc4222_enabled: true + +# The maximum allowed duration by which sent events can be delayed, as +# per MSC4140. Must be a positive value if set. Defaults to no +# duration (null), which disallows sending delayed events. +max_event_delay_duration: 24h + +# Required for Element Call in Single Page Mode due to on-the-fly user registration +enable_registration: true +enable_registration_without_verification: true + +report_stats: false +serve_server_wellknown: true + +# Ratelimiting settings for client actions (registration, login, messaging). +# +# Each ratelimiting configuration is made of two parameters: +# - per_second: number of requests a client can send per second. +# - burst_count: number of requests a client can send before being throttled. + +rc_message: + per_second: 10000 + burst_count: 10000 + +rc_delayed_event_mgmt: + per_second: 10000 + burst_count: 10000 + +rc_login: + address: + per_second: 10000 + burst_count: 10000 + account: + per_second: 10000 + burst_count: 10000 + failed_attempts: + per_second: 10000 + burst_count: 10000 + +rc_registration: + per_second: 10000 + burst_count: 10000 diff --git a/backend/playwright_homeserver.yaml b/backend/playwright_homeserver.yaml index ca45cf3f..0d7b175c 100644 --- a/backend/playwright_homeserver.yaml +++ b/backend/playwright_homeserver.yaml @@ -19,8 +19,18 @@ database: media_store_path: /data/media_store signing_key_path: "/data/SERVERNAME.signing.key" + +# Due to custom TLS certificate with domains +# - m.localhost, localhost +# - *.m.localhost +# - *.othersite.m.localhost +# we disable certificate verification to allow for federation. +# WARNING: DO NOT USE IN PRODUCTION!!! +federation_verify_certificates: false +ip_range_blacklist: [] trusted_key_servers: - - server_name: "matrix.org" + - server_name: "synapse.othersite.m.localhost" + accept_keys_insecurely: true experimental_features: # MSC3266: Room summary API. Used for knocking over federation @@ -34,6 +44,13 @@ experimental_features: # duration (null), which disallows sending delayed events. max_event_delay_duration: 24h +# Required for Element Call in Single Page Mode due to on-the-fly user registration +enable_registration: true +enable_registration_without_verification: true + +report_stats: false +serve_server_wellknown: true + # Ratelimiting settings for client actions (registration, login, messaging). # # Each ratelimiting configuration is made of two parameters: @@ -44,6 +61,10 @@ rc_message: per_second: 10000 burst_count: 10000 +rc_delayed_event_mgmt: + per_second: 10000 + burst_count: 10000 + rc_login: address: per_second: 10000 @@ -58,10 +79,3 @@ rc_login: rc_registration: per_second: 10000 burst_count: 10000 - -# Required for Element Call in Single Page Mode due to on-the-fly user registration -enable_registration: true -enable_registration_without_verification: true - -report_stats: false -serve_server_wellknown: true diff --git a/backend/redis.conf b/backend/redis.conf deleted file mode 100644 index 32a39f7b..00000000 --- a/backend/redis.conf +++ /dev/null @@ -1,5 +0,0 @@ -bind 0.0.0.0 -protected-mode yes -port 6379 -timeout 0 -tcp-keepalive 300 diff --git a/codecov.yaml b/codecov.yaml index e1289344..f08dc9b2 100644 --- a/codecov.yaml +++ b/codecov.yaml @@ -13,7 +13,6 @@ coverage: informational: true patch: default: - # Encourage (but don't enforce) 80% coverage on all lines that a PR + # Enforce 80% coverage on all lines that a PR # touches target: 80% - informational: true diff --git a/config/config_netlify_preview.json b/config/config_netlify_preview.json index cf0148e9..313f0d02 100644 --- a/config/config_netlify_preview.json +++ b/config/config_netlify_preview.json @@ -18,7 +18,7 @@ "api_host": "https://posthog-element-call.element.io" }, "rageshake": { - "submit_url": "https://element.io/bugreports/submit" + "submit_url": "https://rageshakes.element.io/api/submit" }, "sentry": { "environment": "netlify-pr-preview", diff --git a/dev-backend-docker-compose.yml b/dev-backend-docker-compose.yml index e6180710..50498c7a 100644 --- a/dev-backend-docker-compose.yml +++ b/dev-backend-docker-compose.yml @@ -24,8 +24,31 @@ services: networks: - ecbackend + auth-service-1: + image: ghcr.io/element-hq/lk-jwt-service:latest-ci + pull_policy: always + hostname: auth-server-1 + environment: + - LIVEKIT_JWT_PORT=16080 + - LIVEKIT_URL=wss://matrix-rtc.othersite.m.localhost/livekit/sfu + - LIVEKIT_KEY=devkey + - LIVEKIT_SECRET=secret + # If the configured homeserver runs on localhost, it'll probably be using + # a self-signed certificate + - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING + - LIVEKIT_FULL_ACCESS_HOMESERVERS=* + deploy: + restart_policy: + condition: on-failure + ports: + # HOST_PORT:CONTAINER_PORT + - 16080:16080 + networks: + - ecbackend + livekit: image: livekit/livekit-server:latest + pull_policy: always hostname: livekit-sfu command: --dev --config /etc/livekit.yaml restart: unless-stopped @@ -43,20 +66,30 @@ services: networks: - ecbackend - redis: - image: redis:6-alpine - command: redis-server /etc/redis.conf + livekit-1: + image: livekit/livekit-server:latest + pull_policy: always + hostname: livekit-sfu-1 + command: --dev --config /etc/livekit.yaml + restart: unless-stopped + # The SFU seems to work far more reliably when we let it share the host + # network rather than opening specific ports (but why?? we're not missing + # any…) ports: # HOST_PORT:CONTAINER_PORT - - 6379:6379 + - 17880:17880/tcp + - 17881:17881/tcp + - 17882:17882/tcp + - 50300-50400:50300-50400/udp volumes: - - ./backend/redis.conf:/etc/redis.conf:Z + - ./backend/dev_livekit-othersite.yaml:/etc/livekit.yaml:Z networks: - ecbackend synapse: hostname: homeserver image: docker.io/matrixdotorg/synapse:latest + pull_policy: always environment: - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml # Needed for rootless podman-compose such that the uid/gid mapping does @@ -71,6 +104,24 @@ services: networks: - ecbackend + synapse-1: + hostname: homeserver-1 + image: docker.io/matrixdotorg/synapse:latest + pull_policy: always + environment: + - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml + # Needed for rootless podman-compose such that the uid/gid mapping does + # fit local user uid. If the container runs as root (uid 0) it is fine as + # it actually maps to your non-root user on the host (e.g. 1000). + # Otherwise uid mapping will not match your non-root user. + - UID=0 + - GID=0 + volumes: + - ./backend/synapse_tmp_othersite:/data:Z + - ./backend/dev_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z + networks: + - ecbackend + element-web: image: ghcr.io/element-hq/element-web:develop pull_policy: always @@ -83,10 +134,24 @@ services: networks: - ecbackend + element-web-1: + image: ghcr.io/element-hq/element-web:develop + pull_policy: always + volumes: + - ./backend/ew.test.othersite.config.json:/app/config.json:Z + environment: + ELEMENT_WEB_PORT: 18081 + ports: + # HOST_PORT:CONTAINER_PORT + - "18081:18081" + networks: + - ecbackend + nginx: # see backend/dev_tls_setup for how to generate the tls certs hostname: synapse.m.localhost image: nginx:latest + pull_policy: always volumes: - ./backend/dev_nginx.conf:/etc/nginx/conf.d/default.conf:Z - ./backend/dev_tls_m.localhost.key:/root/ssl/key.pem:Z @@ -104,4 +169,7 @@ services: networks: ecbackend: aliases: + - synapse.m.localhost + - synapse.othersite.m.localhost - matrix-rtc.m.localhost + - matrix-rtc.othersite.m.localhost diff --git a/docs/self-hosting.md b/docs/self-hosting.md index 4a663c3f..d15f2910 100644 --- a/docs/self-hosting.md +++ b/docs/self-hosting.md @@ -126,6 +126,32 @@ server { } ``` +Or Using Caddy, you can achieve this by: + +```caddy configuration file +# Route for lk-jwt-service with livekit/jwt prefix +@jwt_service path /livekit/jwt/sfu/get /livekit/jwt/healthz +handle @jwt_service { + uri strip_prefix /livekit/jwt + reverse_proxy http://[::1]:8080 { + header_up Host {host} + header_up X-Forwarded-Server {host} + header_up X-Real-IP {remote_host} + header_up X-Forwarded-For {remote_host} + } +} + +# Default route for livekit +handle { + reverse_proxy http://localhost:7880 { + header_up Host {host} + header_up X-Forwarded-Server {host} + header_up X-Real-IP {remote_host} + header_up X-Forwarded-For {remote_host} + } +} +``` + #### MatrixRTC backend announcement > [!IMPORTANT] @@ -214,7 +240,7 @@ server { 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). +in [ConfigOptions.ts](../src/config/ConfigOptions.ts). > [!CAUTION] > Please note configuring MatrixRTC backend via `config.json` of @@ -257,6 +283,7 @@ self-hosters and developers working with Element Call. - [MatrixRTC with Synology Container Manager (Docker)](https://ztfr.de/matrixrtc-with-synology-container-manager-docker/) - [Encrypted & Scalable Video Calls: How to deploy an Element Call backend with Synapse Using Docker-Compose](https://willlewis.co.uk/blog/posts/deploy-element-call-backend-with-synapse-and-docker-compose/) - [Element Call einrichten: Verschlüsselte Videoanrufe mit Element X und Matrix Synapse](https://www.cleveradmin.de/blog/2025/04/matrixrtc-element-call-backend-einrichten/) +- [MatrixRTC Back-End for Synapse with Docker Compose and Traefik](https://forge.avontech.net/kstro1/matrixrtc-docker-traefik/) ## 🛠️ Tools diff --git a/docs/url-params.md b/docs/url-params.md index 3fac185a..a474daed 100644 --- a/docs/url-params.md +++ b/docs/url-params.md @@ -70,6 +70,8 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st | `theme` | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast` | No, defaults to `dark` | No, defaults to `dark` | UI theme to use. | | `viaServers` | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name) | Not applicable | No | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver. | | `sendNotificationType` | `ring` or `notification` | No | No | Will send a "ring" or "notification" `m.rtc.notification` event if the user is the first one in the call. | +| `autoLeaveWhenOthersLeft` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Whether the app should automatically leave the call when there is no one left in the call. | +| `waitForCallPickup` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | When sending a notification, show UI that the app is awaiting an answer, play a dial tone, and (in widget mode) auto-close the widget once the notification expires. | ### Widget-only parameters @@ -94,6 +96,6 @@ These parameters are only supported in the [embedded](./embedded-standalone.md) | -------------------- | -------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- | | `posthogApiHost` | Posthog server URL | No | e.g. `https://posthog-element-call.element.io`. Only supported in embedded package. In full package the value from config is used. | | `posthogApiKey` | Posthog project API key | No | Only supported in embedded package. In full package the value from config is used. | -| `rageshakeSubmitUrl` | Rageshake server URL endpoint | No | e.g. `https://element.io/bugreports/submit`. In full package the value from config is used. | +| `rageshakeSubmitUrl` | Rageshake server URL endpoint | No | e.g. `https://rageshakes.element.io/api/submit`. In full package the value from config is used. | | `sentryDsn` | Sentry [DSN](https://docs.sentry.io/concepts/key-terms/dsn-explainer/) | No | In full package the value from config is used. | | `sentryEnvironment` | Sentry [environment](https://docs.sentry.io/concepts/key-terms/key-terms/) | No | In full package the value from config is used. | diff --git a/embedded/android/gradle/libs.versions.toml b/embedded/android/gradle/libs.versions.toml index 9982f14d..8ec7801a 100644 --- a/embedded/android/gradle/libs.versions.toml +++ b/embedded/android/gradle/libs.versions.toml @@ -2,7 +2,7 @@ # https://docs.gradle.org/current/userguide/platforms.html#sub::toml-dependencies-format [versions] -android_gradle_plugin = "8.11.1" +android_gradle_plugin = "8.13.0" [libraries] android_gradle_plugin = { module = "com.android.tools.build:gradle", version.ref = "android_gradle_plugin" } diff --git a/locales/en/app.json b/locales/en/app.json index 007e372a..9e8fbbd3 100644 --- a/locales/en/app.json +++ b/locales/en/app.json @@ -64,6 +64,14 @@ "developer_mode": { "always_show_iphone_earpiece": "Show iPhone earpiece option on all platforms", "crypto_version": "Crypto version: {{version}}", + "custom_livekit_url": { + "current_url": "Currently set to: ", + "from_config": "Currently, no overwrite is set. Url from well-known or config is used.", + "label": "Custom Livekit-url", + "reset": "Reset overwrite", + "save": "Save", + "saving": "Saving..." + }, "debug_tile_layout_label": "Debug tile layout", "device_id": "Device ID: {{id}}", "duplicate_tiles_label": "Number of additional tile copies per participant", @@ -72,12 +80,24 @@ "livekit_server_info": "LiveKit Server Info", "livekit_sfu": "LiveKit SFU: {{url}}", "matrix_id": "Matrix ID: {{id}}", + "matrixRTCMode": { + "Comptibility": { + "description": "Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later)", + "label": "Compatibility: state events & multi SFU" + }, + "Legacy": { + "description": "Compatible with old versions of EC that do not support multi SFU", + "label": "Legacy: state events & oldest membership SFU" + }, + "Matrix_2_0": { + "description": "Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later", + "label": "Matrix 2.0: sticky events & multi SFU" + }, + "title": "MatrixRTC mode" + }, "mute_all_audio": "Mute all audio (participants, reactions, join sounds)", "show_connection_stats": "Show connection statistics", - "show_non_member_tiles": "Show tiles for non-member media", - "url_params": "URL parameters", - "use_new_membership_manager": "Use the new implementation of the call MembershipManager", - "use_to_device_key_transport": "Use to device key transport. This will fallback to room key transport when another call member sent a room key" + "url_params": "URL parameters" }, "disconnected_banner": "Connectivity to the server has been lost.", "error": { @@ -92,7 +112,7 @@ "generic_description": "Submitting debug logs will help us track down the problem.", "insufficient_capacity": "Insufficient capacity", "insufficient_capacity_description": "The server has reached its maximum capacity and you cannot join the call at this time. Try again later, or contact your server admin if the problem persists.", - "matrix_rtc_focus_missing": "The server is not configured to work with {{brand}}. Please contact your server admin (Domain: {{domain}}, Error Code: {{ errorCode }}).", + "matrix_rtc_transport_missing": "The server is not configured to work with {{brand}}. Please contact your server admin (Domain: {{domain}}, Error Code: {{ errorCode }}).", "open_elsewhere": "Opened in another tab", "open_elsewhere_description": "{{brand}} has been opened in another tab. If that doesn't sound right, try reloading the page.", "room_creation_restricted": "Failed to create call", diff --git a/package.json b/package.json index 1df79c26..62ea9f4f 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "@formatjs/intl-segmenter": "^11.7.3", "@livekit/components-core": "^0.12.0", "@livekit/components-react": "^2.0.0", - "@livekit/protocol": "^1.38.0", + "@livekit/protocol": "^1.42.2", "@livekit/track-processors": "^0.5.5", "@mediapipe/tasks-vision": "^0.10.18", "@opentelemetry/api": "^1.4.0", @@ -54,7 +54,7 @@ "@opentelemetry/sdk-trace-base": "^2.0.0", "@opentelemetry/sdk-trace-web": "^2.0.0", "@opentelemetry/semantic-conventions": "^1.25.1", - "@playwright/test": "^1.52.0", + "@playwright/test": "^1.56.1", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-slider": "^1.1.2", "@radix-ui/react-visually-hidden": "^1.0.3", @@ -71,7 +71,7 @@ "@types/grecaptcha": "^3.0.9", "@types/jsdom": "^21.1.7", "@types/lodash-es": "^4.17.12", - "@types/node": "^22.0.0", + "@types/node": "^24.0.0", "@types/pako": "^2.0.3", "@types/qrcode": "^1.5.5", "@types/react": "^19.0.0", @@ -99,6 +99,7 @@ "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-rxjs": "^5.0.3", "eslint-plugin-unicorn": "^56.0.0", + "fetch-mock": "11.1.5", "global-jsdom": "^26.0.0", "i18next": "^24.0.0", "i18next-browser-languagedetector": "^8.0.0", @@ -108,7 +109,7 @@ "livekit-client": "^2.13.0", "lodash-es": "^4.17.21", "loglevel": "^1.9.1", - "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#head=develop", + "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#head=toger5/sticky-events&commit=e7f5bec51b6f70501a025b79fe5021c933385b21", "matrix-widget-api": "^1.13.0", "normalize.css": "^8.0.1", "observable-hooks": "^4.2.3", @@ -129,7 +130,7 @@ "typescript-eslint-language-service": "^5.0.5", "unique-names-generator": "^4.6.0", "vaul": "^1.0.0", - "vite": "^6.0.0", + "vite": "^7.0.0", "vite-plugin-generate-file": "^0.3.0", "vite-plugin-html": "^3.2.2", "vite-plugin-svgr": "^4.0.0", diff --git a/playwright-backend-docker-compose.override.yml b/playwright-backend-docker-compose.override.yml index dadbccc2..8648c63c 100644 --- a/playwright-backend-docker-compose.override.yml +++ b/playwright-backend-docker-compose.override.yml @@ -2,3 +2,6 @@ services: synapse: volumes: - ./backend/playwright_homeserver.yaml:/data/cfg/homeserver.yaml:Z + synapse-1: + volumes: + - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z diff --git a/playwright/create-call.spec.ts b/playwright/create-call.spec.ts index 759cd2db..6f03272e 100644 --- a/playwright/create-call.spec.ts +++ b/playwright/create-call.spec.ts @@ -40,6 +40,11 @@ test("Start a new call then leave and show the feedback screen", async ({ // The tooltip with the name should be visible await expect(page.getByTestId("name_tag")).toContainText("John Doe"); + // Resize the window to resemble a small mobile phone + await page.setViewportSize({ width: 350, height: 660 }); + // We should still be able to send reactions at this screen size + await expect(page.getByRole("button", { name: "Reactions" })).toBeVisible(); + // leave the call await page.getByTestId("incall_leave").click(); await expect(page.getByRole("heading")).toContainText( diff --git a/playwright/fixtures/widget-user.ts b/playwright/fixtures/widget-user.ts index 3ccb2ab2..433c960b 100644 --- a/playwright/fixtures/widget-user.ts +++ b/playwright/fixtures/widget-user.ts @@ -159,8 +159,12 @@ export const widgetTest = test.extend({ } = await registerUser(browser, userB); // Invite the second user - await ewPage1.getByRole("button", { name: "Add room" }).click(); - await ewPage1.getByText("New room").click(); + await ewPage1 + .getByRole("navigation", { name: "Room list" }) + .getByRole("button", { name: "New conversation" }) + .click(); + + await ewPage1.getByRole("menuitem", { name: "New Room" }).click(); await ewPage1.getByRole("textbox", { name: "Name" }).fill("Welcome Room"); await ewPage1.getByRole("button", { name: "Create room" }).click(); await expect(ewPage1.getByText("You created this room.")).toBeVisible(); @@ -184,9 +188,9 @@ export const widgetTest = test.extend({ // Accept the invite await expect( - ewPage2.getByRole("treeitem", { name: "Welcome Room" }), + ewPage2.getByRole("option", { name: "Welcome Room" }), ).toBeVisible(); - await ewPage2.getByRole("treeitem", { name: "Welcome Room" }).click(); + await ewPage2.getByRole("option", { name: "Welcome Room" }).click(); await ewPage2.getByRole("button", { name: "Accept" }).click(); await expect( ewPage2.getByRole("main").getByRole("heading", { name: "Welcome Room" }), diff --git a/playwright/reconnect.spec.ts b/playwright/reconnect.spec.ts new file mode 100644 index 00000000..3b419af4 --- /dev/null +++ b/playwright/reconnect.spec.ts @@ -0,0 +1,60 @@ +/* +Copyright 2025 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { expect, test } from "@playwright/test"; + +// Skip test for Firefox, due to page.keyboard.press("Tab") not reliable on headless mode +test.skip( + ({ browserName }) => browserName === "firefox", + 'This test is not working on firefox, page.keyboard.press("Tab") not reliable in headless mode', +); + +test("can only interact with header and footer while reconnecting", async ({ + page, +}) => { + await page.goto("/"); + await page.getByTestId("home_callName").click(); + await page.getByTestId("home_callName").fill("Test call"); + await page.getByTestId("home_displayName").click(); + await page.getByTestId("home_displayName").fill("Test user"); + // If we do not call fastForward here, we end up with Date.now() returning an actual timestamp + // but once we call `await page.clock.fastForward(20000);` later this will reset Date.now() to 0 + // and we will never get into probablyDisconnected state? + await page.clock.fastForward(10); + await page.getByTestId("home_go").click(); + + await expect(page.locator("video")).toBeVisible(); + await expect(page.getByTestId("lobby_joinCall")).toBeVisible(); + + // Join the call + await page.getByTestId("lobby_joinCall").click(); + + // The media tile for the local user should become visible + await new Promise((resolve) => setTimeout(resolve, 1500)); + await expect(page.getByTestId("name_tag")).toContainText("Test user"); + + // Now disconnect from the internet + await page.route("https://synapse.m.localhost/**/*", async (route) => { + await new Promise((resolve) => setTimeout(resolve, 10000)); + await route.continue(); + }); + await page.clock.fastForward(20000); + + await expect( + page.getByRole("dialog", { name: "Reconnecting…" }), + ).toBeVisible(); + + // Tab order should jump directly from header to footer, skipping media tiles + await page.getByRole("button", { name: "Mute microphone" }).focus(); + await expect( + page.getByRole("button", { name: "Mute microphone" }), + ).toBeFocused(); + await page.keyboard.press("Tab"); + await expect(page.getByRole("button", { name: "Stop video" })).toBeFocused(); + // Most critically, we should be able to press the hangup button + await page.getByRole("button", { name: "End call" }).click(); +}); diff --git a/playwright/widget/simple-create.spec.ts b/playwright/widget/simple-create.spec.ts index 00d5c658..8c889892 100644 --- a/playwright/widget/simple-create.spec.ts +++ b/playwright/widget/simple-create.spec.ts @@ -49,7 +49,10 @@ widgetTest("Start a new call as widget", async ({ asWidget, browserName }) => { // Check the join indicator on the room list await expect( - brooks.page.locator("div").filter({ hasText: /^Joined • 1$/ }), + brooks.page + .locator('iframe[title="Element Call"]') + .contentFrame() + .getByRole("button", { name: "End call" }), ).toBeVisible(); // Join from the other side @@ -59,26 +62,28 @@ widgetTest("Start a new call as widget", async ({ asWidget, browserName }) => { ).toBeVisible(); await whistler.page.getByRole("button", { name: "Join" }).click(); - await expect( - whistler.page - .locator('iframe[title="Element Call"]') - .contentFrame() - .getByTestId("lobby_joinCall"), - ).toBeVisible(); + // Currently disabled due to recent Element Web is bypassing Lobby + // await expect( + // whistler.page + // .locator('iframe[title="Element Call"]') + // .contentFrame() + // .getByTestId("lobby_joinCall"), + // ).toBeVisible(); + // + // await whistler.page + // .locator('iframe[title="Element Call"]') + // .contentFrame() + // .getByTestId("lobby_joinCall") + // .click(); - await whistler.page - .locator('iframe[title="Element Call"]') - .contentFrame() - .getByTestId("lobby_joinCall") - .click(); + // Currrenty disabled due to recent Element Web not indicating the number of participants + // await expect( + // whistler.page.locator("div").filter({ hasText: /^Joined • 2$/ }), + // ).toBeVisible(); - await expect( - whistler.page.locator("div").filter({ hasText: /^Joined • 2$/ }), - ).toBeVisible(); - - await expect( - brooks.page.locator("div").filter({ hasText: /^Joined • 2$/ }), - ).toBeVisible(); + // await expect( + // brooks.page.locator("div").filter({ hasText: /^Joined • 2$/ }), + // ).toBeVisible(); // Whistler leaves await whistler.page.waitForTimeout(1000); diff --git a/src/MediaDevicesContext.ts b/src/MediaDevicesContext.ts index 3cf54c2a..801219b0 100644 --- a/src/MediaDevicesContext.ts +++ b/src/MediaDevicesContext.ts @@ -23,14 +23,6 @@ export function useMediaDevices(): MediaDevices { return mediaDevices; } -export const useIsEarpiece = (): boolean => { - const devices = useMediaDevices(); - const audioOutput = useObservableEagerState(devices.audioOutput.selected$); - const available = useObservableEagerState(devices.audioOutput.available$); - if (!audioOutput?.id) return false; - return available.get(audioOutput.id)?.type === "earpiece"; -}; - /** * A convenience hook to get the audio node configuration for the earpiece. * It will check the `useAsEarpiece` of the `audioOutput` device and return diff --git a/src/Overlay.module.css b/src/Overlay.module.css index fa972e6f..d711d05b 100644 --- a/src/Overlay.module.css +++ b/src/Overlay.module.css @@ -35,6 +35,8 @@ Please see LICENSE in the repository root for full details. .bg.animate[data-state="closed"] { animation: fade-out 130ms; + opacity: 0; + pointer-events: none; } .overlay { diff --git a/src/RTCConnectionStats.tsx b/src/RTCConnectionStats.tsx index dcd8d019..d51089cf 100644 --- a/src/RTCConnectionStats.tsx +++ b/src/RTCConnectionStats.tsx @@ -19,10 +19,26 @@ import mediaViewStyles from "../src/tile/MediaView.module.css"; interface Props { audio?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats; video?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats; + focusUrl?: string; } +const extractDomain = (url: string): string => { + try { + const parsedUrl = new URL(url); + return parsedUrl.hostname; // Returns "kdk.cpm" + } catch (error) { + console.error("Invalid URL:", error); + return url; + } +}; + // This is only used in developer mode for debugging purposes, so we don't need full localization -export const RTCConnectionStats: FC = ({ audio, video, ...rest }) => { +export const RTCConnectionStats: FC = ({ + audio, + video, + focusUrl, + ...rest +}) => { const [showModal, setShowModal] = useState(false); const [modalContents, setModalContents] = useState< "video" | "audio" | "none" @@ -55,6 +71,13 @@ export const RTCConnectionStats: FC = ({ audio, video, ...rest }) => { + {focusUrl && ( +
+ +  {extractDomain(focusUrl)} + +
+ )} {audio && (
; - }; - - const user = userEvent.setup(); - render( - - - - - , - ); - await user.click(screen.getByRole("button", { name: "Connect" })); - screen.getByText("Insufficient capacity"); - }, -); - -describe("Leaking connection prevention", () => { - function createTestComponent(mockRoom: Room): FC { - const TestComponent: FC = () => { - const [sfuConfig, setSfuConfig] = useState( - undefined, - ); - const connect = useCallback( - () => setSfuConfig({ url: "URL", jwt: "JWT token" }), - [], - ); - useECConnectionState("default", false, mockRoom, sfuConfig); - return ; - }; - return TestComponent; - } - - test("Should cancel pending connections when the component is unmounted", async () => { - const connectCall = vi.fn(); - const pendingConnection = defer(); - // let pendingDisconnection = defer() - const disconnectMock = vi.fn(); - - const mockRoom = { - on: () => {}, - off: () => {}, - once: () => {}, - connect: async () => { - connectCall.call(undefined); - return await pendingConnection.promise; - }, - disconnect: disconnectMock, - localParticipant: { - getTrackPublication: () => {}, - createTracks: () => [], - }, - } as unknown as Room; - - const TestComponent = createTestComponent(mockRoom); - - const { unmount } = render(); - const user = userEvent.setup(); - await user.click(screen.getByRole("button", { name: "Connect" })); - - expect(connectCall).toHaveBeenCalled(); - // unmount while the connection is pending - unmount(); - - // resolve the pending connection - pendingConnection.resolve(); - - await vitest.waitUntil( - () => { - return disconnectMock.mock.calls.length > 0; - }, - { - timeout: 1000, - interval: 100, - }, - ); - - // There should be some cleaning up to avoid leaking an open connection - expect(disconnectMock).toHaveBeenCalledTimes(1); - }); - - test("Should cancel about to open but not yet opened connection", async () => { - const createTracksCall = vi.fn(); - const pendingCreateTrack = defer(); - // let pendingDisconnection = defer() - const disconnectMock = vi.fn(); - const connectMock = vi.fn(); - - const mockRoom = { - on: () => {}, - off: () => {}, - once: () => {}, - connect: connectMock, - disconnect: disconnectMock, - localParticipant: { - getTrackPublication: () => {}, - createTracks: async () => { - createTracksCall.call(undefined); - await pendingCreateTrack.promise; - return []; - }, - }, - } as unknown as Room; - - const TestComponent = createTestComponent(mockRoom); - - const { unmount } = render(); - const user = userEvent.setup(); - await user.click(screen.getByRole("button", { name: "Connect" })); - - expect(createTracksCall).toHaveBeenCalled(); - // unmount while createTracks is pending - unmount(); - - // resolve createTracks - pendingCreateTrack.resolve(); - - // Yield to the event loop to let the connection attempt finish - await sleep(100); - - // The operation should have been aborted before even calling connect. - expect(connectMock).not.toHaveBeenCalled(); - }); -}); diff --git a/src/livekit/useECConnectionState.ts b/src/livekit/useECConnectionState.ts deleted file mode 100644 index 83b247e9..00000000 --- a/src/livekit/useECConnectionState.ts +++ /dev/null @@ -1,362 +0,0 @@ -/* -Copyright 2023, 2024 New Vector Ltd. - -SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial -Please see LICENSE in the repository root for full details. -*/ - -import { - ConnectionError, - ConnectionState, - type LocalTrack, - type Room, - RoomEvent, - Track, -} from "livekit-client"; -import { useCallback, useEffect, useRef, useState } from "react"; -import { logger } from "matrix-js-sdk/lib/logger"; -import * as Sentry from "@sentry/react"; - -import { type SFUConfig, sfuConfigEquals } from "./openIDSFU"; -import { PosthogAnalytics } from "../analytics/PosthogAnalytics"; -import { - ElementCallError, - InsufficientCapacityError, - SFURoomCreationRestrictedError, - UnknownCallError, -} from "../utils/errors.ts"; -import { AbortHandle } from "../utils/abortHandle.ts"; - -/* - * Additional values for states that a call can be in, beyond what livekit - * provides in ConnectionState. Also reconnects the call if the SFU Config - * changes. - */ -export enum ECAddonConnectionState { - // We are switching from one focus to another (or between livekit room aliases on the same focus) - ECSwitchingFocus = "ec_switching_focus", - // The call has just been initialised and is waiting for credentials to arrive before attempting - // to connect. This distinguishes from the 'Disconnected' state which is now just for when livekit - // gives up on connectivity and we consider the call to have failed. - ECWaiting = "ec_waiting", -} - -export type ECConnectionState = ConnectionState | ECAddonConnectionState; - -// This is mostly necessary because an empty useRef is an empty object -// which is truthy, so we can't just use Boolean(currentSFUConfig.current) -function sfuConfigValid(sfuConfig?: SFUConfig): boolean { - return Boolean(sfuConfig?.url) && Boolean(sfuConfig?.jwt); -} - -async function doConnect( - livekitRoom: Room, - sfuConfig: SFUConfig, - audioEnabled: boolean, - initialDeviceId: string | undefined, - abortHandle: AbortHandle, -): Promise { - // Always create an audio track manually. - // livekit (by default) keeps the mic track open when you mute, but if you start muted, - // doesn't publish it until you unmute. We want to publish it from the start so we're - // always capturing audio: it helps keep bluetooth headsets in the right mode and - // mobile browsers to know we're doing a call. - if ( - livekitRoom!.localParticipant.getTrackPublication(Track.Source.Microphone) - ) { - logger.warn( - "Pre-creating audio track but participant already appears to have an microphone track: this shouldn't happen!", - ); - Sentry.captureMessage( - "Pre-creating audio track but participant already appears to have an microphone track!", - ); - return; - } - - logger.info("Pre-creating microphone track"); - let preCreatedAudioTrack: LocalTrack | undefined; - try { - const audioTracks = await livekitRoom!.localParticipant.createTracks({ - audio: { deviceId: initialDeviceId }, - }); - - if (audioTracks.length < 1) { - logger.info("Tried to pre-create local audio track but got no tracks"); - } else { - preCreatedAudioTrack = audioTracks[0]; - } - // There was a yield point previously (awaiting for the track to be created) so we need to check - // if the operation was cancelled and stop connecting if needed. - if (abortHandle.isAborted()) { - logger.info( - "[Lifecycle] Signal Aborted: Pre-created audio track but connection aborted", - ); - preCreatedAudioTrack?.stop(); - return; - } - - logger.info("Pre-created microphone track"); - } catch (e) { - logger.error("Failed to pre-create microphone track", e); - } - - if (!audioEnabled) { - await preCreatedAudioTrack?.mute(); - // There was a yield point. Check if the operation was cancelled and stop connecting. - if (abortHandle.isAborted()) { - logger.info( - "[Lifecycle] Signal Aborted: Pre-created audio track but connection aborted", - ); - preCreatedAudioTrack?.stop(); - return; - } - } - - // check again having awaited for the track to create - if ( - livekitRoom!.localParticipant.getTrackPublication(Track.Source.Microphone) - ) { - logger.warn( - "Pre-created audio track but participant already appears to have an microphone track: this shouldn't happen!", - ); - preCreatedAudioTrack?.stop(); - return; - } - - logger.info("[Lifecycle] Connecting & publishing"); - try { - await connectAndPublish(livekitRoom, sfuConfig, preCreatedAudioTrack, []); - if (abortHandle.isAborted()) { - logger.info( - "[Lifecycle] Signal Aborted: Connected but operation was cancelled. Force disconnect", - ); - livekitRoom?.disconnect().catch((err) => { - logger.error("Failed to disconnect from SFU", err); - }); - return; - } - } catch (e) { - preCreatedAudioTrack?.stop(); - logger.debug("Stopped precreated audio tracks."); - throw e; - } -} - -/** - * Connect to the SFU and publish specific tracks, if provided. - * This is very specific to what we need to do: for instance, we don't - * currently have a need to prepublish video tracks. We just prepublish - * a mic track at the start of a call and copy any srceenshare tracks over - * when switching focus (because we can't re-acquire them without the user - * going through the dialog to choose them again). - */ -async function connectAndPublish( - livekitRoom: Room, - sfuConfig: SFUConfig, - micTrack: LocalTrack | undefined, - screenshareTracks: MediaStreamTrack[], -): Promise { - const tracker = PosthogAnalytics.instance.eventCallConnectDuration; - // Track call connect duration - tracker.cacheConnectStart(); - livekitRoom.once(RoomEvent.SignalConnected, tracker.cacheWsConnect); - - try { - logger.info(`[Lifecycle] Connecting to livekit room ${sfuConfig!.url} ...`); - await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt); - logger.info(`[Lifecycle] ... connected to livekit room`); - } catch (e) { - logger.error("[Lifecycle] Failed to connect", e); - // LiveKit uses 503 to indicate that the server has hit its track limits. - // https://github.com/livekit/livekit/blob/fcb05e97c5a31812ecf0ca6f7efa57c485cea9fb/pkg/service/rtcservice.go#L171 - // It also errors with a status code of 200 (yes, really) for room - // participant limits. - // LiveKit Cloud uses 429 for connection limits. - // Either way, all these errors can be explained as "insufficient capacity". - if (e instanceof ConnectionError) { - if (e.status === 503 || e.status === 200 || e.status === 429) { - throw new InsufficientCapacityError(); - } - if (e.status === 404) { - // error msg is "Could not establish signal connection: requested room does not exist" - // The room does not exist. There are two different modes of operation for the SFU: - // - the room is created on the fly when connecting (livekit `auto_create` option) - // - Only authorized users can create rooms, so the room must exist before connecting (done by the auth jwt service) - // In the first case there will not be a 404, so we are in the second case. - throw new SFURoomCreationRestrictedError(); - } - } - throw e; - } - - // remove listener in case the connect promise rejects before `SignalConnected` is emitted. - livekitRoom.off(RoomEvent.SignalConnected, tracker.cacheWsConnect); - tracker.track({ log: true }); - - if (micTrack) { - logger.info(`Publishing precreated mic track`); - await livekitRoom.localParticipant.publishTrack(micTrack, { - source: Track.Source.Microphone, - }); - } - - logger.info( - `Publishing ${screenshareTracks.length} precreated screenshare tracks`, - ); - for (const st of screenshareTracks) { - livekitRoom.localParticipant - .publishTrack(st, { - source: Track.Source.ScreenShare, - }) - .catch((e) => { - logger.error("Failed to publish screenshare track", e); - }); - } -} - -export function useECConnectionState( - initialDeviceId: string | undefined, - initialAudioEnabled: boolean, - livekitRoom?: Room, - sfuConfig?: SFUConfig, -): ECConnectionState { - const [connState, setConnState] = useState( - sfuConfig && livekitRoom - ? livekitRoom.state - : ECAddonConnectionState.ECWaiting, - ); - - const [isSwitchingFocus, setSwitchingFocus] = useState(false); - const [isInDoConnect, setIsInDoConnect] = useState(false); - const [error, setError] = useState(null); - if (error !== null) throw error; - - const onConnStateChanged = useCallback((state: ConnectionState) => { - if (state == ConnectionState.Connected) setSwitchingFocus(false); - setConnState(state); - }, []); - - useEffect(() => { - const oldRoom = livekitRoom; - - if (livekitRoom) { - livekitRoom.on(RoomEvent.ConnectionStateChanged, onConnStateChanged); - } - - return (): void => { - if (oldRoom) - oldRoom.off(RoomEvent.ConnectionStateChanged, onConnStateChanged); - }; - }, [livekitRoom, onConnStateChanged]); - - const doFocusSwitch = useCallback(async (): Promise => { - const screenshareTracks: MediaStreamTrack[] = []; - for (const t of livekitRoom!.localParticipant.videoTrackPublications.values()) { - if (t.track && t.source == Track.Source.ScreenShare) { - const newTrack = t.track.mediaStreamTrack.clone(); - newTrack.enabled = true; - screenshareTracks.push(newTrack); - } - } - - // Flag that we're currently switching focus. This will get reset when the - // connection state changes back to connected in onConnStateChanged above. - setSwitchingFocus(true); - await livekitRoom?.disconnect(); - setIsInDoConnect(true); - try { - await connectAndPublish( - livekitRoom!, - sfuConfig!, - undefined, - screenshareTracks, - ); - } finally { - setIsInDoConnect(false); - } - }, [livekitRoom, sfuConfig]); - - const currentSFUConfig = useRef(Object.assign({}, sfuConfig)); - - // Protection against potential leaks, where the component to be unmounted and there is - // still a pending doConnect promise. This would lead the user to still be in the call even - // if the component is unmounted. - const abortHandlesBag = useRef(new Set()); - - // This is a cleanup function that will be called when the component is about to be unmounted. - // It will cancel all abortHandles in the bag - useEffect(() => { - const bag = abortHandlesBag.current; - return (): void => { - bag.forEach((handle) => { - handle.abort(); - }); - }; - }, []); - - // Id we are transitioning from a valid config to another valid one, we need - // to explicitly switch focus - useEffect(() => { - if ( - sfuConfigValid(sfuConfig) && - sfuConfigValid(currentSFUConfig.current) && - !sfuConfigEquals(currentSFUConfig.current, sfuConfig) - ) { - logger.info( - `SFU config changed! URL was ${currentSFUConfig.current?.url} now ${sfuConfig?.url}`, - ); - - doFocusSwitch().catch((e) => { - logger.error("Failed to switch focus", e); - }); - } else if ( - !sfuConfigValid(currentSFUConfig.current) && - sfuConfigValid(sfuConfig) - ) { - // if we're transitioning from an invalid config to a valid one (ie. connecting) - // then do an initial connection, including publishing the microphone track: - // livekit (by default) keeps the mic track open when you mute, but if you start muted, - // doesn't publish it until you unmute. We want to publish it from the start so we're - // always capturing audio: it helps keep bluetooth headsets in the right mode and - // mobile browsers to know we're doing a call. - setIsInDoConnect(true); - const abortHandle = new AbortHandle(); - abortHandlesBag.current.add(abortHandle); - doConnect( - livekitRoom!, - sfuConfig!, - initialAudioEnabled, - initialDeviceId, - abortHandle, - ) - .catch((e) => { - if (e instanceof ElementCallError) { - setError(e); // Bubble up any error screens to React - } else if (e instanceof Error) { - setError(new UnknownCallError(e)); - } else logger.error("Failed to connect to SFU", e); - }) - .finally(() => { - abortHandlesBag.current.delete(abortHandle); - setIsInDoConnect(false); - }); - } - - currentSFUConfig.current = Object.assign({}, sfuConfig); - }, [ - sfuConfig, - livekitRoom, - initialDeviceId, - initialAudioEnabled, - doFocusSwitch, - ]); - - // Because we create audio tracks by hand, there's more to connecting than - // just what LiveKit does in room.connect, and we should continue to return - // ConnectionState.Connecting for the entire duration of the doConnect promise - return isSwitchingFocus - ? ECAddonConnectionState.ECSwitchingFocus - : isInDoConnect - ? ConnectionState.Connecting - : connState; -} diff --git a/src/livekit/useLivekit.ts b/src/livekit/useLivekit.ts deleted file mode 100644 index 24e0ca29..00000000 --- a/src/livekit/useLivekit.ts +++ /dev/null @@ -1,403 +0,0 @@ -/* -Copyright 2023, 2024 New Vector Ltd. - -SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial -Please see LICENSE in the repository root for full details. -*/ - -import { - ConnectionState, - type E2EEManagerOptions, - ExternalE2EEKeyProvider, - LocalVideoTrack, - Room, - type RoomOptions, - Track, -} from "livekit-client"; -import { useEffect, useRef } from "react"; -import E2EEWorker from "livekit-client/e2ee-worker?worker"; -import { logger } from "matrix-js-sdk/lib/logger"; -import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc"; -import { useObservable, useObservableEagerState } from "observable-hooks"; -import { - map, - NEVER, - type Observable, - type Subscription, - switchMap, -} from "rxjs"; - -import { defaultLiveKitOptions } from "./options"; -import { type SFUConfig } from "./openIDSFU"; -import { type MuteStates } from "../room/MuteStates"; -import { useMediaDevices } from "../MediaDevicesContext"; -import { - type ECConnectionState, - useECConnectionState, -} from "./useECConnectionState"; -import { MatrixKeyProvider } from "../e2ee/matrixKeyProvider"; -import { E2eeType } from "../e2ee/e2eeType"; -import { type EncryptionSystem } from "../e2ee/sharedKeyManagement"; -import { - useTrackProcessor, - useTrackProcessorSync, -} from "./TrackProcessorContext"; -import { observeTrackReference$ } from "../state/MediaViewModel"; -import { useUrlParams } from "../UrlParams"; -import { useInitial } from "../useInitial"; -import { getValue } from "../utils/observable"; -import { type SelectedDevice } from "../state/MediaDevices"; - -interface UseLivekitResult { - livekitRoom?: Room; - connState: ECConnectionState; -} - -export function useLivekit( - rtcSession: MatrixRTCSession, - muteStates: MuteStates, - sfuConfig: SFUConfig | undefined, - e2eeSystem: EncryptionSystem, -): UseLivekitResult { - const { controlledAudioDevices } = useUrlParams(); - - const initialMuteStates = useInitial(() => muteStates); - - const devices = useMediaDevices(); - const initialAudioInputId = useInitial( - () => getValue(devices.audioInput.selected$)?.id, - ); - - // Store if audio/video are currently updating. If to prohibit unnecessary calls - // to setMicrophoneEnabled/setCameraEnabled - const audioMuteUpdating = useRef(false); - const videoMuteUpdating = useRef(false); - // Store the current button mute state that gets passed to this hook via props. - // We need to store it for awaited code that relies on the current value. - const buttonEnabled = useRef({ - audio: initialMuteStates.audio.enabled, - video: initialMuteStates.video.enabled, - }); - - const { processor } = useTrackProcessor(); - - // Only ever create the room once via useInitial. - const room = useInitial(() => { - logger.info("[LivekitRoom] Create LiveKit room"); - - let e2ee: E2EEManagerOptions | undefined; - if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) { - logger.info("Created MatrixKeyProvider (per participant)"); - e2ee = { - keyProvider: new MatrixKeyProvider(), - worker: new E2EEWorker(), - }; - } else if (e2eeSystem.kind === E2eeType.SHARED_KEY && e2eeSystem.secret) { - logger.info("Created ExternalE2EEKeyProvider (shared key)"); - e2ee = { - keyProvider: new ExternalE2EEKeyProvider(), - worker: new E2EEWorker(), - }; - } - - const roomOptions: RoomOptions = { - ...defaultLiveKitOptions, - videoCaptureDefaults: { - ...defaultLiveKitOptions.videoCaptureDefaults, - deviceId: getValue(devices.videoInput.selected$)?.id, - processor, - }, - audioCaptureDefaults: { - ...defaultLiveKitOptions.audioCaptureDefaults, - deviceId: initialAudioInputId, - }, - audioOutput: { - // When using controlled audio devices, we don't want to set the - // deviceId here, because it will be set by the native app. - // (also the id does not need to match a browser device id) - deviceId: controlledAudioDevices - ? undefined - : getValue(devices.audioOutput.selected$)?.id, - }, - e2ee, - }; - // We have to create the room manually here due to a bug inside - // @livekit/components-react. JSON.stringify() is used in deps of a - // useEffect() with an argument that references itself, if E2EE is enabled - const room = new Room(roomOptions); - room.setE2EEEnabled(e2eeSystem.kind !== E2eeType.NONE).catch((e) => { - logger.error("Failed to set E2EE enabled on room", e); - }); - - return room; - }); - - // Setup and update the keyProvider which was create by `createRoom` - useEffect(() => { - const e2eeOptions = room.options.e2ee; - if ( - e2eeSystem.kind === E2eeType.NONE || - !(e2eeOptions && "keyProvider" in e2eeOptions) - ) - return; - - if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) { - (e2eeOptions.keyProvider as MatrixKeyProvider).setRTCSession(rtcSession); - } else if (e2eeSystem.kind === E2eeType.SHARED_KEY && e2eeSystem.secret) { - (e2eeOptions.keyProvider as ExternalE2EEKeyProvider) - .setKey(e2eeSystem.secret) - .catch((e) => { - logger.error("Failed to set shared key for E2EE", e); - }); - } - }, [room.options.e2ee, e2eeSystem, rtcSession]); - - // Sync the requested track processors with LiveKit - useTrackProcessorSync( - useObservableEagerState( - useObservable( - (room$) => - room$.pipe( - switchMap(([room]) => - observeTrackReference$( - room.localParticipant, - Track.Source.Camera, - ), - ), - map((trackRef) => { - const track = trackRef?.publication?.track; - return track instanceof LocalVideoTrack ? track : null; - }), - ), - [room], - ), - ), - ); - - const connectionState = useECConnectionState( - initialAudioInputId, - initialMuteStates.audio.enabled, - room, - sfuConfig, - ); - - useEffect(() => { - // Sync the requested mute states with LiveKit's mute states. We do it this - // way around rather than using LiveKit as the source of truth, so that the - // states can be consistent throughout the lobby and loading screens. - // It's important that we only do this in the connected state, because - // LiveKit's internal mute states aren't consistent during connection setup, - // and setting tracks to be enabled during this time causes errors. - if (room !== undefined && connectionState === ConnectionState.Connected) { - const participant = room.localParticipant; - // Always update the muteButtonState Ref so that we can read the current - // state in awaited blocks. - buttonEnabled.current = { - audio: muteStates.audio.enabled, - video: muteStates.video.enabled, - }; - - enum MuteDevice { - Microphone, - Camera, - } - - const syncMuteState = async ( - iterCount: number, - type: MuteDevice, - ): Promise => { - // The approach for muting is to always bring the actual livekit state in sync with the button - // This allows for a very predictable and reactive behavior for the user. - // (the new state is the old state when pressing the button n times (where n is even)) - // (the new state is different to the old state when pressing the button n times (where n is uneven)) - // In case there are issues with the device there might be situations where setMicrophoneEnabled/setCameraEnabled - // return immediately. This should be caught with the Error("track with new mute state could not be published"). - // For now we are still using an iterCount to limit the recursion loop to 10. - // This could happen if the device just really does not want to turn on (hardware based issue) - // but the mute button is in unmute state. - // For now our fail mode is to just stay in this state. - // TODO: decide for a UX on how that fail mode should be treated (disable button, hide button, sync button back to muted without user input) - - if (iterCount > 10) { - logger.error( - "Stop trying to sync the input device with current mute state after 10 failed tries", - ); - return; - } - let devEnabled; - let btnEnabled; - let updating; - switch (type) { - case MuteDevice.Microphone: - devEnabled = participant.isMicrophoneEnabled; - btnEnabled = buttonEnabled.current.audio; - updating = audioMuteUpdating.current; - break; - case MuteDevice.Camera: - devEnabled = participant.isCameraEnabled; - btnEnabled = buttonEnabled.current.video; - updating = videoMuteUpdating.current; - break; - } - if (devEnabled !== btnEnabled && !updating) { - try { - let trackPublication; - switch (type) { - case MuteDevice.Microphone: - audioMuteUpdating.current = true; - trackPublication = await participant.setMicrophoneEnabled( - buttonEnabled.current.audio, - room.options.audioCaptureDefaults, - ); - audioMuteUpdating.current = false; - break; - case MuteDevice.Camera: - videoMuteUpdating.current = true; - trackPublication = await participant.setCameraEnabled( - buttonEnabled.current.video, - room.options.videoCaptureDefaults, - ); - videoMuteUpdating.current = false; - break; - } - - if (trackPublication) { - // await participant.setMicrophoneEnabled can return immediately in some instances, - // so that participant.isMicrophoneEnabled !== buttonEnabled.current.audio still holds true. - // This happens if the device is still in a pending state - // "sleeping" here makes sure we let react do its thing so that participant.isMicrophoneEnabled is updated, - // so we do not end up in a recursion loop. - await new Promise((r) => setTimeout(r, 100)); - - // track got successfully changed to mute/unmute - // Run the check again after the change is done. Because the user - // can update the state (presses mute button) while the device is enabling - // itself we need might need to update the mute state right away. - // This async recursion makes sure that setCamera/MicrophoneEnabled is - // called as little times as possible. - await syncMuteState(iterCount + 1, type); - } else { - throw new Error( - "track with new mute state could not be published", - ); - } - } catch (e) { - if ((e as DOMException).name === "NotAllowedError") { - logger.error( - "Fatal error while syncing mute state: resetting", - e, - ); - if (type === MuteDevice.Microphone) { - audioMuteUpdating.current = false; - muteStates.audio.setEnabled?.(false); - } else { - videoMuteUpdating.current = false; - muteStates.video.setEnabled?.(false); - } - } else { - logger.error( - "Failed to sync audio mute state with LiveKit (will retry to sync in 1s):", - e, - ); - setTimeout(() => { - syncMuteState(iterCount + 1, type).catch((e) => { - logger.error( - `Failed to sync ${MuteDevice[type]} mute state with LiveKit iterCount=${iterCount + 1}`, - e, - ); - }); - }, 1000); - } - } - } - }; - - syncMuteState(0, MuteDevice.Microphone).catch((e) => { - logger.error("Failed to sync audio mute state with LiveKit", e); - }); - syncMuteState(0, MuteDevice.Camera).catch((e) => { - logger.error("Failed to sync video mute state with LiveKit", e); - }); - } - }, [room, muteStates, connectionState]); - - useEffect(() => { - // Sync the requested devices with LiveKit's devices - if (room !== undefined && connectionState === ConnectionState.Connected) { - const syncDevice = ( - kind: MediaDeviceKind, - selected$: Observable, - ): Subscription => - selected$.subscribe((device) => { - logger.info( - "[LivekitRoom] syncDevice room.getActiveDevice(kind) !== d.id :", - room.getActiveDevice(kind), - " !== ", - device?.id, - ); - if ( - device !== undefined && - room.getActiveDevice(kind) !== device.id - ) { - room - .switchActiveDevice(kind, device.id) - .catch((e) => - logger.error(`Failed to sync ${kind} device with LiveKit`, e), - ); - } - }); - - const subscriptions = [ - syncDevice("audioinput", devices.audioInput.selected$), - !controlledAudioDevices - ? syncDevice("audiooutput", devices.audioOutput.selected$) - : undefined, - syncDevice("videoinput", devices.videoInput.selected$), - // Restart the audio input track whenever we detect that the active media - // device has changed to refer to a different hardware device. We do this - // for the sake of Chrome, which provides a "default" device that is meant - // to match the system's default audio input, whatever that may be. - // This is special-cased for only audio inputs because we need to dig around - // in the LocalParticipant object for the track object and there's not a nice - // way to do that generically. There is usually no OS-level default video capture - // device anyway, and audio outputs work differently. - devices.audioInput.selected$ - .pipe(switchMap((device) => device?.hardwareDeviceChange$ ?? NEVER)) - .subscribe(() => { - const activeMicTrack = Array.from( - room.localParticipant.audioTrackPublications.values(), - ).find((d) => d.source === Track.Source.Microphone)?.track; - - if ( - activeMicTrack && - // only restart if the stream is still running: LiveKit will detect - // when a track stops & restart appropriately, so this is not our job. - // Plus, we need to avoid restarting again if the track is already in - // the process of being restarted. - activeMicTrack.mediaStreamTrack.readyState !== "ended" - ) { - // Restart the track, which will cause Livekit to do another - // getUserMedia() call with deviceId: default to get the *new* default device. - // Note that room.switchActiveDevice() won't work: Livekit will ignore it because - // the deviceId hasn't changed (was & still is default). - room.localParticipant - .getTrackPublication(Track.Source.Microphone) - ?.audioTrack?.restartTrack() - .catch((e) => { - logger.error(`Failed to restart audio device track`, e); - }); - } - }), - ]; - - return (): void => { - for (const s of subscriptions) s?.unsubscribe(); - }; - } - }, [room, devices, connectionState, controlledAudioDevices]); - - return { - connState: connectionState, - livekitRoom: room, - }; -} diff --git a/src/main.tsx b/src/main.tsx index 755d1b96..55d68d5a 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -24,6 +24,7 @@ import { App } from "./App"; import { init as initRageshake } from "./settings/rageshake"; import { Initializer } from "./initializer"; import { AppViewModel } from "./state/AppViewModel"; +import { globalScope } from "./state/ObservableScope"; window.setLKLogLevel = setLKLogLevel; @@ -61,7 +62,7 @@ Initializer.initBeforeReact() .then(() => { root.render( - + , ); }) diff --git a/src/reactions/RaisedHandIndicator.test.tsx b/src/reactions/RaisedHandIndicator.test.tsx index fedd8ec2..62e3ffb5 100644 --- a/src/reactions/RaisedHandIndicator.test.tsx +++ b/src/reactions/RaisedHandIndicator.test.tsx @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ -import { describe, expect, test } from "vitest"; +import { beforeEach, describe, expect, test, vi } from "vitest"; import { render, configure } from "@testing-library/react"; import { RaisedHandIndicator } from "./RaisedHandIndicator"; @@ -15,6 +15,13 @@ configure({ }); describe("RaisedHandIndicator", () => { + const fixedTime = new Date("2025-01-01T12:00:00.000Z"); + + beforeEach(() => { + vi.useFakeTimers(); + vi.setSystemTime(fixedTime); + }); + test("renders nothing when no hand has been raised", () => { const { container } = render(); expect(container.firstChild).toBeNull(); diff --git a/src/reactions/RaisedHandIndicator.tsx b/src/reactions/RaisedHandIndicator.tsx index 12974849..67d9cf16 100644 --- a/src/reactions/RaisedHandIndicator.tsx +++ b/src/reactions/RaisedHandIndicator.tsx @@ -22,11 +22,13 @@ export function RaisedHandIndicator({ miniature, showTimer, onClick, + tabIndex, }: { raisedHandTime?: Date; miniature?: boolean; showTimer?: boolean; onClick?: () => void; + tabIndex?: number; }): ReactNode { const { t } = useTranslation(); const [raisedHandDuration, setRaisedHandDuration] = useState(""); @@ -94,6 +96,7 @@ export function RaisedHandIndicator({ background: "none", }} onClick={clickCallback} + tabIndex={tabIndex} > {content} diff --git a/src/reactions/ReactionsReader.test.tsx b/src/reactions/ReactionsReader.test.tsx index b8acf5c7..dd82a718 100644 --- a/src/reactions/ReactionsReader.test.tsx +++ b/src/reactions/ReactionsReader.test.tsx @@ -7,7 +7,6 @@ Please see LICENSE in the repository root for full details. import { renderHook } from "@testing-library/react"; import { afterEach, test, vitest } from "vitest"; -import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc"; import { RoomEvent as MatrixRoomEvent, MatrixEvent, @@ -24,7 +23,7 @@ import { localRtcMember, } from "../utils/test-fixtures"; import { getBasicRTCSession } from "../utils/test-viewmodel"; -import { withTestScheduler } from "../utils/test"; +import { testScope, withTestScheduler } from "../utils/test"; import { ElementCallReactionEventType, ReactionSet } from "."; afterEach(() => { @@ -38,7 +37,8 @@ test("handles a hand raised reaction", () => { withTestScheduler(({ schedule, expectObservable }) => { renderHook(() => { const { raisedHands$ } = new ReactionsReader( - rtcSession as unknown as MatrixRTCSession, + testScope(), + rtcSession.asMockedSession(), ); schedule("ab", { a: () => {}, @@ -48,7 +48,7 @@ test("handles a hand raised reaction", () => { new MatrixEvent({ room_id: rtcSession.room.roomId, event_id: reactionEventId, - sender: localRtcMember.sender, + sender: localRtcMember.userId, type: EventType.Reaction, origin_server_ts: localTimestamp.getTime(), content: { @@ -68,7 +68,7 @@ test("handles a hand raised reaction", () => { expectObservable(raisedHands$).toBe("ab", { a: {}, b: { - [`${localRtcMember.sender}:${localRtcMember.deviceId}`]: { + [`${localRtcMember.userId}:${localRtcMember.deviceId}`]: { reactionEventId, membershipEventId: localRtcMember.eventId, time: localTimestamp, @@ -86,7 +86,8 @@ test("handles a redaction", () => { withTestScheduler(({ schedule, expectObservable }) => { renderHook(() => { const { raisedHands$ } = new ReactionsReader( - rtcSession as unknown as MatrixRTCSession, + testScope(), + rtcSession.asMockedSession(), ); schedule("abc", { a: () => {}, @@ -96,7 +97,7 @@ test("handles a redaction", () => { new MatrixEvent({ room_id: rtcSession.room.roomId, event_id: reactionEventId, - sender: localRtcMember.sender, + sender: localRtcMember.userId, type: EventType.Reaction, origin_server_ts: localTimestamp.getTime(), content: { @@ -118,7 +119,7 @@ test("handles a redaction", () => { new MatrixEvent({ room_id: rtcSession.room.roomId, event_id: reactionEventId, - sender: localRtcMember.sender, + sender: localRtcMember.userId, type: EventType.RoomRedaction, redacts: reactionEventId, }), @@ -130,7 +131,7 @@ test("handles a redaction", () => { expectObservable(raisedHands$).toBe("abc", { a: {}, b: { - [`${localRtcMember.sender}:${localRtcMember.deviceId}`]: { + [`${localRtcMember.userId}:${localRtcMember.deviceId}`]: { reactionEventId, membershipEventId: localRtcMember.eventId, time: localTimestamp, @@ -149,7 +150,8 @@ test("handles waiting for event decryption", () => { withTestScheduler(({ schedule, expectObservable }) => { renderHook(() => { const { raisedHands$ } = new ReactionsReader( - rtcSession as unknown as MatrixRTCSession, + testScope(), + rtcSession.asMockedSession(), ); schedule("abc", { a: () => {}, @@ -157,7 +159,7 @@ test("handles waiting for event decryption", () => { const encryptedEvent = new MatrixEvent({ room_id: rtcSession.room.roomId, event_id: reactionEventId, - sender: localRtcMember.sender, + sender: localRtcMember.userId, type: EventType.Reaction, origin_server_ts: localTimestamp.getTime(), content: { @@ -184,7 +186,7 @@ test("handles waiting for event decryption", () => { new MatrixEvent({ room_id: rtcSession.room.roomId, event_id: reactionEventId, - sender: localRtcMember.sender, + sender: localRtcMember.userId, type: EventType.Reaction, origin_server_ts: localTimestamp.getTime(), content: { @@ -200,7 +202,7 @@ test("handles waiting for event decryption", () => { expectObservable(raisedHands$).toBe("a-c", { a: {}, c: { - [`${localRtcMember.sender}:${localRtcMember.deviceId}`]: { + [`${localRtcMember.userId}:${localRtcMember.deviceId}`]: { reactionEventId, membershipEventId: localRtcMember.eventId, time: localTimestamp, @@ -218,7 +220,8 @@ test("hands rejecting events without a proper membership", () => { withTestScheduler(({ schedule, expectObservable }) => { renderHook(() => { const { raisedHands$ } = new ReactionsReader( - rtcSession as unknown as MatrixRTCSession, + testScope(), + rtcSession.asMockedSession(), ); schedule("ab", { a: () => {}, @@ -228,7 +231,7 @@ test("hands rejecting events without a proper membership", () => { new MatrixEvent({ room_id: rtcSession.room.roomId, event_id: reactionEventId, - sender: localRtcMember.sender, + sender: localRtcMember.userId, type: EventType.Reaction, origin_server_ts: localTimestamp.getTime(), content: { @@ -263,7 +266,8 @@ test("handles a reaction", () => { withTestScheduler(({ schedule, time, expectObservable }) => { renderHook(() => { const { reactions$ } = new ReactionsReader( - rtcSession as unknown as MatrixRTCSession, + testScope(), + rtcSession.asMockedSession(), ); schedule(`abc`, { a: () => {}, @@ -273,7 +277,7 @@ test("handles a reaction", () => { new MatrixEvent({ room_id: rtcSession.room.roomId, event_id: reactionEventId, - sender: localRtcMember.sender, + sender: localRtcMember.userId, type: ElementCallReactionEventType, content: { emoji: reaction.emoji, @@ -298,7 +302,7 @@ test("handles a reaction", () => { { a: {}, b: { - [`${localRtcMember.sender}:${localRtcMember.deviceId}`]: { + [`${localRtcMember.userId}:${localRtcMember.deviceId}`]: { reactionOption: reaction, expireAfter: new Date(REACTION_ACTIVE_TIME_MS), }, @@ -321,7 +325,8 @@ test("ignores bad reaction events", () => { withTestScheduler(({ schedule, expectObservable }) => { renderHook(() => { const { reactions$ } = new ReactionsReader( - rtcSession as unknown as MatrixRTCSession, + testScope(), + rtcSession.asMockedSession(), ); schedule("ab", { a: () => {}, @@ -332,7 +337,7 @@ test("ignores bad reaction events", () => { new MatrixEvent({ room_id: rtcSession.room.roomId, event_id: reactionEventId, - sender: localRtcMember.sender, + sender: localRtcMember.userId, type: ElementCallReactionEventType, content: {}, }), @@ -347,7 +352,7 @@ test("ignores bad reaction events", () => { new MatrixEvent({ room_id: rtcSession.room.roomId, event_id: reactionEventId, - sender: localRtcMember.sender, + sender: localRtcMember.userId, type: ElementCallReactionEventType, content: { emoji: reaction.emoji, @@ -368,7 +373,7 @@ test("ignores bad reaction events", () => { new MatrixEvent({ room_id: rtcSession.room.roomId, event_id: reactionEventId, - sender: aliceRtcMember.sender, + sender: aliceRtcMember.userId, type: ElementCallReactionEventType, content: { emoji: reaction.emoji, @@ -389,7 +394,7 @@ test("ignores bad reaction events", () => { new MatrixEvent({ room_id: rtcSession.room.roomId, event_id: reactionEventId, - sender: localRtcMember.sender, + sender: localRtcMember.userId, type: ElementCallReactionEventType, content: { name: reaction.name, @@ -409,7 +414,7 @@ test("ignores bad reaction events", () => { new MatrixEvent({ room_id: rtcSession.room.roomId, event_id: reactionEventId, - sender: localRtcMember.sender, + sender: localRtcMember.userId, type: ElementCallReactionEventType, content: { emoji: " ", @@ -445,7 +450,8 @@ test("that reactions cannot be spammed", () => { withTestScheduler(({ schedule, expectObservable }) => { renderHook(() => { const { reactions$ } = new ReactionsReader( - rtcSession as unknown as MatrixRTCSession, + testScope(), + rtcSession.asMockedSession(), ); schedule("abcd", { a: () => {}, @@ -455,7 +461,7 @@ test("that reactions cannot be spammed", () => { new MatrixEvent({ room_id: rtcSession.room.roomId, event_id: reactionEventId, - sender: localRtcMember.sender, + sender: localRtcMember.userId, type: ElementCallReactionEventType, content: { emoji: reactionA.emoji, @@ -477,7 +483,7 @@ test("that reactions cannot be spammed", () => { new MatrixEvent({ room_id: rtcSession.room.roomId, event_id: reactionEventId, - sender: localRtcMember.sender, + sender: localRtcMember.userId, type: ElementCallReactionEventType, content: { emoji: reactionB.emoji, @@ -502,7 +508,7 @@ test("that reactions cannot be spammed", () => { { a: {}, b: { - [`${localRtcMember.sender}:${localRtcMember.deviceId}`]: { + [`${localRtcMember.userId}:${localRtcMember.deviceId}`]: { reactionOption: reactionA, expireAfter: new Date(REACTION_ACTIVE_TIME_MS), }, diff --git a/src/reactions/ReactionsReader.ts b/src/reactions/ReactionsReader.ts index b630f4b9..74b47c77 100644 --- a/src/reactions/ReactionsReader.ts +++ b/src/reactions/ReactionsReader.ts @@ -18,7 +18,7 @@ import { EventType, RoomEvent as MatrixRoomEvent, } from "matrix-js-sdk"; -import { BehaviorSubject, delay, type Subscription } from "rxjs"; +import { BehaviorSubject, delay } from "rxjs"; import { ElementCallReactionEventType, @@ -28,6 +28,7 @@ import { type RaisedHandInfo, type ReactionInfo, } from "."; +import { type ObservableScope } from "../state/ObservableScope"; export const REACTION_ACTIVE_TIME_MS = 3000; @@ -54,12 +55,13 @@ export class ReactionsReader { */ public readonly reactions$ = this.reactionsSubject$.asObservable(); - private readonly reactionsSub: Subscription; - - public constructor(private readonly rtcSession: MatrixRTCSession) { + public constructor( + private readonly scope: ObservableScope, + private readonly rtcSession: MatrixRTCSession, + ) { // Hide reactions after a given time. - this.reactionsSub = this.reactionsSubject$ - .pipe(delay(REACTION_ACTIVE_TIME_MS)) + this.reactionsSubject$ + .pipe(delay(REACTION_ACTIVE_TIME_MS), this.scope.bind()) .subscribe((reactions) => { const date = new Date(); const nextEntries = Object.fromEntries( @@ -71,15 +73,38 @@ export class ReactionsReader { this.reactionsSubject$.next(nextEntries); }); + // TODO: Convert this class to the functional reactive style and get rid of + // all this manual setup and teardown for event listeners + this.rtcSession.room.on(MatrixRoomEvent.Timeline, this.handleReactionEvent); + this.scope.onEnd(() => + this.rtcSession.room.off( + MatrixRoomEvent.Timeline, + this.handleReactionEvent, + ), + ); + this.rtcSession.room.on( MatrixRoomEvent.Redaction, this.handleReactionEvent, ); + this.scope.onEnd(() => + this.rtcSession.room.off( + MatrixRoomEvent.Redaction, + this.handleReactionEvent, + ), + ); + this.rtcSession.room.client.on( MatrixEventEvent.Decrypted, this.handleReactionEvent, ); + this.scope.onEnd(() => + this.rtcSession.room.client.off( + MatrixEventEvent.Decrypted, + this.handleReactionEvent, + ), + ); // We listen for a local echo to get the real event ID, as timeline events // may still be sending. @@ -87,11 +112,23 @@ export class ReactionsReader { MatrixRoomEvent.LocalEchoUpdated, this.handleReactionEvent, ); + this.scope.onEnd(() => + this.rtcSession.room.off( + MatrixRoomEvent.LocalEchoUpdated, + this.handleReactionEvent, + ), + ); - rtcSession.on( + this.rtcSession.on( MatrixRTCSessionEvent.MembershipsChanged, this.onMembershipsChanged, ); + this.scope.onEnd(() => + this.rtcSession.off( + MatrixRTCSessionEvent.MembershipsChanged, + this.onMembershipsChanged, + ), + ); // Run this once to ensure we have fetched the state from the call. this.onMembershipsChanged([]); @@ -130,7 +167,7 @@ export class ReactionsReader { private onMembershipsChanged = (oldMemberships: CallMembership[]): void => { // Remove any raised hands for users no longer joined to the call. for (const identifier of Object.keys(this.raisedHandsSubject$.value).filter( - (rhId) => oldMemberships.find((u) => u.sender == rhId), + (rhId) => oldMemberships.find((u) => u.userId == rhId), )) { this.removeRaisedHand(identifier); } @@ -138,10 +175,10 @@ export class ReactionsReader { // For each member in the call, check to see if a reaction has // been raised and adjust. for (const m of this.rtcSession.memberships) { - if (!m.sender || !m.eventId) { + if (!m.userId || !m.eventId) { continue; } - const identifier = `${m.sender}:${m.deviceId}`; + const identifier = `${m.userId}:${m.deviceId}`; if ( this.raisedHandsSubject$.value[identifier] && this.raisedHandsSubject$.value[identifier].membershipEventId !== @@ -151,13 +188,13 @@ export class ReactionsReader { // was raised, reset. this.removeRaisedHand(identifier); } - const reaction = this.getLastReactionEvent(m.eventId, m.sender); + const reaction = this.getLastReactionEvent(m.eventId, m.userId); if (reaction) { const eventId = reaction?.getId(); if (!eventId) { continue; } - this.addRaisedHand(`${m.sender}:${m.deviceId}`, { + this.addRaisedHand(`${m.userId}:${m.deviceId}`, { membershipEventId: m.eventId, reactionEventId: eventId, time: new Date(reaction.localTimestamp), @@ -219,7 +256,7 @@ export class ReactionsReader { const membershipEventId = content?.["m.relates_to"]?.event_id; const membershipEvent = this.rtcSession.memberships.find( - (e) => e.eventId === membershipEventId && e.sender === sender, + (e) => e.eventId === membershipEventId && e.userId === sender, ); // Check to see if this reaction was made to a membership event (and the // sender of the reaction matches the membership) @@ -229,7 +266,8 @@ export class ReactionsReader { ); return; } - const identifier = `${membershipEvent.sender}:${membershipEvent.deviceId}`; + // TODO refactor to use memer id `membershipEvent.membershipID` (needs to happen in combination with other memberId refactors) + const identifier = `${membershipEvent.userId}:${membershipEvent.deviceId}`; if (!content.emoji) { logger.warn(`Reaction had no emoji from ${reactionEventId}`); @@ -278,7 +316,7 @@ export class ReactionsReader { // Check to see if this reaction was made to a membership event (and the // sender of the reaction matches the membership) const membershipEvent = this.rtcSession.memberships.find( - (e) => e.eventId === membershipEventId && e.sender === sender, + (e) => e.eventId === membershipEventId && e.userId === sender, ); if (!membershipEvent) { logger.warn( @@ -289,7 +327,7 @@ export class ReactionsReader { if (content?.["m.relates_to"].key === "🖐️") { this.addRaisedHand( - `${membershipEvent.sender}:${membershipEvent.deviceId}`, + `${membershipEvent.userId}:${membershipEvent.deviceId}`, { reactionEventId, membershipEventId, @@ -309,31 +347,4 @@ export class ReactionsReader { this.removeRaisedHand(targetUser); } }; - - /** - * Stop listening for events. - */ - public destroy(): void { - this.rtcSession.off( - MatrixRTCSessionEvent.MembershipsChanged, - this.onMembershipsChanged, - ); - this.rtcSession.room.off( - MatrixRoomEvent.Timeline, - this.handleReactionEvent, - ); - this.rtcSession.room.off( - MatrixRoomEvent.Redaction, - this.handleReactionEvent, - ); - this.rtcSession.room.client.off( - MatrixEventEvent.Decrypted, - this.handleReactionEvent, - ); - this.rtcSession.room.off( - MatrixRoomEvent.LocalEchoUpdated, - this.handleReactionEvent, - ); - this.reactionsSub.unsubscribe(); - } } diff --git a/src/reactions/__snapshots__/RaisedHandIndicator.test.tsx.snap b/src/reactions/__snapshots__/RaisedHandIndicator.test.tsx.snap index ab6fafa3..43c3f928 100644 --- a/src/reactions/__snapshots__/RaisedHandIndicator.test.tsx.snap +++ b/src/reactions/__snapshots__/RaisedHandIndicator.test.tsx.snap @@ -15,7 +15,7 @@ exports[`RaisedHandIndicator > renders a smaller indicator when miniature is spe

- 00:01 + 00:00

`; @@ -35,7 +35,7 @@ exports[`RaisedHandIndicator > renders an indicator when a hand has been raised

- 00:01 + 00:00

`; @@ -55,7 +55,7 @@ exports[`RaisedHandIndicator > renders an indicator when a hand has been raised

- 01:01 + 01:00

`; diff --git a/src/reactions/index.ts b/src/reactions/index.ts index d3c2d9c9..acf7e181 100644 --- a/src/reactions/index.ts +++ b/src/reactions/index.ts @@ -27,6 +27,8 @@ import rockSoundOgg from "../sound/reactions/rock.ogg?url"; import rockSoundMp3 from "../sound/reactions/rock.mp3?url"; import waveSoundOgg from "../sound/reactions/wave.ogg?url"; import waveSoundMp3 from "../sound/reactions/wave.mp3?url"; +import baduntssSoundOgg from "../sound/reactions/baduntss.ogg?url"; +import baduntssSoundMp3 from "../sound/reactions/baduntss.mp3?url"; export const ElementCallReactionEventType = "io.element.call.reaction"; @@ -191,6 +193,15 @@ export const ReactionSet: ReactionOption[] = [ mp3: waveSoundMp3, }, }, + { + emoji: "🥁", + name: "drum", + alias: ["joke"], + sound: { + ogg: baduntssSoundOgg, + mp3: baduntssSoundMp3, + }, + }, ]; export interface RaisedHandInfo { diff --git a/src/reactions/useReactionsSender.tsx b/src/reactions/useReactionsSender.tsx index 5f509a0c..afb9b789 100644 --- a/src/reactions/useReactionsSender.tsx +++ b/src/reactions/useReactionsSender.tsx @@ -20,7 +20,7 @@ import { logger } from "matrix-js-sdk/lib/logger"; import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships"; import { useClientState } from "../ClientContext"; import { ElementCallReactionEventType, type ReactionOption } from "."; -import { type CallViewModel } from "../state/CallViewModel"; +import { type CallViewModel } from "../state/CallViewModel/CallViewModel"; import { useBehavior } from "../useBehavior"; interface ReactionsSenderContextType { @@ -65,7 +65,7 @@ export const ReactionsSenderProvider = ({ const myMembershipEvent = useMemo( () => memberships.find( - (m) => m.sender === myUserId && m.deviceId === myDeviceId, + (m) => m.userId === myUserId && m.deviceId === myDeviceId, )?.eventId, [memberships, myUserId, myDeviceId], ); diff --git a/src/room/CallEventAudioRenderer.test.tsx b/src/room/CallEventAudioRenderer.test.tsx index 1c515175..733346eb 100644 --- a/src/room/CallEventAudioRenderer.test.tsx +++ b/src/room/CallEventAudioRenderer.test.tsx @@ -7,7 +7,6 @@ Please see LICENSE in the repository root for full details. import { render } from "@testing-library/react"; import { - afterAll, beforeEach, expect, type MockedFunction, @@ -16,33 +15,41 @@ import { afterEach, } from "vitest"; import { act } from "react"; -import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc"; - -import { mockRtcMembership } from "../utils/test"; +import { type RoomMember } from "matrix-js-sdk"; import { - CallEventAudioRenderer, - MAX_PARTICIPANT_COUNT_FOR_SOUND, -} from "./CallEventAudioRenderer"; + type LivekitTransport, + type CallMembership, +} from "matrix-js-sdk/lib/matrixrtc"; + +import { + exampleTransport, + mockMatrixRoomMember, + mockRtcMembership, +} from "../utils/test"; +import { CallEventAudioRenderer } from "./CallEventAudioRenderer"; import { useAudioContext } from "../useAudioContext"; import { prefetchSounds } from "../soundUtils"; import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel"; import { alice, aliceRtcMember, + bob, bobRtcMember, local, localRtcMember, } from "../utils/test-fixtures"; +import { MAX_PARTICIPANT_COUNT_FOR_SOUND } from "../state/CallViewModel/CallViewModel"; +vitest.mock("livekit-client/e2ee-worker?worker"); vitest.mock("../useAudioContext"); vitest.mock("../soundUtils"); +vitest.mock("../rtcSessionHelpers", async (importOriginal) => ({ + ...(await importOriginal()), + makeTransport: (): [LivekitTransport] => [exampleTransport], +})); afterEach(() => { - vitest.resetAllMocks(); -}); - -afterAll(() => { - vitest.restoreAllMocks(); + vitest.clearAllMocks(); }); let playSound: MockedFunction< @@ -56,6 +63,8 @@ beforeEach(() => { playSound = vitest.fn(); (useAudioContext as MockedFunction).mockReturnValue({ playSound, + playSoundLooping: vitest.fn(), + soundDuration: {}, }); }); @@ -70,6 +79,7 @@ test("plays one sound when entering a call", () => { const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment([ local, alice, + bob, ]); render(); @@ -84,6 +94,7 @@ test("plays a sound when a user joins", () => { const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment([ local, alice, + bob, ]); render(); @@ -107,16 +118,31 @@ test("plays a sound when a user leaves", () => { expect(playSound).toBeCalledWith("left"); }); +test("does not play a sound before the call is successful", () => { + const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment( + [local, alice], + [localRtcMember], + { waitForCallPickup: true }, + ); + render(); + + act(() => { + rtcMemberships$.next([localRtcMember]); + }); + expect(playSound).not.toBeCalledWith("left"); +}); + test("plays no sound when the participant list is more than the maximum size", () => { + const mockMembers: RoomMember[] = [local]; const mockRtcMemberships: CallMembership[] = [localRtcMember]; for (let i = 0; i < MAX_PARTICIPANT_COUNT_FOR_SOUND; i++) { - mockRtcMemberships.push( - mockRtcMembership(`@user${i}:example.org`, `DEVICE${i}`), - ); + const membership = mockRtcMembership(`@user${i}:example.org`, `DEVICE${i}`); + mockMembers.push(mockMatrixRoomMember(membership)); + mockRtcMemberships.push(membership); } const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment( - [local, alice], + mockMembers, mockRtcMemberships, ); @@ -136,12 +162,14 @@ test("plays one sound when a hand is raised", () => { const { vm, handRaisedSubject$ } = getBasicCallViewModelEnvironment([ local, alice, + bob, ]); render(); act(() => { handRaisedSubject$.next({ - [bobRtcMember.callId]: { + // TODO: What is this string supposed to be? + [`${bobRtcMember.userId}:${bobRtcMember.deviceId}`]: { time: new Date(), membershipEventId: "", reactionEventId: "", @@ -158,6 +186,7 @@ test("should not play a sound when a hand raise is retracted", () => { ]); render(); + playSound.mockClear(); act(() => { handRaisedSubject$.next({ ["foo"]: { @@ -172,7 +201,7 @@ test("should not play a sound when a hand raise is retracted", () => { }, }); }); - expect(playSound).toHaveBeenCalledTimes(2); + expect(playSound).toHaveBeenCalledExactlyOnceWith("raiseHand"); act(() => { handRaisedSubject$.next({ ["foo"]: { @@ -182,5 +211,5 @@ test("should not play a sound when a hand raise is retracted", () => { }, }); }); - expect(playSound).toHaveBeenCalledTimes(2); + expect(playSound).toHaveBeenCalledExactlyOnceWith("raiseHand"); }); diff --git a/src/room/CallEventAudioRenderer.tsx b/src/room/CallEventAudioRenderer.tsx index a39da82a..d33f3b84 100644 --- a/src/room/CallEventAudioRenderer.tsx +++ b/src/room/CallEventAudioRenderer.tsx @@ -6,9 +6,8 @@ Please see LICENSE in the repository root for full details. */ import { type ReactNode, useEffect } from "react"; -import { filter, interval, throttle } from "rxjs"; -import { type CallViewModel } from "../state/CallViewModel"; +import { type CallViewModel } from "../state/CallViewModel/CallViewModel"; import joinCallSoundMp3 from "../sound/join_call.mp3"; import joinCallSoundOgg from "../sound/join_call.ogg"; import leftCallSoundMp3 from "../sound/left_call.mp3"; @@ -17,15 +16,14 @@ import handSoundOgg from "../sound/raise_hand.ogg"; import handSoundMp3 from "../sound/raise_hand.mp3"; import screenShareStartedOgg from "../sound/screen_share_started.ogg"; import screenShareStartedMp3 from "../sound/screen_share_started.mp3"; +import declineMp3 from "../sound/call_declined.mp3?url"; +import declineOgg from "../sound/call_declined.ogg?url"; +import timeoutMp3 from "../sound/call_timeout.mp3?url"; +import timeoutOgg from "../sound/call_timeout.ogg?url"; import { useAudioContext } from "../useAudioContext"; import { prefetchSounds } from "../soundUtils"; import { useLatest } from "../useLatest"; -// Do not play any sounds if the participant count has exceeded this -// number. -export const MAX_PARTICIPANT_COUNT_FOR_SOUND = 8; -export const THROTTLE_SOUND_EFFECT_MS = 500; - export const callEventAudioSounds = prefetchSounds({ join: { mp3: joinCallSoundMp3, @@ -43,8 +41,18 @@ export const callEventAudioSounds = prefetchSounds({ mp3: screenShareStartedMp3, ogg: screenShareStartedOgg, }, + decline: { + mp3: declineMp3, + ogg: declineOgg, + }, + timeout: { + mp3: timeoutMp3, + ogg: timeoutOgg, + }, }); +export type CallEventSounds = keyof Awaited; + export function CallEventAudioRenderer({ vm, muted, @@ -60,37 +68,18 @@ export function CallEventAudioRenderer({ const audioEngineRef = useLatest(audioEngineCtx); useEffect(() => { - const joinSub = vm.participantChanges$ - .pipe( - filter( - ({ joined, ids }) => - ids.length <= MAX_PARTICIPANT_COUNT_FOR_SOUND && joined.length > 0, - ), - throttle(() => interval(THROTTLE_SOUND_EFFECT_MS)), - ) - .subscribe(() => { - void audioEngineRef.current?.playSound("join"); - }); - - const leftSub = vm.participantChanges$ - .pipe( - filter( - ({ ids, left }) => - ids.length <= MAX_PARTICIPANT_COUNT_FOR_SOUND && left.length > 0, - ), - throttle(() => interval(THROTTLE_SOUND_EFFECT_MS)), - ) - .subscribe(() => { - void audioEngineRef.current?.playSound("left"); - }); - - const handRaisedSub = vm.newHandRaised$.subscribe(() => { - void audioEngineRef.current?.playSound("raiseHand"); - }); - - const screenshareSub = vm.newScreenShare$.subscribe(() => { - void audioEngineRef.current?.playSound("screenshareStarted"); - }); + const joinSub = vm.joinSoundEffect$.subscribe( + () => void audioEngineRef.current?.playSound("join"), + ); + const leftSub = vm.leaveSoundEffect$.subscribe( + () => void audioEngineRef.current?.playSound("left"), + ); + const handRaisedSub = vm.newHandRaised$.subscribe( + () => void audioEngineRef.current?.playSound("raiseHand"), + ); + const screenshareSub = vm.newScreenShare$.subscribe( + () => void audioEngineRef.current?.playSound("screenshareStarted"), + ); return (): void => { joinSub.unsubscribe(); diff --git a/src/room/EarpieceOverlay.module.css b/src/room/EarpieceOverlay.module.css index fd46d0e2..d0757cdb 100644 --- a/src/room/EarpieceOverlay.module.css +++ b/src/room/EarpieceOverlay.module.css @@ -34,7 +34,6 @@ .overlay[data-show="false"] { animation: fade-out 130ms forwards; - content-visibility: hidden; pointer-events: none; } diff --git a/src/room/EarpieceOverlay.tsx b/src/room/EarpieceOverlay.tsx index 14ce33cc..6835bdd7 100644 --- a/src/room/EarpieceOverlay.tsx +++ b/src/room/EarpieceOverlay.tsx @@ -20,7 +20,7 @@ interface Props { export const EarpieceOverlay: FC = ({ show, onBackToVideoPressed }) => { const { t } = useTranslation(); return ( -
+
diff --git a/src/room/GroupCallErrorBoundary.test.tsx b/src/room/GroupCallErrorBoundary.test.tsx index f2a10bc2..86921710 100644 --- a/src/room/GroupCallErrorBoundary.test.tsx +++ b/src/room/GroupCallErrorBoundary.test.tsx @@ -26,7 +26,7 @@ import { E2EENotSupportedError, type ElementCallError, InsufficientCapacityError, - MatrixRTCFocusMissingError, + MatrixRTCTransportMissingError, UnknownCallError, } from "../utils/errors.ts"; import { mockConfig } from "../utils/test.ts"; @@ -34,7 +34,7 @@ import { ElementWidgetActions, type WidgetHelpers } from "../widget.ts"; test.each([ { - error: new MatrixRTCFocusMissingError("example.com"), + error: new MatrixRTCTransportMissingError("example.com"), expectedTitle: "Call is not supported", }, { @@ -85,7 +85,7 @@ test.each([ ); test("should render the error page with link back to home", async () => { - const error = new MatrixRTCFocusMissingError("example.com"); + const error = new MatrixRTCTransportMissingError("example.com"); const TestComponent = (): ReactNode => { throw error; }; @@ -106,7 +106,7 @@ test("should render the error page with link back to home", async () => { await screen.findByText("Call is not supported"); expect(screen.getByText(/Domain: example\.com/i)).toBeInTheDocument(); expect( - screen.getByText(/Error Code: MISSING_MATRIX_RTC_FOCUS/i), + screen.getByText(/Error Code: MISSING_MATRIX_RTC_TRANSPORT/i), ).toBeInTheDocument(); await screen.findByRole("button", { name: "Return to home screen" }); @@ -132,9 +132,10 @@ test("ConnectionLostError: Action handling should reset error state", async () = const WrapComponent = (): ReactNode => { const [failState, setFailState] = useState(true); const reconnectCallback = useCallback( - (action: CallErrorRecoveryAction) => { + async (action: CallErrorRecoveryAction) => { reconnectCallbackSpy(action); setFailState(false); + return Promise.resolve(); }, [setFailState], ); @@ -212,7 +213,7 @@ describe("Rageshake button", () => { }); test("should have a close button in widget mode", async () => { - const error = new MatrixRTCFocusMissingError("example.com"); + const error = new MatrixRTCTransportMissingError("example.com"); const TestComponent = (): ReactNode => { throw error; }; diff --git a/src/room/GroupCallErrorBoundary.tsx b/src/room/GroupCallErrorBoundary.tsx index 3d55d005..ca407ed4 100644 --- a/src/room/GroupCallErrorBoundary.tsx +++ b/src/room/GroupCallErrorBoundary.tsx @@ -22,6 +22,7 @@ import { WebBrowserIcon, } from "@vector-im/compound-design-tokens/assets/web/icons"; import { Button } from "@vector-im/compound-web"; +import { logger } from "matrix-js-sdk/lib/logger"; import { ConnectionLostError, @@ -36,7 +37,9 @@ import { type WidgetHelpers } from "../widget.ts"; export type CallErrorRecoveryAction = "reconnect"; // | "retry" ; -export type RecoveryActionHandler = (action: CallErrorRecoveryAction) => void; +export type RecoveryActionHandler = ( + action: CallErrorRecoveryAction, +) => Promise; interface ErrorPageProps { error: ElementCallError; @@ -51,7 +54,7 @@ const ErrorPage: FC = ({ widget, }: ErrorPageProps): ReactElement => { const { t } = useTranslation(); - + logger.error("Error boundary caught:", error); let icon: ComponentType>; switch (error.category) { case ErrorCategory.CONFIGURATION_ISSUE: @@ -71,7 +74,7 @@ const ErrorPage: FC = ({ if (error instanceof ConnectionLostError) { actions.push({ label: t("call_ended_view.reconnect_button"), - onClick: () => recoveryActionHandler("reconnect"), + onClick: () => void recoveryActionHandler("reconnect"), }); } @@ -131,9 +134,9 @@ export const GroupCallErrorBoundary = ({ widget={widget ?? null} error={callError} resetError={resetError} - recoveryActionHandler={(action: CallErrorRecoveryAction) => { + recoveryActionHandler={async (action: CallErrorRecoveryAction) => { + await recoveryActionHandler(action); resetError(); - recoveryActionHandler(action); }} /> ); diff --git a/src/room/GroupCallView.test.tsx b/src/room/GroupCallView.test.tsx index 12dfdf61..a3d3a049 100644 --- a/src/room/GroupCallView.test.tsx +++ b/src/room/GroupCallView.test.tsx @@ -5,6 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ +// TODO-MULTI-SFU: Restore or discard these tests. The role of GroupCallView has +// changed (it no longer manages the connection to the same extent), so they may +// need extra work to adapt. + import { beforeEach, expect, @@ -12,17 +16,21 @@ import { onTestFinished, test, vi, + vitest, } from "vitest"; -import { render, waitFor, screen } from "@testing-library/react"; +import { render, waitFor, screen, act } from "@testing-library/react"; import { type MatrixClient, JoinRule, type RoomState } from "matrix-js-sdk"; -import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc"; +import { + MatrixRTCSessionEvent, + type MatrixRTCSession, +} from "matrix-js-sdk/lib/matrixrtc"; import { BrowserRouter } from "react-router-dom"; import userEvent from "@testing-library/user-event"; import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container"; import { useState } from "react"; import { TooltipProvider } from "@vector-im/compound-web"; +import { type ITransport } from "matrix-widget-api"; -import { type MuteStates } from "./MuteStates"; import { prefetchSounds } from "../soundUtils"; import { useAudioContext } from "../useAudioContext"; import { ActiveCall } from "./InCallView"; @@ -36,13 +44,14 @@ import { MockRTCSession, } from "../utils/test"; import { GroupCallView } from "./GroupCallView"; -import { type WidgetHelpers } from "../widget"; +import { ElementWidgetActions, type WidgetHelpers } from "../widget"; import { LazyEventEmitter } from "../LazyEventEmitter"; -import { MatrixRTCFocusMissingError } from "../utils/errors"; +import { MatrixRTCTransportMissingError } from "../utils/errors"; import { ProcessorProvider } from "../livekit/TrackProcessorContext"; import { MediaDevicesContext } from "../MediaDevicesContext"; import { HeaderStyle } from "../UrlParams"; import { constant } from "../state/Behavior"; +import { type MuteStates } from "../state/MuteStates.ts"; vi.mock("../soundUtils"); vi.mock("../useAudioContext"); @@ -69,12 +78,13 @@ const leaveRTCSession = vi.hoisted(() => ), ); -vi.mock("../rtcSessionHelpers", async (importOriginal) => { - // TODO: perhaps there is a more elegant way to manage the type import here? - // eslint-disable-next-line @typescript-eslint/consistent-type-imports - const orig = await importOriginal(); - return { ...orig, enterRTCSession, leaveRTCSession }; -}); +// vi.mock("../rtcSessionHelpers", async (importOriginal) => { +// // TODO: perhaps there is a more elegant way to manage the type import here? +// // eslint-disable-next-line @typescript-eslint/consistent-type-imports +// const orig = await importOriginal(); +// // TODO: leaveRTCSession no longer exists! Tests need adapting. +// return { ...orig, enterRTCSession, leaveRTCSession }; +// }); let playSound: MockedFunction< NonNullable>["playSound"] @@ -94,13 +104,19 @@ beforeEach(() => { playSound = vi.fn(); (useAudioContext as MockedFunction).mockReturnValue({ playSound, + playSoundLooping: vi.fn(), + soundDuration: {}, }); // A trivial implementation of Active call to ensure we are testing GroupCallView exclusively here. (ActiveCall as MockedFunction).mockImplementation( - ({ onLeave }) => { + ({ onLeft: onLeave }) => { return (
- + + +
); }, @@ -111,12 +127,12 @@ function createGroupCallView( widget: WidgetHelpers | null, joined = true, ): { - rtcSession: MockRTCSession; + rtcSession: MatrixRTCSession; getByText: ReturnType["getByText"]; } { const client = { getUser: () => null, - getUserId: () => localRtcMember.sender, + getUserId: () => localRtcMember.userId, getDeviceId: () => localRtcMember.deviceId, getRoom: (rId) => (rId === roomId ? room : null), } as Partial as MatrixClient; @@ -144,7 +160,8 @@ function createGroupCallView( const muteState = { audio: { enabled: false }, video: { enabled: false }, - } as MuteStates; + // TODO-MULTI-SFU: This cast isn't valid, it's likely the cause of some current test failures + } as unknown as MuteStates; const { getByText } = render( @@ -157,10 +174,12 @@ function createGroupCallView( preload={false} skipLobby={false} header={HeaderStyle.Standard} - rtcSession={rtcSession as unknown as MatrixRTCSession} - isJoined={joined} + rtcSession={rtcSession.asMockedSession()} muteStates={muteState} widget={widget} + // TODO-MULTI-SFU: Make joined and setJoined work + joined={true} + setJoined={function (value: boolean): void {}} /> @@ -169,11 +188,11 @@ function createGroupCallView( ); return { getByText, - rtcSession, + rtcSession: rtcSession.asMockedSession(), }; } -test("GroupCallView plays a leave sound asynchronously in SPA mode", async () => { +test.skip("GroupCallView plays a leave sound asynchronously in SPA mode", async () => { const user = userEvent.setup(); const { getByText, rtcSession } = createGroupCallView(null); const leaveButton = getByText("Leave"); @@ -190,7 +209,7 @@ test("GroupCallView plays a leave sound asynchronously in SPA mode", async () => await waitFor(() => expect(leaveRTCSession).toHaveResolved()); }); -test("GroupCallView plays a leave sound synchronously in widget mode", async () => { +test.skip("GroupCallView plays a leave sound synchronously in widget mode", async () => { const user = userEvent.setup(); const widget = { api: { @@ -206,6 +225,8 @@ test("GroupCallView plays a leave sound synchronously in widget mode", async () ); (useAudioContext as MockedFunction).mockReturnValue({ playSound, + playSoundLooping: vitest.fn(), + soundDuration: {}, }); const { getByText, rtcSession } = createGroupCallView( @@ -227,7 +248,113 @@ test("GroupCallView plays a leave sound synchronously in widget mode", async () expect(leaveRTCSession).toHaveBeenCalledOnce(); }); -test("GroupCallView leaves the session when an error occurs", async () => { +test.skip("Should close widget when all other left and have time to play a sound", async () => { + const user = userEvent.setup(); + const widgetClosedCalled = Promise.withResolvers(); + const widgetSendMock = vi.fn().mockImplementation((action: string) => { + if (action === ElementWidgetActions.Close) { + widgetClosedCalled.resolve(); + } + }); + const widgetStopMock = vi.fn().mockResolvedValue(undefined); + const widget = { + api: { + setAlwaysOnScreen: vi.fn().mockResolvedValue(true), + transport: { + send: widgetSendMock, + reply: vi.fn().mockResolvedValue(undefined), + stop: widgetStopMock, + } as unknown as ITransport, + } as Partial, + lazyActions: new LazyEventEmitter(), + }; + const resolvePlaySound = Promise.withResolvers(); + playSound = vi.fn().mockReturnValue(resolvePlaySound); + (useAudioContext as MockedFunction).mockReturnValue({ + playSound, + playSoundLooping: vitest.fn(), + soundDuration: {}, + }); + + const { getByText } = createGroupCallView(widget as WidgetHelpers); + const leaveButton = getByText("SimulateOtherLeft"); + await user.click(leaveButton); + await flushPromises(); + expect(widgetSendMock).not.toHaveBeenCalled(); + resolvePlaySound.resolve(); + await flushPromises(); + + expect(playSound).toHaveBeenCalledWith("left"); + + await widgetClosedCalled.promise; + await flushPromises(); + expect(widgetStopMock).toHaveBeenCalledOnce(); +}); + +test("Should close widget when all other left", async () => { + const user = userEvent.setup(); + const widgetClosedCalled = Promise.withResolvers(); + const widgetSendMock = vi.fn().mockImplementation((action: string) => { + if (action === ElementWidgetActions.Close) { + widgetClosedCalled.resolve(); + } + }); + const widgetStopMock = vi.fn().mockResolvedValue(undefined); + const widget = { + api: { + setAlwaysOnScreen: vi.fn().mockResolvedValue(true), + transport: { + send: widgetSendMock, + reply: vi.fn().mockResolvedValue(undefined), + stop: widgetStopMock, + } as unknown as ITransport, + } as Partial, + lazyActions: new LazyEventEmitter(), + }; + + const { getByText } = createGroupCallView(widget as WidgetHelpers); + const leaveButton = getByText("SimulateOtherLeft"); + await user.click(leaveButton); + await flushPromises(); + + await widgetClosedCalled.promise; + await flushPromises(); + expect(widgetStopMock).toHaveBeenCalledOnce(); +}); + +test("Should not close widget when auto leave due to error", async () => { + const user = userEvent.setup(); + + const widgetStopMock = vi.fn().mockResolvedValue(undefined); + const widgetSendMock = vi.fn().mockResolvedValue(undefined); + const widget = { + api: { + setAlwaysOnScreen: vi.fn().mockResolvedValue(true), + transport: { + send: widgetSendMock, + reply: vi.fn().mockResolvedValue(undefined), + stop: widgetStopMock, + } as unknown as ITransport, + } as Partial, + lazyActions: new LazyEventEmitter(), + }; + + const alwaysOnScreenSpy = vi.spyOn(widget.api, "setAlwaysOnScreen"); + + const { getByText } = createGroupCallView(widget as WidgetHelpers); + const leaveButton = getByText("SimulateErrorLeft"); + await user.click(leaveButton); + await flushPromises(); + + // When onLeft is called, we first set always on screen to false + await waitFor(() => expect(alwaysOnScreenSpy).toHaveBeenCalledWith(false)); + await flushPromises(); + // But then we do not close the widget automatically + expect(widgetStopMock).not.toHaveBeenCalledOnce(); + expect(widgetSendMock).not.toHaveBeenCalledOnce(); +}); + +test.skip("GroupCallView leaves the session when an error occurs", async () => { (ActiveCall as MockedFunction).mockImplementation(() => { const [error, setError] = useState(null); if (error !== null) throw error; @@ -248,9 +375,10 @@ test("GroupCallView leaves the session when an error occurs", async () => { ); }); -test("GroupCallView shows errors that occur during joining", async () => { +test.skip("GroupCallView shows errors that occur during joining", async () => { const user = userEvent.setup(); - enterRTCSession.mockRejectedValue(new MatrixRTCFocusMissingError("")); + // This should not mock this error that deep. it should only mock the CallViewModel. + enterRTCSession.mockRejectedValue(new MatrixRTCTransportMissingError("")); onTestFinished(() => { enterRTCSession.mockReset(); }); @@ -258,3 +386,19 @@ test("GroupCallView shows errors that occur during joining", async () => { await user.click(screen.getByRole("button", { name: "Join call" })); screen.getByText("Call is not supported"); }); + +test("user can reconnect after a membership manager error", async () => { + const user = userEvent.setup(); + const { rtcSession } = createGroupCallView(null, true); + await act(() => + rtcSession.emit(MatrixRTCSessionEvent.MembershipManagerError, undefined), + ); + // XXX: Wrapping the following click in act() shouldn't be necessary (the + // async state update should be processed automatically by the waitFor call), + // and yet here we are. + await act(async () => + user.click(screen.getByRole("button", { name: "Reconnect" })), + ); + // In-call controls should be visible again + await waitFor(() => screen.getByRole("button", { name: "Leave" })); +}); diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx index ea57bd10..75438f7f 100644 --- a/src/room/GroupCallView.tsx +++ b/src/room/GroupCallView.tsx @@ -38,10 +38,9 @@ import { PosthogAnalytics } from "../analytics/PosthogAnalytics"; import { useProfile } from "../profile/useProfile"; import { findDeviceByName } from "../utils/media"; import { ActiveCall } from "./InCallView"; -import { MUTE_PARTICIPANT_COUNT, type MuteStates } from "./MuteStates"; +import { type MuteStates } from "../state/MuteStates"; import { useMediaDevices } from "../MediaDevicesContext"; import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships"; -import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers"; import { saveKeyForRoom, useRoomEncryptionSystem, @@ -50,10 +49,18 @@ import { useRoomAvatar } from "./useRoomAvatar"; import { useRoomName } from "./useRoomName"; import { useJoinRule } from "./useJoinRule"; import { InviteModal } from "./InviteModal"; -import { HeaderStyle, useUrlParams } from "../UrlParams"; +import { + getUrlParams, + HeaderStyle, + type UrlParams, + useUrlParams, +} from "../UrlParams"; import { E2eeType } from "../e2ee/e2eeType"; import { useAudioContext } from "../useAudioContext"; -import { callEventAudioSounds } from "./CallEventAudioRenderer"; +import { + callEventAudioSounds, + type CallEventSounds, +} from "./CallEventAudioRenderer"; import { useLatest } from "../useLatest"; import { usePageTitle } from "../usePageTitle"; import { @@ -63,16 +70,17 @@ import { UnknownCallError, } from "../utils/errors.ts"; import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary.tsx"; -import { - useNewMembershipManager as useNewMembershipManagerSetting, - useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting, - useSetting, -} from "../settings/settings"; import { useTypedEventEmitter } from "../useEvents"; import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts"; import { useAppBarTitle } from "../AppBar.tsx"; import { useBehavior } from "../useBehavior.ts"; +/** + * If there already are this many participants in the call, we automatically mute + * the user. + */ +export const MUTE_PARTICIPANT_COUNT = 8; + declare global { interface Window { rtcSession?: MatrixRTCSession; @@ -83,11 +91,12 @@ interface Props { client: MatrixClient; isPasswordlessUser: boolean; confineToRoom: boolean; - preload: boolean; - skipLobby: boolean; + preload: UrlParams["preload"]; + skipLobby: UrlParams["skipLobby"]; header: HeaderStyle; rtcSession: MatrixRTCSession; - isJoined: boolean; + joined: boolean; + setJoined: (value: boolean) => void; muteStates: MuteStates; widget: WidgetHelpers | null; } @@ -100,7 +109,8 @@ export const GroupCallView: FC = ({ skipLobby, header, rtcSession, - isJoined, + joined, + setJoined, muteStates, widget, }) => { @@ -121,7 +131,7 @@ export const GroupCallView: FC = ({ // This should use `useEffectEvent` (only available in experimental versions) useEffect(() => { if (memberships.length >= MUTE_PARTICIPANT_COUNT) - muteStates.audio.setEnabled?.(false); + muteStates.audio.setEnabled$.value?.(false); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -149,6 +159,7 @@ export const GroupCallView: FC = ({ }; }, [rtcSession]); + // TODO move this into the callViewModel LocalMembership.ts useTypedEventEmitter( rtcSession, MatrixRTCSessionEvent.MembershipManagerError, @@ -172,10 +183,6 @@ export const GroupCallView: FC = ({ password: passwordFromUrl, } = useUrlParams(); const e2eeSystem = useRoomEncryptionSystem(room.roomId); - const [useNewMembershipManager] = useSetting(useNewMembershipManagerSetting); - const [useExperimentalToDeviceTransport] = useSetting( - useExperimentalToDeviceTransportSetting, - ); // Save the password once we start the groupCallView useEffect(() => { @@ -200,7 +207,7 @@ export const GroupCallView: FC = ({ // Count each member only once, regardless of how many devices they use const participantCount = useMemo( - () => new Set(memberships.map((m) => m.sender!)).size, + () => new Set(memberships.map((m) => m.userId!)).size, [memberships], ); @@ -210,12 +217,9 @@ export const GroupCallView: FC = ({ const enterRTCSessionOrError = useCallback( async (rtcSession: MatrixRTCSession): Promise => { try { - await enterRTCSession( - rtcSession, - perParticipantE2EE, - useNewMembershipManager, - useExperimentalToDeviceTransport, - ); + setJoined(true); + // TODO-MULTI-SFU what to do with error handling now that we don't use this function? + // @BillCarsonFr } catch (e) { if (e instanceof ElementCallError) { setExternalError(e); @@ -227,12 +231,9 @@ export const GroupCallView: FC = ({ setExternalError(error); } } + return Promise.resolve(); }, - [ - perParticipantE2EE, - useExperimentalToDeviceTransport, - useNewMembershipManager, - ], + [setJoined], ); useEffect(() => { @@ -251,7 +252,7 @@ export const GroupCallView: FC = ({ if (!deviceId) { logger.warn("Unknown audio input: " + audioInput); // override the default mute state - latestMuteStates.current!.audio.setEnabled?.(false); + latestMuteStates.current!.audio.setEnabled$.value?.(false); } else { logger.debug( `Found audio input ID ${deviceId} for name ${audioInput}`, @@ -265,7 +266,7 @@ export const GroupCallView: FC = ({ if (!deviceId) { logger.warn("Unknown video input: " + videoInput); // override the default mute state - latestMuteStates.current!.video.setEnabled?.(false); + latestMuteStates.current!.video.setEnabled$.value?.(false); } else { logger.debug( `Found video input ID ${deviceId} for name ${videoInput}`, @@ -276,34 +277,24 @@ export const GroupCallView: FC = ({ }; if (skipLobby) { - if (widget) { - if (preload) { - // In preload mode without lobby we wait for a join action before entering - const onJoin = (ev: CustomEvent): void => { - (async (): Promise => { - await defaultDeviceSetup( - ev.detail.data as unknown as JoinCallData, - ); - await enterRTCSessionOrError(rtcSession); - widget.api.transport.reply(ev.detail, {}); - })().catch((e) => { - logger.error("Error joining RTC session", e); - }); - }; - widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin); - return (): void => { - widget.lazyActions.off(ElementWidgetActions.JoinCall, onJoin); - }; - } else { - // No lobby and no preload: we enter the rtc session right away + if (widget && preload) { + // In preload mode without lobby we wait for a join action before entering + const onJoin = (ev: CustomEvent): void => { (async (): Promise => { - await enterRTCSessionOrError(rtcSession); + await defaultDeviceSetup(ev.detail.data as unknown as JoinCallData); + setJoined(true); + widget.api.transport.reply(ev.detail, {}); })().catch((e) => { - logger.error("Error joining RTC session", e); + logger.error("Error joining RTC session on preload", e); }); - } + }; + widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin); + return (): void => { + widget.lazyActions.off(ElementWidgetActions.JoinCall, onJoin); + }; } else { - void enterRTCSessionOrError(rtcSession); + // No lobby and no preload: we enter the rtc session right away + setJoined(true); } } }, [ @@ -314,58 +305,87 @@ export const GroupCallView: FC = ({ perParticipantE2EE, mediaDevices, latestMuteStates, - enterRTCSessionOrError, - useNewMembershipManager, + setJoined, ]); + // TODO refactor this + "joined" to just one callState const [left, setLeft] = useState(false); const navigate = useNavigate(); - const onLeave = useCallback( - (cause: "user" | "error" = "user"): void => { - const audioPromise = leaveSoundContext.current?.playSound("left"); - // In embedded/widget mode the iFrame will be killed right after the call ended prohibiting the posthog event from getting sent, - // therefore we want the event to be sent instantly without getting queued/batched. - const sendInstantly = !!widget; + const onLeft = useCallback( + ( + reason: "timeout" | "user" | "allOthersLeft" | "decline" | "error", + ): void => { + let playSound: CallEventSounds = "left"; + if (reason === "timeout" || reason === "decline") playSound = reason; + + setJoined(false); setLeft(true); - // we need to wait until the callEnded event is tracked on posthog. - // Otherwise the iFrame gets killed before the callEnded event got tracked. + const audioPromise = leaveSoundContext.current?.playSound(playSound); + // We need to wait until the callEnded event is tracked on PostHog, + // otherwise the iframe may get killed first. const posthogRequest = new Promise((resolve) => { + // To increase the likelihood of the PostHog event being sent out in + // widget mode before the iframe is killed, we ask it to skip the + // usual queuing/batching of requests. + const sendInstantly = widget !== null; PosthogAnalytics.instance.eventCallEnded.track( room.roomId, rtcSession.memberships.length, sendInstantly, rtcSession, ); + // Unfortunately the PostHog library provides no way to await the + // tracking of an event, but we don't really want it to hold up the + // closing of the widget that long anyway, so giving it 10 ms will do. window.setTimeout(resolve, 10); }); - leaveRTCSession( - rtcSession, - cause, - // Wait for the sound in widget mode (it's not long) - Promise.all([audioPromise, posthogRequest]), - ) - // Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts. + void Promise.all([audioPromise, posthogRequest]) + .catch((e) => + logger.error( + "Failed to play leave audio and/or send PostHog leave event", + e, + ), + ) .then(async () => { if ( !isPasswordlessUser && !confineToRoom && !PosthogAnalytics.instance.isEnabled() - ) { - await navigate("/"); + ) + void navigate("/"); + + if (widget) { + // After this point the iframe could die at any moment! + try { + await widget.api.setAlwaysOnScreen(false); + } catch (e) { + logger.error( + "Failed to set call widget `alwaysOnScreen` to false", + e, + ); + } + // On a normal user hangup we can shut down and close the widget. But if an + // error occurs we should keep the widget open until the user reads it. + if (reason != "error" && !getUrlParams().returnToLobby) { + try { + await widget.api.transport.send(ElementWidgetActions.Close, {}); + } catch (e) { + logger.error("Failed to send close action", e); + } + widget.api.transport.stop(); + } } - }) - .catch((e) => { - logger.error("Error leaving RTC session", e); }); }, [ + setJoined, leaveSoundContext, widget, - rtcSession, room.roomId, + rtcSession, isPasswordlessUser, confineToRoom, navigate, @@ -373,25 +393,12 @@ export const GroupCallView: FC = ({ ); useEffect(() => { - if (widget && isJoined) { + if (widget && joined) // set widget to sticky once joined. widget.api.setAlwaysOnScreen(true).catch((e) => { logger.error("Error calling setAlwaysOnScreen(true)", e); }); - - const onHangup = (ev: CustomEvent): void => { - widget.api.transport.reply(ev.detail, {}); - // Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts. - leaveRTCSession(rtcSession, "user").catch((e) => { - logger.error("Failed to leave RTC session", e); - }); - }; - widget.lazyActions.once(ElementWidgetActions.HangupCall, onHangup); - return (): void => { - widget.lazyActions.off(ElementWidgetActions.HangupCall, onHangup); - }; - } - }, [widget, isJoined, rtcSession]); + }, [widget, joined, rtcSession]); const joinRule = useJoinRule(room); @@ -426,7 +433,7 @@ export const GroupCallView: FC = ({ client={client} matrixInfo={matrixInfo} muteStates={muteStates} - onEnter={() => void enterRTCSessionOrError(rtcSession)} + onEnter={() => setJoined(true)} confineToRoom={confineToRoom} hideHeader={header === HeaderStyle.None} participantCount={participantCount} @@ -444,7 +451,7 @@ export const GroupCallView: FC = ({ throw externalError; }; body = ; - } else if (isJoined) { + } else if (joined) { body = ( <> {shareModal} @@ -453,8 +460,7 @@ export const GroupCallView: FC = ({ matrixInfo={matrixInfo} rtcSession={rtcSession as MatrixRTCSession} matrixRoom={room} - participantCount={participantCount} - onLeave={onLeave} + onLeft={onLeft} header={header} muteStates={muteStates} e2eeSystem={e2eeSystem} @@ -495,6 +501,7 @@ export const GroupCallView: FC = ({ // Left in widget mode: body = returnToLobby ? lobbyView : null; } else if (preload || skipLobby) { + // The RTC session is not joined to yet (`isJoined`), but enterRTCSessionOrError should have been called. body = null; } else { body = lobbyView; @@ -503,17 +510,18 @@ export const GroupCallView: FC = ({ return ( { + recoveryActionHandler={async (action) => { + setExternalError(null); if (action == "reconnect") { setLeft(false); - enterRTCSessionOrError(rtcSession).catch((e) => { + await enterRTCSessionOrError(rtcSession).catch((e) => { logger.error("Error re-entering RTC session", e); }); } }} onError={ (/**error*/) => { - if (rtcSession.isJoined()) onLeave("error"); + if (rtcSession.isJoined()) onLeft("error"); } } > diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css index 41d48db1..96b8a368 100644 --- a/src/room/InCallView.module.css +++ b/src/room/InCallView.module.css @@ -108,13 +108,6 @@ Please see LICENSE in the repository root for full details. } @media (max-width: 370px) { - .raiseHand { - display: none; - } -} - -@media (max-width: 340px) { - .invite, .shareScreen { display: none; } @@ -126,6 +119,13 @@ Please see LICENSE in the repository root for full details. } } +@media (max-width: 320px) { + .invite, + .raiseHand { + display: none; + } +} + @media (max-height: 400px) { .footer { padding-block: var(--cpd-space-4x); diff --git a/src/room/InCallView.test.tsx b/src/room/InCallView.test.tsx index ec057e94..a137074b 100644 --- a/src/room/InCallView.test.tsx +++ b/src/room/InCallView.test.tsx @@ -13,18 +13,15 @@ import { type MockedFunction, vi, } from "vitest"; -import { act, render, type RenderResult } from "@testing-library/react"; +import { render, type RenderResult } from "@testing-library/react"; import { type MatrixClient, JoinRule, type RoomState } from "matrix-js-sdk"; -import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc"; import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container"; -import { ConnectionState, type LocalParticipant } from "livekit-client"; +import { type LocalParticipant } from "livekit-client"; import { of } from "rxjs"; import { BrowserRouter } from "react-router-dom"; import { TooltipProvider } from "@vector-im/compound-web"; import { RoomContext, useLocalParticipant } from "@livekit/components-react"; -import { RoomAndToDeviceEvents } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport"; -import { type MuteStates } from "./MuteStates"; import { InCallView } from "./InCallView"; import { mockLivekitRoom, @@ -32,6 +29,7 @@ import { mockMatrixRoom, mockMatrixRoomMember, mockMediaDevices, + mockMuteStates, mockRemoteParticipant, mockRtcMembership, type MockRTCSession, @@ -39,19 +37,12 @@ import { import { E2eeType } from "../e2ee/e2eeType"; import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel"; import { alice, local } from "../utils/test-fixtures"; -import { - developerMode as developerModeSetting, - useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting, -} from "../settings/settings"; import { ReactionsSenderProvider } from "../reactions/useReactionsSender"; import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement"; -import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer"; +import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer"; import { MediaDevicesContext } from "../MediaDevicesContext"; import { HeaderStyle } from "../UrlParams"; -// vi.hoisted(() => { -// localStorage = {} as unknown as Storage; -// }); vi.hoisted( () => (global.ImageData = class MockImageData { @@ -64,6 +55,7 @@ vi.mock("../useAudioContext"); vi.mock("../tile/GridTile"); vi.mock("../tile/SpotlightTile"); vi.mock("@livekit/components-react"); +vi.mock("livekit-client/e2ee-worker?worker"); vi.mock("../e2ee/sharedKeyManagement"); vi.mock("../livekit/MatrixAudioRenderer"); vi.mock("react-use-measure", () => ({ @@ -88,7 +80,7 @@ beforeEach(() => { // MatrixAudioRenderer is tested separately. ( - MatrixAudioRenderer as MockedFunction + LivekitRoomAudioRenderer as MockedFunction ).mockImplementation((_props) => { return
mocked: MatrixAudioRenderer
; }); @@ -111,9 +103,10 @@ function createInCallView(): RenderResult & { } { const client = { getUser: () => null, - getUserId: () => localRtcMember.sender, + getUserId: () => localRtcMember.userId, getDeviceId: () => localRtcMember.deviceId, getRoom: (rId) => (rId === roomId ? room : null), + getDomain: () => "example.com", } as Partial as MatrixClient; const room = mockMatrixRoom({ relations: { @@ -124,7 +117,8 @@ function createInCallView(): RenderResult & { } as unknown as RelationsContainer, client, roomId, - getMember: (userId) => roomMembers.get(userId) ?? null, + // getMember: (userId) => roomMembers.get(userId) ?? null, + getMembers: () => Array.from(roomMembers.values()), getMxcAvatarUrl: () => null, hasEncryptionStateEvent: vi.fn().mockReturnValue(true), getCanonicalAlias: () => null, @@ -133,10 +127,7 @@ function createInCallView(): RenderResult & { } as Partial as RoomState, }); - const muteState = { - audio: { enabled: false }, - video: { enabled: false }, - } as MuteStates; + const muteState = mockMuteStates(); const livekitRoom = mockLivekitRoom( { localParticipant, @@ -153,14 +144,14 @@ function createInCallView(): RenderResult & { @@ -203,71 +188,4 @@ describe("InCallView", () => { expect(container).toMatchSnapshot(); }); }); - describe("toDevice label", () => { - it("is shown if setting activated and room encrypted", () => { - useRoomEncryptionSystemMock.mockReturnValue({ - kind: E2eeType.PER_PARTICIPANT, - }); - useExperimentalToDeviceTransportSetting.setValue(true); - developerModeSetting.setValue(true); - const { getByText } = createInCallView(); - expect(getByText("using to Device key transport")).toBeInTheDocument(); - }); - - it("is not shown in unenecrypted room", () => { - useRoomEncryptionSystemMock.mockReturnValue({ - kind: E2eeType.NONE, - }); - useExperimentalToDeviceTransportSetting.setValue(true); - developerModeSetting.setValue(true); - const { queryByText } = createInCallView(); - expect( - queryByText("using to Device key transport"), - ).not.toBeInTheDocument(); - }); - - it("is hidden once fallback was triggered", async () => { - useRoomEncryptionSystemMock.mockReturnValue({ - kind: E2eeType.PER_PARTICIPANT, - }); - useExperimentalToDeviceTransportSetting.setValue(true); - developerModeSetting.setValue(true); - const { rtcSession, queryByText } = createInCallView(); - expect(queryByText("using to Device key transport")).toBeInTheDocument(); - expect(rtcSession).toBeDefined(); - await act(() => - rtcSession.emit(RoomAndToDeviceEvents.EnabledTransportsChanged, { - toDevice: true, - room: true, - }), - ); - expect( - queryByText("using to Device key transport"), - ).not.toBeInTheDocument(); - }); - - it("is not shown if setting is disabled", () => { - useExperimentalToDeviceTransportSetting.setValue(false); - developerModeSetting.setValue(true); - useRoomEncryptionSystemMock.mockReturnValue({ - kind: E2eeType.PER_PARTICIPANT, - }); - const { queryByText } = createInCallView(); - expect( - queryByText("using to Device key transport"), - ).not.toBeInTheDocument(); - }); - - it("is not shown if developer mode is disabled", () => { - useExperimentalToDeviceTransportSetting.setValue(true); - developerModeSetting.setValue(false); - useRoomEncryptionSystemMock.mockReturnValue({ - kind: E2eeType.PER_PARTICIPANT, - }); - const { queryByText } = createInCallView(); - expect( - queryByText("using to Device key transport"), - ).not.toBeInTheDocument(); - }); - }); }); diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 4e3229a5..b17d3aae 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -5,9 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ -import { RoomContext, useLocalParticipant } from "@livekit/components-react"; import { IconButton, Text, Tooltip } from "@vector-im/compound-web"; -import { ConnectionState, type Room as LivekitRoom } from "livekit-client"; import { type MatrixClient, type Room as MatrixRoom } from "matrix-js-sdk"; import { type FC, @@ -25,9 +23,8 @@ import useMeasure from "react-use-measure"; import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc"; import classNames from "classnames"; import { BehaviorSubject, map } from "rxjs"; -import { useObservable, useSubscription } from "observable-hooks"; +import { useObservable } from "observable-hooks"; import { logger } from "matrix-js-sdk/lib/logger"; -import { RoomAndToDeviceEvents } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport"; import { VoiceCallSolidIcon, VolumeOnSolidIcon, @@ -55,27 +52,21 @@ import { type OTelGroupCallMembership } from "../otel/OTelGroupCallMembership"; import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal"; import { useRageshakeRequestModal } from "../settings/submit-rageshake"; import { RageshakeRequestModal } from "./RageshakeRequestModal"; -import { useLivekit } from "../livekit/useLivekit.ts"; import { useWakeLock } from "../useWakeLock"; import { useMergedRefs } from "../useMergedRefs"; -import { type MuteStates } from "./MuteStates"; +import { type MuteStates } from "../state/MuteStates"; import { type MatrixInfo } from "./VideoPreview"; import { InviteButton } from "../button/InviteButton"; import { LayoutToggle } from "./LayoutToggle"; -import { type ECConnectionState } from "../livekit/useECConnectionState"; -import { useOpenIDSFU } from "../livekit/openIDSFU"; import { - CallViewModel, + type CallViewModel, + createCallViewModel$, type GridMode, - type Layout, -} from "../state/CallViewModel"; +} from "../state/CallViewModel/CallViewModel.ts"; import { Grid, type TileProps } from "../grid/Grid"; import { useInitial } from "../useInitial"; import { SpotlightTile } from "../tile/SpotlightTile"; -import { - useRoomEncryptionSystem, - type EncryptionSystem, -} from "../e2ee/sharedKeyManagement"; +import { type EncryptionSystem } from "../e2ee/sharedKeyManagement"; import { E2eeType } from "../e2ee/e2eeType"; import { makeGridLayout } from "../grid/GridLayout"; import { @@ -97,114 +88,87 @@ import { ReactionsOverlay } from "./ReactionsOverlay"; import { CallEventAudioRenderer } from "./CallEventAudioRenderer"; import { debugTileLayout as debugTileLayoutSetting, - useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting, - developerMode as developerModeSetting, useSetting, } from "../settings/settings"; import { ReactionsReader } from "../reactions/ReactionsReader"; -import { ConnectionLostError } from "../utils/errors.ts"; -import { useTypedEventEmitter } from "../useEvents.ts"; -import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer.tsx"; +import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer.tsx"; import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts"; -import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships.ts"; import { useMediaDevices } from "../MediaDevicesContext.ts"; import { EarpieceOverlay } from "./EarpieceOverlay.tsx"; import { useAppBarHidden, useAppBarSecondaryButton } from "../AppBar.tsx"; import { useBehavior } from "../useBehavior.ts"; import { Toast } from "../Toast.tsx"; - -const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {}); +import overlayStyles from "../Overlay.module.css"; +import { Avatar, Size as AvatarSize } from "../Avatar"; +import waitingStyles from "./WaitingForJoin.module.css"; +import { prefetchSounds } from "../soundUtils"; +import { useAudioContext } from "../useAudioContext"; +import ringtoneMp3 from "../sound/ringtone.mp3?url"; +import ringtoneOgg from "../sound/ringtone.ogg?url"; +import { useTrackProcessorObservable$ } from "../livekit/TrackProcessorContext.tsx"; +import { type Layout } from "../state/layout-types.ts"; +import { ObservableScope } from "../state/ObservableScope.ts"; const maxTapDurationMs = 400; export interface ActiveCallProps extends Omit { e2eeSystem: EncryptionSystem; + // TODO refactor those reasons into an enum + onLeft: ( + reason: "user" | "timeout" | "decline" | "allOthersLeft" | "error", + ) => void; } export const ActiveCall: FC = (props) => { - const mediaDevices = useMediaDevices(); - const sfuConfig = useOpenIDSFU(props.client, props.rtcSession); - const { livekitRoom, connState } = useLivekit( - props.rtcSession, - props.muteStates, - sfuConfig, - props.e2eeSystem, - ); - const connStateObservable$ = useObservable( - (inputs$) => inputs$.pipe(map(([connState]) => connState)), - [connState], - ); const [vm, setVm] = useState(null); + const urlParams = useUrlParams(); + const mediaDevices = useMediaDevices(); + const trackProcessorState$ = useTrackProcessorObservable$(); useEffect(() => { - logger.info( - `[Lifecycle] InCallView Component mounted, livekit room state ${livekitRoom?.state}`, + const scope = new ObservableScope(); + const reactionsReader = new ReactionsReader(scope, props.rtcSession); + const { autoLeaveWhenOthersLeft, waitForCallPickup, sendNotificationType } = + urlParams; + const vm = createCallViewModel$( + scope, + props.rtcSession, + props.matrixRoom, + mediaDevices, + props.muteStates, + { + encryptionSystem: props.e2eeSystem, + autoLeaveWhenOthersLeft, + waitForCallPickup: waitForCallPickup && sendNotificationType === "ring", + }, + reactionsReader.raisedHands$, + reactionsReader.reactions$, + scope.behavior(trackProcessorState$), ); + setVm(vm); + + vm.leave$.pipe(scope.bind()).subscribe(props.onLeft); return (): void => { - logger.info( - `[Lifecycle] InCallView Component unmounted, livekit room state ${livekitRoom?.state}`, - ); - livekitRoom - ?.disconnect() - .then(() => { - logger.info( - `[Lifecycle] Disconnected from livekit room, state:${livekitRoom?.state}`, - ); - }) - .catch((e) => { - logger.error("[Lifecycle] Failed to disconnect from livekit room", e); - }); + scope.end(); }; - }, [livekitRoom]); - - const { autoLeaveWhenOthersLeft } = useUrlParams(); - - useEffect(() => { - if (livekitRoom !== undefined) { - const reactionsReader = new ReactionsReader(props.rtcSession); - const vm = new CallViewModel( - props.rtcSession, - props.matrixRoom, - livekitRoom, - mediaDevices, - { - encryptionSystem: props.e2eeSystem, - autoLeaveWhenOthersLeft, - }, - connStateObservable$, - reactionsReader.raisedHands$, - reactionsReader.reactions$, - ); - setVm(vm); - return (): void => { - vm.destroy(); - reactionsReader.destroy(); - }; - } }, [ props.rtcSession, props.matrixRoom, - livekitRoom, - mediaDevices, + props.muteStates, props.e2eeSystem, - connStateObservable$, - autoLeaveWhenOthersLeft, + props.onLeft, + urlParams, + mediaDevices, + trackProcessorState$, ]); - if (livekitRoom === undefined || vm === null) return null; + if (vm === null) return null; return ( - - - - - + + + ); }; @@ -214,14 +178,9 @@ export interface InCallViewProps { matrixInfo: MatrixInfo; rtcSession: MatrixRTCSession; matrixRoom: MatrixRoom; - livekitRoom: LivekitRoom; muteStates: MuteStates; - participantCount: number; - /** Function to call when the user explicitly ends the call */ - onLeave: () => void; header: HeaderStyle; otelGroupCallMembership?: OTelGroupCallMembership; - connState: ECConnectionState; onShareClick: (() => void) | null; } @@ -229,14 +188,10 @@ export const InCallView: FC = ({ client, vm, matrixInfo, - rtcSession, matrixRoom, - livekitRoom, muteStates, - participantCount, - onLeave, + header: headerStyle, - connState, onShareClick, }) => { const { t } = useTranslation(); @@ -244,74 +199,60 @@ export const InCallView: FC = ({ useReactionsSender(); useWakeLock(); + // TODO-MULTI-SFU This is unused now?? + // const connectionState = useObservableEagerState(vm.livekitConnectionState$); // annoyingly we don't get the disconnection reason this way, // only by listening for the emitted event - if (connState === ConnectionState.Disconnected) - throw new ConnectionLostError(); + // This needs to be done differential. with the vm connection state we start with Disconnected. + // TODO-MULTI-SFU decide how to handle this properly + // @BillCarsonFr + // if (connectionState === ConnectionState.Disconnected) + // throw new ConnectionLostError(); const containerRef1 = useRef(null); const [containerRef2, bounds] = useMeasure(); // Merge the refs so they can attach to the same element const containerRef = useMergedRefs(containerRef1, containerRef2); - const { hideScreensharing, showControls } = useUrlParams(); - - const { isScreenShareEnabled, localParticipant } = useLocalParticipant({ - room: livekitRoom, - }); + const { showControls } = useUrlParams(); const muteAllAudio = useBehavior(muteAllAudio$); + // Call pickup state and display names are needed for waiting overlay/sounds + const callPickupState = useBehavior(vm.callPickupState$); - // This seems like it might be enough logic to use move it into the call view model? - const [didFallbackToRoomKey, setDidFallbackToRoomKey] = useState(false); - useTypedEventEmitter( - rtcSession, - RoomAndToDeviceEvents.EnabledTransportsChanged, - (enabled) => setDidFallbackToRoomKey(enabled.room), - ); + // Preload a waiting and decline sounds + const pickupPhaseSoundCache = useInitial(async () => { + return prefetchSounds({ + waiting: { mp3: ringtoneMp3, ogg: ringtoneOgg }, + }); + }); - const [developerMode] = useSetting(developerModeSetting); - const [useExperimentalToDeviceTransport] = useSetting( - useExperimentalToDeviceTransportSetting, - ); - const encryptionSystem = useRoomEncryptionSystem(matrixRoom.roomId); - const memberships = useMatrixRTCSessionMemberships(rtcSession); + const pickupPhaseAudio = useAudioContext({ + sounds: pickupPhaseSoundCache, + latencyHint: "interactive", + muted: muteAllAudio, + }); - const showToDeviceEncryption = useMemo( - () => - developerMode && - useExperimentalToDeviceTransport && - encryptionSystem.kind === E2eeType.PER_PARTICIPANT && - !didFallbackToRoomKey, - [ - developerMode, - useExperimentalToDeviceTransport, - encryptionSystem.kind, - didFallbackToRoomKey, - ], - ); - - const toggleMicrophone = useCallback( - () => muteStates.audio.setEnabled?.((e) => !e), - [muteStates], - ); - const toggleCamera = useCallback( - () => muteStates.video.setEnabled?.((e) => !e), - [muteStates], - ); + const audioEnabled = useBehavior(muteStates.audio.enabled$); + const videoEnabled = useBehavior(muteStates.video.enabled$); + const toggleAudio = useBehavior(muteStates.audio.toggle$); + const toggleVideo = useBehavior(muteStates.video.toggle$); + const setAudioEnabled = useBehavior(muteStates.audio.setEnabled$); // This function incorrectly assumes that there is a camera and microphone, which is not always the case. // TODO: Make sure that this module is resilient when it comes to camera/microphone availability! useCallViewKeyboardShortcuts( containerRef1, - toggleMicrophone, - toggleCamera, - (muted) => muteStates.audio.setEnabled?.(!muted), + toggleAudio, + toggleVideo, + setAudioEnabled, (reaction) => void sendReaction(reaction), () => void toggleRaisedHand(), ); + const audioParticipants = useBehavior(vm.audioParticipants$); + const participantCount = useBehavior(vm.participantCount$); const reconnecting = useBehavior(vm.reconnecting$); const windowMode = useBehavior(vm.windowMode$); const layout = useBehavior(vm.layout$); @@ -322,7 +263,65 @@ export const InCallView: FC = ({ const showFooter = useBehavior(vm.showFooter$); const earpieceMode = useBehavior(vm.earpieceMode$); const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$); - useSubscription(vm.autoLeaveWhenOthersLeft$, onLeave); + const sharingScreen = useBehavior(vm.sharingScreen$); + + const ringOverlay = useBehavior(vm.ringOverlay$); + const fatalCallError = useBehavior(vm.fatalError$); + // Stop the rendering and throw for the error boundary + if (fatalCallError) throw fatalCallError; + + // We need to set the proper timings on the animation based upon the sound length. + const ringDuration = pickupPhaseAudio?.soundDuration["waiting"] ?? 1; + useEffect((): (() => void) => { + // The CSS animation includes the delay, so we must double the length of the sound. + window.document.body.style.setProperty( + "--call-ring-duration-s", + `${ringDuration * 2}s`, + ); + window.document.body.style.setProperty( + "--call-ring-delay-s", + `${ringDuration}s`, + ); + // Remove properties when we unload. + return () => { + window.document.body.style.removeProperty("--call-ring-duration-s"); + window.document.body.style.removeProperty("--call-ring-delay-s"); + }; + }, [pickupPhaseAudio?.soundDuration, ringDuration]); + + // When waiting for pickup, loop a waiting sound + useEffect((): void | (() => void) => { + if (callPickupState !== "ringing" || !pickupPhaseAudio) return; + const endSound = pickupPhaseAudio.playSoundLooping("waiting", ringDuration); + return () => { + void endSound().catch((e) => { + logger.error("Failed to stop ringing sound", e); + }); + }; + }, [callPickupState, pickupPhaseAudio, ringDuration]); + + // Waiting UI overlay + const waitingOverlay: JSX.Element | null = useMemo(() => { + return ringOverlay ? ( +
+
+
+ +
+ + {ringOverlay.text} + +
+
+ ) : null; + }, [ringOverlay]); // Ideally we could detect taps by listening for click events and checking // that the pointerType of the event is "touch", but this isn't yet supported @@ -532,6 +531,38 @@ export const InCallView: FC = ({ } } + // The reconnecting toast cannot be dismissed + const onDismissReconnectingToast = useCallback(() => {}, []); + // We need to use a non-modal toast to avoid trapping focus within the toast. + // However, a non-modal toast will not render any background overlay on its + // own, so we must render one manually. + const reconnectingToast = ( + <> +
+ + {t("common.reconnecting")} + + + ); + + const earpieceOverlay = ( + + ); + + // If the reconnecting toast or earpiece overlay obscures the media tiles, we + // need to remove them from the accessibility tree and block focus. + const contentObscured = reconnecting || earpieceMode; + const Tile = useMemo( () => function Tile({ @@ -561,6 +592,7 @@ export const InCallView: FC = ({ className={classNames(className, styles.tile)} style={style} showSpeakingIndicators={showSpeakingIndicatorsValue} + focusable={!contentObscured} /> ) : ( = ({ targetWidth={targetWidth} targetHeight={targetHeight} showIndicators={showSpotlightIndicatorsValue} + focusable={!contentObscured} className={classNames(className, styles.tile)} style={style} /> ); }, - [vm, openProfile], + [vm, openProfile, contentObscured], ); const layouts = useMemo(() => { @@ -605,6 +638,8 @@ export const InCallView: FC = ({ targetWidth={gridBounds.height} targetHeight={gridBounds.width} showIndicators={false} + focusable={!contentObscured} + aria-hidden={contentObscured} /> ); } @@ -622,6 +657,7 @@ export const InCallView: FC = ({ model={layout} Layout={layers.fixed} Tile={Tile} + aria-hidden={contentObscured} /> ); const scrollingGrid = ( @@ -631,6 +667,7 @@ export const InCallView: FC = ({ model={layout} Layout={layers.scrolling} Tile={Tile} + aria-hidden={contentObscured} /> ); // The grid tiles go *under* the spotlight in the portrait layout, but @@ -652,44 +689,33 @@ export const InCallView: FC = ({ matrixRoom.roomId, ); - const toggleScreensharing = useCallback(() => { - localParticipant - .setScreenShareEnabled(!isScreenShareEnabled, { - audio: true, - selfBrowserSurface: "include", - surfaceSwitching: "include", - systemAudio: "include", - }) - .catch(logger.error); - }, [localParticipant, isScreenShareEnabled]); - const buttons: JSX.Element[] = []; buttons.push( , , ); - if (canScreenshare && !hideScreensharing) { + if (vm.toggleScreenSharing !== null) { buttons.push( , @@ -719,7 +745,7 @@ export const InCallView: FC = ({ = ({
); - // The reconnecting toast cannot be dismissed - const onDismissReconnectingToast = useCallback(() => {}, []); - return (
= ({ onPointerOut={onPointerOut} > {header} - { - // TODO: remove this once we remove the developer flag gets removed and we have shipped to - // device transport as the default. - showToDeviceEncryption && ( - - using to Device key transport - - ) - } - + {audioParticipants.map(({ livekitRoom, url, participants }) => ( + + ))} {renderContent()} - - {t("common.reconnecting")} - - + {reconnectingToast} + {earpieceOverlay} + {waitingOverlay} {footer} {layout.type !== "pip" && ( <> @@ -813,7 +824,8 @@ export const InCallView: FC = ({ onDismiss={closeSettings} tab={settingsTab} onTabChange={setSettingsTab} - livekitRoom={livekitRoom} + // TODO expose correct data to setttings modal + livekitRooms={[]} /> )} diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx index 391cb391..ad4f30b3 100644 --- a/src/room/LobbyView.tsx +++ b/src/room/LobbyView.tsx @@ -31,7 +31,7 @@ import inCallStyles from "./InCallView.module.css"; import styles from "./LobbyView.module.css"; import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header"; import { type MatrixInfo, VideoPreview } from "./VideoPreview"; -import { type MuteStates } from "./MuteStates"; +import { type MuteStates } from "../state/MuteStates"; import { InviteButton } from "../button/InviteButton"; import { EndCallButton, @@ -50,8 +50,8 @@ import { useTrackProcessorSync, } from "../livekit/TrackProcessorContext"; import { usePageTitle } from "../usePageTitle"; -import { useLatest } from "../useLatest"; import { getValue } from "../utils/observable"; +import { useBehavior } from "../useBehavior"; interface Props { client: MatrixClient; @@ -88,14 +88,10 @@ export const LobbyView: FC = ({ const { t } = useTranslation(); usePageTitle(matrixInfo.roomName); - const onAudioPress = useCallback( - () => muteStates.audio.setEnabled?.((e) => !e), - [muteStates], - ); - const onVideoPress = useCallback( - () => muteStates.video.setEnabled?.((e) => !e), - [muteStates], - ); + const audioEnabled = useBehavior(muteStates.audio.enabled$); + const videoEnabled = useBehavior(muteStates.video.enabled$); + const toggleAudio = useBehavior(muteStates.audio.toggle$); + const toggleVideo = useBehavior(muteStates.video.toggle$); const [settingsModalOpen, setSettingsModalOpen] = useState(false); const [settingsTab, setSettingsTab] = useState(defaultSettingsTab); @@ -133,7 +129,7 @@ export const LobbyView: FC = ({ // re-open the devices when they change (see below). const initialAudioOptions = useInitial( () => - muteStates.audio.enabled && { + audioEnabled && { deviceId: getValue(devices.audioInput.selected$)?.id, }, ); @@ -150,27 +146,21 @@ export const LobbyView: FC = ({ // We also pass in a clone because livekit mutates the object passed in, // which would cause the devices to be re-opened on the next render. audio: Object.assign({}, initialAudioOptions), - video: muteStates.video.enabled && { + video: videoEnabled && { deviceId: videoInputId, processor: initialProcessor, }, }), - [ - initialAudioOptions, - muteStates.video.enabled, - videoInputId, - initialProcessor, - ], + [initialAudioOptions, videoEnabled, videoInputId, initialProcessor], ); - const latestMuteStates = useLatest(muteStates); const onError = useCallback( (error: Error) => { logger.error("Error while creating preview Tracks:", error); - latestMuteStates.current.audio.setEnabled?.(false); - latestMuteStates.current.video.setEnabled?.(false); + muteStates.audio.setEnabled$.value?.(false); + muteStates.video.setEnabled$.value?.(false); }, - [latestMuteStates], + [muteStates], ); const tracks = usePreviewTracks(localTrackOptions, onError); @@ -217,7 +207,7 @@ export const LobbyView: FC = ({
-
- {muteStates.video.enabled.toString()} -
-
- ); -}; - -const mockMicrophone: MediaDeviceInfo = { - deviceId: "", - kind: "audioinput", - label: "", - groupId: "", - toJSON() { - return {}; - }, -}; - -const mockSpeaker: MediaDeviceInfo = { - deviceId: "", - kind: "audiooutput", - label: "", - groupId: "", - toJSON() { - return {}; - }, -}; - -const mockCamera: MediaDeviceInfo = { - deviceId: "", - kind: "videoinput", - label: "", - groupId: "", - toJSON() { - return {}; - }, -}; - -function mockMediaDevices( - { - microphone, - speaker, - camera, - }: { - microphone?: boolean; - speaker?: boolean; - camera?: boolean; - } = { microphone: true, speaker: true, camera: true }, -): MediaDevices { - vi.mocked(createMediaDeviceObserver).mockImplementation((kind) => { - switch (kind) { - case "audioinput": - return of(microphone ? [mockMicrophone] : []); - case "audiooutput": - return of(speaker ? [mockSpeaker] : []); - case "videoinput": - return of(camera ? [mockCamera] : []); - case undefined: - throw new Error("Unimplemented"); - } - }); - const scope = new ObservableScope(); - onTestFinished(() => scope.end()); - return new MediaDevices(scope); -} - -describe("useMuteStates", () => { - afterEach(() => { - vi.clearAllMocks(); - }); - - afterAll(() => { - vi.resetAllMocks(); - }); - - it("disabled when no input devices", () => { - mockConfig(); - - render( - - - - - , - ); - expect(screen.getByTestId("audio-enabled").textContent).toBe("false"); - expect(screen.getByTestId("video-enabled").textContent).toBe("false"); - }); - - it("enables devices by default in the lobby", () => { - mockConfig(); - - render( - - - - - , - ); - expect(screen.getByTestId("audio-enabled").textContent).toBe("true"); - expect(screen.getByTestId("video-enabled").textContent).toBe("true"); - }); - - it("disables devices by default in the call", () => { - // Disabling new devices in the call ensures that connecting a webcam - // mid-call won't cause it to suddenly be enabled without user input - mockConfig(); - - render( - - - - - , - ); - expect(screen.getByTestId("audio-enabled").textContent).toBe("false"); - expect(screen.getByTestId("video-enabled").textContent).toBe("false"); - }); - - it("uses defaults from config", () => { - mockConfig({ - media_devices: { - enable_audio: false, - enable_video: false, - }, - }); - - render( - - - - - , - ); - expect(screen.getByTestId("audio-enabled").textContent).toBe("false"); - expect(screen.getByTestId("video-enabled").textContent).toBe("false"); - }); - - it("skipLobby mutes inputs", () => { - mockConfig(); - - render( - - - - - , - ); - expect(screen.getByTestId("audio-enabled").textContent).toBe("false"); - expect(screen.getByTestId("video-enabled").textContent).toBe("false"); - }); - - it("remembers previous state when devices disappear and reappear", async () => { - const user = userEvent.setup(); - mockConfig(); - const noDevices = mockMediaDevices({ microphone: false, camera: false }); - // Warm up these Observables before making further changes to the - // createMediaDevicesObserver mock - noDevices.audioInput.available$.subscribe(() => {}).unsubscribe(); - noDevices.videoInput.available$.subscribe(() => {}).unsubscribe(); - const someDevices = mockMediaDevices(); - - const ReappearanceTest: FC = () => { - const [devices, setDevices] = useState(someDevices); - const onConnectDevicesClick = useCallback( - () => setDevices(someDevices), - [], - ); - const onDisconnectDevicesClick = useCallback( - () => setDevices(noDevices), - [], - ); - - return ( - - - - - - - - ); - }; - - render(); - expect(screen.getByTestId("audio-enabled").textContent).toBe("true"); - expect(screen.getByTestId("video-enabled").textContent).toBe("true"); - await user.click(screen.getByRole("button", { name: "Toggle audio" })); - expect(screen.getByTestId("audio-enabled").textContent).toBe("false"); - expect(screen.getByTestId("video-enabled").textContent).toBe("true"); - await user.click( - screen.getByRole("button", { name: "Disconnect devices" }), - ); - expect(screen.getByTestId("audio-enabled").textContent).toBe("false"); - expect(screen.getByTestId("video-enabled").textContent).toBe("false"); - await user.click(screen.getByRole("button", { name: "Connect devices" })); - // Audio should remember that it was muted, while video should re-enable - expect(screen.getByTestId("audio-enabled").textContent).toBe("false"); - expect(screen.getByTestId("video-enabled").textContent).toBe("true"); - }); -}); diff --git a/src/room/MuteStates.ts b/src/room/MuteStates.ts deleted file mode 100644 index 1f4b8e82..00000000 --- a/src/room/MuteStates.ts +++ /dev/null @@ -1,166 +0,0 @@ -/* -Copyright 2023, 2024 New Vector Ltd. - -SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial -Please see LICENSE in the repository root for full details. -*/ - -import { - type Dispatch, - type SetStateAction, - useCallback, - useEffect, - useMemo, -} from "react"; -import { type IWidgetApiRequest } from "matrix-widget-api"; -import { logger } from "matrix-js-sdk/lib/logger"; -import { useObservableEagerState } from "observable-hooks"; - -import { - type DeviceLabel, - type SelectedDevice, - type MediaDevice, -} from "../state/MediaDevices"; -import { useIsEarpiece, useMediaDevices } from "../MediaDevicesContext"; -import { useReactiveState } from "../useReactiveState"; -import { ElementWidgetActions, widget } from "../widget"; -import { Config } from "../config/Config"; -import { useUrlParams } from "../UrlParams"; - -/** - * If there already are this many participants in the call, we automatically mute - * the user. - */ -export const MUTE_PARTICIPANT_COUNT = 8; - -interface DeviceAvailable { - enabled: boolean; - setEnabled: Dispatch>; -} - -interface DeviceUnavailable { - enabled: false; - setEnabled: null; -} - -const deviceUnavailable: DeviceUnavailable = { - enabled: false, - setEnabled: null, -}; - -type MuteState = DeviceAvailable | DeviceUnavailable; - -export interface MuteStates { - audio: MuteState; - video: MuteState; -} - -function useMuteState( - device: MediaDevice, - enabledByDefault: () => boolean, - forceUnavailable: boolean = false, -): MuteState { - const available = useObservableEagerState(device.available$); - const [enabled, setEnabled] = useReactiveState( - // Determine the default value once devices are actually connected - (prev) => prev ?? (available.size > 0 ? enabledByDefault() : undefined), - [available.size], - ); - return useMemo( - () => - available.size === 0 || forceUnavailable - ? deviceUnavailable - : { - enabled: enabled ?? false, - setEnabled: setEnabled as Dispatch>, - }, - [available.size, enabled, forceUnavailable, setEnabled], - ); -} - -export function useMuteStates(isJoined: boolean): MuteStates { - const devices = useMediaDevices(); - - const { skipLobby } = useUrlParams(); - - const audio = useMuteState(devices.audioInput, () => { - return Config.get().media_devices.enable_audio && !skipLobby && !isJoined; - }); - useEffect(() => { - // If audio is enabled, we need to request the device names again, - // because iOS will not be able to switch to the correct device after un-muting. - // This is one of the main changes that makes iOS work with bluetooth audio devices. - if (audio.enabled) { - devices.requestDeviceNames(); - } - }, [audio.enabled, devices]); - const isEarpiece = useIsEarpiece(); - const video = useMuteState( - devices.videoInput, - () => Config.get().media_devices.enable_video && !skipLobby && !isJoined, - isEarpiece, // Force video to be unavailable if using earpiece - ); - - useEffect(() => { - widget?.api.transport - .send(ElementWidgetActions.DeviceMute, { - audio_enabled: audio.enabled, - video_enabled: video.enabled, - }) - .catch((e) => - logger.warn("Could not send DeviceMute action to widget", e), - ); - }, [audio, video]); - - const onMuteStateChangeRequest = useCallback( - (ev: CustomEvent) => { - // First copy the current state into our new state. - const newState = { - audio_enabled: audio.enabled, - video_enabled: video.enabled, - }; - // Update new state if there are any requested changes from the widget action - // in `ev.detail.data`. - if ( - ev.detail.data.audio_enabled != null && - typeof ev.detail.data.audio_enabled === "boolean" - ) { - audio.setEnabled?.(ev.detail.data.audio_enabled); - newState.audio_enabled = ev.detail.data.audio_enabled; - } - if ( - ev.detail.data.video_enabled != null && - typeof ev.detail.data.video_enabled === "boolean" - ) { - video.setEnabled?.(ev.detail.data.video_enabled); - newState.video_enabled = ev.detail.data.video_enabled; - } - // Always reply with the new (now "current") state. - // This allows to also use this action to just get the unaltered current state - // by using a fromWidget request with: `ev.detail.data = {}` - widget!.api.transport.reply(ev.detail, newState); - }, - [audio, video], - ); - useEffect(() => { - // We setup a event listener for the widget action ElementWidgetActions.DeviceMute. - if (widget) { - // only setup the listener in widget mode - - widget.lazyActions.on( - ElementWidgetActions.DeviceMute, - onMuteStateChangeRequest, - ); - - return (): void => { - // return a call to `off` so that we always clean up our listener. - widget?.lazyActions.off( - ElementWidgetActions.DeviceMute, - onMuteStateChangeRequest, - ); - }; - } - }, [onMuteStateChangeRequest]); - - return useMemo(() => ({ audio, video }), [audio, video]); -} diff --git a/src/room/ReactionAudioRenderer.test.tsx b/src/room/ReactionAudioRenderer.test.tsx index c61cbd82..988d43a6 100644 --- a/src/room/ReactionAudioRenderer.test.tsx +++ b/src/room/ReactionAudioRenderer.test.tsx @@ -10,8 +10,9 @@ import { afterAll, afterEach, beforeEach, + describe, expect, - test, + it, vitest, type MockedFunction, type Mock, @@ -27,7 +28,7 @@ import { import { useAudioContext } from "../useAudioContext"; import { GenericReaction, ReactionSet } from "../reactions"; import { prefetchSounds } from "../soundUtils"; -import { type CallViewModel } from "../state/CallViewModel"; +import { type CallViewModel } from "../state/CallViewModel/CallViewModel"; import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel"; import { alice, @@ -45,123 +46,129 @@ function TestComponent({ vm }: { vm: CallViewModel }): ReactNode { ); } +vitest.mock("livekit-client/e2ee-worker?worker"); vitest.mock("../useAudioContext"); vitest.mock("../soundUtils"); -afterEach(() => { - vitest.resetAllMocks(); - playReactionsSoundSetting.setValue(playReactionsSoundSetting.defaultValue); - soundEffectVolumeSetting.setValue(soundEffectVolumeSetting.defaultValue); -}); - -afterAll(() => { - vitest.restoreAllMocks(); -}); - let playSound: Mock< NonNullable>["playSound"] >; -beforeEach(() => { - (prefetchSounds as MockedFunction).mockResolvedValue({ - sound: new ArrayBuffer(0), +describe("ReactionAudioRenderer", () => { + afterEach(() => { + playReactionsSoundSetting.setValue(playReactionsSoundSetting.defaultValue); + soundEffectVolumeSetting.setValue(soundEffectVolumeSetting.defaultValue); }); - playSound = vitest.fn(); - (useAudioContext as MockedFunction).mockReturnValue({ - playSound, - }); -}); - -test("preloads all audio elements", () => { - const { vm } = getBasicCallViewModelEnvironment([local, alice]); - playReactionsSoundSetting.setValue(true); - render(); - expect(prefetchSounds).toHaveBeenCalledOnce(); -}); - -test("will play an audio sound when there is a reaction", () => { - const { vm, reactionsSubject$ } = getBasicCallViewModelEnvironment([ - local, - alice, - ]); - playReactionsSoundSetting.setValue(true); - render(); - - // Find the first reaction with a sound effect - const chosenReaction = ReactionSet.find((r) => !!r.sound); - if (!chosenReaction) { - throw Error( - "No reactions have sounds configured, this test cannot succeed", + beforeEach(() => { + (prefetchSounds as MockedFunction).mockResolvedValue( + { + sound: new ArrayBuffer(0), + }, ); - } - act(() => { - reactionsSubject$.next({ - [aliceRtcMember.deviceId]: { - reactionOption: chosenReaction, - expireAfter: new Date(0), + playSound = vitest.fn(); + (useAudioContext as MockedFunction).mockReturnValue( + { + playSound, + playSoundLooping: vitest.fn(), + soundDuration: {}, }, - }); - }); - expect(playSound).toHaveBeenCalledWith(chosenReaction.name); -}); - -test("will play the generic audio sound when there is soundless reaction", () => { - const { vm, reactionsSubject$ } = getBasicCallViewModelEnvironment([ - local, - alice, - ]); - playReactionsSoundSetting.setValue(true); - render(); - - // Find the first reaction with a sound effect - const chosenReaction = ReactionSet.find((r) => !r.sound); - if (!chosenReaction) { - throw Error( - "No reactions have sounds configured, this test cannot succeed", ); - } - act(() => { - reactionsSubject$.next({ - [aliceRtcMember.deviceId]: { - reactionOption: chosenReaction, - expireAfter: new Date(0), - }, - }); }); - expect(playSound).toHaveBeenCalledWith(GenericReaction.name); -}); - -test("will play multiple audio sounds when there are multiple different reactions", () => { - const { vm, reactionsSubject$ } = getBasicCallViewModelEnvironment([ - local, - alice, - ]); - playReactionsSoundSetting.setValue(true); - render(); - - // Find the first reaction with a sound effect - const [reaction1, reaction2] = ReactionSet.filter((r) => !!r.sound); - if (!reaction1 || !reaction2) { - throw Error( - "No reactions have sounds configured, this test cannot succeed", - ); - } - act(() => { - reactionsSubject$.next({ - [aliceRtcMember.deviceId]: { - reactionOption: reaction1, - expireAfter: new Date(0), - }, - [bobRtcMember.deviceId]: { - reactionOption: reaction2, - expireAfter: new Date(0), - }, - [localRtcMember.deviceId]: { - reactionOption: reaction1, - expireAfter: new Date(0), - }, - }); + afterAll(() => { + vitest.restoreAllMocks(); + }); + + it("preloads all audio elements", () => { + const { vm } = getBasicCallViewModelEnvironment([local, alice]); + playReactionsSoundSetting.setValue(true); + render(); + expect(prefetchSounds).toHaveBeenCalledOnce(); + }); + + it("will play an audio sound when there is a reaction", () => { + const { vm, reactionsSubject$ } = getBasicCallViewModelEnvironment([ + local, + alice, + ]); + playReactionsSoundSetting.setValue(true); + render(); + + // Find the first reaction with a sound effect + const chosenReaction = ReactionSet.find((r) => !!r.sound); + if (!chosenReaction) { + throw Error( + "No reactions have sounds configured, this test cannot succeed", + ); + } + act(() => { + reactionsSubject$.next({ + [aliceRtcMember.deviceId]: { + reactionOption: chosenReaction, + expireAfter: new Date(0), + }, + }); + }); + expect(playSound).toHaveBeenCalledWith(chosenReaction.name); + }); + + it("will play the generic audio sound when there is soundless reaction", () => { + const { vm, reactionsSubject$ } = getBasicCallViewModelEnvironment([ + local, + alice, + ]); + playReactionsSoundSetting.setValue(true); + render(); + + // Find the first reaction with a sound effect + const chosenReaction = ReactionSet.find((r) => !r.sound); + if (!chosenReaction) { + throw Error( + "No reactions have sounds configured, this test cannot succeed", + ); + } + act(() => { + reactionsSubject$.next({ + [aliceRtcMember.deviceId]: { + reactionOption: chosenReaction, + expireAfter: new Date(0), + }, + }); + }); + expect(playSound).toHaveBeenCalledWith(GenericReaction.name); + }); + + it("will play multiple audio sounds when there are multiple different reactions", () => { + const { vm, reactionsSubject$ } = getBasicCallViewModelEnvironment([ + local, + alice, + ]); + playReactionsSoundSetting.setValue(true); + render(); + + // Find the first reaction with a sound effect + const [reaction1, reaction2] = ReactionSet.filter((r) => !!r.sound); + if (!reaction1 || !reaction2) { + throw Error( + "No reactions have sounds configured, this test cannot succeed", + ); + } + act(() => { + reactionsSubject$.next({ + [aliceRtcMember.deviceId]: { + reactionOption: reaction1, + expireAfter: new Date(0), + }, + [bobRtcMember.deviceId]: { + reactionOption: reaction2, + expireAfter: new Date(0), + }, + [localRtcMember.deviceId]: { + reactionOption: reaction1, + expireAfter: new Date(0), + }, + }); + }); + expect(playSound).toHaveBeenCalledWith(reaction1.name); + expect(playSound).toHaveBeenCalledWith(reaction2.name); }); - expect(playSound).toHaveBeenCalledWith(reaction1.name); - expect(playSound).toHaveBeenCalledWith(reaction2.name); }); diff --git a/src/room/ReactionAudioRenderer.tsx b/src/room/ReactionAudioRenderer.tsx index 2b95acb9..06170d19 100644 --- a/src/room/ReactionAudioRenderer.tsx +++ b/src/room/ReactionAudioRenderer.tsx @@ -12,7 +12,7 @@ import { GenericReaction, ReactionSet } from "../reactions"; import { useAudioContext } from "../useAudioContext"; import { prefetchSounds } from "../soundUtils"; import { useLatest } from "../useLatest"; -import { type CallViewModel } from "../state/CallViewModel"; +import { type CallViewModel } from "../state/CallViewModel/CallViewModel"; const soundMap = Object.fromEntries([ ...ReactionSet.filter((v) => v.sound !== undefined).map((v) => [ diff --git a/src/room/ReactionsOverlay.test.tsx b/src/room/ReactionsOverlay.test.tsx index 6be69399..3ca82b1e 100644 --- a/src/room/ReactionsOverlay.test.tsx +++ b/src/room/ReactionsOverlay.test.tsx @@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details. */ import { render } from "@testing-library/react"; -import { expect, test, afterEach } from "vitest"; +import { expect, test, afterEach, vi } from "vitest"; import { act } from "react"; import { showReactions } from "../settings/settings"; @@ -20,6 +20,8 @@ import { } from "../utils/test-fixtures"; import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel"; +vi.mock("livekit-client/e2ee-worker?worker"); + afterEach(() => { showReactions.setValue(showReactions.defaultValue); }); diff --git a/src/room/ReactionsOverlay.tsx b/src/room/ReactionsOverlay.tsx index f3dff848..e7c097d2 100644 --- a/src/room/ReactionsOverlay.tsx +++ b/src/room/ReactionsOverlay.tsx @@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details. import { type ReactNode } from "react"; import styles from "./ReactionsOverlay.module.css"; -import { type CallViewModel } from "../state/CallViewModel"; +import { type CallViewModel } from "../state/CallViewModel/CallViewModel"; import { useBehavior } from "../useBehavior"; export function ReactionsOverlay({ vm }: { vm: CallViewModel }): ReactNode { diff --git a/src/room/RoomPage.tsx b/src/room/RoomPage.tsx index b424c511..e9527e03 100644 --- a/src/room/RoomPage.tsx +++ b/src/room/RoomPage.tsx @@ -20,6 +20,8 @@ import { CheckIcon, UnknownSolidIcon, } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { useObservable } from "observable-hooks"; +import { map } from "rxjs"; import { useClientLegacy } from "../ClientContext"; import { ErrorPage, FullScreenView, LoadingPage } from "../FullScreenView"; @@ -35,12 +37,13 @@ import { CallTerminatedMessage, useLoadGroupCall } from "./useLoadGroupCall"; import { LobbyView } from "./LobbyView"; import { E2eeType } from "../e2ee/e2eeType"; import { useProfile } from "../profile/useProfile"; -import { useMuteStates } from "./MuteStates"; import { useOptInAnalytics } from "../settings/settings"; import { Config } from "../config/Config"; import { Link } from "../button/Link"; import { ErrorView } from "../ErrorView"; -import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState"; +import { useMediaDevices } from "../MediaDevicesContext"; +import { MuteStates } from "../state/MuteStates"; +import { ObservableScope } from "../state/ObservableScope"; export const RoomPage: FC = () => { const { confineToRoom, appPrompt, preload, header, displayName, skipLobby } = @@ -61,10 +64,19 @@ export const RoomPage: FC = () => { const { avatarUrl, displayName: userDisplayName } = useProfile(client); const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers); - const isJoined = useMatrixRTCSessionJoinState( - groupCallState.kind === "loaded" ? groupCallState.rtcSession : undefined, + const [joined, setJoined] = useState(false); + + const devices = useMediaDevices(); + const [muteStates, setMuteStates] = useState(null); + const joined$ = useObservable( + (inputs$) => inputs$.pipe(map(([joined]) => joined)), + [joined], ); - const muteStates = useMuteStates(isJoined); + useEffect(() => { + const scope = new ObservableScope(); + setMuteStates(new MuteStates(scope, devices, joined$)); + return (): void => scope.end(); + }, [devices, joined$]); useEffect(() => { // If we've finished loading, are not already authed and we've been given a display name as @@ -101,22 +113,25 @@ export const RoomPage: FC = () => { } }, [groupCallState.kind]); - const groupCallView = (): JSX.Element => { + const groupCallView = (): ReactNode => { switch (groupCallState.kind) { case "loaded": return ( - + muteStates && ( + + ) ); case "waitForInvite": case "canKnock": { @@ -135,31 +150,35 @@ export const RoomPage: FC = () => { ); return ( - knock?.()} - enterLabel={label} - waitingForInvite={groupCallState.kind === "waitForInvite"} - confineToRoom={confineToRoom} - hideHeader={header !== "standard"} - participantCount={null} - muteStates={muteStates} - onShareClick={null} - /> + muteStates && ( + knock?.()} + enterLabel={label} + waitingForInvite={groupCallState.kind === "waitForInvite"} + confineToRoom={confineToRoom} + hideHeader={header !== "standard"} + participantCount={null} + muteStates={muteStates} + onShareClick={null} + /> + ) ); } case "loading": diff --git a/src/room/VideoPreview.test.tsx b/src/room/VideoPreview.test.tsx index 3bbb6ad5..dba65727 100644 --- a/src/room/VideoPreview.test.tsx +++ b/src/room/VideoPreview.test.tsx @@ -5,20 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE in the repository root for full details. */ -import { expect, describe, it, vi, beforeAll } from "vitest"; +import { expect, describe, it, beforeAll } from "vitest"; import { render } from "@testing-library/react"; import { type MatrixInfo, VideoPreview } from "./VideoPreview"; -import { type MuteStates } from "./MuteStates"; import { E2eeType } from "../e2ee/e2eeType"; -function mockMuteStates({ audio = true, video = true } = {}): MuteStates { - return { - audio: { enabled: audio, setEnabled: vi.fn() }, - video: { enabled: video, setEnabled: vi.fn() }, - }; -} - describe("VideoPreview", () => { const matrixInfo: MatrixInfo = { userId: "@a:example.org", @@ -49,7 +41,7 @@ describe("VideoPreview", () => { const { queryByRole } = render( } />, @@ -61,7 +53,7 @@ describe("VideoPreview", () => { const { queryByRole } = render( } />, diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx index a7e7cd9c..3efcaba1 100644 --- a/src/room/VideoPreview.tsx +++ b/src/room/VideoPreview.tsx @@ -13,7 +13,6 @@ import { useTranslation } from "react-i18next"; import { TileAvatar } from "../tile/TileAvatar"; import styles from "./VideoPreview.module.css"; -import { type MuteStates } from "./MuteStates"; import { type EncryptionSystem } from "../e2ee/sharedKeyManagement"; export type MatrixInfo = { @@ -29,14 +28,14 @@ export type MatrixInfo = { interface Props { matrixInfo: MatrixInfo; - muteStates: MuteStates; + videoEnabled: boolean; videoTrack: LocalVideoTrack | null; children: ReactNode; } export const VideoPreview: FC = ({ matrixInfo, - muteStates, + videoEnabled, videoTrack, children, }) => { @@ -56,8 +55,8 @@ export const VideoPreview: FC = ({ }, [videoTrack]); const cameraIsStarting = useMemo( - () => muteStates.video.enabled && !videoTrack, - [muteStates.video.enabled, videoTrack], + () => videoEnabled && !videoTrack, + [videoEnabled, videoTrack], ); return ( @@ -76,7 +75,7 @@ export const VideoPreview: FC = ({ tabIndex={-1} disablePictureInPicture /> - {(!muteStates.video.enabled || cameraIsStarting) && ( + {(!videoEnabled || cameraIsStarting) && ( <>
{cameraIsStarting && ( diff --git a/src/room/WaitingForJoin.module.css b/src/room/WaitingForJoin.module.css new file mode 100644 index 00000000..a598e482 --- /dev/null +++ b/src/room/WaitingForJoin.module.css @@ -0,0 +1,61 @@ +.overlay { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; +} + +.content { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; +} + +.pulse { + position: relative; + height: 90px; +} + +.pulse::before { + content: ""; + position: absolute; + inset: -12px; + border-radius: 9999px; + border: 12px solid rgba(255, 255, 255, 0.6); + animation: pulse var(--call-ring-duration-s) ease-out infinite; + animation-delay: 1s; + opacity: 0; +} + +.text { + color: var(--cpd-color-text-on-solid-primary); +} + +@keyframes pulse { + 0% { + transform: scale(0.95); + opacity: 0.7; + transform: scale(0); + opacity: 1; + } + 35% { + transform: scale(1.15); + opacity: 0.15; + } + 50% { + transform: scale(1.2); + opacity: 0; + } + 50.01% { + transform: scale(0); + } + 85% { + transform: scale(0); + } + 100% { + transform: scale(0); + } +} diff --git a/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap b/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap index ad4aff61..73a6df12 100644 --- a/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap +++ b/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap @@ -292,7 +292,7 @@ exports[`should have a close button in widget mode 1`] = ` Call is not supported

- The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS). + The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_TRANSPORT).

+
+ + + + + + + 2 + +
-
- mocked: MatrixAudioRenderer -
@@ -83,6 +108,11 @@ exports[`InCallView > rendering > renders 1`] = `
+