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

Add timestamp to title chat

webroot/index.html

@@ -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" />

webroot/js/components/chat/message.js

@@ -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 }
                 }

webroot/js/utils/chat.js

@@ -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()}`;
+}