2020-10-05 04:43:31 +03:00
|
|
|
import { h, Component } from '/js/web_modules/preact.js';
|
|
|
|
import htm from '/js/web_modules/htm.js';
|
2020-10-04 05:01:46 +03:00
|
|
|
const html = htm.bind(h);
|
2020-08-13 11:28:25 +03:00
|
|
|
|
2020-10-04 05:08:05 +03:00
|
|
|
import { messageBubbleColorForString } from '../../utils/user-colors.js';
|
|
|
|
import { formatMessageText, formatTimestamp } from '../../utils/chat.js';
|
|
|
|
import { generateAvatar } from '../../utils/helpers.js';
|
|
|
|
import { SOCKET_MESSAGE_TYPES } from '../../utils/websocket.js';
|
2020-10-03 16:29:29 +03:00
|
|
|
|
2020-10-04 05:08:05 +03:00
|
|
|
export default class Message extends Component {
|
2020-08-13 11:28:25 +03:00
|
|
|
render(props) {
|
2020-08-14 14:19:19 +03:00
|
|
|
const { message, username } = props;
|
2020-08-13 11:49:10 +03:00
|
|
|
const { type } = message;
|
|
|
|
|
|
|
|
if (type === SOCKET_MESSAGE_TYPES.CHAT) {
|
2020-10-01 12:11:43 +03:00
|
|
|
const { image, author, body, timestamp } = message;
|
2020-08-14 14:19:19 +03:00
|
|
|
const formattedMessage = formatMessageText(body, username);
|
2020-08-13 11:49:10 +03:00
|
|
|
const avatar = image || generateAvatar(author);
|
2020-10-04 06:57:45 +03:00
|
|
|
const formattedTimestamp = formatTimestamp(timestamp);
|
2020-08-19 10:47:41 +03:00
|
|
|
|
|
|
|
const authorColor = messageBubbleColorForString(author);
|
|
|
|
const avatarBgColor = { backgroundColor: authorColor };
|
|
|
|
const authorTextColor = { color: authorColor };
|
2020-08-13 11:49:10 +03:00
|
|
|
return (
|
|
|
|
html`
|
2020-08-24 07:49:26 +03:00
|
|
|
<div class="message flex flex-row items-start p-3">
|
2020-08-13 11:49:10 +03:00
|
|
|
<div
|
2020-08-22 09:44:10 +03:00
|
|
|
class="message-avatar rounded-full flex items-center justify-center mr-3"
|
2020-08-13 11:49:10 +03:00
|
|
|
style=${avatarBgColor}
|
|
|
|
>
|
2020-08-22 09:44:10 +03:00
|
|
|
<img src=${avatar} class="p-1" />
|
2020-08-13 11:49:10 +03:00
|
|
|
</div>
|
2020-08-27 22:25:46 +03:00
|
|
|
<div class="message-content text-sm break-words w-full">
|
2020-08-22 09:44:10 +03:00
|
|
|
<div class="message-author text-white font-bold" style=${authorTextColor}>
|
|
|
|
${author}
|
|
|
|
</div>
|
2020-08-14 14:19:19 +03:00
|
|
|
<div
|
2020-09-22 06:11:09 +03:00
|
|
|
class="message-text text-gray-300 font-normal overflow-y-hidden"
|
2020-10-04 06:57:45 +03:00
|
|
|
title=${formattedTimestamp}
|
2020-08-14 14:19:19 +03:00
|
|
|
dangerouslySetInnerHTML=${
|
|
|
|
{ __html: formattedMessage }
|
|
|
|
}
|
|
|
|
></div>
|
2020-08-13 11:49:10 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`);
|
|
|
|
} else if (type === SOCKET_MESSAGE_TYPES.NAME_CHANGE) {
|
|
|
|
const { oldName, newName, image } = message;
|
|
|
|
return (
|
|
|
|
html`
|
2020-08-24 07:49:26 +03:00
|
|
|
<div class="message message-name-change flex items-center justify-start p-3">
|
2020-08-27 22:25:46 +03:00
|
|
|
<div class="message-content flex flex-row items-center justify-center text-sm w-full">
|
2020-08-24 07:49:26 +03:00
|
|
|
<div
|
|
|
|
class="message-avatar rounded-full mr-3 bg-gray-900"
|
|
|
|
>
|
|
|
|
<img class="mr-2 p-1" src=${image} />
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="text-white text-center opacity-50">
|
2020-08-22 01:55:52 +03:00
|
|
|
<span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
|
|
|
|
</div>
|
2020-08-13 11:49:10 +03:00
|
|
|
</div>
|
2020-08-13 11:28:25 +03:00
|
|
|
</div>
|
2020-08-22 09:44:10 +03:00
|
|
|
`
|
|
|
|
);
|
2020-08-13 11:49:10 +03:00
|
|
|
}
|
2020-08-13 11:28:25 +03:00
|
|
|
}
|
|
|
|
}
|