stream-chat-react-native-core 9.0.0-beta.12 → 9.0.0-beta.14

package/src/components/Reply/Reply.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Image, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native';
+import { I18nManager, Image, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native';
 
 import {
   isFileAttachment,
@@ -251,6 +251,7 @@ const useStyles = () => {
   const { client } = useChatContext();
 
   const isMyMessage = client.user?.id === quotedMessageFromComposer?.user?.id;
+  const isRTL = I18nManager.isRTL;
 
   return useMemo(
     () =>
@@ -262,7 +263,7 @@ const useStyles = () => {
         },
         container: {
           borderRadius: primitives.radiusLg,
-          flexDirection: 'row',
+          flexDirection: isRTL ? 'row-reverse' : 'row',
           padding: primitives.spacingXs,
           backgroundColor: isMyMessage ? semantics.chatBgOutgoing : semantics.chatBgIncoming,
         },
@@ -282,14 +283,24 @@ const useStyles = () => {
           top: 0,
         },
         leftContainer: {
-          borderLeftWidth: 2,
           flex: 1,
           justifyContent: 'center',
           paddingHorizontal: primitives.spacingXs,
-          borderLeftColor: isMyMessage
-            ? semantics.chatReplyIndicatorOutgoing
-            : semantics.chatReplyIndicatorIncoming,
           gap: primitives.spacingXxxs,
+          alignItems: 'flex-start',
+          ...(isRTL
+            ? {
+                borderRightColor: isMyMessage
+                  ? semantics.chatReplyIndicatorOutgoing
+                  : semantics.chatReplyIndicatorIncoming,
+                borderRightWidth: 2,
+              }
+            : {
+                borderLeftColor: isMyMessage
+                  ? semantics.chatReplyIndicatorOutgoing
+                  : semantics.chatReplyIndicatorIncoming,
+                borderLeftWidth: 2,
+              }),
         },
         rightContainer: {},
         title: {
@@ -298,11 +309,12 @@ const useStyles = () => {
           fontWeight: primitives.typographyFontWeightSemiBold,
           includeFontPadding: false,
           lineHeight: primitives.typographyLineHeightTight,
+          textAlign: isRTL ? 'right' : 'left',
         },
         wrapper: {
           padding: primitives.spacingXxs,
         },
       }),
-    [isMyMessage, semantics],
+    [isMyMessage, isRTL, semantics],
   );
 };

package/src/components/Reply/ReplyMessageView.tsx

@@ -50,6 +50,7 @@ const useStyles = ({ isMyMessage = false }: { isMyMessage?: boolean }) => {
         alignItems: 'center',
         gap: primitives.spacingXxs,
         flexShrink: 1,
+        alignSelf: 'flex-start',
         ...messagePreview.container,
       },
       subtitle: {

package/src/components/ThreadList/ThreadListItem.tsx

@@ -260,6 +260,7 @@ const useStyles = () => {
           fontSize: primitives.typographyFontSizeSm,
           fontWeight: primitives.typographyFontWeightSemiBold,
           lineHeight: primitives.typographyLineHeightNormal,
+          textAlign: 'left',
           ...threadListItem.channelName,
         },
         content: {

package/src/components/UIComponents/SwipableWrapper.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useEffect, useMemo, useRef } from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { I18nManager, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { Pressable } from 'react-native-gesture-handler';
 import Animated, {
@@ -42,6 +42,8 @@ export type SwipableWrapperProps = PropsWithChildren<{
   swipableProps?: SwipeableProps;
 }>;
 
+type ActionSide = 'left' | 'right';
+
 export const getRightActionsLayout = (itemCount: number) => {
   if (!itemCount) {
     return { containerWidth: 0, itemWidth: 0 };
@@ -55,19 +57,27 @@ export const getRightActionsLayout = (itemCount: number) => {
 
 export const RightActions = ({
   items,
+  side,
   translation,
 }: {
   items: SwipableActionItem[];
+  side?: ActionSide;
   translation: SharedValue<number>;
 }) => {
+  const resolvedSide = side ?? (I18nManager.isRTL ? 'left' : 'right');
   const { containerWidth, itemWidth } = useMemo(
     () => getRightActionsLayout(items.length),
     [items.length],
   );
+  const actionItems = useMemo(
+    () => (resolvedSide === 'left' ? [...items].reverse() : items),
+    [items, resolvedSide],
+  );
+  const translationDirection = resolvedSide === 'right' ? -1 : 1;
 
   const animatedActionWidthStyle = useAnimatedStyle(() => ({
     width: interpolate(
-      -translation.value,
+      translationDirection * translation.value,
       [0, containerWidth, containerWidth + 40],
       [0, itemWidth, itemWidth + 8],
       Extrapolation.CLAMP,
@@ -78,7 +88,7 @@ export const RightActions = ({
     transform: [
       {
         scale: interpolate(
-          -translation.value,
+          translationDirection * translation.value,
           [0, containerWidth, containerWidth + 40],
           [0, 1, 1],
           Extrapolation.CLAMP,
@@ -88,8 +98,13 @@ export const RightActions = ({
   }));
 
   return (
-    <Animated.View style={[styles.rightActionsContainer, { width: containerWidth }]}>
-      {items.map((item) => {
+    <Animated.View
+      style={[
+        resolvedSide === 'left' ? styles.leftActionsContainer : styles.rightActionsContainer,
+        { width: containerWidth },
+      ]}
+    >
+      {actionItems.map((item) => {
         const Content = item.Content;
         return (
           <AnimatedPressable
@@ -110,6 +125,7 @@ export const RightActions = ({
 };
 
 export const SwipableWrapper = ({ children, swipeableId, swipableProps }: SwipableWrapperProps) => {
+  const isRTL = I18nManager.isRTL;
   const swipeRegistry = useSwipeRegistryContext();
   const swipeableRef = useRef<SwipeableMethods | null>(null);
 
@@ -128,28 +144,43 @@ export const SwipableWrapper = ({ children, swipeableId, swipableProps }: Swipab
       if (swipeRegistry && swipeableId) {
         swipeRegistry.notifyWillOpen(swipeableId);
       }
-      swipableProps?.onSwipeableWillOpen?.(direction);
+
+      swipableProps?.onSwipeableOpenStartDrag?.(direction);
     },
   );
 
-  const onSwipeableWillClose = useStableCallback(() => {
-    if (swipeableId) {
-      swipeRegistry?.updateOpenTracker(swipeableId, false);
-    }
-  });
+  const onSwipeableWillClose = useStableCallback(
+    (direction: SwipeDirection.LEFT | SwipeDirection.RIGHT) => {
+      if (swipeableId) {
+        swipeRegistry?.updateOpenTracker(swipeableId, false);
+      }
+
+      swipableProps?.onSwipeableWillClose?.(direction);
+    },
+  );
+
+  const rtlAwareSwipeableProps = useMemo<SwipeableProps>(() => {
+    const { overshootLeft, overshootRight, renderLeftActions, renderRightActions, ...rest } =
+      swipableProps ?? {};
+
+    return {
+      ...rest,
+      overshootLeft: isRTL ? (overshootRight ?? true) : (overshootLeft ?? false),
+      overshootRight: isRTL ? (overshootLeft ?? false) : (overshootRight ?? true),
+      renderLeftActions: isRTL ? renderRightActions : renderLeftActions,
+      renderRightActions: isRTL ? renderLeftActions : renderRightActions,
+    };
+  }, [isRTL, swipableProps]);
 
   return (
     <ReanimatedSwipeable
       ref={swipeableRef}
-      onSwipeableOpenStartDrag={onSwipeableOpenStartDrag}
       animationOptions={animationOptions}
       friction={1.5}
+      onSwipeableOpenStartDrag={onSwipeableOpenStartDrag}
       onSwipeableWillClose={onSwipeableWillClose}
-      overshootLeft={false}
-      overshootRight={true}
       overshootFriction={16}
-      renderLeftActions={undefined}
-      {...swipableProps}
+      {...rtlAwareSwipeableProps}
     >
       {children}
     </ReanimatedSwipeable>
@@ -157,7 +188,14 @@ export const SwipableWrapper = ({ children, swipeableId, swipableProps }: Swipab
 };
 
 const styles = StyleSheet.create({
+  leftActionsContainer: {
+    direction: 'ltr',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    overflow: 'visible',
+  },
   rightActionsContainer: {
+    direction: 'ltr',
     flexDirection: 'row',
     justifyContent: 'flex-end',
     overflow: 'visible',

package/src/components/UIComponents/__tests__/SwipableWrapper.test.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { I18nManager, Text, View } from 'react-native';
+
+import { render } from '@testing-library/react-native';
+
+import { SwipeRegistryProvider } from '../../../contexts/swipeableContext/SwipeRegistryContext';
+import { SwipableWrapper } from '../SwipableWrapper';
+
+const mockReanimatedSwipeable = jest.fn(({ children }: React.PropsWithChildren) => (
+  <View>{children}</View>
+));
+
+jest.mock('react-native-gesture-handler/ReanimatedSwipeable', () => ({
+  __esModule: true,
+  default: (...args: unknown[]) => mockReanimatedSwipeable(...args),
+  SwipeDirection: {
+    LEFT: 'left',
+    RIGHT: 'right',
+  },
+}));
+
+describe('SwipableWrapper', () => {
+  const originalIsRTL = I18nManager.isRTL;
+
+  const setRTL = (value: boolean) => {
+    Object.defineProperty(I18nManager, 'isRTL', {
+      configurable: true,
+      value,
+    });
+  };
+
+  const renderWithRegistry = (ui: React.ReactElement) =>
+    render(<SwipeRegistryProvider>{ui}</SwipeRegistryProvider>);
+
+  beforeEach(() => {
+    mockReanimatedSwipeable.mockClear();
+  });
+
+  afterEach(() => {
+    setRTL(originalIsRTL);
+  });
+
+  it('uses right-side overshoot defaults in ltr', () => {
+    setRTL(false);
+
+    renderWithRegistry(
+      <SwipableWrapper>
+        <Text>child</Text>
+      </SwipableWrapper>,
+    );
+
+    expect(mockReanimatedSwipeable).toHaveBeenCalledWith(
+      expect.objectContaining({
+        overshootLeft: false,
+        overshootRight: true,
+      }),
+      undefined,
+    );
+  });
+
+  it('uses left-side overshoot defaults in rtl', () => {
+    setRTL(true);
+
+    renderWithRegistry(
+      <SwipableWrapper>
+        <Text>child</Text>
+      </SwipableWrapper>,
+    );
+
+    expect(mockReanimatedSwipeable).toHaveBeenCalledWith(
+      expect.objectContaining({
+        overshootLeft: true,
+        overshootRight: false,
+      }),
+      undefined,
+    );
+  });
+
+  it('maps logical right actions to left actions in rtl', () => {
+    setRTL(true);
+
+    const renderRightActions = jest.fn(() => null);
+
+    renderWithRegistry(
+      <SwipableWrapper swipableProps={{ renderRightActions }}>
+        <Text>child</Text>
+      </SwipableWrapper>,
+    );
+
+    expect(mockReanimatedSwipeable).toHaveBeenCalledWith(
+      expect.objectContaining({
+        renderLeftActions: renderRightActions,
+        renderRightActions: undefined,
+      }),
+      undefined,
+    );
+  });
+});

package/src/components/ui/Input/Input.tsx

@@ -166,12 +166,14 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeMd,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       description: {
         color: semantics.textTertiary,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       inputContainer: {
         alignItems: 'center',
@@ -190,6 +192,7 @@ const useStyles = () => {
         fontWeight: primitives.typographyFontWeightRegular,
         color: semantics.inputTextDefault,
         paddingVertical: 0, // android is adding extra padding so we remove it
+        textAlign: I18nManager.isRTL ? 'right' : 'left',
       },
       helperContainer: {
         alignItems: 'center',
@@ -201,6 +204,7 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
     });
   }, [semantics]);

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -56,6 +56,7 @@ import { useStableCallback } from '../../hooks/useStableCallback';
 import {
   createAttachmentsCompositionMiddleware,
   createDraftAttachmentsCompositionMiddleware,
+  setupVideoAttachmentPreviewMiddleware,
 } from '../../middlewares/attachments';
 
 import { isDocumentPickerAvailable, MediaTypes, NativeHandlers } from '../../native';
@@ -424,6 +425,8 @@ export const MessageInputProvider = ({
       attachmentManager.setCustomUploadFn(value.doFileUploadRequest);
     }
 
+    setupVideoAttachmentPreviewMiddleware(messageComposer);
+
     if (allowSendBeforeAttachmentsUpload) {
       messageComposer.compositionMiddlewareExecutor.replace([
         createAttachmentsCompositionMiddleware(messageComposer),

package/src/contexts/overlayContext/MessageOverlayHostLayer.tsx

@@ -1,5 +1,12 @@
 import React, { useEffect, useMemo } from 'react';
-import { Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native';
+import {
+  I18nManager,
+  Platform,
+  Pressable,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   clamp,
@@ -151,12 +158,13 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
 
   const topItemStyle = useAnimatedStyle(() => {
     if (!topH.value) return { height: 0 };
+    const horizontalPosition = I18nManager.isRTL ? { right: topH.value.x } : { left: topH.value.x };
     return {
       height: topH.value.h,
-      left: topH.value.x,
       position: 'absolute',
       top: topH.value.y,
       width: topH.value.w,
+      ...horizontalPosition,
     };
   });
 
@@ -172,12 +180,15 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
 
   const bottomItemStyle = useAnimatedStyle(() => {
     if (!bottomH.value) return { height: 0 };
+    const horizontalPosition = I18nManager.isRTL
+      ? { right: bottomH.value.x }
+      : { left: bottomH.value.x };
     return {
       height: bottomH.value.h,
-      left: bottomH.value.x,
       position: 'absolute',
       top: bottomH.value.y,
       width: bottomH.value.w,
+      ...horizontalPosition,
     };
   });
 

package/src/index.ts

@@ -16,6 +16,7 @@ export * from './types/types';
 export * from './utils/patchMessageTextCommand';
 export * from './utils/i18n/Streami18n';
 export * from './utils/setupCommandUIMiddlewares';
+export * from './utils/createGenerateVideoThumbnails';
 export * from './utils/utils';
 
 export { default as enTranslations } from './i18n/en.json';

package/src/middlewares/attachments.ts

@@ -1,7 +1,9 @@
 import {
   Attachment,
+  AttachmentPreUploadMiddleware,
   FileReference,
   isLocalImageAttachment,
+  isLocalVideoAttachment,
   LocalAttachment,
   MessageComposer,
   MessageComposerMiddlewareState,
@@ -100,3 +102,35 @@ export const createDraftAttachmentsCompositionMiddleware = (
   },
   id: 'stream-io/message-composer-middleware/draft-attachments',
 });
+
+const createVideoAttachmentPreviewMiddleware = (): AttachmentPreUploadMiddleware => ({
+  id: 'stream-io/message-composer-ui-middleware/video-attachment-preview',
+  handlers: {
+    prepare: ({ next, forward, state }) => {
+      const { attachment } = state;
+
+      if (!attachment || !isLocalVideoAttachment(attachment)) {
+        return forward();
+      }
+
+      return next({
+        ...state,
+        attachment: {
+          ...attachment,
+          localMetadata: {
+            ...attachment.localMetadata,
+            previewUri: attachment.thumb_url,
+          },
+        },
+      });
+    },
+  },
+});
+
+export const setupVideoAttachmentPreviewMiddleware = (messageComposer: MessageComposer) => {
+  messageComposer.attachmentManager.preUploadMiddlewareExecutor.insert({
+    middleware: [createVideoAttachmentPreviewMiddleware()],
+    position: { after: 'stream-io/attachment-manager-middleware/file-upload-config-check' },
+    unique: true,
+  });
+};

package/src/utils/createGenerateVideoThumbnails.ts

@@ -0,0 +1,45 @@
+export type GenerateVideoThumbnailResult = {
+  error?: string | null;
+  uri?: string | null;
+};
+
+export const createGenerateVideoThumbnails = ({
+  createVideoThumbnails,
+}: {
+  createVideoThumbnails: (uris: string[]) => Promise<GenerateVideoThumbnailResult[]>;
+}) => {
+  return async (uris: string[]): Promise<Record<string, GenerateVideoThumbnailResult>> => {
+    if (!uris.length) {
+      return {};
+    }
+
+    const uniqueUris: string[] = [];
+    const seenUris = new Set<string>();
+
+    uris.forEach((uri) => {
+      if (!seenUris.has(uri)) {
+        seenUris.add(uri);
+        uniqueUris.push(uri);
+      }
+    });
+
+    const uniqueResults = await createVideoThumbnails(uniqueUris);
+
+    return uniqueUris.reduce<Record<string, GenerateVideoThumbnailResult>>(
+      (resultMap, uri, index) => {
+        const result = uniqueResults[index] ?? {
+          error: 'Thumbnail generation returned no result',
+          uri: null,
+        };
+
+        if (result.error) {
+          console.warn(`Failed to generate thumbnail for ${uri}: ${result.error}`);
+        }
+
+        resultMap[uri] = result;
+        return resultMap;
+      },
+      {},
+    );
+  };
+};

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.0.0-beta.12"
+  "version": "9.0.0-beta.14"
 }