verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

feat: add new video conf block - Issue (#5150) 

* improve build-icon-set script

* update mappedIcons with new icons, and orderBy name

* add new icons fonts

* add phone-issue icon

* create VideoConferenceIssue block

* verify error and return issue block
This commit is contained in:
Gleidson Daniel Silva 2023-08-09 16:15:10 -03:00 committed by GitHub
parent 7affa268fa
commit cbbea73374
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 133 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
android/app/src/main/assets/fonts/custom.ttf
View File

Binary file not shown.

133
app/containers/CustomIcon/mappedIcons.js
View File

@ -1,48 +1,8 @@
export const mappedIcons = {
'arrow-forward': 59841,
'status-disabled': 59837,
'arrow-right': 59838,
'text-format': 59839,
'code-block': 59840,
'lamp-bulb': 59836,
'phone-in': 59835,
'basketball': 59776,
'percentage': 59777,
'glasses': 59812,
'burger': 59813,
'leaf': 59814,
'airplane': 59815,
'rocket': 59816,
'directory': 59648,
'directory-disabled': 59649,
'directory-error': 59650,
'federation-disabled': 59651,
'federation': 59652,
'attach': 59676,
'link': 59752,
'status-away': 59741,
'status-busy': 59742,
'status-loading': 59743,
'status-offline': 59744,
'status-online': 59745,
'teams-private': 59750,
'channel-auto-join': 59746,
'channel-move-to-team': 59747,
'lock-filled': 59748,
'locker': 59749,
'teams': 59751,
'shield': 59661,
'ignore': 59740,
'checkbox-unchecked': 59653,
'checkbox-checked': 59654,
'github-monochromatic': 59655,
'gitlab-monochromatic': 59656,
'google-monochromatic': 59657,
'linkedin-monochromatic': 59658,
'meteor-monochromatic': 59659,
'twitter-monochromatic': 59660,
'add': 59872,
'administration': 59662,
'adobe-reader-monochromatic': 59663,
'airplane': 59815,
'all-contacts-in-channels': 59664,
'all-contacts-in-queue': 59665,
'apple-monochromatic': 59666,
@ -50,41 +10,50 @@ export const mappedIcons = {
'arrow-back': 59668,
'arrow-collapse': 59669,
'arrow-decrease': 59670,
'arrow-down': 59673,
'arrow-down-box': 59671,
'arrow-down-circle': 59672,
'arrow-down': 59673,
'arrow-expand': 59674,
'arrow-forward': 59841,
'arrow-increase': 59675,
'arrow-looping': 59677,
'arrow-return': 59678,
'arrow-up-box': 59679,
'arrow-right': 59838,
'arrow-up': 59680,
'arrow-up-box': 59679,
'attach': 59676,
'audio': 59683,
'audio-disabled': 59681,
'audio-unavailable': 59682,
'audio': 59683,
'auditing': 59684,
'auth': 59685,
'avatar': 59686,
'backspace': 59687,
'basketball': 59776,
'bold': 59688,
'book': 59689,
'burger': 59813,
'business': 59690,
'calendar': 59691,
'camera': 59696,
'camera-disabled': 59692,
'camera-filled': 59693,
'camera-photo': 59694,
'camera-unavailable': 59695,
'camera': 59696,
'canned-response': 59697,
'card': 59698,
'channel-auto-join': 59746,
'channel-move-to-team': 59747,
'channel-private': 59699,
'channel-public': 59700,
'chat-close': 59701,
'chat-forward': 59702,
'check': 59703,
'checkbox-checked': 59654,
'checkbox-unchecked': 59653,
'chevron-down': 59704,
'chevron-left-big': 59705,
'chevron-left': 59706,
'chevron-left-big': 59705,
'chevron-right': 59707,
'chevron-up': 59708,
'circle-check': 59709,
@ -93,6 +62,7 @@ export const mappedIcons = {
'close': 59712,
'cloud-connectivity': 59713,
'code': 59714,
'code-block': 59840,
'contacts': 59715,
'copy': 59716,
'create': 59717,
@ -100,18 +70,23 @@ export const mappedIcons = {
'delete': 59719,
'desktop': 59720,
'dialpad': 59721,
'directory': 59648,
'directory-disabled': 59649,
'directory-error': 59650,
'discussions': 59722,
'document': 59723,
'donner': 59724,
'download': 59725,
'edit': 59726,
'emoji': 59729,
'emoji-bad-mood': 59727,
'emoji-neutral-mood': 59728,
'emoji': 59729,
'encrypted': 59730,
'engagement-dashboard': 59731,
'enterprise-feature': 59732,
'facebook-monochromatic': 59733,
'federation': 59652,
'federation-disabled': 59651,
'file-document': 59734,
'file-sheet': 59735,
'filter': 59736,
@ -120,11 +95,16 @@ export const mappedIcons = {
'folder': 59739,
'game': 59753,
'giphy-monochromatic': 59754,
'github-monochromatic': 59655,
'gitlab-monochromatic': 59656,
'glasses': 59812,
'google-drive-monochromatic': 59756,
'google-monochromatic': 59657,
'group-by-type': 59757,
'hamburguer': 59758,
'history': 59759,
'home': 59760,
'ignore': 59740,
'image': 59761,
'info': 59762,
'input-clear': 59763,
@ -135,10 +115,16 @@ export const mappedIcons = {
'jump-to-message': 59768,
'kebab': 59769,
'keyboard': 59770,
'lamp-bulb': 59836,
'language': 59771,
'live-streaming': 59773,
'leaf': 59814,
'link': 59752,
'linkedin-monochromatic': 59658,
'live': 59774,
'live-streaming': 59773,
'livechat-monochromatic': 59775,
'lock-filled': 59748,
'locker': 59749,
'log-view': 59778,
'login': 59779,
'logout': 59780,
@ -146,65 +132,80 @@ export const mappedIcons = {
'marketplace': 59782,
'meatballs': 59783,
'mention': 59784,
'message-disabled': 59785,
'message': 59786,
'microphone-disabled': 59787,
'message-disabled': 59785,
'meteor-monochromatic': 59659,
'microphone': 59788,
'microphone-disabled': 59787,
'mobile': 59789,
'moon': 59790,
'move-to-the-queue': 59791,
'musical-note': 59792,
'new-window': 59793,
'notification-disabled': 59794,
'notification': 59795,
'notification-disabled': 59794,
'omnichannel': 59796,
'order': 59797,
'ordering-ascending': 59798,
'ordering-descending': 59800,
'pause-filled': 59802,
'pause': 59803,
'pause-filled': 59802,
'percentage': 59777,
'phone': 59806,
'phone-disabled': 59804,
'phone-end': 59805,
'phone': 59806,
'pin-map': 59807,
'phone-in': 59809,
'phone-issue': 59835,
'pin': 59808,
'Pipe': 59809,
'play-filled': 59810,
'pin-map': 59807,
'play': 59811,
'play-filled': 59810,
'prune': 59817,
'queue': 59818,
'quote': 59819,
'reaction-add': 59820,
'record': 59821,
'refresh': 59822,
'rocket': 59816,
'search': 59823,
'send-filled': 59824,
'send': 59825,
'send-filled': 59824,
'settings': 59826,
'share': 59827,
'shield-check': 59828,
'shield': 59661,
'shield-alt': 59829,
'shield-check': 59828,
'signal': 59830,
'sort-az': 59831,
'sms': 59772,
'sort': 59832,
'star-filled': 59833,
'sort-az': 59831,
'star': 59834,
'star-filled': 59833,
'status-away': 59741,
'status-busy': 59742,
'status-disabled': 59837,
'status-loading': 59743,
'status-offline': 59744,
'status-online': 59745,
'strike': 59846,
'sun': 59847,
'support': 59848,
'team': 59849,
'teams': 59751,
'teams-private': 59750,
'text-format': 59839,
'threads': 59850,
'total': 59851,
'transcript': 59852,
'twitter-monochromatic': 59660,
'underline': 59853,
'undo': 59854,
'Unlimited': 59855,
'unread-on-top-disabled': 59856,
'unread-on-top': 59857,
'unread-on-top-disabled': 59856,
'upload': 59858,
'user': 59861,
'user-add': 59859,
'user-forward': 59860,
'user': 59861,
'view-condensed': 59862,
'view-extended': 59863,
'view-medium': 59864,
@ -213,7 +214,5 @@ export const mappedIcons = {
'whatsapp-monochromatic': 59868,
'wordpress-monochromatic': 59755,
'workspaces': 59870,
'zip': 59871,
'add': 59872,
'sms': 59772
'zip': 59871
};

2
app/containers/CustomIcon/selection.json
View File

File diff suppressed because one or more lines are too long

2
app/containers/ImageViewer/ImageComponent.ts
View File

@ -21,4 +21,4 @@ export function ImageComponent({
Component = FastImage;
}
return Component;
};
}

10
app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceBaseContainer.tsx
View File

@ -7,7 +7,7 @@ import { CustomIcon, TIconsName } from '../../../CustomIcon';
import useStyle from './styles';
type VideoConfMessageIconProps = {
variant: 'ended' | 'incoming' | 'outgoing';
variant: 'ended' | 'incoming' | 'outgoing' | 'issue';
children: React.ReactElement | React.ReactElement[];
};
@ -33,6 +33,12 @@ export const VideoConferenceBaseContainer = ({ variant, children }: VideoConfMes
color: colors.conferenceCallOngoingPhoneIcon,
backgroundColor: colors.conferenceCallOngoingPhoneBackground,
label: i18n.t('Call_ongoing')
},
issue: {
icon: 'phone-issue',
color: colors.statusFontOnWarning,
backgroundColor: colors.statusBackgroundWarning,
label: i18n.t('Call_issue')
}
};
@ -45,7 +51,7 @@ export const VideoConferenceBaseContainer = ({ variant, children }: VideoConfMes
backgroundColor: iconStyle[variant].backgroundColor
}}
>
<CustomIcon name={iconStyle[variant].icon} size={variant === 'incoming' ? 16 : 24} color={iconStyle[variant].color} />
<CustomIcon name={iconStyle[variant].icon} size={24} color={iconStyle[variant].color} />
</View>
<Text style={style.infoContainerText}>{iconStyle[variant].label}</Text>
</View>

18
app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceIssue.tsx Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
import { Text } from 'react-native';
import i18n from '../../../../i18n';
import useStyle from './styles';
import { VideoConferenceBaseContainer } from './VideoConferenceBaseContainer';
const VideoConferenceIssue = React.memo(() => {
const style = useStyle();
return (
<VideoConferenceBaseContainer variant='issue'>
<Text style={style.callBack}>{i18n.t('Waiting_for_server_connection')}</Text>
</VideoConferenceBaseContainer>
);
});
export default VideoConferenceIssue;

5
app/containers/UIKit/VideoConferenceBlock/index.tsx
View File

@ -5,9 +5,10 @@ import VideoConferenceDirect from './components/VideoConferenceDirect';
import VideoConferenceEnded from './components/VideoConferenceEnded';
import VideoConferenceOutgoing from './components/VideoConferenceOutgoing';
import VideoConferenceSkeletonLoading from './components/VideoConferenceSkeletonLoading';
import VideoConferenceIssue from './components/VideoConferenceIssue';
export default function VideoConferenceBlock({ callId, blockId }: { callId: string; blockId: string }): React.ReactElement {
const { result } = useEndpointData('video-conference.info', { callId });
const { result, error } = useEndpointData('video-conference.info', { callId });
if (result?.success) {
const { users, type, status, createdBy, rid } = result;
@ -19,5 +20,7 @@ export default function VideoConferenceBlock({ callId, blockId }: { callId: stri
return <VideoConferenceOutgoing blockId={blockId} users={users} />;
}
if (result?.error || error) return <VideoConferenceIssue />;
return <VideoConferenceSkeletonLoading />;
}

2
app/i18n/locales/en.json
View File

@ -689,12 +689,14 @@
"Also_send_thread_message_to_channel_behavior": "Also send thread message to channel",
"Accounts_Default_User_Preferences_alsoSendThreadToChannel_Description": "Allow users to select the 'Also send to channel' behavior",
"Waiting_for_answer": "Waiting for answer",
"Waiting_for_server_connection": "Waiting for server connection",
"Call_ended": "Call ended",
"Call_was_not_answered": "Call was not answered",
"Call_rejected": "Call rejected",
"Call_back": "Call Back",
"Call_again": "Call Again",
"Call_ongoing": "Call Ongoing",
"Call_issue": "Call issue",
"Joined": "Joined",
"Calling": "Calling",
"Start_a_call": "Start a call",

2
app/i18n/locales/pt-BR.json
View File

@ -689,11 +689,13 @@
"Also_send_thread_message_to_channel_behavior": "Também enviar mensagem do tópico para o canal",
"Accounts_Default_User_Preferences_alsoSendThreadToChannel_Description": "Permitir que os usuários selecionem o comportamento Também enviar para o canal",
"Waiting_for_answer": "Esperando por resposta",
"Waiting_for_server_connection": "Aguardando conexão com o servidor",
"Call_ended": "Chamada finalizada",
"Call_was_not_answered": "A chamada não foi atendida",
"Call_back": "Ligue de volta",
"Call_again": "Ligue novamente",
"Call_ongoing": "Chamada em andamento",
"Call_issue": "Chamada com problemas",
"Joined": "Ingressou",
"Calling": "Chamando",
"Start_a_call": "Inicie uma chamada",

6
app/lib/constants/colors.ts
View File

@ -99,6 +99,8 @@ export const colors = {
gray300: '#5f656e',
gray100: '#CBCED1',
n900: '#1F2329',
statusBackgroundWarning: '#FFECAD',
statusFontOnWarning: '#B88D00',
overlayColor: '#1F2329B2',
...mentions,
...callButtons
@ -176,6 +178,8 @@ export const colors = {
gray300: '#5f656e',
gray100: '#CBCED1',
n900: '#FFFFFF',
statusBackgroundWarning: '#FFECAD',
statusFontOnWarning: '#B88D00',
overlayColor: '#1F2329B2',
...mentions,
...callButtons
@ -253,6 +257,8 @@ export const colors = {
gray300: '#5f656e',
gray100: '#CBCED1',
n900: '#FFFFFF',
statusBackgroundWarning: '#FFECAD',
statusFontOnWarning: '#B88D00',
overlayColor: '#1F2329B2',
...mentions,
...callButtons

BIN
ios/custom.ttf
View File

Binary file not shown.

32
scripts/build-icon-set.js
View File

@ -1,20 +1,38 @@
const fs = require('fs');
const icoMoonConfig = require('../app/containers/CustomIcon/selection.json');
const customIcons = require('../app/containers/CustomIcon/selection.json');
let iconsName = 'export const mappedIcons = {\n';
icoMoonConfig.icons.forEach((icon) => {
const sortObject = o => Object.keys(o).sort().reduce((r, k) => (r[k] = o[k], r), {});
let icons = {};
// map icons
customIcons.icons.forEach((icon) => {
icon.properties.name.split(/\s*,\s*/g).forEach((name) => {
iconsName += `\t'${name}': ${icon.properties.code},\n`;
icons = {...icons, [name]: icon.properties.code};
});
});
iconsName = `${iconsName.slice(0, -2) }\n};\n`;
fs.writeFile('app/containers/CustomIcon/mappedIcons.js', iconsName, 'utf8', function (err) {
// sort icons by name
icons = sortObject(icons);
// generate mappedIcons file
let mappedIcons = 'export const mappedIcons = {\n';
// map icons to file
Object.keys(icons).forEach((icon)=> {
mappedIcons += `\t'${icon}': ${icons[icon]},\n`;
});
// close file
mappedIcons = `${mappedIcons.slice(0, -2) }\n};\n`;
// write file
fs.writeFile('app/containers/CustomIcon/mappedIcons.js', mappedIcons, 'utf8', function (err) {
if (err) {
console.log('An error occurred while writing Object to File.');
console.log(err);
return;
}
console.log('🚀 Icons name generated.');
console.log('🚀 Icons name generated.');
});