Merge pull request #213 from ahmadkarlam/add-title-chat

Add timestamp to title chat
This commit is contained in:
gingervitis 2020-10-04 01:15:45 -07:00 committed by GitHub
commit e7f39a0113
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 3 deletions

View file

@ -36,7 +36,6 @@
<script src="//unpkg.com/showdown/dist/showdown.min.js" defer></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.6.2/lite-youtube.js" defer></script>
<link href="./styles/video.css" rel="stylesheet" />
<link href="./styles/chat.css" rel="stylesheet" />
<link href="./styles/user-content.css" rel="stylesheet" />

View file

@ -3,7 +3,7 @@ import htm from 'https://unpkg.com/htm?module';
const html = htm.bind(h);
import { messageBubbleColorForString } from '../../utils/user-colors.js';
import { formatMessageText } from '../../utils/chat.js';
import { formatMessageText, formatTimestamp } from '../../utils/chat.js';
import { generateAvatar } from '../../utils/helpers.js';
import { SOCKET_MESSAGE_TYPES } from '../../utils/websocket.js';
@ -13,9 +13,10 @@ export default class Message extends Component {
const { type } = message;
if (type === SOCKET_MESSAGE_TYPES.CHAT) {
const { image, author, body } = message;
const { image, author, body, timestamp } = message;
const formattedMessage = formatMessageText(body, username);
const avatar = image || generateAvatar(author);
const formattedTimestamp = formatTimestamp(timestamp);
const authorColor = messageBubbleColorForString(author);
const avatarBgColor = { backgroundColor: authorColor };
@ -35,6 +36,7 @@ export default class Message extends Component {
</div>
<div
class="message-text text-gray-300 font-normal overflow-y-hidden"
title=${formattedTimestamp}
dangerouslySetInnerHTML=${
{ __html: formattedMessage }
}

View file

@ -278,3 +278,18 @@ export function convertOnPaste( event = { preventDefault() {} }) {
document.execCommand('insertText', false, value);
}
}
export function formatTimestamp(sentAt) {
sentAt = new Date(sentAt);
if (isNaN(sentAt)) {
return '';
}
let diffInDays = ((new Date()) - sentAt) / (24 * 3600 * 1000);
if (diffInDays >= 1) {
return `Sent at ${sentAt.toLocaleDateString('en-US', {dateStyle: 'medium'})} at ` +
sentAt.toLocaleTimeString();
}
return `Sent at ${sentAt.toLocaleTimeString()}`;
}