From 06be1da40d48211af86312bb176aab61ae317e69 Mon Sep 17 00:00:00 2001 From: Mikunj Date: Fri, 15 Feb 2019 10:54:39 +1100 Subject: [PATCH] Added p2p message styling --- js/background.js | 10 ++++++++++ js/models/conversations.js | 16 +++++++++++++--- js/models/messages.js | 13 +++++++++++++ js/modules/loki_message_api.js | 15 ++++++++++----- libtextsecure/message_receiver.js | 1 + stylesheets/_modules.scss | 8 ++++++-- ts/components/conversation/Message.tsx | 13 ++++++++++++- 7 files changed, 65 insertions(+), 11 deletions(-) diff --git a/js/background.js b/js/background.js index e5c6b6972..92fa0988b 100644 --- a/js/background.js +++ b/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) { diff --git a/js/models/conversations.js b/js/models/conversations.js index d0fbdca4c..44ed4dec4 100644 --- a/js/models/conversations.js +++ b/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(); diff --git a/js/models/messages.js b/js/models/messages.js index 2847af3bd..77e6c1b12 100644 --- a/js/models/messages.js +++ b/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 diff --git a/js/modules/loki_message_api.js b/js/modules/loki_message_api.js index b68a65d97..599ddc282 100644 --- a/js/modules/loki_message_api.js +++ b/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', diff --git a/libtextsecure/message_receiver.js b/libtextsecure/message_receiver.js index 697643abb..2913c79a1 100644 --- a/libtextsecure/message_receiver.js +++ b/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); diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 85ae1a777..f9b20b002 100644 --- a/stylesheets/_modules.scss +++ b/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; } diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index c4b2b32d0..045713523 100644 --- a/ts/components/conversation/Message.tsx +++ b/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 { status, text, timestamp, + isP2p, } = this.props; if (collapseMetadata) { @@ -237,6 +240,14 @@ export class Message extends React.Component { module="module-message__metadata__date" /> )} + {isP2p ? ( + +  • P2P + + ) : null} {expirationLength && expirationTimestamp ? ( { `module-message__container--${direction}`, direction === 'incoming' ? `module-message__container--incoming-${authorColor}` - : null + : null, )} style={{ width: isShowingImage ? width : undefined,