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

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -39,6 +39,7 @@ export const useCreateMessageInputContext = <
   FileUploadPreview,
   fileUploads,
   giphyActive,
+  handleAttachButtonPress,
   hasCameraPicker,
   hasCommands,
   hasFilePicker,
@@ -68,7 +69,7 @@ export const useCreateMessageInputContext = <
   openCommandsPicker,
   openFilePicker,
   openMentionsPicker,
-
+  pickAndUploadImageFromNativePicker,
   pickFile,
   quotedMessage,
   removeFile,
@@ -98,6 +99,7 @@ export const useCreateMessageInputContext = <
   showMoreOptions,
   ShowThreadMessageInChannelButton,
   StartAudioRecordingButton,
+  takeAndUploadImage,
   text,
   thread,
   toggleAttachmentPicker,
@@ -159,6 +161,7 @@ export const useCreateMessageInputContext = <
       FileUploadPreview,
       fileUploads,
       giphyActive,
+      handleAttachButtonPress,
       hasCameraPicker,
       hasCommands,
       hasFilePicker,
@@ -188,6 +191,7 @@ export const useCreateMessageInputContext = <
       openCommandsPicker,
       openFilePicker,
       openMentionsPicker,
+      pickAndUploadImageFromNativePicker,
       pickFile,
       quotedMessage,
       removeFile,
@@ -217,6 +221,7 @@ export const useCreateMessageInputContext = <
       showMoreOptions,
       ShowThreadMessageInChannelButton,
       StartAudioRecordingButton,
+      takeAndUploadImage,
       text,
       toggleAttachmentPicker,
       triggerSettings,

package/src/contexts/messageInputContext/hooks/useMessageDetailsForState.ts

@@ -2,7 +2,12 @@ import { useEffect, useState } from 'react';
 
 import { Attachment } from 'stream-chat';
 
-import type { DefaultStreamChatGenerics, FileUpload, ImageUpload } from '../../../types/types';
+import {
+  DefaultStreamChatGenerics,
+  FileTypes,
+  FileUpload,
+  ImageUpload,
+} from '../../../types/types';
 import { generateRandomId } from '../../../utils/utils';
 
 import type { MessageInputContextValue } from '../MessageInputContext';
