trying different call screen layout

app/client/mobile/ios/Podfile.lock

@@ -4,26 +4,26 @@ PODS:
     - React-Core
   - DoubleConversion (1.1.6)
   - FBLazyVector (0.75.4)
-  - Firebase/CoreOnly (11.5.0):
+  - Firebase/CoreOnly (11.7.0):
-    - FirebaseCore (= 11.5.0)
+    - FirebaseCore (~> 11.7.0)
-  - Firebase/Messaging (11.5.0):
+  - Firebase/Messaging (11.7.0):
     - Firebase/CoreOnly
-    - FirebaseMessaging (~> 11.5.0)
+    - FirebaseMessaging (~> 11.7.0)
-  - FirebaseCore (11.5.0):
+  - FirebaseCore (11.7.0):
-    - FirebaseCoreInternal (= 11.5)
+    - FirebaseCoreInternal (~> 11.7.0)
     - GoogleUtilities/Environment (~> 8.0)
     - GoogleUtilities/Logger (~> 8.0)
-  - FirebaseCoreExtension (11.5.0):
+  - FirebaseCoreExtension (11.7.0):
-    - FirebaseCore (= 11.5)
+    - FirebaseCore (~> 11.7.0)
-  - FirebaseCoreInternal (11.5.0):
+  - FirebaseCoreInternal (11.7.0):
     - "GoogleUtilities/NSData+zlib (~> 8.0)"
-  - FirebaseInstallations (11.5.0):
+  - FirebaseInstallations (11.7.0):
-    - FirebaseCore (= 11.5)
+    - FirebaseCore (~> 11.7.0)
     - GoogleUtilities/Environment (~> 8.0)
     - GoogleUtilities/UserDefaults (~> 8.0)
     - PromisesObjC (~> 2.4)
-  - FirebaseMessaging (11.5.0):
+  - FirebaseMessaging (11.7.0):
-    - FirebaseCore (= 11.5)
+    - FirebaseCore (~> 11.7.0)
     - FirebaseInstallations (~> 11.0)
     - GoogleDataTransport (~> 10.0)
     - GoogleUtilities/AppDelegateSwizzler (~> 8.0)
@@ -60,9 +60,9 @@ PODS:
   - GoogleUtilities/UserDefaults (8.0.2):
     - GoogleUtilities/Logger
     - GoogleUtilities/Privacy
-  - hermes-engine (0.75.2):
+  - hermes-engine (0.75.4):
-    - hermes-engine/Pre-built (= 0.75.2)
+    - hermes-engine/Pre-built (= 0.75.4)
-  - hermes-engine/Pre-built (0.75.2)
+  - hermes-engine/Pre-built (0.75.4)
   - JitsiWebRTC (124.0.2)
   - libwebp (1.3.2):
     - libwebp/demux (= 1.3.2)
@@ -1366,7 +1366,7 @@ PODS:
     - React-Core
   - react-native-sqlite-storage (6.0.1):
     - React-Core
