Added p2p message styling

js/background.js

@@ -652,6 +652,15 @@
       }
     });
 
+    Whisper.events.on('p2pMessageSent', ({ pubKey, timestamp }) => {
+      try {
+        const conversation = ConversationController.get(pubKey);
+        conversation.onP2pMessageSent(pubKey, timestamp);
+      } catch (e) {
+        window.log.error('Error setting p2p on message');
+      }
+    });
+
     Whisper.events.on('password-updated', () => {
       if (appView && appView.inboxView) {
         appView.inboxView.trigger('password-updated');
@@ -1386,6 +1395,7 @@
       unidentifiedDeliveryReceived: data.unidentifiedDeliveryReceived,
       type: 'incoming',
       unread: 1,
+      isP2p: data.isP2p,
     };
 
     if (data.friendRequest) {

js/models/conversations.js

@@ -321,16 +321,26 @@
       removeMessage();
     },
 
-    async onCalculatingPoW(pubKey, timestamp) {
-      if (this.id !== pubKey) return;
+    // Get messages with the given timestamp
+    _getMessagesWithTimestamp(pubKey, timestamp) {
+      if (this.id !== pubKey) return [];
 
       // Go through our messages and find the one that we need to update
-      const messages = this.messageCollection.models.filter(
+      return this.messageCollection.models.filter(
         m => m.get('sent_at') === timestamp
       );
+    },
+
+    async onCalculatingPoW(pubKey, timestamp) {
+      const messages = this._getMessagesWithTimestamp(pubKey, timestamp);
       await Promise.all(messages.map(m => m.setCalculatingPoW()));
     },
 
+    async onP2pMessageSent(pubKey, timestamp) {
+      const messages = this._getMessagesWithTimestamp(pubKey, timestamp);
+      await Promise.all(messages.map(m => m.setIsP2p(true)));
+    },
+
     async onNewMessage(message) {
       await this.updateLastMessage();
 

js/models/messages.js

@@ -591,6 +591,8 @@
         isExpired: this.hasExpired,
         expirationLength,
         expirationTimestamp,
+        isP2p: !!this.get('isP2p'),
+
         onReply: () => this.trigger('reply', this),
         onRetrySend: () => this.retrySend(),
         onShowDetail: () => this.trigger('show-message-detail', this),
@@ -1094,6 +1096,17 @@
         Message: Whisper.Message,
       });
     },
+    async setIsP2p(isP2p) {
+      if (_.isEqual(this.get('isP2p'), isP2p)) return;
+
+      this.set({
+        isP2p: !!isP2p,
+      });
+
+      await window.Signal.Data.saveMessage(this.attributes, {
+        Message: Whisper.Message,
+      });
+    },
     send(promise) {
       this.trigger('pending');
       return promise

js/modules/loki_message_api.js

@@ -66,8 +66,15 @@ class LokiMessageAPI {
   }
 
   async sendMessage(pubKey, data, messageTimeStamp, ttl, isPing = false) {
-    const data64 = dcodeIO.ByteBuffer.wrap(data).toString('base64');
     const timestamp = Math.floor(Date.now() / 1000);
+
+    // Data required to identify a message in a conversation
+    const messageEventData = {
+      pubKey,
+      timestamp: messageTimeStamp,
+    };
+
+    const data64 = dcodeIO.ByteBuffer.wrap(data).toString('base64');
     const p2pDetails = lokiP2pAPI.getContactP2pDetails(pubKey);
     const body = {
       method: 'store',
@@ -86,6 +93,7 @@ class LokiMessageAPI {
 
         await fetch(url, fetchOptions);
         lokiP2pAPI.setContactOnline(pubKey);
+        window.Whisper.events.trigger('p2pMessageSent', messageEventData);
         return;
       } catch (e) {
         log.warn('Failed to send P2P message, falling back to storage', e);
@@ -100,10 +108,7 @@ class LokiMessageAPI {
     // Nonce is returned as a base64 string to include in header
     let nonce;
     try {
-      window.Whisper.events.trigger('calculatingPoW', {
-        pubKey,
-        timestamp: messageTimeStamp,
-      });
+      window.Whisper.events.trigger('calculatingPoW', messageEventData);
       const development = window.getEnvironment() !== 'production';
       nonce = await callWorker(
         'calcPoW',

libtextsecure/message_receiver.js

@@ -1027,6 +1027,7 @@ MessageReceiver.prototype.extend({
             timestamp: envelope.timestamp.toNumber(),
             receivedAt: envelope.receivedAt,
             unidentifiedDeliveryReceived: envelope.unidentifiedDeliveryReceived,
+            isP2p: envelope.isP2p,
             message,
           };
           return this.dispatchAndWait(ev);

stylesheets/_modules.scss

@@ -506,20 +506,24 @@
   padding-right: 24px;
 }
 
-.module-message__metadata__date {
+.module-message__metadata__date, .module-message__metadata__p2p {
   font-size: 11px;
   line-height: 16px;
   letter-spacing: 0.3px;
   color: $color-gray-60;
   text-transform: uppercase;
 }
-.module-message__metadata__date--incoming {
+.module-message__metadata__date--incoming, .module-message__metadata__p2p--incoming {
   color: $color-white-08;
 }
 .module-message__metadata__date--with-image-no-caption {
   color: $color-white;
 }
 
+.module-message__metadata__p2p {
+  font-weight: bold;
+}
+
 .module-message__metadata__spacer {
   flex-grow: 1;
 }

ts/components/conversation/Message.tsx

@@ -79,6 +79,8 @@ export interface Props {
   isExpired: boolean;
   expirationLength?: number;
   expirationTimestamp?: number;
+  isP2p?: boolean;
+
   onClickAttachment?: (attachment: AttachmentType) => void;
   onClickLinkPreview?: (url: string) => void;
   onReply?: () => void;
@@ -196,6 +198,7 @@ export class Message extends React.Component<Props, State> {
       status,
       text,
       timestamp,
+      isP2p,
     } = this.props;
 
     if (collapseMetadata) {
@@ -237,6 +240,14 @@ export class Message extends React.Component<Props, State> {
             module="module-message__metadata__date"
           />
         )}
+        {isP2p ? (
+          <span className={classNames(
+            'module-message__metadata__p2p',
+            `module-message__metadata__p2p--${direction}`,
+          )}>
+            &nbsp;•&nbsp;P2P
+          </span>
+        ) : null}
         {expirationLength && expirationTimestamp ? (
           <ExpireTimer
             direction={direction}
@@ -944,7 +955,7 @@ export class Message extends React.Component<Props, State> {
             `module-message__container--${direction}`,
             direction === 'incoming'
               ? `module-message__container--incoming-${authorColor}`
-              : null
+              : null,
           )}
           style={{
             width: isShowingImage ? width : undefined,