Add timestamp on mouseover

ui/component/livestreamComment/view.jsx

@@ -12,6 +12,7 @@ import classnames from 'classnames';
 import CommentMenuList from 'component/commentMenuList';
 import Button from 'component/button';
 import CreditAmount from 'component/common/credit-amount';
+import DateTime from 'component/dateTime';
 import OptimizedImage from 'component/optimizedImage';
 import { parseSticker } from 'util/comments';
 
@@ -26,7 +27,7 @@ type Props = {
 
 function LivestreamComment(props: Props) {
   const { comment, claim, uri, stakedLevel, myChannelIds } = props;
-  const { channel_url: authorUri, comment: message, support_amount: supportAmount } = comment;
+  const { channel_url: authorUri, comment: message, support_amount: supportAmount, timestamp } = comment;
 
   const [hasUserMention, setUserMention] = React.useState(false);
   const commentIsMine = comment.channel_id && isMyComment(comment.channel_id);
@@ -34,6 +35,7 @@ function LivestreamComment(props: Props) {
   const commentByOwnerOfContent = claim && claim.signing_channel && claim.signing_channel.permanent_url === authorUri;
   const { claimName } = parseURI(authorUri || '');
   const stickerFromMessage = parseSticker(message);
+  const timePosted = timestamp * 1000;
 
   // todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
   function isMyComment(channelId: string) {
@@ -108,6 +110,8 @@ function LivestreamComment(props: Props) {
             </span>
           )}
 
+          <DateTime date={timePosted} timeAgo />
+
           {comment.removed ? (
             <div className="livestream-comment__text">
               <Empty text={__('[Removed]')} />

ui/scss/component/_comments.scss

@@ -172,7 +172,7 @@ $thumbnailWidthSmall: 1rem;
 }
 
 .comment__pin {
-  margin-left: var(--spacing-s);
+  margin: 0 var(--spacing-s);
   font-size: var(--font-xsmall);
 
   .icon {
@@ -223,10 +223,14 @@ $thumbnailWidthSmall: 1rem;
 }
 
 .comment__author {
-  max-width: 10rem;
-  text-overflow: ellipsis;
   margin-right: var(--spacing-xs);
   height: 100%;
+
+  .button__content {
+    max-width: 10rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .comment__author--creator {

ui/scss/component/_livestream.scss

@@ -87,6 +87,17 @@ $recent-msg-button__height: 2rem;
   list-style-type: none;
   position: relative;
 
+  .date_time {
+    color: var(--color-text-subtitle);
+    opacity: 0.5;
+  }
+
+  &:not(:hover) {
+    .date_time:not(:focus) {
+      display: none;
+    }
+  }
+
   @media (min-width: $breakpoint-small) {
     &:hover {
       background-color: var(--color-card-background-highlighted);