done file reader

package.json

@@ -32,6 +32,7 @@
     "react-audio-player": "^0.17.0",
     "react-dom": "^17.0.1",
     "react-dropzone": "^12.0.1",
+    "react-file-viewer": "^1.2.1",
     "react-js-pagination": "^3.0.3",
     "react-loader-spinner": "^4.0.0",
     "react-query": "^3.24.3",
@@ -48,6 +49,7 @@
     "socket.io-client": "4.0.0",
     "typescript": "^4.3.5",
     "uuid": "^8.3.1",
+    "video-react": "^0.15.0",
     "web-vitals": "^0.2.4",
     "yup": "^0.32.8"
   },

src/components/HomePage/LeftBar/ChatsList/index.tsx

@@ -47,7 +47,6 @@ const StyledBadge = styled(Badge)(({ theme }) => ({
   },
 }));
 
-
 const useStyles = makeStyles({
   list: {
     width: '100%',

src/components/HomePage/LeftBar/MenuBar/index.tsx

@@ -15,10 +15,16 @@ import BugReportIcon from '@mui/icons-material/BugReport';
 import Switch from '@mui/material/Switch';
 import { makeStyles } from '@material-ui/core'
 
-import Modal from '../../../reusableComponents/Modal'
-import { ChangeEvent } from 'react';
 
 const useStyles = makeStyles({
+    overlay: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      width: '100vw',
+      height: '100vh',
+      zIndex:100
+    },
     container: {
       position: 'absolute',
       width: 270,
@@ -56,7 +62,7 @@ const MenuBar = ({handleSelectedMenu}:IContactsList) => {
     console.log('clicked switch input')
   }
   return (
-    <Modal> 
+    <div className={classes.overlay} id='overlay'>
       <Paper className={classes.container}>
       <MenuList className={classes.list}>
         <MenuItem onClick={() => handleSelectedMenu(0)}>
@@ -127,7 +133,7 @@ const MenuBar = ({handleSelectedMenu}:IContactsList) => {
         </MenuItem>
       </MenuList>
       </Paper>
-    </Modal> 
+    </div>
   );
 }
 

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

@@ -44,7 +44,7 @@ const FilesMenu = ({setIsOpenMenu,setFile,setValue,setType}:IFilesMenu) => {
         </UploadFile>
       </MenuItem>
       <MenuItem  onClick={() => handleClose('application')}>
-        <UploadFile setFile={setFile} setValue={setValue} accept='application/pdf,application/text'>
+        <UploadFile setFile={setFile} setValue={setValue} accept='application/pdf'>
           <ListItemIcon className={classes.listIcon}>
             <InsertDriveFileIcon fontSize="medium" />
           </ListItemIcon>

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftAudio/index.tsx

@@ -53,7 +53,7 @@ const useStyles = makeStyles({
     height:30,
     '&:hover': {
       backgroundColor: '#54b0fc',
-      color:'#deffa9'
+      color:'#ffffff'
     }
   },
   player: {
@@ -74,25 +74,25 @@ const useStyles = makeStyles({
 });
 
 interface IMessageLeftAudio {
-  audioUrl:string,
+  url:string,
   updatedAt: string,
 }
 
-const MessageLeftAudio = ({ audioUrl,updatedAt }:IMessageLeftAudio) => {
+const MessageLeftAudio = ({ url,updatedAt }:IMessageLeftAudio) => {
   const classes = useStyles();
 
 
   return (
     <div className={classes.container}>
       <div className={classes.wrapper}>
-         <AudioFileIcon fontSize='large' style={{ color:'#5f5f5f'}}/>         
+         <AudioFileIcon fontSize='large' style={{ color:'#0294c0'}}/>         
           <ReactAudioPlayer className={classes.player}
-            src={`http://localhost:3000/${audioUrl}`}
+            src={url}
             controls
           />
-        <a href={`http://localhost:3000/${audioUrl}`} target="_blank" rel="noreferrer">
+        <a href={url} target="_blank" rel="noreferrer">
            <IconButton className={classes.bntDownload}  >
-             <FileDownloadIcon fontSize='small'/>
+             <FileDownloadIcon fontSize='medium'/>
            </IconButton>
         </a>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftFile/index.tsx

@@ -2,13 +2,15 @@ import { makeStyles } from "@material-ui/core/styles";
 import { IconButton } from "@material-ui/core";
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
-
+import { useState } from "react";
 import { timeStampMessage } from '../../../../../../helpers'
 
+const FileViewer =  require('react-file-viewer')
+
 const useStyles = makeStyles({
   container: {
       display: "flex",
-      justifyContent: "flex-end",
+      justifyContent: "flex-start",
       width:'auto',
       maxWidth: '80%',
       marginBottom:15
@@ -19,35 +21,35 @@ const useStyles = makeStyles({
     justifyContent: 'space-between',
     alignContent: 'center',
     alignItems: 'center',
-    width: 250,
+    width: 200,
     padding: '5px 5px 12px 5px',
-    backgroundColor: '#deffa9',
+    backgroundColor: '#ffffff',
     borderRadius: 7,
       "&:after": {
         content: "''",
         position: "absolute",
         width: "0",
         height: "0",
-        borderBottom: "15px solid #deffa9",
+        borderBottom: "15px solid #ffffff",
         borderLeft: "15px solid transparent",
         borderRight: "15px solid transparent",
-        bottom: "0",
-        right: "-15px"
+        bottom: '0px',
+        left: "-15px"
       },
       "&:before": {
         content: "''",
         position: "absolute",
         width: "0",
         height: "0",
-        borderBottom: "17px solid #deffa9",
+        borderBottom: "17px solid #ffffff",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
         bottom: "0px",
-        right: "-17px"
-      }    
+        left: "-17px"
+      }     
   },
   bntDownload: {
-    backgroundColor: '#deffa9',
+    backgroundColor: '#ffffff',
     color: '#54b0fc',
     width: 30,
     height:30,
@@ -58,7 +60,11 @@ const useStyles = makeStyles({
   },
   title: {
     margin: '0 30px 0 5px',
-    color: '#0e0d0d'
+    color: '#0e0d0d',
+    cursor: 'pointer',
+    '&:hover': {
+      color: '#54b0fc',
+    }
   },
   time: {
       position: "absolute",
@@ -70,30 +76,52 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
       zIndex:10
-    },
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height:'100%',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    border: 'solid 1px rgba(179, 179, 179, 0.6)',
+    overflowY: 'hidden'
+  }, 
 });
 
 interface IMessageLeftFile {
-  audioUrl:string,
+  url:string,
   updatedAt: string,
 }
 
-const MessageLeftFile = ({ audioUrl,updatedAt }:IMessageLeftFile) => {
+const MessageLeftFile = ({ url,updatedAt }:IMessageLeftFile) => {
   const classes = useStyles();
+  const [read,setRead] = useState<boolean>(false)
+  const handleOpenRead = () => !read&&setRead(true)
+  const handleCloseRead = () => read && setRead(false)
 
   return (
     <div className={classes.container}>
+      {read&&<div className={classes.overlay} id='overlay' onClick={handleCloseRead}>
+        <FileViewer
+          allowFullScreen={true}
+          fileType='pdf'
+          filePath={url}
+          onError={handleCloseRead}
+         />
+      </div>}
       <div className={classes.wrapper}>
-        <InsertDriveFileIcon fontSize='large' style={{ color:'#5f5f5f'}}/>         
-        <span className={classes.title}>Application File</span>
-        <a href={`http://localhost:3000/${audioUrl}`} target="_blank" rel="noreferrer" download>
+        <InsertDriveFileIcon fontSize='large' style={{ color: '#99b401' }} />
+        {!read && <span className={classes.title} onClick={handleOpenRead}>Read File</span>}
+        <a href={url} target="_blank" rel="noreferrer" download>
            <IconButton className={classes.bntDownload}  >
-             <FileDownloadIcon fontSize='small'/>
+             <FileDownloadIcon fontSize='medium'/>
            </IconButton>
         </a>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
       </div>
-    </div>    
+    </div>        
 )};
 
 export  default  MessageLeftFile

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftImage/index.tsx

@@ -15,7 +15,7 @@ const useStyles = makeStyles({
     position:'relative'
   },
     image: {
-      borderRadius: 10,
+      borderRadius: 7,
       width: 300,
       maxHeight: 400,
     },  
@@ -33,19 +33,19 @@ const useStyles = makeStyles({
 });
 
 interface IMessagesLeftImage {
-  imgUrl:string,
+  url:string,
   updatedAt:string,
   color:string
 }
 
-const MessagesLeftImage = ({imgUrl,updatedAt,color}:IMessagesLeftImage) => {
+const MessagesLeftImage = ({url,updatedAt,color}:IMessagesLeftImage) => {
   const classes = useStyles();
 
   return (
     <div className={classes.container}>
       <div className={classes.wrapper}>
-        <img className={classes.image} alt='message pic' src={`http://localhost:3000/${imgUrl}`}
-        style={{ backgroundColor: imgUrl?'':color }} width='300' height='400' />
+        <img className={classes.image} alt='message pic' src={url}
+        style={{ backgroundColor: url?'':color }} width='300' height='400' />
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
       </div>
     </div>    

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftText/index.tsx

@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Avatar from "@material-ui/core/Avatar";
 import ListItemText from '@mui/material/ListItemText';
 import { firstLetter,slicedWord,timeStampMessage } from '../../../../../../helpers'
 
@@ -9,12 +8,9 @@ const useStyles = makeStyles({
       width:'auto',
       maxWidth: '80%',     
     },
-    messageVertical: {
-      position:'relative',
-      display: 'flex',
-      alignContent: 'center',
-      alignItems: 'flex-end',
-      marginBottom: "10px",
+    wrapper: {
+      position: 'relative',
+      maxWidth: 450
     },
     message: {
       position: "relative",
@@ -26,7 +22,7 @@ const useStyles = makeStyles({
       textAlign: "left",
       font: "400 .9em 'Open Sans', sans-serif",
       border: "1px solid #f0f0f0",
-      borderRadius: "10px",
+      borderRadius: 7,
       "&:after": {
         content: "''",
         position: "absolute",
@@ -50,37 +46,32 @@ const useStyles = makeStyles({
         left: "-17px"
       }      
     },
-    time: {
+  time: {
       position: "absolute",
       fontSize: ".65em",
       fontWeight:600,
-      marginTop: "10px",
-      bottom: "10px",
-      right: "10px",
+      bottom: 6,
+      right: 6,
       color: '#414141',
+      padding: 3,
+      borderRadius: 5,
+      zIndex:10
     },
 });
 
 
 interface IMessageLeftText {
   message:string,
-  avatarUrl:string,
   name:string,
   lastName:string,
   updatedAt:string,
-  color:string
 }
 
-const MessageLeftText = ({message,avatarUrl,name,lastName,updatedAt,color}:IMessageLeftText) => {
+const MessageLeftText = ({message,name,lastName,updatedAt}:IMessageLeftText) => {
   const classes = useStyles();
   return (
   <div className={classes.container}>
-      <div className={classes.messageVertical}>
-        <Avatar
-          alt='avatar'
-          src={avatarUrl ? `http://localhost:3000/${avatarUrl}` : undefined}
-          style={{background: color, width: 40, height: 40,marginBottom:13}}>
-          {!avatarUrl && `${firstLetter(name)}${firstLetter(lastName)}`}</Avatar>
+      <div className={classes.wrapper}>
         <ListItemText className={classes.message}
           primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftVideo/index.tsx

@@ -2,9 +2,9 @@ import { makeStyles } from "@material-ui/core/styles";
 import { IconButton } from "@material-ui/core";
 import VideoFileIcon from '@mui/icons-material/VideoFile';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import { useState } from "react";
-
 import { timeStampMessage } from '../../../../../../helpers'
+import poster from '../../../../../../img/videoPoster.png'
+const { Player } = require('video-react')
 
 const useStyles = makeStyles({
   container: {
@@ -20,7 +20,7 @@ const useStyles = makeStyles({
     justifyContent: 'space-between',
     alignContent: 'center',
     alignItems: 'center',
-    width: 250,
+    width: 400,
     padding: '5px 5px 12px 5px',
     backgroundColor: '#ffffff',
     borderRadius: 7,
@@ -51,16 +51,13 @@ const useStyles = makeStyles({
     backgroundColor: '#ffffff',
     color: '#54b0fc',
     width: 30,
-    height:30,
+    height: 30,
+    marginLeft:5,
     '&:hover': {
       backgroundColor: '#54b0fc',
-      color:'#deffa9'
+      color:'#ffffff'
     }
   },
-  title: {
-    margin: '0 30px 0 5px',
-    color: '#0e0d0d'
-  },
   time: {
       position: "absolute",
       fontSize: ".65em",
@@ -75,23 +72,23 @@ const useStyles = makeStyles({
 });
 
 interface IMessageLeftVideo {
-  audioUrl:string,
+  url:string,
   updatedAt: string,
 }
 
-const MessageLeftVideo = ({ audioUrl,updatedAt }:IMessageLeftVideo) => {
+const MessageLeftVideo = ({ url,updatedAt }:IMessageLeftVideo) => {
   const classes = useStyles();
-  const [change, setChange] = useState<boolean>(false)
-  const handleChange = () => setChange(!change)
 
   return (
     <div className={classes.container}>
-      <div className={classes.wrapper} onMouseEnter={handleChange} onMouseLeave={handleChange}>
-        <VideoFileIcon fontSize='large' style={{ color:'#5f5f5f'}}/>         
-        <span className={classes.title}>Video File</span>
-        <a href={`http://localhost:3000/${audioUrl}`} target="_blank" rel="noreferrer">
+      <div className={classes.wrapper} >
+        <VideoFileIcon fontSize='large' style={{ color:'#03b003'}}/>         
+        <Player playsInline poster={poster}
+          src={url}
+         />
+        <a href={url} target="_blank" rel="noreferrer">
            <IconButton className={classes.bntDownload}  >
-             <FileDownloadIcon fontSize='small'/>
+             <FileDownloadIcon fontSize='medium'/>
            </IconButton>
         </a>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightAudio/index.tsx

@@ -74,23 +74,23 @@ const useStyles = makeStyles({
 });
 
 interface IMessageRightAudio {
-  audioUrl:string,
+  url:string,
   updatedAt: string,
 }
 
-const MessageRightAudio = ({ audioUrl,updatedAt }:IMessageRightAudio) => {
+const MessageRightAudio = ({ url,updatedAt }:IMessageRightAudio) => {
   const classes = useStyles();
 
 
   return (
     <div className={classes.container}>
       <div className={classes.wrapper}>
-        <AudioFileIcon fontSize='large' style={{ color:'#5f5f5f'}}/>         
+        <AudioFileIcon fontSize='large' style={{ color:'#0294c0'}}/>         
         <ReactAudioPlayer className={classes.player} 
-          src={`http://localhost:3000/${audioUrl}`}
+          src={url}
           controls
          />
-        <a href={`http://localhost:3000/${audioUrl}`} target="_blank" rel="noreferrer" download>
+        <a href={url} target="_blank" rel="noreferrer" download>
            <IconButton className={classes.bntDownload}  >
              <FileDownloadIcon fontSize='medium'/>
            </IconButton>

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightFile/index.tsx

@@ -2,16 +2,19 @@ import { makeStyles } from "@material-ui/core/styles";
 import { IconButton } from "@material-ui/core";
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
-
+import { useState } from "react";
 import { timeStampMessage } from '../../../../../../helpers'
 
+const FileViewer =  require('react-file-viewer')
+
+
 const useStyles = makeStyles({
   container: {
-      display: "flex",
-      justifyContent: "flex-end",
-      width:'auto',
-      maxWidth: '80%',
-      marginBottom:15
+    display: "flex",
+    justifyContent: "flex-end",
+    width:'auto',
+    maxWidth: '80%',
+    marginBottom:15
   },
   wrapper: {
     position: 'relative',
@@ -19,7 +22,7 @@ const useStyles = makeStyles({
     justifyContent: 'space-between',
     alignContent: 'center',
     alignItems: 'center',
-    width: 250,
+    width: 200,
     padding: '5px 5px 12px 5px',
     backgroundColor: '#deffa9',
     borderRadius: 7,
@@ -58,7 +61,11 @@ const useStyles = makeStyles({
   },
   title: {
     margin: '0 30px 0 5px',
-    color: '#0e0d0d'
+    color: '#0e0d0d',
+    cursor: 'pointer',
+    '&:hover': {
+      color: '#54b0fc',
+    }
   },
   time: {
       position: "absolute",
@@ -70,25 +77,47 @@ const useStyles = makeStyles({
       padding: 3,
       borderRadius: 5,
       zIndex:10
-    },
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height:'100%',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    border: 'solid 1px rgba(179, 179, 179, 0.6)',
+    overflowY: 'hidden'
+  },
 });
 
 interface IMessageRightFile {
-  audioUrl:string,
+  url:string,
   updatedAt: string,
 }
 
-const MessageRightFile = ({ audioUrl,updatedAt }:IMessageRightFile) => {
+const MessageRightFile = ({ url,updatedAt }:IMessageRightFile) => {
   const classes = useStyles();
+  const [read,setRead] = useState<boolean>(false)
+  const handleOpenRead = () => !read&&setRead(true)
+  const handleCloseRead = () => read && setRead(false)
 
   return (
     <div className={classes.container}>
+      {read&&<div className={classes.overlay} id='overlay' onClick={handleCloseRead}>
+        <FileViewer
+          allowFullScreen={true}
+          fileType='pdf'
+          filePath={url}
+          onError={handleCloseRead}
+         />
+      </div>}
       <div className={classes.wrapper}>
-        <InsertDriveFileIcon fontSize='large' style={{ color:'#5f5f5f'}}/>         
-        <span className={classes.title}>Application File</span>
-        <a href={`http://localhost:3000/${audioUrl}`} target="_blank" rel="noreferrer" download>
+        <InsertDriveFileIcon fontSize='large' style={{ color: '#99b401' }} />
+        {!read && <span className={classes.title} onClick={handleOpenRead}>Read File</span>}
+        <a href={url} target="_blank" rel="noreferrer" download>
            <IconButton className={classes.bntDownload}  >
-             <FileDownloadIcon fontSize='small'/>
+             <FileDownloadIcon fontSize='medium'/>
            </IconButton>
         </a>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightImage/index.tsx

@@ -15,7 +15,7 @@ const useStyles = makeStyles({
     position:'relative'
   },
     image: {
-      borderRadius: 10,
+      borderRadius: 7,
       width: 300,
       maxHeight: 400,
     },  
@@ -33,19 +33,19 @@ const useStyles = makeStyles({
 });
 
 interface IMessageRightImage {
-  imgUrl:string,
+  url:string,
   updatedAt:string,
   color:string
 }
 
-const MessageRightImage = ({imgUrl,updatedAt,color}:IMessageRightImage) => {
+const MessageRightImage = ({url,updatedAt,color}:IMessageRightImage) => {
   const classes = useStyles();
 
   return (
     <div className={classes.container}>
       <div className={classes.wrapper}>
-        <img className={classes.image} alt='message pic' src={`http://localhost:3000/${imgUrl}`}
-        style={{ backgroundColor: imgUrl?'':color }} width='300' height='400' />
+        <img className={classes.image} alt='message pic' src={url}
+        style={{ backgroundColor: url?'':color }} width='300' height='400' />
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
       </div>
     </div>    

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightText/index.tsx

@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Avatar from "@material-ui/core/Avatar";
 import ListItemText from '@mui/material/ListItemText';
 import { firstLetter, slicedWord, timeStampMessage } from '../../../../../../helpers'
 
@@ -9,13 +8,11 @@ const useStyles = makeStyles({
       justifyContent: "flex-end",
       width:'auto',
       maxWidth: '80%',
+      marginBottom:10
     },
-    messageVertical: {
-      position:'relative',
-      display: 'flex',
-      alignContent: 'center',
-      alignItems: 'flex-end',
-      marginBottom: "10px",
+    wrapper: {
+      position: 'relative',
+      maxWidth: 450
     },
     message: {
       position: "relative",
@@ -27,7 +24,7 @@ const useStyles = makeStyles({
       textAlign: "left",
       font: "400 .9em 'Open Sans', sans-serif",
       border: "1px solid #d5ff91",
-      borderRadius: "10px",
+      borderRadius: 7,
       "&:after": {
         content: "''",
         position: "absolute",
@@ -55,8 +52,8 @@ const useStyles = makeStyles({
       position: "absolute",
       fontSize: ".65em",
       fontWeight:600,
-      bottom: 7,
-      right: 46,
+      bottom: 6,
+      right: 6,
       color: '#414141',
       padding: 3,
       borderRadius: 5,
@@ -66,19 +63,17 @@ const useStyles = makeStyles({
 
 interface IMessageRightText {
   message:string,
-  avatarUrl:string,
   name:string,
   lastName:string,
   updatedAt:string,
-  color:string
 }
 
-const MessageRightText = ({message,avatarUrl,name,lastName,updatedAt,color}:IMessageRightText) => {
+const MessageRightText = ({message,name,lastName,updatedAt}:IMessageRightText) => {
   const classes = useStyles();
 
   return (
   <div className={classes.container}>
-      <div className={classes.messageVertical}>
+      <div className={classes.wrapper}>
         <ListItemText className={classes.message}
           primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
@@ -86,11 +81,6 @@ const MessageRightText = ({message,avatarUrl,name,lastName,updatedAt,color}:IMes
           secondary={message}
           secondaryTypographyProps={{ color: "#0e0d0d" }} />
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
-       <Avatar
-          alt='avatar'
-          src={avatarUrl ? `http://localhost:3000/${avatarUrl}` : undefined}
-          style={{ background: color, width: 40, height: 40, marginBottom: 13 }}>
-          {!avatarUrl && `${firstLetter(name)}${firstLetter(lastName)}`}</Avatar>
       </div>
   </div>    
 )};

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightVideo/index.tsx

@@ -2,8 +2,9 @@ import { makeStyles } from "@material-ui/core/styles";
 import { IconButton } from "@material-ui/core";
 import VideoFileIcon from '@mui/icons-material/VideoFile';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
-
 import { timeStampMessage } from '../../../../../../helpers'
+import poster from '../../../../../../img/videoPoster.png'
+const { Player } = require('video-react')
 
 const useStyles = makeStyles({
   container: {
@@ -19,7 +20,7 @@ const useStyles = makeStyles({
     justifyContent: 'space-between',
     alignContent: 'center',
     alignItems: 'center',
-    width: 250,
+    width: 400,
     padding: '5px 5px 12px 5px',
     backgroundColor: '#deffa9',
     borderRadius: 7,
@@ -50,16 +51,13 @@ const useStyles = makeStyles({
     backgroundColor: '#deffa9',
     color: '#54b0fc',
     width: 30,
-    height:30,
+    height: 30,
+    marginLeft:5,
     '&:hover': {
       backgroundColor: '#54b0fc',
       color:'#ffffff'
     }
   },
-  title: {
-    margin: '0 30px 0 5px',
-    color: '#0e0d0d'
-  },
   time: {
       position: "absolute",
       fontSize: ".65em",
@@ -74,21 +72,23 @@ const useStyles = makeStyles({
 });
 
 interface IMessageRightVideo {
-  audioUrl:string,
+  url:string,
   updatedAt: string,
 }
 
-const MessageRightVideo = ({ audioUrl,updatedAt }:IMessageRightVideo) => {
+const MessageRightVideo = ({ url,updatedAt }:IMessageRightVideo) => {
   const classes = useStyles();
 
   return (
     <div className={classes.container}>
       <div className={classes.wrapper}>
-        <VideoFileIcon fontSize='large' style={{ color:'#5f5f5f'}}/>         
-        <span className={classes.title}>Video File</span>
-        <a href={`http://localhost:3000/${audioUrl}`} target="_blank" rel="noreferrer" download>
+        <VideoFileIcon fontSize='large' style={{ color:'#03b003'}}/>         
+        <Player  playsInline poster={poster}
+          src={url}
+         />
+        <a href={url} target="_blank" rel="noreferrer" download>
            <IconButton className={classes.bntDownload}  >
-             <FileDownloadIcon fontSize='small'/>
+             <FileDownloadIcon fontSize='medium'/>
            </IconButton>
         </a>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>

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

@@ -40,7 +40,7 @@ const useStyles = makeStyles({
       paddingTop: 60,
     },
     messagesBody: {
-      width: "40%",
+      width: "60%",
       height: "80%",
     },   
 });
@@ -85,7 +85,7 @@ const ChatBar = () => {
   return (
       <div ref={divRef} className={classes.container} onScroll={debouncedHandleScroll}>
         <div  className={classes.messagesBody}>
-        {messages.length > 0 ? messages.map(({ message, avatarUrl, name, lastName, color, updatedAt,createdAt, number, type }) => {
+        {messages.length > 0 ? messages.map(({ message, name, lastName, color, updatedAt,createdAt, number, type }) => {
           let isTime
           if (!time) {
             isTime = true
@@ -94,40 +94,39 @@ const ChatBar = () => {
             time = updatedAt
             isTime = true
           }
+          const url = `http://localhost:3000/${message}`
           if (number !== userNumber) {
             if (type === 'text') return (<div key={createdAt}>
               {isTime&&<MessageTime  message={timeStampFilter(updatedAt)}/>}
                <MessageLeftText
                message={message}
                updatedAt={updatedAt}
-               avatarUrl={avatarUrl}
                name={name}
                lastName={lastName}
-               color={color}
                  /></div>)
             if (type === 'image') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
                 <MessageLeftImage   
-                imgUrl={message}
+                url={url}
                 updatedAt={updatedAt}
                 color={color} 
                   /></div>)
             if (type === 'audio') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
                 <MessageLeftAudio    
-                audioUrl={message}
+                url={url}
                 updatedAt={updatedAt}  
                   /></div>)
             if (type === 'video') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
                 <MessageLeftVideo    
-                audioUrl={message}
+                url={url}
                 updatedAt={updatedAt}  
                   /></div>)
             if (type === 'file') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
                 <MessageLeftFile   
-                audioUrl={message}
+                url={url}
                 updatedAt={updatedAt}  
                   /></div>)             
           } else {
@@ -136,35 +135,33 @@ const ChatBar = () => {
                 <MessageRightText   
                 message={message}
                 updatedAt={updatedAt}
-                avatarUrl={avatarUrl}
                 name={name}
-                lastName={lastName}
-                color={color}    
+                lastName={lastName} 
                   /></div>)
             if (type === 'image') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
                 <MessageRightImage   
-                imgUrl={message}
+                url={url}
                 updatedAt={updatedAt}
                 color={color}    
                   /></div>)
             if (type === 'audio') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
                 <MessageRightAudio    
-                audioUrl={message}
+                url={url}
                 updatedAt={updatedAt} 
                   /></div>)
             if (type === 'video') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
                  <MessageRightVideo  
-                 audioUrl={message}
+                 url={url}
                  updatedAt={updatedAt} 
                    /></div>)
             if (type === 'file') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
                  <MessageRightFile
                  key={updatedAt}    
-                 audioUrl={message}
+                 url={url}
                  updatedAt={updatedAt} 
                    /></div>)            
           }

src/components/reusableComponents/Modal/index.tsx

@@ -1,24 +0,0 @@
-import { makeStyles } from '@material-ui/core'
-import React from 'react';
-
-const useStyles = makeStyles({
-    overlay: {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100vw',
-        height: '100vh',
-        zIndex:100
-    }
-})
-
-const Modal = ({children}:{children:React.ReactNode}) => {
-    const classes = useStyles()
-  return (
-    <div className={classes.overlay} id='overlay'>
-         {children} 
-    </div>
-  );
-}
-
-export default Modal

src/index.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import ReactDOM from 'react-dom';
+import 'video-react/dist/video-react.css';
 import 'react-toastify/dist/ReactToastify.css';
-
 import 'modern-normalize/modern-normalize.css';
 import './index.css';
 import App from './App';