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: {

37
assets/base/i18n/en.json
View File

@@ -46,7 +46,6 @@
"apps.error.form.submit.pretext": "There has been an error submitting the modal. Contact the app developer. Details: {details}",
"apps.error.lookup.error_preparing_request": "Error preparing lookup request: {errorMessage}",
"apps.error.malformed_binding": "This binding is not properly formed. Contact the App developer.",
"apps.error.network.no_server": "Can’t find this server. Check spelling and URL format.",
"apps.error.parser": "Parsing error: {error}",
"apps.error.parser.empty_value": "Empty values are not allowed.",
"apps.error.parser.execute_non_leaf": "You must select a subcommand.",
@@ -348,8 +347,6 @@
"mentions.empty.paragraph": "You'll see messages here when someone mentions you or uses terms you're monitoring.",
"mentions.empty.title": "No Mentions yet",
"mobile.about.appVersion": "App Version: {version} (Build {number})",
"mobile.about.serverVersion": "Server Version: {version} (Build {number})",
"mobile.about.serverVersionNoBuild": "Server Version: {version}",
"mobile.account.settings.save": "Save",
"mobile.action_menu.select": "Select an option",
"mobile.add_team.create_team": "Create a new team",
@@ -357,26 +354,44 @@
"mobile.android.back_handler_exit": "Press back again to exit",
"mobile.android.photos_permission_denied_description": "Upload photos to your server or save them to your device. Open Settings to grant {applicationName} Read and Write access to your photo library.",
"mobile.android.photos_permission_denied_title": "{applicationName} would like to access your photos",
"mobile.calls_call_ended": "Call ended",
"mobile.calls_call_screen": "Call",
"mobile.calls_disable": "Disable Calls",
"mobile.calls_enable": "Enable Calls",
"mobile.calls_chat_thread": "Chat thread",
"mobile.calls_current_call": "Current call",
"mobile.calls_disable": "Disable calls",
"mobile.calls_enable": "Enable calls",
"mobile.calls_end_call_title": "End call",
"mobile.calls_end_msg_channel": "Are you sure you want to end a call with {numParticipants} participants in {displayName}?",
"mobile.calls_end_msg_channel_default": "Are you sure you want to end the call?",
"mobile.calls_end_msg_dm": "Are you sure you want to end a call with {displayName}?",
"mobile.calls_end_permission_msg": "You do not have permission to end the call. Please ask the call creator to end the call.",
"mobile.calls_end_permission_msg": "You don't have permission to end the call. Please ask the call creator to end the call.",
"mobile.calls_end_permission_title": "Error",
"mobile.calls_ended_at": "Ended at",
"mobile.calls_error_message": "Error: {error}",
"mobile.calls_error_permissions": "no permissions to microphone, unable to start call",
"mobile.calls_error_permissions": "No permissions to microphone, unable to start call",
"mobile.calls_error_title": "Error",
"mobile.calls_join_call": "Join Call",
"mobile.calls_leave_call": "Leave Call",
"mobile.calls_not_available_msg": "Please contact your system administrator to enable the feature.",
"mobile.calls_join_call": "Join call",
"mobile.calls_lasted": "Lasted {duration}",
"mobile.calls_leave": "Leave",
"mobile.calls_leave_call": "Leave call",
"mobile.calls_lower_hand": "Lower hand",
"mobile.calls_more": "More",
"mobile.calls_mute": "Mute",
"mobile.calls_name_is_talking": "{name} is talking",
"mobile.calls_name_started_call": "{name} started a call",
"mobile.calls_noone_talking": "No one is talking",
"mobile.calls_not_available_msg": "Please contact your System Admin to enable the feature.",
"mobile.calls_not_available_option": "(Not Available)",
"mobile.calls_not_available_title": "Calls is not enabled",
"mobile.calls_ok": "OK",
"mobile.calls_raise_hand": "Raise hand",
"mobile.calls_see_logs": "see server logs",
"mobile.calls_speaker": "Speaker",
"mobile.calls_start_call": "Start Call",
"mobile.camera_photo_permission_denied_description": "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.",
"mobile.calls_unmute": "Unmute",
"mobile.calls_viewing_screen": "You are viewing {name}'s screen",
"mobile.calls_you": "(you)",
"mobile.camera_photo_permission_denied_description": "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.",
"mobile.camera_photo_permission_denied_title": "{applicationName} would like to access your camera",
"mobile.channel_info.alertNo": "No",
"mobile.channel_info.alertYes": "Yes",