mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Group calling enhancements

Browse source
This commit is contained in:
Josh Perez 2020-11-17 10:07:53 -05:00 • committed by Josh Perez
parent 72e4ec95ce
commit 1f0c091e13
27 changed files with 1038 additions and 451 deletions
Download patch file Download diff file Expand all files Collapse all files

94
ts/components/CallingParticipantsList.tsx
View file

@ -6,23 +6,14 @@
import React from 'react';
import { createPortal } from 'react-dom';
import { Avatar } from './Avatar';
import { ColorType } from '../types/Colors';
import { ContactName } from './conversation/ContactName';
import { LocalizerType } from '../types/Util';
type ParticipantType = {
audioMuted?: boolean;
avatarPath?: string;
color?: ColorType;
profileName?: string;
title: string;
videoMuted?: boolean;
};
import { GroupCallRemoteParticipantType } from '../types/Calling';
export type PropsType = {
readonly i18n: LocalizerType;
readonly onClose: () => void;
readonly participants: Array<ParticipantType>;
readonly participants: Array<GroupCallRemoteParticipantType>;
};
export const CallingParticipantsList = React.memo(
@ -52,11 +43,12 @@ export const CallingParticipantsList = React.memo(
<div className="module-calling-participants-list">
<div className="module-calling-participants-list__header">
<div className="module-calling-participants-list__title">
{participants.length > 1
? i18n('calling__in-this-call--many', [
String(participants.length),
])
: i18n('calling__in-this-call--one')}
{!participants.length && i18n('calling__in-this-call--zero')}
{participants.length === 1 && i18n('calling__in-this-call--one')}
{participants.length > 1 &&
i18n('calling__in-this-call--many', [
String(participants.length),
])}
</div>
<button
type="button"
@ -67,37 +59,45 @@ export const CallingParticipantsList = React.memo(
/>
</div>
<ul className="module-calling-participants-list__list">
{participants.map((participant: ParticipantType, index: number) => (
<li
className="module-calling-participants-list__contact"
key={index}
>
<div>
<Avatar
avatarPath={participant.avatarPath}
color={participant.color}
conversationType="direct"
i18n={i18n}
profileName={participant.profileName}
title={participant.title}
size={32}
/>
<ContactName
i18n={i18n}
module="module-calling-participants-list__name"
title={participant.title}
/>
</div>
<div>
{participant.audioMuted ? (
<span className="module-calling-participants-list__muted--audio" />
) : null}
{participant.videoMuted ? (
<span className="module-calling-participants-list__muted--video" />
) : null}
</div>
</li>
))}
{participants.map(
(participant: GroupCallRemoteParticipantType, index: number) => (
<li
className="module-calling-participants-list__contact"
key={index}
>
<div>
<Avatar
avatarPath={participant.avatarPath}
color={participant.color}
conversationType="direct"
i18n={i18n}
profileName={participant.profileName}
title={participant.title}
size={32}
/>
{participant.isSelf ? (
<span className="module-calling-participants-list__name">
{i18n('you')}
</span>
) : (
<ContactName
i18n={i18n}
module="module-calling-participants-list__name"
title={participant.title}
/>
)}
</div>
<div>
{!participant.hasRemoteAudio ? (
<span className="module-calling-participants-list__muted--audio" />
) : null}
{!participant.hasRemoteVideo ? (
<span className="module-calling-participants-list__muted--video" />
) : null}
</div>
</li>
)
)}
</ul>
</div>
</div>,