stream-chat-react-native-core 5.34.1-beta.4 → 5.35.0-beta.1

package/src/components/ImageGallery/ImageGallery.tsx

@@ -48,7 +48,7 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../hooks/useViewport';
 import { isVideoPackageAvailable, VideoType } from '../../native';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
 import { getGiphyMimeType } from '../Attachment/utils/getGiphyMimeType';
@@ -239,15 +239,15 @@ export const ImageGallery = <
       cur.attachments
         ?.filter(
           (attachment) =>
-            (attachment.type === 'giphy' &&
+            (attachment.type === FileTypes.Giphy &&
               (attachment.giphy?.[giphyVersion]?.url ||
                 attachment.thumb_url ||
                 attachment.image_url)) ||
-            (attachment.type === 'image' &&
+            (attachment.type === FileTypes.Image &&
               !attachment.title_link &&
               !attachment.og_scrape_url &&
               getUrlOfImageAttachment(attachment)) ||
-            (isVideoPackageAvailable() && attachment.type === 'video'),
+            (isVideoPackageAvailable() && attachment.type === FileTypes.Video),
         )
         .reverse() || [];
 
@@ -344,7 +344,7 @@ export const ImageGallery = <
       const imageHeight = Math.floor(height * (fullWindowWidth / width));
       setCurrentImageHeight(imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight);
     } else if (photo?.uri) {
-      if (photo.type === 'image') {
+      if (photo.type === FileTypes.Image) {
         Image.getSize(photo.uri, (width, height) => {
           const imageHeight = Math.floor(height * (fullWindowWidth / width));
           setCurrentImageHeight(imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight);
@@ -553,7 +553,7 @@ export const ImageGallery = <
                     <Animated.View style={StyleSheet.absoluteFill}>
                       <Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
                         {imageGalleryAttachments.map((photo, i) =>
-                          photo.type === 'video' ? (
+                          photo.type === FileTypes.Video ? (
                             <AnimatedGalleryVideo
                               attachmentId={photo.id}
                               handleEnd={handleEnd}

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -24,6 +24,7 @@ import { ImageGallery } from '../ImageGallery';
 jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
+    isImageMediaLibraryAvailable: jest.fn(() => true),
     isVideoPackageAvailable: jest.fn(() => true),
     NetInfo: {
       addEventListener: jest.fn(),
@@ -82,7 +83,7 @@ describe('ImageGallery', () => {
         videoItemComponent,
         'handleLoad',
         `photoId-${message.id}-${attachment.asset_url}`,
-        10,
+        10 * 1000,
       );
     });
 
@@ -143,7 +144,7 @@ describe('ImageGallery', () => {
         videoItemComponent,
         'handleProgress',
         `photoId-${message.id}-${attachment.asset_url}`,
-        0.3,
+        0.3 * 1000,
       );
     });
 
@@ -169,7 +170,7 @@ describe('ImageGallery', () => {
 
     act(() => {
       fireEvent(videoItemComponent, 'handleLoad', {
-        duration: 10,
+        duration: 10 * 1000,
       });
       fireEvent(videoItemComponent, 'handleProgress', {
         currentTime: undefined,
@@ -202,7 +203,7 @@ describe('ImageGallery', () => {
         videoItemComponent,
         'handleLoad',
         `photoId-${message.id}-${attachment.asset_url}`,
-        10,
+        10 * 1000,
       );
       fireEvent(videoItemComponent, 'handleEnd');
     });

package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx

@@ -28,6 +28,7 @@ jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
     deleteFile: jest.fn(),
+    isImageMediaLibraryAvailable: jest.fn(() => true),
     isVideoPackageAvailable: jest.fn(() => true),
     NetInfo: {
       addEventListener: jest.fn(),

package/src/components/ImageGallery/__tests__/ImageGalleryHeader.test.tsx

@@ -30,6 +30,7 @@ import { ImageGallery, ImageGalleryCustomComponents } from '../ImageGallery';
 jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
+    isImageMediaLibraryAvailable: jest.fn(() => true),
     isVideoPackageAvailable: jest.fn(() => true),
     NetInfo: {
       addEventListener: jest.fn(),

package/src/components/ImageGallery/__tests__/ImageGalleryVideoControl.test.tsx

@@ -54,7 +54,7 @@ describe('ImageGalleryOverlay', () => {
 
     render(
       getComponent({
-        duration: 3600,
+        duration: 3600 * 1000,
         progress: 1,
       }),
     );
@@ -73,7 +73,7 @@ describe('ImageGalleryOverlay', () => {
 
     render(
       getComponent({
-        duration: 60,
+        duration: 60 * 1000,
         progress: 0.5,
       }),
     );

package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx

@@ -51,7 +51,7 @@ export const AnimatedGalleryImage = React.memo(
      * image as it is scaled. If the scale is less than one they stay in
      * place as to not come into the screen when the image shrinks.
      */
-    const AnimatedGalleryImageStyle = useAnimatedStyle<ImageStyle>(() => {
+    const animatedGalleryImageStyle = useAnimatedStyle<ImageStyle>(() => {
       const xScaleOffset = -7 * screenWidth * (0.5 + index);
       const yScaleOffset = -screenHeight * 3.5;
       return {
@@ -91,8 +91,7 @@ export const AnimatedGalleryImage = React.memo(
         resizeMode={'contain'}
         source={{ uri: photo.uri }}
         style={[
-          style,
-          AnimatedGalleryImageStyle,
+          animatedGalleryImageStyle,
           {
             transform: [
               { scaleX: -1 },
@@ -103,6 +102,7 @@ export const AnimatedGalleryImage = React.memo(
               { scale: oneEighth },
             ],
           },
+          style,
         ]}
       />
     );

package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx

@@ -83,7 +83,8 @@ export const AnimatedGalleryVideo = React.memo(
 
     const onLoad = (payload: VideoPayloadData) => {
       setOpacity(0);
-      handleLoad(attachmentId, payload.duration);
+      // Duration is in seconds so we convert to milliseconds.
+      handleLoad(attachmentId, payload.duration * 1000);
     };
 
     const onEnd = () => {
@@ -109,12 +110,12 @@ export const AnimatedGalleryVideo = React.memo(
       } else {
         // Update your UI for the loaded state
         setOpacity(0);
-        handleLoad(attachmentId, playbackStatus.durationMillis / 1000);
+        handleLoad(attachmentId, playbackStatus.durationMillis);
         if (playbackStatus.isPlaying) {
           // Update your UI for the playing state
           handleProgress(
             attachmentId,
-            playbackStatus.positionMillis / 1000 / (playbackStatus.durationMillis / 1000),
+            playbackStatus.positionMillis / playbackStatus.durationMillis,
           );
         }
 
@@ -173,7 +174,6 @@ export const AnimatedGalleryVideo = React.memo(
       <Animated.View
         accessibilityLabel='Image Gallery Video'
         style={[
-          style,
           animatedViewStyles,
           {
             transform: [
@@ -185,6 +185,7 @@ export const AnimatedGalleryVideo = React.memo(
               { scale: oneEighth },
             ],
           },
+          style,
         ]}
       >
         {isVideoPackageAvailable() && (

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -9,7 +9,7 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { Grid as GridIconDefault, Share as ShareIconDefault } from '../../../icons';
 import { deleteFile, saveFile, shareImage, VideoType } from '../../../native';
 
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { DefaultStreamChatGenerics, FileTypes } from '../../../types/types';
 import type { Photo } from '../ImageGallery';
 
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
@@ -181,8 +181,8 @@ export const ImageGalleryFooterWithContext = <
       pointerEvents={'box-none'}
       style={styles.wrapper}
     >
-      <ReanimatedSafeAreaView style={[container, footerStyle, { backgroundColor: white }]}>
-        {photo.type === 'video' ? (
+      <ReanimatedSafeAreaView style={[container, { backgroundColor: white }, footerStyle]}>
+        {photo.type === FileTypes.Video ? (
           videoControlElement ? (
             videoControlElement({ duration, onPlayPause, paused, progress, videoRef })
           ) : (
@@ -195,7 +195,7 @@ export const ImageGalleryFooterWithContext = <
             />
           )
         ) : null}
-        <View style={[styles.innerContainer, innerContainer, { backgroundColor: white }]}>
+        <View style={[styles.innerContainer, { backgroundColor: white }, innerContainer]}>
           {leftElement ? (
             leftElement({ openGridView, photo, share, shareMenuOpen })
           ) : (

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import dayjs from 'dayjs';
-
 import type { ImageGalleryFooterVideoControlProps } from './ImageGalleryFooter';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import { Pause, Play } from '../../../icons';
+import { getDurationLabelFromDuration } from '../../../utils/utils';
 import { ProgressControl } from '../../ProgressControl/ProgressControl';
 
 const styles = StyleSheet.create({
@@ -37,19 +36,11 @@ export const ImageGalleryVideoControl = React.memo(
   (props: ImageGalleryFooterVideoControlProps) => {
     const { duration, onPlayPause, paused, progress, videoRef } = props;
 
-    const videoDuration = duration
-      ? duration / 3600 >= 1
-        ? dayjs.duration(duration, 'second').format('HH:mm:ss')
-        : dayjs.duration(duration, 'second').format('mm:ss')
-      : null;
+    const videoDuration = getDurationLabelFromDuration(duration);
 
     const progressValueInSeconds = progress * duration;
 
-    const progressDuration = progressValueInSeconds
-      ? progressValueInSeconds / 3600 >= 1
-        ? dayjs.duration(progressValueInSeconds, 'second').format('HH:mm:ss')
-        : dayjs.duration(progressValueInSeconds, 'second').format('mm:ss')
-      : null;
+    const progressDuration = getDurationLabelFromDuration(progressValueInSeconds);
 
     const {
       theme: {
@@ -73,7 +64,7 @@ export const ImageGalleryVideoControl = React.memo(
     return (
       <View style={[styles.videoContainer, videoContainer]}>
         <TouchableOpacity accessibilityLabel='Play Pause Button' onPress={handlePlayPause}>
-          <View style={[styles.roundedView, roundedView, { backgroundColor: static_white }]}>
+          <View style={[styles.roundedView, { backgroundColor: static_white }, roundedView]}>
             {paused ? (
               <Play accessibilityLabel='Play Icon' fill={static_black} height={32} width={32} />
             ) : (
@@ -83,9 +74,9 @@ export const ImageGalleryVideoControl = React.memo(
         </TouchableOpacity>
         <Text
           accessibilityLabel='Progress Duration'
-          style={[styles.durationTextStyle, durationTextStyle, { color: black }]}
+          style={[styles.durationTextStyle, { color: black }, durationTextStyle]}
         >
-          {progressDuration ? progressDuration : '00:00'}
+          {progressDuration}
         </Text>
         <ProgressControl
           duration={duration}
@@ -97,9 +88,9 @@ export const ImageGalleryVideoControl = React.memo(
         />
         <Text
           accessibilityLabel='Video Duration'
-          style={[styles.durationTextStyle, durationTextStyle, { color: black }]}
+          style={[styles.durationTextStyle, { color: black }, durationTextStyle]}
         >
-          {videoDuration ? videoDuration : '00:00'}
+          {videoDuration}
         </Text>
       </View>
     );

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -6,7 +6,7 @@ import { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';
 import { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../../hooks/useViewport';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { DefaultStreamChatGenerics, FileTypes } from '../../../types/types';
 
 import type { Photo } from '../ImageGallery';
 
@@ -84,7 +84,7 @@ const GridImage = <
 
   return (
     <TouchableOpacity accessibilityLabel='Grid Image' onPress={selectAndClose}>
-      {type === 'video' ? (
+      {type === FileTypes.Video ? (
         <View style={[styles.image, { height: size, width: size }, gridImage]}>
           <VideoThumbnail thumb_url={thumb_url} />
         </View>

package/src/components/Message/Message.tsx

@@ -40,7 +40,7 @@ import {
 } from '../../contexts/translationContext/TranslationContext';
 
 import { isVideoPackageAvailable, triggerHaptic } from '../../native';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import {
   hasOnlyEmojis,
   isBlockedMessage,
@@ -377,22 +377,26 @@ const MessageWithContext = <
     !isMessageTypeDeleted && Array.isArray(message.attachments)
       ? message.attachments.reduce(
           (acc, cur) => {
-            if (cur.type === 'file') {
+            if (cur.type === FileTypes.File) {
               acc.files.push(cur);
               acc.other = []; // remove other attachments if a file exists
-            } else if (cur.type === 'video' && !cur.og_scrape_url && isVideoPackageAvailable()) {
+            } else if (
+              cur.type === FileTypes.Video &&
+              !cur.og_scrape_url &&
+              isVideoPackageAvailable()
+            ) {
               acc.videos.push({
                 image_url: cur.asset_url,
                 thumb_url: cur.thumb_url,
-                type: 'video',
+                type: FileTypes.Video,
               });
               acc.other = [];
-            } else if (cur.type === 'video' && !cur.og_scrape_url) {
+            } else if (cur.type === FileTypes.Video && !cur.og_scrape_url) {
               acc.files.push(cur);
               acc.other = []; // remove other attachments if a file exists
-            } else if (cur.type === 'audio' || cur.type === 'voiceRecording') {
+            } else if (cur.type === FileTypes.Audio || cur.type === FileTypes.VoiceRecording) {
               acc.files.push(cur);
-            } else if (cur.type === 'image' && !cur.title_link && !cur.og_scrape_url) {
+            } else if (cur.type === FileTypes.Image && !cur.title_link && !cur.og_scrape_url) {
               /**
                * this next if is not combined with the above one for cases where we have
                * an image with no url links at all falling back to being an attachment
@@ -859,7 +863,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
       prevMessageAttachments.length === nextMessageAttachments.length &&
       prevMessageAttachments.every((attachment, index) => {
         const attachmentKeysEqual =
-          attachment.type === 'image'
+          attachment.type === FileTypes.Image
             ? attachment.image_url === nextMessageAttachments[index].image_url &&
               attachment.thumb_url === nextMessageAttachments[index].thumb_url
             : attachment.type === nextMessageAttachments[index].type;

package/src/components/MessageInput/AttachButton.tsx

@@ -1,30 +1,96 @@
-import React from 'react';
-import type { GestureResponderEvent } from 'react-native';
+import React, { useState } from 'react';
+import type { GestureResponderEvent, LayoutChangeEvent, LayoutRectangle } from 'react-native';
 import { Pressable } from 'react-native';
 
+import { NativeAttachmentPicker } from './components/NativeAttachmentPicker';
+
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { ChannelContextValue } from '../../contexts/channelContext/ChannelContext';
+import { useMessageInputContext } from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Attach } from '../../icons/Attach';
 
-type AttachButtonPropsWithContext = {
+import { isImageMediaLibraryAvailable } from '../../native';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+
+type AttachButtonPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChannelContextValue<StreamChatGenerics>, 'disabled'> & {
   /** Function that opens attachment options bottom sheet */
   handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
   selectedPicker?: 'images';
 };
 
-const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
-  const { handleOnPress, selectedPicker } = props;
+const AttachButtonWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: AttachButtonPropsWithContext<StreamChatGenerics>,
+) => {
+  const [showAttachButtonPicker, setShowAttachButtonPicker] = useState<boolean>(false);
+  const [attachButtonLayoutRectangle, setAttachButtonLayoutRectangle] = useState<LayoutRectangle>();
+  const { disabled, handleOnPress, selectedPicker } = props;
   const {
     theme: {
       colors: { accent_blue, grey },
       messageInput: { attachButton },
     },
   } = useTheme();
+  const { handleAttachButtonPress, toggleAttachmentPicker } = useMessageInputContext();
+
+  const onAttachButtonLayout = (event: LayoutChangeEvent) => {
+    const layout = event.nativeEvent.layout;
+    setAttachButtonLayoutRectangle((prev) => {
+      if (
+        prev &&
+        prev.width === layout.width &&
+        prev.height === layout.height &&
+        prev.x === layout.x &&
+        prev.y === layout.y
+      ) {
+        return prev;
+      }
+      return layout;
+    });
+  };
+
+  const attachButtonHandler = () => {
+    setShowAttachButtonPicker(true);
+  };
+
+  const onPressHandler = () => {
+    if (handleOnPress) {
+      handleOnPress();
+      return;
+    }
+    if (handleAttachButtonPress) {
+      handleAttachButtonPress();
+      return;
+    }
+    if (isImageMediaLibraryAvailable()) {
+      toggleAttachmentPicker();
+    } else {
+      attachButtonHandler();
+    }
+  };
 
   return (
-    <Pressable onPress={handleOnPress} style={[attachButton]} testID='attach-button'>
-      <Attach pathFill={selectedPicker === 'images' ? accent_blue : grey} />
-    </Pressable>
+    <>
+      <Pressable
+        disabled={disabled}
+        onLayout={onAttachButtonLayout}
+        onPress={disabled ? () => null : onPressHandler}
+        style={[attachButton]}
+        testID='attach-button'
+      >
+        <Attach fill={selectedPicker === 'images' ? accent_blue : grey} size={32} />
+      </Pressable>
+      {showAttachButtonPicker ? (
+        <NativeAttachmentPicker
+          attachButtonLayoutRectangle={attachButtonLayoutRectangle}
+          onRequestedClose={() => setShowAttachButtonPicker(false)}
+        />
+      ) : null}
+    </>
   );
 };
 

package/src/components/MessageInput/CommandsButton.tsx

@@ -36,11 +36,12 @@ const CommandsButtonWithContext = <
   return (
     <Pressable onPress={handleOnPress} style={[commandsButton]} testID='commands-button'>
       <Lightning
-        pathFill={
+        fill={
           suggestions && suggestions.data.some((suggestion) => isSuggestionCommand(suggestion))
             ? accent_blue
             : grey
         }
+        size={32}
       />
     </Pressable>
   );

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -1,8 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { FlatList, I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import dayjs from 'dayjs';
-
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
 import { ChatContextValue, useChatContext } from '../../contexts';
@@ -21,7 +19,11 @@ import { Warning } from '../../icons/Warning';
 import { isAudioPackageAvailable } from '../../native';
 import type { DefaultStreamChatGenerics, FileUpload } from '../../types/types';
 import { getTrimmedAttachmentTitle } from '../../utils/getTrimmedAttachmentTitle';
-import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';
+import {
+  getDurationLabelFromDuration,
+  getIndicatorTypeForFileState,
+  ProgressIndicatorTypes,
+} from '../../utils/utils';
 import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
 import { WritingDirectionAwareText } from '../RTLComponents/WritingDirectionAwareText';
 
@@ -97,19 +99,6 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
     },
   } = useTheme();
 
-  const ONE_HOUR_IN_SECONDS = 3600;
-  let durationLabel = '00:00';
-  const videoDuration = item.file.duration;
-
-  if (videoDuration) {
-    const isDurationLongerThanHour = videoDuration / ONE_HOUR_IN_SECONDS >= 1;
-    const formattedDurationParam = isDurationLongerThanHour ? 'HH:mm:ss' : 'mm:ss';
-    const formattedVideoDuration = dayjs
-      .duration(videoDuration, 'second')
-      .format(formattedDurationParam);
-    durationLabel = formattedVideoDuration;
-  }
-
   const { t } = useTranslationContext();
 
   return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (
@@ -126,7 +115,9 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
     </View>
   ) : (
     <WritingDirectionAwareText style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
-      {videoDuration ? durationLabel : getFileSizeDisplayText(item.file.size)}
+      {item.file.duration
+        ? getDurationLabelFromDuration(item.file.duration)
+        : getFileSizeDisplayText(item.file.size)}
     </WritingDirectionAwareText>
   );
 };

package/src/components/MessageInput/InputButtons.tsx

@@ -56,7 +56,6 @@ export const InputButtonsWithContext = <
     setShowMoreOptions,
     showMoreOptions,
     text,
-    toggleAttachmentPicker,
   } = props;
 
   const {
@@ -79,7 +78,7 @@ export const InputButtonsWithContext = <
         <View
           style={[hasCommands ? styles.attachButtonContainer : undefined, attachButtonContainer]}
         >
-          <AttachButton handleOnPress={toggleAttachmentPicker} />
+          <AttachButton />
         </View>
       )}
       {hasCommands && !text && (