Merge pull request #263 from sendbird/feat/support-nitro-sound

[CLNP-7546] feat: add react-native-nitro-sound for React Native 0.81 support

Author: OnestarLee

docs-validation/1_introduction/NativeModules.tsx

@@ -27,7 +27,7 @@ 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';
+import * as AudioRecorderPlayer from 'react-native-nitro-sound';
 
 const nativePlatformServices = {
   clipboard: createNativeClipboardService(Clipboard),

docs-validation/1_introduction/SendYourFirstMessage.tsx

@@ -24,7 +24,7 @@ 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';
+import * as AudioRecorderPlayer from 'react-native-nitro-sound';
 
 
 export const platformServices: SendbirdUIKitContainerProps['platformServices'] = {

docs-validation/package.json

@@ -19,7 +19,8 @@
     "date-fns": "^4.1.0",
     "react": "18.2.0",
     "react-native": "0.74.3",
-    "react-native-audio-recorder-player": "^3.6.10",
+    "react-native-nitro-modules": "^0.29.4",
+    "react-native-nitro-sound": "^0.2.0",
     "react-native-create-thumbnail": "^2.0.0",
     "react-native-file-access": "^3.1.0",
     "react-native-image-picker": "^7.1.2",

packages/uikit-react-native/README.md

@@ -150,7 +150,7 @@ npm install react-native-video \
             react-native-image-picker \
             react-native-document-picker \
             react-native-create-thumbnail \
-            react-native-audio-recorder-player \
+            react-native-nitro-sound \
             @react-native-clipboard/clipboard \
             @react-native-camera-roll/camera-roll \
             @react-native-firebase/app \
@@ -171,7 +171,7 @@ 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';
+import * as AudioRecorderPlayer from 'react-native-nitro-sound';
 
 const nativePlatformServices = {
   clipboard: createNativeClipboardService(Clipboard),

packages/uikit-react-native/package.json

@@ -92,6 +92,8 @@
     "react": "18.2.0",
     "react-native": "0.74.3",
     "react-native-audio-recorder-player": "^3.6.10",
+    "react-native-nitro-modules": "^0.29.4",
+    "react-native-nitro-sound": "^0.2.0",
     "react-native-builder-bob": "^0.18.0",
     "react-native-create-thumbnail": "^2.0.0",
     "react-native-document-picker": "^9.3.0",
@@ -127,6 +129,8 @@
     "react": ">=17.0.2",
     "react-native": ">=0.65.0",
     "react-native-audio-recorder-player": ">=3.6.0",
+    "react-native-nitro-modules": "*",
+    "react-native-nitro-sound": ">=0.2.0",
     "react-native-create-thumbnail": ">=1.5.1",
     "react-native-document-picker": ">=8.0.0",
     "react-native-file-access": ">=2.4.3",
@@ -202,6 +206,15 @@
     },
     "react-native-video": {
       "optional": true
+    },
+    "react-native-audio-recorder-player": {
+      "optional": true
+    },
+    "react-native-nitro-modules": {
+      "optional": true
+    },
+    "react-native-nitro-sound": {
+      "optional": true
     }
   },
   "react-native-builder-bob": {

packages/uikit-react-native/src/components/ChannelInput/VoiceMessageInput.tsx

@@ -75,7 +75,7 @@ const VoiceMessageInput = ({ onClose, onSend }: VoiceMessageInputProps) => {
           break;
       }
     } catch (error) {
-      Logger.warn('Failed to run voice message action.', state);
+      Logger.warn('Failed to run voice message action.', state, error);
     }
   };
   const renderActionIcon = () => {

packages/uikit-react-native/src/hooks/useVoiceMessageInput.ts

@@ -161,8 +161,10 @@ const useVoiceMessageInput = ({ onSend, onClose }: Props): VoiceMessageInputResu
               setVoiceMessageRecordingPath({ recordFilePath: recorderService.uri, uri: recorderService.uri });
             }
           } else {
-            setVoiceMessageRecordingPath(fileService.createRecordFilePath(recorderService.options.extension));
-            await recorderService.record(getVoiceMessageRecordingPath().recordFilePath);
+            const recordFilePath = fileService.createRecordFilePath(recorderService.options.extension);
+            const convertedRecordPath = recorderService.convertRecordPath(recordFilePath.recordFilePath);
+            setVoiceMessageRecordingPath({ ...recordFilePath, recordFilePath: convertedRecordPath });
+            await recorderService.record(convertedRecordPath);
           }
         }
       },
@@ -225,6 +227,9 @@ const useVoiceMessageInput = ({ onSend, onClose }: Props): VoiceMessageInputResu
           matchesOneOf(status, ['recording', 'recording_completed', 'playing', 'playing_paused']) &&
           recordingPath.current
         ) {
+          if (status === 'recording') {
+            await recorderService.stop();
+          }
           const voiceFile = getVoiceMessageFileObject(recordingPath.current.uri, recorderService.options.extension);
           onSend(voiceFile, Math.floor(recordingTime.currentTime));
           await clear();

packages/uikit-react-native/src/platform/createFileService.native.ts

@@ -242,7 +242,7 @@ const createNativeFileService = ({
       return Platform.select({
         ios: {
           uri: path,
-          recordFilePath: filename,
+          recordFilePath: path,
         },
         android: {
           uri: path.startsWith('file://') ? path : 'file://' + path,