feature: Voice Message

[HoonBaek]

Description

Adds

• Install lamejs to transcode the audio file to mp3
• 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);

Edits

• Add rendering props to MessaegInput
  • renderFileUploadIcon
  • renderVoiceMessageIcon
  • renderSendMessageIcon
• Add props isVoiceMessageEnabled and voiceRecord props to the App, SendbirdProvider, and MessageInput components, to turn on/off the voice message recording feature

  <SendbirdProvider
    isVoiceMessageEnabled
    voiceRecord={{
      maxRecordingTime: 60000,
      minRecordingTime: 1000,
    }}
  >
    {/* implement custom application */}
  </SendbirdProvider>

• Add props renderFileUploadIcon, renderVoiceMessageIcon, and renderSendMessageIcon into the Channel, ChannelUI, and MessageInput component
• Add onVoiceMessageIconClick props to the MessageInput component
• Add onBeforeSendVoiceMessage props to the Channel component
• Fetch message list including MetaArray in the Channel and Thread modules
• Provide new icon-type AudioOnLined & new icon-color Primary2 and OnBackground4
• Provide new string sets

  <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