* 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 a fullscreen button that uses the element request Fullscreen browser api
Signed-off-by: Timo K <toger5@hotmail.de>
* use body instead of root node
Signed-off-by: Timo K <toger5@hotmail.de>
---------
Signed-off-by: Timo K <toger5@hotmail.de>
This hook is simpler in its implementation (therefore hopefully more correct & performant) and enforces a type-level distinction between raw Observables and Behaviors.
* Add a global control for toggling earpiece mode
This will be used by Element X to show an earpiece toggle button in the header.
* Add an earpiece overlay
* Fix header
The header needs to be passed forward as a string to some components and as a bool (hideHeader) to others.
Also use a enum instead of string options.
* fix top clipping with header
* hide app bar in pip
* revert android overlay app_bar
* Modernize AppBarContext
* Style header icon color as desired and switch earpice/speaker icon
* fix initial selection when using controlled media
* Add "Back to video" button
* fix tests
* remove dead code
* add snapshot test
* fix back to video button
* Request capability to learn the room name
We now need the room name in order to implement the mobile (widget-based) designs with the app bar.
* Test the CallViewModel output switcher directly
---------
Co-authored-by: Timo <toger5@hotmail.de>
* 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
* 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 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>
* 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
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.
* 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>
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.
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.
