From 874a44fbd9ddb047e6b13c37c885c480f45bea2b Mon Sep 17 00:00:00 2001
From: HF <pixelplanetdev@gmail.com>
Date: Wed, 9 Feb 2022 20:11:54 +0100
Subject: [PATCH] reformat chat fix timestamps

---
 src/components/ChatMessage.jsx      | 18 +++++++++++++-----
 src/core/MarkdownParser.js          |  1 +
 src/core/utils.js                   | 14 ++++++++++++++
 src/styles/default.css              | 18 +++++++++++++-----
 src/styles/theme-dark-round.css     |  7 +++++--
 src/styles/theme-dark-sstraight.css |  7 +++++--
 src/styles/theme-dark.css           |  7 +++++--
 7 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/src/components/ChatMessage.jsx b/src/components/ChatMessage.jsx
index 9371c63..9917bef 100644
--- a/src/components/ChatMessage.jsx
+++ b/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>
   );
 }
 
diff --git a/src/core/MarkdownParser.js b/src/core/MarkdownParser.js
index 6e6f0e2..c38e809 100644
--- a/src/core/MarkdownParser.js
+++ b/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);
 }
 
diff --git a/src/core/utils.js b/src/core/utils.js
index 4d58a12..4dda499 100644
--- a/src/core/utils.js
+++ b/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();
+}
diff --git a/src/styles/default.css b/src/styles/default.css
index 387a903..55c26d6 100644
--- a/src/styles/default.css
+++ b/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;
diff --git a/src/styles/theme-dark-round.css b/src/styles/theme-dark-round.css
index 1c5340e..72b66bd 100644
--- a/src/styles/theme-dark-round.css
+++ b/src/styles/theme-dark-round.css
@@ -136,8 +136,11 @@ tr:nth-child(even) {
   background-color: rgba(187, 187, 187, 0.75);
 }
 
-.chatmsg {
-  color: white;
+.chatmsg:hover {
+  background-color: #474747;
+}
+.msg {
+  color: #f3f3f3;
 }
 .msg.info{
   color: #ff91a6;
diff --git a/src/styles/theme-dark-sstraight.css b/src/styles/theme-dark-sstraight.css
index fe8b9a4..f6f13b3 100644
--- a/src/styles/theme-dark-sstraight.css
+++ b/src/styles/theme-dark-sstraight.css
@@ -141,8 +141,11 @@ tr:nth-child(even) {
   background-color: rgba(187, 187, 187, 0.75);
 }
 
-.chatmsg {
-  color: #fffcf7;
+.chatmsg:hover {
+  background-color: #474747;
+}
+.msg {
+  color: #f3f3f3;
 }
 .msg.info{
   color: #ff91a6;
diff --git a/src/styles/theme-dark.css b/src/styles/theme-dark.css
index 67263a3..b51252e 100644
--- a/src/styles/theme-dark.css
+++ b/src/styles/theme-dark.css
@@ -121,8 +121,11 @@ tr:nth-child(even) {
   background-color: rgba(187, 187, 187, 0.75);
 }
 
-.chatmsg {
-  color: white;
+.chatmsg:hover {
+  background-color: #474747;
+}
+.msg {
+  color: #f3f3f3;
 }
 .msg.info{
   color: #ff91a6;