Skip to main content

Voice Note Conversation

Overview

The VoiceNoteConversation component allows users to listen to and interact with voice notes shared in conversations within the LikeMinds chat application. It provides playback controls, such as play, pause, and seek, enhancing the experience of audio-based communication in chatrooms. This component ensures that users can easily send and listen to voice messages, enriching the overall chat experience.

GitHub File:

LMFeedMediaPreviewScreen

Customisation

The VoiceNoteConversation customisations can be done using chatBubbleStyles as shown in the Message component.

Usage Example

  • In your app, create a CustomChatroomScreen file, wrap it with the ChatRoom context provider.
  • Now, you can pass your own custom Voice note message component as prop to the ChatRoom context provider
import {
ChatRoom,
ChatroomHeader,
MessageList,
MessageInput,
useChatroomContext,
useMessageListContext,

ChatroomTopic,
STYLES
} from "@likeminds.community/chat-rn-core";
import {InputBoxContextProvider} from '@likeminds.community/chat-rn-core/ChatSX/context/InputBoxContext';
import {ChatroomContextValues} from '@likeminds.community/chat-rn-core/ChatSX/context/ChatroomContext';
import MessageInputBox from "@likeminds.community/chat-rn-core/ChatSX/components/InputBox";

export function CustomChatroomScreen() {

const {
chatroomID,
chatroomWithUser,
currentChatroomTopic,
chatroomType,
replyChatID,
isEditable,
chatroomName,
isSecret,
refInput,
chatroomDBDetails,
chatRequestState,
setIsEditable,
handleFileUpload,
joinSecretChatroom,
onTapToUndo,
}: ChatroomContextValues = useChatroomContext();

return (
<ChatRoom
customVoiceNoteAttachmentConversation={<"CUSTOM_VOICENOTE_MESSAGE_COMPONENT">}
>

{/* ChatroomHeader */}
<ChatroomHeader />

{/* ChatroomTopic */}
<ChatroomTopic />

{/* MessageList */}
<MessageList />

{/* Input Box Flow */}
<InputBoxContextProvider
chatroomName={chatroomName}
chatroomWithUser={chatroomWithUser}
replyChatID={replyChatID}
chatroomID={chatroomID}
isUploadScreen={false}
myRef={refInput}
handleFileUpload={handleFileUpload}
isEditable={isEditable}
setIsEditable={(value: boolean) => {
setIsEditable(value);
}}
isSecret={isSecret}
chatroomType={chatroomType}
currentChatroomTopic={currentChatroomTopic}
isPrivateMember={chatroomDBDetails.isPrivateMember}
chatRequestState={chatRequestState}>
<MessageInput>
<MessageInputBox />
</MessageInput>
</InputBoxContextProvider>
</ChatRoom>
);
}