diff --git a/ts/components/GroupCallRemoteParticipants.tsx b/ts/components/GroupCallRemoteParticipants.tsx
index 8902c968c5..70a00d04b4 100644
--- a/ts/components/GroupCallRemoteParticipants.tsx
+++ b/ts/components/GroupCallRemoteParticipants.tsx
@@ -2,7 +2,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useCallback, useState, useMemo, useEffect } from 'react';
-import { takeWhile, clamp, chunk, maxBy, flatten, noop } from 'lodash';
+import { clamp, chunk, maxBy, flatten, noop } from 'lodash';
import type { VideoFrameSource } from '@signalapp/ringrtc';
import { GroupCallRemoteParticipant } from './GroupCallRemoteParticipant';
import {
@@ -13,6 +13,7 @@ import type {
GroupCallRemoteParticipantType,
GroupCallVideoRequest,
} from '../types/Calling';
+import { CallViewMode } from '../types/Calling';
import { useGetCallingFrameBuffer } from '../calling/useGetCallingFrameBuffer';
import type { LocalizerType } from '../types/Util';
import { usePageVisibility } from '../hooks/usePageVisibility';
@@ -25,11 +26,14 @@ 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';
+import { strictAssert } from '../util/assert';
-const MIN_RENDERED_HEIGHT = 180;
-const PARTICIPANT_MARGIN = 10;
+const SMALL_TILES_MIN_HEIGHT = 80;
+const LARGE_TILES_MIN_HEIGHT = 200;
+const PARTICIPANT_MARGIN = 12;
const TIME_TO_STOP_REQUESTING_VIDEO_WHEN_PAGE_INVISIBLE = 20 * SECOND;
-
+const PAGINATION_BUTTON_ASPECT_RATIO = 1;
+const MAX_PARTICIPANTS_PER_PAGE = 49; // 49 remote + 1 self-video = 50 total
// We scale our video requests down for performance. This number is somewhat arbitrary.
const VIDEO_REQUEST_SCALAR = 0.75;
@@ -39,15 +43,24 @@ type Dimensions = {
};
type GridArrangement = {
- rows: Array
>;
+ rows: Array>;
scalar: number;
};
+type PaginationButtonType = {
+ isPaginationButton: true;
+ videoAspectRatio: number;
+ paginationButtonType: 'prev' | 'next';
+ numParticipants: number;
+};
+type ParticipantTileType =
+ | GroupCallRemoteParticipantType
+ | PaginationButtonType;
type PropsType = {
+ callViewMode: CallViewMode;
getGroupCallVideoFrameSource: (demuxId: number) => VideoFrameSource;
i18n: LocalizerType;
isCallReconnecting: boolean;
- isInSpeakerView: boolean;
remoteParticipants: ReadonlyArray;
setGroupCallVideoRequest: (
_: Array,
@@ -72,37 +85,43 @@ enum VideoRequestMode {
// * Participants are arranged in 0 or more rows.
// * Each row is the same height, but each participant may have a different width.
// * It's possible, on small screens with lots of participants, to have participants
-// removed from the grid. This is because participants have a minimum rendered height.
+// removed from the grid, or on subsequent pages. This is because participants
+// have a minimum rendered height.
+// * Participant videos may have different aspect ratios
+// * We want to ensure that presenters and recent speakers are shown on the first page,
+// but we also want to minimize tiles jumping around as much as possible.
//
// There should be more specific comments throughout, but the high-level steps are:
//
-// 1. Figure out the maximum number of possible rows that could fit on the screen; this is
-// `maxRowCount`.
-// 2. Split the participants into two groups: ones in the main grid and ones in the
-// overflow area. The grid should prioritize participants who have recently spoken.
-// 3. For each possible number of rows (starting at 0 and ending at `maxRowCount`),
-// distribute participants across the rows at the minimum height. Then find the
-// "scalar": how much can we scale these boxes up while still fitting them on the
-// screen? The biggest scalar wins as the "best arrangement".
-// 4. Lay out this arrangement on the screen.
+// 1. Figure out the maximum number of possible rows that could fit on a page; this is
+// `maxRowsPerPage`.
+// 2. Sort the participants in priority order: we want to fit presenters and recent
+// speakers in the grid first
+// 3. Figure out which participants should go on each page -- for non-paginated views,
+// this is just one page, but for paginated views, we could have many pages. The
+// general idea here is to fill up each page row-by-row, with each video as small
+// as we allow.
+// 4. Try to distribute the videos throughout the grid to find the largest "scalar":
+// how much can we scale these boxes up while still fitting them on the screen?
+// The biggest scalar wins as the "best arrangement".
+// 5. Lay out this arrangement on the screen.
+
export function GroupCallRemoteParticipants({
+ callViewMode,
getGroupCallVideoFrameSource,
i18n,
isCallReconnecting,
- isInSpeakerView,
remoteParticipants,
setGroupCallVideoRequest,
remoteAudioLevels,
}: PropsType): JSX.Element {
- const [containerDimensions, setContainerDimensions] = useState({
- width: 0,
- height: 0,
- });
const [gridDimensions, setGridDimensions] = useState({
width: 0,
height: 0,
});
+ const [pageIndex, setPageIndex] = useState(0);
+
const devicePixelRatio = useDevicePixelRatio();
const getFrameBuffer = useGetCallingFrameBuffer();
@@ -110,191 +129,224 @@ export function GroupCallRemoteParticipants({
const { invisibleDemuxIds, onParticipantVisibilityChanged } =
useInvisibleParticipants(remoteParticipants);
- // 1. Figure out the maximum number of possible rows that could fit on the screen.
- //
- // We choose the smaller of these two options:
- //
- // - The number of participants, which means there'd be one participant per row.
- // - The number of possible rows in the container, assuming all participants were
- // rendered at minimum height. Doesn't rely on the number of participants—it's some
- // simple division.
- //
- // Could be 0 if (a) there are no participants (b) the container's height is small.
- const maxRowCount = Math.min(
- remoteParticipants.length,
- Math.floor(
- containerDimensions.height / (MIN_RENDERED_HEIGHT + PARTICIPANT_MARGIN)
- )
+ const minRenderedHeight =
+ callViewMode === CallViewMode.Paginated
+ ? SMALL_TILES_MIN_HEIGHT
+ : LARGE_TILES_MIN_HEIGHT;
+
+ const isInSpeakerView =
+ callViewMode === CallViewMode.Speaker ||
+ callViewMode === CallViewMode.Presentation;
+
+ const isInPaginationView = callViewMode === CallViewMode.Paginated;
+ const shouldShowOverflow = !isInPaginationView;
+
+ const maxRowWidth = gridDimensions.width;
+ const maxGridHeight = gridDimensions.height;
+
+ // 1. Figure out the maximum number of possible rows that could fit on the page.
+ // Could be 0 if (a) there are no participants (b) the container's height is small.
+ const maxRowsPerPage = Math.floor(
+ maxGridHeight / (minRenderedHeight + PARTICIPANT_MARGIN)
);
- // 2. Split participants into two groups: ones in the main grid and ones in the overflow
- // sidebar.
- //
- // We start by sorting by `presenting` first since presenters should be on the main grid
- // then we sort by `speakerTime` so that the most recent speakers are next in
- // line for the main grid. Then we split the list in two: one for the grid and one for
- // the overflow area.
- //
- // Once we've sorted participants into their respective groups, we sort them on
- // something stable (the `demuxId`, but we could choose something else) so that people
- // don't jump around within the group.
- //
- // These are primarily memoized for clarity, not performance.
- const sortedParticipants: Array = useMemo(
- () =>
- remoteParticipants
- .concat()
- .sort(
- (a, b) =>
- Number(b.presenting || 0) - Number(a.presenting || 0) ||
- (b.speakerTime || -Infinity) - (a.speakerTime || -Infinity)
- ),
- [remoteParticipants]
- );
- const gridParticipants: Array =
- useMemo(() => {
- if (!sortedParticipants.length) {
- return [];
- }
+ // 2. Sort the participants in priority order: by `presenting` first, since presenters
+ // should be on the main grid, then by `speakerTime` so that the most recent speakers
+ // are next in line for the first pages of the grid
+ const prioritySortedParticipants: Array =
+ useMemo(
+ () =>
+ remoteParticipants
+ .concat()
+ .sort(
+ (a, b) =>
+ Number(b.presenting || 0) - Number(a.presenting || 0) ||
+ (b.speakerTime || -Infinity) - (a.speakerTime || -Infinity)
+ ),
+ [remoteParticipants]
+ );
- const candidateParticipants = isInSpeakerView
- ? [sortedParticipants[0]]
- : sortedParticipants;
-
- // Imagine that we laid out all of the rows end-to-end. That's the maximum total
- // width. So if there were 5 rows and the container was 100px wide, then we can't
- // possibly fit more than 500px of participants.
- const maxTotalWidth = maxRowCount * containerDimensions.width;
-
- // We do the same thing for participants, "laying them out end-to-end" until they
- // exceed the maximum total width.
- let totalWidth = 0;
- return takeWhile(candidateParticipants, remoteParticipant => {
- totalWidth += remoteParticipant.videoAspectRatio * MIN_RENDERED_HEIGHT;
- return totalWidth < maxTotalWidth;
- }).sort(stableParticipantComparator);
- }, [
- containerDimensions.width,
- isInSpeakerView,
- maxRowCount,
- sortedParticipants,
- ]);
- const overflowedParticipants: Array = useMemo(
- () =>
- sortedParticipants
- .slice(gridParticipants.length)
- .sort(stableParticipantComparator),
- [sortedParticipants, gridParticipants.length]
- );
-
- // 3. For each possible number of rows (starting at 0 and ending at `maxRowCount`),
- // distribute participants across the rows at the minimum height. Then find the
- // "scalar": how much can we scale these boxes up while still fitting them on the
- // screen? The biggest scalar wins as the "best arrangement".
- const gridArrangement: GridArrangement = useMemo(() => {
- let bestArrangement: GridArrangement = {
- scalar: -1,
- rows: [],
- };
-
- if (!gridParticipants.length) {
- return bestArrangement;
+ // 3. Layout the participants on each page. The general algorithm is: first, try to fill
+ // up each page with as many participants as possible at the smallest acceptable video
+ // height. Second, sort the participants that fit on each page by a stable sort order,
+ // and make sure they still fit on the page! Third, add tiles at the beginning and end
+ // of each page (if paginated) to act as back and next buttons.
+ const gridParticipantsByPage: Array = useMemo(() => {
+ if (!prioritySortedParticipants.length) {
+ return [];
}
- for (let rowCount = 1; rowCount <= maxRowCount; rowCount += 1) {
- // We do something pretty naïve here and chunk the grid's participants into rows.
- // For example, if there were 12 grid participants and `rowCount === 3`, there
- // would be 4 participants per row.
- //
- // This naïve chunking is suboptimal in terms of absolute best fit, but it is much
- // faster and simpler than trying to do this perfectly. In practice, this works
- // fine in the UI from our testing.
- const numberOfParticipantsInRow = Math.ceil(
- gridParticipants.length / rowCount
- );
- const rows = chunk(gridParticipants, numberOfParticipantsInRow);
-
- // We need to find the scalar for this arrangement. Imagine that we have these
- // participants at the minimum heights, and we want to scale everything up until
- // it's about to overflow.
- //
- // We don't want it to overflow horizontally or vertically, so we calculate a
- // "width scalar" and "height scalar" and choose the smaller of the two. (Choosing
- // the LARGER of the two could cause overflow.)
- const widestRow = maxBy(rows, totalRemoteParticipantWidthAtMinHeight);
- if (!widestRow) {
- log.error('Unable to find the widest row, which should be impossible');
- continue;
- }
- const widthScalar =
- (gridDimensions.width - (widestRow.length + 1) * PARTICIPANT_MARGIN) /
- totalRemoteParticipantWidthAtMinHeight(widestRow);
- const heightScalar =
- (gridDimensions.height - (rowCount + 1) * PARTICIPANT_MARGIN) /
- (rowCount * MIN_RENDERED_HEIGHT);
- const scalar = Math.min(widthScalar, heightScalar);
-
- // If this scalar is the best one so far, we use that.
- if (scalar > bestArrangement.scalar) {
- bestArrangement = { scalar, rows };
- }
+ if (!maxRowsPerPage) {
+ return [];
}
- return bestArrangement;
+ if (isInSpeakerView) {
+ return [
+ {
+ rows: [[prioritySortedParticipants[0]]],
+ hasSpaceRemaining: false,
+ numParticipants: 1,
+ },
+ ];
+ }
+
+ return getGridParticipantsByPage({
+ participants: prioritySortedParticipants,
+ maxRowWidth,
+ maxPages: isInPaginationView ? Infinity : 1,
+ maxRowsPerPage,
+ minRenderedHeight,
+ maxParticipantsPerPage: MAX_PARTICIPANTS_PER_PAGE,
+ currentPage: pageIndex,
+ });
}, [
- gridParticipants,
- maxRowCount,
- gridDimensions.width,
- gridDimensions.height,
+ maxRowWidth,
+ isInPaginationView,
+ isInSpeakerView,
+ maxRowsPerPage,
+ minRenderedHeight,
+ pageIndex,
+ prioritySortedParticipants,
]);
- // 4. Lay out this arrangement on the screen.
- const gridParticipantHeight = Math.floor(
- gridArrangement.scalar * MIN_RENDERED_HEIGHT
+ // Make sure we're not on a page that no longer exists (e.g. if people left the call)
+ if (
+ pageIndex >= gridParticipantsByPage.length &&
+ gridParticipantsByPage.length > 0
+ ) {
+ setPageIndex(gridParticipantsByPage.length - 1);
+ }
+
+ const totalParticipantsInGrid = gridParticipantsByPage.reduce(
+ (pageCount, { numParticipants }) => pageCount + numParticipants,
+ 0
+ );
+
+ // In speaker or overflow views, not all participants will be on the grid; they'll
+ // get put in the overflow zone.
+ const overflowedParticipants: Array = useMemo(
+ () =>
+ isInPaginationView
+ ? []
+ : prioritySortedParticipants
+ .slice(totalParticipantsInGrid)
+ .sort(stableParticipantComparator),
+ [isInPaginationView, prioritySortedParticipants, totalParticipantsInGrid]
+ );
+
+ const participantsOnOtherPages = useMemo(
+ () =>
+ gridParticipantsByPage
+ .map((page, index) => {
+ if (index === pageIndex) {
+ return [];
+ }
+ return page.rows.flat();
+ })
+ .flat()
+ .filter(isGroupCallRemoteParticipant),
+ [gridParticipantsByPage, pageIndex]
+ );
+
+ const currentPage = gridParticipantsByPage.at(pageIndex) ?? {
+ rows: [],
+ };
+
+ // 4. Try to arrange the current page such that we can scale the videos up
+ // as much as possible.
+ const gridArrangement = arrangeParticipantsInGrid({
+ participantsInRows: currentPage.rows,
+ maxRowsPerPage,
+ maxRowWidth,
+ maxGridHeight,
+ minRenderedHeight,
+ });
+
+ const nextPage = () => {
+ setPageIndex(index => index + 1);
+ };
+
+ const prevPage = () => {
+ setPageIndex(index => Math.max(0, index - 1));
+ };
+
+ // 5. Lay out the current page on the screen.
+ const gridParticipantHeight = Math.round(
+ gridArrangement.scalar * minRenderedHeight
);
const gridParticipantHeightWithMargin =
gridParticipantHeight + PARTICIPANT_MARGIN;
const gridTotalRowHeightWithMargin =
- gridParticipantHeightWithMargin * gridArrangement.rows.length;
- const gridTopOffset = Math.floor(
- (gridDimensions.height - gridTotalRowHeightWithMargin) / 2
+ gridParticipantHeightWithMargin * gridArrangement.rows.length -
+ PARTICIPANT_MARGIN;
+ const gridTopOffset = Math.max(
+ 0,
+ Math.round((gridDimensions.height - gridTotalRowHeightWithMargin) / 2)
);
const rowElements: Array> = gridArrangement.rows.map(
- (remoteParticipantsInRow, index) => {
+ (tiles, index) => {
const top = gridTopOffset + index * gridParticipantHeightWithMargin;
const totalRowWidthWithoutMargins =
- totalRemoteParticipantWidthAtMinHeight(remoteParticipantsInRow) *
+ totalRowWidthAtHeight(tiles, minRenderedHeight) *
gridArrangement.scalar;
const totalRowWidth =
- totalRowWidthWithoutMargins +
- PARTICIPANT_MARGIN * (remoteParticipantsInRow.length - 1);
- const leftOffset = Math.floor((gridDimensions.width - totalRowWidth) / 2);
+ totalRowWidthWithoutMargins + PARTICIPANT_MARGIN * (tiles.length - 1);
+ const leftOffset = Math.max(
+ 0,
+ Math.round((gridDimensions.width - totalRowWidth) / 2)
+ );
let rowWidthSoFar = 0;
- return remoteParticipantsInRow.map(remoteParticipant => {
- const { demuxId, videoAspectRatio } = remoteParticipant;
-
- const audioLevel = remoteAudioLevels.get(demuxId) ?? 0;
-
- const renderedWidth = Math.floor(
- videoAspectRatio * gridParticipantHeight
- );
+ return tiles.map(tile => {
const left = rowWidthSoFar + leftOffset;
+ const renderedWidth = Math.round(
+ tile.videoAspectRatio * gridParticipantHeight
+ );
+
rowWidthSoFar += renderedWidth + PARTICIPANT_MARGIN;
+ if (isPaginationButton(tile)) {
+ const isNextButton = tile.paginationButtonType === 'next';
+ const isPrevButton = tile.paginationButtonType === 'prev';
+ return (
+
+ );
+ }
+
return (
{
- let scalar: number;
- if (participant.sharingScreen) {
- // We want best-resolution video if someone is sharing their screen.
- scalar = Math.max(devicePixelRatio, 1);
- } else {
- scalar = VIDEO_REQUEST_SCALAR;
- }
- return {
- demuxId: participant.demuxId,
- width: clamp(
- Math.floor(
- gridParticipantHeight * participant.videoAspectRatio * scalar
+ ...currentPage.rows
+ .flat()
+ // Filter out any next/previous page buttons
+ .filter(isGroupCallRemoteParticipant)
+ .map(participant => {
+ let scalar: number;
+ if (participant.sharingScreen) {
+ // We want best-resolution video if someone is sharing their screen.
+ scalar = Math.max(devicePixelRatio, 1);
+ } else {
+ scalar = VIDEO_REQUEST_SCALAR;
+ }
+ return {
+ demuxId: participant.demuxId,
+ width: clamp(
+ Math.round(
+ gridParticipantHeight *
+ participant.videoAspectRatio *
+ scalar
+ ),
+ 1,
+ MAX_FRAME_WIDTH
),
- 1,
- MAX_FRAME_WIDTH
- ),
- height: clamp(
- Math.floor(gridParticipantHeight * scalar),
- 1,
- MAX_FRAME_HEIGHT
- ),
- };
- }),
+ height: clamp(
+ Math.round(gridParticipantHeight * scalar),
+ 1,
+ MAX_FRAME_HEIGHT
+ ),
+ };
+ }),
+ ...participantsOnOtherPages.map(nonRenderedRemoteParticipant),
...overflowedParticipants.map(participant => {
if (invisibleDemuxIds.has(participant.demuxId)) {
return nonRenderedRemoteParticipant(participant);
@@ -349,12 +408,12 @@ export function GroupCallRemoteParticipants({
return {
demuxId: participant.demuxId,
width: clamp(
- Math.floor(OVERFLOW_PARTICIPANT_WIDTH * VIDEO_REQUEST_SCALAR),
+ Math.round(OVERFLOW_PARTICIPANT_WIDTH * VIDEO_REQUEST_SCALAR),
1,
MAX_FRAME_WIDTH
),
height: clamp(
- Math.floor(
+ Math.round(
(OVERFLOW_PARTICIPANT_WIDTH / participant.videoAspectRatio) *
VIDEO_REQUEST_SCALAR
),
@@ -384,58 +443,79 @@ export function GroupCallRemoteParticipants({
videoRequest = remoteParticipants.map(nonRenderedRemoteParticipant);
break;
}
-
setGroupCallVideoRequest(
videoRequest,
clamp(gridParticipantHeight, 0, MAX_FRAME_HEIGHT)
);
}, [
devicePixelRatio,
+ currentPage.rows,
gridParticipantHeight,
- gridParticipants,
invisibleDemuxIds,
overflowedParticipants,
remoteParticipants,
setGroupCallVideoRequest,
videoRequestMode,
+ participantsOnOtherPages,
]);
return (
- {
- setContainerDimensions(size);
- }}
- >
- {containerRef => (
-
-
{
- setGridDimensions(size);
- }}
- >
- {gridRef => (
-
- {flatten(rowElements)}
-
- )}
-
+
+
+
{
+ setGridDimensions(size);
+ }}
+ >
+ {gridRef => (
+
+ {flatten(rowElements)}
-
-
- )}
-
+ {isInPaginationView && (
+ <>
+ {pageIndex > 0 ? (
+
+ ) : null}
+ {pageIndex < gridParticipantsByPage.length - 1 ? (
+
+ ) : null}
+
+ )}
+
+ )}
+
+
+
+ {shouldShowOverflow && overflowedParticipants.length > 0 ? (
+
+ ) : null}
+