SW/mattermost-mobile
2
0
Fork 0
forked from Ivasoft/mattermost-mobile
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MM-49746 - Calls: Show call thread title in root calls post (#6992)

Browse Source 
* add thread title to calls custom posts

* PR comments
This commit is contained in:
Christopher Poile
2023-01-23 09:38:07 -05:00
committed by GitHub
parent eb46a6aeff
commit 6c9c025d25
1 changed files with 82 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
app/products/calls/components/calls_custom_message/calls_custom_message.tsx
View File

@@ -14,6 +14,7 @@ import FormattedTime from '@components/formatted_time';
import {useServerUrl} from '@context/server';
import {useTheme} from '@context/theme';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {typography} from '@utils/typography';
import {displayUsername, getUserTimezone} from '@utils/user';
import type {LimitRestrictedInfo} from '@calls/observers';
@@ -35,6 +36,10 @@ type Props = {
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
return {
title: {
...typography('Heading', 500),
color: theme.centerChannelColor,
},
messageStyle: {
flexDirection: 'row',
color: changeOpacity(theme.centerChannelColor, 0.6),
@@ -133,97 +138,107 @@ export const CallsCustomMessage = ({
leaveAndJoinWithAlert(intl, serverUrl, post.channelId, leaveChannelName || '', joinChannelName || '', confirmToJoin, false, Boolean(joinChannelIsDMorGM));
};
const title = post.props.title ? (
<Text style={style.title}>
{post.props.title}
</Text>
) : null;
if (post.props.end_at) {
return (
<View style={style.messageStyle}>
<CompassIcon
name='phone-hangup'
size={16}
style={style.phoneHangupIcon}
/>
<View style={style.messageText}>
<FormattedText
id={'mobile.calls_call_ended'}
defaultMessage={'Call ended'}
style={style.startedText}
<>
{title}
<View style={style.messageStyle}>
<CompassIcon
name='phone-hangup'
size={16}
style={style.phoneHangupIcon}
/>
<View style={style.endCallInfo}>
<View style={style.messageText}>
<FormattedText
id={'mobile.calls_ended_at'}
defaultMessage={'Ended at'}
style={style.timeText}
id={'mobile.calls_call_ended'}
defaultMessage={'Call ended'}
style={style.startedText}
/>
<Text>{' '}</Text>
{
<View style={style.endCallInfo}>
<FormattedText
id={'mobile.calls_ended_at'}
defaultMessage={'Ended at'}
style={style.timeText}
/>
<Text>{' '}</Text>
<FormattedTime
style={style.timeText}
value={post.props.end_at}
isMilitaryTime={isMilitaryTime}
timezone={timezone}
/>
}
<Text style={style.separator}>{'•'}</Text>
<FormattedText
id={'mobile.calls_lasted'}
defaultMessage={'Lasted {duration}'}
values={{duration: moment.duration(post.props.end_at - post.props.start_at).humanize(false)}}
style={style.timeText}
/>
<Text style={style.separator}>{'•'}</Text>
<FormattedText
id={'mobile.calls_lasted'}
defaultMessage={'Lasted {duration}'}
values={{duration: moment.duration(post.props.end_at - post.props.start_at).humanize(false)}}
style={style.timeText}
/>
</View>
</View>
</View>
</View>
</>
);
}
const joinTextStyle = [style.joinCallButtonText, isLimitRestricted && style.joinCallButtonTextRestricted];
return (
<View style={style.messageStyle}>
<CompassIcon
name='phone-in-talk'
size={16}
style={style.joinCallIcon}
/>
<View style={style.messageText}>
<FormattedText
id={'mobile.calls_name_started_call'}
defaultMessage={'{name} started a call'}
values={{name: displayUsername(author, intl.locale, teammateNameDisplay)}}
style={style.startedText}
/>
<FormattedRelativeTime
value={post.props.start_at}
updateIntervalInSeconds={1}
style={style.timeText}
/>
</View>
<TouchableOpacity
style={[style.joinCallButton, isLimitRestricted && style.joinCallButtonRestricted]}
onPress={joinHandler}
>
<>
{title}
<View style={style.messageStyle}>
<CompassIcon
name='phone-outline'
name='phone-in-talk'
size={16}
style={[style.joinCallButtonIcon, isLimitRestricted && style.joinCallButtonIconRestricted]}
style={style.joinCallIcon}
/>
{
alreadyInTheCall &&
<View style={style.messageText}>
<FormattedText
id={'mobile.calls_current_call'}
defaultMessage={'Current call'}
style={joinTextStyle}
id={'mobile.calls_name_started_call'}
defaultMessage={'{name} started a call'}
values={{name: displayUsername(author, intl.locale, teammateNameDisplay)}}
style={style.startedText}
/>
}
{
!alreadyInTheCall &&
<FormattedText
id={'mobile.calls_join_call'}
defaultMessage={'Join call'}
style={joinTextStyle}
<FormattedRelativeTime
value={post.props.start_at}
updateIntervalInSeconds={1}
style={style.timeText}
/>
}
</TouchableOpacity>
</View>
</View>
<TouchableOpacity
style={[style.joinCallButton, isLimitRestricted && style.joinCallButtonRestricted]}
onPress={joinHandler}
>
<CompassIcon
name='phone-outline'
size={16}
style={[style.joinCallButtonIcon, isLimitRestricted && style.joinCallButtonIconRestricted]}
/>
{
alreadyInTheCall &&
<FormattedText
id={'mobile.calls_current_call'}
defaultMessage={'Current call'}
style={joinTextStyle}
/>
}
{
!alreadyInTheCall &&
<FormattedText
id={'mobile.calls_join_call'}
defaultMessage={'Join call'}
style={joinTextStyle}
/>
}
</TouchableOpacity>
</View>
</>
);
};