fix: UI and Alignment Issues in video recorder modal (#456)

* fixed stacking context fixed videorecorder stylings and alignment issues removed unused stylings fixed syntax from fill-rule to fillRule as we are writing JSX * fixed linting and formatted with prettier in changed code
RocketChat · Feb 16, 2024 · 30d4852 · 30d4852
1 parent 449b52e
commit 30d4852
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 51 deletions.
diff --git a/packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js
@@ -10,7 +10,7 @@ import AudioMessageRecorder from './AudioMessageRecorder';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
 import { ActionButton } from '../ActionButton';
-import { Tooltip } from "../Tooltip"
+import { Tooltip } from '../Tooltip';
 import useComponentOverrides from '../../theme/useComponentOverrides';
 import VideoMessageRecorder from './VideoMessageRecoder';
 
@@ -58,18 +58,19 @@ const ChatInputFormattingToolbar = ({ messageRef, inputRef }) => {
     input.selectionEnd = input.selectionStart + selectedText.length;
   };
 
-  const popupStyle= {
+  const popupStyle = {
     margin: '0',
     position: 'absolute',
     left: '0.375rem',
-    top:'9.5rem'
+    top: '9.5rem',
   };
 
   return (
     <Box
       css={css`
         background-color: #cbced1;
         display: flex;
+        position: relative;
         flex-direction: row;
         gap: 0.375rem;
         align-items: center;
@@ -110,7 +111,6 @@ const ChatInputFormattingToolbar = ({ messageRef, inputRef }) => {
         </>
       )}
       {formatter.map((item, index) => (
-
         <Tooltip text={item.name} position="top" key={index}>
           <ActionButton
             square
@@ -120,13 +120,17 @@ const ChatInputFormattingToolbar = ({ messageRef, inputRef }) => {
               wrapSelection(item.pattern);
             }}
           >
-            <Icon disabled={isRecordingMessage} name={item.name} size="1.25rem" />
-
+            <Icon
+              disabled={isRecordingMessage}
+              name={item.name}
+              size="1.25rem"
+            />
           </ActionButton>
         </Tooltip>
-
       ))}
-      <Tooltip text="Audio Message" position="top"><AudioMessageRecorder /></Tooltip>
+      <Tooltip text="Audio Message" position="top">
+        <AudioMessageRecorder />
+      </Tooltip>
       <Tooltip text="Video Message" position="top">
         <VideoMessageRecorder />
       </Tooltip>

diff --git a/packages/react/src/components/ChatInput/VideoMessageRecoder.js b/packages/react/src/components/ChatInput/VideoMessageRecoder.js
@@ -5,14 +5,14 @@ import React, {
   useContext,
   useRef,
 } from 'react';
-import styles from './VideoMessage.module.css';
+import styles from './VideoMessageRecorder.module.css';
 import { useMediaRecorder } from '../../hooks/useMediaRecorder';
 import RCContext from '../../context/RCInstance';
 import useMessageStore from '../../store/messageStore';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
 import { ActionButton } from '../ActionButton';
-import { Modal } from '../Modal'
+import { Modal } from '../Modal';
 
 const VideoMessageRecorder = () => {
   const videoRef = useRef(null);
@@ -38,7 +38,7 @@ const VideoMessageRecorder = () => {
   const [start, stop] = useMediaRecorder({
     constraints: { audio: true, video: true }, // Update constraints as needed
     onStop,
-    videoRef: videoRef,
+    videoRef,
   });
 
   const stopRecording = async () => {
@@ -55,7 +55,6 @@ const VideoMessageRecorder = () => {
     setRecordState('recording');
     try {
       start(videoRef.current);
-      console.log(videoRef); // Start recording with the videoRef
       toogleRecordingMessage();
       const startTime = new Date();
       setRecordingInterval(
@@ -163,7 +162,12 @@ const VideoMessageRecorder = () => {
           <Modal
             open={state === 'recording'}
             onClose={handleCancelRecordButton}
-            className={styles}
+            style={{
+              display: 'flex',
+              width: '28rem',
+              boxShadow: '0px 1px 1px 1px rgb(203, 203, 203)',
+              backgroundColor: 'rgb(39, 39, 39)',
+            }}
           >
             <video muted autoPlay playsInline ref={videoRef} />
             <Box className={styles.videoBox}>

diff --git a/...ponents/ChatInput/VideoMessage.module.css → ...ChatInput/VideoMessageRecorder.module.css b/...ponents/ChatInput/VideoMessage.module.css → ...ChatInput/VideoMessageRecorder.module.css
@@ -10,13 +10,8 @@
 .videoBox {
   display: flex;
   align-items: center;
-  justify-content: center;
-  position: absolute;
-  bottom: 5px;
-  width: 45%;
-  background-color: rgb(44, 44, 44);
+  justify-content: space-between;
   color: white;
-  border-radius: 20px;
 }
 
 .timer {
@@ -28,19 +23,6 @@
   margin: auto;
 }
 
-.modal {
-  display: flex;
-  justify-content: center;
-  position: absolute;
-  top: 130px;
-  right: 18px;
-  height: 13.2rem;
-  width: 17.6rem;
-  box-shadow: 0px 1px 1px 1px rgb(203, 203, 203);
-  background-color: rgb(39, 39, 39);
-  z-index: 999;
-}
-
 .overlay {
   background: none;
 }

diff --git a/packages/react/src/components/Icon/icons/DisableRecorder.js b/packages/react/src/components/Icon/icons/DisableRecorder.js
@@ -1,22 +1,20 @@
 import React from 'react';
 
-const DisabledRecorder = (props) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      fill="currentColor"
-      className="bi bi-camera-video-off"
-      viewBox="0 0 16 16"
-      {...props}
-    >
-      <path
-        fill-rule="evenodd"
-        d="M10.961 12.365a1.99 1.99 0 0 0 .522-1.103l3.11 1.382A1 1 0 0 0 16 11.731V4.269a1 1 0 0 0-1.406-.913l-3.111 1.382A2 2 0 0 0 9.5 3H4.272l.714 1H9.5a1 1 0 0 1 1 1v6a1 1 0 0 1-.144.518l.605.847zM1.428 4.18A.999.999 0 0 0 1 5v6a1 1 0 0 0 1 1h5.014l.714 1H2a2 2 0 0 1-2-2V5c0-.675.334-1.272.847-1.634l.58.814zM15 11.73l-3.5-1.555v-4.35L15 4.269v7.462zm-4.407 3.56-10-14 .814-.58 10 14-.814.58z"
-      />{' '}
-    </svg>
-  );
-};
+const DisabledRecorder = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-camera-video-off"
+    viewBox="0 0 16 16"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M10.961 12.365a1.99 1.99 0 0 0 .522-1.103l3.11 1.382A1 1 0 0 0 16 11.731V4.269a1 1 0 0 0-1.406-.913l-3.111 1.382A2 2 0 0 0 9.5 3H4.272l.714 1H9.5a1 1 0 0 1 1 1v6a1 1 0 0 1-.144.518l.605.847zM1.428 4.18A.999.999 0 0 0 1 5v6a1 1 0 0 0 1 1h5.014l.714 1H2a2 2 0 0 1-2-2V5c0-.675.334-1.272.847-1.634l.58.814zM15 11.73l-3.5-1.555v-4.35L15 4.269v7.462zm-4.407 3.56-10-14 .814-.58 10 14-.814.58z"
+    />{' '}
+  </svg>
+);
 
 export default DisabledRecorder;
diff --git a/packages/react/src/components/Icon/icons/VideoRecoder.js b/packages/react/src/components/Icon/icons/VideoRecoder.js
@@ -11,7 +11,7 @@ const VideoRecorder = (props) => (
     {...props}
   >
     <path
-      fill-rule="evenodd"
+      fillRule="evenodd"
       d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556v4.35zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H2z"
     />
   </svg>