@ethora/chat-component-rn 26.5.21 → 26.6.11

package/src/components/styled/SendInput.tsx

@@ -14,12 +14,20 @@ import AttachSheet from '../Modals/AttachSheet/AttachSheet';
 import { MediaFilePreview } from './MediaFilePreview';
 import { getIconColor } from '../../helpers/getIconColor';
 import { getElementFont } from '../../helpers/getElementFont';
+import { useT } from '../../i18n/useT';
 import * as ImagePicker from 'expo-image-picker';
 import * as DocumentPicker from 'expo-document-picker';
 import * as ImageManipulator from 'expo-image-manipulator';
-// `Audio` namespace gives us permissions, audio mode, presets, and the
-// Recording class — same pattern AudioMessage uses for Audio.Sound.
-import { Audio } from 'expo-av';
+// expo-audio replaces the discontinued expo-av: `useAudioRecorder` owns a
+// single reusable recorder for this input's lifetime (prepare → record →
+// stop → prepare again), and the module-level helpers cover permissions
+// and the iOS audio session.
+import {
+  useAudioRecorder,
+  setAudioModeAsync,
+  requestRecordingPermissionsAsync,
+  RecordingPresets,
+} from 'expo-audio';
 
 // iOS photos default to HEIC; many web backends (incl. ours) 500 on
 // HEIC uploads because they can't decode it. Convert to JPEG before
