feat: Add 'Cancel Recording' and 'Finish Recording' tooltips for audi…

…o/video buttons (#812)
RocketChat · Jan 27, 2025 · 9d84f49 · 9d84f49
1 parent c59a25a
commit 9d84f49
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 39 deletions.
diff --git a/packages/react/src/views/ChatInput/AudioMessageRecorder.js b/packages/react/src/views/ChatInput/AudioMessageRecorder.js
@@ -1,5 +1,11 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { Box, Icon, ActionButton, useTheme } from '@embeddedchat/ui-elements';
+import {
+  Box,
+  Icon,
+  ActionButton,
+  Tooltip,
+  useTheme,
+} from '@embeddedchat/ui-elements';
 import { useMediaRecorder } from '../../hooks/useMediaRecorder';
 import useMessageStore from '../../store/messageStore';
 import { getCommonRecorderStyles } from './ChatInput.styles';
@@ -131,33 +137,39 @@ const AudioMessageRecorder = ({ disabled }) => {
 
   if (state === 'idle') {
     return (
-      <ActionButton
-        ghost
-        square
-        disabled={disabled}
-        onClick={handleRecordButtonClick}
-      >
-        <Icon size="1.25rem" name="mic" />
-      </ActionButton>
+      <Tooltip text="Audio Message" position="top">
+        <ActionButton
+          ghost
+          square
+          disabled={disabled}
+          onClick={handleRecordButtonClick}
+        >
+          <Icon size="1.25rem" name="mic" />
+        </ActionButton>
+      </Tooltip>
     );
   }
 
   return (
     <Box css={styles.controller}>
       {state === 'recording' && (
         <>
-          <ActionButton ghost onClick={handleCancelRecordButton}>
-            <Icon size="1.25rem" name="circle-cross" />
-          </ActionButton>
+          <Tooltip text="Cancel Recording" position="top">
+            <ActionButton ghost onClick={handleCancelRecordButton}>
+              <Icon size="1.25rem" name="circle-cross" />
+            </ActionButton>
+          </Tooltip>
           <Box css={styles.record}>
             <Box is="span" css={styles.dot} />
             <Box is="span" css={styles.timer}>
               {time}
             </Box>
           </Box>
-          <ActionButton ghost onClick={handleStopRecordButton}>
-            <Icon name="circle-check" size="1.25rem" />
-          </ActionButton>
+          <Tooltip text="Finish Recording" position="top">
+            <ActionButton ghost onClick={handleStopRecordButton}>
+              <Icon name="circle-check" size="1.25rem" />
+            </ActionButton>
+          </Tooltip>
         </>
       )}
     </Box>

diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js
@@ -88,16 +88,8 @@ const ChatInputFormattingToolbar = ({
         </ActionButton>
       </Tooltip>
     ),
-    audio: (
-      <Tooltip text="Audio Message" position="top" key="audio">
-        <AudioMessageRecorder disabled={isRecordingMessage} />
-      </Tooltip>
-    ),
-    video: (
-      <Tooltip text="Video Message" position="top" key="video">
-        <VideoMessageRecorder disabled={isRecordingMessage} />
-      </Tooltip>
-    ),
+    audio: <AudioMessageRecorder disabled={isRecordingMessage} key="audio" />,
+    video: <VideoMessageRecorder disabled={isRecordingMessage} key="video" />,
     file: (
       <Tooltip text="Upload File" position="top" key="file">
         <ActionButton

diff --git a/packages/react/src/views/ChatInput/VideoMessageRecoder.js b/packages/react/src/views/ChatInput/VideoMessageRecoder.js
@@ -4,6 +4,7 @@ import {
   Box,
   Icon,
   ActionButton,
+  Tooltip,
   Modal,
   useTheme,
 } from '@embeddedchat/ui-elements';
@@ -146,14 +147,16 @@ const VideoMessageRecorder = ({ disabled }) => {
   return (
     <>
       {state === 'idle' && (
-        <ActionButton
-          ghost
-          square
-          disabled={disabled}
-          onClick={handleRecordButtonClick}
-        >
-          <Icon size="1.25rem" name="video-recorder" />
-        </ActionButton>
+        <Tooltip text="Video Message" position="top">
+          <ActionButton
+            ghost
+            square
+            disabled={disabled}
+            onClick={handleRecordButtonClick}
+          >
+            <Icon size="1.25rem" name="video-recorder" />
+          </ActionButton>
+        </Tooltip>
       )}
 
       {state === 'recording' && (
@@ -178,16 +181,20 @@ const VideoMessageRecorder = ({ disabled }) => {
               `}
             />
             <Box css={styles.controller}>
-              <ActionButton ghost onClick={handleCancelRecordButton}>
-                <Icon size="1.25rem" name="circle-cross" />
-              </ActionButton>
+              <Tooltip text="Cancel Recording" position="bottom">
+                <ActionButton ghost onClick={handleCancelRecordButton}>
+                  <Icon size="1.25rem" name="circle-cross" />
+                </ActionButton>
+              </Tooltip>
               <Box css={styles.record}>
                 <Box is="span" css={styles.dot} />
                 <Box css={styles.timer}>{time}</Box>
               </Box>
-              <ActionButton ghost onClick={handleStopRecordButton}>
-                <Icon name="circle-check" size="1.25rem" />
-              </ActionButton>
+              <Tooltip text="Finish Recording" position="bottom">
+                <ActionButton ghost onClick={handleStopRecordButton}>
+                  <Icon name="circle-check" size="1.25rem" />
+                </ActionButton>
+              </Tooltip>
             </Box>
           </Modal>
         </>