@sendbird/uikit-react-native 3.1.1 → 3.2.0

package/src/hooks/useVoiceMessageInput.ts

@@ -0,0 +1,237 @@
+import { useRef, useState } from 'react';
+
+import { useAlert } from '@sendbird/uikit-react-native-foundation';
+import { Logger, getVoiceMessageFileObject, matchesOneOf } from '@sendbird/uikit-utils';
+
+import SBUUtils from '../libs/SBUUtils';
+import { FileType } from '../platform/types';
+import { useLocalization, usePlatformService } from './useContext';
+
+type State = {
+  /**
+   * Status
+   *
+   * idle:
+   *   - cancel(): idle
+   *   - startRecording(): recording
+   * recording:
+   *   - cancel(): idle
+   *   - stopRecording(): recording_completed
+   *   - send(): recording_completed > idle
+   * recording_completed:
+   *   - cancel(): idle
+   *   - playPlayer(): playing
+   *   - send(): idle
+   * playing:
+   *   - cancel(): idle
+   *   - pausePlayer(): playing_paused
+   *   - send(): idle
+   * playing_paused:
+   *   - cancel(): idle
+   *   - playPlayer(): playing
+   *   - send(): idle
+   * */
+  status: 'idle' | 'recording' | 'recording_completed' | 'playing' | 'playing_paused';
+  recordingTime: {
+    currentTime: number;
+    minDuration: number;
+    maxDuration: number;
+  };
+  playingTime: {
+    currentTime: number;
+    duration: number;
+  };
+};
+
+export interface VoiceMessageInputResult {
+  actions: {
+    cancel: () => Promise<void>;
+    startRecording: () => Promise<void>;
+    stopRecording: () => Promise<void>;
+    playPlayer: () => Promise<void>;
+    pausePlayer: () => Promise<void>;
+    send: () => Promise<void>;
+  };
+  state: State;
+}
+
+type Props = {
+  onClose: () => Promise<void>;
+  onSend: (voiceFile: FileType, duration: number) => void;
+};
+
+const useVoiceMessageInput = ({ onSend, onClose }: Props): VoiceMessageInputResult => {
+  const { alert } = useAlert();
+  const { STRINGS } = useLocalization();
+  const { recorderService, playerService, fileService } = usePlatformService();
+  const [status, setStatus] = useState<State['status']>('idle');
+
+  const [recordingTime, setRecordingTime] = useState({
+    currentTime: 0,
+    minDuration: recorderService.options.minDuration,
+    maxDuration: recorderService.options.maxDuration,
+  });
+  const [playingTime, setPlayingTime] = useState({
+    currentTime: 0,
+    duration: 0,
+  });
+
+  const recordingPath = useRef<{ recordFilePath: string; uri: string }>();
+  const getVoiceMessageRecordingPath = () => {
+    if (!recordingPath.current) throw new Error('No recording path');
+    return recordingPath.current;
+  };
+  const setVoiceMessageRecordingPath = (path: { recordFilePath: string; uri: string }) => {
+    recordingPath.current = path;
+  };
+
+  const clear = async () => {
+    recordingPath.current = undefined;
+    await playerService.reset();
+    await recorderService.reset();
+    setRecordingTime({
+      currentTime: 0,
+      minDuration: recorderService.options.minDuration,
+      maxDuration: recorderService.options.maxDuration,
+    });
+    setPlayingTime({
+      currentTime: 0,
+      duration: 0,
+    });
+    setStatus('idle');
+  };
+
+  return {
+    state: {
+      status,
+      recordingTime,
+      playingTime,
+    },
+    actions: {
+      async cancel() {
+        await clear();
+      },
+      async startRecording() {
+        const granted = await recorderService.requestPermission();
+        if (!granted) {
+          await onClose();
+          alert({
+            title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+            message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+              STRINGS.LABELS.PERMISSION_MICROPHONE,
+              STRINGS.LABELS.PERMISSION_APP_NAME,
+            ),
+            buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+          });
+          Logger.error('Failed to request permission for recorder');
+          return;
+        }
+
+        if (matchesOneOf(status, ['idle'])) {
+          // Before start recording, if player is not idle, reset it.
+          if (playerService.state !== 'idle') {
+            await playerService.reset();
+          }
+
+          const unsubscribeRecording = recorderService.addRecordingListener(({ currentTime }) => {
+            setRecordingTime({
+              currentTime,
+              maxDuration: recorderService.options.maxDuration,
+              minDuration: recorderService.options.minDuration,
+            });
+            setPlayingTime((prev) => ({ ...prev, duration: currentTime }));
+          });
+
+          const unsubscribeState = recorderService.addStateListener((state) => {
+            switch (state) {
+              case 'recording':
+                setStatus('recording');
+                break;
+              case 'completed':
+                setStatus('recording_completed');
+                unsubscribeRecording();
+                unsubscribeState();
+                break;
+            }
+          });
+
+          if (SBUUtils.isExpo()) {
+            await recorderService.record();
+            if (recorderService.uri) {
+              setVoiceMessageRecordingPath({ recordFilePath: recorderService.uri, uri: recorderService.uri });
+            }
+          } else {
+            setVoiceMessageRecordingPath(fileService.createRecordFilePath(recorderService.options.extension));
+            await recorderService.record(getVoiceMessageRecordingPath().recordFilePath);
+          }
+        }
+      },
+      async stopRecording() {
+        if (matchesOneOf(status, ['recording'])) {
+          await recorderService.stop();
+        }
+      },
+      async playPlayer() {
+        const granted = await playerService.requestPermission();
+        if (!granted) {
+          alert({
+            title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+            message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+              STRINGS.LABELS.PERMISSION_DEVICE_STORAGE,
+              STRINGS.LABELS.PERMISSION_APP_NAME,
+            ),
+            buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+          });
+          Logger.error('Failed to request permission for player');
+          return;
+        }
+
+        if (matchesOneOf(status, ['recording_completed', 'playing_paused'])) {
+          const unsubscribePlayback = playerService.addPlaybackListener(({ currentTime, duration }) => {
+            setPlayingTime({ currentTime, duration });
+          });
+
+          const unsubscribeState = playerService.addStateListener((state) => {
+            switch (state) {
+              case 'playing':
+                setStatus('playing');
+                break;
+              case 'paused': {
+                setStatus('playing_paused');
+                unsubscribeState();
+                unsubscribePlayback();
+                break;
+              }
+              case 'stopped': {
+                setStatus('playing_paused');
+                unsubscribeState();
+                unsubscribePlayback();
+                setPlayingTime((prev) => ({ ...prev, currentTime: 0 }));
+                break;
+              }
+            }
+          });
+
+          await playerService.play(getVoiceMessageRecordingPath().recordFilePath);
+        }
+      },
+      async pausePlayer() {
+        if (matchesOneOf(status, ['playing'])) {
+          await playerService.pause();
+        }
+      },
+      async send() {
+        if (
+          matchesOneOf(status, ['recording', 'recording_completed', 'playing', 'playing_paused']) &&
+          recordingPath.current
+        ) {
+          const voiceFile = getVoiceMessageFileObject(recordingPath.current.uri, recorderService.options.extension);
+          onSend(voiceFile, Math.floor(recordingTime.currentTime));
+          await clear();
+        }
+      },
+    },
+  };
+};
+
+export default useVoiceMessageInput;

