Release/v3.4.0 (#427)

[SDKRLSD-697](https://sendbird.atlassian.net/browse/SDKRLSD-697)

Author: HoonBaek

CHANGELOG.md

@@ -1,5 +1,155 @@
 # Changelog - v3
 
+## [v3.4.0] (Mar 6 2023)
+
+### Voice Message
+Voice message is a new type of message and feature that you can use in group channel. You can record your voice on the message input and send it to the channel. Also the messages will be displayed as a new design of the voice message. You are able to use this feature from this version.
+
+#### How to turn on/off
+* You can turn this feature on/off using the props `isVoiceMessageEnabled` on the <App /> and <SendbirdProvider /> components. Here is an example.
+```javascript
+import App from '@sendbird/uikit-react/App'
+import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider'
+import { useEffect } from 'react'
+
+const QuickStart = () => (<App isVoiceMessageEnabled />)
+const CustomApp = () => {
+  const [useVoiceMessage, setUseVoiceMessage] = useEffect(true)
+  return (
+    <SendbirdProvider
+      isVoiceMessageEnabled={useVoiceMessage}
+    >
+      {/* Implement your custom app here */}
+    </SendbirdProvider>
+  )
+}
+```
+
+#### How to customize the voice message in Channel and Thread?
+You can identify the voice message to check if `message.type` includes `sbu_type=voice`. But you can use `isVoiceMessage` util function to do that.
+```javascript
+import Channel from '@sendbird/uikit-react/Channel'
+import isVoiceMessage from '@sendbird/uikit-react/utils/message/isVoiceMessage'
+
+const CustomChannel = () => {
+  return (
+    <Channel
+      renderMessage={({ message }) => {
+        if (isVoiceMessage(message)) {
+          // Return your custom voice message item component
+        }
+        return null
+      }}
+    />
+  )
+}
+```
+
+#### Limitation & Next step
+* For now, it's not able to customize the inner components of VoiceMessageInput. We are going to provide an interface to customize it in the future. Until that time, you can replace the VoiceMessageInput component using the `renderVoiceMessageIcon` props of MessageInput component.
+
+#### What has been changed?
+* Add props `isVoiceMessageEnabled` and `voiceRecord` props to the App, `SendbirdProvider`, and `MessageInput` components, to turn on/off the voice message recording feature
+  ```javascript
+  import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider'
+  const CustomApp = () => {
+    return (
+      <SendbirdProvider
+        isVoiceMessageEnabled
+        voiceRecord={{
+          maxRecordingTime: 60000,
+          minRecordingTime: 1000,
+        }}
+      >
+        {/* implement custom application */}
+      </SendbirdProvider>
+    )
+  }
+  ```
+* Add props `onVoiceMessageIconClick` to the `MessageInput` component
+* Add props `onBeforeSendVoiceMessage` to the `Channel` component
+* Fetch message list including `MetaArray` in the `Channel` and `Thread` modules
+* Provide new IconType `AudioOnLined` & new IconColor `Primary2` and `OnBackground4`
+* Provide new string sets
+  ```javascript
+  import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider'
+  const CustomApp = () => {
+    return (
+      <SendbirdProvider
+        stringSet={{
+          BUTTON__OK: 'OK',
+          VOICE_MESSAGE: 'Voice Message',
+          MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_MUTED: 'You\'re muted by the operator.',
+          MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_FROZEN: 'Channel is frozen.',
+        }}
+      >
+        {/* implement custom application */}
+      </SendbirdProvider>
+    )
+  }
+  ```
+  * `BUTTON__OK`: 'OK' → Used on the submit button of pop up modal
+  * `MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_MUTED`: 'You\'re muted by the operator.' → Used in an alert pop-up modal
+  * `MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_FROZEN`: 'Channel is frozen.' → Used in an alert pop-up modal
+  * `VOICE_MESSAGE`: 'Voice Message' → Used in ChannelPreviewItem, QuoteMessage, and MessageSearch to appear that the message type is the voice## External Contributions
+
+#### What has been added?
+* Install `lamejs` to convert the audio file to mp3 (iOS support)
+* UI components
+  ```javascript
+  import PlaybackTime from "@sendbird/uikit-react/ui/PlaybackTime"
+  import ProgressBar from "@sendbird/uikit-react/ui/ProgressBar"
+  import VoiceMessageInput from "@sendbird/uikit-react/ui/VoiceMessageInput"
+  import VoiceMessageItemBody from "@sendbird/uikit-react/ui/VoiceMessageItemBody"
+  ```
+  * PlaybackTime: Display the current time in 00:00 format with the received millisecond value
+  * ProgressBar: Display the current progress status with the received maxSize and currentSize of millisecond unit value
+  * VoiceMessageInput: UI component for recording and playing a voice message
+  * VoiceMessageItemBody: UI component for rendering a voice message also able to play voice message
+* VoiceRecorder
+  ```javascript
+  import { VoiceRecorderProvider, useVoiceRecorderContext } from '@sendbird/uikit-react/VoiceRecorder/context'
+  import useVoiceRecorder from '@sendbird/uikit-react/VoiceRecorder/useVoiceRecorder'
+  ```
+  * VoiceRecorderProvider: A react context provider component providing `start`, and `stop` functions
+  * useVoiceRecorderContext: A react useContext hook of VoiceRecorderProvider
+  * useVoiceRecorder: A react hook that provides advanced context, `recordingLimit`, `recordingTime`, `recordingFile`, and `recordingStatus`. Recommend using this hook in the customized components.
+* VoicePlayer
+  ```javascript
+  import { VoicePlayerProvider, useVoicePlayerContext } from '@sendbird/uikit-react/VoicePlayer/context'
+  import useVoicePlayer from '@sendbird/uikit-react/VoicePlayer/useVoicePlayer'
+  ```
+  * VoicePlayerProvider: A react context provider component providing `play`, and `pause` functions
+  * useVoicePlayerContext: A react useContext hook of VoicePlayerProvider
+  * useVoicePlayer: A react hook that provides advanced context, `playbackTime`, `duration`, and `playingStatus`. Recommend using this hook in the customized components.
+* utils/isVoiceMessage: A function that you can check if the given message is a voice message
+  ```javascript
+  import isVoiceMessage from '@sendbird/uikit-react/utils/message/isVoiceMessage'
+  const isVoiceMsg: boolean = isVoiceMessage(message);
+  ```
+
+Features:
+* Add props `renderFileUploadIcon`, `renderVoiceMessageIcon`, and `renderSendMessageIcon` into the `Channel`, `ChannelUI`, and `MessageInput` component
+  ```javascript
+  interface MessageInputProps {
+    renderFileUploadIcon?: () =>  React.ReactElement;
+    renderVoiceMessageIcon?: () =>  React.ReactElement;
+    renderSendMessageIcon?: () =>  React.ReactElement;
+  }
+  ```
+
+Fixes:
+* Use ApplicationUserListQuery on ChannelSettings component
+* Fix some visual issues on the normal User Panel of ChannelSettings
+* Indentify faulty images in OG message
+* Add classname: sendbird-og-message-item-body__og-thumbnail__empty to identify faulty images in OG message
+  Clients can use CSS to target this class~
+  ```css
+  .sendbird-og-message-item-body__og-thumbnail__empty {
+    display: none;
+  }
+  ```
+
 ## [v3.3.7] (Feb 24 2023)
 
 Features:

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react",
-  "version": "3.3.7",
+  "version": "3.4.0",
   "description": "React based UI kit for sendbird",
   "main": "dist/index.js",
   "style": "dist/index.css",

package.json

@@ -66,6 +66,11 @@ declare module "SendbirdUIKitGlobal" {
     config?: SendbirdProviderConfig;
     useReaction?: boolean;
     useMessageGrouping?: boolean;
+    isVoiceMessageEnabled?: boolean;
+    voiceRecord?: {
+      maxRecordingTime?: number,
+      minRecordingTime?: number,
+    };
     stringSet?: Record<string, string>;
     colorSet?: Record<string, string>;
     imageCompression?: {
@@ -218,33 +223,35 @@ declare module "SendbirdUIKitGlobal" {
     userId: string;
     appId: string;
     accessToken?: string;
-    configureSession?: (sdk: SendbirdGroupChat | SendbirdOpenChat) => SessionHandler;
+    configureSession?: (sdk: SendbirdChat) => SessionHandler;
     customApiHost?: string,
     customWebSocketHost?: string,
-    // mediaQueryBreakPoint?: string | boolean,
-    children?: React.ReactNode | React.ReactElement;
+    children?: React.ReactElement;
     theme?: 'light' | 'dark';
     nickname?: string;
     profileUrl?: string;
     dateLocale?: Locale;
     disableUserProfile?: boolean;
     disableMarkAsDelivered?: boolean;
-    onUserProfileMessage?: (props: GroupChannel) => void;
-    renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode | React.ReactElement;
+    renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
     allowProfileEdit?: boolean;
     userListQuery?(): UserListQuery;
     config?: SendbirdProviderConfig;
     stringSet?: Record<string, string>;
     colorSet?: Record<string, string>;
-    isMentionEnabled?: boolean;
     imageCompression?: {
       compressionRate?: number,
       resizingWidth?: number | string,
       resizingHeight?: number | string,
     };
-    isReactionEnabled?: boolean,
-    isTypingIndicatorEnabledOnChannelList?: boolean,
-    isMessageReceiptStatusEnabledOnChannelList?: boolean,
+    isMentionEnabled?: boolean;
+    isVoiceMessageEnabled?: boolean;
+    voiceRecord?: {
+      maxRecordingTime?: number,
+      minRecordingTime?: number,
+    };
+    isTypingIndicatorEnabledOnChannelList?: boolean;
+    isMessageReceiptStatusEnabledOnChannelList?: boolean;
   }
 
   export interface SendBirdStateConfig {
@@ -272,6 +279,11 @@ declare module "SendbirdUIKitGlobal" {
       resizingWidth?: number | string,
       resizingHeight?: number | string,
     };
+    isVoiceMessageEnabled?: boolean;
+    voiceRecord?: {
+      maxRecordingTime?: number,
+      minRecordingTime?: number,
+    };
     isTypingIndicatorEnabledOnChannelList?: boolean;
     isMessageReceiptStatusEnabledOnChannelList?: boolean;
     replyType: ReplyType;
@@ -464,6 +476,14 @@ declare module "SendbirdUIKitGlobal" {
     onCancel: () => void;
   };
 
+  export enum VoicePlayerStatus {
+    IDLE = 'IDLE',
+    PREPARING = 'PREPARING',
+    READY_TO_PLAY = 'READY_TO_PLAY',
+    PLAYING = 'PLAYING',
+    COMPLETED = 'COMPLETED',
+  }
+
   /**
    * Channel
    */
@@ -1194,6 +1214,11 @@ declare module '@sendbird/uikit-react/utils/message/getOutgoingMessageState' {
   ): OutgoingMessageStates;
 }
 
+declare module '@sendbird/uikit-react/utils/message/isVoiceMessage' {
+  import type { FileMessage } from '@sendbird/chat/message';
+  export function isVoiceMessage(message: FileMessage): boolean;
+}
+
 /** ChannelList */
 declare module '@sendbird/uikit-react/ChannelList' {
   import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
@@ -1839,7 +1864,17 @@ declare module '@sendbird/uikit-react/ui/FileMessageItemBody' {
   }
   const FileMessageItemBody: React.FC<FileMessageItemBodyProps>;
   export default FileMessageItemBody;
+}
 
+declare module '@sendbird/uikit-react/ui/VoiceMessageItemBody' {
+  interface VoiceMessageItemBodyProps {
+    minRecordTime?: number;
+    maximumValue: number;
+    currentValue?: number;
+    currentType: VoicePlayerStatus;
+  }
+  type VoiceMessageItemBody = React.FC<VoiceMessageItemBodyProps>;
+  export default VoiceMessageItemBody;
 }
 
 declare module '@sendbird/uikit-react/ui/FileViewer' {
@@ -2005,6 +2040,7 @@ declare module '@sendbird/uikit-react/ui/MessageInput' {
     className?: Array<string>,
     isEdit?: boolean,
     isMentionEnabled?: boolean;
+    isVoiceMessageEnabled?: boolean;
     disabled?: boolean,
     // value is removed when channelURL changes
     value?: string,
@@ -2022,6 +2058,7 @@ declare module '@sendbird/uikit-react/ui/MessageInput' {
     onMentionedUserIdsUpdated?: (userIds: Array<string>) => void,
     onKeyUp?: (e: React.KeyboardEvent<HTMLDivElement>) => void,
     onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void,
+    onVoiceMessageIconClick?: () => void;
     renderFileUploadIcon?: () =>  React.ReactElement;
     renderVoiceMessageIcon?: () =>  React.ReactElement;
     renderSendMessageIcon?: () =>  React.ReactElement;
@@ -2030,6 +2067,29 @@ declare module '@sendbird/uikit-react/ui/MessageInput' {
   export default MessageInput;
 }
 
+declare module '@sendbird/uikit-react/ui/VoiceMessageInput' {
+  export enum VoiceMessageInputStatus {
+    READY_TO_RECORD = 'READY_TO_RECORD',
+    RECORDING = 'RECORDING',
+    READY_TO_PLAY = 'READY_TO_PLAY',
+    PLAYING = 'PLAYING',
+  }
+  interface VoiceMessageInputProps {
+    minRecordTime?: number;
+    maximumValue: number;
+    currentValue?: number;
+    currentType: VoiceMessageInputStatus;
+    onCancelClick?: () => void;
+    onControlClick?: (type: VoiceMessageInputStatus) => void;
+    onSubmitClick?: () => void;
+    renderCancelButton?: () => React.ReactElement;
+    renderControlButton?: (type: VoiceMessageInputStatus) => React.ReactElement;
+    renderSubmitButton?: () => React.ReactElement;
+  }
+  type VoiceMessageInput = React.FC<VoiceMessageInputProps>;
+  export default VoiceMessageInput;
+}
+
 declare module '@sendbird/uikit-react/ui/MessageItemMenu' {
   import type { GroupChannel } from '@sendbird/chat/groupChannel';
   import type { FileMessage, UserMessage } from '@sendbird/chat/message';

scripts/index_d_ts

@@ -42,7 +42,6 @@ import {
 } from '@sendbird/chat/openChannel';
 import { UikitMessageHandler } from './lib/selectors';
 import { RenderCustomSeparatorProps } from './types';
-import { isVoiceMessage } from './utils';
 
 type ReplyType = "NONE" | "QUOTE_REPLY" | "THREAD";
 

src/index.d.ts

@@ -171,9 +171,9 @@ export const isVoiceMessage = (message: FileMessage): boolean => {
     return true;
   }
   // ex) message.metaArrays = [{ key: 'KEY_INTERNAL_MESSAGE_TYPE', value: ['voice/m4a'] }]
-  return isVOICE_MESSAGE_MIME_TYPE(message.metaArrays.find((metaArray) => metaArray.key === 'KEY_INTERNAL_MESSAGE_TYPE')?.value?.[0]);
+  return isVoiceMessageMimeType(message.metaArrays.find((metaArray) => metaArray.key === 'KEY_INTERNAL_MESSAGE_TYPE')?.value?.[0]);
 };
-export const isVOICE_MESSAGE_MIME_TYPE = (type: string): boolean => (/^voice\//.test(type));
+export const isVoiceMessageMimeType = (type: string): boolean => (/^voice\//.test(type));
 
 export const isEditedMessage = (message: AdminMessage | UserMessage | FileMessage): boolean => isUserMessage(message) && (message?.updatedAt > 0);
 export const isEnabledOGMessage = (message: UserMessage): boolean => (

src/utils/index.ts

@@ -1,4 +1,3 @@
-import { isVoiceMessage } from ".";
+import { isVoiceMessage as _isVoiceMessage } from ".";
 
-export default isVoiceMessage;
-// mentioned on docs
+export const isVoiceMessage = _isVoiceMessage;