Add useSizeObserver and replace most react-measure

This commit is contained in:
Jamie Kyle 2023-07-25 16:56:56 -07:00 committed by GitHub
parent 7267391de4
commit 6c70cd450b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 539 additions and 421 deletions

View file

@ -2,7 +2,6 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useCallback, useState, useMemo, useEffect } from 'react';
import Measure from 'react-measure';
import { takeWhile, clamp, chunk, maxBy, flatten, noop } from 'lodash';
import type { VideoFrameSource } from '@signalapp/ringrtc';
import { GroupCallRemoteParticipant } from './GroupCallRemoteParticipant';
@ -25,6 +24,7 @@ import { filter, join } from '../util/iterables';
import * as setUtil from '../util/setUtil';
import * as log from '../logging/log';
import { MAX_FRAME_HEIGHT, MAX_FRAME_WIDTH } from '../calling/constants';
import { SizeObserver } from '../hooks/useSizeObserver';
const MIN_RENDERED_HEIGHT = 180;
const PARTICIPANT_MARGIN = 10;
@ -398,40 +398,27 @@ export function GroupCallRemoteParticipants({
]);
return (
<Measure
bounds
onResize={({ bounds }) => {
if (!bounds) {
log.error('We should be measuring the bounds');
return;
}
setContainerDimensions(bounds);
<SizeObserver
onSizeChange={size => {
setContainerDimensions(size);
}}
>
{containerMeasure => (
<div
className="module-ongoing-call__participants"
ref={containerMeasure.measureRef}
>
<Measure
bounds
onResize={({ bounds }) => {
if (!bounds) {
log.error('We should be measuring the bounds');
return;
}
setGridDimensions(bounds);
{containerRef => (
<div className="module-ongoing-call__participants" ref={containerRef}>
<SizeObserver
onSizeChange={size => {
setGridDimensions(size);
}}
>
{gridMeasure => (
{gridRef => (
<div
className="module-ongoing-call__participants__grid"
ref={gridMeasure.measureRef}
ref={gridRef}
>
{flatten(rowElements)}
</div>
)}
</Measure>
</SizeObserver>
<GroupCallOverflowArea
getFrameBuffer={getFrameBuffer}
@ -444,7 +431,7 @@ export function GroupCallRemoteParticipants({
/>
</div>
)}
</Measure>
</SizeObserver>
);
}