Proyectos de Subversion LeadersLinked - SPA

Rev

Ir a la última revisión | | Ultima modificación | Ver Log |

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