Regression: Disable video message when composer is in use (#28073)

RocketChat · Feb 18, 2023 · 513ba32 · 513ba32
1 parent 0a53816
commit 513ba32
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 17 deletions.
diff --git a/...components/body/composer/messageBox/MessageBoxActionsToolbar/MessageBoxActionsToolbar.tsx b/...components/body/composer/messageBox/MessageBoxActionsToolbar/MessageBoxActionsToolbar.tsx
@@ -26,9 +26,9 @@ const MessageBoxActionsToolbar = ({
 	canJoin,
 }: MessageBoxActionsToolbarProps) => {
 	const actions = [
-		<VideoMessageAction key='video' collapsed={variant === 'small'} isRecording={isRecording} canSend={canJoin || canSend} />,
+		<VideoMessageAction key='video' collapsed={variant === 'small'} disabled={(!canJoin && !canSend) || typing || isRecording} />,
 		<AudioMessageAction key='audio' disabled={(!canJoin && !canSend) || typing || isRecording} />,
-		<FileUploadAction key='file' collapsed={variant === 'small'} isRecording={isRecording} canSend={canSend} />,
+		<FileUploadAction key='file' collapsed={variant === 'small'} disabled={!canSend || isRecording} />,
 	];
 
 	let featuredAction;

diff --git a/...components/body/composer/messageBox/MessageBoxActionsToolbar/actions/FileUploadAction.tsx b/...components/body/composer/messageBox/MessageBoxActionsToolbar/actions/FileUploadAction.tsx
@@ -1,20 +1,18 @@
 import { Option, OptionContent, OptionIcon } from '@rocket.chat/fuselage';
 import { MessageComposerAction } from '@rocket.chat/ui-composer';
 import { useTranslation, useSetting } from '@rocket.chat/ui-contexts';
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, AllHTMLAttributes } from 'react';
 import React, { useRef } from 'react';
 
 import type { ChatAPI } from '../../../../../../../../lib/chats/ChatAPI';
 import { useChat } from '../../../../../../contexts/ChatContext';
 
 type FileUploadActionProps = {
 	collapsed?: boolean;
-	isRecording: boolean;
-	canSend: boolean;
 	chatContext?: ChatAPI; // TODO: remove this when the composer is migrated to React
-};
+} & Omit<AllHTMLAttributes<HTMLButtonElement>, 'is'>;
 
-const FileUploadAction = ({ collapsed, chatContext, isRecording, canSend }: FileUploadActionProps) => {
+const FileUploadAction = ({ collapsed, chatContext, disabled, ...props }: FileUploadActionProps) => {
 	const t = useTranslation();
 	const fileUploadEnabled = useSetting('FileUpload_Enabled');
 	const fileInputRef = useRef<HTMLInputElement>(null);
@@ -45,8 +43,8 @@ const FileUploadAction = ({ collapsed, chatContext, isRecording, canSend }: File
 		return (
 			<>
 				<Option
-					{...((!fileUploadEnabled || isRecording) && { title: t('Not_Available') })}
-					disabled={!fileUploadEnabled || isRecording}
+					{...((!fileUploadEnabled || disabled) && { title: t('Not_Available') })}
+					disabled={!fileUploadEnabled || disabled}
 					onClick={handleUpload}
 				>
 					<OptionIcon name='clip' />
@@ -62,9 +60,10 @@ const FileUploadAction = ({ collapsed, chatContext, isRecording, canSend }: File
 			<MessageComposerAction
 				data-qa-id='file-upload'
 				icon='clip'
-				disabled={!fileUploadEnabled || isRecording || !canSend}
+				disabled={!fileUploadEnabled || disabled}
 				onClick={handleUpload}
 				title={t('File')}
+				{...props}
 			/>
 			<input ref={fileInputRef} type='file' onChange={handleUploadChange} multiple style={{ display: 'none' }} />
 		</>

diff --git a/...mponents/body/composer/messageBox/MessageBoxActionsToolbar/actions/VideoMessageAction.tsx b/...mponents/body/composer/messageBox/MessageBoxActionsToolbar/actions/VideoMessageAction.tsx
@@ -1,19 +1,18 @@
 import { Option, OptionIcon, OptionContent } from '@rocket.chat/fuselage';
 import { MessageComposerAction } from '@rocket.chat/ui-composer';
 import { useTranslation, useSetting } from '@rocket.chat/ui-contexts';
+import type { AllHTMLAttributes } from 'react';
 import React from 'react';
 
 import type { ChatAPI } from '../../../../../../../../lib/chats/ChatAPI';
 import { useChat } from '../../../../../../contexts/ChatContext';
 
 type VideoMessageActionProps = {
 	collapsed?: boolean;
-	isRecording: boolean;
-	canSend: boolean;
 	chatContext?: ChatAPI; // TODO: remove this when the composer is migrated to React
-};
+} & Omit<AllHTMLAttributes<HTMLButtonElement>, 'is'>;
 
-const VideoMessageAction = ({ collapsed, chatContext, isRecording, canSend }: VideoMessageActionProps) => {
+const VideoMessageAction = ({ collapsed, chatContext, disabled, ...props }: VideoMessageActionProps) => {
 	const t = useTranslation();
 	const fileUploadEnabled = useSetting('FileUpload_Enabled');
 	const messageVideoRecorderEnabled = useSetting('Message_VideoRecorderEnabled');
@@ -44,8 +43,8 @@ const VideoMessageAction = ({ collapsed, chatContext, isRecording, canSend }: Vi
 	if (collapsed) {
 		return (
 			<Option
-				{...((!enableVideoMessage || isRecording) && { title: t('Not_Available') })}
-				disabled={!enableVideoMessage || isRecording}
+				{...((!enableVideoMessage || disabled) && { title: t('Not_Available') })}
+				disabled={!enableVideoMessage || disabled}
 				onClick={handleOpenVideoMessage}
 			>
 				<OptionIcon name='video' />
@@ -58,9 +57,10 @@ const VideoMessageAction = ({ collapsed, chatContext, isRecording, canSend }: Vi
 		<MessageComposerAction
 			data-qa-id='video-message'
 			icon='video'
-			disabled={!enableVideoMessage || isRecording || !canSend}
+			disabled={!enableVideoMessage || disabled}
 			onClick={handleOpenVideoMessage}
 			title={t('Video_message')}
+			{...props}
 		/>
 	);
 };