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:
parent
86ab2b4287
commit
1b3539e873
2 changed files with 22 additions and 3 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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,
|
||||||
})}
|
})}
|
||||||
|
|
Loading…
Add table
Reference in a new issue