Message: Display more info on time hover (#1608)

src/api/gramjs/apiBuilders/messages.ts

@@ -168,7 +168,7 @@ export function buildApiMessageWithChatId(chatId: string, mtpMessage: UniversalM
     ...(replyToPeerId && { replyToChatId: getApiChatIdFromMtpPeer(replyToPeerId) }),
     ...(replyToTopId && { replyToTopMessageId: replyToTopId }),
     ...(forwardInfo && { forwardInfo }),
-    ...(isEdited && { isEdited }),
+    ...(isEdited && { isEdited, editDate: mtpMessage.editDate }),
     ...(isMediaUnread && { isMediaUnread }),
     ...(mtpMessage.mentioned && isMediaUnread && { hasUnreadMention: true }),
     ...(mtpMessage.mentioned && { isMentioned: true }),
@@ -254,6 +254,7 @@ function buildApiMessageForwardInfo(fwdFrom: GramJs.MessageFwdHeader, isChatWith
   const fromId = fwdFrom.fromId && getApiChatIdFromMtpPeer(fwdFrom.fromId);
 
   return {
+    date: fwdFrom.date,
     isChannelPost: Boolean(fwdFrom.channelPost),
     channelPostId: fwdFrom.channelPost,
     isLinkedChannelPost: Boolean(fwdFrom.channelPost && savedFromPeerId && !isChatWithSelf),
@@ -897,6 +898,7 @@ export function buildLocalForwardedMessage(
     // Forward info doesn't get added when users forwards his own messages, also when forwarding audio
     ...(senderId !== currentUserId && !isAudio && {
       forwardInfo: {
+        date: message.date,
         isChannelPost: false,
         fromChatId,
         fromMessageId,

src/api/types/messages.ts

@@ -175,6 +175,7 @@ export interface ApiWebPage {
 }
 
 export interface ApiMessageForwardInfo {
+  date: number;
   isChannelPost: boolean;
   channelPostId?: number;
   isLinkedChannelPost?: boolean;
@@ -247,6 +248,7 @@ export interface ApiMessage {
   previousLocalId?: number;
   views?: number;
   isEdited?: boolean;
+  editDate?: number;
   isMentioned?: boolean;
   isMediaUnread?: boolean;
   groupedId?: string;

src/components/middle/message/MessageMeta.tsx

@@ -1,13 +1,16 @@
-import React, { FC, memo } from '../../../lib/teact/teact';
+import React, {
+  FC, memo, useCallback, useMemo,
+} from '../../../lib/teact/teact';
 
 import { ApiMessage, ApiMessageOutgoingStatus } from '../../../api/types';
 
-import { formatTime } from '../../../util/dateFormat';
+import { formatDateTimeToString, formatTime } from '../../../util/dateFormat';
 import { formatIntegerCompact } from '../../../util/textFormat';
 
 import MessageOutgoingStatus from '../../common/MessageOutgoingStatus';
 import renderText from '../../common/helpers/renderText';
 import useLang from '../../../hooks/useLang';
+import useFlag from '../../../hooks/useFlag';
 
 import './MessageMeta.scss';
 
@@ -22,6 +25,26 @@ const MessageMeta: FC<OwnProps> = ({
   message, outgoingStatus, signature, onClick,
 }) => {
   const lang = useLang();
+  const [isActivated, markActivated] = useFlag();
+
+  const title = useMemo(() => {
+    if (!isActivated) return undefined;
+    const createDateTime = formatDateTimeToString(message.date * 1000, lang.code);
+    const editDateTime = message.isEdited && formatDateTimeToString(message.editDate! * 1000, lang.code);
+    const forwardedDateTime = message.forwardInfo && formatDateTimeToString(message.forwardInfo.date * 1000, lang.code);
+
+    let text = createDateTime;
+    if (editDateTime) {
+      text += '\n';
+      text += lang('lng_edited_date').replace('{date}', editDateTime);
+    }
+    if (forwardedDateTime) {
+      text += '\n';
+      text += lang('lng_forwarded_date').replace('{date}', forwardedDateTime);
+    }
+
+    return text;
+  }, [isActivated, lang, message]);
 
   return (
     <span className="MessageMeta" dir={lang.isRtl ? 'rtl' : 'ltr'} onClick={onClick}>
@@ -36,7 +59,7 @@ const MessageMeta: FC<OwnProps> = ({
       {signature && (
         <span className="message-signature">{renderText(signature)}</span>
       )}
-      <span className="message-time">
+      <span className="message-time" title={title} onMouseEnter={markActivated}>
         {message.isEdited && `${lang('EditedMessage')} `}
         {formatTime(message.date * 1000, lang)}
       </span>

src/util/dateFormat.ts

@@ -197,7 +197,8 @@ export function formatVoiceRecordDuration(durationInMs: number) {
   return `${parts.join(':')},${String(milliseconds).padStart(2, '0')}`;
 }
 
-export function formatDateToString(date: Date, locale = 'en-US') {
+export function formatDateToString(datetime: Date | number, locale = 'en-US') {
+  const date = typeof datetime === 'number' ? new Date(datetime) : datetime;
   return date.toLocaleString(
     locale,
     {
@@ -208,6 +209,21 @@ export function formatDateToString(date: Date, locale = 'en-US') {
   );
 }
 
+export function formatDateTimeToString(datetime: Date | number, locale = 'en-US') {
+  const date = typeof datetime === 'number' ? new Date(datetime) : datetime;
+  return date.toLocaleString(
+    locale,
+    {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+    },
+  );
+}
+
 function isValidDate(day: number, month: number, year = 2021): boolean {
   if (month > (MAX_MONTH_IN_YEAR - 1) || day > MAX_DAY_IN_MONTH) {
     return false;