jeffemmett
/
daily-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sort participants

This commit is contained in:
Jon 2021-07-06 14:15:37 +01:00
parent 60772e0ae0
commit 94c66e9efb
1 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
dailyjs/basic-call/components/VideoGrid/VideoGrid.js
View File

@ -3,12 +3,22 @@ import Tile from '@dailyjs/shared/components/Tile';
import { DEFAULT_ASPECT_RATIO } from '@dailyjs/shared/constants'; import { DEFAULT_ASPECT_RATIO } from '@dailyjs/shared/constants';
import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider'; import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
import usePreferredLayer from '@dailyjs/shared/hooks/usePreferredLayer'; import usePreferredLayer from '@dailyjs/shared/hooks/usePreferredLayer';
import sortByKey from '@dailyjs/shared/lib/sortByKey';
import { useDeepCompareMemo } from 'use-deep-compare'; import { useDeepCompareMemo } from 'use-deep-compare';
/**
* Basic unpaginated video tile grid
*
* Note: this component is designed to work with automated track subscriptions
* and is only suitable for small call sizes as it will show all participants
* and not paginate.
*
* Note: this grid does not show screenshares (just participant cams)
*/
export const VideoGrid = React.memo( export const VideoGrid = React.memo(
() => { () => {
const containerRef = useRef(); const containerRef = useRef();
const { allParticipants } = useParticipants(); const { participants } = useParticipants();
const [dimensions, setDimensions] = useState({ const [dimensions, setDimensions] = useState({
width: 1, width: 1,
height: 1, height: 1,
@ -34,9 +44,14 @@ export const VideoGrid = React.memo(
}; };
}, []); }, []);
const sortedParticipants = useMemo(
() => participants.sort((a, b) => sortByKey(a, b, 'position')),
[participants]
);
const layout = useMemo(() => { const layout = useMemo(() => {
const aspectRatio = DEFAULT_ASPECT_RATIO; const aspectRatio = DEFAULT_ASPECT_RATIO;
const tileCount = allParticipants.length || 0; const tileCount = participants.length || 0;
const w = dimensions.width; const w = dimensions.width;
const h = dimensions.height; const h = dimensions.height;
@ -75,11 +90,11 @@ export const VideoGrid = React.memo(
} }
return bestLayout; return bestLayout;
}, [dimensions, allParticipants]); }, [dimensions, participants]);
const tiles = useDeepCompareMemo( const tiles = useDeepCompareMemo(
() => () =>
allParticipants.map((p) => ( sortedParticipants.map((p) => (
<Tile <Tile
participant={p} participant={p}
key={p.id} key={p.id}
@ -87,12 +102,12 @@ export const VideoGrid = React.memo(
style={{ maxWidth: layout.width, maxHeight: layout.height }} style={{ maxWidth: layout.width, maxHeight: layout.height }}
/> />
)), )),
[layout, allParticipants] [layout, sortedParticipants]
); );
usePreferredLayer(); usePreferredLayer();
if (!allParticipants.length) { if (!participants.length) {
return null; return null;
} }