diff --git a/webapp/channels/src/actions/global_actions.tsx b/webapp/channels/src/actions/global_actions.tsx index 0304020150..8c9b0176a3 100644 --- a/webapp/channels/src/actions/global_actions.tsx +++ b/webapp/channels/src/actions/global_actions.tsx @@ -217,7 +217,8 @@ export function sendAddToChannelEphemeralPost(user: UserProfile, addedUsername: } let lastTimeTypingSent = 0; -export function emitLocalUserTypingEvent(type = 'typing', channelId: string, parentPostId: string) { +let recordingInterval: ReturnType | null = null; +export function emitLocalUserTypingEvent(eventType = 'typing', channelId: string, parentPostId: string) { const userTyping: ActionFuncAsync = async (actionDispatch, actionGetState) => { const state = actionGetState(); const config = getConfig(state); @@ -237,15 +238,23 @@ export function emitLocalUserTypingEvent(type = 'typing', channelId: string, par const timeBetweenUserTypingUpdatesMilliseconds = Utils.stringToNumber(config.TimeBetweenUserTypingUpdatesMilliseconds); const maxNotificationsPerChannel = Utils.stringToNumber(config.MaxNotificationsPerChannel); - if (type === 'typing') { + if (eventType === 'typing') { if (((t - lastTimeTypingSent) > timeBetweenUserTypingUpdatesMilliseconds) && (membersInChannel < maxNotificationsPerChannel) && (config.EnableUserTypingMessages === 'true')) { WebSocketClient.userTyping(channelId, userId, parentPostId); lastTimeTypingSent = t; } - } else if (type === 'recording') { - WebSocketClient.userRecording(channelId, userId, parentPostId); + } else if (eventType === 'recording') { + const TIMER = 1000; + recordingInterval = setInterval(() => { + WebSocketClient.userRecording(channelId, userId, parentPostId); + }, TIMER); + } else if (eventType === 'stop') { + if (recordingInterval !== null) { + clearInterval(recordingInterval); + } } + return {data: true}; }; diff --git a/webapp/channels/src/components/advanced_create_comment/advanced_create_comment.tsx b/webapp/channels/src/components/advanced_create_comment/advanced_create_comment.tsx index 43728b54b0..bfe59242ed 100644 --- a/webapp/channels/src/components/advanced_create_comment/advanced_create_comment.tsx +++ b/webapp/channels/src/components/advanced_create_comment/advanced_create_comment.tsx @@ -225,7 +225,6 @@ class AdvancedCreateComment extends React.PureComponent { private isDraftEdited = false; private isNonFormattedPaste = false; private timeoutId: number | null = null; - private recordingInterval: ReturnType | null = null; private readonly textboxRef: React.RefObject; private readonly fileUploadRef: React.RefObject; @@ -315,7 +314,6 @@ class AdvancedCreateComment extends React.PureComponent { if (this.timeoutId !== null) { clearTimeout(this.timeoutId); } - this.stopRecordingEvent(); } componentDidUpdate(prevProps: Props, prevState: State) { @@ -768,36 +766,9 @@ class AdvancedCreateComment extends React.PureComponent { emitShortcutReactToLastPostFrom(Locations.RHS_ROOT); }; - // infomaniak - emitTypingEvent = (type = 'typing') => { + emitTypingEvent = (eventType = 'typing') => { const {channelId, rootId} = this.props; - switch (type) { - case 'typing': - GlobalActions.emitLocalUserTypingEvent('typing', channelId, rootId); - break; - case 'recording': - this.emitRecordingEvent(); - break; - case 'stop': - this.stopRecordingEvent(); - break; - default: - break; - } - }; - - emitRecordingEvent = () => { - const TIMER = 1000; - this.recordingInterval = setInterval(() => { - const {channelId, rootId} = this.props; - GlobalActions.emitLocalUserTypingEvent('recording', channelId, rootId); - }, TIMER); - }; - - stopRecordingEvent = () => { - if (this.recordingInterval !== null) { - clearInterval(this.recordingInterval); - } + GlobalActions.emitLocalUserTypingEvent(eventType, channelId, rootId); }; handleChange = (e: React.ChangeEvent) => { diff --git a/webapp/channels/src/components/advanced_create_post/advanced_create_post.tsx b/webapp/channels/src/components/advanced_create_post/advanced_create_post.tsx index 5f5cc87f10..1bbf8119cc 100644 --- a/webapp/channels/src/components/advanced_create_post/advanced_create_post.tsx +++ b/webapp/channels/src/components/advanced_create_post/advanced_create_post.tsx @@ -266,7 +266,6 @@ class AdvancedCreatePost extends React.PureComponent { private isDraftSubmitting = false; private isNonFormattedPaste = false; private timeoutId: number | null = null; - private recordingInterval: ReturnType | null = null; private topDiv: React.RefObject; private textboxRef: React.RefObject; @@ -366,7 +365,6 @@ class AdvancedCreatePost extends React.PureComponent { if (this.timeoutId !== null) { clearTimeout(this.timeoutId); } - this.stopRecordingEvent(); } getChannelMemberCountsByGroup = () => { @@ -903,36 +901,9 @@ class AdvancedCreatePost extends React.PureComponent { this.emitTypingEvent(); }; - // infomaniak - emitTypingEvent = (type = 'typing') => { + emitTypingEvent = (eventType = 'typing') => { const channelId = this.props.currentChannel.id; - switch (type) { - case 'typing': - GlobalActions.emitLocalUserTypingEvent('typing', channelId, ''); - break; - case 'recording': - this.emitRecordingEvent(); - break; - case 'stop': - this.stopRecordingEvent(); - break; - default: - break; - } - }; - - emitRecordingEvent = () => { - const TIMER = 1000; - this.recordingInterval = setInterval(() => { - const channelId = this.props.currentChannel.id; - GlobalActions.emitLocalUserTypingEvent('recording', channelId, ''); - }, TIMER); - }; - - stopRecordingEvent = () => { - if (this.recordingInterval !== null) { - clearInterval(this.recordingInterval); - } + GlobalActions.emitLocalUserTypingEvent(eventType, channelId, ''); }; setDraftAsPostType = (channelId: Channel['id'], draft: PostDraft, postType?: PostDraft['postType']) => { diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx index 307668e934..be40431c44 100644 --- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx +++ b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx @@ -92,7 +92,7 @@ type Props = { enableGifPicker: boolean; handleBlur: () => void; handlePostError: (postError: React.ReactNode) => void; - emitTypingEvent: (type: string) => void; + emitTypingEvent: (eventType: string) => void; handleMouseUpKeyUp: (e: React.MouseEvent | React.KeyboardEvent) => void; postMsgKeyPress: (e: React.KeyboardEvent) => void; handleChange: (e: React.ChangeEvent) => void; diff --git a/webapp/channels/src/components/advanced_text_editor/voice_message_attachment/components/recording_started/index.tsx b/webapp/channels/src/components/advanced_text_editor/voice_message_attachment/components/recording_started/index.tsx index 2bda52bcdd..aad1379c47 100644 --- a/webapp/channels/src/components/advanced_text_editor/voice_message_attachment/components/recording_started/index.tsx +++ b/webapp/channels/src/components/advanced_text_editor/voice_message_attachment/components/recording_started/index.tsx @@ -25,9 +25,9 @@ import {convertSecondsToMSS} from 'utils/datetime'; interface Props { theme: Theme; - onCancel: (type: string) => void; - onComplete: (audioFile: File, type: string) => Promise; - onStarted: (type: string) => void; + onCancel: (eventType: string) => void; + onComplete: (audioFile: File, eventType: string) => Promise; + onStarted: (eventType: string) => void; } function VoiceMessageRecordingStarted(props: Props) { diff --git a/webapp/channels/src/components/advanced_text_editor/voice_message_attachment/index.tsx b/webapp/channels/src/components/advanced_text_editor/voice_message_attachment/index.tsx index 6919a54e96..66d936737a 100644 --- a/webapp/channels/src/components/advanced_text_editor/voice_message_attachment/index.tsx +++ b/webapp/channels/src/components/advanced_text_editor/voice_message_attachment/index.tsx @@ -48,9 +48,9 @@ interface Props { onUploadError: (err: string | ServerError, clientId?: string, channelId?: Channel['id'], rootId?: Post['id']) => void; onRemoveDraft: (fileInfoIdOrClientId: FileInfo['id'] | string) => void; onSubmit: (e: FormEvent) => void; - onComplete: (type: string) => void; - onCancel: (type: string) => void; - onStarted: (type: string) => void; + onComplete: (eventType: string) => void; + onCancel: (eventType: string) => void; + onStarted: (eventType: string) => void; } const VoiceMessageAttachment = (props: Props) => { diff --git a/webapp/channels/src/components/msg_typing/msg_typing.tsx b/webapp/channels/src/components/msg_typing/msg_typing.tsx index 0b8e2d4071..d7b8a8f548 100644 --- a/webapp/channels/src/components/msg_typing/msg_typing.tsx +++ b/webapp/channels/src/components/msg_typing/msg_typing.tsx @@ -37,7 +37,6 @@ export default function MsgTyping(props: Props) { userStartedRecording(userId, channelId, rootId, Date.now()); break; default: - throw new Error('no SocketEvents found'); break; } } else if (msg.event === SocketEvents.POSTED) { @@ -56,12 +55,12 @@ export default function MsgTyping(props: Props) { userStoppedRecording]), }); - const getInputText = (users: string[], type = 'typing') => { + const getInputText = (users: string[], eventType = 'typing') => { const numUsers = users.length; if (numUsers === 0) { return ''; } - const {simpleMessage, multipleMessage, defaultSimpleMessage, defaultMultipleMessage} = getMessages(type); + const {simpleMessage, multipleMessage, defaultSimpleMessage, defaultMultipleMessage} = getMessages(eventType); if (numUsers === 1) { return ( @@ -87,8 +86,8 @@ export default function MsgTyping(props: Props) { ); }; - const getMessages = (type = 'typing') => { - switch (type) { + const getMessages = (eventType = 'typing') => { + switch (eventType) { case 'typing': return { simpleMessage: 'msg_typing.isTyping', diff --git a/webapp/channels/src/components/textbox/textbox.tsx b/webapp/channels/src/components/textbox/textbox.tsx index a8ef37bb52..7fb43957d4 100644 --- a/webapp/channels/src/components/textbox/textbox.tsx +++ b/webapp/channels/src/components/textbox/textbox.tsx @@ -38,7 +38,7 @@ export type Props = { value: string; onChange: (e: ChangeEvent) => void; onKeyPress: (e: KeyboardEvent) => void; - onComposition?: (type: 'typing' | 'recording' | 'stop') => void; // infomaniak + onComposition?: (eventType: 'typing' | 'recording' | 'stop') => void; // infomaniak onHeightChange?: (height: number, maxHeight: number) => void; onWidthChange?: (width: number) => void; createMessage: string; diff --git a/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/typing.ts b/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/typing.ts index cf6d0c9e3b..1ffa378d74 100644 --- a/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/typing.ts +++ b/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/typing.ts @@ -27,14 +27,14 @@ const getUsersTypingImpl = (profiles: IDMappedObjects, teammateName return []; }; -export function makeGetUsersTypingByChannelAndPost(type: 'typing' | 'recording' = 'typing'): (state: GlobalState, props: {channelId: string; postId: string}) => string[] { +export function makeGetUsersTypingByChannelAndPost(eventType: 'typing' | 'recording' = 'typing'): (state: GlobalState, props: {channelId: string; postId: string}) => string[] { return createSelector( 'makeGetUsersTypingByChannelAndPost', getUsers, getTeammateNameDisplaySetting, (state: GlobalState, options: {channelId: string; postId: string}) => options.channelId, (state: GlobalState, options: {channelId: string; postId: string}) => options.postId, - (state: GlobalState) => state.entities[type], + (state: GlobalState) => state.entities[eventType], getUsersTypingImpl, ); }