Fix attachment dl freeze (#2086)

* fix attachment download freezing app for some opengroups

* make registration page work with smaller height

js/modules/auto_orient_image.js

@@ -16,6 +16,8 @@ exports.autoOrientImage = (fileOrBlobOrURL, options = {}) => {
     {
       canvas: true,
       orientation: true,
+      maxHeight: 4096, // ATTACHMENT_DEFAULT_MAX_SIDE
+      maxWidth: 4096, // ATTACHMENT_DEFAULT_MAX_SIDE
     }
   );
 

js/modules/types/attachment.js

@@ -42,6 +42,14 @@ exports.isValid = rawAttachment => {
   return true;
 };
 
+const UNICODE_LEFT_TO_RIGHT_OVERRIDE = '\u202D';
+const UNICODE_RIGHT_TO_LEFT_OVERRIDE = '\u202E';
+const UNICODE_REPLACEMENT_CHARACTER = '\uFFFD';
+const INVALID_CHARACTERS_PATTERN = new RegExp(
+  `[${UNICODE_LEFT_TO_RIGHT_OVERRIDE}${UNICODE_RIGHT_TO_LEFT_OVERRIDE}]`,
+  'g'
+);
+
 // Upgrade steps
 // NOTE: This step strips all EXIF metadata from JPEG images as
 // part of re-encoding the image:
@@ -74,14 +82,6 @@ exports.autoOrientJPEG = async attachment => {
 
   return newAttachment;
 };
-
-const UNICODE_LEFT_TO_RIGHT_OVERRIDE = '\u202D';
-const UNICODE_RIGHT_TO_LEFT_OVERRIDE = '\u202E';
-const UNICODE_REPLACEMENT_CHARACTER = '\uFFFD';
-const INVALID_CHARACTERS_PATTERN = new RegExp(
-  `[${UNICODE_LEFT_TO_RIGHT_OVERRIDE}${UNICODE_RIGHT_TO_LEFT_OVERRIDE}]`,
-  'g'
-);
 // NOTE: Expose synchronous version to do property-based testing using `testcheck`,
 // which currently doesn’t support async testing:
 // https://github.com/leebyron/testcheck-js/issues/45

package.json

@@ -58,7 +58,7 @@
     "better-sqlite3": "https://github.com/signalapp/better-sqlite3#ad0db5dd09c0ea4007b1c46bd4f7273827803347",
     "blob-util": "1.3.0",
     "blueimp-canvas-to-blob": "3.14.0",
-    "blueimp-load-image": "2.18.0",
+    "blueimp-load-image": "5.14.0",
     "buffer-crc32": "0.2.13",
     "bunyan": "1.8.12",
     "bytebuffer": "^5.0.1",
@@ -135,7 +135,7 @@
     "@playwright/test": "^1.16.3",
     "@types/backbone": "^1.4.2",
     "@types/better-sqlite3": "5.4.1",
-    "@types/blueimp-load-image": "^2.23.8",
+    "@types/blueimp-load-image": "5.14.4",
     "@types/buffer-crc32": "^0.2.0",
     "@types/bytebuffer": "^5.0.41",
     "@types/chai": "4.2.18",

stylesheets/_global.scss

@@ -4,6 +4,7 @@
 
 html {
   height: 100%;
+  background-color: white;
 }
 
 body {

stylesheets/_session.scss

@@ -1092,7 +1092,7 @@ input {
 }
 
 .onion__description {
-  min-width: 100%;
+  min-width: 400px;
   width: 0;
 }
 

stylesheets/_session_signin.scss

@@ -1,7 +1,10 @@
 .session {
+  &-fullscreen {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+  }
   &-content {
-    background-color: #f9f9f9;
-
     .session-button.brand-outline.brand.green:hover {
       background-color: var(--color-accent);
     }

ts/components/icon/SessionIcon.tsx

@@ -149,7 +149,7 @@ const SessionSvg = (props: {
   backgroundColor?: string;
   iconPadding?: string;
 }) => {
-  const colorSvg = props.iconColor || 'var(--color-text)';
+  const colorSvg = props.iconColor;
   const pathArray = props.path instanceof Array ? props.path : [props.path];
   const propsToPick = {
     width: props.width,

ts/components/icon/SessionNotificationCount.tsx

@@ -11,7 +11,7 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean }>`
   height: 20px;
   font-size: 20px;
   top: var(--margins-lg);
-  right: var(--margins-lg);
+  left: var(--margins-sm);
   padding: 3px;
   opacity: 1;
   display: flex;

ts/components/leftpane/LeftPaneSectionContainer.tsx

@@ -9,7 +9,7 @@ export const LeftPaneSectionContainer = styled.div`
   overflow-y: auto;
 
   .session-icon-button {
-    padding: 30px 0;
+    padding: 30px 20px;
   }
 
   .module-avatar {
@@ -21,5 +21,6 @@ export const LeftPaneSectionContainer = styled.div`
   // this is not ideal but it seems that nth-0last-child does not work
   #onion-path-indicator-led-id {
     margin: auto auto 0px auto;
+    opacity: 1;
   }
 `;

ts/components/registration/SessionRegistrationView.tsx

@@ -7,7 +7,6 @@ import { SessionToastContainer } from '../SessionToastContainer';
 import { setSignInByLinking } from '../../session/utils/User';
 import { SessionTheme } from '../../state/ducks/SessionTheme';
 import { Flex } from '../basic/Flex';
-import { SpacerLG } from '../basic/Text';
 
 export const SessionRegistrationView = () => {
   useEffect(() => {
@@ -17,29 +16,16 @@ export const SessionRegistrationView = () => {
     <SessionTheme>
       <Flex
         className="session-content"
-        width="100vw"
-        height="100vh"
         alignItems="center"
         flexDirection="column"
         container={true}
+        height="100%"
       >
         <Flex container={true} margin="auto" alignItems="center" flexDirection="column">
           <SessionToastContainer />
-          <SpacerLG />
-          <SpacerLG />
-
           <SessionIcon iconSize={150} iconType="brand" />
-          <SpacerLG />
-
-          <SpacerLG />
-          <SpacerLG />
-          <SpacerLG />
 
           <AccentText />
-          <SpacerLG />
-          <SpacerLG />
-          <SpacerLG />
-
           <RegistrationStages />
         </Flex>
       </Flex>

ts/receiver/attachments.ts

@@ -118,7 +118,7 @@ export async function downloadAttachmentOpenGroupV2(
   } else {
     // nothing to do, the attachment has already the correct size.
     // There is just no padding included, which is what we agreed on
-    window?.log?.info('Received opengroupv2 unpadded attachment');
+    window?.log?.info('Received opengroupv2 unpadded attachment size:', attachment.size);
   }
 
   return {

ts/types/Attachment.ts

@@ -7,6 +7,7 @@ import { saveURLAsFile } from '../util/saveURLAsFile';
 import { SignalService } from '../protobuf';
 import { isImageTypeSupported, isVideoTypeSupported } from '../util/GoogleChrome';
 import { fromHexToArray } from '../session/utils/String';
+import { ATTACHMENT_DEFAULT_MAX_SIDE } from '../util/attachmentsUtil';
 
 const MAX_WIDTH = 200;
 const MAX_HEIGHT = MAX_WIDTH;
@@ -107,7 +108,14 @@ export function canDisplayImage(attachments?: Array<AttachmentType>) {
   const { height, width } =
     attachments && attachments[0] ? attachments[0] : { height: 0, width: 0 };
 
-  return height && height > 0 && height <= 4096 && width && width > 0 && width <= 4096;
+  return (
+    height &&
+    height > 0 &&
+    height <= ATTACHMENT_DEFAULT_MAX_SIDE &&
+    width &&
+    width > 0 &&
+    width <= ATTACHMENT_DEFAULT_MAX_SIDE
+  );
 }
 
 export function getThumbnailUrl(attachment: AttachmentType): string {

ts/util/attachmentsUtil.ts

@@ -12,6 +12,8 @@ export interface MaxScaleSize {
   maxSide?: number; // use this to make avatars cropped if too big and centered if too small.
 }
 
+export const ATTACHMENT_DEFAULT_MAX_SIDE = 4096;
+
 /**
  * Scale down an image to fit in the required dimension.
  * Note: This method won't crop if needed,
@@ -43,8 +45,10 @@ export async function autoScale<T extends { contentType: string; file: any }>(
       const maxSize =
         maxMeasurements?.maxSize || Constants.CONVERSATION.MAX_ATTACHMENT_FILESIZE_BYTES;
       const makeSquare = Boolean(maxMeasurements?.maxSide);
-      const maxHeight = maxMeasurements?.maxHeight || maxMeasurements?.maxSide || 4096;
-      const maxWidth = maxMeasurements?.maxWidth || maxMeasurements?.maxSide || 4096;
+      const maxHeight =
+        maxMeasurements?.maxHeight || maxMeasurements?.maxSide || ATTACHMENT_DEFAULT_MAX_SIDE;
+      const maxWidth =
+        maxMeasurements?.maxWidth || maxMeasurements?.maxSide || ATTACHMENT_DEFAULT_MAX_SIDE;
 
       if (
         img.naturalWidth <= maxWidth &&

yarn.lock

@@ -841,10 +841,10 @@
   dependencies:
     "@types/integer" "*"
 
-"@types/blueimp-load-image@^2.23.8":
-  version "2.23.8"
-  resolved "https://registry.yarnpkg.com/@types/blueimp-load-image/-/blueimp-load-image-2.23.8.tgz#0d10f12bf57f050aceac06dcc76390ae759c979a"
-  integrity sha512-dy98N4odO9L1zgo2a6yVHRRYUeYRJfl0hg3dcapyxqNq5KF8Zgz5lFWgDMOsMC06VAs0mnVKDRJE4+U/A5Km3A==
+"@types/blueimp-load-image@5.14.4":
+  version "5.14.4"
+  resolved "https://registry.yarnpkg.com/@types/blueimp-load-image/-/blueimp-load-image-5.14.4.tgz#14a438e88b814b4ede9c79e3b2e68324bd591327"
+  integrity sha512-IoT8BXBuuWWscQnscGtAYH4dGEOr3uQ85MJdE9LAfperio8FQwyFaigHITPJSy+NSS4w9UHKhzmtQXt5A+544g==
 
 "@types/buffer-crc32@^0.2.0":
   version "0.2.0"
@@ -2254,10 +2254,10 @@ blueimp-canvas-to-blob@3.14.0:
   resolved "https://registry.yarnpkg.com/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.14.0.tgz#ea075ffbfb1436607b0c75e951fb1ceb3ca0288e"
   integrity sha512-i6I2CiX1VR8YwUNYBo+dM8tg89ns4TTHxSpWjaDeHKcYS3yFalpLCwDaY21/EsJMufLy2tnG4j0JN5L8OVNkKQ==
 
-blueimp-load-image@2.18.0:
-  version "2.18.0"
-  resolved "https://registry.yarnpkg.com/blueimp-load-image/-/blueimp-load-image-2.18.0.tgz#03b93687eb382a7136cfbcbd4f0e936b6763fc0e"
-  integrity sha512-GUrxVE/7FpzAw/WU6GMiI3v+LpFmlAxp7sF36EQB8rGAg97ND8iTeYZ3FQbhsxS5s2dNarGKZEWhKPNKKSmMuA==
+blueimp-load-image@5.14.0:
+  version "5.14.0"
+  resolved "https://registry.yarnpkg.com/blueimp-load-image/-/blueimp-load-image-5.14.0.tgz#e8086415e580df802c33ff0da6b37a8d20205cc6"
+  integrity sha512-g5l+4dCOESBG8HkPLdGnBx8dhEwpQHaOZ0en623sl54o3bGhGMLYGc54L5cWfGmPvfKUjbsY7LOAmcW/xlkBSA==
 
 body-parser@1.19.0:
   version "1.19.0"