finished with scale images and file

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

@@ -1,6 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
-import { useState } from "react";
+import { useState,useRef } from "react";
 import { IconButton } from "@material-ui/core";
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
@@ -14,6 +14,8 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import Checkbox from '@mui/material/Checkbox';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
@@ -201,9 +203,43 @@ const useStyles = makeStyles({
     height:'100%',
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     border:'solid 2px #0084ff',
+    cursor: 'auto',
+    zIndex: 100,
+    overflow: 'auto',
+  },
+  wrapperIcons: {
+    position: 'absolute',
+    top: 14,
+    right: 40,
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+    padding: '2px 10px',
+    borderRadius: 10,
+    backgroundColor: 'rgba(65, 65, 65, 0.9)',
+    zIndex:150
+  },  
+  magnifying : {
     cursor: 'pointer',
-    zIndex:100
+    color: '#e9e7e7',
+    padding: 0,
+    marginRight:10,
+    '&:hover': {
+      color: '#ffffff',
+      transform: 'scale(1.1)'
+    }
   },
+  iconCloseOverlay: {
+    marginLeft:5,
+    cursor: 'pointer',
+    color: '#e9e7e7',
+    padding: 0,
+    '&:hover': {
+      color: '#ffffff',
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },  
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -292,11 +328,33 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinne
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
-  const [modal,setModal] = useState<boolean>(false)
+  const [scale, setScale] = useState<number>(1)
+  const [modal, setModal] = useState<boolean>(false)
+  const refView = useRef<null | any>(null)
   const open = Boolean(anchorEl);
   const checked = isSelected(_id)
+  const handleIncreaseScale = () => {
+    if (scale < 5) {
+      refView.current.style.transform = `scale(${scale+0.25},${scale+0.25})`
+      refView.current.style.transformOrigin = `${50 / scale + 0.25}px ${50 / scale + 0.25}px`
+      setScale(scale+0.25)
+    }
+  }
+  const handleDecreaseScale = () => {
+    if (scale >= 0.5) {
+      refView.current.style.transform = `scale(${scale-0.25},${scale-0.25})`
+      refView.current.style.transformOrigin = `${50/scale-0.25}px ${50/scale-0.25}px`
+      setScale(scale-0.25)
+    }
+  }   
   const handleOpenRead = () => !read&&setRead(true)
-  const handleCloseRead = () => read && setRead(false)
+  const handleCloseRead = (e:any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'close') {
+      setRead(false)
+      setScale(1)
+    }
+  }
   const handleClose = (type: string | undefined): void => {
     if (type === 'copy') copied('Link')
     if (type === 'delete') setModal(true)
@@ -327,13 +385,21 @@ const MessageLeftFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinne
   return (
     <div className={classes.container} style={{ marginBottom: caption ? 43 : 15}}>
       {isSomeSelected&&<Checkbox {...label} checked={checked} onClick={() => handleSelected(_id)}/>}
-      {read&&<div className={classes.overlay} id='overlay' onClick={handleCloseRead}>
-        <FileViewer
-          allowFullScreen={true}
-          fileType={type}
-          filePath={url}
-          onError={handleCloseRead}
-         />
+      {read && <div className={classes.wrapperIcons}>
+        <ZoomOutIcon onClick={handleDecreaseScale} className={classes.magnifying} fontSize='large' />
+        <ZoomInIcon onClick={handleIncreaseScale} className={classes.magnifying} fontSize='large' />
+        <CloseIcon id='close' onClick={handleCloseRead} className={classes.iconCloseOverlay} fontSize='large' />
+      </div>}        
+      {read && <div className={classes.overlay} id='overlay'
+        onClick={handleCloseRead}>
+        <div ref={refView}>
+          <FileViewer
+            allowFullScreen={true}
+            fileType={type}
+            filePath={url}
+            onError={handleCloseRead}
+          />
+        </div>
       </div>}
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected ? classes.wrapperActive : classes.wrapper}

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

@@ -1,6 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
-import { useState } from "react";
+import { useState,useRef } from "react";
 import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
 import { IconButton } from "@material-ui/core";
 import ImageIcon from '@mui/icons-material/Image';
@@ -203,7 +203,7 @@ const useStyles = makeStyles({
     minHeight: '100vh',
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
-    overflowY: 'hidden',
+    overflow: 'auto',
     boxSizing: 'border-box',
     display: 'flex',
     justifyContent: 'center',
@@ -267,12 +267,14 @@ const useStyles = makeStyles({
     }
   },  
   wrapperImage: {
+    borderRadius: 5,
+    maxWidth:500,
+    maxHeight: 750,
     display: 'flex',
-    overflow: 'auto',
-    maxWidth: '70%',
-    maxHeight:'80%',
-    height: 'auto',
-    borderRadius:5,
+    overflow: 'auto'
+  },
+  innerImage: {
+    objectFit: 'cover',
   }, 
   modalDelete: {
     background: '#ffffff',
@@ -365,22 +367,34 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
   const [watch, setWatch] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
-   const [scale, setScale] = useState<number>(1)
+  const [scale, setScale] = useState<number>(1)
+  const refView = useRef<null | any>(null)
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);
   const checked = isSelected(_id)
   const handleIncreaseScale = () => {
-    if(scale < 5) return setScale(scale+0.5)
+    if (scale < 5) {
+      refView.current.style.transform = `scale(${scale+0.25},${scale+0.25})`
+      refView.current.style.transformOrigin = `${50 / scale + 0.25}px ${50 / scale + 0.25}px`
+      setScale(scale+0.25)
+    }
   }
   const handleDecreaseScale = () => {
-    if(scale > 1) return setScale(scale-0.5)
-  }   
+    if (scale >= 0.5) {
+      refView.current.style.transform = `scale(${scale-0.25},${scale-0.25})`
+      refView.current.style.transformOrigin = `${50/scale-0.25}px ${50/scale-0.25}px`
+      setScale(scale-0.25)
+    }
+  }  
   const handleOpenWatch = () => !watch&&setWatch(true)
-  const handleCloseWatch = (e: any) => {
+  const handleCloseWatch = (e:any) => {
     const id = e.target.id
-    if(id === 'overlay') setWatch(false)
-    if(id === 'close') setWatch(false)
-  }
+    if (id === 'overlay' || id === 'close') {
+      setWatch(false)
+      refView.current.style.transform = 'scale(1)'
+      setScale(1)
+    }
+  }  
   const handleClose = (type: string | undefined): void => {
     if (type === 'copy') copied('Link')
     if (type === 'delete') setModal(true)
@@ -434,9 +448,9 @@ const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
             className={classes.iconCloseOverlay} fontSize='large' />
         </div>        
       </div>
-      <div className={classes.wrapperImage}>
-         <img style={{ transform: `scale(${scale})`, cursor: scale > 1 ? 'grab' : 'auto' }}
-            width='100%' height='auto' alt='imageItem' src={url} />
+      <div ref={refView} className={classes.wrapperImage}>
+        <img className={classes.innerImage}
+          width='100%' height='auto' alt='imageItem' src={url} />
       </div>
     </div>  :
     <div className={classes.container} style={{ marginBottom: caption ? 40 : 15}}>

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

@@ -1,6 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
-import { useState } from "react";
+import { useState,useRef } from "react";
 import { IconButton } from "@material-ui/core";
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
@@ -14,6 +14,8 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import Checkbox from '@mui/material/Checkbox';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
 import { timeStampMessage,copied,emojisArr } from '../../../../../../helpers'
@@ -201,9 +203,43 @@ const useStyles = makeStyles({
     height:'100%',
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     border:'solid 2px #0084ff',
+    cursor: 'auto',
+    zIndex: 100,
+    overflow: 'auto',
+  },
+  wrapperIcons: {
+    position: 'absolute',
+    top: 14,
+    right: 30,
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+    padding: '2px 10px',
+    borderRadius: 10,
+    backgroundColor: 'rgba(65, 65, 65, 0.9)',
+    zIndex:150
+  },  
+  magnifying : {
     cursor: 'pointer',
-    zIndex:100
+    color: '#e9e7e7',
+    padding: 0,
+    marginRight:10,
+    '&:hover': {
+      color: '#ffffff',
+      transform: 'scale(1.1)'
+    }
   },
+  iconCloseOverlay: {
+    marginLeft:5,
+    cursor: 'pointer',
+    color: '#e9e7e7',
+    padding: 0,
+    '&:hover': {
+      color: '#ffffff',
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },  
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -268,7 +304,7 @@ const useStyles = makeStyles({
       transform: 'rotate(180deg)',
       transition: 'all 250ms ease-out ',
     }
-  },  
+  }, 
 });
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -292,13 +328,32 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinn
   const [read, setRead] = useState<boolean>(false)
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [selected, setSelected] = useState<boolean>(false);
+  const [scale, setScale] = useState<number>(1)
   const [modal,setModal] = useState<boolean>(false)
   const open = Boolean(anchorEl);
   const checked = isSelected(_id)
+  const refView = useRef<null | any>(null)
+  const handleIncreaseScale = () => {
+    if (scale < 5) {
+      refView.current.style.transform = `scale(${scale+0.25},${scale+0.25})`
+      refView.current.style.transformOrigin = `${50 / scale + 0.25}px ${50 / scale + 0.25}px`
+      setScale(scale+0.25)
+    }
+  }
+  const handleDecreaseScale = () => {
+    if (scale >= 0.5) {
+      refView.current.style.transform = `scale(${scale-0.25},${scale-0.25})`
+      refView.current.style.transformOrigin = `${50/scale-0.25}px ${50/scale-0.25}px`
+      setScale(scale-0.25)
+    }
+  }    
   const handleOpenRead = () => !read&&setRead(true)
-  const handleCloseRead = (e: any) => {
-    console.log(e)
-    read && setRead(false)
+  const handleCloseRead = (e:any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'close') {
+      setRead(false)
+      setScale(1)
+    }
   }
   const handleClose = (type: string | undefined): void => {
     if (type === 'copy') copied('Link')
@@ -328,14 +383,22 @@ const MessageRightFile = ({ url,createdAt,type,caption,emoji,emojiCompanion,pinn
   } 
 
   return (
-    <div className={classes.container} style={{ marginBottom: caption ? 43 : 15}}>
-      {read&&<div className={classes.overlay} id='overlay' onClick={handleCloseRead}>
-        <FileViewer
+    <div className={classes.container} style={{ marginBottom: caption ? 43 : 15 }}>
+      {read && <div className={classes.wrapperIcons}>
+        <ZoomOutIcon onClick={handleDecreaseScale} className={classes.magnifying} fontSize='large' />
+        <ZoomInIcon onClick={handleIncreaseScale} className={classes.magnifying} fontSize='large' />
+        <CloseIcon id='close' onClick={handleCloseRead} className={classes.iconCloseOverlay} fontSize='large' />
+      </div>}       
+      {read && <div className={classes.overlay} id='overlay'
+        onClick={handleCloseRead}>
+        <div ref={refView}>
+          <FileViewer
           allowFullScreen={true}
           fileType={type}
           filePath={url}
           onError={handleCloseRead}
          />
+        </div>
       </div>}
       <div onContextMenu={(e) => handleContextMenu(e)}
         className={selected ? classes.wrapperActive : classes.wrapper}

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

@@ -1,6 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { styled } from '@mui/material/styles';
-import { useState } from "react";
+import { useState,useRef } from "react";
 import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
 import { IconButton } from "@material-ui/core";
 import ImageIcon from '@mui/icons-material/Image';
@@ -203,7 +203,7 @@ const useStyles = makeStyles({
     minHeight: '100vh',
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
-    overflowY: 'hidden',
+    overflow: 'auto',
     boxSizing: 'border-box',
     display: 'flex',
     justifyContent: 'center',
@@ -267,13 +267,15 @@ const useStyles = makeStyles({
     }
   },
   wrapperImage: {
+    borderRadius: 5,
+    maxWidth:500,
+    maxHeight: 750,
     display: 'flex',
-    overflow: 'auto',
-    maxWidth: '70%',
-    maxHeight:'80%',
-    height: 'auto',
-    borderRadius:5,
-  },    
+    overflow: 'auto'
+  },
+  innerImage: {
+    objectFit: 'cover',
+  },     
   modalDelete: {
     background: '#ffffff',
     position: 'absolute',
@@ -367,20 +369,31 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
   const [selected, setSelected] = useState<boolean>(false);
   const [modal, setModal] = useState<boolean>(false)
   const [scale, setScale] = useState<number>(1)
+  const refView = useRef<null | any>(null)
   const open = Boolean(anchorEl);
   const checked = isSelected(_id)
   const handleIncreaseScale = () => {
-    if(scale < 5) return setScale(scale+0.5)
+    if (scale < 5) {
+      refView.current.style.transform = `scale(${scale+0.25},${scale+0.25})`
+      refView.current.style.transformOrigin = `${50 / scale + 0.25}px ${50 / scale + 0.25}px`
+      setScale(scale+0.25)
+    }
   }
   const handleDecreaseScale = () => {
-    if(scale > 1) return setScale(scale-0.5)
-  }  
+    if (scale >= 0.5) {
+      refView.current.style.transform = `scale(${scale-0.25},${scale-0.25})`
+      refView.current.style.transformOrigin = `${50/scale-0.25}px ${50/scale-0.25}px`
+      setScale(scale-0.25)
+    }
+  } 
   const handleOpenWatch = () => !watch&&setWatch(true)
-    const handleCloseWatch = (e: any) => {
+  const handleCloseWatch = (e:any) => {
     const id = e.target.id
-    if(id === 'overlay') setWatch(false)
-    if(id === 'close') setWatch(false)
-  }
+    if (id === 'overlay' || id === 'close') {
+      setWatch(false)
+      setScale(1)
+    }
+  }  
   const handleClose = (type: string | undefined): void => {
     if (type === 'copy') copied('Link')
     if (type === 'delete') setModal(true)
@@ -434,8 +447,8 @@ const MessageRightImage = ({url,createdAt,color,fullType,caption,emoji,emojiComp
             className={classes.iconCloseOverlay} fontSize='large' />
         </div>        
       </div>
-      <div className={classes.wrapperImage}>
-        <img style={{ transform: `scale(${scale})`, cursor: scale > 1 ? 'grab' : 'auto' }}
+      <div ref={refView} className={classes.wrapperImage}>
+        <img className={classes.innerImage}
           width='100%' height='auto' alt='imageItem' src={url} />
       </div>
     </div>  :

src/components/HomePage/LeftBar/SearchLists/MediaList/MediaListItem/index.tsx

@@ -1,9 +1,15 @@
 
 import { makeStyles } from '@material-ui/core'
-import { useState } from 'react';
+import { useState,useRef } from 'react';
 import ImageListItem from '@mui/material/ImageListItem';
 import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
-import { handleDownload,timeStampEU,prodAwsS3 } from '../../../../../../helpers'
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Avatar from '@mui/material/Avatar';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import CloseIcon from '@mui/icons-material/Close';
+import { handleDownload, timeStampEU, prodAwsS3,firstLetter, slicedWord } from '../../../../../../helpers'
 
 const useStyles = makeStyles({ 
   overlay: {
@@ -14,24 +20,49 @@ const useStyles = makeStyles({
     height: '100vh',
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
-    overflowY: 'hidden',
+    overflow: 'auto',
     boxSizing: 'border-box',
     display: 'flex',
     justifyContent: 'center',
     alignContent: 'center',
     alignItems: 'center'
   },
-  wrapper: {
-    width: '30%',
-    maxHeight: '80%',
-    position: 'relative',
+  topBar: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    height: '7vh',
+    width: '100vw',
     display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: 'rgba(65, 65, 65, 0.9)',
+    zIndex: 10,
+    padding: '0px 20px'
   },
+  wrapperCredentials: {
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+  },    
+  wrapperIcons: {
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+  },  
+  magnifying : {
+    marginLeft:5,
+    cursor: 'pointer',
+    color: '#e9e7e7',
+    padding: 0,
+    '&:hover': {
+      color: '#ffffff',
+      transform: 'scale(1.1)'
+    }
+  }, 
   downloadIcon: {
-    position: 'absolute',
-    content: '',
-    right: 0,
-    top: -40,
+    marginLeft:5,
     cursor: 'pointer',
     color: '#e9e7e7',
     padding: 0,
@@ -41,22 +72,33 @@ const useStyles = makeStyles({
       color: '#b8b7b7',
     }
   },
+  iconCloseOverlay: {
+    marginLeft:5,
+    cursor: 'pointer',
+    color: '#e9e7e7',
+    padding: 0,
+    '&:hover': {
+      color: '#ffffff',
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },  
+  wrapperImage: {
+    borderRadius: 5,
+    maxWidth:500,
+    maxHeight: 750,
+    display: 'flex',
+    overflow: 'auto'
+  },
+  innerImage: {
+    objectFit: 'cover',
+  }, 
   img: {
     cursor:'pointer',
     '&:hover': {
       scale:0.98
     }
-  },
-  time: {
-    position: 'absolute',
-    content: '',    
-    color: '#ffffff',
-    top: -30,
-    left: 0,
-    borderRadius: 10,
-    padding:'2px 6px 2px 6px',
-    backgroundColor:'#707070'
-  }
+  },  
 });
 
 interface IMediaListItem {
@@ -65,15 +107,40 @@ interface IMediaListItem {
   updatedAt: string,
   handleScrollToTheMessage: (_id: string,companionId:string) => void,
   id: string,
-  companionId: string
+  companionId: string,
+  name: string,
+  lastName: string,
+  color: string
 }
 
 
-const MediaListItem = ({ message,fullType,updatedAt,handleScrollToTheMessage,id,companionId }: IMediaListItem) => {
+const MediaListItem = ({ message,fullType,updatedAt,handleScrollToTheMessage,id,companionId,name,lastName,color }: IMediaListItem) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
+  const [scale, setScale] = useState<number>(1)
+  const refView = useRef<null | any>(null)
+  const handleIncreaseScale = () => {
+    if (scale < 5) {
+      refView.current.style.transform = `scale(${scale+0.25},${scale+0.25})`
+      refView.current.style.transformOrigin = `${50 / scale + 0.25}px ${50 / scale + 0.25}px`
+      setScale(scale+0.25)
+    }
+  }
+  const handleDecreaseScale = () => {
+    if (scale >= 0.5) {
+      refView.current.style.transform = `scale(${scale-0.25},${scale-0.25})`
+      refView.current.style.transformOrigin = `${50/scale-0.25}px ${50/scale-0.25}px`
+      setScale(scale-0.25)
+    }
+  }     
   const handleOpenWatch = () => !watch && setWatch(true)
-  const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
+  const handleCloseWatch = (e:any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'close') {
+      setWatch(false)
+      setScale(1)
+    }
+  }  
   
   const url = `${prodAwsS3}/${message}`
   
@@ -82,12 +149,34 @@ const MediaListItem = ({ message,fullType,updatedAt,handleScrollToTheMessage,id,
       handleCloseWatch(e)
       handleScrollToTheMessage(id,companionId)
     }} id='overlay' className={classes.overlay}>
-      <div className={classes.wrapper}>
-        <span className={classes.time}>{timeStampEU(updatedAt)}</span>
-        <DownloadForOfflineIcon className={classes.downloadIcon} fontSize='large'
-         onClick={() => handleDownload(url, fullType)}/>
-        <img width='100%' height='auto' alt='imageItem' src={url} />
-       </div>
+      <div className={classes.topBar}>
+        <div className={classes.wrapperCredentials}>
+          <ListItemIcon >
+            <Avatar alt={name} src={url?url:undefined}
+              sx={{ background: color, width: 44, height: 44 }}>
+              {!url&&`${firstLetter(name)}${firstLetter(lastName)}`}
+            </Avatar>
+          </ListItemIcon> 
+          <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
+            ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+            primaryTypographyProps={{ color: '#ffffff' }}
+            secondary={timeStampEU(updatedAt)} secondaryTypographyProps={{ color: '#ffffff' }} />
+        </div>
+        <div className={classes.wrapperIcons}>
+          <ZoomOutIcon onClick={handleDecreaseScale}
+            className={classes.magnifying} fontSize='large' />
+          <ZoomInIcon onClick={handleIncreaseScale}
+            className={classes.magnifying} fontSize='large' />
+          <DownloadForOfflineIcon onClick={() => handleDownload(url, fullType)}
+            className={classes.downloadIcon} fontSize='large' />
+          <CloseIcon id='close' onClick={handleCloseWatch}
+            className={classes.iconCloseOverlay} fontSize='large' />
+        </div>        
+      </div>
+      <div ref={refView} className={classes.wrapperImage}>
+        <img className={classes.innerImage}
+          width='100%' height='auto' alt='imageItem' src={url} />
+      </div>
     </div> :
     <ImageListItem>
       <img onClick={handleOpenWatch} className={classes.img}

src/components/HomePage/LeftBar/SearchLists/MediaList/index.tsx

@@ -59,9 +59,10 @@ const MediaList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheM
     <>
       {filteredAndSorted.length > 0 &&
         <ImageList className={classes.container} cols={3} rowHeight={164}>
-        {filteredAndSorted.map(({message,createdAt,fullType,updatedAt,_id,companionId}) => 
+        {filteredAndSorted.map(({message,createdAt,fullType,updatedAt,_id,companionId,name,lastName,color}) => 
           <MediaListItem key={createdAt} message={message} fullType={fullType}
-            updatedAt={updatedAt} handleScrollToTheMessage={handleScrollToTheMessage} id={_id} companionId={companionId}/>)}
+            updatedAt={updatedAt} handleScrollToTheMessage={handleScrollToTheMessage} id={_id}
+            companionId={companionId} name={name} lastName={lastName} color={color}/>)}
       </ImageList>}
       {(value || date) &&  filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Media by request: ${value}`} />}
       {!value && !date && filteredAndSorted.length === 0 && <AlertInfo name='You do not have Media yet!'/>}

src/components/HomePage/RightBar/CredentialsList/ProfileLists/MediaList/MediaListItem/index.tsx

@@ -1,6 +1,6 @@
 
 import { makeStyles } from '@material-ui/core'
-import { useState } from 'react';
+import { useState,useRef } from 'react';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Avatar from '@mui/material/Avatar';
@@ -25,7 +25,7 @@ const useStyles = makeStyles({
     justifyContent: 'center',
     alignContent: 'center',
     alignItems: 'center',
-    overflowY: 'hidden',
+    overflow: 'auto',
   },
   topBar: {
     position: 'fixed',
@@ -84,13 +84,15 @@ const useStyles = makeStyles({
     }
   },  
   wrapperImage: {
+    borderRadius: 5,
+    maxWidth:500,
+    maxHeight: 750,
     display: 'flex',
-    overflow: 'auto',
-    maxWidth: '70%',
-    maxHeight:'80%',
-    height: 'auto',
-    borderRadius:5,
-  },   
+    overflow: 'auto'
+  },
+  innerImage: {
+    objectFit: 'cover',
+  }, 
   img: {
     cursor:'pointer',
     '&:hover': {
@@ -117,19 +119,29 @@ const MediaListItem = ({ message, fullType, updatedAt, handleScrollToTheMessage,
   const url = `${prodAwsS3}/${message}`
   const [watch, setWatch] = useState<boolean>(false)
   const [scale, setScale] = useState<number>(1)
+  const refView = useRef<null | any>(null)
   const handleIncreaseScale = () => {
-    if(scale < 5) return setScale(scale+0.5)
+    if (scale < 5) {
+      refView.current.style.transform = `scale(${scale+0.25},${scale+0.25})`
+      refView.current.style.transformOrigin = `${50 / scale + 0.25}px ${50 / scale + 0.25}px`
+      setScale(scale+0.25)
+    }
   }
   const handleDecreaseScale = () => {
-    if(scale > 1) return setScale(scale-0.5)
-  }
+    if (scale >= 0.5) {
+      refView.current.style.transform = `scale(${scale-0.25},${scale-0.25})`
+      refView.current.style.transformOrigin = `${50/scale-0.25}px ${50/scale-0.25}px`
+      setScale(scale-0.25)
+    }
+  } 
   const handleOpenWatch = () => !watch && setWatch(true)
-  const handleCloseWatch = (e: any) => {
+  const handleCloseWatch = (e:any) => {
     const id = e.target.id
-    if(id === 'overlay') setWatch(false)
-    if(id === 'close') setWatch(false)
-  }
-
+    if (id === 'overlay' || id === 'close') {
+      setWatch(false)
+      setScale(1)
+    }
+  }  
   
   return (watch?
     <div id='overlay' onClick={(e) => {
@@ -160,9 +172,8 @@ const MediaListItem = ({ message, fullType, updatedAt, handleScrollToTheMessage,
             className={classes.iconClose} fontSize='large' />
         </div>        
       </div>
-      <div className={classes.wrapperImage}>
-        <img style={{ transform: `scale(${scale})`, cursor: scale > 1 ? 'grab' : 'auto' }}
-          width='100%' height='auto' alt='imageItem' src={url} />
+      <div ref={refView} className={classes.wrapperImage}>
+        <img className={classes.innerImage} width='100%' height='auto' alt='imageItem' src={url} />
       </div>
     </div> :
     <ImageListItem>

src/helpers/index.ts

@@ -153,7 +153,7 @@ const filteredMessages = (arr: TAllMessages,date:any,value:string) => arr.filter
 
 const emojisArr = ['💘','😀','😍','😲','😡']            
 
-const prodBaseURL = 'http://localhost:3000'
+const prodBaseURL = 'https://w-telegram.herokuapp.com'
 
 const prodAwsS3 = 'https://my-telegram-bucket.s3.eu-west-1.amazonaws.com'