ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Message Phone Call: Design improvements

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-06-18 12:03:46 +02:00
parent d3922cb116
commit 0bdf689c4e
3 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/middle/helpers/groupMessages.ts
View File

@ -72,8 +72,8 @@ export function groupMessages(messages: ApiMessage[], firstUnreadId?: number) {
nextMessage.id === firstUnreadId nextMessage.id === firstUnreadId
|| message.senderId !== nextMessage.senderId || message.senderId !== nextMessage.senderId
|| message.isOutgoing !== nextMessage.isOutgoing || message.isOutgoing !== nextMessage.isOutgoing
|| isActionMessage(message) || (isActionMessage(message) && !message.content.action?.phoneCall)
|| isActionMessage(nextMessage) || (isActionMessage(nextMessage) && !nextMessage.content.action?.phoneCall)
|| ( || (
message.forwardInfo && nextMessage.forwardInfo message.forwardInfo && nextMessage.forwardInfo
&& ( && (

27
src/components/middle/message/MessagePhoneCall.module.scss
View File

@ -4,7 +4,11 @@
.button { .button {
margin-inline-end: 0.5rem; margin-inline-end: 0.5rem;
color: var(--color-text) !important; color: var(--color-accent) !important;
:global(.own) & {
color: var(--color-accent-own) !important;
}
} }
.info { .info {
@ -26,26 +30,29 @@
&.incoming { &.incoming {
transform: rotateZ(135deg); transform: rotateZ(135deg);
}
&.missed { :global(.own) & {
color: var(--color-error); color: var(--color-accent-own);
} }
&.missed, &.canceled {
color: var(--color-error);
} }
} }
.meta { .meta {
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; margin-left: -0.1875rem;
left: -3px;
} }
.duration { .duration {
margin-inline-start: 0.25rem; margin-inline-start: 0.25rem;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-text-secondary) color: var(--color-text-secondary);
}
:global(.own) .duration { :global(.own) & {
color: var(--color-message-meta-own); color: var(--color-message-meta-own);
}
} }

15
src/components/middle/message/MessagePhoneCall.tsx
View File

@ -29,9 +29,11 @@ const MessagePhoneCall: FC<OwnProps> = ({
const { requestMasterAndRequestCall } = getActions(); const { requestMasterAndRequestCall } = getActions();
const lang = useLang(); const lang = useLang();
const { isOutgoing, isVideo, reason } = phoneCall; const {
isOutgoing, isVideo, reason, duration,
} = phoneCall;
const isMissed = reason === 'missed'; const isMissed = reason === 'missed';
const isCancelled = reason === 'busy' && !isOutgoing; const isCancelled = reason === 'busy' || duration === undefined;
const handleCall = useLastCallback(() => { const handleCall = useLastCallback(() => {
requestMasterAndRequestCall({ isVideo, userId: chatId }); requestMasterAndRequestCall({ isVideo, userId: chatId });
@ -39,19 +41,19 @@ const MessagePhoneCall: FC<OwnProps> = ({
const reasonText = useMemo(() => { const reasonText = useMemo(() => {
if (isVideo) { if (isVideo) {
if (isCancelled) return 'CallMessageVideoIncomingDeclined';
if (isMissed) return isOutgoing ? 'CallMessageVideoOutgoingMissed' : 'CallMessageVideoIncomingMissed'; if (isMissed) return isOutgoing ? 'CallMessageVideoOutgoingMissed' : 'CallMessageVideoIncomingMissed';
if (isCancelled) return 'CallMessageVideoIncomingDeclined';
return isOutgoing ? 'CallMessageVideoOutgoing' : 'CallMessageVideoIncoming'; return isOutgoing ? 'CallMessageVideoOutgoing' : 'CallMessageVideoIncoming';
} else { } else {
if (isCancelled) return 'CallMessageIncomingDeclined';
if (isMissed) return isOutgoing ? 'CallMessageOutgoingMissed' : 'CallMessageIncomingMissed'; if (isMissed) return isOutgoing ? 'CallMessageOutgoingMissed' : 'CallMessageIncomingMissed';
if (isCancelled) return 'CallMessageIncomingDeclined';
return isOutgoing ? 'CallMessageOutgoing' : 'CallMessageIncoming'; return isOutgoing ? 'CallMessageOutgoing' : 'CallMessageIncoming';
} }
}, [isCancelled, isMissed, isOutgoing, isVideo]); }, [isCancelled, isMissed, isOutgoing, isVideo]);
const duration = useMemo(() => { const formattedDuration = useMemo(() => {
return phoneCall.duration ? formatTimeDuration(lang, phoneCall.duration) : undefined; return phoneCall.duration ? formatTimeDuration(lang, phoneCall.duration) : undefined;
}, [lang, phoneCall.duration]); }, [lang, phoneCall.duration]);
@ -79,11 +81,12 @@ const MessagePhoneCall: FC<OwnProps> = ({
'icon-arrow-right', 'icon-arrow-right',
styles.arrow, styles.arrow,
isMissed && styles.missed, isMissed && styles.missed,
isCancelled && styles.canceled,
!isOutgoing && styles.incoming, !isOutgoing && styles.incoming,
)} )}
/> />
<span className={styles.duration}> <span className={styles.duration}>
{duration ? lang('CallMessageWithDuration', [timeFormatted, duration]) : timeFormatted} {formattedDuration ? lang('CallMessageWithDuration', [timeFormatted, formattedDuration]) : timeFormatted}
</span> </span>
</div> </div>
</div> </div>