@@ -88,6 +96,7 @@ const SendInput: React.FC<SendInputProps> = ({
   isLoading,
   isMessageProcessing,
 }) => {
+  const t = useT();
   const [message, setMessage] = useState('');
   const [isRecording, setIsRecording] = useState(false);
   // Live counter (seconds) for the recording overlay. Updated by a
@@ -97,14 +106,20 @@ const SendInput: React.FC<SendInputProps> = ({
   const [filePreviews, setFilePreviews] = useState<MediaFile[]>([]);
   const [showMediaMenu, setShowMediaMenu] = useState(false);
 
-  // expo-av's Audio.Recording instance for the in-progress recording.
-  // Kept in a ref (not state) because handlers fire synchronously and we
-  // need the latest instance without waiting for a re-render.
-  // Typed via InstanceType<typeof Audio.Recording> because direct
-  // `Audio.Recording` as a type-position lookup fails under bundler
-  // resolution even though the class is in the Audio namespace at
-  // runtime. InstanceType resolves through the typeof of the value.
-  const recordingRef = useRef<InstanceType<typeof Audio.Recording> | null>(null);
+  // expo-audio's recorder is a long-lived native object owned by the hook
+  // (released automatically on unmount) and reused across recordings, so
+  // unlike expo-av's one-shot `Audio.Recording` there is no per-recording
+  // instance to hold. The hook has to run unconditionally, but the
+  // constructor is inert on both platforms — iOS allocates a bare
+  // AVAudioRecorder (no file), Android leaves its MediaRecorder null.
+  // Nothing claims the mic, writes a file, or switches the iOS session to
+  // playAndRecord until `prepareToRecordAsync`, so consumers with
+  // `enableAudio` off carry an idle object and nothing more.
+  const audioRecorder = useAudioRecorder(RecordingPresets.HIGH_QUALITY);
+  // Tracks whether a recording is actually in flight, so cancel/stop and
+  // the unmount teardown can tell "never started" from "needs stopping"
+  // without reading native state.
+  const isRecordingRef = useRef(false);
   const recordingTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   // Refs shadow `message` and `filePreviews` so handleSendClick can:
@@ -290,7 +305,7 @@ const SendInput: React.FC<SendInputProps> = ({
   //
   // Mirrors the web experience: tap mic → start recording → either tap
   // X to discard, or tap send to stop + immediately upload + post the
-  // voice message. Uses expo-av's Audio.Recording (already a peer dep
+  // voice message. Uses expo-audio's AudioRecorder (already a peer dep
   // for AudioMessage playback). Filename is `voice-<timestamp>.m4a` with
   // mimetype `audio/m4a` so the receiver routes through the audio
   // branch in MediaMessage directly, no octet-stream sniffing needed.
@@ -306,9 +321,9 @@ const SendInput: React.FC<SendInputProps> = ({
   // playback elsewhere in the app isn't routed to the earpiece.
   const restoreAudioMode = async () => {
     try {
-      await Audio.setAudioModeAsync({
-        allowsRecordingIOS: false,
-        playsInSilentModeIOS: true,
+      await setAudioModeAsync({
+        allowsRecording: false,
+        playsInSilentMode: true,
       });
     } catch {
       /* non-fatal */
@@ -316,27 +331,30 @@ const SendInput: React.FC<SendInputProps> = ({
   };
 
   const handleStartRecording = async () => {
-    if (isRecording || recordingRef.current) {return;}
+    if (isRecording || isRecordingRef.current) {return;}
     try {
-      const perm = await Audio.requestPermissionsAsync();
+      const perm = await requestRecordingPermissionsAsync();
       if (!perm.granted) {
         promptOpenSettings(
           'Microphone permission is needed to record voice messages.'
         );
         return;
       }
-      // iOS: recording requires `allowsRecordingIOS:true`; we'll
-      // flip it back in restoreAudioMode after stop/cancel.
-      await Audio.setAudioModeAsync({
-        allowsRecordingIOS: true,
-        playsInSilentModeIOS: true,
+      // `allowsRecording` is not just an iOS session flag: expo-audio's
+      // recorder throws RecordingDisabledException from record() when the
+      // audio mode has it off. Flipped back in restoreAudioMode after
+      // stop/cancel so playback elsewhere isn't stuck on the earpiece.
+      await setAudioModeAsync({
+        allowsRecording: true,
+        playsInSilentMode: true,
       });
-      const rec = new Audio.Recording();
-      await rec.prepareToRecordAsync(
-        Audio.RecordingOptionsPresets.HIGH_QUALITY
-      );
-      await rec.startAsync();
-      recordingRef.current = rec;
+      // Passing the preset (rather than preparing bare) makes the native
+      // side allocate a FRESH output file for this take. Without it the
+      // recorder reuses the previous URL, so a second voice message would
+      // overwrite the first while its upload is still in flight.
+      await audioRecorder.prepareToRecordAsync(RecordingPresets.HIGH_QUALITY);
+      audioRecorder.record();
+      isRecordingRef.current = true;
       setIsRecording(true);
       setRecordingDuration(0);
       const startedAt = Date.now();
@@ -346,7 +364,7 @@ const SendInput: React.FC<SendInputProps> = ({
       }, 250);
     } catch (err) {
       console.warn('startRecording failed', err);
-      recordingRef.current = null;
+      isRecordingRef.current = false;
       setIsRecording(false);
       setRecordingDuration(0);
       await restoreAudioMode();
@@ -355,15 +373,15 @@ const SendInput: React.FC<SendInputProps> = ({
 
   const handleCancelRecording = async () => {
     stopRecordingTimer();
-    const rec = recordingRef.current;
-    recordingRef.current = null;
+    const wasRecording = isRecordingRef.current;
+    isRecordingRef.current = false;
     setIsRecording(false);
     setRecordingDuration(0);
-    if (rec) {
+    if (wasRecording) {
       try {
-        await rec.stopAndUnloadAsync();
+        await audioRecorder.stop();
       } catch {
-        /* already stopped / unloaded — fine */
+        /* already stopped — fine */
       }
     }
     await restoreAudioMode();
@@ -371,12 +389,12 @@ const SendInput: React.FC<SendInputProps> = ({
 
   const handleStopAndSendRecording = async () => {
     stopRecordingTimer();
-    const rec = recordingRef.current;
-    recordingRef.current = null;
+    const wasRecording = isRecordingRef.current;
+    isRecordingRef.current = false;
     setIsRecording(false);
     const seconds = recordingDuration;
     setRecordingDuration(0);
-    if (!rec) {
+    if (!wasRecording) {
       await restoreAudioMode();
       return;
     }
@@ -384,18 +402,20 @@ const SendInput: React.FC<SendInputProps> = ({
     // within the same tick there's nothing audible to send.
     if (seconds < 1) {
       try {
-        await rec.stopAndUnloadAsync();
+        await audioRecorder.stop();
       } catch {}
       await restoreAudioMode();
       return;
     }
     try {
-      await rec.stopAndUnloadAsync();
+      await audioRecorder.stop();
     } catch (err) {
-      console.warn('stopAndUnloadAsync failed', err);
+      console.warn('recorder.stop failed', err);
     }
+    // Read the URI while it still points at THIS take — the next
+    // prepareToRecordAsync() swaps in a new output file.
+    const uri = audioRecorder.uri;
     await restoreAudioMode();
-    const uri = rec.getURI();
     if (!uri) {return;}
     // HIGH_QUALITY preset writes AAC in an M4A container on both iOS
     // and Android, so a single mimetype works. `voice-<ts>.m4a`
@@ -419,14 +439,16 @@ const SendInput: React.FC<SendInputProps> = ({
   useEffect(() => {
     return () => {
       stopRecordingTimer();
-      const rec = recordingRef.current;
-      recordingRef.current = null;
-      if (rec) {
-        rec.stopAndUnloadAsync().catch(() => {});
+      if (isRecordingRef.current) {
+        isRecordingRef.current = false;
+        audioRecorder.stop().catch(() => {});
       }
       restoreAudioMode();
     };
-  }, []);
+    // The hook's recorder identity is stable (its options never change),
+    // so this teardown runs on unmount only.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [audioRecorder]);
 
   const handleRemoveImage = (index: number) => {
     const next = filePreviewsRef.current.filter((_, i) => i !== index);
@@ -487,6 +509,24 @@ const SendInput: React.FC<SendInputProps> = ({
     setMessage(next);
   }, [editMessage]);
 
+  // iOS's multiline TextInput always top-aligns its content (UITextView
+  // has no vertical-centering API RN can hook into — `textAlignVertical`
+  // is Android-only), so a `minHeight` taller than one text line leaves
+  // the placeholder/cursor pinned near the top instead of centered. Fix:
+  // derive vertical padding from the actual line height so the box's
+  // resting height already equals its content height — nothing is left
+  // to look top-aligned.
+  const inputFontSize =
+    config?.typography?.input?.fontSize ??
+    config?.typography?.elements?.inputText?.fontSize ??
+    16;
+  const inputMinHeight = config?.typography?.input?.minHeight ?? 40;
+  const estimatedLineHeight = inputFontSize * 1.2;
+  const inputVerticalPadding = Math.max(
+    4,
+    (inputMinHeight - estimatedLineHeight) / 2
+  );
+
   return (
     <InputContainer isText={!!message}>
         {filePreviews.length > 0 && (
@@ -521,7 +561,7 @@ const SendInput: React.FC<SendInputProps> = ({
                 color={config?.colors?.primary}
                 fontSize={config?.typography?.input?.fontSize}
                 fontWeight={config?.typography?.input?.fontWeight as any}
-                placeholder="Type message"
+                placeholder={t('input.placeholder')}
                 placeholderTextColor="#999"
                 value={message}
                 onChangeText={(text) => {
@@ -541,13 +581,16 @@ const SendInput: React.FC<SendInputProps> = ({
                 // No fixed height: a multiline TextInput auto-grows to fit
                 // its content between min/max. Locking `height` made iOS
                 // top-align the text inside the taller box (it looked like
-                // the text had dropped). minHeight keeps the 40px tap
-                // target; the row's align-items:center vertically centres
-                // the content-sized input.
+                // the text had dropped). paddingVertical (computed above)
+                // makes the resting box height equal minHeight without
+                // leaving slack above the text, which is what actually
+                // centers it on iOS.
                 style={[
                   {
-                    minHeight: config?.typography?.input?.minHeight ?? 40,
+                    minHeight: inputMinHeight,
                     maxHeight: config?.typography?.input?.maxHeight ?? 120,
+                    paddingTop: inputVerticalPadding,
+                    paddingBottom: inputVerticalPadding,
                     flex: 1,
                   },
                   getElementFont(config, 'inputText'),

package/src/components/styled/StyledComponents.ts

@@ -40,12 +40,15 @@ export const CenterContainer = styled.View<{
 }>`
   align-items: center;
   justify-content: center;
-  width: ${({ rightSpace, leftSpace }) =>
-    rightSpace && !leftSpace
-      ? '100%'
-      : rightSpace || !leftSpace
-        ? '90%'
-        : '70%'};
+  /* flex:1 so the title fills the space BETWEEN the left (back/avatar) and
+   * right (globe / call / menu) clusters and shrinks to make room for them.
+   * The previous fixed 90% width overflowed the row (15% left + 90% center
+   * + 25% right = 130%), pushing the right cluster — the translate globe,
+   * call and room-menu icons — off-screen where it rendered but was clipped
+   * by the device edge. min-width:0 lets the title ellipsize instead of
+   * forcing the row wider. Mirrors the web header's flexbox layout. */
+  flex: 1;
+  min-width: 0;
   padding-right: ${({ rightSpace }) => (rightSpace ? '16' : '0')}px;
   padding-left: ${({ leftSpace }) => (leftSpace ? '16' : '0')}px;
 `;

package/src/components/styled/StyledInputComponents/Composing.tsx

@@ -51,7 +51,13 @@ const Composing: FC<ComposingProps> = ({ usersTyping = ['User'], style }) => {
   return (
     <View style={[styles.wrapper, style]}>
       {typingText ? (
-        <Text style={styles.typingText}>{typingText}</Text>
+        <Text
+          style={styles.typingText}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
+          {typingText}
+        </Text>
       ) : (
         <View />
       )}

package/src/components/styled/VideoMessage.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+import { Image, Pressable, StyleSheet, View } from 'react-native';
 import { useVideoPlayer, VideoView } from 'expo-video';
 import { useDispatch } from 'react-redux';
 import {
@@ -18,14 +18,90 @@ interface CustomMessageVideoProps {
   fileName: string;
   fileURL: string;
   mimetype: string;
+  /** The backend-generated poster frame (message.locationPreview). */
+  previewURL?: string;
 }
 
-const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
-  fileName,
-  fileURL,
-  mimetype,
-}) => {
-  const dispatch = useDispatch();
+const PlayBadge: React.FC = () => (
+  <View style={styles.overlay} pointerEvents="none">
+    <View style={styles.playButton}>
+      <PlayIcon width={28} height={28} />
+    </View>
+  </View>
+);
+
+/**
+ * Poster path — taken whenever the message carries a `locationPreview`.
+ *
+ * A chat row only ever needs a still and a play affordance; actual
+ * playback happens in the full-screen preview. Drawing that still with a
+ * plain <Image> keeps the whole bubble inside the RN view hierarchy, so
+ * the play badge is guaranteed to composite on top of it.
+ *
+ * The VideoView path below cannot make that promise: expo-video draws
+ * into a native surface, and depending on platform, expo-video version
+ * and surfaceType that surface can end up above its sibling RN views —
+ * swallowing the badge and leaving the video looking like a plain photo.
+ * It is also cheaper: no video player instance per row in a long list.
+ */
+const PosterVideo: React.FC<{
+  previewURL: string;
+  onOpen: () => void;
+  onPosterError: () => void;
+}> = ({ previewURL, onOpen, onPosterError }) => {
+  const [dims, setDims] = useState<MediaDims>(defaultMediaDims());
+
+  useEffect(() => {
+    if (!previewURL) {
+      return;
+    }
+    let active = true;
+    Image.getSize(
+      previewURL,
+      (w, h) => {
+        if (active) {
+          setDims(fitMediaDimensions(w, h));
+        }
+      },
+      () => {
+        /* keep the default box if the size probe fails */
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [previewURL]);
+
+  return (
+    <Pressable
+      onPress={onOpen}
+      style={[styles.wrapper, { width: dims.width, height: dims.height }]}
+      accessibilityRole="button"
+      accessibilityLabel="Play video"
+    >
+      <Image
+        source={{ uri: previewURL }}
+        style={styles.video}
+        resizeMode="cover"
+        // Not every backend returns a real still — some set
+        // locationPreview to the video URL itself, which decodes to
+        // nothing. Rather than show an empty box, hand the row back to
+        // the player so it can paint a first frame.
+        onError={onPosterError}
+      />
+      <PlayBadge />
+    </Pressable>
+  );
+};
+
+/**
+ * Fallback for messages with no usable poster frame: mount the player
+ * purely to paint its first frame.
+ */
+const VideoSurfaceVideo: React.FC<{
+  fileURL: string;
+  onOpen: () => void;
+}> = ({ fileURL, onOpen }) => {
   const [dims, setDims] = useState<MediaDims>(defaultMediaDims());
 
   const player = useVideoPlayer(fileURL, (p) => {
@@ -42,11 +118,6 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
     return () => sub.remove();
   }, [player]);
 
-  const handleOpen = () => {
-    dispatch(setActiveFile({ fileName, fileURL, mimetype }));
-    dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
-  };
-
   return (
     // Capture-overlay pattern: VideoView sits underneath without ANY
     // touch participation; a transparent absolute-fill <Pressable> on
@@ -56,7 +127,7 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
     // VideoView still intercepted gestures despite that hint, so
     // tapping the poster did nothing. Customer-reported #9 (video
     // preview unresponsive). The Pressable now guarantees the tap
-    // reaches `handleOpen`.
+    // reaches `onOpen`.
     <View
       style={[styles.wrapper, { width: dims.width, height: dims.height }]}
     >
@@ -68,16 +139,12 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
         surfaceType="textureView"
         pointerEvents="none"
       />
-      <View style={styles.overlay} pointerEvents="none">
-        <View style={styles.playButton}>
-          <PlayIcon width={28} height={28} />
-        </View>
-      </View>
+      <PlayBadge />
       <Pressable
-        onPress={handleOpen}
+        onPress={onOpen}
         // Sits ON TOP of VideoView + the play-button overlay; transparent
         // so the poster + play icon show through. Captures the tap and
-        // routes to handleOpen → setActiveModal(FILE_PREVIEW).
+        // routes to onOpen → setActiveModal(FILE_PREVIEW).
         style={StyleSheet.absoluteFill}
         accessibilityRole="button"
         accessibilityLabel="Play video"
@@ -86,6 +153,33 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
   );
 };
 
+const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
+  fileName,
+  fileURL,
+  mimetype,
+  previewURL,
+}) => {
+  const dispatch = useDispatch();
+  const [posterFailed, setPosterFailed] = useState(false);
+
+  const handleOpen = () => {
+    dispatch(setActiveFile({ fileName, fileURL, mimetype }));
+    dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
+  };
+
+  if (previewURL && !posterFailed) {
+    return (
+      <PosterVideo
+        previewURL={previewURL}
+        onOpen={handleOpen}
+        onPosterError={() => setPosterFailed(true)}
+      />
+    );
+  }
+
+  return <VideoSurfaceVideo fileURL={fileURL} onOpen={handleOpen} />;
+};
+
 export default CustomMessageVideo;
 
 const styles = StyleSheet.create({

package/src/context/xmppProvider.tsx

@@ -10,6 +10,7 @@ import React, {
 } from 'react';
 import { AppState, DeviceEventEmitter } from 'react-native';
 import NetInfo from '@react-native-community/netinfo';
+import { VideoCallOverlay } from '../components/VideoCalls/VideoCallOverlay';
 import XmppClient, {
   XmppCredentialsProvider,
 } from '../networking/xmppClient';
@@ -506,7 +507,13 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
   useEffect(() => {
     if (!client) {return;}
     const id = setInterval(() => {
-      if (AppState.currentState !== 'active') {return;}
+      // Only skip while genuinely backgrounded. iOS also reports 'inactive'
+      // for transient states the user still sees the chat through (control
+      // centre, an incoming-call banner, app-switcher preview, and — on the
+      // simulator — whenever the window is not focused). Gating on
+      // `!== 'active'` meant the watchdog silently stopped running in all of
+      // those, so a socket that dropped during one never got revived.
+      if (AppState.currentState === 'background') {return;}
       if (client.suppressReconnect) {return;}
       if (client.status !== 'online') {
         devPushLog('rn', `watchdog: client ${client.status} → forceReconnect`);
@@ -770,6 +777,12 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       }}
     >
       {children}
+      {/* Lives here, not inside <Chat>: an incoming call-token can arrive
+          (and must still ring) while the user is on a different screen of
+          the host app, as long as the socket is up. VideoCallOverlay reads
+          config and call state from Redux itself, so it needs nothing
+          passed in, and renders null whenever no call is in flight. */}
+      <VideoCallOverlay />
     </XmppContext.Provider>
   );
 };