Merge branch 'clearnet' into reactions_fixes

stylesheets/_session.scss

@@ -352,14 +352,6 @@ label {
   border-bottom-right-radius: 5px;
 }
 
-.module-message__container--outgoing--first-of-series {
-  border-top-right-radius: $session_message-container-border-radius;
-}
-
-.module-message__container--outgoing--last-of-series {
-  border-bottom-right-radius: $session_message-container-border-radius;
-}
-
 .conversation-header {
   .module-avatar img {
     box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.2);

stylesheets/_session_theme.scss

@@ -40,19 +40,6 @@
       background: none;
     }
 
-    border-top-right-radius: $message-container-border-radius;
-    border-bottom-right-radius: $message-container-border-radius;
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-
-    &--first-of-series {
-      border-top-left-radius: $message-container-border-radius;
-    }
-
-    &--last-of-series {
-      border-bottom-left-radius: $message-container-border-radius;
-    }
-
     .module-message__text {
       color: var(--color-received-message-text);
       display: flex;
@@ -71,11 +58,6 @@
   }
 
   &__container--outgoing {
-    border-top-left-radius: $message-container-border-radius;
-    border-bottom-left-radius: $message-container-border-radius;
-
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
     &--opaque {
       background: var(--color-sent-message-background);
     }
@@ -84,14 +66,6 @@
       background: none;
     }
 
-    &--first-of-series {
-      border-top-right-radius: $message-container-border-radius;
-    }
-
-    &--last-of-series {
-      border-bottom-right-radius: $message-container-border-radius;
-    }
-
     .module-message__text {
       color: var(--color-sent-message-text);
 

stylesheets/_variables.scss

@@ -74,7 +74,6 @@ $header-height: 55px;
 $button-height: 24px;
 
 $border-radius: 5px;
-$message-container-border-radius: 16px;
 
 $font-size: 14px;
 $font-size-small: calc(13 / 14) + em;

ts/components/conversation/message/message-content/MessageContent.tsx

@@ -28,6 +28,7 @@ import { MessagePreview } from './MessagePreview';
 import { MessageQuote } from './MessageQuote';
 import { MessageText } from './MessageText';
 import { ScrollToLoadedMessageContext } from '../../SessionMessagesListContainer';
+import styled from 'styled-components';
 
 export type MessageContentSelectorProps = Pick<
   MessageRenderingProps,
@@ -95,6 +96,24 @@ function onClickOnMessageInnerContainer(event: React.MouseEvent<HTMLDivElement>)
   }
 }
 