package/src/index.ts

@@ -69,10 +69,14 @@ export { default as createNativeFileService } from './platform/createFileService
 export { default as createNativeClipboardService } from './platform/createClipboardService.native';
 export { default as createNativeNotificationService } from './platform/createNotificationService.native';
 export { default as createNativeMediaService } from './platform/createMediaService.native';
+export { default as createNativePlayerService } from './platform/createPlayerService.native';
+export { default as createNativeRecorderService } from './platform/createRecorderService.native';
 export { default as createExpoFileService } from './platform/createFileService.expo';
 export { default as createExpoClipboardService } from './platform/createClipboardService.expo';
 export { default as createExpoNotificationService } from './platform/createNotificationService.expo';
 export { default as createExpoMediaService } from './platform/createMediaService.expo';
+export { default as createExpoPlayerService } from './platform/createPlayerService.expo';
+export { default as createExpoRecorderService } from './platform/createRecorderService.expo';
 export * from './platform/types';
 
 /** Feature - shared **/

package/src/libs/MentionManager.tsx

@@ -142,7 +142,7 @@ class MentionManager {
             ],
           };
         },
-        { leftText: text, components: [] as (string | JSX.Element)[] },
+        { leftText: text, components: [] as (string | React.ReactNode)[] },
       );
 
     return [leftText, ...components];

