Merge pull request #3113 from oxen-io/unstable

Unstable to clearnet before merge of onboarding to unstable

build/entitlements.mac.plist

@@ -5,6 +5,8 @@
     <!-- Mac distribution -->
     <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
     <true/>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
     <key>com.apple.security.cs.disable-library-validation</key>
     <true/>
     <key>com.apple.security.device.audio-input</key>

build/entitlements.mas.plist

@@ -5,6 +5,10 @@
     <!-- Mac app store  -->
     <key>com.apple.security.app-sandbox</key>
     <true/>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
     <key>com.apple.security.network.client</key>
     <true/>
     <key>com.apple.security.files.user-selected.read-only</key>

build/notarize.js

@@ -29,7 +29,7 @@ exports.default = async function notarizing(context) {
   }
 
   const options = {
-    appBundleId: 'org.getsession.desktop',
+    appBundleId: 'com.loki-project.messenger-desktop',
     appPath: `${appOutDir}/${appName}.app`,
     appleId: SIGNING_APPLE_ID,
     appleIdPassword: SIGNING_APP_PASSWORD,

stylesheets/_modules.scss

@@ -20,11 +20,6 @@
 .module-contact-name__profile-number.italic {
   font-style: italic;
 }
-
-.module-contact-name.compact {
-  display: block;
-}
-
 // Module: Message
 
 .module-message__error-container {

ts/components/conversation/ContactName.tsx

@@ -13,12 +13,11 @@ type Props = {
   profileName?: string | null;
   module?: string;
   boldProfileName?: boolean;
-  compact?: boolean;
   shouldShowPubkey: boolean;
 };
 
 export const ContactName = (props: Props) => {
-  const { pubkey, name, profileName, module, boldProfileName, compact, shouldShowPubkey } = props;
+  const { pubkey, name, profileName, module, boldProfileName, shouldShowPubkey } = props;
   const prefix = module || 'module-contact-name';
 
   const convoName = useNicknameOrProfileNameOrShortenedPubkey(pubkey);
@@ -43,7 +42,7 @@ export const ContactName = (props: Props) => {
 
   return (
     <span
-      className={classNames(prefix, compact && 'compact')}
+      className={classNames(prefix)}
       dir="auto"
       data-testid={`${prefix}__profile-name`}
       style={{

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

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import React, { useState } from 'react';
 import { noop } from 'lodash';
+import React, { useState } from 'react';
 
 import * as MIME from '../../../../types/MIME';
 import * as GoogleChrome from '../../../../util/GoogleChrome';
@@ -291,7 +291,6 @@ const QuoteAuthor = (props: QuoteAuthorProps) => {
           pubkey={PubKey.shorten(author)}
           name={authorName}
           profileName={authorProfileName}
-          compact={true}
           shouldShowPubkey={Boolean(props.showPubkeyForAuthor)}
         />
       )}

ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx

@@ -41,7 +41,6 @@ export const QuoteAuthor = (props: QuoteAuthorProps) => {
       <ContactName
         pubkey={PubKey.shorten(author)}
         name={authorName}
-        compact={true}
         shouldShowPubkey={Boolean(authorName && !isMe && isPublic)}
       />
     </StyledQuoteAuthor>

ts/components/dialog/ReactListModal.tsx

@@ -14,6 +14,7 @@ import {
 } from '../../state/ducks/modalDialog';
 import {
   useSelectedIsPublic,
+  useSelectedWeAreAdmin,
   useSelectedWeAreModerator,
 } from '../../state/selectors/selectedConversation';
 import { SortedReactionList } from '../../types/Reaction';
@@ -50,6 +51,11 @@ const StyledSendersContainer = styled(Flex)`
   padding: 0 16px 16px;
 `;
 
+const StyledContactContainer = styled.span`
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
 const StyledReactionBar = styled(Flex)`
   width: 100%;
   margin: 12px 0 20px 4px;
@@ -132,7 +138,7 @@ const ReactionSenders = (props: ReactionSendersProps) => {
           justifyContent={'space-between'}
           alignItems={'center'}
         >
-          <Flex container={true} alignItems={'center'}>
+          <Flex container={true} alignItems={'center'} style={{ overflow: 'hidden' }}>
             <Avatar
               size={AvatarSize.XS}
               pubkey={sender}
@@ -143,11 +149,13 @@ const ReactionSenders = (props: ReactionSendersProps) => {
             {sender === me ? (
               window.i18n('you')
             ) : (
-              <ContactName
+              <StyledContactContainer>
-                pubkey={sender}
+                <ContactName
-                module="module-conversation__user"
+                  pubkey={sender}
-                shouldShowPubkey={false}
+                  module="module-conversation__user"
-              />
+                  shouldShowPubkey={false}
+                />
+              </StyledContactContainer>
             )}
           </Flex>
           {sender === me && (
@@ -231,6 +239,7 @@ export const ReactListModal = (props: Props) => {
 
   const msgProps = useMessageReactsPropsById(messageId);
   const isPublic = useSelectedIsPublic();
+  const weAreAdmin = useSelectedWeAreAdmin();
   const weAreModerator = useSelectedWeAreModerator();
   const me = UserUtils.getOurPubKeyStrFromCache();
 
@@ -362,7 +371,7 @@ export const ReactListModal = (props: Props) => {
                   </>
                 )}
               </p>
-              {isPublic && weAreModerator && (
+              {isPublic && (weAreAdmin || weAreModerator) && (
                 <SessionButton
                   text={window.i18n('clearAll')}
                   buttonColor={SessionButtonColor.Danger}

ts/components/icon/Icons.tsx

@@ -88,7 +88,19 @@ export type SessionIconType =
 
 export type SessionIconSize = 'tiny' | 'small' | 'medium' | 'large' | 'huge' | 'huge2' | 'max';
 
-export const icons: Record<string, { path: string; viewBox: string; ratio: number }> = {
+export type ClipRule = 'nonzero' | 'evenodd' | 'inherit';
+export type FillRule = 'nonzero' | 'evenodd';
+
+type IconProps = {
+  path: string;
+  viewBox: string;
+  ratio: number;
+  fill?: string;
+  clipRule?: ClipRule;
+  fillRule?: FillRule;
+};
+
+export const icons: Record<SessionIconType, IconProps> = {
   addUser: {
     path: 'M8.85,2.17c-1.73,0-3.12,1.4-3.12,3.12s1.4,3.12,3.12,3.12c1.73,0,3.13-1.4,3.13-3.12S10.58,2.17,8.85,2.17z M8.85,0.08c2.88,0,5.21,2.33,5.21,5.21s-2.33,5.21-5.21,5.21s-5.2-2.33-5.2-5.21C3.65,2.42,5.98,0.08,8.85,0.08z M20.83,5.29 c0.54,0,0.98,0.41,1.04,0.93l0.01,0.11v2.08h2.08c0.54,0,0.98,0.41,1.04,0.93v0.12c0,0.54-0.41,0.98-0.93,1.04l-0.11,0.01h-2.08 v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11v-2.08h-2.08c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11 c0-0.54,0.41-0.98,0.93-1.04l0.11-0.01h2.08V6.34C19.79,5.76,20.26,5.29,20.83,5.29z M12.5,12.58c2.8,0,5.09,2.21,5.2,4.99v0.22 v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11v-2.08c0-1.67-1.3-3.03-2.95-3.12h-0.18H5.21 c-1.67,0-3.03,1.3-3.12,2.95v0.18v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93L0,19.88V17.8 c0-2.8,2.21-5.09,4.99-5.2h0.22h7.29V12.58z',
     viewBox: '0 0 25 21',

ts/components/icon/SessionIcon.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { memo } from 'react';
-import styled, { css, keyframes } from 'styled-components';
+import styled, { css, CSSProperties, keyframes } from 'styled-components';
 
 import { icons, SessionIconSize, SessionIconType } from '.';
+import { ClipRule, FillRule } from './Icons';
 
 export type SessionIconProps = {
   iconType: SessionIconType;
@@ -15,6 +16,7 @@ export type SessionIconProps = {
   glowStartDelay?: number;
   noScale?: boolean;
   backgroundColor?: string;
+  style?: CSSProperties;
   dataTestId?: string;
   unreadCount?: number;
 };
@@ -55,6 +57,9 @@ type StyledSvgProps = {
   noScale?: boolean;
   iconColor?: string;
   backgroundColor?: string;
+  fill?: string;
+  clipRule?: ClipRule;
+  filleRule?: FillRule;
 };
 
 const rotate = keyframes`
@@ -119,37 +124,28 @@ const animation = (props: {
   return undefined;
 };
 
-const Svg = React.memo(styled.svg<StyledSvgProps>`
+const Svg = memo(styled.svg<StyledSvgProps>`
   width: ${props => props.width};
   transform: ${props => `rotate(${props.iconRotation}deg)`};
   ${props => animation(props)};
   border-radius: ${props => props.borderRadius};
   background-color: ${props =>
-    props.backgroundColor ? props.backgroundColor : '--button-icon-background-color'};
+    props.backgroundColor ? props.backgroundColor : 'var(--button-icon-background-color)'};
-  border-radius: ${props => (props.borderRadius ? props.borderRadius : '')};
   filter: ${props => (props.noScale ? `drop-shadow(0px 0px 4px ${props.iconColor})` : '')};
-  fill: ${props => (props.iconColor ? props.iconColor : '--button-icon-stroke-color')};
+  fill: ${props => (props.iconColor ? props.iconColor : 'var(--button-icon-stroke-color)')};
   padding: ${props => (props.iconPadding ? props.iconPadding : '')};
   transition: inherit;
 `);
 
-const SessionSvg = (props: {
+const SessionSvg = (
-  viewBox: string;
+  props: StyledSvgProps & {
-  path: string | Array<string>;
+    viewBox: string;
-  width: string | number;
+    path: string | Array<string>;
-  height: string | number;
+    style?: CSSProperties;
-  iconRotation: number;
+    dataTestId?: string;
-  iconColor?: string;
+  }
-  rotateDuration?: number;
+) => {
-  glowDuration?: number;
+  const colorSvg = props.iconColor ? props.iconColor : 'var(--button-icon-stroke-color)';
-  glowStartDelay?: number;
-  noScale?: boolean;
-  borderRadius?: string;
-  backgroundColor?: string;
-  iconPadding?: string;
-  dataTestId?: string;
-}) => {
-  const colorSvg = props.iconColor ? props.iconColor : '--button-icon-stroke-color';
   const pathArray = props.path instanceof Array ? props.path : [props.path];
   const propsToPick = {
     width: props.width,
@@ -164,6 +160,10 @@ const SessionSvg = (props: {
     backgroundColor: props.backgroundColor,
     borderRadius: props.borderRadius,
     iconPadding: props.iconPadding,
+    fill: props.fill,
+    clipRule: props.clipRule,
+    fillRule: props.filleRule,
+    style: props.style,
     dataTestId: props.dataTestId,
   };
 
@@ -187,6 +187,7 @@ export const SessionIcon = (props: SessionIconProps) => {
     noScale,
     backgroundColor,
     iconPadding,
+    style,
     dataTestId,
   } = props;
   let { iconSize, iconRotation } = props;
@@ -196,6 +197,9 @@ export const SessionIcon = (props: SessionIconProps) => {
   const iconDimensions = getIconDimensionFromIconSize(iconSize);
   const iconDef = icons[iconType];
   const ratio = iconDef?.ratio || 1;
+  const fill = iconDef?.fill || undefined;
+  const clipRule = iconDef?.clipRule || 'nonzero';
+  const fillRule = iconDef?.fillRule || 'nonzero';
 
   return (
     <SessionSvg
@@ -212,6 +216,10 @@ export const SessionIcon = (props: SessionIconProps) => {
       iconColor={iconColor}
       backgroundColor={backgroundColor}
       iconPadding={iconPadding}
+      fill={fill}
+      clipRule={clipRule}
+      filleRule={fillRule}
+      style={style}
       dataTestId={dataTestId}
     />
   );

ts/components/leftpane/conversation-list-item/MessageItem.tsx

@@ -68,13 +68,21 @@ function IconMessageStatus({ status }: { status: LastMessageStatusType }) {
   const nonErrorIconColor = 'var(--text-secondary-color';
   switch (status) {
     case 'error':
-      return <SessionIcon iconColor={'var(--danger-color'} iconType="error" iconSize="tiny" />;
+      return (
+        <SessionIcon
+          iconColor={'var(--danger-color'}
+          iconType="error"
+          iconSize="tiny"
+          style={{ flexShrink: 0 }}
+        />
+      );
     case 'read':
       return (
         <SessionIcon
           iconColor={nonErrorIconColor}
           iconType="doubleCheckCircleFilled"
           iconSize="tiny"
+          style={{ flexShrink: 0 }}
         />
       );
     case 'sending':
@@ -84,10 +92,18 @@ function IconMessageStatus({ status }: { status: LastMessageStatusType }) {
           iconColor={nonErrorIconColor}
           iconType="sending"
           iconSize="tiny"
+          style={{ flexShrink: 0 }}
         />
       );
     case 'sent':
-      return <SessionIcon iconColor={nonErrorIconColor} iconType="circleCheck" iconSize="tiny" />;
+      return (
+        <SessionIcon
+          iconColor={nonErrorIconColor}
+          iconType="circleCheck"
+          iconSize="tiny"
+          style={{ flexShrink: 0 }}
+        />
+      );
     case undefined:
       return null;
     default:

ts/receiver/dataMessage.ts

@@ -251,7 +251,9 @@ export async function handleSwarmDataMessage({
   }
 
   let msgModel =
-    isSyncedMessage || (envelope.senderIdentity && isUsFromCache(envelope.senderIdentity))
+    isSyncedMessage ||
+    (envelope.senderIdentity && isUsFromCache(envelope.senderIdentity)) ||
+    (envelope.source && isUsFromCache(envelope.source))
       ? createSwarmMessageSentFromUs({
           conversationId: convoIdToAddTheMessageTo,
           messageHash,

ts/session/constants.ts

@@ -17,6 +17,15 @@ export const DURATION = {
   WEEKS: days * 7,
 };
 
+export const FILESIZE = {
+  /** 1KB */
+  KB: 1024,
+  /** 1MB */
+  MB: 1024 * 1024,
+  /** 1GB */
+  GB: 1024 * 1024 * 1024,
+};
+
 export const TTL_DEFAULT = {
   /** 20 seconds */
   TYPING_MESSAGE: 20 * DURATION.SECONDS,

ts/util/attachmentsUtil.ts

@@ -3,6 +3,7 @@ import imageType from 'image-type';
 
 import { arrayBufferToBlob } from 'blob-util';
 import loadImage from 'blueimp-load-image';
+import fileSize from 'filesize';
 import { StagedAttachmentType } from '../components/conversation/composition/CompositionBox';
 import { SignalService } from '../protobuf';
 import { getDecryptedMediaUrl } from '../session/crypto/DecryptedAttachmentsManager';
@@ -12,7 +13,7 @@ import { IMAGE_GIF, IMAGE_JPEG, IMAGE_PNG, IMAGE_TIFF, IMAGE_UNKNOWN } from '../
 import { getAbsoluteAttachmentPath, processNewAttachment } from '../types/MessageAttachment';
 import { THUMBNAIL_SIDE } from '../types/attachments/VisualAttachment';
 
-import { MAX_ATTACHMENT_FILESIZE_BYTES } from '../session/constants';
+import { FILESIZE, MAX_ATTACHMENT_FILESIZE_BYTES } from '../session/constants';
 import { perfEnd, perfStart } from '../session/utils/Performance';
 
 /**
@@ -53,7 +54,7 @@ export async function autoScaleForAvatar<T extends { contentType: string; blob:
 ) {
   const maxMeasurements = {
     maxSide: AVATAR_MAX_SIDE,
-    maxSize: 1000 * 1024,
+    maxSize: 5 * FILESIZE.MB,
   };
 
   // we can only upload jpeg, gif, or png as avatar/opengroup
@@ -79,7 +80,7 @@ export async function autoScaleForAvatar<T extends { contentType: string; blob:
 export async function autoScaleForIncomingAvatar(incomingAvatar: ArrayBuffer) {
   const maxMeasurements = {
     maxSide: AVATAR_MAX_SIDE,
-    maxSize: 1000 * 1024,
+    maxSize: 5 * FILESIZE.MB,
   };
 
   // the avatar url send in a message does not contain anything related to the avatar MIME type, so
@@ -186,7 +187,7 @@ export async function autoScale<T extends { contentType: string; blob: Blob }>(
   }
 
   if (blob.type === IMAGE_GIF && blob.size > maxSize) {
-    throw new Error(`GIF is too large, required size is ${maxSize}`);
+    throw new Error(`GIF is too large. Max size: ${fileSize(maxSize, { base: 10, round: 0 })}`);
   }
 
   perfStart(`loadimage-*${blob.size}`);