@@ -44,7 +49,7 @@ export const useMessageDetailsForState = <
   const mapAttachmentToFileUpload = (attachment: Attachment<StreamChatGenerics>): FileUpload => {
     const id = generateRandomId();
 
-    if (attachment.type === 'audio') {
+    if (attachment.type === FileTypes.Audio) {
       return {
         file: {
           duration: attachment.duration,
@@ -57,7 +62,7 @@ export const useMessageDetailsForState = <
         state: 'finished',
         url: attachment.asset_url,
       };
-    } else if (attachment.type === 'video') {
+    } else if (attachment.type === FileTypes.Video) {
       return {
         file: {
           mimeType: attachment.mime_type,
@@ -69,7 +74,7 @@ export const useMessageDetailsForState = <
         thumb_url: attachment.thumb_url,
         url: attachment.asset_url,
       };
-    } else if (attachment.type === 'voiceRecording') {
+    } else if (attachment.type === FileTypes.VoiceRecording) {
       return {
         file: {
           duration: attachment.duration,
@@ -83,7 +88,7 @@ export const useMessageDetailsForState = <
         state: 'finished',
         url: attachment.asset_url,
       };
-    } else if (attachment.type === 'file') {
+    } else if (attachment.type === FileTypes.File) {
       return {
         file: {
           mimeType: attachment.mime_type,
@@ -117,7 +122,7 @@ export const useMessageDetailsForState = <
       const attachments = Array.isArray(message.attachments) ? message.attachments : [];
 
       for (const attachment of attachments) {
-        if (attachment.type === 'image') {
+        if (attachment.type === FileTypes.Image) {
           const id = generateRandomId();
           newImageUploads.push({
             file: {

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -30,6 +30,7 @@ import { OverlayBackdrop } from '../../components/MessageOverlay/OverlayBackdrop
 import { useStreami18n } from '../../hooks/useStreami18n';
 
 import { useViewport } from '../../hooks/useViewport';
+import { isImageMediaLibraryAvailable } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { AttachmentPickerProvider } from '../attachmentPickerContext/AttachmentPickerContext';
 import { ImageGalleryProvider } from '../imageGalleryContext/ImageGalleryContext';
@@ -253,7 +254,9 @@ export const OverlayProvider = <
                     overlayOpacity={overlayOpacity}
                   />
                 )}
-                <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
+                {isImageMediaLibraryAvailable() ? (
+                  <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
+                ) : null}
               </ThemeProvider>
             </ImageGalleryProvider>
           </AttachmentPickerProvider>

package/src/contexts/themeContext/utils/theme.ts

@@ -318,6 +318,11 @@ export type Theme = {
     inputBoxContainer: ViewStyle;
     micButtonContainer: ViewStyle;
     moreOptionsButton: ViewStyle;
+    nativeAttachmentPicker: {
+      buttonContainer: ViewStyle;
+      buttonDimmerStyle: ViewStyle;
+      container: ViewStyle;
+    };
     optionsContainer: ViewStyle;
     replyContainer: ViewStyle;
     searchIcon: IconProps;
@@ -885,6 +890,11 @@ export const defaultTheme: Theme = {
     inputBoxContainer: {},
     micButtonContainer: {},
     moreOptionsButton: {},
+    nativeAttachmentPicker: {
+      buttonContainer: {},
+      buttonDimmerStyle: {},
+      container: {},
+    },
     optionsContainer: {},
     replyContainer: {},
     searchIcon: {},

package/src/i18n/en.json

@@ -14,6 +14,7 @@
   "Delete": "Delete",
   "Delete Message": "Delete Message",
   "Device camera is used to take photos or videos.": "Device camera is used to take photos or videos.",
+  "Device gallery permissions is used to take photos or videos.": "Device gallery permissions is used to take photos or videos.",
   "Do you want to send a copy of this message to a moderator for further investigation?": "Do you want to send a copy of this message to a moderator for further investigation?",
   "Edit Message": "Edit Message",
   "Edited": "Edited",

package/src/i18n/es.json

@@ -14,6 +14,7 @@
   "Delete": "Eliminar",
   "Delete Message": "Eliminar mensaje",
   "Device camera is used to take photos or videos.": "La cámara del dispositivo se utiliza para tomar fotografías o vídeos.",
+  "Device gallery permissions is used to take photos or videos.": "Los permisos de la galería del dispositivo se utilizan para tomar fotos o videos.",
   "Do you want to send a copy of this message to a moderator for further investigation?": "¿Deseas enviar una copia de este mensaje a un moderador para una investigación adicional?",
   "Edit Message": "Editar mensaje",
   "Edited": "Editado",

package/src/i18n/fr.json

@@ -14,6 +14,7 @@
   "Delete": "Supprimer",
   "Delete Message": "Supprimer un message",
   "Device camera is used to take photos or videos.": "L'appareil photo de l'appareil est utilisé pour prendre des photos ou des vidéos.",
+  "Device gallery permissions is used to take photos or videos.": "Les autorisations de la galerie de l'appareil sont utilisées pour prendre des photos ou des vidéos.",
   "Do you want to send a copy of this message to a moderator for further investigation?": "Voulez-vous envoyer une copie de ce message à un modérateur pour une enquête plus approfondie?",
   "Edit Message": "Éditer un message",
   "Edited": "Édité",

package/src/i18n/he.json

@@ -14,6 +14,7 @@
   "Delete": "מחק",
   "Delete Message": "מחק/י הודעה",
   "Device camera is used to take photos or videos.": "מצלמת המכשיר משמשת לצילום תמונות או סרטונים.",
+  "Device gallery permissions is used to take photos or videos.": "הרשאות גלריית המכשיר משמשות לצילום תמונות או סרטונים.",
   "Do you want to send a copy of this message to a moderator for further investigation?": "האם את/ה רוצה לשלוח עותק של הודעה זו למנחה להמשך חקירה?",
   "Edit Message": "ערוך הודעה",
   "Edited": "נערך",

package/src/i18n/hi.json

@@ -14,6 +14,7 @@
   "Delete": "हटाएं",
   "Delete Message": "मैसेज को डिलीट करे",
   "Device camera is used to take photos or videos.": "डिवाइस कैमरे का उपयोग फ़ोटो या वीडियो लेने के लिए किया जाता है।",
+  "Device gallery permissions is used to take photos or videos.": "डिवाइस गैलरी की अनुमतियों का उपयोग फोटो या वीडियो लेने के लिए किया जाता है।",
   "Do you want to send a copy of this message to a moderator for further investigation?": "क्या आप इस संदेश की एक प्रति आगे की जाँच के लिए किसी मॉडरेटर को भेजना चाहते हैं?",
   "Edit Message": "मैसेज में बदलाव करे",
   "Edited": "मैसेज बदला गया है",

package/src/i18n/it.json

@@ -14,6 +14,7 @@
   "Delete": "Elimina",
   "Delete Message": "Cancella il Messaggio",
   "Device camera is used to take photos or videos.": "La fotocamera del dispositivo viene utilizzata per scattare foto o video.",
+  "Device gallery permissions is used to take photos or videos.": "Le autorizzazioni della galleria del dispositivo vengono utilizzate per scattare foto o video.",
   "Do you want to send a copy of this message to a moderator for further investigation?": "Vuoi inviare una copia di questo messaggio a un moderatore per ulteriori indagini?",
   "Edit Message": "Modifica Messaggio",
   "Edited": "Modificato",

package/src/i18n/ja.json

@@ -14,6 +14,7 @@
   "Delete": "消去",
   "Delete Message": "メッセージを削除",
   "Device camera is used to take photos or videos.": "デバイスのカメラは写真やビデオの撮影に使用されます。",
+  "Device gallery permissions is used to take photos or videos.": "デバイスギャラリーの権限は写真やビデオを撮るために使用されます。",
   "Do you want to send a copy of this message to a moderator for further investigation?": "このメッセージのコピーをモデレーターに送信して、さらに調査しますか？",
   "Edit Message": "メッセージを編集",
   "Edited": "編集済み",

package/src/i18n/ko.json

@@ -14,6 +14,7 @@
   "Delete": "삭제",
   "Delete Message": "메시지 삭제",
   "Device camera is used to take photos or videos.": "기기 카메라는 사진이나 동영상을 촬영하는 데 사용됩니다.",
+  "Device gallery permissions is used to take photos or videos.": "장치 갤러리 권한은 사진 또는 비디오를 촬영하는 데 사용됩니다.",
   "Do you want to send a copy of this message to a moderator for further investigation?": "이 메시지의 복사본을 운영자에게 보내 추가 조사를합니까?",
   "Edit Message": "메시지 수정",
   "Edited": "편집됨",

package/src/i18n/nl.json

@@ -14,6 +14,7 @@
   "Delete": "Verwijderen",
   "Delete Message": "Verwijder bericht",
   "Device camera is used to take photos or videos.": "De camera van het apparaat wordt gebruikt om foto's of video's te maken.",
+  "Device gallery permissions is used to take photos or videos.": "Apparaatgallerijmachtigingen worden gebruikt om foto’s of video’s te maken.",
   "Do you want to send a copy of this message to a moderator for further investigation?": "Wil je een kopie van dit bericht naar een moderator sturen voor verder onderzoek?",
   "Edit Message": "Pas bericht aan",
   "Edited": "Bewerkt",

package/src/i18n/pt-br.json

@@ -14,6 +14,7 @@
   "Delete": "Excluir",
   "Delete Message": "Excluir Mensagem",
   "Device camera is used to take photos or videos.": "A câmera do dispositivo é usada para tirar fotos ou vídeos.",
+  "Device gallery permissions is used to take photos or videos.": "As permissões da galeria do dispositivo são usadas para tirar fotos ou vídeos.",
   "Do you want to send a copy of this message to a moderator for further investigation?": "Deseja enviar uma cópia desta mensagem para um moderador para investigação adicional?",
   "Edit Message": "Editar Mensagem",
   "Edited": "Editado",

package/src/i18n/ru.json

@@ -14,6 +14,7 @@
   "Delete": "удалять",
   "Delete Message": "Удалить сообщение",
   "Device camera is used to take photos or videos.": "Камера устройства используется для съемки фотографий или видео.",
+  "Device gallery permissions is used to take photos or videos.": "Разрешения галереи устройства используются для съемки фото или видео.",
   "Do you want to send a copy of this message to a moderator for further investigation?": "Вы хотите отправить копию этого сообщения модератору для дальнейшего изучения?",
   "Edit Message": "Редактировать сообщение",
   "Edited": "Отредактировано",

package/src/i18n/tr.json

@@ -14,6 +14,7 @@
   "Delete": "Sil",
   "Delete Message": "Mesajı Sil",
   "Device camera is used to take photos or videos.": "Cihaz kamerası fotoğraf veya video çekmek için kullanılır.",
+  "Device gallery permissions is used to take photos or videos.": "Cihaz galerisi izinleri fotoğraf veya video çekmek için kullanılır.",
   "Do you want to send a copy of this message to a moderator for further investigation?": "Detaylı inceleme için bu mesajın kopyasını moderatöre göndermek istiyor musunuz?",
   "Edit Message": "Mesajı Düzenle",
   "Edited": "Düzenlendi",

package/src/icons/Attach.tsx

@@ -1,12 +1,25 @@
 import React from 'react';
 
-import { IconProps, RootPath, RootSvg } from './utils/base';
-
-export const Attach = (props: IconProps) => (
-  <RootSvg {...props}>
-    <RootPath
-      d='M13.468 2.888a5.07 5.07 0 012.983.635 5.07 5.07 0 012.041 2.265c.45 1.01.546 2.254-.144 3.449l-4.5 7.794a3.232 3.232 0 01-1.427 1.294c-.757.342-1.696.367-2.671-.196-.975-.563-1.422-1.389-1.506-2.215a3.233 3.233 0 01.408-1.883l4-6.928a1 1 0 011.732 1l-4 6.928c-.087.15-.176.425-.15.682.02.196.105.447.516.684.41.237.671.185.85.105.236-.107.43-.32.516-.47l4.5-7.795c.31-.538.29-1.093.049-1.636a3.072 3.072 0 00-1.214-1.346 3.072 3.072 0 00-1.773-.378c-.591.062-1.082.322-1.392.86l-5 8.66c-.654 1.133-.286 3.3 1.964 4.598 2.25 1.3 4.31.535 4.964-.598l3.5-6.062a1 1 0 111.732 1l-3.5 6.062c-1.345 2.33-4.75 3.031-7.696 1.33-2.946-1.7-4.042-5-2.696-7.33l5-8.66c.69-1.195 1.815-1.733 2.914-1.85z'
-      {...props}
-    />
-  </RootSvg>
+import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+type Props = IconProps & {
+  size: number;
+};
+
+export const Attach = ({ size, ...rest }: Props) => (
+  <Svg height={size} viewBox={`0 0 ${size} ${size}`} width={size} {...rest}>
+    <G clipPath='url(#id)'>
+      <Path
+        d='M17.5245 9.33332L14.8579 9.33332L14.8579 14.6666L9.52453 14.6666L9.52453 17.3333L14.8579 17.3333L14.8579 22.6667L17.5245 22.6667L17.5245 17.3333L22.8579 17.3333L22.8579 14.6666L17.5245 14.6666L17.5245 9.33332ZM16.1912 2.66665C8.83119 2.66665 2.85786 8.63998 2.85786 16C2.85786 23.36 8.83119 29.3333 16.1912 29.3333C23.5512 29.3333 29.5245 23.36 29.5245 16C29.5245 8.63998 23.5512 2.66665 16.1912 2.66665ZM16.1912 26.6667C10.3112 26.6666 5.52453 21.88 5.52453 16C5.52453 10.12 10.3112 5.33332 16.1912 5.33332C22.0712 5.33332 26.8579 10.12 26.8579 16C26.8579 21.88 22.0712 26.6666 16.1912 26.6667Z'
+        {...rest}
+      />
+    </G>
+    <Defs>
+      <ClipPath id='id'>
+        <Rect height={32} transform={'translate(0.191406)'} width={size} />
+      </ClipPath>
+    </Defs>
+  </Svg>
 );

package/src/icons/GiphyLightning.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+type Props = IconProps & {
+  size: number;
+};
+
+export const GiphyLightning = ({ size = 16, ...rest }: Props) => (
+  <Svg height={size} viewBox={`0 0 ${size} ${size}`} width={size} {...rest}>
+    <Path
+      d='M7.69693 2H11.3333L8.90905 6.84848H11.3333L6.78784 15.3333L7.69693 9.27273H4.66663L7.69693 2Z'
+      {...rest}
+    />
+  </Svg>
+);

package/src/icons/Lightning.tsx

@@ -1,9 +1,18 @@
 import React from 'react';
 
-import { IconProps, RootPath, RootSvg } from './utils/base';
+import Svg, { Path } from 'react-native-svg';
 
-export const Lightning = (props: IconProps) => (
-  <RootSvg {...props}>
-    <RootPath d='M11.636 4H16l-2.91 5.818H16L10.546 20l1.09-7.273H8L11.636 4z' {...props} />
-  </RootSvg>
+import { IconProps } from './utils/base';
+
+type Props = IconProps & {
+  size: number;
+};
+
+export const Lightning = ({ size = 32, ...rest }: Props) => (
+  <Svg height={size} viewBox={`0 0 ${size} ${size}`} width={size} {...rest}>
+    <Path
+      d='M14.8522 28H13.5188L14.8522 18.6667H10.1855C9.01218 18.6667 9.74551 17.6667 9.77218 17.6267C11.4922 14.5867 14.0788 10.0533 17.5322 4H18.8655L17.5322 13.3333H22.2122C22.7455 13.3333 23.0388 13.5867 22.7455 14.2133C17.4788 23.4 14.8522 28 14.8522 28Z'
+      {...rest}
+    />
+  </Svg>
 );

package/src/icons/index.ts

@@ -30,6 +30,7 @@ export * from './Flag';
 export * from './Folder';
 export * from './GenericFile';
 export * from './GiphyIcon';
+export * from './GiphyLightning';
 export * from './Grid';
 export * from './Group';
 export * from './HTML';

package/src/native.ts

@@ -66,6 +66,15 @@ type PickDocument = ({ maxNumberOfFiles }: { maxNumberOfFiles?: number }) =>
   | never;
 export let pickDocument: PickDocument = fail;
 
+type PickImageAssetType = {
+  askToOpenSettings?: boolean;
+  assets?: Array<Omit<Asset, 'source'> & { source: 'picker' }>;
+  cancelled?: boolean;
+};
+
+type PickImage = () => Promise<PickImageAssetType> | never;
+export let pickImage: PickImage = fail;
+
 type SaveFileOptions = {
   fileName: string;
   fromUrl: string;
@@ -83,16 +92,11 @@ type ShareOptions = {
 type ShareImage = (options: ShareOptions) => Promise<boolean> | never;
 export let shareImage: ShareImage = fail;
 
-type Photo =
-  | (Omit<Asset, 'source'> & {
-      cancelled: false;
-      source: 'camera';
-      askToOpenSettings?: boolean;
-    })
-  | {
-      cancelled: true;
-      askToOpenSettings?: boolean;
-    };
+type Photo = Omit<Asset, 'source'> & {
+  source: 'camera';
+  askToOpenSettings?: boolean;
+  cancelled?: boolean;
+};
 type TakePhoto = (options: { compressImageQuality?: number }) => Promise<Photo> | never;
 export let takePhoto: TakePhoto = fail;
 
@@ -294,6 +298,7 @@ type Handlers = {
   NetInfo?: NetInfo;
   oniOS14GalleryLibrarySelectionChange?: OniOS14LibrarySelectionChange;
   pickDocument?: PickDocument;
+  pickImage?: PickImage;
   saveFile?: SaveFile;
   SDK?: string;
   setClipboardString?: SetClipboardString;
@@ -324,19 +329,19 @@ export const registerNativeHandlers = (handlers: Handlers) => {
     NetInfo = handlers.NetInfo;
   }
 
-  if (handlers.getLocalAssetUri) {
+  if (handlers.getLocalAssetUri !== undefined) {
     getLocalAssetUri = handlers.getLocalAssetUri;
   }
 
-  if (handlers.getPhotos) {
+  if (handlers.getPhotos !== undefined) {
     getPhotos = handlers.getPhotos;
   }
 
-  if (handlers.iOS14RefreshGallerySelection) {
+  if (handlers.iOS14RefreshGallerySelection !== undefined) {
     iOS14RefreshGallerySelection = handlers.iOS14RefreshGallerySelection;
   }
 
-  if (handlers.oniOS14GalleryLibrarySelectionChange) {
+  if (handlers.oniOS14GalleryLibrarySelectionChange !== undefined) {
     oniOS14GalleryLibrarySelectionChange = handlers.oniOS14GalleryLibrarySelectionChange;
   }
 
@@ -344,6 +349,10 @@ export const registerNativeHandlers = (handlers: Handlers) => {
     pickDocument = handlers.pickDocument;
   }
 
+  if (handlers.pickImage !== undefined) {
+    pickImage = handlers.pickImage;
+  }
+
   if (handlers.saveFile) {
     saveFile = handlers.saveFile;
   }
@@ -381,3 +390,8 @@ export const isImagePickerAvailable = () => !!takePhoto;
 export const isVideoPackageAvailable = () => !!Video;
 export const isAudioPackageAvailable = () => !!Sound.Player || !!Sound.initializeSound;
 export const isRecordingPackageAvailable = () => !!Audio;
+export const isImageMediaLibraryAvailable = () =>
+  !!getPhotos &&
+  !!iOS14RefreshGallerySelection &&
+  !!oniOS14GalleryLibrarySelectionChange &&
+  !!getLocalAssetUri;

package/src/types/types.ts

@@ -2,6 +2,16 @@ import type { ExtendableGenerics, LiteralStringForUnion } from 'stream-chat';
 
 import type { FileStateValue } from '../utils/utils';
 
+export enum FileTypes {
+  Audio = 'audio',
+  File = 'file',
+  Giphy = 'giphy',
+  Image = 'image',
+  Imgur = 'imgur',
+  Video = 'video',
+  VoiceRecording = 'voiceRecording',
+}
+
 export type Asset = {
   duration: number;
   height: number;
@@ -20,7 +30,7 @@ export type File = {
   id?: string;
   mimeType?: string;
   size?: number;
-  type?: 'file' | 'image' | 'video' | 'audio' | 'voiceRecording';
+  type?: FileTypes;
   // The uri should be of type `string`. But is `string|undefined` because the same type is used for the response from Stream's Attachment. This shall be fixed.
   uri?: string;
   waveform_data?: number[];

package/src/utils/utils.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import dayjs from 'dayjs';
 import EmojiRegex from 'emoji-regex';
 import type { DebouncedFunc } from 'lodash';
 import debounce from 'lodash/debounce';
@@ -657,3 +658,22 @@ export const getFileNameFromPath = (path: string) => {
   const match = path.match(pattern);
   return match ? match[0] : '';
 };
+
+/**
+ * Utility to get the duration label from the duration in seconds.
+ * @param duration number
+ * @returns string
+ */
+export const getDurationLabelFromDuration = (duration: number) => {
+  const ONE_HOUR_IN_SECONDS = 3600;
+  const ONE_HOUR_IN_MILLISECONDS = ONE_HOUR_IN_SECONDS * 1000;
+  let durationLabel = '00:00';
+  const isDurationLongerThanHour = duration / ONE_HOUR_IN_MILLISECONDS >= 1;
+  const formattedDurationParam = isDurationLongerThanHour ? 'HH:mm:ss' : 'mm:ss';
+  const formattedVideoDuration = dayjs
+    .duration(duration, 'milliseconds')
+    .format(formattedDurationParam);
+  durationLabel = formattedVideoDuration;
+
+  return durationLabel;
+};

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.34.1-beta.4"
+  "version": "5.35.0-beta.1"
 }