mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-29 11:39:08 +03:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
webroot/index.html
View file

@ -36,7 +36,6 @@
<script src="//unpkg.com/showdown/dist/showdown.min.js" defer></script> <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> <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/video.css" rel="stylesheet" />
<link href="./styles/chat.css" rel="stylesheet" /> <link href="./styles/chat.css" rel="stylesheet" />
<link href="./styles/user-content.css" rel="stylesheet" /> <link href="./styles/user-content.css" rel="stylesheet" />

6
webroot/js/components/chat/message.js
View file

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

15
webroot/js/utils/chat.js
View file

@ -278,3 +278,18 @@ export function convertOnPaste( event = { preventDefault() {} }) {
document.execCommand('insertText', false, value); 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()}`;
}