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
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.
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>
