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

MM-45945 - Calls: finish i18n of calls components and messages (#6547)

Browse Source 
* finish i18n for calls components

* fix formatted time style bug

* prefer FormattedText

* more FormattedText

* merge conflicts

* PR comments on copy
This commit is contained in:
Christopher Poile
2022-08-11 16:10:28 -04:00
committed by GitHub
parent c4e93ce2a5
commit 7da253e310
11 changed files with 146 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/post_draft/send_handler/send_handler.tsx
View File

@@ -141,7 +141,7 @@ export default function SendHandler({
}),
intl.formatMessage({
id: 'mobile.calls_end_permission_msg',
defaultMessage: 'You do not have permission to end the call. Please ask the call owner to end the call.',
defaultMessage: 'You don\'t have permission to end the call. Please ask the call owner to end the call.',
}));
return;
}

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

@@ -9,6 +9,7 @@ import {Text, TouchableOpacity, View} from 'react-native';
import leaveAndJoinWithAlert from '@calls/components/leave_and_join_alert';
import CompassIcon from '@components/compass_icon';
import FormattedRelativeTime from '@components/formatted_relative_time';
import FormattedText from '@components/formatted_text';
import FormattedTime from '@components/formatted_time';
import {useServerUrl} from '@context/server';
import {useTheme} from '@context/theme';
@@ -123,20 +124,33 @@ export const CallsCustomMessage = ({
style={style.phoneHangupIcon}
/>
<View style={style.messageText}>
<Text style={style.startedText}>{'Call ended'}</Text>
<FormattedText
id={'mobile.calls_call_ended'}
defaultMessage={'Call ended'}
style={style.startedText}
/>
<View style={style.endCallInfo}>
<Text style={style.timeText}>{'Ended at '}</Text>
<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>
<Text style={style.timeText}>
{`Lasted ${moment.duration(post.props.end_at - post.props.start_at).humanize(false)}`}
</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>
@@ -151,9 +165,12 @@ export const CallsCustomMessage = ({
style={style.joinCallIcon}
/>
<View style={style.messageText}>
<Text style={style.startedText}>
{`${displayUsername(author, intl.locale, teammateNameDisplay)} started a call`}
</Text>
<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}
@@ -172,11 +189,19 @@ export const CallsCustomMessage = ({
/>
{
alreadyInTheCall &&
<Text style={style.joinCallButtonText}>{'Current call'}</Text>
<FormattedText
id={'mobile.calls_current_call'}
defaultMessage={'Current call'}
style={style.joinCallButtonText}
/>
}
{
!alreadyInTheCall &&
<Text style={style.joinCallButtonText}>{'Join call'}</Text>
<FormattedText
id={'mobile.calls_join_call'}
defaultMessage={'Join call'}
style={style.joinCallButtonText}
/>
}
</TouchableOpacity>
</View>

4
app/products/calls/components/channel_info_enable_calls/index.tsx
View File

@@ -25,8 +25,8 @@ const ChannelInfoEnableCalls = ({channelId, enabled}: Props) => {
const [tryOnPress, msgPostfix] = useTryCallsFunction(toggleCalls);
const disableText = formatMessage({id: 'mobile.calls_disable', defaultMessage: 'Disable Calls'});
const enableText = formatMessage({id: 'mobile.calls_enable', defaultMessage: 'Enable Calls'});
const disableText = formatMessage({id: 'mobile.calls_disable', defaultMessage: 'Disable calls'});
const enableText = formatMessage({id: 'mobile.calls_enable', defaultMessage: 'Enable calls'});
return (
<OptionItem

6
app/products/calls/components/channel_info_start/channel_info_start_button.tsx
View File

@@ -44,9 +44,9 @@ const ChannelInfoStartButton = ({
}, [alreadyInCall, dismissChannelInfo, intl, serverUrl, channelId, currentCallChannelName, displayName, confirmToJoin, isACallInCurrentChannel]);
const [tryJoin, msgPostfix] = useTryCallsFunction(toggleJoinLeave);
const joinText = intl.formatMessage({id: 'mobile.calls_join_call', defaultMessage: 'Join Call'});
const startText = intl.formatMessage({id: 'mobile.calls_start_call', defaultMessage: 'Start Call'});
const leaveText = intl.formatMessage({id: 'mobile.calls_leave_call', defaultMessage: 'Leave Call'});
const joinText = intl.formatMessage({id: 'mobile.calls_join_call', defaultMessage: 'Join call'});
const startText = intl.formatMessage({id: 'mobile.calls_start_call', defaultMessage: 'Start call'});
const leaveText = intl.formatMessage({id: 'mobile.calls_leave_call', defaultMessage: 'Leave call'});
return (
<OptionBox

25
app/products/calls/components/current_call_bar/current_call_bar.tsx
View File

@@ -89,6 +89,7 @@ const CurrentCallBar = ({
const theme = useTheme();
const {formatMessage} = useIntl();
const [speaker, setSpeaker] = useState<string | null>(null);
const [talkingMessage, setTalkingMessage] = useState('');
const isCurrentCall = Boolean(currentCall);
const handleVoiceOn = (data: VoiceEventData) => {
@@ -113,6 +114,20 @@ const CurrentCallBar = ({
};
}, [isCurrentCall]);
useEffect(() => {
if (speaker) {
setTalkingMessage(formatMessage({
id: 'mobile.calls_name_is_talking',
defaultMessage: '{name} is talking',
}, {name: displayUsername(userModelsDict[speaker], teammateNameDisplay)}));
} else {
setTalkingMessage(formatMessage({
id: 'mobile.calls_noone_talking',
defaultMessage: 'No one is talking',
}));
}
}, [speaker, setTalkingMessage]);
const goToCallScreen = useCallback(() => {
const options: Options = {
layout: {
@@ -142,6 +157,7 @@ const CurrentCallBar = ({
};
const style = getStyleSheet(theme);
return (
<View style={style.wrapper}>
<View style={style.container}>
@@ -151,13 +167,8 @@ const CurrentCallBar = ({
serverUrl={currentCall?.serverUrl || ''}
/>
<View style={style.userInfo}>
<Text style={style.speakingUser}>
{speaker && `${displayUsername(userModelsDict[speaker], teammateNameDisplay)} is talking`}
{!speaker && 'No one is talking'}
</Text>
<Text style={style.currentChannel}>
{`~${displayName}`}
</Text>
<Text style={style.speakingUser}>{talkingMessage}</Text>
<Text style={style.currentChannel}>{`~${displayName}`}</Text>
</View>
<Pressable
onPressIn={goToCallScreen}

7
app/products/calls/components/join_call_banner/join_call_banner.tsx
View File

@@ -8,6 +8,7 @@ import {View, Text, Pressable} from 'react-native';
import leaveAndJoinWithAlert from '@calls/components/leave_and_join_alert';
import CompassIcon from '@components/compass_icon';
import FormattedRelativeTime from '@components/formatted_relative_time';
import FormattedText from '@components/formatted_text';
import UserAvatarsStack from '@components/user_avatars_stack';
import Screens from '@constants/screens';
import {JOIN_CALL_BAR_HEIGHT} from '@constants/view';
@@ -94,7 +95,11 @@ const JoinCallBanner = ({
size={16}
style={style.joinCallIcon}
/>
<Text style={style.joinCall}>{'Join Call'}</Text>
<FormattedText
id={'mobile.calls_join_call'}
defaultMessage={'Join call'}
style={style.joinCall}
/>
<Text style={style.started}>
<FormattedRelativeTime
value={channelCallStartTime}

2
app/products/calls/components/leave_and_join_alert.tsx
View File

@@ -66,7 +66,7 @@ export const doJoinCall = async (serverUrl: string, channelId: string, intl: Int
if (!hasPermission) {
errorAlert(formatMessage({
id: 'mobile.calls_error_permissions',
defaultMessage: 'no permissions to microphone, unable to start call',
defaultMessage: 'No permissions to microphone, unable to start call',
}), intl);
return;
}

2
app/products/calls/hooks.ts
View File

@@ -45,7 +45,7 @@ export const useTryCallsFunction = (fn: () => void) => {
});
const message = intl.formatMessage({
id: 'mobile.calls_not_available_msg',
defaultMessage: 'Please contact your system administrator to enable the feature.',
defaultMessage: 'Please contact your System Admin to enable the feature.',
});
const ok = intl.formatMessage({
id: 'mobile.calls_ok',

76
app/products/calls/screens/call_screen/call_screen.tsx
View File

@@ -33,6 +33,7 @@ import UnraisedHandIcon from '@calls/icons/unraised_hand_icon';
import {CallParticipant, CurrentCall, VoiceEventData} from '@calls/types/calls';
import {sortParticipants} from '@calls/utils';
import CompassIcon from '@components/compass_icon';
import FormattedText from '@components/formatted_text';
import SlideUpPanelItem, {ITEM_HEIGHT} from '@components/slide_up_panel_item';
import {WebsocketEvents, Screens} from '@constants';
import {useTheme} from '@context/theme';
@@ -343,7 +344,7 @@ const CallScreen = ({componentId, currentCall, participantsDict, teammateNameDis
<SlideUpPanelItem
icon='message-text-outline'
onPress={switchToThread}
text='Chat thread'
text={intl.formatMessage({id: 'mobile.calls_chat_thread', defaultMessage: 'Chat thread'})}
/>
</View>
);
@@ -391,9 +392,12 @@ const CallScreen = ({componentId, currentCall, participantsDict, teammateNameDis
streamURL={currentCall.screenShareURL}
style={style.screenShareImage}
/>
<Text style={style.screenShareText}>
{`You are viewing ${displayUsername(participantsDict[currentCall.screenOn].userModel, teammateNameDisplay)}'s screen`}
</Text>
<FormattedText
id={'mobile.calls_viewing_screen'}
defaultMessage={'You are viewing {name}\'s screen'}
values={{name: displayUsername(participantsDict[currentCall.screenOn].userModel, teammateNameDisplay)}}
style={style.screenShareText}
/>
</Pressable>
);
}
@@ -429,7 +433,9 @@ const CallScreen = ({componentId, currentCall, participantsDict, teammateNameDis
/>
<Text style={style.username}>
{displayUsername(user.userModel, teammateNameDisplay)}
{user.id === myParticipant.id && ' (you)'}
{user.id === myParticipant.id &&
` ${intl.formatMessage({id: 'mobile.calls_you', defaultMessage: '(you)'})}`
}
</Text>
</View>
);
@@ -440,6 +446,30 @@ const CallScreen = ({componentId, currentCall, participantsDict, teammateNameDis
}
const HandIcon = myParticipant.raisedHand ? UnraisedHandIcon : RaisedHandIcon;
const LowerHandText = (
<FormattedText
id={'mobile.calls_lower_hand'}
defaultMessage={'Lower hand'}
style={style.buttonText}
/>);
const RaiseHandText = (
<FormattedText
id={'mobile.calls_raise_hand'}
defaultMessage={'Raise hand'}
style={style.buttonText}
/>);
const MuteText = (
<FormattedText
id={'mobile.calls_mute'}
defaultMessage={'Mute'}
style={style.buttonText}
/>);
const UnmuteText = (
<FormattedText
id={'mobile.calls_unmute'}
defaultMessage={'Unmute'}
style={style.buttonText}
/>);
return (
<SafeAreaView style={style.wrapper}>
@@ -476,10 +506,7 @@ const CallScreen = ({componentId, currentCall, participantsDict, teammateNameDis
size={24}
style={style.muteIcon}
/>
{myParticipant.muted &&
<Text style={style.buttonText}>{'Unmute'}</Text>}
{!myParticipant.muted &&
<Text style={style.buttonText}>{'Mute'}</Text>}
{myParticipant.muted ? UnmuteText : MuteText}
</Pressable>}
<View style={style.otherButtons}>
<Pressable
@@ -492,7 +519,11 @@ const CallScreen = ({componentId, currentCall, participantsDict, teammateNameDis
size={24}
style={{...style.buttonIcon, ...style.hangUpIcon}}
/>
<Text style={style.buttonText}>{'Leave'}</Text>
<FormattedText
id={'mobile.calls_leave'}
defaultMessage={'Leave'}
style={style.buttonText}
/>
</Pressable>
<Pressable
testID={'toggle-speakerphone'}
@@ -504,7 +535,11 @@ const CallScreen = ({componentId, currentCall, participantsDict, teammateNameDis
size={24}
style={[style.buttonIcon, style.speakerphoneIcon, currentCall?.speakerphoneOn && style.speakerphoneIconOn]}
/>
<Text style={style.buttonText}>{'Speaker'}</Text>
<FormattedText
id={'mobile.calls_speaker'}
defaultMessage={'Speaker'}
style={style.buttonText}
/>
</Pressable>
<Pressable
style={style.button}
@@ -517,9 +552,7 @@ const CallScreen = ({componentId, currentCall, participantsDict, teammateNameDis
style={[style.buttonIcon, style.handIcon, myParticipant.raisedHand && style.handIconRaisedHand]}
svgStyle={style.handIconSvgStyle}
/>
<Text style={style.buttonText}>
{myParticipant.raisedHand ? 'Lower hand' : 'Raise hand'}
</Text>
{myParticipant.raisedHand ? LowerHandText : RaiseHandText}
</Pressable>
<Pressable
style={style.button}
@@ -530,9 +563,11 @@ const CallScreen = ({componentId, currentCall, participantsDict, teammateNameDis
size={24}
style={style.buttonIcon}
/>
<Text
<FormattedText
id={'mobile.calls_more'}
defaultMessage={'More'}
style={style.buttonText}
>{'More'}</Text>
/>
</Pressable>
{isLandscape &&
<Pressable
@@ -545,14 +580,7 @@ const CallScreen = ({componentId, currentCall, participantsDict, teammateNameDis
size={24}
style={[style.buttonIcon, style.muteIconLandscape, myParticipant?.muted && style.muteIconLandscapeMuted]}
/>
{myParticipant.muted &&
<Text
style={style.buttonText}
>{'Unmute'}</Text>}
{!myParticipant.muted &&
<Text
style={style.buttonText}
>{'Mute'}</Text>}
{myParticipant.muted ? UnmuteText : MuteText}
</Pressable>}
</View>
</View>

2
app/utils/file/file_picker/index.ts
View File

@@ -45,7 +45,7 @@ export default class FilePickerUtil {
text: formatMessage({
id: 'mobile.camera_photo_permission_denied_description',
defaultMessage:
'Take photos and upload them to your server or save them to your device. Open Settings to grant {applicationName} Read and Write access to your camera.',
'Take photos and upload them to your server or save them to your device. Open Settings to grant {applicationName} read and write access to your camera.',
}),
},
storage: {