Merge pull request #1332 from Bilb/message-detail-view-fixes

js/models/messages.js

@@ -836,7 +836,7 @@
 
       return Boolean(lookup[contactId]);
     },
-    getPropsForMessageDetail() {
+    async getPropsForMessageDetail() {
       const newIdentity = i18n('newIdentity');
       const OUTGOING_KEY_ERROR = 'OutgoingIdentityKeyError';
 
@@ -872,39 +872,43 @@
       //   that contact. Otherwise, it will be a standalone entry.
       const errors = _.reject(allErrors, error => Boolean(error.number));
       const errorsGroupedById = _.groupBy(allErrors, 'number');
-      const primaryDevicePubKey = this.get('conversationId');
-      const finalContacts = (phoneNumbers || []).map(id => {
-        const errorsForContact = errorsGroupedById[id];
-        const isOutgoingKeyError = Boolean(
-          _.find(errorsForContact, error => error.name === OUTGOING_KEY_ERROR)
-        );
-        const isUnidentifiedDelivery =
-          storage.get('unidentifiedDeliveryIndicators') &&
-          this.isUnidentifiedDelivery(id, unidentifiedLookup);
-
-        const isPrimaryDevice = id === primaryDevicePubKey;
+      const finalContacts = await Promise.all(
+        (phoneNumbers || []).map(async id => {
+          const errorsForContact = errorsGroupedById[id];
+          const isOutgoingKeyError = Boolean(
+            _.find(errorsForContact, error => error.name === OUTGOING_KEY_ERROR)
+          );
+          const isUnidentifiedDelivery =
+            storage.get('unidentifiedDeliveryIndicators') &&
+            this.isUnidentifiedDelivery(id, unidentifiedLookup);
+          const primary = await window.libsession.Protocols.MultiDeviceProtocol.getPrimaryDevice(
+            id
+          );
 
-        const contact = this.findAndFormatContact(id);
-        const profileName = isPrimaryDevice
-          ? contact.profileName
-          : `${contact.profileName} (Secondary Device)`;
-        return {
-          ...contact,
-          status: this.getStatus(id),
-          errors: errorsForContact,
-          isOutgoingKeyError,
-          isUnidentifiedDelivery,
-          isPrimaryDevice,
-          profileName,
-          onSendAnyway: () =>
-            this.trigger('force-send', {
-              contact: this.findContact(id),
-              message: this,
-            }),
-          onShowSafetyNumber: () =>
-            this.trigger('show-identity', this.findContact(id)),
-        };
-      });
+          const isPrimaryDevice = id === primary.key;
+
+          const contact = this.findAndFormatContact(id);
+          const profileName = isPrimaryDevice
+            ? contact.profileName
+            : `${contact.profileName} (Secondary Device)`;
+          return {
+            ...contact,
+            status: this.getStatus(id),
+            errors: errorsForContact,
+            isOutgoingKeyError,
+            isUnidentifiedDelivery,
+            isPrimaryDevice,
+            profileName,
+            onSendAnyway: () =>
+              this.trigger('force-send', {
+                contact: this.findContact(id),
+                message: this,
+              }),
+            onShowSafetyNumber: () =>
+              this.trigger('show-identity', this.findContact(id)),
+          };
+        })
+      );
 
       // The prefix created here ensures that contacts with errors are listed
       //   first; otherwise it's alphabetical

js/views/conversation_view.js

@@ -1496,14 +1496,14 @@
       Signal.Backbone.Views.Lightbox.show(this.lightboxGalleryView.el);
     },
 
-    showMessageDetail(message) {
+    async showMessageDetail(message) {
       const onClose = () => {
         this.stopListening(message, 'change', update);
         this.resetPanel();
         this.updateHeader();
       };
 
-      const props = message.getPropsForMessageDetail();
+      const props = await message.getPropsForMessageDetail();
       const view = new Whisper.ReactWrapperView({
         className: 'message-detail-wrapper',
         Component: Signal.Components.MessageDetail,
@@ -1511,7 +1511,8 @@
         onClose,
       });
 
-      const update = () => view.update(message.getPropsForMessageDetail());
+      const update = async () =>
+        view.update(await message.getPropsForMessageDetail());
       this.listenTo(message, 'change', update);
       this.listenTo(message, 'expired', onClose);
       // We could listen to all involved contacts, but we'll call that overkill

stylesheets/_modules.scss

@@ -1224,7 +1224,7 @@
 }
 
 .module-message-detail__contact-container {
-  margin: 20px;
+  margin: 20px 0 20px 0;
 }
 
 .module-message-detail__contact {