Fix speaking indicators showing up when they shouldn't

This fixes two edge cases:

- Screenshares should never have a speaking indicator
- Speaking indicators should be hidden in 1:1 calls
This commit is contained in:
Robin Townsend 2023-06-16 10:35:29 -04:00
parent 86ab2b4287
commit 1b3539e873
2 changed files with 22 additions and 3 deletions

View file

@ -289,6 +289,7 @@ export function InCallView({
targetWidth={bounds.width} targetWidth={bounds.width}
key={maximisedParticipant.id} key={maximisedParticipant.id}
data={maximisedParticipant.data} data={maximisedParticipant.data}
showSpeakingIndicator={false}
/> />
); );
} }
@ -300,7 +301,11 @@ export function InCallView({
disableAnimations={prefersReducedMotion || isSafari} disableAnimations={prefersReducedMotion || isSafari}
> >
{(props) => ( {(props) => (
<VideoTile {...props} ref={props.ref as Ref<HTMLDivElement>} /> <VideoTile
showSpeakingIndicator={items.length > 2}
{...props}
ref={props.ref as Ref<HTMLDivElement>}
/>
)} )}
</Grid> </Grid>
); );

View file

@ -53,10 +53,21 @@ interface Props {
targetHeight: number; targetHeight: number;
className?: string; className?: string;
style?: React.ComponentProps<typeof animated.div>["style"]; style?: React.ComponentProps<typeof animated.div>["style"];
showSpeakingIndicator: boolean;
} }
export const VideoTile = React.forwardRef<HTMLDivElement, Props>( export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
({ data, className, style, targetWidth, targetHeight }, tileRef) => { (
{
data,
className,
style,
targetWidth,
targetHeight,
showSpeakingIndicator,
},
tileRef
) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { content, sfuParticipant, member } = data; const { content, sfuParticipant, member } = data;
@ -96,7 +107,10 @@ export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
<animated.div <animated.div
className={classNames(styles.videoTile, className, { className={classNames(styles.videoTile, className, {
[styles.isLocal]: sfuParticipant.isLocal, [styles.isLocal]: sfuParticipant.isLocal,
[styles.speaking]: sfuParticipant.isSpeaking, [styles.speaking]:
sfuParticipant.isSpeaking &&
content === TileContent.UserMedia &&
showSpeakingIndicator,
[styles.muted]: microphoneMuted, [styles.muted]: microphoneMuted,
[styles.screenshare]: content === TileContent.ScreenShare, [styles.screenshare]: content === TileContent.ScreenShare,
})} })}