Adjust Raised Hands button and toast visibility

This commit is contained in:
ayumi-signal 2023-12-08 12:15:18 -08:00 committed by GitHub
parent 5ff101e27a
commit e724f36b79
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 79 additions and 31 deletions

View file

@ -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) => [

View file

@ -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

View file

@ -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}

View file

@ -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>
);
}