LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Use moment js for diff and format date

Browse Source
This commit is contained in:
Ahmad Karlam 2020-10-03 20:29:29 +07:00
parent 334a69386d
commit 63a757ef23
2 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webroot/index.html
View File

@ -35,6 +35,8 @@
<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>
<!-- moment js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js" integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg==" crossorigin="anonymous"></script>
<link href="./styles/video.css" rel="stylesheet" />
<link href="./styles/chat.css" rel="stylesheet" />

13
webroot/js/components/chat/message.js
View File

@ -8,6 +8,16 @@ import { generateAvatar } from '../../utils/helpers.js';
import { SOCKET_MESSAGE_TYPES } from '../../utils/websocket.js';
export default class Message extends Component {
formatTimestamp(sentAt) {
sentAt = moment(sentAt);
if (moment().diff(sentAt, 'days') >= 1) {
return `${sentAt.format('MMM D HH:mm:ss')}`
}
return sentAt.format("HH:mm:ss");
}
render(props) {
const { message, username } = props;
const { type } = message;
@ -20,6 +30,7 @@ export default class Message extends Component {
const authorColor = messageBubbleColorForString(author);
const avatarBgColor = { backgroundColor: authorColor };
const authorTextColor = { color: authorColor };
return (
html`
<div class="message flex flex-row items-start p-3">
@ -35,7 +46,7 @@ export default class Message extends Component {
</div>
<div
class="message-text text-gray-300 font-normal overflow-y-hidden"
title=${timestamp}
title=${`Sent at ${this.formatTimestamp(timestamp)}`}
dangerouslySetInnerHTML=${
{ __html: formattedMessage }
}