xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve the visual experience of joining a call

Browse source 
Because useMeasure always returns a width and height of zero on the first render, various call UI elements would flash in and out of existence or animate in from the wrong place when joining a call. This poses an accessibility issue, and is generally unpleasant.
This commit is contained in:
Robin Townsend 2022-11-02 22:37:36 -04:00
commit 2d5f413a1f
2 changed files with 91 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/room/InCallView.tsx
View file

@ -126,6 +126,7 @@ export function InCallView({
const containerRef1 = useRef<HTMLDivElement | null>(null);
const [containerRef2, bounds] = useMeasure({ polyfill: ResizeObserver });
const boundsValid = bounds.height > 0;
// Merge the refs so they can attach to the same element
const containerRef = useCallback(
(el: HTMLDivElement) => {
@ -238,15 +239,15 @@ export function InCallView({
const maximisedParticipant = useMemo(
() =>
fullscreenParticipant ??
(bounds.height <= 400 && bounds.width <= 400
(boundsValid && bounds.height <= 400 && bounds.width <= 400
? items.find((item) => item.focused) ??
items.find((item) => item.callFeed) ??
null
: null),
[fullscreenParticipant, bounds, items]
[fullscreenParticipant, boundsValid, bounds, items]
);
const reducedControls = bounds.width <= 400;
const reducedControls = boundsValid && bounds.width <= 400;
const renderAvatar = useCallback(
(roomMember: RoomMember, width: number, height: number) => {