-
Notifications
You must be signed in to change notification settings - Fork 144
Feature/UI kit 3043/integrate voice message #395
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Closed
HoonBaek
wants to merge
30
commits into
feature/UIKIT-3042/Implment-VoiceMessageInput-and-Voice-MessageItem
from
feature/UIKIT-3043/Integrate-voice-message
Closed
Changes from all commits
Commits
Show all changes
30 commits
Select commit
Hold shift + click to select a range
4130e41
Add props for global option of voice recoring
HoonBaek a12c5d8
Create VoiceMessageInputWrapper component
HoonBaek 33da86b
Modify the VoiceMessageInput clear state logic
HoonBaek 13dc596
Add props for voice message to the MessageInput component
HoonBaek f157bb3
Modify the playback time calculation logic
HoonBaek cd5d38a
Send voice message on Channel
HoonBaek 04ff001
Create useSendVoiceMessageCallback hook in Channel
HoonBaek 52ed1c2
Put VoiceRecorderProvider and VoicePlayerProvider into SendbirdProvider
HoonBaek 6f73f03
Add type definitions for voice message
HoonBaek 9a2dc2d
Apply voice message to the MessageContent
HoonBaek 8e30c93
Appear the border radius of VoiceMessageItemBody
HoonBaek dfcd878
Set file name, Voice message when recording voice
HoonBaek 7f9d133
Apply audio duration to VoiceMessageInput and VoiceMessageItem
HoonBaek efcebd0
Rename file name VoiceMessageWrapper to VoiceMessageInputWrapper
HoonBaek 67fdd20
Stop recording automatically when clicking send button
HoonBaek d0fafb9
Apply VoiceMessageInput and VoiceMessageItem to the Thread
HoonBaek 746ab93
Activate ProgressBar in play mode of VoiceMessageInput
HoonBaek 547349b
Modify the VoiceMessageInput ProgressBar progress frame
HoonBaek ceac501
Stop recording when out of maxRecordingTime
HoonBaek a7d5351
Change the voice message internal protocol
HoonBaek 301717f
Add a file extension to the file name when sending voice message
HoonBaek 51067e8
Add new icon AudioOnLined & Migrate Icon util functions to TS
HoonBaek 412ff5d
Apply the audio icon into the MessageInput component
HoonBaek c876648
Modify PlaybackTime comp to round down with time
HoonBaek 18242c7
Replace the AudioOnLined icon with same width and height size
HoonBaek c77d4f4
Add a storybook of PlaybackTime component
HoonBaek 28c8414
Make playback time to count down when playing audio
HoonBaek cdd7f19
Remove unexpected use of file extension & Add missing return type
HoonBaek 51ebf0a
Disable the send button by minRecordingTime of VoiceMessageInput
HoonBaek 045f2b7
Apply minRecordingTime to the VoiceMessageInput behavior
HoonBaek File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -20,6 +20,8 @@ import { LoggerFactory } from './Logger'; | |
import pubSubFactory from './pubSub/index'; | ||
import useAppendDomNode from '../hooks/useAppendDomNode'; | ||
|
||
import { VoiceRecorderProvider } from '../hooks/useVoiceRecorder'; | ||
import { VoicePlayerProvider } from '../hooks/useVoicePlayer'; | ||
import { LocalizationProvider } from './LocalizationContext'; | ||
import { MediaQueryProvider } from './MediaQueryContext'; | ||
import getStringSet from '../ui/Label/stringSet'; | ||
|
@@ -50,6 +52,8 @@ export default function Sendbird(props) { | |
imageCompression, | ||
isReactionEnabled, | ||
isMentionEnabled, | ||
isVoiceMessageEnabled, | ||
voiceRecord, | ||
isTypingIndicatorEnabledOnChannelList, | ||
isMessageReceiptStatusEnabledOnChannelList, | ||
replyType, | ||
|
@@ -200,6 +204,8 @@ export default function Sendbird(props) { | |
}, | ||
isReactionEnabled, | ||
isMentionEnabled: isMentionEnabled || false, | ||
isVoiceMessageEnabled, | ||
voiceRecord, | ||
userMention: { | ||
maxMentionCount: userMention?.maxMentionCount || 10, | ||
maxSuggestionCount: userMention?.maxSuggestionCount || 15, | ||
|
@@ -212,7 +218,11 @@ export default function Sendbird(props) { | |
> | ||
<MediaQueryProvider logger={logger} mediaQueryBreakPoint={mediaQueryBreakPoint}> | ||
<LocalizationProvider stringSet={localeStringSet} dateLocale={dateLocale}> | ||
{children} | ||
<VoiceRecorderProvider> | ||
<VoicePlayerProvider> | ||
{children} | ||
</VoicePlayerProvider> | ||
</VoiceRecorderProvider> | ||
</LocalizationProvider> | ||
</MediaQueryProvider> | ||
</SendbirdSdkContext.Provider> | ||
|
@@ -262,6 +272,11 @@ Sendbird.propTypes = { | |
colorSet: PropTypes.objectOf(PropTypes.string), | ||
isReactionEnabled: PropTypes.bool, | ||
isMentionEnabled: PropTypes.bool, | ||
isVoiceMessageEnabled: PropTypes.bool, | ||
voiceRecord: PropTypes.shape({ | ||
maxRecordingTime: PropTypes.number, | ||
minRecordingTime: PropTypes.number, | ||
}), | ||
Comment on lines
+275
to
+279
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. discuss: isnt it better for this prop to be in Channel? |
||
imageCompression: PropTypes.shape({ | ||
compressionRate: PropTypes.number, | ||
resizingWidth: PropTypes.oneOfType([ | ||
|
@@ -300,6 +315,11 @@ Sendbird.defaultProps = { | |
imageCompression: {}, | ||
isReactionEnabled: true, | ||
isMentionEnabled: false, | ||
isVoiceMessageEnabled: true, | ||
voiceRecord: { | ||
maxRecordingTime: 60000, | ||
minRecordingTime: 1000, | ||
}, | ||
isTypingIndicatorEnabledOnChannelList: false, | ||
isMessageReceiptStatusEnabledOnChannelList: false, | ||
replyType: 'NONE', | ||
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
106 changes: 106 additions & 0 deletions
106
src/smart-components/Channel/components/MessageInput/VoiceMessageInputWrapper.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
import React, { useEffect, useState } from 'react'; | ||
import './voice-message-wrapper.scss'; | ||
|
||
import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext'; | ||
import { useVoicePlayer } from '../../../../hooks/useVoicePlayer/useVoicePlayer'; | ||
import { useVoiceRecorder } from '../../../../hooks/useVoiceRecorder/useVoiceRecorder'; | ||
import VoiceMessageInput, { VoiceMessageInputStatus } from '../../../../ui/VoiceMessageInput'; | ||
|
||
export interface VoiceMessageInputWrapperProps { | ||
onCancelClick?: () => void; | ||
onSubmitClick?: (file: File, duration: number) => void; | ||
} | ||
|
||
export const VoiceMessageInputWrapper = ({ | ||
onCancelClick, | ||
onSubmitClick, | ||
}: VoiceMessageInputWrapperProps): React.ReactElement => { | ||
const [currentAudioFile, setAudioFile] = useState(null); | ||
const [audioDuration, setDuration] = useState(0); | ||
const [voiceInputState, setVoiceInputState] = useState(VoiceMessageInputStatus.READY_TO_RECORD); | ||
const [isRecording, setIsRecording] = useState(true); | ||
const [isSubmited, setSubmit] = useState(false); | ||
const { config } = useSendbirdStateContext(); | ||
const { voiceRecord } = config; | ||
const { maxRecordingTime } = voiceRecord; | ||
const { | ||
start, | ||
stop, | ||
recordingTime, | ||
} = useVoiceRecorder({ | ||
onRecordingStarted: () => { | ||
setVoiceInputState(VoiceMessageInputStatus.RECORDING); | ||
}, | ||
onRecordingEnded: (recordedFile) => { | ||
setAudioFile(recordedFile); | ||
setVoiceInputState(VoiceMessageInputStatus.READY_TO_PLAY); | ||
}, | ||
}); | ||
const { | ||
play, | ||
pause, | ||
} = useVoicePlayer({ | ||
onPlayingStarted: () => { | ||
setVoiceInputState(VoiceMessageInputStatus.PLAYING); | ||
}, | ||
onPlayingStopped: () => { | ||
setVoiceInputState(VoiceMessageInputStatus.READY_TO_PLAY); | ||
}, | ||
}); | ||
|
||
useEffect(() => { | ||
if (voiceInputState === VoiceMessageInputStatus.READY_TO_RECORD | ||
|| voiceInputState === VoiceMessageInputStatus.RECORDING | ||
) { | ||
setIsRecording(true); | ||
} else { | ||
setIsRecording(false); | ||
} | ||
|
||
if (voiceInputState === VoiceMessageInputStatus.READY_TO_PLAY) { | ||
setDuration(recordingTime); | ||
} | ||
}, [voiceInputState]); | ||
useEffect(() => { | ||
if (isSubmited && currentAudioFile) { | ||
onSubmitClick(currentAudioFile, recordingTime); | ||
} | ||
}, [isSubmited, currentAudioFile, recordingTime]); | ||
useEffect(() => { | ||
if (recordingTime >= maxRecordingTime) { | ||
stop(); | ||
} | ||
}, [recordingTime, maxRecordingTime]); | ||
|
||
return ( | ||
<div className="sendbird-voice-message-input-wrapper"> | ||
<VoiceMessageInput | ||
maxSize={isRecording ? maxRecordingTime : audioDuration} | ||
inputState={voiceInputState} | ||
onCancelClick={onCancelClick} | ||
onSubmitClick={() => { | ||
stop(); | ||
setSubmit(true); | ||
}} | ||
onRecordClick={() => { | ||
start(); | ||
}} | ||
onRecordStopClick={(playbackTime) => { | ||
if (playbackTime >= 1000) { | ||
stop(); | ||
} else { | ||
setVoiceInputState(VoiceMessageInputStatus.READY_TO_RECORD); | ||
} | ||
}} | ||
onPlayClick={() => { | ||
play(currentAudioFile); | ||
}} | ||
onPauseClick={() => { | ||
pause(); | ||
}} | ||
/> | ||
</div> | ||
); | ||
}; | ||
|
||
export default VoiceMessageInputWrapper; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Voice message need extension, no?