display connecting message until bridge formed

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',

app/client/mobile/src/calling/Calling.tsx

@@ -221,7 +221,7 @@ export function Calling({ callCard }: { callCard: string }) {
       )}
       { state.calling && state.loaded && (
         <View style={{ ...styles.overlap, top: 64 }}>
-          <View style={{backgroundColor: surface.title, borderRadius: 4 }}> 
+          <View style={{backgroundColor: surface.title, borderRadius: 16 }}> 
           { state.calling.name && (
             <Text style={styles.name} adjustsFontSizeToFit={true} numberOfLines={1}>{ state.calling.name }</Text>
           )}
@@ -261,7 +261,7 @@ export function Calling({ callCard }: { callCard: string }) {
         />
       )}
       { state.calling && state.loaded && (
-        <View style={{ ...styles.overlap, bottom: frameOffset }}>
+        <View style={{ ...styles.overlap, bottom: 64 }}>
           <View style={{ paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, gap: 16, display: 'flex', flexDirection: 'row', borderRadius: 16, backgroundColor: surface.control }}>
           <IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.primary} icon={state.audioEnabled ? 'microphone' : 'microphone-off'} loading={applyingAudio} disabled={!state.audio} compact="true" mode="contained" size={32} onPress={toggleAudio} />
           <IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.primary} icon={state.videoEnabled ? 'video-outline' : 'video-off-outline'} loading={applyingVideo} disabled={!state.video} compact="true" mode="contained" size={32} onPress={toggleVideo} />
@@ -269,6 +269,13 @@ export function Calling({ callCard }: { callCard: string }) {
           </View>
         </View>
       )}
+      { state.calling && state.loaded && !state.connected && (
+        <View style={{ ...styles.overlap, bottom: 24 }}>
+          <View style={{backgroundColor: surface.title, borderRadius: 16 }}> 
+            <Text style={styles.connecting}>{ state.strings.connecting }</Text>
+          </View>
+        </View>
+      )}
       <Confirm show={alert} params={alertParams} />
     </View>
   );

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;

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: 'Членство',

app/client/mobile/src/conversation/Conversation.tsx

@@ -225,7 +225,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
             <Icon source="shield-outline" size={20} />
           )}
         </View>
-        <IconButton style={styles.icon} mode="contained" icon="cog-transfer-outline" size={28} onPress={openDetails} />
+        <IconButton style={styles.icon} mode="contained" icon={state.layout==='large' ? 'cog-transfer-outline' : 'dots-vertical'} size={28} onPress={openDetails} />
       </View>
       <View style={padStyle}>
         <Divider style={styles.topBorder} bold={true} />