|
@@ -1,7 +1,7 @@
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import { styled } from '@mui/material/styles';
|
|
import { styled } from '@mui/material/styles';
|
|
import { useState } from "react";
|
|
import { useState } from "react";
|
|
-import { Carousel } from 'react-responsive-carousel';
|
|
|
|
|
|
+import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
|
|
import { IconButton } from "@material-ui/core";
|
|
import { IconButton } from "@material-ui/core";
|
|
import ImageIcon from '@mui/icons-material/Image';
|
|
import ImageIcon from '@mui/icons-material/Image';
|
|
import FileDownloadIcon from '@mui/icons-material/FileDownload';
|
|
import FileDownloadIcon from '@mui/icons-material/FileDownload';
|
|
@@ -12,7 +12,7 @@ import Menu from '@mui/material/Menu';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|
import { removeMessageById } from "../../../../../../api-data";
|
|
import { removeMessageById } from "../../../../../../api-data";
|
|
-import { timeStampMessage, timeStampFilter,handleDownload,copied } from '../../../../../../helpers'
|
|
|
|
|
|
+import { timeStampMessage, timeStampEU,handleDownload,copied } from '../../../../../../helpers'
|
|
|
|
|
|
const StyledMenu = styled((props:any) => (
|
|
const StyledMenu = styled((props:any) => (
|
|
<Menu
|
|
<Menu
|
|
@@ -148,7 +148,7 @@ const useStyles = makeStyles({
|
|
color:'#ffffff'
|
|
color:'#ffffff'
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- overlay: {
|
|
|
|
|
|
+ overlay: {
|
|
position: 'fixed',
|
|
position: 'fixed',
|
|
top: 0,
|
|
top: 0,
|
|
left: 0,
|
|
left: 0,
|
|
@@ -156,17 +156,43 @@ const useStyles = makeStyles({
|
|
height: '100vh',
|
|
height: '100vh',
|
|
zIndex: 100,
|
|
zIndex: 100,
|
|
backgroundColor: 'rgba(104, 105, 104, 0.6)',
|
|
backgroundColor: 'rgba(104, 105, 104, 0.6)',
|
|
- border: 'solid 1px rgba(179, 179, 179, 0.6)',
|
|
|
|
overflowY: 'hidden',
|
|
overflowY: 'hidden',
|
|
boxSizing: 'border-box',
|
|
boxSizing: 'border-box',
|
|
|
|
+ display: 'flex',
|
|
|
|
+ justifyContent: 'center',
|
|
|
|
+ alignContent: 'center',
|
|
|
|
+ alignItems: 'center'
|
|
},
|
|
},
|
|
- carousel: {
|
|
|
|
- position: "absolute",
|
|
|
|
- left: '35%',
|
|
|
|
- top:'2%',
|
|
|
|
|
|
+ wrapperOverlayImg: {
|
|
width: '30%',
|
|
width: '30%',
|
|
- height:'80%',
|
|
|
|
|
|
+ maxHeight: '80%',
|
|
|
|
+ position: 'relative',
|
|
|
|
+ display: 'flex',
|
|
|
|
+ },
|
|
|
|
+ overlayDownloadIcon: {
|
|
|
|
+ position: 'absolute',
|
|
|
|
+ content: '',
|
|
|
|
+ right: 0,
|
|
|
|
+ top: -40,
|
|
|
|
+ cursor: 'pointer',
|
|
|
|
+ color: '#e9e7e7',
|
|
|
|
+ padding: 0,
|
|
|
|
+ borderRadius: '50%',
|
|
|
|
+ '&:hover': {
|
|
|
|
+ backgroundColor: '#ffffff',
|
|
|
|
+ color: '#b8b7b7',
|
|
|
|
+ }
|
|
},
|
|
},
|
|
|
|
+ overlayTime: {
|
|
|
|
+ position: 'absolute',
|
|
|
|
+ content: '',
|
|
|
|
+ color: '#ffffff',
|
|
|
|
+ top: -30,
|
|
|
|
+ left: 0,
|
|
|
|
+ borderRadius: 10,
|
|
|
|
+ padding:'2px 6px 2px 6px',
|
|
|
|
+ backgroundColor:'#707070'
|
|
|
|
+ },
|
|
modalDelete: {
|
|
modalDelete: {
|
|
background: '#ffffff',
|
|
background: '#ffffff',
|
|
position: 'absolute',
|
|
position: 'absolute',
|
|
@@ -233,22 +259,13 @@ const MessagesLeftImage = ({url,createdAt,color,message,messages,fullType,_id}:I
|
|
}
|
|
}
|
|
return (watch ?
|
|
return (watch ?
|
|
<div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
|
|
<div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
|
|
- <Carousel className={classes.carousel}>
|
|
|
|
- {[...messages].reduce((acc, el) => {
|
|
|
|
- if (el.type === 'image' && el.message !== message) {
|
|
|
|
- acc.push(el)
|
|
|
|
- return acc
|
|
|
|
- } else if (el.type === 'image') {
|
|
|
|
- acc.unshift(el)
|
|
|
|
- return acc
|
|
|
|
- }
|
|
|
|
- return acc
|
|
|
|
- },[]).map((el:any) => <div>
|
|
|
|
- <img alt='pic' src={`http://localhost:3000/${el.message}`}/>
|
|
|
|
- <p className="legend">{timeStampFilter(el.createdAt)}</p>
|
|
|
|
- </div>)}
|
|
|
|
- </Carousel>
|
|
|
|
- </div> :
|
|
|
|
|
|
+ <div className={classes.wrapperOverlayImg}>
|
|
|
|
+ <span className={classes.overlayTime}>{timeStampEU(createdAt)}</span>
|
|
|
|
+ <DownloadForOfflineIcon className={classes.overlayDownloadIcon} fontSize='large'
|
|
|
|
+ onClick={() => handleDownload(url, fullType)}/>
|
|
|
|
+ <img width='100%' height='auto' alt='imageItem' src={url} />
|
|
|
|
+ </div>
|
|
|
|
+ </div> :
|
|
<div className={classes.container}>
|
|
<div className={classes.container}>
|
|
<div onContextMenu={(e) => handleContextMenu(e)}
|
|
<div onContextMenu={(e) => handleContextMenu(e)}
|
|
className={selected? classes.wrapperActive:classes.wrapper}>
|
|
className={selected? classes.wrapperActive:classes.wrapper}>
|