Adjust Raised Hands button and toast visibility
This commit is contained in:
parent
5ff101e27a
commit
e724f36b79
10 changed files with 79 additions and 31 deletions
|
@ -108,6 +108,18 @@ const getConversationsByDemuxId = (overrideProps: GroupCallOverrideProps) => {
|
|||
return conversationsByDemuxId;
|
||||
};
|
||||
|
||||
const getRaisedHands = (overrideProps: GroupCallOverrideProps) => {
|
||||
if (!overrideProps.remoteParticipants) {
|
||||
return;
|
||||
}
|
||||
|
||||
return new Set<number>(
|
||||
overrideProps.remoteParticipants
|
||||
.filter(participant => participant.isHandRaised)
|
||||
.map(participant => participant.demuxId)
|
||||
);
|
||||
};
|
||||
|
||||
const createActiveGroupCallProp = (overrideProps: GroupCallOverrideProps) => ({
|
||||
callMode: CallMode.Group as CallMode.Group,
|
||||
connectionState:
|
||||
|
@ -124,7 +136,10 @@ const createActiveGroupCallProp = (overrideProps: GroupCallOverrideProps) => ({
|
|||
isConversationTooBigToRing: false,
|
||||
peekedParticipants:
|
||||
overrideProps.peekedParticipants || overrideProps.remoteParticipants || [],
|
||||
raisedHands: overrideProps.raisedHands || new Set<number>(),
|
||||
raisedHands:
|
||||
overrideProps.raisedHands ||
|
||||
getRaisedHands(overrideProps) ||
|
||||
new Set<number>(),
|
||||
remoteParticipants: overrideProps.remoteParticipants || [],
|
||||
remoteAudioLevels: new Map<number, number>(
|
||||
overrideProps.remoteParticipants?.map((_participant, index) => [
|
||||
|
|
|
@ -567,8 +567,8 @@ export function CallScreen({
|
|||
});
|
||||
}
|
||||
return (
|
||||
<div className="CallingReactionsToast__Content">
|
||||
<span className="CallingReactionsToast__HandIcon" />
|
||||
<div className="CallingRaisedHandsToast__Content">
|
||||
<span className="CallingRaisedHandsToast__HandIcon" />
|
||||
{message}
|
||||
{buttonOverride || (
|
||||
<button
|
||||
|
@ -709,12 +709,6 @@ export function CallScreen({
|
|||
)}
|
||||
{remoteParticipantsElement}
|
||||
{lonelyInCallNode}
|
||||
<CallingReactionsToastsContainer
|
||||
reactions={reactions}
|
||||
conversationsByDemuxId={conversationsByDemuxId}
|
||||
localDemuxId={localDemuxId}
|
||||
i18n={i18n}
|
||||
/>
|
||||
{raisedHands && raisedHandsCount > 0 && (
|
||||
<>
|
||||
<button
|
||||
|
@ -748,6 +742,19 @@ export function CallScreen({
|
|||
)}
|
||||
</>
|
||||
)}
|
||||
<CallingReactionsToastsContainer
|
||||
reactions={reactions}
|
||||
conversationsByDemuxId={conversationsByDemuxId}
|
||||
localDemuxId={localDemuxId}
|
||||
i18n={i18n}
|
||||
/>
|
||||
<CallingButtonToastsContainer
|
||||
hasLocalAudio={hasLocalAudio}
|
||||
outgoingRing={undefined}
|
||||
raisedHands={raisedHands}
|
||||
renderRaisedHandsToast={renderRaisedHandsToast}
|
||||
i18n={i18n}
|
||||
/>
|
||||
<div className="module-ongoing-call__footer">
|
||||
<div className="module-calling__spacer CallControls__OuterSpacer" />
|
||||
<div
|
||||
|
@ -762,14 +769,6 @@ export function CallScreen({
|
|||
<div className="CallControls__Status">{callStatus}</div>
|
||||
</div>
|
||||
|
||||
<CallingButtonToastsContainer
|
||||
hasLocalAudio={hasLocalAudio}
|
||||
outgoingRing={undefined}
|
||||
raisedHands={raisedHands}
|
||||
renderRaisedHandsToast={renderRaisedHandsToast}
|
||||
i18n={i18n}
|
||||
/>
|
||||
|
||||
{showMoreOptions && (
|
||||
<div className="CallControls__MoreOptionsContainer">
|
||||
<div
|
||||
|
|
|
@ -274,6 +274,11 @@ export function CallingLobby({
|
|||
{i18n('icu:calling__your-video-is-off')}
|
||||
</div>
|
||||
|
||||
<CallingButtonToastsContainer
|
||||
hasLocalAudio={hasLocalAudio}
|
||||
outgoingRing={outgoingRing}
|
||||
i18n={i18n}
|
||||
/>
|
||||
<div className="CallingLobby__Footer">
|
||||
<div className="module-calling__spacer CallControls__OuterSpacer" />
|
||||
<div className="CallControls">
|
||||
|
@ -283,11 +288,6 @@ export function CallingLobby({
|
|||
</div>
|
||||
<div className="CallControls__Status">{callStatus}</div>
|
||||
</div>
|
||||
<CallingButtonToastsContainer
|
||||
hasLocalAudio={hasLocalAudio}
|
||||
outgoingRing={outgoingRing}
|
||||
i18n={i18n}
|
||||
/>
|
||||
<div className="CallControls__ButtonContainer">
|
||||
<CallingButton
|
||||
buttonType={videoButtonType}
|
||||
|
|
|
@ -249,8 +249,10 @@ export function CallingButtonToastsContainer(
|
|||
maxNonPersistentToasts={1}
|
||||
region={toastRegionRef}
|
||||
>
|
||||
<div className="CallingButtonToasts" ref={toastRegionRef} />
|
||||
<CallingButtonToasts {...props} />
|
||||
<div className="CallingButtonToasts__outer">
|
||||
<div className="CallingButtonToasts" ref={toastRegionRef} />
|
||||
<CallingButtonToasts {...props} />
|
||||
</div>
|
||||
</CallingToastProvider>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue