bc6caddcc8
* add mutation observer hok * add hook to read speaking member by observing iframe content * display speaking member name in call status bar and improve layout * fix shrining * add joined call control bar * remove chat toggle from room header * change member speaking icon to mic * fix joined call control appear in other * show spinner on end call button * hide call statusbar for mobile view when room is selected * make call statusbar more mobile friendly * fix call status bar item align
79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import { Room } from 'matrix-js-sdk';
|
|
import React from 'react';
|
|
import { Box, Icon, Icons, Text } from 'folds';
|
|
import { getMemberDisplayName } from '../../utils/room';
|
|
import { getMxIdLocalPart } from '../../utils/matrix';
|
|
|
|
type MemberSpeakingProps = {
|
|
room: Room;
|
|
speakers: Set<string>;
|
|
};
|
|
export function MemberSpeaking({ room, speakers }: MemberSpeakingProps) {
|
|
const speakingNames = Array.from(speakers).map(
|
|
(userId) => getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId
|
|
);
|
|
return (
|
|
<Box alignItems="Center" gap="100">
|
|
<Icon size="100" src={Icons.Mic} filled />
|
|
<Text size="T200" truncate>
|
|
{speakingNames.length === 1 && (
|
|
<>
|
|
<b>{speakingNames[0]}</b>
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{' is speaking...'}
|
|
</Text>
|
|
</>
|
|
)}
|
|
{speakingNames.length === 2 && (
|
|
<>
|
|
<b>{speakingNames[0]}</b>
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{' and '}
|
|
</Text>
|
|
<b>{speakingNames[1]}</b>
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{' are speaking...'}
|
|
</Text>
|
|
</>
|
|
)}
|
|
{speakingNames.length === 3 && (
|
|
<>
|
|
<b>{speakingNames[0]}</b>
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{', '}
|
|
</Text>
|
|
<b>{speakingNames[1]}</b>
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{' and '}
|
|
</Text>
|
|
<b>{speakingNames[2]}</b>
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{' are speaking...'}
|
|
</Text>
|
|
</>
|
|
)}
|
|
{speakingNames.length > 3 && (
|
|
<>
|
|
<b>{speakingNames[0]}</b>
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{', '}
|
|
</Text>
|
|
<b>{speakingNames[1]}</b>
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{', '}
|
|
</Text>
|
|
<b>{speakingNames[2]}</b>
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{' and '}
|
|
</Text>
|
|
<b>{speakingNames.length - 3} others</b>
|
|
<Text as="span" size="Inherit" priority="300">
|
|
{' are speaking...'}
|
|
</Text>
|
|
</>
|
|
)}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
}
|