@ethora/chat-component-rn 26.5.4 → 26.5.7

package/src/components/styled/MediaFilePreview.tsx

@@ -1,12 +1,13 @@
-import { View } from 'react-native';
+import { View, Text, StyleSheet, Modal, TouchableOpacity, SafeAreaView } from 'react-native';
 import {
   MediaContainer,
   MediaImage,
 } from './StyledInputComponents/StyledInputComponents';
 import { FileIcon } from '../../assets/icons';
 import { RemoveButton, RemoveButtonText } from './StyledComponents';
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { MediaFile } from '../../types/types';
+import { Video, ResizeMode } from 'expo-av';
 
 interface MediaFilePreviewProps {
   filePreviews: MediaFile[];
@@ -17,15 +18,34 @@ export const MediaFilePreview: FC<MediaFilePreviewProps> = ({
   filePreviews,
   handleRemoveImage,
 }) => {
+  const [previewUri, setPreviewUri] = useState<string | null>(null);
+
   return (
     <MediaContainer>
       {filePreviews.map((file, index) => {
-        const isImageOrVideo =
-          file.type?.startsWith('image') || file.type?.startsWith('video');
+        const isImage = file.type?.startsWith('image');
+        const isVideo = file.type?.startsWith('video');
         return (
           <View key={`${file.name}_${index}`}>
-            {isImageOrVideo ? (
+            {isImage ? (
               <MediaImage source={{ uri: file.uri }} />
+            ) : isVideo ? (
+              <TouchableOpacity
+                activeOpacity={0.8}
+                onPress={() => setPreviewUri(file.uri)}
+                style={styles.videoThumb}
+              >
+                <Video
+                  source={{ uri: file.uri }}
+                  style={StyleSheet.absoluteFill}
+                  resizeMode={ResizeMode.COVER}
+                  shouldPlay={false}
+                  isMuted
+                />
+                <View style={styles.playOverlay}>
+                  <Text style={styles.playIcon}>▶</Text>
+                </View>
+              </TouchableOpacity>
             ) : (
               <View style={{ width: 70, height: 70, borderRadius: 8 }}>
                 <FileIcon width={70} height={70} />
@@ -37,6 +57,72 @@ export const MediaFilePreview: FC<MediaFilePreviewProps> = ({
           </View>
         );
       })}
+
+      <Modal visible={!!previewUri} animationType="fade" transparent>
+        <SafeAreaView style={styles.modalContainer}>
+          <TouchableOpacity
+            style={styles.closeButton}
+            onPress={() => setPreviewUri(null)}
+          >
+            <Text style={styles.closeText}>✕</Text>
+          </TouchableOpacity>
+          {previewUri && (
+            <Video
+              source={{ uri: previewUri }}
+              style={styles.fullVideo}
+              resizeMode={ResizeMode.CONTAIN}
+              useNativeControls
+              shouldPlay
+            />
+          )}
+        </SafeAreaView>
+      </Modal>
     </MediaContainer>
   );
 };
+
+const styles = StyleSheet.create({
+  videoThumb: {
+    width: 70,
+    height: 70,
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#1a1a1a',
+  },
+  playOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.3)',
+  },
+  playIcon: {
+    fontSize: 24,
+    color: '#fff',
+  },
+  modalContainer: {
+    flex: 1,
+    backgroundColor: '#000',
+    justifyContent: 'center',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 60,
+    right: 20,
+    zIndex: 10,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  closeText: {
+    fontSize: 18,
+    color: '#fff',
+    fontWeight: '600',
+  },
+  fullVideo: {
+    width: '100%',
+    height: '70%',
+  },
+});

package/src/components/styled/MessageImage.tsx

@@ -38,8 +38,7 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
             'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg'
           }
           style={{
-            borderRadius: 16,
-            width: 150,
+            width: 250,
             height: 200,
           }}
           onError={() => setError(true)}

package/src/components/styled/SendInput.tsx

@@ -117,6 +117,7 @@ const SendInput: React.FC<SendInputProps> = ({
       const result = await ImagePicker.launchCameraAsync({
         mediaTypes: ['images', 'videos'],
         quality: 0.9,
+        videoQuality: ImagePicker.UIImagePickerControllerQualityType.Medium,
       });
       if (result.canceled || !result.assets?.[0]) {return;}
       const asset = result.assets[0];
@@ -151,6 +152,8 @@ const SendInput: React.FC<SendInputProps> = ({
         mediaTypes: ['images', 'videos'],
         allowsEditing: false,
         quality: 0.9,
+        preferredAssetRepresentationMode:
+          ImagePicker.UIImagePickerPreferredAssetRepresentationMode.Compatible,
       });
       if (result.canceled || !result.assets?.[0]) {return;}
       const asset = result.assets[0];

package/src/components/styled/VideoMessage.tsx

@@ -27,7 +27,7 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
   };
 
   return (
-    <TouchableOpacity style={styles.container} onPress={handleOpen}>
+    <TouchableOpacity onPress={handleOpen}>
       <Video
         source={{ uri: fileURL }}
         style={styles.video}
@@ -42,16 +42,9 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
 export default CustomMessageVideo;
 
 const styles = StyleSheet.create({
-  container: {
-    margin: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-  },
   video: {
-    width: 300,
-    height: 200,
-    borderRadius: 10,
+    width: '100%',
+    aspectRatio: 16 / 9,
     backgroundColor: '#000',
   },
 });

package/src/context/xmppProvider.tsx

@@ -4,11 +4,15 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
 import { AppState, DeviceEventEmitter } from 'react-native';
-import XmppClient from '../networking/xmppClient';
+import XmppClient, {
+  XmppCredentialsProvider,
+} from '../networking/xmppClient';
+import { refreshTokens } from '../roomStore/chatSettingsSlice';
 import {
   IConfig,
   ProviderBootstrapStatus,
@@ -24,6 +28,7 @@ import {
 } from '../utils/clientRegistry';
 import {
   applyResolvedUserToStore,
+  refreshUserCredentialsForXmpp,
   resolveInitBeforeLoadUser,
 } from '../helpers/resolveInitBeforeLoadUser';
 import { ensureScopedChatCache } from '../helpers/ensureScopedChatCache';
@@ -77,6 +82,79 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
   const completedBootstrapKeyRef = useRef<string>('');
   const inflightBootstrapKeyRef = useRef<string>('');
 
+  // Callback XmppClient uses to fetch fresh credentials after a SASL
+  // `not-authorized` (typically JWT expiry during idle, bug #17).
+  // Always installed — the underlying `refreshUserCredentialsForXmpp`
+  // picks the right path based on config:
+  //   - `jwtLogin` → re-exchange JWT via `/users/client`
+  //   - `userLogin` / `customLogin` / store / persisted → `/users/my`
+  //     with REST refresh chain (handles 401 → refresh → retry)
+  // Returns last-known cached creds if nothing usable is available so
+  // the XmppClient at least doesn't crash on `undefined.password`.
+  const credentialsProvider = useMemo<XmppCredentialsProvider>(() => {
+    return async () => {
+      // 1. Consumer-supplied REST refresh (when wired). This runs
+      //    before the SDK's own refresh chain so non-Ethora backends
+      //    can keep auth state in sync with their own token endpoint.
+      const customRefresh = config?.refreshTokens?.refreshFunction;
+      if (customRefresh) {
+        try {
+          const result = await customRefresh();
+          if (result?.accessToken) {
+            store.dispatch(
+              refreshTokens({
+                token: result.accessToken,
+                refreshToken: result.refreshToken || '',
+              })
+            );
+          }
+        } catch (err) {
+          devPushLog('warn', 'XMPP creds refresh: customRefresh failed', err);
+        }
+      }
+
+      // 2. Re-mint XMPP creds via the right priority chain for the
+      //    current auth mode. This call ALWAYS hydrates (unlike
+      //    `resolveInitBeforeLoadUser` which short-circuits when a
+      //    cached user already has xmppCredentials).
+      const fresh = await refreshUserCredentialsForXmpp(config).catch(
+        (err) => {
+          devPushLog('warn', 'XMPP creds refresh: full chain failed', err);
+          return null;
+        }
+      );
+      if (fresh) {
+        applyResolvedUserToStore(fresh);
+        return {
+          username:
+            fresh.xmppUsername ||
+            fresh.defaultWallet?.walletAddress ||
+            '',
+          password: fresh.xmppPassword || '',
+        };
+      }
+
+      // 3. Last-resort: return the cached creds so reconnect() can
+      //    still attempt a connection. If the original failure was
+      //    a stale JWT this will fail again and the user has to
+      //    re-mount the chat — but at least we don't break the
+      //    transient-network-blip case where the cached creds are
+      //    still valid.
+      const u = store.getState().chatSettingStore.user;
+      return {
+        username: u?.xmppUsername || u?.defaultWallet?.walletAddress || '',
+        password: u?.xmppPassword || '',
+      };
+    };
+  }, [
+    config?.jwtLogin?.enabled,
+    config?.jwtLogin?.token,
+    config?.refreshTokens?.refreshFunction,
+    config?.userLogin?.enabled,
+    config?.customLogin?.enabled,
+    config?.initBeforeLoadAuth?.myEndpoint,
+  ]);
+
   const initializeClient = useCallback(
     async (
       username: string,
@@ -104,6 +182,12 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
       //    concurrent calls for the same key.
       const created = await withXmppClientInitLock(key, async () => {
         const newClient = new XmppClient(username, password, settings);
+        // Wire up the credentialsProvider so SASL `not-authorized`
+        // after idle triggers a refresh chain (jwtLogin →
+        // /users/client; userLogin/customLogin/store → /users/my +
+        // REST refresh) instead of looping forever with stale creds.
+        // Bug #17 — full coverage in 26.5.6.
+        newClient.setCredentialsProvider(credentialsProvider);
         setGlobalXmppClient(newClient, key);
         await newClient.waitForOnline().catch((err) => {
           console.error('Error waiting for xmpp online:', err);
@@ -112,12 +196,16 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
         return newClient;
       });
 
+      // Reused clients (steps 1+2 above) also need the provider — config
+      // may have changed since the singleton was created.
+      created.setCredentialsProvider(credentialsProvider);
+
       setClient(created);
       lastCredsRef.current = { username, password, settings };
       setReconnectAttempts(0);
       return created;
     },
-    [client, config?.xmppSettings]
+    [client, config?.xmppSettings, credentialsProvider]
   );
 
   // -----------------------------------------------------------

package/src/helpers/mimeToExtension.ts

@@ -0,0 +1,135 @@
+// MIME → file extension table for download/preview filename fallbacks.
+// Centralized so FilePreviewModal, MediaMessage, and any future media
+// surface share one source of truth. Keep additions sorted by category.
+
+const MIME_TO_EXT: Record<string, string> = {
+  // images
+  'image/jpeg': '.jpg',
+  'image/jpg': '.jpg',
+  'image/png': '.png',
+  'image/gif': '.gif',
+  'image/webp': '.webp',
+  'image/heic': '.heic',
+  'image/heif': '.heif',
+  'image/bmp': '.bmp',
+  'image/svg+xml': '.svg',
+  'image/tiff': '.tiff',
+
+  // video
+  'video/mp4': '.mp4',
+  'video/quicktime': '.mov',
+  'video/x-m4v': '.m4v',
+  'video/webm': '.webm',
+  'video/3gpp': '.3gp',
+  'video/x-matroska': '.mkv',
+  'video/mpeg': '.mpeg',
+
+  // audio
+  'audio/mpeg': '.mp3',
+  'audio/mp3': '.mp3',
+  'audio/mp4': '.m4a',
+  'audio/x-m4a': '.m4a',
+  'audio/wav': '.wav',
+  'audio/x-wav': '.wav',
+  'audio/aac': '.aac',
+  'audio/ogg': '.ogg',
+  'audio/flac': '.flac',
+  'audio/webm': '.weba',
+
+  // documents
+  'application/pdf': '.pdf',
+  'application/msword': '.doc',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+    '.docx',
+  'application/vnd.ms-excel': '.xls',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': '.xlsx',
+  'application/vnd.ms-powerpoint': '.ppt',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+    '.pptx',
+  'text/plain': '.txt',
+  'text/csv': '.csv',
+  'text/html': '.html',
+  'application/json': '.json',
+  'application/xml': '.xml',
+  'text/xml': '.xml',
+  'application/rtf': '.rtf',
+
+  // archives
+  'application/zip': '.zip',
+  'application/x-rar-compressed': '.rar',
+  'application/x-7z-compressed': '.7z',
+  'application/gzip': '.gz',
+  'application/x-tar': '.tar',
+};
+
+const VALID_EXT_RE = /\.[a-z0-9]{1,8}$/i;
+
+/**
+ * Returns the conventional extension (including the leading dot) for a
+ * MIME type, or `.bin` as a last-resort fallback so callers never end up
+ * with an extension-less filename.
+ */
+export function getExtensionForMime(mime: string | undefined | null): string {
+  if (!mime) {return '.bin';}
+  const normalized = mime.toLowerCase().split(';')[0]!.trim();
+  return MIME_TO_EXT[normalized] || '.bin';
+}
+
+/**
+ * Parses a URL or file path and returns the last segment, URL-decoded,
+ * stripped of query/hash. Returns `''` when nothing usable is present.
+ */
+export function filenameFromUrl(url: string | undefined | null): string {
+  if (!url) {return '';}
+  try {
+    // Strip query + hash without depending on a real URL parser (some RN
+    // URLs from CDNs do not parse cleanly).
+    const noQuery = url.split('?')[0]!.split('#')[0]!;
+    const last = noQuery.split('/').pop() || '';
+    return decodeURIComponent(last);
+  } catch {
+    return '';
+  }
+}
+
+/**
+ * Ensures `fileName` ends with a valid extension. Strategy:
+ *   1. If the input already has an extension, return it unchanged.
+ *   2. Otherwise, derive the extension from `mime` and append it.
+ *   3. If `mime` is unknown, append `.bin`.
+ *
+ * Empty/falsy filenames get a `media_<timestamp>` base before the
+ * extension is appended so callers always get a usable filename.
+ */
+export function ensureFilenameHasExtension(
+  fileName: string | undefined | null,
+  mime: string | undefined | null
+): string {
+  const base =
+    (fileName && fileName.trim()) || `media_${Date.now()}`;
+  if (VALID_EXT_RE.test(base)) {return base;}
+  return `${base}${getExtensionForMime(mime)}`;
+}
+
+/**
+ * Best-effort filename derivation for a message bubble:
+ *   - server-provided `fileName`
+ *   - server-provided `originalName`
+ *   - URL pathname
+ *   - generic `media_<timestamp>` so we never render an empty label
+ *
+ * Always returns a string with a valid extension.
+ */
+export function deriveDisplayFilename(opts: {
+  fileName?: string | null;
+  originalName?: string | null;
+  url?: string | null;
+  mime?: string | null;
+}): string {
+  const candidate =
+    (opts.fileName && opts.fileName.trim()) ||
+    (opts.originalName && opts.originalName.trim()) ||
+    filenameFromUrl(opts.url) ||
+    '';
+  return ensureFilenameHasExtension(candidate, opts.mime);
+}

package/src/helpers/resolveInitBeforeLoadUser.ts

@@ -237,4 +237,83 @@ export const applyResolvedUserToStore = (user?: User | null) => {
   store.dispatch(setUser(user));
 };
 
+/**
+ * Re-mints a User with a fresh xmppPassword for the XMPP credentials-
+ * provider path (bug #17). Unlike `resolveInitBeforeLoadUser` this
+ * ALWAYS hydrates via the chosen auth path even if the cached user
+ * already had xmppCredentials — that's the whole point, the old ones
+ * are stale.
+ *
+ * Selection order:
+ *   1. `jwtLogin` — re-exchange the JWT via `/users/client`.
+ *   2. Anything else (`userLogin` / `customLogin` / store / persisted)
+ *      — `tryHydrateViaMy` on the current user, which calls
+ *      `/users/my` and, on 401, refreshes the access token via
+ *      `/users/login/refresh` and retries.
+ *
+ * Returns `null` only when nothing usable is available — the caller
+ * (xmppProvider) falls back to the cached creds in that case.
+ */
+export const refreshUserCredentialsForXmpp = async (
+  config?: IConfig,
+  signal?: AbortSignal
+): Promise<User | null> => {
+  if (signal?.aborted) {return null;}
+
+  // Priority 1: jwtLogin — same path as `resolveInitBeforeLoadUser`
+  // priority 3. We always re-exchange because the original JWT may
+  // itself have expired (and the consumer is expected to swap
+  // `config.jwtLogin.token` for a fresh one before then).
+  if (config?.jwtLogin?.enabled && config?.jwtLogin?.token) {
+    try {
+      const fresh = await loginViaJwt(config.jwtLogin.token);
+      const normalized = normalizeUserForXmpp(fresh);
+      if (normalized && hasXmppCredentials(normalized)) {return normalized;}
+    } catch (error) {
+      if (signal?.aborted || isAbortError(error)) {return null;}
+      // fall through to /users/my path
+    }
+  }
+
+  const myEndpoint = config?.initBeforeLoadAuth?.myEndpoint || '/users/my';
+
+  // Priority 2: redux store user (covers userLogin + customLogin +
+  // anything previously persisted into chatSettingStore.user). The
+  // user must have at least a refreshToken for the refresh chain to
+  // produce something useful.
+  const currentUser = store.getState().chatSettingStore.user;
+  if (currentUser?.token || currentUser?.refreshToken) {
+    const hydrated = await tryHydrateViaMy(
+      currentUser as User,
+      myEndpoint,
+      signal
+    ).catch(() => null);
+    if (hydrated && hasXmppCredentials(hydrated)) {return hydrated;}
+  }
+
+  // Priority 3: persisted user in AsyncStorage — defensive; the store
+  // should already mirror this, but if the redux state got cleared
+  // mid-session (logout race) this gives us one last shot.
+  try {
+    const storedUser = await asyncLocalStorage<User>(
+      localStorageConstants.ETHORA_USER
+    ).get();
+    if (
+      storedUser &&
+      (storedUser.token || storedUser.refreshToken || storedUser.xmppPassword)
+    ) {
+      const hydrated = await tryHydrateViaMy(
+        storedUser,
+        myEndpoint,
+        signal
+      ).catch(() => null);
+      if (hydrated && hasXmppCredentials(hydrated)) {return hydrated;}
+    }
+  } catch {
+    // ignore storage errors
+  }
+
+  return null;
+};
+
 export default resolveInitBeforeLoadUser;

package/src/hooks/useChatWrapperInit.ts

@@ -119,10 +119,8 @@ const useChatWrapperInit = ({
                 user.xmppUsername || user?.defaultWallet?.walletAddress,
                 user?.xmppPassword,
                 config?.xmppSettings
-              ).then((client) => {
-                console.log(' Client initialized', client?.status);
-                return client;
-              });
+              );
+              console.log(' Client initialized', newClient?.status);
 
               if (roomsList && Object.keys(roomsList).length > 0) {
                 console.log(
@@ -156,27 +154,29 @@ const useChatWrapperInit = ({
                   await newClient.getRoomsStanza();
                 }
               }
-              await newClient
-                .getChatsPrivateStoreRequestStanza()
-                .then(
-                  async (
-                    roomTimestampObject: any
-                  ) => {
-                    console.log(
-                      'Got chats private store',
-                      roomTimestampObject?.length || 0
-                    );
-                    updatedChatLastTimestamps(roomTimestampObject, dispatch);
-                    if (!hasSyncedHistoryRef.current) {
-                      console.log('Updating messages till last');
-                      await updateMessagesTillLast(rooms, newClient);
-                      hasSyncedHistoryRef.current = true;
-                    }
-                    setClient(newClient);
-                    setConnectionLost(false);
-                    console.log('Initialization complete');
-                  }
+              try {
+                const roomTimestampObject: any =
+                  await newClient.getChatsPrivateStoreRequestStanza();
+                console.log(
+                  'Got chats private store',
+                  roomTimestampObject?.length || 0
                 );
+                if (roomTimestampObject) {
+                  updatedChatLastTimestamps(roomTimestampObject, dispatch);
+                }
+                if (!hasSyncedHistoryRef.current) {
+                  console.log('Updating messages till last');
+                  await updateMessagesTillLast(rooms, newClient);
+                  hasSyncedHistoryRef.current = true;
+                }
+                setClient(newClient);
+                setConnectionLost(false);
+                console.log('Initialization complete');
+              } catch (err) {
+                console.warn('privateStore/timestamps failed', err);
+                setClient(newClient);
+                setConnectionLost(false);
+              }
 
               {
                 config?.refreshTokens?.enabled && refresh();
@@ -204,29 +204,34 @@ const useChatWrapperInit = ({
             }
             setInited(true);
             console.log(' Getting chats private store for existing client');
-            await client
-              .getChatsPrivateStoreRequestStanza()
-              .then(
-                async (
-                  roomTimestampObject: any
-                ) => {
-                  console.log(
-                    'Got chats private store for existing client',
-                    roomTimestampObject?.length || 0
-                  );
-                  updatedChatLastTimestamps(roomTimestampObject, dispatch);
-                  if (!hasSyncedHistoryRef.current) {
-                    console.log(
-                      'Updating messages till last for existing client'
-                    );
-                    await updateMessagesTillLast(rooms, client);
-                    hasSyncedHistoryRef.current = true;
-                  }
-                  setClient(client);
-                  setConnectionLost(false);
-                  console.log(' Initialization complete for existing client');
-                }
+            try {
+              const roomTimestampObject: any =
+                await client.getChatsPrivateStoreRequestStanza();
+              console.log(
+                'Got chats private store for existing client',
+                roomTimestampObject?.length || 0
               );
+              if (roomTimestampObject) {
+                updatedChatLastTimestamps(roomTimestampObject, dispatch);
+              }
+              if (!hasSyncedHistoryRef.current) {
+                console.log(
+                  'Updating messages till last for existing client'
+                );
+                await updateMessagesTillLast(rooms, client);
+                hasSyncedHistoryRef.current = true;
+              }
+              setClient(client);
+              setConnectionLost(false);
+              console.log(' Initialization complete for existing client');
+            } catch (err) {
+              console.warn(
+                'privateStore/timestamps failed (existing client)',
+                err
+              );
+              setClient(client);
+              setConnectionLost(false);
+            }
             {
               config?.refreshTokens?.enabled && refresh();
             }