+const radiusLg = '18px';
+const radiusSm = '4px';
+
+const StyledMessageContent = styled.div<{
+  isOutgoing: boolean;
+  firstOfSeries: boolean;
+  lastOfSeries: boolean;
+}>`
+  border-top-right-radius: ${props =>
+    props.isOutgoing ? (props.firstOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`};
+  border-bottom-right-radius: ${props =>
+    props.isOutgoing ? (props.lastOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`};
+  border-top-left-radius: ${props =>
+    !props.isOutgoing ? (props.firstOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`};
+  border-bottom-left-radius: ${props =>
+    !props.isOutgoing ? (props.lastOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`};
+`;
+
 export const IsMessageVisibleContext = createContext(false);
 
 export const MessageContent = (props: Props) => {
@@ -181,26 +200,25 @@ export const MessageContent = (props: Props) => {
 
   const bgShouldBeTransparent = isShowingImage && !hasText && !hasQuote;
   const toolTipTitle = moment(serverTimestamp || timestamp).format('llll');
+  // tslint:disable: use-simple-attributes
 
   return (
-    <div
+    <StyledMessageContent
       className={classNames(
         'module-message__container',
         `module-message__container--${direction}`,
         bgShouldBeTransparent
           ? `module-message__container--${direction}--transparent`
           : `module-message__container--${direction}--opaque`,
-        firstMessageOfSeries || props.isDetailView
-          ? `module-message__container--${direction}--first-of-series`
-          : '',
-        lastMessageOfSeries || props.isDetailView
-          ? `module-message__container--${direction}--last-of-series`
-          : '',
+
         flashGreen && 'flash-green-once'
       )}
       style={{
         width: isShowingImage ? width : undefined,
       }}
+      firstOfSeries={Boolean(firstMessageOfSeries || props.isDetailView)}
+      lastOfSeries={Boolean(lastMessageOfSeries || props.isDetailView)}
+      isOutgoing={direction === 'outgoing'}
       role="button"
       onClick={onClickOnMessageInnerContainer}
       title={toolTipTitle}
@@ -235,7 +253,7 @@ export const MessageContent = (props: Props) => {
           ) : null}
         </IsMessageVisibleContext.Provider>
       </InView>
-    </div>
+    </StyledMessageContent>
   );
 };
 

ts/components/conversation/message/message-content/MessageContentWithStatus.tsx

@@ -44,6 +44,11 @@ const StyledMessageContentContainer = styled.div<{ direction: 'left' | 'right' }
   }
 `;
 
+const StyledMessageContentWithAuthor = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 export const MessageContentWithStatuses = (props: Props) => {
   const contentProps = useSelector(state =>
     getMessageContentWithStatusesSelectorProps(state as any, props.messageId)
@@ -122,11 +127,11 @@ export const MessageContentWithStatuses = (props: Props) => {
           messageId={messageId}
           isCorrectSide={isIncoming}
         />
-        <div>
+        <StyledMessageContentWithAuthor>
           <MessageAuthorText messageId={messageId} />
 
           <MessageContent messageId={messageId} isDetailView={isDetailView} />
-        </div>
+        </StyledMessageContentWithAuthor>
         <MessageStatus
           dataTestId="msg-status-outgoing"
           messageId={messageId}

ts/components/conversation/message/message-item/GenericReadableMessage.tsx

@@ -114,7 +114,7 @@ const StyledReadableMessage = styled(ReadableMessage)<{
   align-items: center;
   width: 100%;
   letter-spacing: 0.03em;
-  padding: 5px var(--margins-lg) 0;
+  padding: var(--margins-xs) var(--margins-lg) 0;
 
   &.message-highlighted {
     animation: ${highlightedMessageAnimation} 1s ease-in-out;

ts/models/conversation.ts

@@ -501,62 +501,6 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
     return current;
   }
 
-  public async getQuoteAttachment(attachments: any, preview: any) {
-    if (attachments && attachments.length) {
-      return Promise.all(
-        attachments
-          .filter(
-            (attachment: any) =>
-              attachment && attachment.contentType && !attachment.pending && !attachment.error
-          )
-          .slice(0, 1)
-          .map(async (attachment: any) => {
-            const { fileName, thumbnail, contentType } = attachment;
-
-            return {
-              contentType,
-              // Our protos library complains about this field being undefined, so we
-              //   force it to null
-              fileName: fileName || null,
-              thumbnail: thumbnail
-                ? {
-                    ...(await loadAttachmentData(thumbnail)),
-                    objectUrl: getAbsoluteAttachmentPath(thumbnail.path),
-                  }
-                : null,
-            };
-          })
-      );
-    }
-
-    if (preview && preview.length) {
-      return Promise.all(
-        preview
-          .filter((item: any) => item && item.image)
-          .slice(0, 1)
-          .map(async (attachment: any) => {
-            const { image } = attachment;
-            const { contentType } = image;
-
-            return {
-              contentType,
-              // Our protos library complains about this field being undefined, so we
-              //   force it to null
-              fileName: null,
-              thumbnail: image
-                ? {
-                    ...(await loadAttachmentData(image)),
-                    objectUrl: getAbsoluteAttachmentPath(image.path),
-                  }
-                : null,
-            };
-          })
-      );
-    }
-
-    return [];
-  }
-
   public async makeQuote(quotedMessage: MessageModel): Promise<ReplyingToMessageProps | null> {
     const attachments = quotedMessage.get('attachments');
     const preview = quotedMessage.get('preview');
@@ -2082,6 +2026,66 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
     }
     return false;
   }
+
+  private async getQuoteAttachment(attachments: any, preview: any) {
+    if (attachments?.length) {
+      return Promise.all(
+        attachments
+          .filter(
+            (attachment: any) =>
+              attachment &&
+              attachment.contentType &&
+              !attachment.pending &&
+              !attachment.error &&
+              attachment?.thumbnail?.path // loadAttachmentData throws if the thumbnail.path is not set
+          )
+          .slice(0, 1)
+          .map(async (attachment: any) => {
+            const { fileName, thumbnail, contentType } = attachment;
+
+            return {
+              contentType,
+              // Our protos library complains about this field being undefined, so we
+              //   force it to null
+              fileName: fileName || null,
+              thumbnail: thumbnail
+                ? {
+                    ...(await loadAttachmentData(thumbnail)),
+                    objectUrl: getAbsoluteAttachmentPath(thumbnail.path),
+                  }
+                : null,
+            };
+          })
+      );
+    }
+
+    if (preview?.length) {
+      return Promise.all(
+        preview
+          .filter((attachment: any) => attachment?.image?.path) // loadAttachmentData throws if the image.path is not set
+          .slice(0, 1)
+          .map(async (attachment: any) => {
+            const { image } = attachment;
+            const { contentType } = image;
+
+            return {
+              contentType,
+              // Our protos library complains about this field being undefined, so we
+              //   force it to null
+              fileName: null,
+              thumbnail: image
+                ? {
+                    ...(await loadAttachmentData(image)),
+                    objectUrl: getAbsoluteAttachmentPath(image.path),
+                  }
+                : null,
+            };
+          })
+      );
+    }
+
+    return [];
+  }
 }
 
 const throttledAllConversationsDispatch = debounce(

ts/receiver/dataMessage.ts

@@ -79,35 +79,36 @@ function cleanAttachments(decrypted: SignalService.DataMessage) {
   }
 }
 
-export function isMessageEmpty(message: SignalService.DataMessage) {
-  const {
-    flags,
-    body,
-    attachments,
-    group,
-    quote,
-    preview,
-    openGroupInvitation,
-    reaction,
-  } = message;
+/**
+ * We separate the isMessageEmpty and the isMessageEmptyExceptReaction, because we
+ *  - sometimes want to drop a message only when it is completely empty,
+ *  - and sometimes only when the message is empty but have a reaction
+ */
+function isMessageEmpty(message: SignalService.DataMessage) {
+  const { reaction } = message;
+
+  return isMessageEmptyExceptReaction(message) && isEmpty(reaction);
+}
+
+/**
+ * We separate the isMessageEmpty and the isMessageEmptyExceptReaction, because we
+ *  - sometimes want to drop a message only when it is completely empty,
+ *  - and sometimes only when the message is empty but have a reaction
+ */
+export function isMessageEmptyExceptReaction(message: SignalService.DataMessage) {
+  const { flags, body, attachments, group, quote, preview, openGroupInvitation } = message;
 
   return (
     !flags &&
-    // FIXME remove this hack to drop auto friend requests messages in a few weeks 15/07/2020
-    isBodyEmpty(body) &&
+    isEmpty(body) &&
     isEmpty(attachments) &&
     isEmpty(group) &&
     isEmpty(quote) &&
     isEmpty(preview) &&
-    isEmpty(openGroupInvitation) &&
-    isEmpty(reaction)
+    isEmpty(openGroupInvitation)
   );
 }
 
-function isBodyEmpty(body: string) {
-  return isEmpty(body);
-}
-
 export function cleanIncomingDataMessage(
   rawDataMessage: SignalService.DataMessage,
   envelope?: EnvelopePlus

ts/receiver/opengroup.ts

@@ -12,7 +12,7 @@ import { removeMessagePadding } from '../session/crypto/BufferPadding';
 import { UserUtils } from '../session/utils';
 import { perfEnd, perfStart } from '../session/utils/Performance';
 import { fromBase64ToArray } from '../session/utils/String';
-import { cleanIncomingDataMessage, isMessageEmpty } from './dataMessage';
+import { cleanIncomingDataMessage, isMessageEmptyExceptReaction } from './dataMessage';
 import { handleMessageJob, toRegularMessage } from './queuedJob';
 
 export const handleOpenGroupV4Message = async (
@@ -63,9 +63,11 @@ const handleOpenGroupMessage = async (
     return;
   }
 
-  if (isMessageEmpty(idataMessage as SignalService.DataMessage)) {
+  if (isMessageEmptyExceptReaction(idataMessage as SignalService.DataMessage)) {
     // empty message, drop it
+    if (!idataMessage.reaction) {
       window.log.info('received an empty message for sogs');
+    }
     return;
   }