add progress bar

build/asset-manifest.json

@@ -1,36 +1,36 @@
 {
   "files": {
-    "static/js/0.a45ab394.chunk.js": "/static/js/0.a45ab394.chunk.js",
-    "static/js/0.a45ab394.chunk.js.map": "/static/js/0.a45ab394.chunk.js.map",
-    "AuthPage.js": "/static/js/AuthPage.eb4fd982.chunk.js",
-    "AuthPage.js.map": "/static/js/AuthPage.eb4fd982.chunk.js.map",
-    "HomePage.js": "/static/js/HomePage.e4112ee6.chunk.js",
-    "HomePage.js.map": "/static/js/HomePage.e4112ee6.chunk.js.map",
+    "static/js/0.8f049984.chunk.js": "/static/js/0.8f049984.chunk.js",
+    "static/js/0.8f049984.chunk.js.map": "/static/js/0.8f049984.chunk.js.map",
+    "AuthPage.js": "/static/js/AuthPage.0491d828.chunk.js",
+    "AuthPage.js.map": "/static/js/AuthPage.0491d828.chunk.js.map",
+    "HomePage.js": "/static/js/HomePage.4693f42f.chunk.js",
+    "HomePage.js.map": "/static/js/HomePage.4693f42f.chunk.js.map",
     "main.css": "/static/css/main.9a5b6280.chunk.css",
-    "main.js": "/static/js/main.c8af074b.chunk.js",
-    "main.js.map": "/static/js/main.c8af074b.chunk.js.map",
-    "runtime-main.js": "/static/js/runtime-main.641c2d9b.js",
-    "runtime-main.js.map": "/static/js/runtime-main.641c2d9b.js.map",
-    "static/js/5.f24c26d6.chunk.js": "/static/js/5.f24c26d6.chunk.js",
-    "static/js/5.f24c26d6.chunk.js.map": "/static/js/5.f24c26d6.chunk.js.map",
+    "main.js": "/static/js/main.c324ac23.chunk.js",
+    "main.js.map": "/static/js/main.c324ac23.chunk.js.map",
+    "runtime-main.js": "/static/js/runtime-main.5381f899.js",
+    "runtime-main.js.map": "/static/js/runtime-main.5381f899.js.map",
+    "static/js/5.3feb04b4.chunk.js": "/static/js/5.3feb04b4.chunk.js",
+    "static/js/5.3feb04b4.chunk.js.map": "/static/js/5.3feb04b4.chunk.js.map",
     "static/css/6.c7cc29b3.chunk.css": "/static/css/6.c7cc29b3.chunk.css",
     "static/js/6.6b4232f4.chunk.js": "/static/js/6.6b4232f4.chunk.js",
     "static/js/6.6b4232f4.chunk.js.map": "/static/js/6.6b4232f4.chunk.js.map",
     "index.html": "/index.html",
     "static/css/6.c7cc29b3.chunk.css.map": "/static/css/6.c7cc29b3.chunk.css.map",
     "static/css/main.9a5b6280.chunk.css.map": "/static/css/main.9a5b6280.chunk.css.map",
-    "static/js/0.a45ab394.chunk.js.LICENSE.txt": "/static/js/0.a45ab394.chunk.js.LICENSE.txt",
-    "static/js/5.f24c26d6.chunk.js.LICENSE.txt": "/static/js/5.f24c26d6.chunk.js.LICENSE.txt",
+    "static/js/0.8f049984.chunk.js.LICENSE.txt": "/static/js/0.8f049984.chunk.js.LICENSE.txt",
+    "static/js/5.3feb04b4.chunk.js.LICENSE.txt": "/static/js/5.3feb04b4.chunk.js.LICENSE.txt",
     "static/js/6.6b4232f4.chunk.js.LICENSE.txt": "/static/js/6.6b4232f4.chunk.js.LICENSE.txt",
     "static/media/icons8-telegram-app.be023370.svg": "/static/media/icons8-telegram-app.be023370.svg",
     "static/media/monkey.ded8ac2a.png": "/static/media/monkey.ded8ac2a.png",
     "static/media/qrCode_telegram.bb0caf3c.png": "/static/media/qrCode_telegram.bb0caf3c.png"
   },
   "entrypoints": [
-    "static/js/runtime-main.641c2d9b.js",
+    "static/js/runtime-main.5381f899.js",
     "static/css/6.c7cc29b3.chunk.css",
     "static/js/6.6b4232f4.chunk.js",
     "static/css/main.9a5b6280.chunk.css",
-    "static/js/main.c8af074b.chunk.js"
+    "static/js/main.c324ac23.chunk.js"
   ]
 }

src/components/HomePage/RightBar/ChatBar/SendMessage/index.tsx

@@ -8,6 +8,8 @@ import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt
 import CloseIcon from '@mui/icons-material/Close';
 import Avatar from '@mui/material/Avatar';
 import Picker from 'emoji-picker-react';
+import LinearProgress from '@mui/material/LinearProgress';
+
 import { useReactMediaRecorder } from "react-media-recorder";
 import { useState } from "react";
 import { useSelector } from "react-redux";
@@ -22,6 +24,7 @@ import { getIsOpen } from '../../../../../redux/control/selector'
 import { playNotification,prodBaseURL } from "../../../../../helpers";
 import { typingChat } from "../../../../../api-data";
 
+
 const useStyles = makeStyles({   
     container: {
         width: '35vw',
@@ -62,7 +65,14 @@ const useStyles = makeStyles({
         width: '100%',
         height: 1,
         background:'#ffffff',
-    },      
+    },
+    visualizerTop: {
+        position: 'absolute',
+        left: 0,
+        top: '-2vh',
+        width: '100%',
+        color:'rgb(41, 139, 231)'
+    },
     filesMenu: {
       background: '#fdfdfd',
       position: 'absolute',
@@ -156,13 +166,13 @@ const useStyles = makeStyles({
    ringContainerLeft: {
     position: 'absolute',
     left: -25,
-    top: -30,
+    top: -25,
     zIndex: 10,
   },   
   ringContainerRight: {
     position: 'absolute',
     right: -25,
-    top: -30,
+    top: -25,
     zIndex: 10,
   },
   circle: {
@@ -338,7 +348,7 @@ const SendMessage = ({isArrow }:ISendMessage) => {
                 </div>
              </>}            
             {isRecording && status !== 'stopped' &&                
-             <>
+             <>             
                 <div className={classes.pauseRight}>
                    <Avatar onClick={handleRecording} className={classes.avatarPause}
                      sx={{backgroundColor: '#ffffff',color:'#6b6b6b',width: 56, height: 56}}>
@@ -349,7 +359,11 @@ const SendMessage = ({isArrow }:ISendMessage) => {
                   <div className={classes.ringRing}></div>
                   <div className={classes.circle}></div>         
                 </div>
-             </>}
+                </>}
+                <div className={classes.visualizerTop}
+                  style={{display: value || file || status === 'stopped'  || _status === 'stopped' ? 'block':'none' }}>
+                  <LinearProgress color="inherit" variant="determinate" value={100}/>
+                </div>
                 <CloseIcon onClick={clearMessage} fontSize="small" className={classes.iconCancel}
                     sx={{width: 56, height: 56, display: file || value || status === 'stopped'
                     || _status === 'stopped' ? 'inline-block' : 'none'}} />