Fix/UI kit 3053/modify issues on voice message

[HoonBaek]

UIKIT-3256

Description Of Changes

Creates

• 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

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

Types Of Changes

What types of changes does your code introduce to this project?
Put an x in the boxes that apply_

• Bugfix
• New feature
• Documentation (correction or otherwise)
• Cosmetics (whitespace, appearance (ex) Prettier)
• Build configuration
• Improvement (refactor code)

[sravan-s]

Thanks @HoonBaek This looks like a gigantic amount of work 🙇