set styles for MessageCall
Change-Id: I6c795f6d12a1081a2bfbd2f66ee9dc82d280a7ca
diff --git a/client/src/components/Message.tsx b/client/src/components/Message.tsx
index 0256e83..152f455 100644
--- a/client/src/components/Message.tsx
+++ b/client/src/components/Message.tsx
@@ -35,7 +35,14 @@
import { EmojiButton, MoreButton, ReplyMessageButton } from './Button';
import ConversationAvatar from './ConversationAvatar';
-import { OppositeArrowsIcon, TrashBinIcon, TwoSheetsIcon } from './SvgIcon';
+import {
+ ArrowLeftCurved,
+ ArrowLeftDown,
+ ArrowRightUp,
+ OppositeArrowsIcon,
+ TrashBinIcon,
+ TwoSheetsIcon,
+} from './SvgIcon';
type MessagePosition = 'start' | 'end';
@@ -90,15 +97,60 @@
isLastOfGroup: boolean;
}
-const MessageCall = ({ isAccountMessage, isFirstOfGroup, isLastOfGroup }: MessageCallProps) => {
+const MessageCall = ({ message, isAccountMessage, isFirstOfGroup, isLastOfGroup }: MessageCallProps) => {
const position = isAccountMessage ? 'end' : 'start';
- const bubbleColor = isAccountMessage ? '#005699' : '#E5E5E5';
- const textColor = isAccountMessage ? 'white' : 'black';
+
+ const { t } = useTranslation();
+ const { bubbleColor, Icon, text, textColor } = useMemo(() => {
+ const callDuration = dayjs.duration(parseInt(message?.duration || ''));
+ if (callDuration.asSeconds() === 0) {
+ if (isAccountMessage) {
+ return {
+ text: t('message_call_outgoing_missed'),
+ Icon: ArrowLeftCurved,
+ textColor: 'white',
+ bubbleColor: '#005699' + '80', // opacity 50%
+ };
+ } else {
+ return {
+ text: t('message_call_incoming_missed'),
+ Icon: ArrowLeftCurved,
+ textColor: 'black',
+ bubbleColor: '#C6C6C6',
+ };
+ }
+ } else {
+ const minutes = Math.floor(callDuration.asMinutes()).toString().padStart(2, '0');
+ const seconds = callDuration.format('ss');
+ const interpolations = {
+ duration: `${minutes}:${seconds}`,
+ };
+ if (isAccountMessage) {
+ return {
+ text: t('message_call_outgoing', interpolations),
+ Icon: ArrowRightUp,
+ textColor: 'white',
+ bubbleColor: '#005699',
+ };
+ } else {
+ return {
+ text: t('message_call_incoming', interpolations),
+ Icon: ArrowLeftDown,
+ textcolor: 'black',
+ bubbleColor: '#E5E5E5',
+ };
+ }
+ }
+ }, [isAccountMessage, message, t]);
+
return (
<Bubble position={position} isFirstOfGroup={isFirstOfGroup} isLastOfGroup={isLastOfGroup} bubbleColor={bubbleColor}>
- <Typography variant="body1" color={textColor} textAlign={position}>
- "Appel"
- </Typography>
+ <Stack direction="row" spacing="10px" alignItems="center">
+ <Icon sx={{ fontSize: '16px', color: textColor }} />
+ <Typography variant="body1" color={textColor} textAlign={position} fontWeight="bold" textTransform="uppercase">
+ {text}
+ </Typography>
+ </Stack>
</Bubble>
);
};
diff --git a/client/src/components/SvgIcon.tsx b/client/src/components/SvgIcon.tsx
index ba2a563..92875b7 100644
--- a/client/src/components/SvgIcon.tsx
+++ b/client/src/components/SvgIcon.tsx
@@ -64,6 +64,37 @@
);
};
+export const ArrowLeftCurved = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 16 8.814">
+ <path d="M8.184 8.813a2.761 2.761 0 0 1-1.964-.815L1.627 3.409l1.782-1.782L7.998 6.22a.268.268 0 0 0 .368 0L14.218.368 16 2.15l-5.852 5.848a2.761 2.761 0 0 1-1.964.815Z" />
+ <path d="M2.518 7.555H0v-6.3A1.259 1.259 0 0 1 1.259 0h6.3v2.518H2.518Z" />
+ </SvgIcon>
+ );
+};
+
+export const ArrowLeftDown = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="6 4.5 10.5 12.5">
+ <path
+ d="M15.25009097 14.59477981h-6.3300199l8.5305362-8.5305362-1.45522575-1.45522576-8.5305362 8.5305362v-6.3300199l-2.05555942.01909189v9.82171319l9.84009797.01838477Z"
+ strokeWidth=".5"
+ />
+ </SvgIcon>
+ );
+};
+
+export const ArrowRightUp = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="4.5 5.5 11.5 12.5">
+ <path
+ d="m6.82975394 7.48428721 6.3293128.0007071-8.53053621 8.53053622 1.45522575 1.45522575 8.53053621-8.5305362v6.3300199l2.05555941-.01909188V5.4294349l-9.84009796-.01838477Z"
+ strokeWidth=".5"
+ />
+ </SvgIcon>
+ );
+};
+
export const AudioCallIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="0 0 15.338 16">
diff --git a/client/src/dayjsInitializer.ts b/client/src/dayjsInitializer.ts
index b2ce5c3..cff6ed1 100644
--- a/client/src/dayjsInitializer.ts
+++ b/client/src/dayjsInitializer.ts
@@ -20,12 +20,14 @@
import dayjs from 'dayjs';
import dayOfYear from 'dayjs/plugin/dayOfYear';
+import duration from 'dayjs/plugin/duration';
import isBetween from 'dayjs/plugin/isBetween';
import isToday from 'dayjs/plugin/isToday';
import isYesterday from 'dayjs/plugin/isYesterday';
import localizedFormat from 'dayjs/plugin/localizedFormat';
dayjs.extend(dayOfYear);
+dayjs.extend(duration);
dayjs.extend(isBetween);
dayjs.extend(isToday);
dayjs.extend(isYesterday);
diff --git a/client/src/locale/en/translation.json b/client/src/locale/en/translation.json
index a7de038..a0bae10 100644
--- a/client/src/locale/en/translation.json
+++ b/client/src/locale/en/translation.json
@@ -4,6 +4,10 @@
"conversation_title_three": "{{member0}}, {{member1}} and {{member2}}",
"conversation_title_four": "{{member0}}, {{member1}}, {{member2}}, +1 other member",
"conversation_title_more": "{{member0}}, {{member1}}, {{member2}}, +{{excess}} other members",
+ "message_call_outgoing_missed": "Missed outgoing call",
+ "message_call_incoming_missed": "Missed incoming call",
+ "message_call_outgoing": "Outgoing call - {{duration}}",
+ "message_call_incoming": "Incoming call - {{duration}}",
"message_swarm_created": "Swarm created",
"message_user_joined": "{{user}} joined",
"message_input_placeholder_one": "Write to {{member0}}",
diff --git a/client/src/locale/fr/translation.json b/client/src/locale/fr/translation.json
index 936d83d..0da1c1a 100644
--- a/client/src/locale/fr/translation.json
+++ b/client/src/locale/fr/translation.json
@@ -4,6 +4,10 @@
"conversation_title_three": "{{member0}}, {{member1}} et {{member2}}",
"conversation_title_four": "{{member0}}, {{member1}}, {{member2}}, +1 autre membre",
"conversation_title_more": "{{member01}}, {{member1}}, {{member2}}, +{{excess}} autres membres",
+ "message_call_outgoing_missed": "Appel sortant manqué",
+ "message_call_incoming_missed": "Appel entrant manqué",
+ "message_call_outgoing": "Appel entrant - {{duration}}",
+ "message_call_incoming": "Appel sortant - {{duration}}",
"message_swarm_created": "Le Swarm a été créé",
"message_user_joined": "{{user}} s'est joint",
"message_input_placeholder_one": "Écrire à {{member0}}",