Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1684 stevensc 1 
import React, { useEffect, useState } from 'react'
2 
import { Box, styled } from '@mui/material'
3 
import { Check } from '@mui/icons-material'
4 
import parse from 'html-react-parser'
5 
 
6 
import Options from '../UI/Option'
7 
 
8 
const MessageTemplate = styled(Box)`
9 
  box-shadow: var(--light-shadow);
10 
  display: inline-flex;
11 
  flex-direction: column;
12 
  gap: 0.5rem;
13 
  margin-bottom: 0.5rem;
14 
  max-width: 70%;
15 
  min-width: 4rem;
16 
  padding: 0.5rem;
17 
  position: relative;
1685 stevensc 18 
  p {
1684 stevensc 19 
    color: var(--chat-color);
20 
    max-width: 100%;
21 
    overflow: hidden;
22 
    text-overflow: ellipsis;
23 
    word-break: break-word;
24 
  }
1685 stevensc 25 
  img,
26 
  video {
1684 stevensc 27 
    max-width: 250px;
28 
    max-height: 250px;
29 
    object-fit: contain;
30 
  }
1685 stevensc 31 
  svg,
32 
  small {
1684 stevensc 33 
    color: var(--subtitle-color);
34 
    font-size: 0.8rem;
35 
  }
36 
  .emojione {
37 
    width: 1rem;
38 
    height: 1rem;
39 
  }
40 
`
41 
 
42 
export default function Message({ message, onReport }) {
43 
  const [options, setOptions] = useState([])
44 
  const {
45 
    u,
46 
    side,
47 
    type,
48 
    user_name,
49 
    filename,
50 
    m,
51 
    url_abuse_report,
52 
    mtype,
53 
    not_received,
54 
    seen,
55 
    date,
56 
    time,
1687 stevensc 57 
    id,
58 
    message: content
1684 stevensc 59 
  } = message
60 
  const isSend = u === 1 || side === 'left'
61 
  const showName = type === 'group' && !u === 1
62 
 
63 
  const messagesContent = {
1687 stevensc 64 
    text: <p>{parse(emojione.shortnameToImage(m ?? content ?? ''))}</p>,
1684 stevensc 65 
    image: <img src={m || filename} alt='chat_image' />,
66 
    video: <video src={m || filename} preload='none' controls />,
67 
    document: (
68 
      <a href={m || filename} download>
69 
        <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
70 
      </a>
71 
    )
72 
  }
73 
 
74 
  useEffect(() => {
75 
    if (url_abuse_report) {
76 
      const reportOption = {
77 
        action: () => onReport({ url: url_abuse_report, id }),
78 
        label: 'Reportar'
79 
      }
80 
      setOptions([...options, reportOption])
81 
    }
82 
  }, [message])
83 
 
84 
  return (
85 
    <>
86 
      {showName ? <span className='user_name'>{user_name}</span> : null}
87 
      <MessageTemplate
88 
        sx={
89 
          isSend
90 
            ? {
91 
                alignSelf: 'flex-end',
92 
                backgroundColor: '#eee',
93 
                borderRadius: '10px 0px 10px 10px',
94 
                marginRight: '0.5rem',
95 
                color: '#393939'
96 
              }
1685 stevensc 97 
            : {
98 
                alignSelf: 'flex-start',
99 
                backgroundColor: 'var(--chat-received)',
100 
                borderRadius: '0 10px 10px 10px',
101 
                marginLeft: '0.5rem'
102 
              }
1684 stevensc 103 
        }
104 
      >
105 
        {messagesContent[mtype || type]}
106 
 
107 
        <small className='time'>
108 
          <Check
109 
            sx={{
110 
              color: seen ? 'blue' : 'gray',
111 
              display: not_received ? 'none' : 'flex'
112 
            }}
113 
          />
114 
          {time ?? date}
115 
        </small>
116 
 
117 
        <Options options={options} right='-2.5rem' />
118 
      </MessageTemplate>
119 
    </>
120 
  )
121 
}