-  - react-native-video (6.9.1):
+  - react-native-video (6.10.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1379,7 +1379,7 @@ PODS:
     - React-featureflags
     - React-graphics
     - React-ImageManager
-    - react-native-video/Video (= 6.9.1)
+    - react-native-video/Video (= 6.10.0)
     - React-NativeModulesApple
     - React-RCTFabric
     - React-rendererdebug
@@ -1388,7 +1388,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-video/Video (6.9.1):
+  - react-native-video/Video (6.10.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1674,23 +1674,23 @@ PODS:
     - React-utils (= 0.75.4)
   - rn-fetch-blob (0.12.0):
     - React-Core
-  - RNCClipboard (1.16.0):
+  - RNCClipboard (1.16.1):
     - React-Core
   - RNFastImage (8.6.3):
     - React-Core
     - SDWebImage (~> 5.11.1)
     - SDWebImageWebPCoder (~> 0.8.4)
-  - RNFBApp (21.6.2):
+  - RNFBApp (21.7.1):
-    - Firebase/CoreOnly (= 11.5.0)
+    - Firebase/CoreOnly (= 11.7.0)
     - React-Core
-  - RNFBMessaging (21.6.2):
+  - RNFBMessaging (21.7.1):
-    - Firebase/Messaging (= 11.5.0)
+    - Firebase/Messaging (= 11.7.0)
     - FirebaseCoreExtension
     - React-Core
     - RNFBApp
   - RNFS (2.20.0):
     - React-Core
-  - RNGestureHandler (2.22.0):
+  - RNGestureHandler (2.22.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1720,7 +1720,7 @@ PODS:
     - React-Core
     - React-RCTImage
     - TOCropViewController (~> 2.7.4)
-  - RNReanimated (3.16.6):
+  - RNReanimated (3.16.7):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1740,10 +1740,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated (= 3.16.6)
+    - RNReanimated/reanimated (= 3.16.7)
-    - RNReanimated/worklets (= 3.16.6)
+    - RNReanimated/worklets (= 3.16.7)
     - Yoga
-  - RNReanimated/reanimated (3.16.6):
+  - RNReanimated/reanimated (3.16.7):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1763,9 +1763,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated/apple (= 3.16.6)
+    - RNReanimated/reanimated/apple (= 3.16.7)
     - Yoga
-  - RNReanimated/reanimated/apple (3.16.6):
+  - RNReanimated/reanimated/apple (3.16.7):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1786,7 +1786,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNReanimated/worklets (3.16.6):
+  - RNReanimated/worklets (3.16.7):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2148,17 +2148,17 @@ SPEC CHECKSUMS:
   BVLinearGradient: 880f91a7854faff2df62518f0281afb1c60d49a3
   DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5
   FBLazyVector: 430e10366de01d1e3d57374500b1b150fe482e6d
-  Firebase: 7a56fe4f56b5ab81b86a6822f5b8f909ae6fc7e2
+  Firebase: a64bf6a8546e6eab54f1c715cd6151f39d2329f4
-  FirebaseCore: 93abc05437f8064cd2bc0a53b768fb0bc5a1d006
+  FirebaseCore: 3227e35f4197a924206fbcdc0349325baf4f5de4
-  FirebaseCoreExtension: ddb2eb987f736b714d30f6386795b52c4670439e
+  FirebaseCoreExtension: 206c1b399f0d103055207c16f299b28e3dbd1949
-  FirebaseCoreInternal: f47dd28ae7782e6a4738aad3106071a8fe0af604
+  FirebaseCoreInternal: d6c17dafc8dc33614733a8b52df78fcb4394c881
-  FirebaseInstallations: d8063d302a426d114ac531cd82b1e335a0565745
+  FirebaseInstallations: 9347e719c3d52d8d7b9074b2c32407dd027305e9
-  FirebaseMessaging: 9f4e42053241bd45ce8565c881bfdd9c1df2f7da
+  FirebaseMessaging: 00ece041b71ddb52a2862ffdee73fb6e9824bd0c
   fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
   glog: 69ef571f3de08433d766d614c73a9838a06bf7eb
   GoogleDataTransport: aae35b7ea0c09004c3797d53c8c41f66f219d6a7
   GoogleUtilities: 26a3abef001b6533cf678d3eb38fd3f614b7872d
-  hermes-engine: 3b6e0717ca847e2fc90a201e59db36caf04dee88
+  hermes-engine: ea92f60f37dba025e293cbe4b4a548fd26b610a0
   JitsiWebRTC: b47805ab5668be38e7ee60e2258f49badfe8e1d0
   libwebp: 1786c9f4ff8a279e4dac1e8f385004d5fc253009
   nanopb: fad817b59e0457d11a5dfbde799381cd727c1275
@@ -2200,7 +2200,7 @@ SPEC CHECKSUMS:
   react-native-rsa-native: 12132eb627797529fdb1f0d22fd0f8f9678df64a
   react-native-safe-area-context: 141eca0fd4e4191288dfc8b96a7c7e1c2983447a
   react-native-sqlite-storage: f6d515e1c446d1e6d026aa5352908a25d4de3261
-  react-native-video: 439a3ee225579691a4b2b36c54c5e4c20676b6cb
+  react-native-video: 5ea06ea0e26fbe924734af76de16db586914e309
   react-native-webrtc: 0f1c94069ff1eb9d8fb1618c2dc71f73542c8cfa
   React-nativeconfig: 31072ab0146e643594f6959c7f970a04b6c9ddd0
   React-NativeModulesApple: f49bb0befd8650ac3ff8fc2684072b16c09bf478
@@ -2229,14 +2229,14 @@ SPEC CHECKSUMS:
   ReactCodegen: 99b435b58bd874bb0626b3fb16437d2e8735d370
   ReactCommon: 1007c09a406a451ddbd874e51511aa541d6034f6
   rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba
-  RNCClipboard: 88f7f4933e7731052210d77535560c485ecb75b0
+  RNCClipboard: d7a8903d32692b0a1e71738c3825465a9acae10e
   RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8
-  RNFBApp: c0543476dee81ed5fc34d06db2f37b8e7e353cf3
+  RNFBApp: e0a2811ca35292b19d390e327612ada2bd115d0a
-  RNFBMessaging: aab4dcf6d121cfe338c9ac45631d90e125b3a5ef
+  RNFBMessaging: 3b4b92c33a2ad87105c5b6e2e7a3bb5d33a34320
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
-  RNGestureHandler: f6a6630e6bde1a49d1e3fec73b6711f718813538
+  RNGestureHandler: 5c734ddd9b406a5cd792add1fc01f0894ed8ec28
   RNImageCropPicker: 8e39c01f205e00d739c31e682f068aac315587bf
-  RNReanimated: 4fa1286bc27810821788072c6372b90d3310e7a1
+  RNReanimated: b7cac31ac5410cb266bab45e1e7c52a164e71d17
   RNScreens: 16b782596e80e475b7f3ec769c9a97d789d9b0ed
   RNSecureRandom: 07efbdf2cd99efe13497433668e54acd7df49fef
   RNVectorIcons: 7b81882e9c9369031aede0016dee0fe415cf2f43
@@ -2244,7 +2244,7 @@ SPEC CHECKSUMS:
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
-  Yoga: b05994d1933f507b0a28ceaa4fdb968dc18da178
+  Yoga: a9ef4f5c2cd79ad812110525ef61048be6a582a4
 
 PODFILE CHECKSUM: 9cf7373afef7b881c911fda82ff1f94eacee3e98
 

app/client/mobile/package.json

@@ -16,8 +16,8 @@
     "@openspacelabs/react-native-zoomable-view": "^2.3.1",
     "@react-native-clipboard/clipboard": "^1.14.2",
     "@react-native-community/blur": "^4.4.0",
-    "@react-native-firebase/app": "^21.6.2",
+    "@react-native-firebase/app": "^21.7.1",
-    "@react-native-firebase/messaging": "^21.6.2",
+    "@react-native-firebase/messaging": "^21.7.1",
     "@react-navigation/drawer": "^6.7.2",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",

app/client/mobile/src/calling/Calling.styled.ts

@@ -16,6 +16,7 @@ export const styles = StyleSheet.create({
     position: 'absolute',
     alignItems: 'center',
     justifyContent: 'center',
+    backgroundColor: 'rgb(64,64,64)',
   },
   inactive: {
     display: 'none',
@@ -24,6 +25,14 @@ export const styles = StyleSheet.create({
     position: 'absolute',
     alignItems: 'center',
     justifyContent: 'center',
+    backgroundColor: 'rgb(64,64,64)',
+  },
+  container: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   call: {
     width: '100%',
@@ -42,7 +51,7 @@ export const styles = StyleSheet.create({
     borderRadius: 8,
     overflow: 'hidden',
     padding: 2,
-    position: 'relative',
+    position: 'absolute',
   },
   closeIcon: {
     borderRadius: 8,
@@ -53,13 +62,13 @@ export const styles = StyleSheet.create({
     color: '#aaaaaa',
     paddingLeft: 16,
     width: '100%',
+    textAlign: 'center',
   },
   overlap: {
     display: 'flex',
     flexDirection: 'row',
     position: 'absolute',
     alignItems: 'center',
-    width: '100%',
     justifyContent: 'center',
     paddingBottom: 8,
     paddingTop: 8,

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

@@ -64,54 +64,63 @@ export function Calling({ callCard }: { callCard: string }) {
   const overlap = (width + 128) > height;
   const frameWidth = width > height ? height : width - 16;
   const frameHeight = frameWidth;
-  //const frameHeight = overlap ? frameWidth : frameWidth + 128;
+  const frameOffset = (height - frameHeight) / 8;
   return (
-    <View style={(connecting || state.calling || state.ringing.length > 0 || alert) ? styles.active : styles.inactive}>
+    <SafeAreaView style={(connecting || state.calling || state.ringing.length > 0 || alert) ? styles.active : styles.inactive}>
-      <BlurView style={styles.blur} blurType="dark" blurAmount={9} reducedTransparencyFallbackColor="dark" />
+      <View style={styles.container}>
-      { connecting && !state.calling && (
+        { connecting && !state.calling && (
-        <ActivityIndicator size={72} />
+          <ActivityIndicator size={72} />
-      )}
+        )}
-      { state.calling && (
+        { state.calling && (
-        <Surface style={{ ...styles.frame, width: frameWidth, height: frameHeight }}>
+          <View style={{ ...styles.frame, top: frameOffset, width: frameWidth, height: frameHeight }}>
-          <Image
+            <Image
-            style={styles.image}
+              style={styles.image}
-            resizeMode="contain"
+              resizeMode="contain"
-            source={{ uri: state.calling.imageUrl }}
+              source={{ uri: state.calling.imageUrl }}
-            onLayout={actions.loaded}
+              onLayout={actions.loaded}
-          />
+            />
-          { state.loaded && (
+            { state.loaded && (
-            <LinearGradient style={{...styles.overlap, height: frameHeight / 2, top: 2, borderRadius: 8}} start={{x: 0, y: 0}} end={{x: 0, y: 0.5}} colors={['rgba(64,64,64,1)', 'rgba(64,64,64, 0)']}>
+              <LinearGradient style={{...styles.overlap, width: '100%', height: frameHeight / 2, top: 2, borderRadius: 8}} start={{x: 0, y: 0}} end={{x: 0, y: 0.5}} colors={['rgba(64,64,64,1)', 'rgba(64,64,64, 0)']}>
-            <LinearGradient style={{...styles.overlap, height: frameHeight / 2, top: 2, borderRadius: 8}} start={{x: 0, y: 0}} end={{x: 0, y: 0.5}} colors={['rgba(64,64,64,1)', 'rgba(64,64,64, 0)']}>
+              <LinearGradient style={{...styles.overlap, width: '100%', height: frameHeight / 2, top: 2, borderRadius: 8}} start={{x: 0, y: 0}} end={{x: 0, y: 0.5}} colors={['rgba(64,64,64,1)', 'rgba(64,64,64, 0)']}>
-            </LinearGradient>
+              </LinearGradient>
-            </LinearGradient>
+              </LinearGradient>
-          )}
+            )}
-          { state.loaded && (
+            { state.loaded && (
-            <LinearGradient style={{...styles.overlap, height: frameHeight / 2, bottom: 2, borderRadius: 8}} start={{x: 0, y: 0.5}} end={{x: 0, y: 1}} colors={['rgba(64,64,64,0)', 'rgba(64,64,64, 1)']}>
+              <LinearGradient style={{...styles.overlap, width: '100%', height: frameHeight / 2, bottom: 2, borderRadius: 8}} start={{x: 0, y: 0.5}} end={{x: 0, y: 1}} colors={['rgba(64,64,64,0)', 'rgba(64,64,64, 1)']}>
-            <LinearGradient style={{...styles.overlap, height: frameHeight / 2, bottom: 2, borderRadius: 8}} start={{x: 0, y: 0.5}} end={{x: 0, y: 1}} colors={['rgba(64,64,64,0)', 'rgba(64,64,64, 1)']}>
+              <LinearGradient style={{...styles.overlap, width: '100%', height: frameHeight / 2, bottom: 2, borderRadius: 8}} start={{x: 0, y: 0.5}} end={{x: 0, y: 1}} colors={['rgba(64,64,64,0)', 'rgba(64,64,64, 1)']}>
-            </LinearGradient>
+              </LinearGradient>
-            </LinearGradient>
+              </LinearGradient>
-          )}
+            )}
-          { state.loaded && (
+            { state.loaded && (
-            <View style={{ ...styles.overlap, top: 0 }}> 
+              <LinearGradient style={{...styles.overlap, height: '100%', width: 16, right: 0}} start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['rgba(64,64,64,0)', 'rgba(64,64,64, 1)']} />
-              { state.calling.name && (
+            )}
-                <Text style={styles.name} adjustsFontSizeToFit={true} numberOfLines={1}>{ state.calling.name }</Text>
+            { state.loaded && (
-              )}
+              <LinearGradient style={{...styles.overlap, height: '100%', width: 16, left: 0}} start={{x: 1, y: 0}} end={{x: 0, y: 0}} colors={['rgba(64,64,64,0)', 'rgba(64,64,64, 1)']} />
-              { !state.calling.name && (
+            )}
-                <Text style={styles.name} adjustsFontSizeToFit={true} numberOfLines={1}>{ `${state.calling.handle}/${state.calling.node}` }</Text>
+          </View>
-              )}
+        )}
+        { state.calling && state.loaded && (
+          <View style={{ ...styles.overlap, top: 0 }}> 
+            { state.calling.name && (
+              <Text style={styles.name} adjustsFontSizeToFit={true} numberOfLines={1}>{ state.calling.name }</Text>
+            )}
+            { !state.calling.name && (
+              <Text style={styles.name} adjustsFontSizeToFit={true} numberOfLines={1}>{ `${state.calling.handle}/${state.calling.node}` }</Text>
+            )}
+          </View>
+        )}
+        { state.calling && state.loaded && (
+          <View style={{ ...styles.overlap, bottom: frameOffset }}>
+            <View style={{ paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, gap: 16, display: 'flex', flexDirection: 'row', borderRadius: 16, backgroundColor: 'rgba(128,128,128,0.5)' }}>
+            <IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.primary} icon="microphone" compact="true" mode="contained" size={32} onPress={end} />
+            <IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.primary} icon="video-outline"  compact="true" mode="contained" size={32} onPress={end} />
+            <IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.danger} icon="phone-hangup-outline" compact="true" mode="contained" size={32} onPress={end} />
             </View>
-          )}
+          </View>
-          { state.loaded && (
+        )}
-            <View style={{ ...styles.overlap, bottom: 0 }}>
+      </View>
-              <IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.primary} icon="microphone" compact="true" mode="contained" size={32} onPress={end} />
-              <IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.primary} icon="video-outline"  compact="true" mode="contained" size={32} onPress={end} />
-              <IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.danger} icon="phone-hangup-outline" compact="true" mode="contained" size={32} onPress={end} />
-            </View>
-          )}
-        </Surface>
-      )}
       <Confirm show={alert} params={alertParams} />
-    </View>
+    </SafeAreaView>
   );
 }