@sendbird/uikit-react 3.4.0 on Node.js NPM

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 and components. Here is an example.

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.

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

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

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
```
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
```
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
```
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

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

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~
```
.sendbird-og-message-item-body__og-thumbnail__empty {
  display: none;
}
```

What's Changed

fix: add classname for empty OG-image by @sravan-s in #412
fix: use applicationuserlistQuery from ChannelSetting by @sravan-s in #419
feature: Voice Message by @HoonBaek in #426
fix: Disabling voice message input submit button by @HoonBaek in #428
feat: bring lamejs.all built with parcel by @sravan-s in #429
Release/v3.4.0 by @HoonBaek in #427

Full Changelog: v3.3.7...v3.4.0

@sendbird/uikit-react 3.4.0 [v3.4.0] (Mar 6 2023) on Node.js NPM