ref(chat): on web, move timestamp to chat message

css/_chat.scss

@@ -287,13 +287,17 @@
     &.local {
         align-items: flex-end;
 
+        .chatmessage {
+            background-color: $chatLocalMessageBackgroundColor;
+            border-radius: 6px 0px 6px 6px;
+        }
+
         .display-name {
             display: none;
         }
 
-        .chatmessage {
+        .timestamp {
-            background-color: $chatLocalMessageBackgroundColor;
+            text-align: right;
-            border-radius: 6px 0px 6px 6px;
         }
     }
 

react/features/chat/components/AbstractChatMessage.js

@@ -2,8 +2,14 @@
 
 import { PureComponent } from 'react';
 
+import { getLocalizedDateFormatter } from '../../base/i18n';
 import { getAvatarURLByParticipantId } from '../../base/participants';
 
+/**
+ * Formatter string to display the message timestamp.
+ */
+const TIMESTAMP_FORMAT = 'H:mm';
+
 /**
  * The type of the React {@code Component} props of {@code AbstractChatMessage}.
  */
@@ -47,11 +53,15 @@ export type Props = {
  * Abstract component to display a chat message.
  */
 export default class AbstractChatMessage<P: Props> extends PureComponent<P> {
-    static defaultProps = {
+    /**
-        showAvatar: false,
+     * Returns the timestamp to display for the message.
-        showDisplayName: false,
+     *
-        showTimestamp: false
+     * @returns {string}
-    };
+     */
+    _getFormattedTimestamp() {
+        return getLocalizedDateFormatter(new Date(this.props.message.timestamp))
+            .format(TIMESTAMP_FORMAT);
+    }
 }
 
 /**

react/features/chat/components/native/ChatMessage.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 
-import { getLocalizedDateFormatter, translate } from '../../../base/i18n';
+import { translate } from '../../../base/i18n';
 import { Avatar } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 
@@ -13,11 +13,6 @@ import AbstractChatMessage, {
 } from '../AbstractChatMessage';
 import styles from './styles';
 
-/**
- * Formatter string to display the message timestamp.
- */
-const TIMESTAMP_FORMAT = 'H:mm';
-
 /**
  * Renders a single chat message.
  */
@@ -75,6 +70,8 @@ class ChatMessage extends AbstractChatMessage<Props> {
         );
     }
 
+    _getFormattedTimestamp: () => string;
+
     /**
      * Renders the avatar of the sender.
      *
@@ -112,11 +109,7 @@ class ChatMessage extends AbstractChatMessage<Props> {
     _renderTimestamp() {
         return (
             <Text style = { styles.timeText }>
-                {
+                { this._getFormattedTimestamp() }
-                    getLocalizedDateFormatter(
-                        new Date(this.props.message.timestamp)
-                    ).format(TIMESTAMP_FORMAT)
-                }
             </Text>
         );
     }

react/features/chat/components/web/ChatMessage.js

@@ -56,13 +56,42 @@ class ChatMessage extends AbstractChatMessage<Props> {
         });
 
         return (
-            <div className = 'chatmessage'>
+            <div>
-                { this.props.showDisplayName && <div className = 'display-name'>
+                <div className = 'chatmessage'>
-                    { message.displayName }
+                    { this.props.showDisplayName && this._renderDisplayName() }
-                </div> }
+                    <div className = 'usermessage'>
-                <div className = 'usermessage'>
+                        { processedMessage }
-                    { processedMessage }
+                    </div>
                 </div>
+                { this.props.showTimestamp && this._renderTimestamp() }
+            </div>
+        );
+    }
+
+    _getFormattedTimestamp: () => string;
+
+    /**
+     * Renders the display name of the sender.
+     *
+     * @returns {React$Element<*>}
+     */
+    _renderDisplayName() {
+        return (
+            <div className = 'display-name'>
+                { this.props.message.displayName }
+            </div>
+        );
+    }
+
+    /**
+     * Renders the time at which the message was sent.
+     *
+     * @returns {React$Element<*>}
+     */
+    _renderTimestamp() {
+        return (
+            <div className = 'timestamp'>
+                { this._getFormattedTimestamp() }
             </div>
         );
     }

react/features/chat/components/web/ChatMessageGroup.js

@@ -3,8 +3,6 @@
 import React, { Component } from 'react';
 import ChatMessage from './ChatMessage';
 
-import { getLocalizedDateFormatter } from '../../../base/i18n';
-
 type Props = {
 
     /**
@@ -43,8 +41,6 @@ class ChatMessageGroup extends Component<Props> {
             return null;
         }
 
-        const { timestamp } = messages[messagesLength - 1];
-
         return (
             <div className = { `chat-message-group ${className}` }>
                 {
@@ -52,13 +48,10 @@ class ChatMessageGroup extends Component<Props> {
                         <ChatMessage
                             key = { i }
                             message = { message }
-                            showDisplayName = { i === 0 } />
+                            showDisplayName = { i === 0 }
+                            showTimestamp = { i === messages.length - 1 } />
                     ))
                 }
-                <div className = 'chat-message-group-footer'>
-                    { getLocalizedDateFormatter(
-                        new Date(timestamp)).format('H:mm') }
-                </div>
             </div>
         );
     }