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

app/containers/CustomIcon/mappedIcons.js

@@ -1,48 +1,8 @@
 export const mappedIcons = {
-	'arrow-forward': 59841,
+	'add': 59872,
-	'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,
 	'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,
+	'phone-in': 59809,
-	'pin-map': 59807,
+	'phone-issue': 59835,
 	'pin': 59808,
-	'Pipe': 59809,
+	'pin-map': 59807,
-	'play-filled': 59810,
 	'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,
+	'zip': 59871
-	'add': 59872,
-	'sms': 59772
 };

app/containers/ImageViewer/ImageComponent.ts

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

app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceBaseContainer.tsx

@@ -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>

app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceIssue.tsx

@@ -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;

app/containers/UIKit/VideoConferenceBlock/index.tsx

@@ -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 />;
 }

app/i18n/locales/en.json

@@ -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",

app/i18n/locales/pt-BR.json

@@ -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",

app/lib/constants/colors.ts

@@ -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

scripts/build-icon-set.js

@@ -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';
+const sortObject = o => Object.keys(o).sort().reduce((r, k) => (r[k] = o[k], r), {});
-icoMoonConfig.icons.forEach((icon) => {
+
+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.');
 });