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.
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>
* 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.
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>
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.
* Add customHomeserver url to urlParams.
Signed-off-by: Timo K <toger5@hotmail.de>
* rename to homeserver
Signed-off-by: Timo K <toger5@hotmail.de>
---------
Signed-off-by: Timo K <toger5@hotmail.de>
* 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>
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.
