We forgot to tell React that we need the audio renderer to react to changes in the set of MatrixRTC participants; instead we had it referencing rtcSession.memberships non-reactively.
Now, I'm not 100% confident that this is going to fix the "speaking from the void" issues observed in the wild, because I can't reproduce them and, in my testing, the InCallView component always seemed to be rendered redundantly when the MatrixRTC participants change, even though we hadn't explicitly stated that it needs to react. (This makes sense as we haven't memoized the component.) But it's worth a shot.
* Simplify key local storage management.
* Refactor useLivekit to only ever connect to one room.
This change also tries to make the code more explicit so that we only do the things we really need to do and rely less on react updating everything correctly.
It also surfaces, that we are currently implementing useLivekit in a way, so that we can change the encryption system on the fly and recreate the room. I am not sure this is a case we need to support?
* simplify the useLivekit hook even more
This is possible because we concluded that we do not need to be able to hot reload the e2ee system.
* review
* linter
* Update src/room/InCallView.tsx
Co-authored-by: Robin <robin@robin.town>
---------
Co-authored-by: Robin <robin@robin.town>
This gives us the additional insurance of breaking the Safari media acquisition loop at the source by admitting that they can be spurious in practice. Safari, why!?
Because we're now requiring the 'Prevent blocked' check to pass before merging a PR, GitHub Actions now expects it to be associated with the latest Git ref of the PR's branch whenever the branch is updated. Therefore we need to re-run the workflow on the 'synchronize' event.
Because the latest version requires eslint-plugin-unicorn v57, which requires eslint v9, and eslint-plugin-matrix-org is not yet compatible with eslint v9.
* Disable device switching when in controlled audio devices mode
* Temporarily switch matrix-js-sdk to robin/embedded-no-update-state
To allow us to test this change on Element X, which does not yet support the update_state action.
* Also add a check for controlled audio devices in useAudioContext
* use develop branch
* fix tests
---------
Co-authored-by: Robin <robin@robin.town>
Now that the toger5/add-room-key-fallback-on-encryption-manager-not-supported branch has been merged, we can reset to develop. (And need to, actually, because that branch is deleted.)
* Update RTCSession configuration to non deprecated names.
* bump js-sdk
* es2024 and array buffer adaptions
* Alternative without `createKeyMaterialFromBuffer`
* Add custom audio renderer to only render joined participants & add ios earpice workaround
fix left right to match chromium + safari
(firefox is swapped)
earpice as setting
Simpler code and documentation
The doc explains, what this class actually does and why it is so complicated.
Signed-off-by: Timo K <toger5@hotmail.de>
use only one audioContext, remove (non working) standby fallback
* Add tests
* use optional audio context and effect to initiate it + review
- `MediaDevice`->`MediaDeviceHandle`
- use just one provider and switch inside the
MediaDevicesProvider between: controlledAudioOutput, webViewAudioOutput
- fix muteAllAudio
* Better logs for connection/component lifecycle
* fix: `AudioCaptureOptions` was causing un-necessary effect render
AudioCaptureOptions was a different object but with same internal values, use directly deviceId so that Object.is works properly
* fix: Livekit openned connection leaks
* review: rename to AbortHandles
* review: rename variable
---------
Co-authored-by: Timo <toger5@hotmail.de>
fix left right to match chromium + safari
(firefox is swapped)
earpice as setting
Simpler code and documentation
The doc explains, what this class actually does and why it is so complicated.
Signed-off-by: Timo K <toger5@hotmail.de>
use only one audioContext, remove (non working) standby fallback
* Only show to device encryption label if developer mode on
* Add tests for developer mode to device label
---------
Co-authored-by: Timo <toger5@hotmail.de>
* Fix to-device encryption info label
The label was shown also without checking that we use PerParticipantE2EE. Which is a prerequisite for toDevice transport. As a result the label was shown when not desired.
* rename: useLiveKit -> useLivekit
* make the settings naming consistent
* Refactor version calculation to use separate step and track version for each platform
* Set tag for NPM and SNAPSHOT for AAR appropriately
* Log output versions for each platform
* Fix tarball name
* Just use npm tag of `latest` or `other`
* Attempt to fix AAR snapshot publishing
* enable to-device-encryption
* add logging for key provider
* make rooms encrypted
* add dev setting to choose to-device or room encryption
* add indicator when to-device is used.
* Devex: Default vite config to support using local build of crypto wasm
* use realpathSync and make it work with linked and not-linked
We need to use sync because an async defineConfig fails for the embedded exports.
* also allow just linking matrix-sdk-crypto-wasm (without js-sdk linking)
---------
Co-authored-by: Timo <toger5@hotmail.de>
Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>
Co-authored-by: Robin <robin@robin.town>
* Use correct rageshake URL when running in embedded package
It was incorrectly trying to use the one from config.json
* Refactor to add tests
* Empty mock config
* Expose version string in embedded SwiftPM and AAR
Implements https://github.com/element-hq/element-call/issues/3143
* Fix filename
* Fix location of `Version.kt`
* Use the right path for the sed replacement in the publishing workflow for Android
---------
Co-authored-by: Jorge Martín <jorgem@element.io>
* Change EULA to SSLA
- rename i18n fields
- update the config property to `ssla` and deprecate `eula`
- use `eula` instead of ssla in case it is provided in the config.
* fix default config
* completely remove eula fallback
It doesn't check whether it's actually used inside a GroupCallErrorBoundary, and it's generally useful for interacting with any error boundary, so I'm giving it a generic name to reflect this.
We were previously using the useGroupCallErrorBoundary hook to surface errors that happened during joining, but because that part is outside the GroupCallErrorBoundary it just ended up sending them to the app-level error boundary where they got displayed with a more generic message.
* Support for analytics configuration via URL parameters in widget mode
Adds:
- posthogApiHost
- posthogApiKey
- rageshakeSubmitUrl
- sentryDsn
- sentryEnvironment
Deprecate analyticsId and use posthogUserId instead
* Partial test coverage
* Simplify tests
* More tests
* Lint
* Split embedded only parameters into own section for clarity
* Update docs/url-params.md
* Update docs/url-params.md
* Update vite.config.js
* Publish embedded package for releases of Element Call
Part of https://github.com/element-hq/element-call/issues/2994
This PR:
- Publishes embedded builds as Tarball, NPM, AAR, SwiftPM for releases
- Publishes full builds as Tarball for releases
- Adds comments to release notes with the built artifact locations
* Update embedded/web/package.json
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
* Update .github/workflows/publish-embedded-packages.yaml
* Update embedded/ios/Package.swift
* Apply suggestions from code review
* Try dry-run of gradlew
* Whitespace
* Fix more instances of unpinned GHA
* Minimise permissions
* Upload release notes once
To reduce concurrency
* Fix npm publish permissions
---------
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
* Embedded package build of Element Call
Part of https://github.com/element-hq/element-call/issues/2994
This creates a new "embedded" build (vs "full" build) at the vite level. It will be used by a later PR that actually provides platform specific packages.
Embedded build:
- Uses relative URLs
- Uses relative config.json path and other resource loading
- Has a config.json built in
- Doesn't include the public folder (e.g. favicon)
Out of scope:
- this doesn't attempt to exclude SPA functionality, so technically the build could be used in SPA
- the above means that the crypto-wasm binary is included in the build
* CI artifact name based on type of build
* Update src/config/Config.ts
Whenever we use a Git dependency, we should reference a specific tag or commit rather than a branch name, because Yarn Classic is bad at recognizing when a Git dependency needs to be re-installed due to it resolving to a new version. (It seems to simply use the version from package.json as a cache key.)
This is relevant only for developers who run 'yarn install' on top of a previously up-to-date working copy, not for CI which re-installs the project on every run.
* provide option to use the New MembershipManager
* fix cryptoApi import change
* add error screen
* bump js-sdk
* rename to `setUnrecoverableError` and remove onLeave call because that will be handled by an effect.
* this was doing nothing (it is a fragment back when there was no deprecated `rtcSession.room`)
* rename to error
* Update src/utils/errors.ts
Co-authored-by: Hugh Nimmo-Smith <hughns@users.noreply.github.com>
* Update src/utils/errors.ts
Co-authored-by: Hugh Nimmo-Smith <hughns@users.noreply.github.com>
* review
* bump js-sdk
* expose lk log level changing in `window`
* bump js-sdk
- always log "Missing own membership: force re-join"
- also check insertions queue
* change lk log level to warn
* Bump js-sdk
* Bump js-sdk
* .
* Bump js-sdk
* show user count based on meberships not users.
Signed-off-by: Timo K <toger5@hotmail.de>
* bump js-sdk
* rename setting name
* remove unused import
* js sdk bump
* remove `window.setLKLogLevel`
* bump js sdk with reverted incompatible change
* bump js-sdk with one less merge
---------
Signed-off-by: Timo K <toger5@hotmail.de>
Co-authored-by: Hugh Nimmo-Smith <hughns@users.noreply.github.com>
Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>
* Use share() on fromEvent() so that we multiplex subscribers onto the event emitter
* .
* .
* Comment
* Comment
---------
Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>
Following a75952cf77, this is one more upgrade to the widget communication that I'd like to make within this release cycle.
The motivating issue is https://github.com/element-hq/element-web/issues/29429. Fundamentally, without a 'join' action, the only info Element Web can use to determine whether it's joined the call is whether a MatrixRTC membership exists. But membership state events can inaccurately represent the client's actual state (whether because delayed events aren't supported, or because the delayed event hasn't timed out yet), so I suggest we send a 'join' action here just as we do in the Element Web Jitsi wrapper (e9a3625bd6/src/vector/jitsi/index.ts (L503)) to let Element Web tap directly into the widget's local state. (This will need additional Element Web changes, but is certainly backwards compatible.)
The one place where we should log out of PostHog and reset our analytics ID is when the user is logging out. This matches the behavior in Element Web and makes sense, I think, because logging out is essentially a request for the app to forget who you are. This means we should also start analytics at the point of logging in / reauthenticating.
I noticed while making this change that there was an unused branch in setClient, so I cleaned it up rather than making myself update it.
We shouldn't be calling PosthogAnalytics.instance.logout() when leaving the call in widget mode, because all this does is reset your analytics ID. In the big picture this is probably inflating our user count metrics.
2bb5b020e6 refactored the end of the GroupCallView render function to not use any early returns, and clumsily failed to account for the fall-through case that makes returnToLobby work (as opposed to sitting on a blank screen).
We need compatible versions of RxJS in our dependencies and LiveKit's dependencies, but LiveKit has pinned it to a very specific version which is now holding us back from updating. See https://github.com/livekit/components-js/issues/1101 for a request for a proper solution.
I was touching this file and noticed a chance to clean up this little TODO comment by swapping in our useLatest hook and giving it better documentation.
Currently, if you set hideHeader to true, you get a big empty <header> on error pages which serves no purpose except to push the screen's content off center.
By keeping 'hangup' and 'close' as separate actions, we can allow Element Call widgets to stay on an error screen after the user has been disconnected without the widget completely disappearing from the host's UI. We don't have to request any additional capabilities to use a custom widget action like this one.
The core vite build shouldn't be responsible for implementing optimisations that are specific to a particular distribution mechanism. e.g. static compressed files for nginx.
This way the core build is "clean".
Instead, the packager/distributor of the build should be responsible for it. e.g. the nginx docker distribution should do any optimisations that it chooses.
* Downgrade widget api version to v1.11.0 to not include STATE_UPDATE api version
* Downgrade to v1.10.0 for js-sdk compatibility
* Add "matrix-widget-api" to resolutions block
* bump matrix-widget-api to v1.11.0 for theme change compatibility
* Disambigute displaynames
* Add test
* fixup test functions
* prettier
* lint
* Split displayname utils into own file and add tests.
* Split out fixtures
* Add more testcases for displayname calculation.
* lint
* Also listen for displayname changes. (I stand corrected!)
* fix missing media tiles on missing member
* Add developer mode option to show RTC connection statistics
* Add note about localization
* Add titles to help explain what the numbers are
* Workaround horizontal scrolling
* Use modal to show detailed stats instead of alert
* Changed styling and fixed fps = 0 (#2916)
(React rendered 0 instead of <Text /> for fps && <Text>{fps}</text>)
---------
Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>
* Add support for using CallViewModel for reactions sounds.
* Drop setting
* Convert reaction sounds to call view model / rxjs
* Use call view model for hand raised reactions
* Support raising reactions for matrix rtc members.
* Tie up last bits of useReactions
* linting
* Update calleventaudiorenderer
* Update reaction audio renderer
* more test bits
* All the test bits and pieces
* More refactors
* Refactor reactions into a sender and receiver.
* Fixup reaction toggle button
* Adapt reactions test
* Tests all pass.
* lint
* fix a couple of bugs
* remove unused helper file
* lint
* finnish notation
* Add tests for useReactionsReader
* remove mistaken vitest file
* fix
* filter
* invert
* fixup tests with fake timers
* Port useReactionsReader hook to ReactionsReader class.
* lint
* exclude some files from coverage
* Add screen share sound effect.
* cancel sub on destroy
* tidy tidy
* Inform user that their camera is starting
Instead of just showing a grey box.
* Review feedback
* Show spinner from design suggestion
* useMemo
* Lint
* Lint
* Feedback from review
* Use colour that actually exists
* Refactor into Avatar superclass
* .
* Remove size limit behaviour
* Add VideoPreview tests
* Introduce `intent` URL param and make it change the default lobby behaviour
* Mark skipLobby as deprecated
* Add support for unknown intent which is default for when not specified
While debugging our layout shift issue I learned that a single change to the sort order of the participants can cause 3 or 4 redundant emissions of the same items in the same order. Since each of these would cause React to re-render the grid, skipping these spurious emissions seems like an easy performance win.
* make tiles based on rtc member
* display missing lk participant + fix tile multiplier
* add show_non_member_participants config option
* per member tiles
* merge fixes
* linter
* linter and tests
* tests
* adapt tests (wip)
* Remove unused keys
* Fix optionality of nonMemberItemCount
* video is optional
* Mock RTC members
* Lint
* Merge fixes
* Fix user id
* Add explicit types for public fields
* isRTCParticipantAvailable => isLiveKitParticipantAvailable
* isLiveKitParticipantAvailable
* Readonly
* More keys removal
* Make local field based on view model class not observable
* Wording
* Fix RTC members in tes
* Tests again
* Lint
* Disable showing non-member tiles by default
* Duplicate screen sharing tiles like we used to
* Lint
* Revert function reordering
* Remove throttleTime from bad merge
* Cleanup
* Tidy config of show non-member settings
* tidy up handling of local rtc member in tests
* tidy up test init
* Fix mocks
* Cleanup
* Apply local override where participant not yet known
* Handle no visible media id
* Assertions for one-on-one view
* Remove isLiveKitParticipantAvailable and show via encryption status
* Handle no local media (yet)
* Remove unused effect for setting
* Tidy settings
* Avoid case of one-to-one layout with missing local or remote
* Iterate
* Remove option to show non-member tiles to simplify code review
* Remove unused code
* Remove more remnants of show-non-member-tiles
* iterate
* back
* Fix unit test
* Refactor
* Expose TestScheduler as global
* Fix incorrect type assertion
* Simplify speaking observer
* Fix
* Whitespace
* Make it clear that we are mocking MatrixRTC memberships
* Test case for only showing tiles for MatrixRTC session members
* Simplify diff
* Simplify diff
These changes are in https://github.com/element-hq/element-call/pull/2809
* .
* Whitespaces
* Use asObservable when exposing subject
* Show "waiting for media..." when no participant
* Additional test case
* Don't show "waiting for media..." in case of local participant
* Make the loading state more subtle
- instead of a label we show a animated gradient
* Use correct key for matrix rtc foci in code comment. (#2838)
* Update src/tile/SpotlightTile.tsx
Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>
* Update src/state/CallViewModel.ts
Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>
* Make the purpose of BaseMediaViewModel.local explicit
* Use named object instead of unnamed array for spotlightAndPip
* Refactor spotlightAndPip into spotlight and pip
* Use if statement instead of ternary for readability in spotlight and pip logic
* Review feedback
* Fix tests for CallEventAudioRenderer
* Lint
* Developer setting to show non-member tiles
This is based on top of https://github.com/element-hq/element-call/pull/2701
* Lint
* Remove unused code
* Remove changes that should be in https://github.com/element-hq/element-call/pull/2858
* Update src/state/CallViewModel.test.ts
Co-authored-by: Robin <robin@robin.town>
* Merge branch 'livekit' into toger5/show-non-member-tiles
* Remove unused nonMemberItemCount
* Restore default showNonMemberTiles value after test
* Update comments
---------
Co-authored-by: Timo <toger5@hotmail.de>
Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>
Co-authored-by: Robin <robin@robin.town>
Instead of tracking for each individual tile whether it's visible, just track the total number of tiles that appear on screen. This ought to make the whole thing a lot less dynamic, which is crucial given that our UI renders asynchronously and RxJS doesn't really support cyclic dependencies in any rigorous way.
In particular this ought to make the following kind of situation impossible:
1. There 3 tiles, ABC. A and B are on screen.
2. Now C becomes important. The requested order is now CAB.
3. To reduce the size of the layout shift, the algorithm selects to swap just B and C in the original order, giving ACB. However, the UI is blocked and doesn't render this order yet.
4. For whatever reason, a spurious update of the importance algorithm occurs. It once again requests CAB.
5. Now because the UI was blocked, the layout still thinks that A and B are on screen (rather than A and C). It thinks that C is some weird island of "off-screen territory" in the middle of the tile order. This confuses it into swapping A and C rather than keeping the layout stable.
The reality is that whenever we think N tiles are visible on screen, we're always referring to the first N tiles in the grid. It's best if the code reflects this assumption.
* Refactor to use AudioContext
* Remove unused audio format.
* Reduce update frequency for volume
* Port to useAudioContext
* Port reactionaudiorenderer to useAudioContext
* Integrate raise hand sound into call event renderer.
* Simplify reaction sounds
* only play one sound per reaction type
* Start to build out tests
* fixup tests / comments
* Fix reaction sound
* remove console line
* Remove another debug line.
* fix lint
* Use testing library click
* lint
* Add support for playing a sound when the user exits a call.
* Port GroupCallView to useAudioContext
* Remove debug bits.
* asyncify
* lint
* lint
* lint
* tidy
* Add test for group call view
* Test widget mode too.
* fix ?.
* Format
* Lint
* Lint
---------
Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>
* Add some quick-and-dirty debug info for TileStore
I'm still in need of more detailed data in order to understand why big layout shifts happen in large calls. This adds a developer option to enable logging and a visual indicator for the state of the TileStore. The indicator should be useful for matching up the behavior I'm seeing in my recordings with the right timestamps.
* Reduce performance impact of checking for whether debug mode is enabled
---------
Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>
* Simplify settings tabs
- Move Analytics to Feedback tab
- Rename Developer Settings to Developer Mode and move to Preferences tab
- Clean up Preferences tab
- Only way to see version number is by enabling Developer Mode
* Remove extra label
* Lint
* Lint
* Update locales/en/app.json
Co-authored-by: Robin <robin@robin.town>
---------
Co-authored-by: Robin <robin@robin.town>
* Enable @typescript-eslint/consistent-type-imports lint rule
This is to help ensure that we get proper vite/rollup lazy loading by not `import`ing more than we need to.
Revert "Enable @typescript-eslint/consistent-type-imports lint rule"
This reverts commit ba385fa00b7e410cc508fd5fb9fe972233ae114f.
Enable @typescript-eslint/consistent-type-imports lint rule
This is to help ensure that we get proper vite/rollup lazy loading by not `import`ing more than we need to.
.
* Format
* Refactor to use AudioContext
* Remove unused audio format.
* Reduce update frequency for volume
* Port to useAudioContext
* Port reactionaudiorenderer to useAudioContext
* Integrate raise hand sound into call event renderer.
* Simplify reaction sounds
* only play one sound per reaction type
* Start to build out tests
* fixup tests / comments
* Fix reaction sound
* remove console line
* Remove another debug line.
* fix lint
* Use testing library click
* lint
* fix a few things
* Change the way we as unknown the mock RTC session.
* Lint
* Fix types for MockRTCSession
* value change should always be set
* Update volume slider description.
* Only load reaction sound effects if enabled.
* cache improvements
* lowercase soundMap
* lint
* move prefetch sounds to fix hot reload
* correct docs
* add a header
* Wording change
---------
Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>
* make tiles based on rtc member
* display missing lk participant + fix tile multiplier
* add show_non_member_participants config option
* per member tiles
* merge fixes
* linter
* linter and tests
* tests
* adapt tests (wip)
* Remove unused keys
* Fix optionality of nonMemberItemCount
* video is optional
* Mock RTC members
* Lint
* Merge fixes
* Fix user id
* Add explicit types for public fields
* isRTCParticipantAvailable => isLiveKitParticipantAvailable
* isLiveKitParticipantAvailable
* Readonly
* More keys removal
* Make local field based on view model class not observable
* Wording
* Fix RTC members in tes
* Tests again
* Lint
* Disable showing non-member tiles by default
* Duplicate screen sharing tiles like we used to
* Lint
* Revert function reordering
* Remove throttleTime from bad merge
* Cleanup
* Tidy config of show non-member settings
* tidy up handling of local rtc member in tests
* tidy up test init
* Fix mocks
* Cleanup
* Apply local override where participant not yet known
* Handle no visible media id
* Assertions for one-on-one view
* Remove isLiveKitParticipantAvailable and show via encryption status
* Handle no local media (yet)
* Remove unused effect for setting
* Tidy settings
* Avoid case of one-to-one layout with missing local or remote
* Iterate
* Remove option to show non-member tiles to simplify code review
* Remove unused code
* Remove more remnants of show-non-member-tiles
* iterate
* back
* Fix unit test
* Refactor
* Expose TestScheduler as global
* Fix incorrect type assertion
* Simplify speaking observer
* Fix
* Whitespace
* Make it clear that we are mocking MatrixRTC memberships
* Test case for only showing tiles for MatrixRTC session members
* Simplify diff
* Simplify diff
These changes are in https://github.com/element-hq/element-call/pull/2809
* .
* Whitespaces
* Use asObservable when exposing subject
* Show "waiting for media..." when no participant
* Additional test case
* Don't show "waiting for media..." in case of local participant
* Make the loading state more subtle
- instead of a label we show a animated gradient
* Use correct key for matrix rtc foci in code comment. (#2838)
* Update src/tile/SpotlightTile.tsx
Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>
* Update src/state/CallViewModel.ts
Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>
* Make the purpose of BaseMediaViewModel.local explicit
* Use named object instead of unnamed array for spotlightAndPip
* Refactor spotlightAndPip into spotlight and pip
* Use if statement instead of ternary for readability in spotlight and pip logic
* Review feedback
* Fix tests for CallEventAudioRenderer
* Lint
* Revert "Make the loading state more subtle"
This reverts commit 765f7b4f31.
* Update src/state/CallViewModel.ts
Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>
* Fix spelling
* Remove a non-null assertion that failed at runtime
---------
Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>
Co-authored-by: Hugh Nimmo-Smith <hughns@users.noreply.github.com>
* Add renderer for call joined / left
* lint
* Add new sounds
* Updates sounds in renderer
* lint
* move import
* pad sounds with silence
* lint
* tidy
* Drop autoplay since we now subscribe correctly.
* Comitting test files I am going to be going to lunch so will tidy up in a little while.
* finish up tests
* Add support for multiple channels per sound.
* lint
* Some simple tests for MediaView
* Use jest-dom assertions
* Add tests for videoMuted
* Add test case for placeholder video track
* Revert yarn.lock changes
* More revert
* Deduplicate test case logic and improve names
* Use role and label
* Refactor the speaker detection logic into observeSpeaker and add tests
@robintown the tests pass, but some of the values were off by 1ms from what I was expecting. Please can you sanity check them?
* Extra test cases and clean up
* Make distinctUntilChanged part of the observable itself
* More suggestions from code review
* Use hot marbles for speaker tests
This was originally part of https://github.com/element-hq/element-call/pull/2810
* Only feed speaking mocks to observables that ask for IsSpeakingChanged
* Refactor the speaker detection logic into observeSpeaker and add tests
@robintown the tests pass, but some of the values were off by 1ms from what I was expecting. Please can you sanity check them?
* Extra test cases and clean up
* Make distinctUntilChanged part of the observable itself
* More suggestions from code review
* Refactor URL parameters into table
This is for readability and ahead of some possible changes
* Whitespace
* Lint
* The preload URL param shouldn't be used in SPA mode, so ignore it
Managing your audio output manually is kind of cumbersome; Chrome creates a default audio output for us, but now that audio outputs are enabled on Firefox as well, I find it necessary for a good user experience that there always be a way to set it to "whatever the default is".
We have Matrix room members and MatrixRTC session memberships. Livekit also has rooms.
So, this attempts to make it more obvious as to what type you are referring to.
This is closer to what the designs actually want device settings to look like, and it avoids the visual glitch in which the dropdown would render underneath the slider.
Somewhere around version 131 or 132, Firefox has started being more paranoid about media device fingerprinting, and will not even give you the IDs of available devices until you've requested a media stream. Instead you only get a single audio input and video input each with the empty string as their device ID, representing the system's default device. We can recognize this case and avoid resetting the device selection.
* Replace search strings
* Add expander for reactions view
* lint
* Remove useless list
* Update tests
* lint
* Only shrink buttons on web version, mobile never shrinks
* Revert accidental change.
* Remove border from button
* Tidy up views.
* Finish matching designs.
* Fix height
* Remove a unneeded class
* Remove more cruft
* Remove unnessacery chunk
* Evenly space reactions
* lint
* Disable reaction buttons when busy
* Try to make menu a bit more responsive
* Update test
* further screen size tweaks
* Load the Intl.Segmenter polyfill only if needed
* Also polyfill Intl.DurationFormat only if needed
* Polyfill Intl.* in tests
* Load the default translations in tests
* Instanciate the Intl.DurationFormat in the component
As a non-intrusive way to help you remember when you've locally muted a participant (so you're less likely to be confused about not hearing their audio), we can show a different icon on the tile.
By rights, this fix I had made to decrypt reaction events shouldn't have appeared successful, because I was requiring the event to have a certain type before asking matrix-js-sdk to decrypt it, and you can't know an event's type before it's decrypted. Probably what was happening is that another code path was requesting the events to be decrypted so that this mistake didn't matter.
* Skip lobby if when coming from waitForInvite state.
* knock reject wording update (shorter/simpler)
* Automatically enter session also in non widget mode when skipLobby = true
* Update public/locales/en-GB/app.json
Co-authored-by: Robin <robin@robin.town>
* review
* review andrew
---------
Co-authored-by: Robin <robin@robin.town>
The basic issue here, I think, was that the 'oneOnOne' observable flag and the 'onOnOneLayout' observable could become out of sync, as RxJS does *not* have atomicity guarantees. We can work around this by combining them into one observable.
This fixes a few different usability issues with the footer:
- When tapping one of the footer buttons, the footer would be dismissed rather than activating the button.
- When the footer was hidden, you could still tap the buttons.
- Interacting with controls in the footer would not reset the timer that hides it, leading to a feeling that the footer can disappear out from under you.
* Initial support for Hand Raise feature
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
* Refactored to use reaction and redaction events
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
* Replacing button svg with raised hand emoji
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
* SpotlightTile should not duplicate the raised hand
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
* Update src/room/useRaisedHands.tsx
Element Call recently changed to AGPL-3.0
* Use relations to load existing reactions when joining the call
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
* Links to sha commit of matrix-js-sdk that exposes the call membership event id and refactors some async code
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
* Removing RaiseHand.svg
* Check for reaction & redaction capabilities in widget mode
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
* Fix failing GridTile test
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
* Center align hand raise.
* Add support for displaying the duration of a raised hand.
* Add a sound for when a hand is raised.
* Refactor raised hand indicator and add tests.
* lint
* Refactor into own files.
* Redact the right thing.
* Tidy up useEffect
* Lint tests
* Remove extra layer
* Add better sound. (woosh)
* Add a small mode for spotlight
* Fix timestamp calculation on relaod.
* Fix call border resizing video
* lint
* Fix and update tests
* Allow timer to be configurable.
* Add preferences tab for choosing to enable timer.
* Drop border from raised hand icon
* Handle cases when a new member event happens.
* Prevent infinite loop
* Major refactor to support various state problems.
* Tidy up and finish test rewrites
* Add some explanation comments.
* Even more comments.
* Use proper duration formatter
* Remove rerender
* Fix redactions not working because they pick up events in transit.
* More tidying
* Use deferred value
* linting
* Add tests for cases where we got a reaction from someone else.
* Be even less brittle.
* Transpose border to GridTile.
* First PoC for reactions
* hide menu by default
* Add lightbulb.
* Add reaction indicator.
* Add sounds.
* Tidy up + add support for floating emoji.
* Linting and general stability improvements.
* Subscribe to the ecall reaction event type.
* fix import
* Center emoji picker
* Overflow buttons when screen is too narrow
* lint
* Add settings for disabling animations / sounds.
* Make vertical divider more visually distinct.
* Make event listener more resillient.
* lint
* Fix some tests.
* Remove old raised hand component
* Add new icon
* Update text
* Update compound hand raised icon.
* Add deer.
* Fix case where you could send larger strings as emoji
* Const the active time.
* Document time in css.
* Add rock emoji
* Add licence file.
* Add type def for custom reaction type.
* better reaction description
* Factor out reactions test structure to utils file.
* Add tests for ReactionToggleButton
* Add keyboard shortcuts for reaction sending.
* type tidyups
* lint
* Add tests for ReactionAudioRenderer
* lint
* prettier
* i18n sort
* final lint?
* Preload reaction sounds to prevent delays.
* Update rock sounds
* add onclick back
* Fix test
* lint
* simplify
* Tweak line height
* modal impl
* Modal refactor attempts.
* Remove closed menu test since we're using Modal.
* Swap icon, make mobile view better.
* Fix mobile view for emoji picker.
* Use Intl.Segmenter
* Clear timeouts on component close.
* Remove useless useCallback
* Use prefers-reduced-motion
* Add toggle for raise hand.
* Add lower hand text
* Add lower motion mode.
* Decomplicate className system for Modal
* Add error for failured to send reaction.
* i18n
* Spacing for emoji buttons search
* Remove unrequired media query
* Fix generic sound not playing.
* Clear reactions if we're clearing timeouts.
* Fix tests
* Relabel lower hand
* More translations
* Add comments on reaction interface
* Move polyfill.
* lint
* Replace deer sound
* Another attempt to fix the sizing of the reactions
* cleanup
* fix button
* fix
---------
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
Co-authored-by: Milton Moura <miltonmoura@gmail.com>
Co-authored-by: fkwp <fkwp@users.noreply.github.com>
* Refactor to make encryption system available in view models
* WIP show encryption errors from LiveKit
* Missing CSS
* Show encryption status based on LK and RTC
* Lint
* Lint
* Fix tests
* Update wording
* Refactor
* Lint
The observable-hooks package provides hooks that do exactly the same thing as these custom React hooks I had written a while back. (even the names are the same, wow)
Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>
* Keep tiles in a stable order
This introduces a new layer of abstraction on top of MediaViewModel: TileViewModel, which gives us a place to store data relating to tiles rather than their media, and also generally makes it easier to reason about tiles as they move about the call layout. I have created a class called TileStore to keep track of these tiles.
This allows us to swap out the media shown on a tile as the spotlight speaker changes, and avoid moving tiles around unless they really need to jump between the visible/invisible regions of the layout.
* Don't throttle spotlight updates
Since we now assume that the spotlight and grid will be in sync (i.e. an active speaker in one will behave as an active speaker in the other), we don't want the spotlight to ever lag behind due to throttling. If this causes usability issues we should maybe look into making LiveKit's 'speaking' indicators less erratic first.
* Make layout shifts due to a change in speaker less surprising
Although we try now to avoid layout shifts due to the spotlight speaker changing wherever possible, a spotlight speaker coming from off screen can still trigger one. Let's shift the layout a bit more gracefully in this case.
* Improve the tile ordering tests
* Maximize the spotlight tile in portrait layout
* Tell tiles whether they're actually visible in a more timely manner
* Fix test
* Fix speaking indicators logic
* Improve readability of marbles
* Fix test case
---------
Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>
* Initial support for Hand Raise feature
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
* Refactored to use reaction and redaction events
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
* Replacing button svg with raised hand emoji
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
* SpotlightTile should not duplicate the raised hand
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
* Update src/room/useRaisedHands.tsx
Element Call recently changed to AGPL-3.0
* Use relations to load existing reactions when joining the call
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
* Links to sha commit of matrix-js-sdk that exposes the call membership event id and refactors some async code
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
* Removing RaiseHand.svg
* Check for reaction & redaction capabilities in widget mode
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
* Fix failing GridTile test
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
* Center align hand raise.
* Add support for displaying the duration of a raised hand.
* Add a sound for when a hand is raised.
* Refactor raised hand indicator and add tests.
* lint
* Refactor into own files.
* Redact the right thing.
* Tidy up useEffect
* Lint tests
* Remove extra layer
* Add better sound. (woosh)
* Add a small mode for spotlight
* Fix timestamp calculation on relaod.
* Fix call border resizing video
* lint
* Fix and update tests
* Allow timer to be configurable.
* Add preferences tab for choosing to enable timer.
* Drop border from raised hand icon
* Handle cases when a new member event happens.
* Prevent infinite loop
* Major refactor to support various state problems.
* Tidy up and finish test rewrites
* Add some explanation comments.
* Even more comments.
* Use proper duration formatter
* Remove rerender
* Fix redactions not working because they pick up events in transit.
* More tidying
* Use deferred value
* linting
* Add tests for cases where we got a reaction from someone else.
* Be even less brittle.
* Transpose border to GridTile.
* lint
---------
Signed-off-by: Milton Moura <miltonmoura@gmail.com>
Co-authored-by: fkwp <fkwp@users.noreply.github.com>
Co-authored-by: Half-Shot <will@half-shot.uk>
Co-authored-by: Will Hunt <github@half-shot.uk>
Hugh pointed out that the button labeled "Join call now" on this screen is misleading, because it does not join you to the call but rather send you to the lobby. Meanwhile, the designs call for this screen to use the words "Join as guest" and "Continue", so let's go with that.
Before you're connected to the SFU the local participant object will have the empty string as its ID. This changes to your actual ID once you've connected. Apparently I tried to fix this by forcing the local ID to always be the string 'local' but then I just forgot to use it correctly :)
Previously, dragging it all the way to the left would *not* mute the participant but rather bottom out at 10% volume, and people have found this unintuitive. Let's make it less silly by giving the slider a range of 0% to 100%, and making the mute toggle button have the same effect as dragging the slider to zero. When unmuting, it will reset to the last non-zero "committed" volume, similar to how the volume sliders in desktop environments work.
* Handle case of encryption key for an index to be undefined
As per https://github.com/matrix-org/matrix-js-sdk/pull/4423 the key can be undefined and so we should handle this rather than waiting for SubtleCrypto.importKey() to fail.
* Use release version of matrix-js-sdk
Diff is baa6d13506...v34.7.0
* Use RTCSession. reemitEncryptionKeys()
* Add some test coverage whilst we are here
* Add some test coverage whilst we are here
* Lint
I recently tried to use the dev configs with a local homeserver and found that the configuration was not compatible with this. We need to relax the network isolation and TLS cert verification requirements for fully local development to be possible.
For some reason yarn i18next didn't catch that the string had to be changed? I removed the string and regenerated it, and now the cookie policy is back.
This adds tests for a couple of the less trivial bits of code in CallViewModel. Testing them helped me uncover why focus switches still weren't being smooth! (It was because I was using RxJS's sample operator when I really wanted withLatestFrom.)
Catching two accessibility issues along the way: we were putting the wrong accessible labels on the 'expand' button, and even the off-screen pages of the spotlight tile were being exposed to accessibility technologies rather than hidden.
* Enable lint rules for Promise handling to discourage misuse of them.
Squashed all of Hugh's commits into one.
---------
Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>
I had experimented with turning this off in order to improve test performance, and apparently that ended up being merged. Now if we're to do component testing, we'll be changing things globally on the document, so isolation is very much necessary.
There's no particular change that we need to pull in, but I like to keep my linked copy of matrix-js-sdk up to date—a TypeScript config change is required by recent versions, so I'd like to update this now.
Sadly Codecov doesn't give us a way to relax the coverage requirements for changes that touch very few lines of code, which has been an invaluable feature of SonarCloud. I suggest we make the check non-blocking.
We were relying on deprecated APIs that are not supported when using Rust crypto. Since this entire file was copied and pasted from matrix-react-sdk originally, I just copied and pasted some of its more recent code in.
* Fix for missing client store (caused by: #2587)
* Fix interactive login with authenticated guest user.
Fix clearing storage before logging in a new account.
This was the result of me playing around with RxJS marble testing to understand how to get things done with its TestScheduler. I discovered that it lacks a clear way to fire arbitrary actions during the test, so I built a small helper function called schedule which does this for us.
We need to be consistent about whether we import matrix-js-sdk from `src` or
`lib`, otherwise we get two copies of matrix-js-sdk, and everything explodes.
* Fix issues detected by Knip
Including cleaning up some unused code and dependencies, using a React hook that we unintentionally stopped using, and also adding some previously undeclared dependencies.
* Replace remaining React ARIA components with Compound components
* fix button position
* disable scrollbars to resolve overlapping button
---------
Co-authored-by: Timo <toger5@hotmail.de>
* Install Knip
* Clarify an import that was confusing Knip
* Fix issues detected by Knip
Including cleaning up some unused code and dependencies, using a React hook that we unintentionally stopped using, and also adding some previously undeclared dependencies.
* Run dead code analysis in lint script and CI
---------
Co-authored-by: Timo <toger5@hotmail.de>
* Fix coverage reporting
Codecov hasn't been working recently because Vitest doesn't report coverage by default.
* Suppress some noisy log lines
Closes https://github.com/element-hq/element-call/issues/686
* Store test files alongside source files
This way we benefit from not having to maintain the same directory structure twice, and our linters etc. will actually lint test files by default.
* Stop using Vitest globals
Vitest provides globals primarily to make the transition from Jest more smooth. But importing its functions explicitly is considered a better pattern, and we have so few tests right now that it's trivial to migrate them all.
* Remove Storybook directory
We no longer use Storybook.
* Configure Codecov
Add a coverage gate for all new changes and disable its comments.
* upgrade vitest
---------
Co-authored-by: Timo <toger5@hotmail.de>
* Stop sharing state observables when the view model is destroyed
By default, observables running with shareReplay will continue running forever even if there are no subscribers. We need to stop them when the view model is destroyed to avoid memory leaks and other unintuitive behavior.
* Hydrate the call view model in a less hacky way
This ensures that only a single view model is created per call, unlike the previous solution which would create extra view models in strict mode which it was unable to dispose of. The other way was invalid because React gives us no way to reliably dispose of a resource created in the render phase. This is essentially a memory leak fix.
* Add simple global controls to put the call in picture-in-picture mode
Our web and mobile apps (will) all support putting calls into a picture-in-picture mode. However, it'd be nice to have a way of doing this that's more explicit than a breakpoint, because PiP views could in theory get fairly large. Specifically, on mobile, we want a way to do this that can tell you whether the call is ongoing, and that works even without the widget API (because we support SPA calls in the Element X apps…)
To this end, I've created a simple global "controls" API on the window. Right now it only has methods for controlling the picture-in-picture state, but in theory we can expand it to also control mute states, which is current possible via the widget API only.
* Fix footer appearing in large PiP views
* Add a method for whether you can enter picture-in-picture mode
* Have the controls emit booleans directly
The buttons were scrolling with the view instead of always being visible in a fixed location on the tile, and the indicators were not adopting the correct width.
The code path for when all tiles can fit on screen was failing to realize that it could sometimes get by with fewer columns. This resulted in wasted space for 4 person calls at some window sizes.
We've gotten feedback that it's distracting whenever the same video is shown in two places on screen. This fixes the spotlight case by showing only the avatar of anyone who is already visible in the spotlight. It also makes sense to hide the speaking indicators in spotlight layouts, I think, because this information is redundant to the spotlight tile.
This is because our layouts for flat windows are good at adapting to both small width and small height, while our layouts for narrow windows aren't so good at adapting to a small height.
If you were the only one in the call, you could get a broken-looking view in which the local tile is shown in the spotlight, and it's also shown in the PiP. This is redundant.
Apparently Renovate doesn't really like it when you use a group: preset inside packageRules, instead of at the top level of the config. We do want to apply schedule:weekly only to the "all non-major dependencies" group though, so we need to write the group definition out by hand.
There were a couple of cases where the lack of margins after the new layout changes just looked odd. Specifically, when the header is hidden (as in embedded mode), there would be no margin at the top of the window. Also the floating tile would run directly up against the sides of the window.
Due to an oversight of mine, 2440037639 actually removed the ability to see the one-on-one layout on mobile. This restores mobile one-on-one calls to working order and also avoids showing the spotlight tile unless there are more than a few participants.
If no one had spoken yet, we were still showing the local user in the spotlight. We should instead eagerly switch to showing an arbitrary remote participant in this case.
* Add DeviceMute widget action `io.element.device_mute`.
This allows to send mute requests ("toWidget") and get the current mute state as a response.
And it will update the client about each change of mute states.
* review + better explanation
* review
* add comments
* use `useCallback`
We've concluded that this behavior is actually more distracting than it is helpful, and we want to try out what it's like to just have the importance ordering and visual cues help you find who's speaking.
We're finding that if we reorder participants based on whether their mic is muted, this just creates a lot of distracting layout shifts. People who speak are automatically promoted into the speaker category, so there's little value in additionally caring about mute state.
The Compound design tokens package is now set up to generate React components for every icon, so we no longer need to use our more error-prone method of importing the SVGs.
Ensure that they don't interfere with say, using spacebar to press a button, and also ensure that they won't do surprising things like scroll the page at the same time.
Follow-up to ea2d98179c
This took a couple of iterations to find something that works without creating update loops, but I think that by automatically informing Grid whenever a layout component is re-rendered, we'll have a much easier time ensuring that our layouts are fully reactive.
We no longer allow individual tiles to be put in full screen, because we're seeing what it's like to just stretch the spotlight tile edge-to-edge and keep the margins minimal.
Includes the mobile UX optimizations and the tweaks we've made to cut down on wasted space, but does not yet include the change to embed the spotlight tile within the grid.
Because we were hiding even the local participant during initial connection, there would be no participants, and therefore nothing to put in the spotlight. The designs don't really tell us what the connecting state should look like, so I've taken the liberty of restoring it to its former glory of showing the local participant immediately.
react-rxjs is the library we've been using to connect our React components to view models and consume observables. However, after spending some time with react-rxjs, I feel that it's a very heavy-handed solution. It requires us to sprinkle <Subscribe /> and <RemoveSubscribe /> components all throughout the code, and makes React go through an extra render cycle whenever we mount a component that binds to a view model. What I really want is a lightweight React hook that just gets the current value out of a plain observable, without any extra setup. Luckily the observable-hooks library with its useObservableEagerState hook seems to do just that—and it's more actively maintained, too!
If not set, legacy call membership state events are sent instead.
Even if set, legacy events are sent in rooms with active legacy calls.
---------
Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>
Here I've implemented an MVP for the new unified grid layout, which scales smoothly up to arbitrarily many participants. It doesn't yet have a special 1:1 layout, so in spotlight mode and 1:1s, we will still fall back to the legacy grid systems.
Things that happened along the way:
- The part of VideoTile that is common to both spotlight and grid tiles, I refactored into MediaView
- VideoTile renamed to GridTile
- Added SpotlightTile for the new, glassy spotlight designs
- NewVideoGrid renamed to Grid, and refactored to be even more generic
- I extracted the media name logic into a custom React hook
- Deleted the BigGrid experiment
* Add try inner try block to the room summary fetching and only throw after fetching and a "blind join" fails.
(blind join: call room.join without knowing if the room is public)
Co-authored-by: Robin <robin@robin.town>
---------
Co-authored-by: Robin <robin@robin.town>
It thought that we were just trying to follow the latest commit on these actions, when in reality we want to follow the latest tag and pin its commit hash.
What I've tried to do here is to group most dependency updates together and put them on a weekly schedule. Some of our more sensitive dependencies such as LiveKit and Compound have been put into separate groups, so we still receive frequent updates for them.
* Load focus information from well known and use client config only as a fallback.
Signed-off-by: Timo K <toger5@hotmail.de>
Co-authored-by: Andrew Ferrazzutti <andrewf@element.io>
The message originally focused on the old feature of being able to
create a room with a custom URL. Instead, be more direct & say that the
current URL is for an inaccessible room.
This new message is based on what Element Web says for this scenario.
If you send a knock that is rejected, or your knock is accepted and you
are later removed from the room, do not automatically accept subsequent
invites to that room.
Note that the auto-join behaviour happened only if the page was not
refreshed after sending a knock.
Include:
- all rooms you are a member of
- knock rooms you've knocked on and are waiting for an invite to
- knock rooms you've been invited to in response to a knock
When visiting the page for a knock room you are already invited to, join
it right away instead of offering to knock (which will fail as long as
you remain invited to the room).
* Add joining with knock room creation flow.
Also add `WaitForInviteView` after knocking.
And appropriate error views when knock failed or gets rejected.
Signed-off-by: Timo K <toger5@hotmail.de>
* Refactor encryption information.
We had lots of enums and booleans to describe the encryption situation.
Now we only use the `EncryptionSystem` "enum" which contains the
additional information like sharedKey. (and we don't use the isRoomE2EE
function that is somewhat confusing since it checks `return widget ===
null && !room.getCanonicalAlias();` which is only indirectly related to
e2ee)
Signed-off-by: Timo K <toger5@hotmail.de>
* Update recent list.
- Don't use deprecated `groupCallEventHander` anymore (it used the old
`m.call` state event.)
- make the recent list reactive (getting removed from a call removes the
item from the list)
- support having rooms without shared secret but actual matrix
encryption in the recent list
- change the share link creation button so that we create a link with
pwd for sharedKey rooms and with `perParticipantE2EE=true` for matrix
encrypted rooms.
Signed-off-by: Timo K <toger5@hotmail.de>
* fix types
Signed-off-by: Timo K <toger5@hotmail.de>
* patch js-sdk for linter
Signed-off-by: Timo K <toger5@hotmail.de>
* ignore ts expect error
Signed-off-by: Timo K <toger5@hotmail.de>
* Fix error in widget mode.
We cannot call client.getRoomSummary in widget mode. The code path needs
to throw before reaching this call. (In general we should never call
getRoomSummary if getRoom returns a room)
Signed-off-by: Timo K <toger5@hotmail.de>
* tempDemo
Signed-off-by: Timo K <toger5@hotmail.de>
* remove wait for invite view
Signed-off-by: Timo K <toger5@hotmail.de>
* yarn i18n
Signed-off-by: Timo K <toger5@hotmail.de>
* reset back mute participant count
* add logic to show error view when getting removed
* include reason whenever someone gets removed from a call.
* fix activeRoom not beeing early enough
* fix lints
* add comment about encryption situation
Signed-off-by: Timo K <toger5@hotmail.de>
* Fix lockfile
* Use (unmerged!) RoomSummary type from the js-sdk
Temporarily change the js-sdk dependency to the PR branch that provides
that type
* review
Signed-off-by: Timo K <toger5@hotmail.de>
* review (remove participant count unknown)
Signed-off-by: Timo K <toger5@hotmail.de>
* remove error for unencrypted calls (allow intentional unencrypted calls)
Signed-off-by: Timo K <toger5@hotmail.de>
* update js-sdk
Signed-off-by: Timo K <toger5@hotmail.de>
---------
Signed-off-by: Timo K <toger5@hotmail.de>
Co-authored-by: Andrew Ferrazzutti <andrewf@element.io>
* use pull_request event rather than workflow_run
* use default for enable-pull-request-comment and enable-commit-comment
* we dont need prdetails going forward
I discovered that this hook was calling complete on the returned observable almost immediately when it gets mounted. This caused the call view model to never know when the application was switching focuses. At first I thought this was just because I forgot to move the call to complete to the effect's clean-up function, but even with that changed, React still calls the effect twice in strict mode. So, let's just remove the call entirely.
* dont register in widget mode
Signed-off-by: Timo K <toger5@hotmail.de>
* not call registerPasswordlessUser where its called in a widget.
Signed-off-by: Timo K <toger5@hotmail.de>
---------
Signed-off-by: Timo K <toger5@hotmail.de>
It's part of React Spectrum, which we're trying to avoid updating at this time because we're phasing out usage of the libraries and upgrading them is painful.
Because the author of the vitest PR used the semantic commit naming convention, Renovate now thinks our entire repo uses semantic commits and has renamed all of its PRs.
This is a start at implementing the call layouts from the new designs. I've added data types to model the contents of each possible layout, and begun implementing the business logic to produce these layouts in the call view model.
This hack was added in the early days of Element Call, back when we were doing call signaling using non-state room events, and missing part of a room's history could cause calls to fall apart. Nowadays we use state events for signaling, and all this hack is doing is making sync times unnecessarily long, so we can remove it.
I thought that adding isolation: isolate to the React root had fixed the Firefox layering glitches, but today I've started noticing those glitches again.
This turns on a lint rule to require display names for all of our components, which makes it a lot easier to find your way around the component tree in React's dev tools.
As Element Call grows in complexity, it has become a pain point that our business logic remains so tightly coupled to the UI code. In particular, this has made testing difficult, and the complex semantics of React hooks are not a great match for arbitrary business logic. Here, I show the beginnings of what it would look like for us to adopt the MVVM pattern. I've created a CallViewModel and TileViewModel that expose their state to the UI as rxjs Observables, as well as a couple of helper functions for consuming view models in React code.
This should contain no user-visible changes, but we need to watch out for regressions particularly around focus switching and promotion of speakers, because this was the logic I chose to refactor first.
A couple different people (me and Dave) have tried and failed to find an easy way to upgrade these, and in the future we won't need these dependencies at all once the switch to Compound Web is finished, so let's not generate Renovate PRs for them.
* Update dependency @livekit/components-react to v1.4.1
* patch to match new lk api
Signed-off-by: Timo K <toger5@hotmail.de>
---------
Signed-off-by: Timo K <toger5@hotmail.de>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Timo K <toger5@hotmail.de>
move "{{count, number}}_one" "participant_count_one"
move "{{count, number}}_other" "participant_count_other"
move "{{count}} stars_one" "star_rating_input_label_one"
move "{{count}} stars_other" "star_rating_input_label_other"
move "{{displayName}} is presenting" "video_tile.presenter_label"
move "{{displayName}}, your call has ended." "call_ended_view.headline"
move "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call." "settings.opt_in_description"
move "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>" "register_auth_links"
move "<0>Create an account</0> Or <2>Access as a guest</2>" "login_auth_links"
move "<0>Oops, something's gone wrong.</0>" "full_screen_view_h1"
move "<0>Submitting debug logs will help us track down the problem.</0>" "full_screen_view_description"
move "<0>Thanks for your feedback!</0>" "call_ended_view.feedback_done"
move "<0>We'd love to hear your feedback so we can improve your experience.</0>" "call_ended_view.feedback_prompt"
move "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>" "call_ended_view.create_account_prompt"
move "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log." "rageshake_request_modal.body"
move "Back to recents" "lobby.leave_button"
move "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>." "analytics_notice"
move "Call not found" "group_call_loader_failed_heading"
move "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key." "group_call_loader_failed_text"
move "Confirm password" "register_confirm_password_label"
move "Connectivity to the server has been lost." "disconnected_banner"
move "Continue in browser" "app_selection_modal.continue_in_browser"
move "Create account" "call_ended_view.create_account_button"
move "Debug log request" "rageshake_request_modal.title"
move "Developer" "settings.developer_tab_title"
move "Developer Settings" "settings.developer_settings_label"
move "Element Call Home" "header_label"
move "End call" "hangup_button_label"
move "Full screen" "fullscreen_button_label"
move "Exit full screen" "exit_fullscreen_button_label"
move "Expose developer settings in the settings window." "settings.developer_settings_label_description"
move "Feedback" "settings.feedback_tab_title"
move "Grid" "layout_grid_label"
move "Spotlight" "layout_spotlight_label"
move "How did it go?" "call_ended_view.survey_prompt"
move "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below." "settings.feedback_tab_body"
move "Include debug logs" "settings.feedback_tab_send_logs_label"
move "Invite to this call" "invite_modal.title"
move "Join call" "lobby.join_button"
move "Join call now" "room_auth_view_join_button"
move "Join existing call?" "join_existing_call_modal.title"
move "Link copied to clipboard" "invite_modal.link_copied_toast"
move "Local volume" "local_volume_label"
move "Logging in…" "logging_in"
move "Login" "login_title"
move "Login to your account" "unauthenticated_view_login_button"
move "Microphone off" "microphone_off"
move "Microphone on" "microphone_on"
move "More" "settings.more_tab_title"
move "Mute microphone" "mute_microphone_button_label"
move "Name of call" "call_name"
move "Not now, return to home screen" "call_ended_view.not_now_button"
move "Open in the app" "app_selection_modal.open_in_app"
move "Not registered yet? <2>Create an account</2>" "unauthenticated_view_body"
move "Participants" "header_participants_label"
move "Passwords must match" "register.passwords_must_match"
move "Ready to join?" "app_selection_modal.text"
move "Recaptcha dismissed" "recaptcha_dismissed"
move "Recaptcha not loaded" "recaptcha_not_loaded"
move "Reconnect" "call_ended_view.reconnect_button"
move "Registering…" "register.registering"
move "Retry sending logs" "rageshake_button_error_caption"
move "Return to home screen" "return_home_button"
move "Select an option" "select_input_unset_button"
move "Select app" "app_selection_modal.title"
move "Send debug logs" "rageshake_send_logs"
move "Sending debug logs…" "rageshake_sending_logs"
move "Sending…" "rageshake_sending"
move "Share screen" "screenshare_button_label"
move "Sharing screen" "stop_screenshare_button_label"
move "Show connection stats" "settings.show_connection_stats_label"
move "Speaker" "settings.speaker_device_selection_label"
move "Start new call" "start_new_call"
move "Start video" "start_video_button_label"
move "Stop video" "stop_video_button_label"
move "Submit feedback" "settings.feedback_tab_h4"
move "Submitting…" "submitting"
move "Thanks, we received your feedback!" "settings.feedback_tab_thank_you"
move "Thanks!" "rageshake_sent"
move "This application has been opened in another tab." "application_opened_another_tab"
move "This call already exists, would you like to join?" "join_existing_call_modal.text"
move "Unmute microphone" "unmute_microphone_button_label"
move "Version: {{version}}" "version"
move "Waiting for other participants…" "waiting_for_participants"
move "Yes, join call" "join_existing_call_modal.join_button"
move "You" "video_tile.sfu_participant_local"
move "You were disconnected from the call" "call_ended_view.body"
move "Your feedback" "settings.feedback_tab_description_label"
move "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117" "browser_media_e2ee_unsupported"
move "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>" "unauthenticated_view_eula_caption"
move "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>" "room_auth_view_eula_caption"
move "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>" "register.recaptcha_caption"
```
reorderTiles was programmed to only place a tile in the speaker section if that tile's previous position was off-screen. But for speakers that started off-screen, this would cause them to oscillate in and out of the speaker section on each render, because the speaker section is, of course, on-screen. The solution I've gone with here is to avoid referencing the previous position, and instead go by the computed natural ordering, which ought to be more stable.
This also removes the use of the useLivekitRoom hook: we had reached
the point where the only thing it was actually doing was disconnecting,
so we now do that in the onClick handler for the leave button (I don't
think we need to disconnect on unmount?). It was otherwise just getting in
the way and causing tracks to be enabled/disabled when we didn't want them
to be. This also removes the need for the blockAudio code.
Fixes https://github.com/vector-im/element-call/issues/1413
Previously it could be either undefined or type None which meant the
same thing: no need to have both, just make it required.
This also means we can move the line to set e2ee enabled into a more
sensible place rather than in the ActiveCall de-nulling wrapper.
The auto ratcheting sets the keys and so looks like it can clobber
us setting a key from the app if they race, so just disable it, at
least for now - we aren't using it.
develop.element.io and Nightly were the final things to depend on this deployment, and they've now been updated to use call.element.dev, so we can disable Netlify deployments.
* Fix mute button not being in sync with actual video/audio feed.
This happens if we toggle the button while waiting for updating the stream.
It is prohibited by checking if the stream state is in sync after the update
is done.
Signed-off-by: Timo K <toger5@hotmail.de>
---------
Signed-off-by: Timo K <toger5@hotmail.de>
Take the room ID from the URL rather than just assuming it's still
the one that was in URL params before: if only the hash changes,
the app won't reload.
Fixes https://github.com/vector-im/element-call/issues/1708
As base64 is fairly obviously not sensible for URLs and we were not
URL encoding it so we were ending up with spaces in the URL.
Also base 64 encode the password in case, as per comment.
We changed our minds: people do copy the URL from the bar and
give that to people and expect it to work: it doesn't make sense
to prioritise shorter URLs over this. There's no security advantage
unless we think there's a risk someone might steal your key by taking
a photo of your monitor over your shoulder and decrypting the calls
they can't already hear by standing behind you.
https://developer.apple.com/videos/play/wwdc2019/717/
```
You'll notice that I specify a question mark and an asterisk as the pattern from the query items value. A pattern consisting of a single asterisk matches any string, including the empty string. And a missing query item has a value equivalent to the empty string. So to match against the string that's at least one character long, I specify a question mark and then any additional characters are matched by the asterisk.
```
This is a bit of a hack, but is the only way I can see that we can
update to using the new default device when the OS-level default
changes. Hopefully the comments explain everything.
It's unused ever since we switched to LiveKit, and we intend to use other telemetry mechanisms going forward to fill this debugging use case, so it can be removed as discussed in today's team meeting.
Apparently the upgrade to i18next-parser v8 came with the deprecation of this 'useKeysAsDefaultValues' option, and this is the new way to configure that behavior.
...instead of monkey patching the console log objects. We use a logging
framework everywhere now (this fixes the times when we didn't...)
so there's not really a reason to do this the hacky way anymore.
This means that log lines now appear to come from whatever else is
intercepting the logger (eg. sentry) rather than rageshake.ts.
Opinions on this welcome on whether it's better or not.
This upgrade came with a number of new lints that needed to be fixed across the code base. Primarily: explicit return types on functions, and explicit visibility modifiers on class members.
Look up the alias manually instead. As hopefully explained by the comment.
We hope this may fix a bug where the room ID appeared instead of the room name.
Make it take a room object rather than a room ID to avoid it depending
on a side effect, ie. if the room object input changes, the hook will be
re-run but if we can't get the room from the room ID for whatever reason,
we'd be stuck.
Also add logging on why we decided a room was e2ee.
The triage board isn't being used, so no reason to have automation (it's also old style and should be modernised if there's interest in using it again)
See comments. I'm not very happy with how this code bounces state in and out of different hooks and useEffect blocks, but as a quick fix this should work.
* fix url by prvidin a last &
everything after the last & will be stripped away
-> hence we loose the last param (usually confined to room...)
-> going home kills the all the params which we need to fix!
---------
Signed-off-by: Timo K <toger5@hotmail.de>
This didn't work with e2e calls and just ended up with everyone who
went to the URL creating their own room because it didn't add the
alias to any of them.
This has it show a very simple 404-esque screen instead. If the call
already exists, it will show it as before, so existing URLs will
continue to work.
Because the height of our header component changed at some point, the hard-coded height values in the CSS were off by a few px and caused the page to overflow slightly.
This was a hack that we did back when we were working on PTT, to make the joining process for PTT more seamless, but it doesn't make much sense to auto-join normal calls without giving the user a chance to turn off / adjust their media. If we want this behavior back eventually, I think it would be better serviced by a separate URL parameter.
echo "[yarn-linker] The pre-commit hook has disabled .links.yaml and MODIFIED the yarn.lock file. Review the staged changes (the hook added yarn.lock, was this desired?) and run \`git commit \` again if they look okay. The post-commit hook will re-enable your links."
Element Call is available as a Docker image from the [GitHub Container Registry](https://github.com/element-hq/element-call/pkgs/container/element-call).
Group calls with WebRTC that leverage [Matrix](https://matrix.org) and an open-source WebRTC toolkit from [LiveKit](https://livekit.io/).
[🎬 Live Demo 🎬](https://call.element.io)
For prior version of the Element Call that relied solely on full-mesh logic, check [`full-mesh`](https://github.com/vector-im/element-call/tree/full-mesh) branch.
The world's first 🌐 decentralized and 🤝 federated video conferencing solution
powered by **the Matrix protocol**.

## 📌 Overview
To try it out, visit our hosted version at [call.element.io](https://call.element.io). You can also find the latest development version continuously deployed to [call.element.dev](https://call.element.dev/).
**Element Call** is a native Matrix video conferencing application developed by
[Element](https://element.io/), designed for **secure**, **scalable**,
**privacy-respecting**, and **decentralized** video and voice calls over the
Matrix protocol. Built on **MatrixRTC**
([MSC4143](https://github.com/matrix-org/matrix-spec-proposals/pull/4143)), it
✅ **Decentralized & Federated**– No central authority; works across Matrix
homeservers.
✅ **End-to-End Encrypted**– Secure and private calls.
✅ **Standalone & Widget Mode**– Use as an independent app or embed in Matrix
clients.
✅ **WebRTC-based**– No additional software required.
✅ **Scalable with LiveKit**– Supports large meetings via SFU
([MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)).
✅ **Raise Hand**– Participants can signal when they want to speak, helping to
organize the flow of the meeting.
✅ **Emoji Reactions**– Users can react with emojis 👍️ 🎉 👏 🤘, adding
engagement and interactivity to the conversation.
## 🚀 Deployment & Packaging Options
Element Call is developed using the
[Matrix js-sdk](https://github.com/matrix-org/matrix-js-sdk) with Matroska mode.
This allows the app to run either as a Standalone App directly connected to a
homeserver with login interfaces or it can be used as a widget within a Matrix
client.
### 🖥️ Standalone Mode
<palign="center">
<imgsrc="./docs/element_call_standalone.drawio.png"alt="Element Call in Standalone Mode">
</p>
In Standalone mode, Element Call operates as an independent, full-featured video
conferencing web application, enabling users to join or host calls without
requiring a separate Matrix client.
### 📲 In-App Calling (Widget Mode in Messenger Apps)
When used as a widget 🧩, Element Call is solely responsible on the core calling
functionality (MatrixRTC). Authentication, event handling, and room state
updates (via the Client-Server API) are handled by the hosting client.
Communication between Element Call and the client is managed through the widget
API.
<palign="center">
<imgsrc="./docs/element_call_widget.drawio.png"alt="Element Call in Widget Mode">
</p>
Element Call can be embedded as a widget inside apps like
[**Element Web**](https://github.com/element-hq/element-web) or **Element X
the **first participant who joined the call** defines via the `foci_preferred`
key in their `org.matrix.msc3401.call.member` which actual MatrixRTC backend
will be used for this call.
- During the actual call join flow, the **LiveKit JWT Auth Service** provides
the client with the **LiveKit SFU WebSocket URL** and an **access JWT token**
in order to exchange media via WebRTC.
Because Element Call uses client-side routing, your server must be able to route any requests to non-existing paths back to `/index.html`. For example, in Nginx you can achieve this with the `try_files` directive:
The example below illustrates how backend selection works across **Matrix
federation**, using the setup from sites A, B, and C. It demonstrates backend
selection for **Matrix rooms 123 and 456**, which include users from different
homeservers.
```
server {
...
location / {
...
try_files $uri /$uri /index.html;
}
}
```
<palign="center">
<imgsrc="./docs/SFU_selection.drawio.png"alt="Element Call SFU selection over Matrix federation">
</p>
By default, the app expects you to have a Matrix homeserver (such as [Synapse](https://matrix-org.github.io/synapse/latest/setup/installation.html)) installed locally and running on port 8008. If you wish to use a homeserver on a different URL or one that is hosted on a different server, you can add a config file as above, and include the homeserver URL that you'd like to use.
## 🌍 Translation
Element Call requires a homeserver with registration enabled without any 3pid or token requirements, if you want it to be used by unregistered users. Furthermore, it is not recommended to use it with an existing homeserver where user accounts have joined normal rooms, as it may not be able to handle those yet and it may behave unreliably.
If you'd like to help translate Element Call, head over to
[Localazy](https://localazy.com/p/element-call). You're also encouraged to join
the [Element Translators](https://matrix.to/#/#translators:element.io) space to
discuss and coordinate translation efforts.
Therefore, to use a self-hosted homeserver, this is recommended to be a new server where any user account created has not joined any normal rooms anywhere in the Matrix federated network. The homeserver used can be setup to disable federation, so as to prevent spam registrations (if you keep registrations open) and to ensure Element Call continues to work in case any user decides to log in to their Element Call account using the standard Element app and joins normal rooms that Element Call cannot handle.
## Configuration
There are currently two different config files. `.env` holds variables that are used at build time, while `public/config.json` holds variables that are used at runtime. Documentation and default values for `public/config.json` can be found in [ConfigOptions.ts](src/config/ConfigOptions.ts).
## Translation
If you'd like to help translate Element Call, head over to [translate.element.io](https://translate.element.io/engage/element-call/). You're also encouraged to join the [Element Translators](https://matrix.to/#/#translators:element.io) space to discuss and coordinate translation efforts.
## Development
## 🛠️ Development
### Frontend
Element Call is built against [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/pull/2553). To get started, clone, install, and link the package:
A few aspects of Element Call's interface can be controlled through a global API on the `window`.
## Picture-in-picture
-`controls.canEnterPip(): boolean` Determines whether it's possible to enter picture-in-picture mode.
-`controls.enablePip(): void` Puts the call interface into picture-in-picture mode. Throws if not in a call.
-`controls.disablePip(): void` Takes the call interface out of picture-in-picture mode, restoring it to its natural display mode. Throws if not in a call.
## Audio devices
On mobile platforms (iOS, Android), web views do not reliably support selecting audio output devices such as the main speaker, earpiece, or headset. To address this limitation, the following functions allow the hosting application (e.g., Element Web, Element X) to manage audio devices via exposed JavaScript interfaces. These functions must be enabled using the URL parameter `controlledAudioDevices` to take effect.
-`controls.setAvailableAudioDevices(devices: { id: string, name: string, forEarpiece?: boolean, isEarpiece?: boolean isSpeaker?: boolean, isExternalHeadset?, boolean; }[]): void` Sets the list of available audio outputs. `forEarpiece` is used on iOS only.
It flags the device that should be used if the user selects earpiece mode. This should be the main stereo loudspeaker of the device.
-`controls.onAudioDeviceSelect: ((id: string) => void) | undefined` Callback called whenever the user or application selects a new audio output.
-`controls.setAudioDevice(id: string): void` Sets the selected audio device in Element Call's menu. This should be used if the OS decides to automatically switch to Bluetooth, for example.
-`controls.setAudioEnabled(enabled: boolean)` Enables/disables all audio output from the application. Output is enabled by default.
-`showNativeAudioDevicePicker: (() => void) | undefined`. Callback called whenever the user presses the output button in the settings menu.
This button is only shown on iOS. (`userAgent.includes("iPhone")`)
| **Deployment mode** | Hosted as a static web page and accessed via a URL when used as a widget | Bundled within a messenger app for seamless integration |
| **Release artifacts** | Docker Image, Tarball | Tarball, NPM for Web, Android AAR, SwiftPM for iOS |
| **Responsibility for regulatory compliance** | The administrator that is deploying the app is responsible for compliance with any applicable regulations (e.g. privacy) | The developer of the messenger app is responsible for compliance |
| **Analytics consent** | Element Call will show a consent UI. | Element Call will not show a consent UI. The messenger app should only provide the embedded Element Call with the [analytics URL parameters](./url-params.md#embedded-only-parameters) if consent has been granted. |
| **Analytics data** | Element Call will send data to the Posthog, Sentry and Open Telemetry targets specified by the administrator in the `config.json` | Element Call will send data to the Posthog and Sentry targets specified in the URL parameters by the messenger app |
### Using the embedded package within a messenger app
Currently the best way to understand the necessary steps is to look at the implementations in the Element Messenger apps: [Web](https://github.com/element-hq/element-web/pull/29309), [iOS](https://github.com/element-hq/element-x-ios/pull/3939) and [Android](https://github.com/element-hq/element-x-android/pull/4470).
The basics are:
1. Add the appropriate platform dependency as given for a [release](https://github.com/element-hq/element-call/releases), or use the embedded tarball. e.g. `npm install @element-hq/element-call-embedded@0.9.0`
2. Include the assets from the platform dependency in the build process. e.g. copy the assets during a [Webpack](https://github.com/element-hq/element-web/blob/247cd8d56d832d006d7dfb919d1042529d712b59/webpack.config.js#L677-L682) build.
3. Use the `index.html` entrypointof the imported assets when you are constructing the WebView or iframe. e.g. using a [relative path in a webapp](https://github.com/element-hq/element-web/blob/247cd8d56d832d006d7dfb919d1042529d712b59/src/models/Call.ts#L680), or on the the Android [WebViewAssetLoader](https://github.com/element-hq/element-x-android/blob/fe5aab6588ecdcf9354a3bfbd9e97c1b31175a8f/features/call/impl/src/main/kotlin/io/element/android/features/call/impl/utils/DefaultCallWidgetProvider.kt#L20)
4. Set any of the [embedded-only URL parameters](./url-params.md#embedded-only-parameters) that you need.
## Widget vs standalone mode
Element Call is developed using the [js-sdk](https://github.com/matrix-org/matrix-js-sdk) with matroska mode. This means the app can run either as a standalone app directly connected to a homeserver providing login interfaces or it can be used as a widget within a Matrix client.
As a widget, the app only uses the core calling (MatrixRTC) parts. The rest (authentication, sending events, getting room state updates about calls) is done by the hosting client.
Element Call and the hosting client are connected via the widget API.
Element Call detects that it is run as a widget if a widgetId is defined in the url parameters. If `widgetId` is present then Element Call will try to connect to the client via the widget postMessage API using the parameters provided in [Url Format and parameters
If you want to make changes to a package that Element Call depends on and see those changes applied in real time, you can create a link to a local copy of the package. Yarn has a command for this (`yarn link`), but it's not recommended to use it as it ends up modifying package.json with details specific to your development environment.
Instead, you can use our little 'linker' plugin. Create a file named `.links.yaml` in the Element Call project directory, listing the names and paths of any dependencies you want to link. For example:
[MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md).
#### Matrix site endpoint routing
In the context of MatrixRTC, we suggest using a single hostname for backend
communication by implementing endpoint routing within a reverse proxy setup. For
- [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/)
## 🤝 Want to Contribute?
Have a guide or blog post you'd like to share? Open a
[PR](https://github.com/element-hq/element-call/pulls) to add it here, or drop a
link in the [#webrtc:matrix.org](https://matrix.to/#/#webrtc:matrix.org) room.
| [Full](./embedded-standalone.md) | All | `https://element_call.domain/room` |
| [Embedded](./embedded-standalone.md) | Remote URL | `https://element_call.domain/` n.b. no `/room` part |
| [Embedded](./embedded-standalone.md) | Embedded within messenger app | Platform dependent, but you load the `index.html` file without a `/room` part |
## Parameters
### Common Parameters
These parameters are relevant to both [widget](./embedded-standalone.md) and [standalone](./embedded-standalone.md) modes:
| Name | Values | Required for widget | Required for SPA | Description |
| `allowIceFallback` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Allows use of fallback STUN servers for ICE if the user's homeserver doesn’t provide any. |
| `analyticsID` (deprecated: use `posthogUserId` instead) | Posthog analytics ID | No | No | Available only with user's consent for sharing telemetry in Element Web. |
| `appPrompt` | `true` or `false` | No, defaults to `true` | No, defaults to `true` | Prompts the user to launch the native mobile app upon entering a room, applicable only on Android and iOS, and must be enabled in config. |
| `confineToRoom` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Keeps the user confined to the current call/room. |
| `displayName` | | No | No | Display name used for auto-registration. |
| `enableE2EE` (deprecated) | `true` or `false` | No, defaults to `true` | No, defaults to `true` | Legacy flag to enable end-to-end encryption, not used in the `livekit` branch. |
| `fontScale` | A decimal number such as `0.9` | No, defaults to `1.0` | No, defaults to `1.0` | Factor by which to scale the interface's font size. |
| `fonts` | | No | No | Defines the font(s) used by the interface. Multiple font parameters can be specified: `?font=font-one&font=font-two...`. |
| `hideHeader` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Hides the room header when in a call. |
| `hideScreensharing` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Hides the screen-sharing button. |
| `homeserver` | | Not applicable | No | Homeserver for registering a new (guest) user, configures non-default guest user server when creating a spa link. |
| `intent` | `start_call` or `join_existing` | No, defaults to `start_call` | No, defaults to `start_call` | The intent of the user with respect to the call. e.g. if they clicked a Start Call button, this would be `start_call`. If it was a Join Call button, it would be `join_existing`. |
| `lang` | [BCP 47](https://www.rfc-editor.org/info/bcp47) code | No | No | The language the app should use. |
| `password` | | No | No | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.) |
| `perParticipantE2EE` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Enables per participant encryption with Keys exchanged over encrypted matrix room messages. |
| `controlledAudioDevices` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Whether the [global JS controls for audio devices](./controls.md#audio-devices) should be enabled, allowing the list of audio devices to be controlled by the app hosting Element Call. |
| `roomId` | [Matrix Room ID](https://spec.matrix.org/v1.12/appendices/#room-ids) | Yes | No | Anything about what room we're pointed to should be from useRoomIdentifier which parses the path and resolves alias with respect to the default server name, however roomId is an exception as we need the room ID in embedded widget mode, and not the room alias (or even the via params because we are not trying to join it). This is also not validated, where it is in `useRoomIdentifier()`. |
| `showControls` | `true` or `false` | No, defaults to `true` | No, defaults to `true` | Displays controls like mute, screen-share, invite, and hangup buttons during a call. |
| `skipLobby` (deprecated: use `intent` instead) | `true` or `false` | No. If `intent` is explicitly `start_call` then defaults to `true`. Otherwise defaults to `false` | No, defaults to `false` | Skips the lobby to join a call directly, can be combined with preload in widget. When `true` the audio and video inputs will be muted by default. (This means there currently is no way to start without muted video if one wants to skip the lobby. Also not in widget mode.) |
| `theme` | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast` | No, defaults to `dark` | No, defaults to `dark` | UI theme to use. |
| `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. |
### Widget-only parameters
These parameters are only supported in [widget](./embedded-standalone.md) mode.
| `baseUrl` | | Yes | The base URL of the homeserver to use for media lookups. |
| `deviceId` | Matrix device ID | Yes | The Matrix device ID for the widget host. |
| `parentUrl` | | Yes | The url used to send widget action postMessages. This should be the domain of the client or the webview the widget is hosted in. (in case the widget is not in an Iframe but in a dedicated webview we send the postMessages same WebView the widget lives in. Filtering is done in the widget so it ignores the messages it receives from itself) |
| `posthogUserId` | Posthog user identifier | No | This replaces the `analyticsID` parameter |
| `preload` | `true` or `false` | No, defaults to `false` | Pauses app before joining a call until an `io.element.join` widget action is seen, allowing preloading. |
| `returnToLobby` | `true` or `false` | No, defaults to `false` | Displays the lobby in widget mode after leaving a call; shows a blank page if set to `false`. Useful for video rooms. |
| `userId` | [Matrix User Identifier](https://spec.matrix.org/v1.12/appendices/#user-identifiers) | Yes | The Matrix user ID. |
| `widgetId` | [MSC2774](https://github.com/matrix-org/matrix-spec-proposals/pull/2774) format widget ID | Yes | The id used by the widget. The presence of this parameter implies that element call will not connect to a homeserver directly and instead tries to establish postMessage communication via the `parentUrl`. |
### Embedded-only parameters
These parameters are only supported in the [embedded](./embedded-standalone.md) package of Element Call and will be ignored in the [full](./embedded-standalone.md) package.
| `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. |
| `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. |
* This file was generated by the Gradle 'init' task.
*
* The settings file is used to specify which projects to include in your build.
* For more detailed information on multi-project builds, please refer to https://docs.gradle.org/8.6/userguide/multi_project_builds.html in the Gradle documentation.
* This project uses @Incubating APIs which are subject to change.
SwiftPM package containing an embedded build of the Element Call widget.
## Copyright & License
Copyright 2021-2025 New Vector Ltd
This software is dual-licensed by New Vector Ltd (Element). It can be used either:
(1) for free under the terms of the GNU Affero General Public License (as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version); OR
(2) under the terms of a paid-for Element Commercial License agreement between you and Element (the terms of which may vary depending on what you and Element have agreed to).
Unless required by applicable law or agreed to in writing, software distributed under the Licenses is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the Licenses for the specific language governing permissions and limitations under the Licenses.
NPM package containing an embedded build of the Element Call widget.
## Copyright & License
Copyright 2021-2025 New Vector Ltd
This software is dual-licensed by New Vector Ltd (Element). It can be used either:
(1) for free under the terms of the GNU Affero General Public License (as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version); OR
(2) under the terms of a paid-for Element Commercial License agreement between you and Element (the terms of which may vary depending on what you and Element have agreed to).
Unless required by applicable law or agreed to in writing, software distributed under the Licenses is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the Licenses for the specific language governing permissions and limitations under the Licenses.
"create_account_prompt":"<0>Защо не настройте парола за да запазите акаунта си?</0><1>Ще можете да запазите името и аватара си за бъдещи разговори</1>",
"not_now_button":"Несега, върни се на началния екран"
},
"common":{
"audio":"Звук",
"avatar":"Аватар",
"display_name":"Име/псевдоним",
"home":"Начало",
"loading":"Зареждане…",
"password":"Парола",
"profile":"Профил",
"settings":"Настройки",
"username":"Потребителско име",
"video":"Видео"
},
"join_existing_call_modal":{
"join_button":"Да, присъедини се",
"text":"Този разговор вече съществува, искате ли да се присъедините?",
"title":"Присъединяване към съществуващ разговор?"
},
"layout_spotlight_label":"Прожектор",
"lobby":{
"join_button":"Влез в разговора"
},
"logging_in":"Влизане…",
"login_auth_links":"<0>Създайте акаунт</0> или <2>Влезте като гост</2>",
"login_title":"Влез",
"rageshake_request_modal":{
"body":"Друг потребител в този разговор има проблем. За да диагностицираме този проблем по-добре ни се иска да съберем debug логове.",
"title":"Заявка за debug логове"
},
"rageshake_send_logs":"Изпратете debug логове",
"rageshake_sending":"Изпращане…",
"recaptcha_dismissed":"Recaptcha отхвърлена",
"recaptcha_not_loaded":"Recaptcha не е заредена",
"register":{
"passwords_must_match":"Паролите не съвпадат",
"registering":"Регистриране…"
},
"register_auth_links":"<0>Вече имате акаунт?</0><1><0>Влезте с него</0> или <2>Влезте като гост</2></1>",
"analytics_notice":"Účastí v této beta verzi souhlasíte se shromažďováním anonymních údajů, které používáme ke zlepšování produktu. Více informací o tom, které údaje sledujeme, najdete v našich <2>Zásadách ochrany osobních údajů</2> a <6>Zásadách používání souborů cookie</6>.",
"app_selection_modal":{
"continue_in_browser":"Pokračovat v prohlížeči",
"open_in_app":"Otevřít v aplikaci",
"text":"Jste připraveni se připojit?",
"title":"Vybrat aplikaci"
},
"call_ended_view":{
"create_account_button":"Vytvořit účet",
"create_account_prompt":"<0>Proč neskončit nastavením hesla, abyste mohli účet použít znovu?</0><1>Budete si moci nechat své jméno a nastavit si avatar pro budoucí hovory </1>",
"feedback_done":"<0>Děkujeme za vaši zpětnou vazbu! </0>",
"feedback_prompt":"<0>Rádi si vyslechneme vaši zpětnou vazbu, abychom mohli vaše prostředí vylepšit. </0>",
"headline":"{{displayName}}, váš hovor skončil.",
"not_now_button":"Teď ne, vrátit se na domovskou obrazovku",
"show_non_member_tiles":"Zobrazit dlaždice pro nečlenská média",
"url_params":"Parametry URL",
"use_new_membership_manager":"Použijte novou implementaci volání MembershipManager",
"use_to_device_key_transport":"Použít přenos klíčů do zařízení. Tím se vrátíte k přenosu klíčů do místnosti, když jiný účastník hovoru pošle klíč místnosti"
},
"disconnected_banner":"Připojení k serveru bylo ztraceno.",
"error":{
"call_is_not_supported":"Volání není podporováno",
"call_not_found":"Volání nebylo nalezeno",
"call_not_found_description":"<0>Zdá se, že tento odkaz nepatří k žádnému existujícímu volání. Zkontrolujte, zda máte správný odkaz, nebo <1>vytvořte nový</1>.</0>",
"connection_lost":"Spojení ztraceno",
"connection_lost_description":"Hovor byl přerušen.",
"e2ee_unsupported":"Nekompatibilní prohlížeč",
"e2ee_unsupported_description":"Váš webový prohlížeč nepodporuje šifrované hovory. Mezi podporované prohlížeče patří Chrome, Safari a Firefox 117+.",
"generic":"Něco se pokazilo.",
"generic_description":"Odeslání protokolů ladění nám pomůže vystopovat problém.",
"insufficient_capacity":"Nedostatečná kapacita",
"insufficient_capacity_description":"Server dosáhl své maximální kapacity a v tuto chvíli se nemůžete připojit k hovoru. Zkuste to později nebo se obraťte na správce serveru, pokud problém přetrvává.",
"matrix_rtc_focus_missing":"Server není nakonfigurován pro práci s {{brand}}. Obraťte se na správce serveru (Doména: {{domain}}, Kód chyby: {{ errorCode }}).",
"open_elsewhere":"Otevřeno na jiné kartě",
"open_elsewhere_description":"{{brand}} byl otevřen v jiné záložce. Pokud to nezní správně, zkuste stránku znovu načíst.",
"unexpected_ec_error":"Došlo k neočekávané chybě (<0>Error Code:</0> <1>{{ errorCode }}</1>). Obraťte se prosím na správce serveru."
},
"group_call_loader":{
"banned_body":"Byl jste vykázán z místnosti.",
"banned_heading":"Zabanován",
"call_ended_body":"Byl jste vyřazen z hovoru.",
"call_ended_heading":"Hovor ukončen",
"knock_reject_body":"Vaše žádost o připojení byla zamítnuta.",
"knock_reject_heading":"Přístup odepřen",
"reason":"Důvod"
},
"hangup_button_label":"Ukončit hovor",
"header_label":"Domov Element Call",
"header_participants_label":"Účastníci",
"invite_modal":{
"link_copied_toast":"Odkaz zkopírován do schránky",
"title":"Pozvat na tento hovor"
},
"join_existing_call_modal":{
"join_button":"Ano, připojit se",
"text":"Tento hovor již existuje, chcete se připojit?",
"title":"Připojit se k existujícimu hovoru?"
},
"layout_grid_label":"Mřížka",
"layout_spotlight_label":"Soustředěný mód",
"lobby":{
"ask_to_join":"Žádost o připojení k hovoru",
"join_as_guest":"Připojte se jako host",
"join_button":"Připojit se k hovoru",
"leave_button":"Zpět na poslední",
"waiting_for_invite":"Žádost odeslána! Čekáme na povolení k připojení..."
},
"log_in":"Přihlášení",
"logging_in":"Přihlašování se…",
"login_auth_links":"<0>Vytvořit účet</0> Or <2>Jako host</2>",
"recaptcha_ssla_caption":"Tato stránka je chráněna ReCAPTCHA a platí zde <2>Ochrana osobních údajů</2> a <6>Podmínky služby</6> od Google.<9></9>Kliknutím na \"Registrovat\" souhlasíte s naší <12>Licenční smlouvou na software a služby (SSLA)</12>",
"register":{
"passwords_must_match":"Hesla se musí shodovat",
"registering":"Registrování…"
},
"register_auth_links":"<0>Už máte účet?</0><1><0>Přihlásit se</0> Or <2>Jako host</2></1>",
"feedback_tab_thank_you":"Děkujeme, obdrželi jsme vaši zpětnou vazbu!",
"feedback_tab_title":"Zpětná vazba",
"opt_in_description":"<0></0><1></1>Souhlas můžete odvolat zrušením zaškrtnutí tohoto políčka. Pokud jste právě v hovoru, toto nastavení se projeví po jeho skončení.",
"preferences_tab":{
"developer_mode_label":"Vývojářský režim",
"developer_mode_label_description":"Povolte vývojářský režim a zobrazte kartu nastavení vývojáře.",
"introduction":"Zde můžete nakonfigurovat další možnosti pro lepší zážitek.",
"reactions_play_sound_description":"Přehrát zvukový efekt, když někdo odešle reakci do hovoru.",
"analytics_notice":"Ved at deltage i denne beta giver du samtykke til indsamling af anonyme data, som vi bruger til at forbedre produktet. Du kan finde flere oplysninger om, hvilke data vi sporer, i vores <2>fortrolighedspolitik</2> og vores <6>cookiepolitik</6>.",
"app_selection_modal":{
"continue_in_browser":"Fortsæt i browseren",
"open_in_app":"Åbn i appen",
"text":"Klar til at deltage?",
"title":"Vælg app"
},
"call_ended_view":{
"create_account_button":"Opret konto",
"create_account_prompt":"<0>Hvorfor ikke afslutte med at oprette en adgangskode for at beholde din konto? </0><1>Du kan beholde dit navn og indstille en avatar til brug ved fremtidige opkald </1>",
"feedback_done":"<0>Tak for din feedback! </0>",
"feedback_prompt":"<0>Vi vil meget gerne høre din feedback, så vi kan forbedre din oplevelse.</0>",
"headline":"{{displayName}}, dit opkald er afsluttet.",
"not_now_button":"Ikke nu, vend tilbage til startskærmen",
"reconnect_button":"Tilslut igen",
"survey_prompt":"Hvordan gik det?"
},
"call_name":"Navn på opkald",
"common":{
"analytics":"Analyse-værktøj",
"audio":"Lyd",
"avatar":"Avatar",
"back":"Tilbage",
"display_name":"Vist navn",
"encrypted":"Krypteret",
"home":"Hjem",
"loading":"Indlæser...",
"next":"Næste",
"options":"Valgmuligheder",
"password":"Adgangskode",
"preferences":"Foretrukne",
"profile":"Profil",
"reaction":"Reaktion",
"reactions":"Reaktioner",
"settings":"Indstillinger",
"unencrypted":"Ikke krypteret",
"username":"Brugernavn",
"video":"Video"
},
"developer_mode":{
"crypto_version":"Krypto-version: {{version}}",
"debug_tile_layout_label":"Fejlfinding af fliselayout",
"device_id":"Enheds-id: {{id}}",
"duplicate_tiles_label":"Antal ekstra flisekopier pr. deltager",
"show_non_member_tiles":"Vis fliser for medier fra ikke-medlemmer",
"url_params":"URL-parametre",
"use_new_membership_manager":"Brug den nye implementering af opkaldet MembershipManager",
"use_to_device_key_transport":"Bruges til at transportere enhedsnøgler. Dette vil falde tilbage til transport af værelsesnøgler, når et andet opkaldsmedlem sender en rumnøgle"
},
"disconnected_banner":"Forbindelsen til serveren er gået tabt.",
"error":{
"call_is_not_supported":"Opkald er ikke understøttet",
"call_not_found":"Opkald ikke fundet",
"call_not_found_description":"<0>Det link ser ikke ud til at høre til et eksisterende opkald. Tjek at du har det rigtige link, eller<1> opret et nyt</1>.</0>",
"connection_lost":"Forbindelsen gik tabt",
"connection_lost_description":"Du blev afbrudt fra opkaldet.",
"e2ee_unsupported":"Inkompatibel browser",
"e2ee_unsupported_description":"Din webbrowser understøtter ikke krypterede opkald. Understøttede browsere inkluderer Chrome, Safari og Firefox 117+.",
"generic":"Noget gik galt",
"generic_description":"Indsendelse af fejlfindingslogfiler hjælper os med at spore problemet.",
"insufficient_capacity_description":"Serveren har nået sin maksimale kapacitet, og du kan ikke deltage i opkaldet på dette tidspunkt. Prøv igen senere, eller kontakt din serveradministrator, hvis problemet fortsætter.",
"matrix_rtc_focus_missing":"Serveren er ikke konfigureret til at arbejde med {{brand}}{{domain}}. Kontakt venligst din serveradministrator (domæne:{{domain}}, fejlkode: {{ errorCode }}).",
"open_elsewhere":"Åbnet i en anden fane",
"open_elsewhere_description":"{{brand}} er blevet åbnet i en anden fane. Hvis det ikke lyder rigtigt, kan du prøve at genindlæse siden.",
"unexpected_ec_error":"Der opstod en uventet fejl (<0>Fejlkode:</0> <1> {{ errorCode }}</1>). Kontakt venligst din serveradministrator."
},
"group_call_loader":{
"banned_body":"Du er blevet spærret fra rummet.",
"banned_heading":"Spærret",
"call_ended_body":"Du er blevet fjernet fra opkaldet.",
"call_ended_heading":"Opkaldet afsluttet",
"knock_reject_body":"Din anmodning om at deltage blev afvist.",
"knock_reject_heading":"Adgang nægtet",
"reason":"Årsag: {{reason}}"
},
"hangup_button_label":"Afslut opkald",
"header_label":"Element Ring hjem",
"header_participants_label":"Deltagere",
"invite_modal":{
"link_copied_toast":"Link kopieret til udklipsholder",
"title":"Inviter til dette opkald"
},
"join_existing_call_modal":{
"join_button":"Ja, deltag i opkald",
"text":"Dette opkald findes allerede, vil du være med?",
"title":"Deltag i eksisterende opkald?"
},
"layout_grid_label":"Gitter",
"layout_spotlight_label":"Spotlys",
"lobby":{
"ask_to_join":"Anmod om at deltage i opkaldet",
"join_as_guest":"Deltag som gæst",
"join_button":"Deltag i opkald",
"leave_button":"Tilbage til seneste",
"waiting_for_invite":"Anmodning sendt! Venter på tilladelse til at deltage..."
},
"log_in":"Log ind",
"logging_in":"Logger ind...",
"login_auth_links":"<0>Opret en konto </0> eller <2> få adgang som gæst </2>",
"rageshake_button_error_caption":"Prøv at sende logfiler igen",
"rageshake_request_modal":{
"body":"En anden bruger på dette opkald har et problem. For bedre at kunne diagnosticere sådanne problemer, vil vi gerne indsamle en fejlfindingslog.",
"rageshake_sending_logs":"Afsendelse af fejlfindingslogfiler...",
"rageshake_sent":"Tak!",
"recaptcha_dismissed":"Recaptcha afvist",
"recaptcha_not_loaded":"Recaptcha ikke indlæst",
"recaptcha_ssla_caption":"Dette websted er beskyttet af ReCAPTCHA og Googles <2>Privatlivspolitik</2> og <6>Servicevilkår</6> gælder.<9></9>Ved at klikke på \"Registrer\" accepterer du vores <12>Software og Services Licensaftale (SSLA)</12>",
"register":{
"passwords_must_match":"Adgangskoderne skal være identiske",
"registering":"Registrering..."
},
"register_auth_links":"<0>Har du allerede en konto? </0><1><0>Log ind </0> eller <2> få adgang som gæst </2> </1>",
"feedback_tab_thank_you":"Tak, vi har modtaget din feedback!",
"feedback_tab_title":"Feedback",
"opt_in_description":"<0></0><1></1>Du kan trække dit samtykke tilbage ved at fjerne markeringen i dette felt. Hvis du i øjeblikket er i gang med et opkald, træder denne indstilling i kraft ved afslutningen af opkaldet.",
"preferences_tab":{
"developer_mode_label":"Udviklertilstand",
"developer_mode_label_description":"Aktivér udviklertilstand og vis fanen udviklerindstillinger.",
"introduction":"Her kan du konfigurere ekstra muligheder for en forbedret oplevelse.",
"reactions_play_sound_description":"Afspil en lydeffekt, når nogen sender en reaktion i et opkald.",
"analytics_notice":"Mit der Teilnahme an der Beta akzeptierst du die Sammlung von anonymen Daten, die wir zur Verbesserung des Produkts verwenden. Weitere Informationen zu den von uns erhobenen Daten findest du in unserer <2>Datenschutzerklärung</2> und unseren <6>Cookie-Richtlinien</6>.",
"app_selection_modal":{
"continue_in_browser":"Weiter im Browser",
"open_in_app":"In der App öffnen",
"text":"Bereit, beizutreten?",
"title":"App auswählen"
},
"call_ended_view":{
"create_account_button":"Konto erstellen",
"create_account_prompt":"<0>Warum vergibst du nicht abschließend ein Passwort, um dein Konto zu erhalten?</0><1>Du kannst deinen Namen behalten und ein Profilbild für zukünftige Anrufe festlegen.</1>",
"feedback_done":"<0>Danke für deine Rückmeldung!</0>",
"feedback_prompt":"<0>Wir würden uns freuen, deine Rückmeldung zu hören, um deine Erfahrung verbessern zu können.</0>",
"headline":"{{displayName}}, dein Anruf wurde beendet.",
"not_now_button":"Nicht jetzt, zurück zur Startseite",
"reconnect_button":"Erneut verbinden",
"survey_prompt":"Wie ist es gelaufen?"
},
"call_name":"Name des Anrufs",
"common":{
"analytics":"Analyse",
"audio":"Audio",
"avatar":"Profilbild",
"back":"Zurück",
"display_name":"Anzeigename",
"encrypted":"Verschlüsselt",
"home":"Startseite",
"loading":"Lade…",
"next":"Weiter",
"options":"Optionen",
"password":"Passwort",
"preferences":"Einstellungen",
"profile":"Profil",
"reaction":"Reaktion",
"reactions":"Reaktionen",
"settings":"Einstellungen",
"unencrypted":"Nicht verschlüsselt",
"username":"Benutzername",
"video":"Video"
},
"developer_mode":{
"always_show_iphone_earpiece":"iPhone-Ohrhörer-Option auf allen Plattformen anzeigen",
"use_to_device_key_transport":"To-Device media E2EE Schlüssel-Transport verwenden. Falls ein anderer Teilnehmer bereits den Raumschlüssel-Transport verwendet, wird automatisch auf Raumschlüssel-Transport zurückgegriffen."
},
"disconnected_banner":"Die Verbindung zum Server wurde getrennt.",
"error":{
"call_is_not_supported":"Anrufe werden nicht unterstützt",
"call_not_found":"Anruf nicht gefunden",
"call_not_found_description":"<0>Dieser Link scheint zu keinem bestehenden Anruf zu gehören. Vergewissern Sie sich, dass Sie den richtigen Link haben, oder <1> erstellen Sie einen neuen</1>. </0>",
"connection_lost":"Verbindung verloren",
"connection_lost_description":"Ihre Verbindung zum Anruf wurde unterbrochen.",
"e2ee_unsupported":"Inkompatibler Browser",
"e2ee_unsupported_description":"Ihr Webbrowser unterstützt keine verschlüsselten Anrufe. Zu den unterstützten Browsern gehören Chrome, Safari und Firefox 117+.",
"generic":"Etwas ist schief gelaufen",
"generic_description":"Durch das Senden von Debugprotokollen können wir das Problem leichter eingrenzen.",
"insufficient_capacity_description":"Der Server hat seine maximale Kapazität erreicht, daher ist ein Beitritt zum Anruf derzeit nicht möglich. Bitte später erneut versuchen oder den Serveradministrator kontaktieren, falls das Problem weiterhin besteht.",
"matrix_rtc_focus_missing":"Der Server ist nicht für die Verwendung mit {{brand}} konfiguriert. Bitte den Serveradministrator kontaktieren (Domain: {{domain}}, Fehlercode: {{ errorCode }}).",
"open_elsewhere":"In einem anderen Tab geöffnet",
"open_elsewhere_description":"{{brand}} wurde in einem anderen Tab geöffnet. Wenn das nicht richtig klingt, versuchen Sie, die Seite neu zu laden.",
"unexpected_ec_error":"Ein unerwarteter Fehler ist aufgetreten (<0>Fehlercode: </0> <1>{{ errorCode }}</1>). Bitte den Serveradministrator kontaktieren."
},
"group_call_loader":{
"banned_body":"Du wurdest aus dem Raum verbannt.",
"banned_heading":"Verbannt",
"call_ended_body":"Du wurdest aus dem Anruf entfernt.",
"call_ended_heading":"Anruf beendet",
"knock_reject_body":"Die Teilnahmeanfrage wurde abgelehnt.",
"knock_reject_heading":"Zugriff verweigert",
"reason":"Grund: {{reason}}"
},
"hangup_button_label":"Anruf beenden",
"header_label":"Element Call-Startseite",
"header_participants_label":"Teilnehmende",
"invite_modal":{
"link_copied_toast":"Link in Zwischenablage kopiert",
"title":"Zu diesem Anruf einladen"
},
"join_existing_call_modal":{
"join_button":"Ja, Anruf beitreten",
"text":"Dieser Aufruf existiert bereits, möchtest Du teilnehmen?",
"title":"An bestehendem Anruf teilnehmen?"
},
"layout_grid_label":"Raster",
"layout_spotlight_label":"Fokus",
"lobby":{
"ask_to_join":"Teilnahmeanfrage senden",
"join_as_guest":"Als Gast beitreten",
"join_button":"Anruf beitreten",
"leave_button":"Zurück zu kürzlichen Anrufen",
"waiting_for_invite":"Anfrage gesendet! Warten auf Teilnahmefreigabe …"
},
"log_in":"Anmelden",
"logging_in":"Anmelden…",
"login_auth_links":"<0>Konto erstellen</0> Oder <2>Als Gast betreten</2>",
"login_auth_links_prompt":"Noch nicht registriert?",
"login_subheading":"Weiter zu Element",
"login_title":"Anmelden",
"microphone_off":"Mikrofon aus",
"microphone_on":"Mikrofon an",
"mute_microphone_button_label":"Mikrofon stumm schalten",
"participant_count_one":"{{count, number}}",
"participant_count_other":"{{count, number}}",
"qr_code":"QR-Code",
"rageshake_button_error_caption":"Protokolle erneut senden",
"rageshake_request_modal":{
"body":"Ein anderer Benutzer dieses Anrufs hat ein Problem. Um es besser diagnostizieren zu können, würden wir gerne ein Debug-Protokoll erstellen.",
"recaptcha_ssla_caption":"Diese Website wird durch ReCAPTCHA geschützt, und es gelten die Google <2>Datenschutzbestimmungen</2> sowie die <6>Nutzungsbedingungen</6>.<9></9> Durch das Klicken auf \"Registrieren\" wird der <12>Software- und Dienstleistungslizenzvereinbarung (SSLA)</12> zugestimmt.",
"room_auth_view_ssla_caption":"Durch das Klicken auf \"Anruf jetzt beitreten\" wird dem <2>Software and Services License Agreement (SSLA)</2> zugestimmt.",
"screenshare_button_label":"Bildschirm teilen",
"settings":{
"audio_tab":{
"effect_volume_description":"Lautstärke anpassen, mit der Reaktionen und Handmeldungen abgespielt werden.",
"effect_volume_label":"Lautstärke der Soundeffekte"
},
"background_blur_header":"Hintergrund",
"background_blur_label":"Unschärfeeffekt für den Hintergrund aktivieren",
"blur_not_supported_by_browser":"(Hintergrundunschärfe wird von diesem Gerät nicht unterstützt.)",
"developer_tab_title":"Entwickler",
"devices":{
"camera":"Kamera",
"camera_numbered":"Kamera {{n}}",
"default":"Standard",
"default_named":"Standard<2> ({{name}} )</2>",
"earpiece":"Ohrhörer",
"microphone":"Mikrofon",
"microphone_numbered":"Mikrofon{{n}}",
"speaker":"Lautsprecher",
"speaker_numbered":"Lautsprecher{{n}}"
},
"feedback_tab_body":"Falls du auf Probleme stößt oder einfach nur eine Rückmeldung geben möchtest, sende uns bitte eine kurze Beschreibung.",
"feedback_tab_thank_you":"Danke, wir haben deine Rückmeldung erhalten!",
"feedback_tab_title":"Rückmeldung",
"opt_in_description":"<0></0><1></1>Du kannst deine Zustimmung durch Abwählen dieses Kästchens zurückziehen. Falls du dich aktuell in einem Anruf befindest, wird diese Einstellung nach dem Ende des Anrufs wirksam.",
"preferences_tab":{
"developer_mode_label":"Entwickler-Modus",
"developer_mode_label_description":"Aktivieren Sie den Entwicklermodus und zeigen Sie die Registerkarte mit den Entwicklereinstellungen an.",
"introduction":"Hier können zusätzliche Optionen für individuelle Anforderungen eingestellt werden.",
"reactions_play_sound_description":"Spielen Sie einen Soundeffekt ab, wenn jemand eine Reaktion auf einen Anruf sendet.",
"analytics_notice":"Συμμετέχοντας σε αυτή τη δοκιμαστική έκδοση, συναινείτε στη συλλογή ανώνυμων δεδομένων, τα οποία χρησιμοποιούμε για τη βελτίωση του προϊόντος. Μπορείτε να βρείτε περισσότερες πληροφορίες σχετικά με το ποια δεδομένα καταγράφουμε στην <2>Πολιτική απορρήτου</2> και στην <6>Πολιτική cookies</6>.",
"app_selection_modal":{
"continue_in_browser":"Συνέχεια στο πρόγραμμα περιήγησης",
"open_in_app":"Ανοίξτε στην εφαρμογή",
"text":"Έτοιμοι να συμμετάσχετε?",
"title":"Επιλέξτε εφαρμογή"
},
"call_ended_view":{
"create_account_button":"Δημιουργία λογαριασμού",
"create_account_prompt":"<0>Γιατί να μην ολοκληρώσετε με τη δημιουργία ενός κωδικού πρόσβασης για τη διατήρηση του λογαριασμού σας;</0><1>Θα μπορείτε να διατηρήσετε το όνομά σας και να ορίσετε ένα avatar για χρήση σε μελλοντικές κλήσεις.</1>",
"feedback_done":"<0>Ευχαριστώ για τα σχόλιά σας!</0>",
"feedback_prompt":"<0>Θα θέλαμε να ακούσουμε τα σχόλιά σας ώστε να βελτιώσουμε την εμπειρία σας.</0>",
"headline":"{{displayName}}, η κλήση σας τερματίστηκε.",
"not_now_button":"Όχι τώρα, επιστροφή στην αρχική οθόνη",
"show_non_member_tiles":"Εμφάνιση πλακιδίων για μέσα μη-μελών",
"url_params":"Παράμετροι URL"
},
"header_label":"Element Κεντρική Οθόνη Κλήσεων",
"join_existing_call_modal":{
"join_button":"Ναι, συμμετοχή στην κλήση",
"text":"Αυτή η κλήση υπάρχει ήδη, θα θέλατε να συμμετάσχετε;",
"title":"Συμμετοχή στην υπάρχουσα κλήση;"
},
"lobby":{
"join_button":"Συμμετοχή στην κλήση"
},
"logging_in":"Σύνδεση…",
"login_auth_links":"<0>Δημιουργήστε λογαριασμό</0> Ή <2>Συμμετέχετε ως επισκέπτης</2>",
"login_title":"Σύνδεση",
"rageshake_request_modal":{
"body":"Ένας άλλος χρήστης σε αυτή την κλήση έχει ένα πρόβλημα. Για την καλύτερη διάγνωση αυτών των προβλημάτων θα θέλαμε να συλλέξουμε ένα αρχείο καταγραφής σφαλμάτων.",
"return_home_button":"Επιστροφή στην αρχική οθόνη",
"screenshare_button_label":"Κοινή χρήση οθόνης",
"settings":{
"developer_tab_title":"Προγραμματιστής",
"feedback_tab_body":"Εάν αντιμετωπίζετε προβλήματα ή απλά θέλετε να μας δώσετε κάποια σχόλια, παρακαλούμε στείλτε μας μια σύντομη περιγραφή παρακάτω.",
"feedback_tab_thank_you":"Ευχαριστούμε, λάβαμε τα σχόλιά σας!",
"feedback_tab_title":"Ανατροφοδότηση",
"opt_in_description":"<0></0><1></1>Μπορείτε να ανακαλέσετε τη συγκατάθεσή σας αποεπιλέγοντας αυτό το πλαίσιο. Εάν βρίσκεστε σε κλήση, η ρύθμιση αυτή θα τεθεί σε ισχύ στο τέλος της."
"unauthenticated_view_login_button":"Συνδεθείτε στον λογαριασμό σας",
"version":"Έκδοση: {{version}}"
}
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.