From 3ad8565927273d0651b504e67469e3f0dc25edd8 Mon Sep 17 00:00:00 2001 From: balzack Date: Thu, 30 Jan 2025 20:12:07 -0800 Subject: [PATCH] display connecting message until bridge formed --- app/client/mobile/src/calling/Calling.styled.ts | 7 +++++++ app/client/mobile/src/calling/Calling.tsx | 11 +++++++++-- app/client/mobile/src/calling/useCalling.hook.ts | 7 ++++--- app/client/mobile/src/constants/Strings.ts | 6 ++++++ app/client/mobile/src/conversation/Conversation.tsx | 2 +- 5 files changed, 27 insertions(+), 6 deletions(-) diff --git a/app/client/mobile/src/calling/Calling.styled.ts b/app/client/mobile/src/calling/Calling.styled.ts index 74bae63e..772ffb6a 100644 --- a/app/client/mobile/src/calling/Calling.styled.ts +++ b/app/client/mobile/src/calling/Calling.styled.ts @@ -84,6 +84,13 @@ export const styles = StyleSheet.create({ width: '100%', textAlign: 'center', }, + connecting: { + fontSize: 12, + paddingLeft: 16, + paddingRight: 16, + paddingTop: 4, + paddingBottom: 4, + }, overlap: { display: 'flex', flexDirection: 'row', diff --git a/app/client/mobile/src/calling/Calling.tsx b/app/client/mobile/src/calling/Calling.tsx index 1ceb795b..2623d6af 100644 --- a/app/client/mobile/src/calling/Calling.tsx +++ b/app/client/mobile/src/calling/Calling.tsx @@ -221,7 +221,7 @@ export function Calling({ callCard }: { callCard: string }) { )} { state.calling && state.loaded && ( - + { state.calling.name && ( { state.calling.name } )} @@ -261,7 +261,7 @@ export function Calling({ callCard }: { callCard: string }) { /> )} { state.calling && state.loaded && ( - + @@ -269,6 +269,13 @@ export function Calling({ callCard }: { callCard: string }) { )} + { state.calling && state.loaded && !state.connected && ( + + + { state.strings.connecting } + + + )} ); diff --git a/app/client/mobile/src/calling/useCalling.hook.ts b/app/client/mobile/src/calling/useCalling.hook.ts index 59f0d3f4..b43a3c49 100644 --- a/app/client/mobile/src/calling/useCalling.hook.ts +++ b/app/client/mobile/src/calling/useCalling.hook.ts @@ -42,6 +42,7 @@ export function useCalling() { video: null, videoEnabled: false, videoAdded: false, + connected: false, }) // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -92,7 +93,7 @@ export function useCalling() { video.enabled = false; } InCallManager.start({media: 'audio'}); - updateState({ audio, video, audioAdded: true, audioEnabled: true, videoAdded: false, videoEnabled: false }); + updateState({ audio, video, audioAdded: true, audioEnabled: true, videoAdded: false, videoEnabled: false, connected: true }); } catch (err) { console.log(err); updateState({ failed: true }); @@ -297,7 +298,7 @@ export function useCalling() { call.current = { policy, peer, link, candidates }; link.setStatusListener(linkStatus); link.setMessageListener((msg) => updatePeer('message', msg)); - updateState({ calling: card }); + updateState({ calling: card, connected: false }); }, call: async (cardId: string) => { if (call.current) { @@ -316,7 +317,7 @@ export function useCalling() { call.current = { policy, peer, link, candidates }; link.setStatusListener(linkStatus); link.setMessageListener((msg) => updatePeer('message', msg)); - updateState({ calling: card }); + updateState({ calling: card, connected: false }); }, loaded: (e) => { const { width, height } = e.nativeEvent.layout; diff --git a/app/client/mobile/src/constants/Strings.ts b/app/client/mobile/src/constants/Strings.ts index f3bf33be..18e2926d 100644 --- a/app/client/mobile/src/constants/Strings.ts +++ b/app/client/mobile/src/constants/Strings.ts @@ -15,6 +15,7 @@ export const en = { token: 'Token', delayMessage: 'Key generation can take several minutes.', noAccess: 'No Access', + connecting: 'Connecting', membership: 'Membership', channelGuest: 'Topic Guest', @@ -297,6 +298,7 @@ export const fr = { reportTopic: 'Signaler le sujet', reportTopicPrompt: 'Êtes-vous sûr de vouloir signaler ce sujet pour examen par un administrateur ?', noAccess: 'Pas d\'Accès', + connecting: 'Démarrage de la Connexion', membership: 'Adhésion', channelHost: 'Hôte du Sujet', @@ -574,6 +576,7 @@ export const sp = { blockTopicPrompt: '¿Estás seguro de que deseas bloquear este tema?', reportTopic: 'Reportar tema', reportTopicPrompt: '¿Estás seguro de que deseas reportar este tema para revisión del administrador?', + connecting: 'Conexión Inicial', noAccess: 'Sin Acceso', membership: 'Afiliación', @@ -851,6 +854,7 @@ export const pt = { blockTopicPrompt: 'Tem certeza de que deseja bloquear este tópico?', reportTopic: 'Denunciar tópico', reportTopicPrompt: 'Tem certeza de que deseja denunciar este tópico para revisão do administrador?', + connecting: 'Iniciando Conexão', noAccess: 'Sem Acesso', membership: 'Associação', @@ -1129,6 +1133,7 @@ export const de = { blockTopicPrompt: 'Sind Sie sicher, dass Sie dieses Thema blockieren möchten?', reportTopic: 'Thema melden', reportTopicPrompt: 'Sind Sie sicher, dass Sie dieses Thema zur Überprüfung durch den Administrator melden möchten?', + connecting: 'Startverbindung', noAccess: 'Kein Zugriff', channelHost: 'Themenhost', @@ -1406,6 +1411,7 @@ export const ru = { blockTopicPrompt: 'Вы уверены, что хотите заблокировать эту тему?', reportTopic: 'Пожаловаться на тему', reportTopicPrompt: 'Вы уверены, что хотите отправить эту тему на рассмотрение администратору?', + connecting: 'начало соединения', noAccess: 'Нет доступа', membership: 'Членство', diff --git a/app/client/mobile/src/conversation/Conversation.tsx b/app/client/mobile/src/conversation/Conversation.tsx index 457c7298..756d1e39 100644 --- a/app/client/mobile/src/conversation/Conversation.tsx +++ b/app/client/mobile/src/conversation/Conversation.tsx @@ -225,7 +225,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD )} - +