Timo and I agreed previously that we should ditch the class pattern for view models and instead have them be interfaces which are simply created by functions. They're more straightforward to write, mock, and instantiate this way.
The code for media view models and media items is pretty much the last remaining instance of the class pattern. Since I was about to introduce a new media view model for ringing, I wanted to get this refactor out of the way first rather than add to the technical debt.
This refactor also makes things a little easier for https://github.com/element-hq/element-call/pull/3747 by extracting volume controls into their own module.
once)
The local jwt token needs to be aquired via the right endpoint. The
endpoint defines how our rtcBackendIdentity is computed. Based on us
using sticky events or state events we also need to use the right
endpoint. This cannot be done generically in the connection manager. The
jwt token now is computed in the localTransport and the resolved sfu
config is passed to the connection manager.
Add JWT endpoint version and SFU config support Pin matrix-js-sdk to a
specific commit and update dev auth image tag. Propagate SFU config and
JWT endpoint choice through local transport, ConnectionManager and
Connection; add JwtEndpointVersion enum and LocalTransportWithSFUConfig
type. Add NO_MATRIX_2 auth error and locale string, thread
rtcBackendIdentity through UI props, and include related test, CSS and
minor imports updates
On second glance, the way that we determined a media tile to be 'waiting for media' was too implicit for my taste. It would appear on a surface reading to depend on whether a participant was currently publishing any video. But in reality, the 'video' object was always defined as long as a LiveKit participant existed, so in reality it depended on just the participant. We should show this relationship more explicitly by moving the computation into the view model, where it can depend on the participant directly.
* Fix the interactivity of buttons while reconnecting or in earpiece mode
When we're in one of these modes, we need to ensure that everything above the overlay (the header and footer buttons) is interactive, while everything obscured by the overlay (the media tiles) is non-interactive and removed from the accessibility tree. It's not a very easy task to trap focus *outside* an element, so the best solution I could come up with is to set tabindex="-1" manually on all interactive elements belonging to the media tiles.
* Write a Playwright test for reconnecting
* fix lints
Signed-off-by: Timo K <toger5@hotmail.de>
* fix test
Signed-off-by: Timo K <toger5@hotmail.de>
* enable http2 for matrx-rtc host to allow the jwt service to talk to the SFU
* remove rate limit for delayed events
* more time to connect to livekit SFU
* Due to a Firefox issue we set the start anchor for the tab test to the Mute microphone button
* adapt to most recent Element Web version
* Use the "End call" button as proofe for a started call
* Currrenty disabled due to recent Element Web
- not indicating the number of participants
- bypassing Lobby
* linting
* disable 'can only interact with header and footer while reconnecting' for firefox
---------
Signed-off-by: Timo K <toger5@hotmail.de>
Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>
Co-authored-by: Timo K <toger5@hotmail.de>
Co-authored-by: fkwp <github-fkwp@w4ve.de>
* 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>
* 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
* 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 765f7b4f319b86839fcb4fde28d1e0604e542577.
* 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>
* 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
* 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
* 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>
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.
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.
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
