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