Skip to content

fix: Modify handling click event of VoiceMessageInput #425

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
Mar 3, 2023
Merged

fix: Modify handling click event of VoiceMessageInput #425

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
926975e
Do not pause voice player when empty useVoicePlayer is unmounted
EunSeo-Baek Mar 3, 2023
3029801
Apply throttling to the VoiceMessageInput component
EunSeo-Baek Mar 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/hooks/VoicePlayer/useVoicePlayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,11 @@ export const useVoicePlayer = ({

useEffect(() => {
return () => {
// Can't get the current AudioPlayer through the React hooks(useReducer or useState) in this scope
const voiceAudioPlayerElement = document.getElementById(VOICE_PLAYER_AUDIO_ID);
(voiceAudioPlayerElement as HTMLAudioElement)?.pause?.();
if (audioFile || audioFileUrl) {
// Can't get the current AudioPlayer through the React hooks(useReducer or useState) in this scope
const voiceAudioPlayerElement = document.getElementById(VOICE_PLAYER_AUDIO_ID);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use ref later ~

(voiceAudioPlayerElement as HTMLAudioElement)?.pause?.();
}
}
}, []);

Expand Down
46 changes: 32 additions & 14 deletions src/ui/VoiceMessageInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useMemo } from 'react';
import React, { useCallback, useMemo, useState } from 'react';
import './index.scss';

import PlaybackTime from '../PlaybackTime';
Expand All @@ -8,7 +8,7 @@ import Icon, { IconTypes, IconColors } from '../Icon';
import Label, { LabelTypography, LabelColors } from '../Label';
import { useLocalization } from '../../lib/LocalizationContext';
import ControlerIcon from './controlerIcons';
import { VOICE_RECORDER_DEFAULT_MIN } from '../../utils/consts';
import { VOICE_RECORDER_CLICK_BUFFER_TIME, VOICE_RECORDER_DEFAULT_MIN } from '../../utils/consts';
import { VoiceMessageInputStatus } from './types';

export interface VoiceMessageInputProps {
Expand Down Expand Up @@ -36,6 +36,7 @@ export const VoiceMessageInput = ({
renderControlButton,
renderSubmitButton,
}: VoiceMessageInputProps): React.ReactElement => {
const [lastClickTime, setLastClickTime] = useState<number>(0);
const isReadyToRecord = useMemo(() => currentType === VoiceMessageInputStatus.READY_TO_RECORD, [currentType]);
const isRecording = useMemo(() => currentType === VoiceMessageInputStatus.RECORDING, [currentType]);
const isSendButtonDisabled = useMemo(() => (
Expand All @@ -49,6 +50,31 @@ export const VoiceMessageInput = ({
}, [currentType]);
const { stringSet } = useLocalization();

const handleOnCancelClick = () => {
const currentTime = Date.now();
if (currentTime - lastClickTime > VOICE_RECORDER_CLICK_BUFFER_TIME) {
onCancelClick();
setLastClickTime(currentTime);
}
};
const handleOnControlClick = useCallback(() => {
const currentTime = Date.now();
console.log(currentTime - lastClickTime, VOICE_RECORDER_CLICK_BUFFER_TIME)
if (currentTime - lastClickTime > VOICE_RECORDER_CLICK_BUFFER_TIME) {
onControlClick(currentType);
setLastClickTime(currentTime);
}
}, [currentType]);
const handleOnSubmitClick = () => {
const currentTime = Date.now();
if (currentTime - lastClickTime > VOICE_RECORDER_CLICK_BUFFER_TIME) {
if (!isSendButtonDisabled) {
onSubmitClick();
}
setLastClickTime(currentTime);
}
};

return (
<div className="sendbird-voice-message-input">
<div className="sendbird-voice-message-input__indicator">
Expand All @@ -60,11 +86,7 @@ export const VoiceMessageInput = ({
currentSize={currentValue}
/>
</div>
{
(isRecording) && (
<div className="sendbird-voice-message-input__indicator__on-rec" />
)
}
{(isRecording) ? (<div className="sendbird-voice-message-input__indicator__on-rec" />) : null}
<PlaybackTime
className="sendbird-voice-message-input__indicator__playback-time"
time={isPlayMode ? maximumValue - currentValue : currentValue}
Expand All @@ -76,7 +98,7 @@ export const VoiceMessageInput = ({
renderCancelButton?.() || (
<TextButton
className="sendbird-voice-message-input__controler__cancel"
onClick={onCancelClick}
onClick={handleOnCancelClick}
disableUnderline
>
<Label
Expand All @@ -92,7 +114,7 @@ export const VoiceMessageInput = ({
renderControlButton?.(currentType) || (
<div
className="sendbird-voice-message-input__controler__main"
onClick={() => onControlClick(currentType)}
onClick={handleOnControlClick}
>
<ControlerIcon inputState={currentType} />
</div>
Expand All @@ -102,11 +124,7 @@ export const VoiceMessageInput = ({
renderSubmitButton?.() || (
<div
className={`sendbird-voice-message-input__controler__submit ${isSendButtonDisabled ? 'voice-message--disabled' : ''}`}
onClick={() => {
if (!isSendButtonDisabled) {
onSubmitClick();
}
}}
onClick={handleOnSubmitClick}
>
<Icon
width="19px"
Expand Down
1 change: 1 addition & 0 deletions src/utils/consts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
// voice message record
export const VOICE_RECORDER_CLICK_BUFFER_TIME = 250;
export const VOICE_RECORDER_DEFAULT_MIN = 1000;
export const VOICE_RECORDER_DEFAULT_MAX = 60000;
export const VOICE_RECORDER_MIME_TYPE = 'audio/webm';
Expand Down