reformat chat

fix timestamps

src/components/ChatMessage.jsx

@@ -7,7 +7,11 @@ import { useSelector, useDispatch } from 'react-redux';
 
 import { showContextMenu } from '../actions';
 import { MarkdownParagraph } from './Markdown';
-import { colorFromText, setBrightness } from '../core/utils';
+import {
+  colorFromText,
+  setBrightness,
+  getDateTimeString,
+} from '../core/utils';
 import { parseParagraph } from '../core/MarkdownParser';
 
 
@@ -17,6 +21,7 @@ function ChatMessage({
   country,
   windowId,
   msg,
+  ts,
 }) {
   if (!name) {
     return null;
@@ -43,7 +48,7 @@ function ChatMessage({
   const pArray = parseParagraph(msg);
 
   return (
-    <div className="chatmsg">
+    <li className="chatmsg">
       <div className="chatname">
         {
         (!isInfo && !isEvent)
@@ -81,14 +86,17 @@ function ChatMessage({
               {name}
             </span>
             :&nbsp;
+            <span className="chatts">
+              {getDateTimeString(ts)}
+            </span>
           </>
         )
       }
       </div>
-      <span className={className}>
+      <div className={className}>
         <MarkdownParagraph pArray={pArray} />
-      </span>
+      </div>
-    </div>
+    </li>
   );
 }
 

src/core/MarkdownParser.js

@@ -369,6 +369,7 @@ function parseOpts(inOpts) {
 export function parseParagraph(text, inOpts) {
   const opts = parseOpts(inOpts);
   const mText = new MString(text);
+  console.log('parse', text);
   return parseMParagraph(mText, opts);
 }
 

src/core/utils.js

@@ -374,3 +374,17 @@ export function getExt(link) {
   }
   return link.slice(posDot, paramStart);
 }
+
+/*
+ * convert timestamp to human readable date/time string
+ * @param timestamp Unix timestamp in seconds
+ * @return descriptive string of time
+ */
+export function getDateTimeString(timestamp) {
+  const curDate = new Date();
+  const date = new Date(timestamp * 1000);
+  if (date.getDate() !== curDate.getDate()) {
+    return date.toLocaleString();
+  }
+  return date.toLocaleTimeString();
+}

src/styles/default.css

@@ -667,18 +667,26 @@ tr:nth-child(even) {
 .chatname {
   font-size: 13px;
   white-space: nowrap;
-  display: inline-block;
+  display: flex;
+}
+.chatts {
+  color: #83839f;
+  font-size: 10px;
+  flex-grow: 1;
+  text-align: right;
 }
 .chatmsg {
-  color: #030303;
   font-size: 13px;
   user-select: text;
   margin: 0;
-  display: flex;
+}
-  flex-direction: row;
+.chatmsg:hover {
+  background-color: #ececec;
 }
 .msg {
-  flex: 1;
+  color: #2d2d2d;
+  padding-left: 15px;
+  color:
 }
 .msg.info {
   color: #cc0000;

src/styles/theme-dark-round.css

@@ -136,8 +136,11 @@ tr:nth-child(even) {
   background-color: rgba(187, 187, 187, 0.75);
 }
 
-.chatmsg {
+.chatmsg:hover {
-  color: white;
+  background-color: #474747;
+}
+.msg {
+  color: #f3f3f3;
 }
 .msg.info{
   color: #ff91a6;

src/styles/theme-dark-sstraight.css

@@ -141,8 +141,11 @@ tr:nth-child(even) {
   background-color: rgba(187, 187, 187, 0.75);
 }
 
-.chatmsg {
+.chatmsg:hover {
-  color: #fffcf7;
+  background-color: #474747;
+}
+.msg {
+  color: #f3f3f3;
 }
 .msg.info{
   color: #ff91a6;

src/styles/theme-dark.css

@@ -121,8 +121,11 @@ tr:nth-child(even) {
   background-color: rgba(187, 187, 187, 0.75);
 }
 
-.chatmsg {
+.chatmsg:hover {
-  color: white;
+  background-color: #474747;
+}
+.msg {
+  color: #f3f3f3;
 }
 .msg.info{
   color: #ff91a6;