Restyle CallLobby and ringing screens

This commit is contained in:
ayumi-signal 2023-10-31 12:32:56 -07:00 committed by GitHub
parent 87659ef2b5
commit a33e7d7622
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 77 additions and 69 deletions

View file

@ -39,9 +39,11 @@ export enum AvatarSize {
TWENTY_EIGHT = 28,
THIRTY_TWO = 32,
THIRTY_SIX = 36,
FORTY = 40,
FORTY_EIGHT = 48,
FIFTY_TWO = 52,
EIGHTY = 80,
NINETY_SIX = 96,
}
type BadgePlacementType = { bottom: number; right: number };

View file

@ -347,23 +347,7 @@ export function CallScreen({
<video ref={localVideoRef} autoPlay />
) : (
<CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
<Avatar
acceptedMessageRequest
avatarPath={me.avatarPath}
badge={undefined}
color={me.color || AvatarColors[0]}
noteToSelf={false}
conversationType="direct"
i18n={i18n}
isMe
phoneNumber={me.phoneNumber}
profileName={me.profileName}
title={me.title}
// `sharedGroupNames` makes no sense for yourself, but `<Avatar>` needs it
// to determine blurring.
sharedGroupNames={[]}
size={AvatarSize.EIGHTY}
/>
<div className="module-calling__spacer module-calling__camera-is-off-spacer" />
<div className="module-calling__camera-is-off">
{i18n('icu:calling__your-video-is-off')}
</div>
@ -398,7 +382,7 @@ export function CallScreen({
title={me.title}
// See comment above about `sharedGroupNames`.
sharedGroupNames={[]}
size={AvatarSize.EIGHTY}
size={AvatarSize.FORTY}
/>
</CallBackgroundBlur>
);
@ -520,13 +504,16 @@ export function CallScreen({
/>
</div>
{isRinging && (
<CallingPreCallInfo
conversation={conversation}
groupMembers={groupMembers}
i18n={i18n}
me={me}
ringMode={RingMode.IsRinging}
/>
<>
<div className="module-CallingPreCallInfo-spacer " />
<CallingPreCallInfo
conversation={conversation}
groupMembers={groupMembers}
i18n={i18n}
me={me}
ringMode={RingMode.IsRinging}
/>
</>
)}
{remoteParticipantsElement}
{lonelyInCallNode}
@ -594,7 +581,14 @@ export function CallScreen({
</Button>
</div>
</div>
<div className="module-ongoing-call__footer__local-preview">
<div
className={classNames(
'module-ongoing-call__footer__local-preview',
`module-ongoing-call__footer__local-preview--${
localPreviewNode ? 'active' : 'inactive'
}`
)}
>
{localPreviewNode}
<CallingAudioIndicator
hasAudio={hasLocalAudio}

View file

@ -255,6 +255,7 @@ export function CallingLobby({
onCancel={onCallCanceled}
/>
<div className="module-calling__spacer module-CallingPreCallInfo-spacer" />
<CallingPreCallInfo
conversation={conversation}
groupMembers={groupMembers}
@ -267,7 +268,7 @@ export function CallingLobby({
<div
className={classNames(
'module-CallingLobby__camera-is-off',
'module-calling__camera-is-off module-CallingLobby__camera-is-off',
`module-CallingLobby__camera-is-off--${
shouldShowLocalVideo ? 'invisible' : 'visible'
}`
@ -276,6 +277,8 @@ export function CallingLobby({
{i18n('icu:calling__your-video-is-off')}
</div>
<div className="module-calling__spacer module-CallingLobby__CallControls-spacer" />
<div className="CallControls">
<div className="CallControls__InfoDisplay">
<div className="CallControls__CallTitle">{conversation.title}</div>

View file

@ -184,7 +184,7 @@ export function CallingPreCallInfo({
phoneNumber={conversation.phoneNumber}
profileName={conversation.profileName}
sharedGroupNames={conversation.sharedGroupNames}
size={AvatarSize.EIGHTY}
size={AvatarSize.NINETY_SIX}
title={conversation.title}
unblurredAvatarPath={conversation.unblurredAvatarPath}
i18n={i18n}