feat(UIKIT-4280): voice message

README.md

@@ -11,14 +11,14 @@ Sendbird UIKit for React-Native is a development kit with an user interface that
 This mono-repository the UIKit source code is consists as explained below.
 
 - [**packages/uikit-react-native**](/packages/uikit-react-native) is where you can find the open source code. Check out [UIKit Open Source Guidelines](/OPENSOURCE_GUIDELINES.md) for more information regarding our stance on open source.
-- [**sample**](/sample) is a chat app with UIKit’s core features in which you can see items such as push notifications, total unread message count and auto sign-in are demonstrated. When you sign in to the sample app, you will only see a list of channels rendered by the [GroupChannelListFragment](https://sendbird.com/docs/uikit/v3/react-native/key-functions/list-channels) on the screen.
+- [**sample**](/sample) is a chat app with UIKit’s core features in which you can see items such as push notifications, total unread message count and auto sign-in are demonstrated. When you sign in to the sample app, you will only see a list of channels rendered by the [GroupChannelListFragment](https://sendbird.com/docs/chat/uikit/v3/react-native/key-functions/list-channels) on the screen.
 - [**packages/uikit-react-native-foundation**](/packages/uikit-react-native-foundation) is a UI package for `uikit-react-native`.
 - [**packages/uikit-chat-hooks**](/packages/uikit-chat-hooks) is a react hooks package for `uikit-react-native`.
 - [**packages/uikit-utils**](/packages/uikit-utils) is a utility package for `uikit-react-native`.
 
 ### More about Sendbird UIKit for React-Native
 
-Find out more about Sendbird UIKit for React-Native at [UIKit for React Native doc](https://sendbird.com/docs/uikit/v3/react-native/overview).
+Find out more about Sendbird UIKit for React-Native at [UIKit for React Native doc](https://sendbird.com/docs/chat/uikit/v3/react-native/overview).
 If you need any help in resolving any issues or have questions, visit [our community](https://community.sendbird.com).
 
 <br/>

docs-validation/1_introduction/Authentication.tsx

@@ -5,7 +5,7 @@ const PROFILE_FILE: FileType = { name: '', size: 0, type: '', uri: '' };
 
 /**
  * Connect to the Sendbird server
- * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/authentication#2-connect-to-the-sendbird-server}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/authentication#2-connect-to-the-sendbird-server}
  * */
 import { useConnection } from '@sendbird/uikit-react-native';
 
@@ -27,7 +27,7 @@ const Component = () => {
 
 /**
  * Disconnect from the Sendbird server
- * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/authentication#2-disconnect-from-the-sendbird-server}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/authentication#2-disconnect-from-the-sendbird-server}
  * */
 const Component2 = () => {
   const { disconnect } = useConnection();
@@ -37,7 +37,7 @@ const Component2 = () => {
 
 /**
  * Retrieve online status of current user
- * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/authentication#2-retrieve-online-status-of-current-user}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/authentication#2-retrieve-online-status-of-current-user}
  * */
 import { useSendbirdChat } from '@sendbird/uikit-react-native';
 
@@ -54,7 +54,7 @@ const Component3 = () => {
 
 /**
  * Register for push notifications
- * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/authentication#2-register-for-push-notifications}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/authentication#2-register-for-push-notifications}
  * */
 import RNFBMessaging from '@react-native-firebase/messaging';
 import * as Permissions from 'react-native-permissions';
@@ -77,7 +77,7 @@ const App = () => {
 
 /**
  * Unregister push notifications
- * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/authentication#2-unregister-push-notifications}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/authentication#2-unregister-push-notifications}
  * */
 const App2 = () => {
   return (
@@ -92,7 +92,7 @@ const App2 = () => {
 
 /**
  * Update user profile
- * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/authentication#2-update-user-profile}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/authentication#2-update-user-profile}
  * */
 const Component4 = () => {
   const { updateCurrentUserInfo } = useSendbirdChat();

docs-validation/1_introduction/NativeModules.tsx

@@ -3,15 +3,19 @@ import {
   createExpoFileService,
   createExpoMediaService,
   createExpoNotificationService,
+  createExpoPlayerService,
+  createExpoRecorderService,
   createNativeClipboardService,
   createNativeFileService,
   createNativeMediaService,
   createNativeNotificationService,
+  createNativePlayerService,
+  createNativeRecorderService,
 } from '@sendbird/uikit-react-native';
 
 /**
  * Helper functions#React Native CLI
- * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/native-modules#2-helper-functions-3-react-native-cli}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/native-modules#2-helper-functions-3-react-native-cli}
  * */
 import Clipboard from '@react-native-clipboard/clipboard';
 import { CameraRoll } from '@react-native-camera-roll/camera-roll';
@@ -23,29 +27,40 @@ import * as ImagePicker from 'react-native-image-picker';
 import * as Permissions from 'react-native-permissions';
 import * as CreateThumbnail from 'react-native-create-thumbnail';
 import * as ImageResizer from '@bam.tech/react-native-image-resizer';
+import * as AudioRecorderPlayer from 'react-native-audio-recorder-player';
 
-const NativeClipboardService = createNativeClipboardService(Clipboard);
-const NativeNotificationService = createNativeNotificationService({
-  messagingModule: RNFBMessaging,
-  permissionModule: Permissions,
-});
-const NativeFileService = createNativeFileService({
-  fsModule: FileAccess,
-  permissionModule: Permissions,
-  imagePickerModule: ImagePicker,
-  mediaLibraryModule: CameraRoll,
-  documentPickerModule: DocumentPicker,
-});
-const NativeMediaService = createNativeMediaService({
-  VideoComponent: Video,
-  thumbnailModule: CreateThumbnail,
-  imageResizerModule: ImageResizer,
-});
+const nativePlatformServices = {
+  clipboard: createNativeClipboardService(Clipboard),
+  notification: createNativeNotificationService({
+    messagingModule: RNFBMessaging,
+    permissionModule: Permissions,
+  }),
+  file: createNativeFileService({
+    imagePickerModule: ImagePicker,
+    documentPickerModule: DocumentPicker,
+    permissionModule: Permissions,
+    fsModule: FileAccess,
+    mediaLibraryModule: CameraRoll,
+  }),
+  media: createNativeMediaService({
+    VideoComponent: Video,
+    thumbnailModule: CreateThumbnail,
+    imageResizerModule: ImageResizer,
+  }),
+  player: createNativePlayerService({
+    audioRecorderModule: AudioRecorderPlayer,
+    permissionModule: Permissions,
+  }),
+  recorder: createNativeRecorderService({
+    audioRecorderModule: AudioRecorderPlayer,
+    permissionModule: Permissions,
+  }),
+};
 /** ------------------ **/
 
 /**
  * Helper functions#Expo CLI
- * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/native-modules#2-helper-functions-3-expo-cli}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/native-modules#2-helper-functions-3-expo-cli}
  * */
 import * as ExpoClipboard from 'expo-clipboard';
 import * as ExpoDocumentPicker from 'expo-document-picker';
@@ -57,18 +72,26 @@ import * as ExpoAV from 'expo-av';
 import * as ExpoVideoThumbnail from 'expo-video-thumbnails';
 import * as ExpoImageManipulator from 'expo-image-manipulator';
 
-const ExpoNotificationService = createExpoNotificationService(ExpoNotifications);
-const ExpoClipboardService = createExpoClipboardService(ExpoClipboard);
-const ExpoFileService = createExpoFileService({
-  fsModule: ExpoFS,
-  imagePickerModule: ExpoImagePicker,
-  mediaLibraryModule: ExpoMediaLibrary,
-  documentPickerModule: ExpoDocumentPicker,
-});
-const ExpoMediaService = createExpoMediaService({
-  avModule: ExpoAV,
-  thumbnailModule: ExpoVideoThumbnail,
-  imageManipulator: ExpoImageManipulator,
-  fsModule: ExpoFS,
-})
+const expoPlatformServices = {
+  clipboard: createExpoClipboardService(ExpoClipboard),
+  notification: createExpoNotificationService(ExpoNotifications),
+  file: createExpoFileService({
+    fsModule: ExpoFS,
+    imagePickerModule: ExpoImagePicker,
+    mediaLibraryModule: ExpoMediaLibrary,
+    documentPickerModule: ExpoDocumentPicker,
+  }),
+  media: createExpoMediaService({
+    avModule: ExpoAV,
+    thumbnailModule: ExpoVideoThumbnail,
+    imageManipulator: ExpoImageManipulator,
+    fsModule: ExpoFS,
+  }),
+  player: createExpoPlayerService({
+    avModule: ExpoAV,
+  }),
+  recorder: createExpoRecorderService({
+    avModule: ExpoAV,
+  }),
+};
 /** ------------------ **/

docs-validation/1_introduction/ScreenNavigation.tsx

@@ -4,7 +4,7 @@ const GroupChannelScreen = () => <React.Fragment />;
 
 /**
  * Set up navigation in a fragment
- * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/screen-navigation#2-set-up-navigation-in-a-fragment}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/screen-navigation#2-set-up-navigation-in-a-fragment}
  * */
 // @ts-ignore
 import { Navigation } from 'react-native-navigation';
@@ -34,7 +34,7 @@ const GroupChannelListScreen = (props: { componentId: string }) => {
 
 /**
  * Integrate navigation library
- * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/screen-navigation#2-integrate-navigation-library}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/screen-navigation#2-integrate-navigation-library}
  * */
 Navigation.registerComponent('GroupChannel', () => GroupChannelScreen);
 Navigation.registerComponent('GroupChannelList', () => GroupChannelListScreen);

docs-validation/1_introduction/SendYourFirstMessage.tsx

@@ -2,14 +2,17 @@ import React from 'react';
 
 /**
  * Implement platform service interfaces using native modules
- * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-4-implement-platform-service-interfaces-using-native-modules}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-4-implement-platform-service-interfaces-using-native-modules}
  * */
 import {
   createNativeClipboardService,
   createNativeFileService,
   createNativeMediaService,
   createNativeNotificationService,
-} from '@sendbird/uikit-react-native';
+  createNativePlayerService,
+  createNativeRecorderService,
+  SendbirdUIKitContainerProps
+} from "@sendbird/uikit-react-native";
 
 import Clipboard from '@react-native-clipboard/clipboard';
 import { CameraRoll } from '@react-native-camera-roll/camera-roll';
@@ -21,29 +24,41 @@ import * as ImagePicker from 'react-native-image-picker';
 import * as Permissions from 'react-native-permissions';
 import * as CreateThumbnail from 'react-native-create-thumbnail';
 import * as ImageResizer from '@bam.tech/react-native-image-resizer';
-
-const ClipboardService = createNativeClipboardService(Clipboard);
-const NotificationService = createNativeNotificationService({
-  messagingModule: RNFBMessaging,
-  permissionModule: Permissions,
-});
-const FileService = createNativeFileService({
-  fsModule: FileAccess,
-  permissionModule: Permissions,
-  imagePickerModule: ImagePicker,
-  mediaLibraryModule: CameraRoll,
-  documentPickerModule: DocumentPicker,
-});
-const MediaService = createNativeMediaService({
-  VideoComponent: Video,
-  thumbnailModule: CreateThumbnail,
-  imageResizerModule: ImageResizer,
-});
+import * as AudioRecorderPlayer from 'react-native-audio-recorder-player';
+
+
+export const platformServices: SendbirdUIKitContainerProps['platformServices'] = {
+  clipboard: createNativeClipboardService(Clipboard),
+  notification: createNativeNotificationService({
+    messagingModule: RNFBMessaging,
+    permissionModule: Permissions,
+  }),
+  file: createNativeFileService({
+    imagePickerModule: ImagePicker,
+    documentPickerModule: DocumentPicker,
+    permissionModule: Permissions,
+    fsModule: FileAccess,
+    mediaLibraryModule: CameraRoll,
+  }),
+  media: createNativeMediaService({
+    VideoComponent: Video,
+    thumbnailModule: CreateThumbnail,
+    imageResizerModule: ImageResizer,
+  }),
+  player: createNativePlayerService({
+    audioRecorderModule: AudioRecorderPlayer,
+    permissionModule: Permissions,
+  }),
+  recorder: createNativeRecorderService({
+    audioRecorderModule: AudioRecorderPlayer,
+    permissionModule: Permissions,
+  }),
+};
 /** ------------------ **/
 
 /**
  * Wrap your app in SendbirdUIKitContainer
- * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-5-wrap-your-app-in-sendbirduikitcontainer}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-5-wrap-your-app-in-sendbirduikitcontainer}
  * */
 import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -53,12 +68,7 @@ const App = () => {
     <SendbirdUIKitContainer
       appId={'APP_ID'}
       chatOptions={{ localCacheStorage: AsyncStorage }}
-      platformServices={{
-        file: FileService,
-        notification: NotificationService,
-        clipboard: ClipboardService,
-        media: MediaService,
-      }}
+      platformServices={platformServices}
     >
       {/* Rest of your app */}
     </SendbirdUIKitContainer>
@@ -68,7 +78,7 @@ const App = () => {
 
 /**
  * Create a fragment and module components
- * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-7-create-a-fragment-and-module-components}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-7-create-a-fragment-and-module-components}
  * */
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { useGroupChannel } from '@sendbird/uikit-chat-hooks';
@@ -146,7 +156,7 @@ const GroupChannelScreen = () => {
 
 /**
  * Register navigation library to the screen
- * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-8-register-navigation-library-to-the-screen}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-8-register-navigation-library-to-the-screen}
  * */
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
@@ -177,12 +187,7 @@ const App2 = () => {
     <SendbirdUIKitContainer
       appId={'APP_ID'}
       chatOptions={{ localCacheStorage: AsyncStorage }}
-      platformServices={{
-        file: FileService,
-        notification: NotificationService,
-        clipboard: ClipboardService,
-        media: MediaService,
-      }}
+      platformServices={platformServices}
     >
       <Navigation />
     </SendbirdUIKitContainer>
@@ -192,7 +197,7 @@ const App2 = () => {
 
 /**
  * Connect to the Sendbird server
- * {@link https://sendbird.com/docs/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-9-connect-to-the-sendbird-server}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-9-connect-to-the-sendbird-server}
  * */
 import { Pressable, Text, View } from 'react-native';
 import { useConnection } from '@sendbird/uikit-react-native';

docs-validation/2_features/DeliveryReceipt.tsx

@@ -1,6 +1,6 @@
 /**
  * How to use
- * {@link https://sendbird.com/docs/uikit/v3/react-native/features/delivery-receipt#2-how-to-use}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/features/delivery-receipt#2-how-to-use}
  * */
 import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
 
@@ -12,7 +12,7 @@ const App = () => {
 
 /**
  * Icon resource
- * {@link https://sendbird.com/docs/uikit/v3/react-native/features/delivery-receipt#2-customize-the-ui-for-delivery-receipt-3-icon-resource}
+ * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/features/delivery-receipt#2-customize-the-ui-for-delivery-receipt-3-icon-resource}
  * */
 import { Icon } from '@sendbird/uikit-react-native-foundation';