package/src/libs/SBUUtils.ts

@@ -37,4 +37,9 @@ export default class SBUUtils {
       await callback();
     } catch (e) {}
   }
+
+  static isExpo() {
+    const _g = global ?? window;
+    return typeof _g === 'object' && 'expo' in _g;
+  }
 }

package/src/libs/VoiceMessageConfig.ts

@@ -0,0 +1,28 @@
+export interface VoiceMessageConfigInterface {
+  recorder: {
+    minDuration: number;
+    maxDuration: number;
+  };
+}
+
+class VoiceMessageConfig {
+  static DEFAULT = {
+    RECORDER: {
+      MIN_DURATION: 1000,
+      MAX_DURATION: 600 * 1000,
+      EXTENSION: 'm4a',
+
+      BIT_RATE: 12000,
+      SAMPLE_RATE: 11025,
+      CHANNELS: 1,
+    },
+  };
+
+  constructor(private _config: VoiceMessageConfigInterface) {}
+
+  get recorder() {
+    return this._config.recorder;
+  }
+}
+
+export default VoiceMessageConfig;

package/src/localization/StringSet.type.ts

@@ -240,6 +240,7 @@ export interface StringSet {
     PERMISSION_APP_NAME: string;
     PERMISSION_CAMERA: string;
     PERMISSION_DEVICE_STORAGE: string;
+    PERMISSION_MICROPHONE: string;
 
     USER_NO_NAME: string;
     CHANNEL_NO_MEMBERS: string;
@@ -249,6 +250,7 @@ export interface StringSet {
       parentMessage: SendbirdUserMessage | SendbirdFileMessage,
       currentUserId?: string,
     ) => string;
+    MESSAGE_UNAVAILABLE: string;
 
     USER_BAR_ME_POSTFIX: string;
     USER_BAR_OPERATOR: string;
@@ -291,6 +293,10 @@ export interface StringSet {
     /** Channel > Message > Failed **/
     CHANNEL_MESSAGE_FAILED_RETRY: string;
     CHANNEL_MESSAGE_FAILED_REMOVE: string;
+
+    /** Voice message **/
+    VOICE_MESSAGE: string;
+    VOICE_MESSAGE_INPUT_CANCEL: string;
   };
   FILE_VIEWER: {
     TITLE: (message: SendbirdFileMessage) => string;
@@ -331,6 +337,8 @@ export interface StringSet {
     RESEND_MSG_ERROR: string;
     DELETE_MSG_ERROR: string;
     SEND_MSG_ERROR: string;
+    USER_MUTED_ERROR: string;
+    CHANNEL_FROZEN_ERROR: string;
     UPDATE_MSG_ERROR: string;
     TURN_ON_NOTIFICATIONS_ERROR: string;
     TURN_OFF_NOTIFICATIONS_ERROR: string;

package/src/localization/createBaseStringSet.ts

@@ -3,16 +3,16 @@ import type { Locale } from 'date-fns';
 import type { PartialDeep } from '@sendbird/uikit-utils';
 import {
   getDateSeparatorFormat,
-  getFileTypeFromMessage,
-  getGroupChannelLastMessage,
   getGroupChannelPreviewTime,
   getGroupChannelTitle,
   getMessagePreviewBody,
   getMessagePreviewTime,
   getMessagePreviewTitle,
   getMessageTimeFormat,
+  getMessageType,
   getOpenChannelParticipants,
   getOpenChannelTitle,
+  isVoiceMessage,
 } from '@sendbird/uikit-utils';
 
 import { UNKNOWN_USER_ID } from '../constants';
@@ -33,6 +33,7 @@ type StringSetCreateOptions = {
 export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOptions): StringSet => {
   const USER_NO_NAME = overrides?.LABELS?.USER_NO_NAME ?? '(No name)';
   const CHANNEL_NO_MEMBERS = overrides?.LABELS?.CHANNEL_NO_MEMBERS ?? '(No members)';
+
   return {
     OPEN_CHANNEL: {
       HEADER_TITLE: (channel) => getOpenChannelTitle(channel),
@@ -191,7 +192,11 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       CHANNEL_PREVIEW_TITLE: (currentUserId, channel) =>
         getGroupChannelTitle(currentUserId, channel, USER_NO_NAME, CHANNEL_NO_MEMBERS),
       CHANNEL_PREVIEW_TITLE_CAPTION: (channel, locale) => getGroupChannelPreviewTime(channel, locale ?? dateLocale),
-      CHANNEL_PREVIEW_BODY: (channel) => getGroupChannelLastMessage(channel),
+      CHANNEL_PREVIEW_BODY: (channel) => {
+        if (!channel.lastMessage) return '';
+        if (isVoiceMessage(channel.lastMessage)) return 'Voice message';
+        return getMessagePreviewBody(channel.lastMessage);
+      },
       TYPE_SELECTOR_HEADER_TITLE: 'Channel type',
       TYPE_SELECTOR_GROUP: 'Group',
       TYPE_SELECTOR_SUPER_GROUP: 'Super group',
@@ -232,7 +237,10 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       HEADER_INPUT_PLACEHOLDER: 'Search',
       HEADER_RIGHT: 'Search',
       SEARCH_RESULT_ITEM_TITLE: (message) => getMessagePreviewTitle(message),
-      SEARCH_RESULT_ITEM_BODY: (message) => getMessagePreviewBody(message),
+      SEARCH_RESULT_ITEM_BODY: (message) => {
+        if (isVoiceMessage(message)) return 'Voice message';
+        return getMessagePreviewBody(message);
+      },
       SEARCH_RESULT_ITEM_TITLE_CAPTION: (message, locale) => {
         return getMessagePreviewTime(message.createdAt, locale ?? dateLocale);
       },
@@ -241,6 +249,7 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       PERMISSION_APP_NAME: 'Application',
       PERMISSION_CAMERA: 'camera',
       PERMISSION_DEVICE_STORAGE: 'device storage',
+      PERMISSION_MICROPHONE: 'microphone',
       USER_NO_NAME,
       CHANNEL_NO_MEMBERS,
       TYPING_INDICATOR_TYPINGS: (users, NO_NAME = USER_NO_NAME) => {
@@ -255,6 +264,7 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
         const receiverNickname = parent.sender.nickname || USER_NO_NAME;
         return `${reply.sender.userId !== currentUserId ? senderNickname : 'You'} replied to ${receiverNickname}`;
       },
+      MESSAGE_UNAVAILABLE: 'Message unavailable',
 
       USER_BAR_ME_POSTFIX: ' (You)',
       USER_BAR_OPERATOR: 'Operator',
@@ -288,22 +298,26 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       CHANNEL_INPUT_REPLY_PREVIEW_TITLE: (user) => `Reply to ${user.nickname || USER_NO_NAME}`,
       CHANNEL_INPUT_REPLY_PREVIEW_BODY: (message) => {
         if (message.isFileMessage()) {
-          const fileType = getFileTypeFromMessage(message);
-          switch (fileType) {
-            case 'image':
+          const messageType = getMessageType(message);
+          switch (messageType) {
+            case 'file.image':
               return message.type.toLowerCase().includes('gif') ? 'GIF' : 'Photo';
-            case 'video':
+            case 'file.video':
               return 'Video';
-            case 'audio':
+            case 'file.audio':
               return 'Audio';
+            case 'file.voice':
+              return 'Voice message';
             default:
               return message.name;
           }
         } else if (message.isUserMessage()) {
           return message.message;
         }
-        return 'Unknown message type.';
+        return 'Unknown message';
       },
+      VOICE_MESSAGE: 'Voice message',
+      VOICE_MESSAGE_INPUT_CANCEL: 'Cancel',
       ...overrides?.LABELS,
     },
     FILE_VIEWER: {
@@ -329,7 +343,7 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       ALERT_DEFAULT_OK: 'OK',
       ALERT_PERMISSIONS_TITLE: 'Allow access?',
       ALERT_PERMISSIONS_MESSAGE: (permission, appName = 'Application') => {
-        return `${appName} need permission to access your ${permission}.`;
+        return `${appName} needs permission to access your ${permission}.`;
       },
       ALERT_PERMISSIONS_OK: 'Go to settings',
       PROMPT_DEFAULT_OK: 'Submit',
@@ -348,6 +362,8 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       DELETE_MSG_ERROR: "Couldn't delete message.",
       RESEND_MSG_ERROR: "Couldn't send message.",
       SEND_MSG_ERROR: "Couldn't send message.",
+      USER_MUTED_ERROR: "You're muted by the operator.",
+      CHANNEL_FROZEN_ERROR: 'Channel is frozen.',
       UPDATE_MSG_ERROR: "Couldn't edit message.",
       TURN_ON_NOTIFICATIONS_ERROR: "Couldn't turn on notifications.",
       TURN_OFF_NOTIFICATIONS_ERROR: "Couldn't turn off notifications.",

package/src/platform/createFileService.expo.ts

@@ -142,6 +142,16 @@ const createExpoFileService = ({
       }
       return response.uri;
     }
+    createRecordFilePath(customExtension = 'm4a'): { recordFilePath: string; uri: string } {
+      const basePath = fsModule.cacheDirectory;
+      if (!basePath) throw new Error('Cannot determine directory');
+
+      const filename = `record-${Date.now()}.${customExtension}`;
+      return {
+        uri: `${basePath}/${filename}`,
+        recordFilePath: `${basePath}/${filename}`,
+      };
+    }
   }
 
   return new ExpoFileServiceInterface();

package/src/platform/createFileService.native.ts

@@ -241,6 +241,25 @@ const createNativeFileService = ({
         } as const,
       };
     };
+
+    createRecordFilePath(customExtension = 'm4a'): { recordFilePath: string; uri: string } {
+      const filename = `record-${Date.now()}.${customExtension}`;
+      const path = `${fsModule.Dirs.CacheDir}/${filename}`;
+      return Platform.select({
+        ios: {
+          uri: path,
+          recordFilePath: filename,
+        },
+        android: {
+          uri: path.startsWith('file://') ? path : 'file://' + path,
+          recordFilePath: path,
+        },
+        default: {
+          uri: path,
+          recordFilePath: path,
+        },
+      });
+    }
   }
 
   return new NativeFileService();

package/src/platform/createPlayerService.expo.tsx

@@ -0,0 +1,142 @@
+import type * as ExpoAV from 'expo-av';
+
+import { matchesOneOf } from '@sendbird/uikit-utils';
+
+import expoPermissionGranted from '../utils/expoPermissionGranted';
+import type { PlayerServiceInterface, Unsubscribe } from './types';
+
+type Modules = {
+  avModule: typeof ExpoAV;
+};
+type PlaybackListener = Parameters<PlayerServiceInterface['addPlaybackListener']>[number];
+type StateListener = Parameters<PlayerServiceInterface['addStateListener']>[number];
+const createExpoPlayerService = ({ avModule }: Modules): PlayerServiceInterface => {
+  const sound = new avModule.Audio.Sound();
+
+  class VoicePlayer implements PlayerServiceInterface {
+    uri?: string;
+    state: PlayerServiceInterface['state'] = 'idle';
+
+    private readonly playbackSubscribers = new Set<PlaybackListener>();
+    private readonly stateSubscribers = new Set<StateListener>();
+
+    private setState = (state: PlayerServiceInterface['state']) => {
+      this.state = state;
+      this.stateSubscribers.forEach((callback) => {
+        callback(state);
+      });
+    };
+
+    private setListener = () => {
+      sound.setProgressUpdateIntervalAsync(100);
+      sound.setOnPlaybackStatusUpdate((status) => {
+        if (status.isLoaded) {
+          if (status.didJustFinish) this.stop();
+          if (status.isPlaying) {
+            this.playbackSubscribers.forEach((callback) => {
+              callback({
+                currentTime: status.positionMillis,
+                duration: status.durationMillis ?? 0,
+                stopped: status.didJustFinish,
+              });
+            });
+          }
+        }
+      });
+    };
+
+    private removeListener = () => {
+      sound.setOnPlaybackStatusUpdate(null);
+    };
+
+    public requestPermission = async (): Promise<boolean> => {
+      const status = await avModule.Audio.getPermissionsAsync();
+      if (expoPermissionGranted([status])) {
+        return true;
+      } else {
+        const status = await avModule.Audio.requestPermissionsAsync();
+        return expoPermissionGranted([status]);
+      }
+    };
+
+    public addPlaybackListener = (callback: PlaybackListener): Unsubscribe => {
+      this.playbackSubscribers.add(callback);
+      return () => {
+        this.playbackSubscribers.delete(callback);
+      };
+    };
+
+    public addStateListener = (callback: (state: PlayerServiceInterface['state']) => void): Unsubscribe => {
+      this.stateSubscribers.add(callback);
+      return () => {
+        this.stateSubscribers.delete(callback);
+      };
+    };
+
+    private prepare = async (uri: string) => {
+      this.setState('preparing');
+      await sound.loadAsync({ uri }, { shouldPlay: false }, true);
+      this.uri = uri;
+    };
+
+    public play = async (uri: string): Promise<void> => {
+      if (matchesOneOf(this.state, ['idle', 'stopped'])) {
+        try {
+          await this.prepare(uri);
+          this.setListener();
+          await sound.playAsync();
+          this.setState('playing');
+        } catch (e) {
+          this.setState('idle');
+          this.uri = undefined;
+          this.removeListener();
+          throw e;
+        }
+      } else if (matchesOneOf(this.state, ['paused']) && this.uri === uri) {
+        try {
+          this.setListener();
+          await sound.playAsync();
+          this.setState('playing');
+        } catch (e) {
+          this.removeListener();
+          throw e;
+        }
+      }
+    };
+
+    public pause = async (): Promise<void> => {
+      if (matchesOneOf(this.state, ['playing'])) {
+        await sound.pauseAsync();
+        this.removeListener();
+        this.setState('paused');
+      }
+    };
+
+    public stop = async (): Promise<void> => {
+      if (matchesOneOf(this.state, ['playing', 'paused'])) {
+        await sound.stopAsync();
+        await sound.unloadAsync();
+        this.removeListener();
+        this.setState('stopped');
+      }
+    };
+
+    public reset = async (): Promise<void> => {
+      await this.stop();
+      this.setState('idle');
+      this.uri = undefined;
+      this.playbackSubscribers.clear();
+      this.stateSubscribers.clear();
+    };
+
+    public seek = async (time: number): Promise<void> => {
+      if (matchesOneOf(this.state, ['playing', 'paused'])) {
+        await sound.playFromPositionAsync(time);
+      }
+    };
+  }
+
+  return new VoicePlayer();
+};
+
+export default createExpoPlayerService;