trying different call screen layout

2025-04-23 01:55:17 +00:00 · 2025-01-27 12:57:41 -08:00 · 2025-01-27 12:57:41 -08:00 · 2cab7e36ab
commit 2cab7e36ab
parent 8ff0443aea
5 changed files with 8497 additions and 13178 deletions
--- a/app/client/mobile/ios/Podfile.lock
+++ b/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):
-    - FirebaseCore (= 11.5.0)
-  - Firebase/Messaging (11.5.0):
+  - Firebase/CoreOnly (11.7.0):
+    - FirebaseCore (~> 11.7.0)
+  - Firebase/Messaging (11.7.0):
    - Firebase/CoreOnly
-    - FirebaseMessaging (~> 11.5.0)
-  - FirebaseCore (11.5.0):
-    - FirebaseCoreInternal (= 11.5)
+    - FirebaseMessaging (~> 11.7.0)
+  - FirebaseCore (11.7.0):
+    - FirebaseCoreInternal (~> 11.7.0)
    - GoogleUtilities/Environment (~> 8.0)
    - GoogleUtilities/Logger (~> 8.0)
-  - FirebaseCoreExtension (11.5.0):
-    - FirebaseCore (= 11.5)
-  - FirebaseCoreInternal (11.5.0):
+  - FirebaseCoreExtension (11.7.0):
+    - FirebaseCore (~> 11.7.0)
+  - FirebaseCoreInternal (11.7.0):
    - "GoogleUtilities/NSData+zlib (~> 8.0)"
-  - FirebaseInstallations (11.5.0):
-    - FirebaseCore (= 11.5)
+  - FirebaseInstallations (11.7.0):
+    - FirebaseCore (~> 11.7.0)
    - GoogleUtilities/Environment (~> 8.0)
    - GoogleUtilities/UserDefaults (~> 8.0)
    - PromisesObjC (~> 2.4)
-  - FirebaseMessaging (11.5.0):
-    - FirebaseCore (= 11.5)
+  - FirebaseMessaging (11.7.0):
+    - 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/Pre-built (= 0.75.2)
-  - hermes-engine/Pre-built (0.75.2)
+  - hermes-engine (0.75.4):
+    - hermes-engine/Pre-built (= 0.75.4)
+  - 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):
-    - Firebase/CoreOnly (= 11.5.0)
+  - RNFBApp (21.7.1):
+    - Firebase/CoreOnly (= 11.7.0)
    - React-Core
-  - RNFBMessaging (21.6.2):
-    - Firebase/Messaging (= 11.5.0)
+  - RNFBMessaging (21.7.1):
+    - 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/worklets (= 3.16.6)
+    - RNReanimated/reanimated (= 3.16.7)
+    - 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
-  FirebaseCore: 93abc05437f8064cd2bc0a53b768fb0bc5a1d006
-  FirebaseCoreExtension: ddb2eb987f736b714d30f6386795b52c4670439e
-  FirebaseCoreInternal: f47dd28ae7782e6a4738aad3106071a8fe0af604
-  FirebaseInstallations: d8063d302a426d114ac531cd82b1e335a0565745
-  FirebaseMessaging: 9f4e42053241bd45ce8565c881bfdd9c1df2f7da
+  Firebase: a64bf6a8546e6eab54f1c715cd6151f39d2329f4
+  FirebaseCore: 3227e35f4197a924206fbcdc0349325baf4f5de4
+  FirebaseCoreExtension: 206c1b399f0d103055207c16f299b28e3dbd1949
+  FirebaseCoreInternal: d6c17dafc8dc33614733a8b52df78fcb4394c881
+  FirebaseInstallations: 9347e719c3d52d8d7b9074b2c32407dd027305e9
+  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
-  RNFBMessaging: aab4dcf6d121cfe338c9ac45631d90e125b3a5ef
+  RNFBApp: e0a2811ca35292b19d390e327612ada2bd115d0a
+  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

--- a/app/client/mobile/package.json
+++ b/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/messaging": "^21.6.2",
+    "@react-native-firebase/app": "^21.7.1",
+    "@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",
--- a/app/client/mobile/src/calling/Calling.styled.ts
+++ b/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,
--- a/app/client/mobile/src/calling/Calling.tsx
+++ b/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}>
-      <BlurView style={styles.blur} blurType="dark" blurAmount={9} reducedTransparencyFallbackColor="dark" />
-      { connecting && !state.calling && (
-        <ActivityIndicator size={72} />
-      )}
-      { state.calling && (
-        <Surface style={{ ...styles.frame, width: frameWidth, height: frameHeight }}>
-          <Image
-            style={styles.image}
-            resizeMode="contain"
-            source={{ uri: state.calling.imageUrl }}
-            onLayout={actions.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, 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>
-          )}
-          { 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, 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>
-          )}
-          { 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>
-              )}
+    <SafeAreaView style={(connecting || state.calling || state.ringing.length > 0 || alert) ? styles.active : styles.inactive}>
+      <View style={styles.container}>
+        { connecting && !state.calling && (
+          <ActivityIndicator size={72} />
+        )}
+        { state.calling && (
+          <View style={{ ...styles.frame, top: frameOffset, width: frameWidth, height: frameHeight }}>
+            <Image
+              style={styles.image}
+              resizeMode="contain"
+              source={{ uri: state.calling.imageUrl }}
+              onLayout={actions.loaded}
+            />
+            { state.loaded && (
+              <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, 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>
+            )}
+            { state.loaded && (
+              <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, 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>
+            )}
+            { state.loaded && (
+              <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.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)']} />
+            )}
+          </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>
-          )}
-          { state.loaded && (
-            <View style={{ ...styles.overlap, bottom: 0 }}>
-              <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>
-      )}
+          </View>
+        )}
+      </View>
      <Confirm show={alert} params={alertParams} />
-    </View>
+    </SafeAreaView>
  );
 }

--- a/app/client/mobile/yarn.lock
+++ b/app/client/mobile/yarn.lock