Merge pull request #2887 from Bilb/fix-resize-images-thumbnail

fix: make sure we scale image before trying to compress it

.yarnrc

@@ -1 +0,0 @@
---install.frozen-lockfile true

package.json

@@ -77,7 +77,7 @@
     "auto-bind": "^4.0.0",
     "backbone": "1.3.3",
     "blob-util": "2.0.2",
-    "blueimp-load-image": "5.14.0",
+    "blueimp-load-image": "^5.16.0",
     "buffer-crc32": "0.2.13",
     "bunyan": "https://github.com/Bilb/node-bunyan",
     "bytebuffer": "^5.0.1",
@@ -138,7 +138,7 @@
     "@commitlint/types": "^17.4.4",
     "@electron/notarize": "^2.1.0",
     "@types/backbone": "1.4.2",
-    "@types/blueimp-load-image": "5.14.4",
+    "@types/blueimp-load-image": "^5.16.2",
     "@types/buffer-crc32": "^0.2.0",
     "@types/bunyan": "^1.8.8",
     "@types/bytebuffer": "^5.0.41",
@@ -165,7 +165,7 @@
     "@types/rimraf": "2.0.2",
     "@types/semver": "5.5.0",
     "@types/sinon": "9.0.4",
-    "@types/styled-components": "^5.1.4",
+    "@types/styled-components": "5.1.1",
     "@types/uuid": "8.3.4",
     "@typescript-eslint/eslint-plugin": "7.1.0",
     "@typescript-eslint/parser": "7.1.0",

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

@@ -19,7 +19,7 @@ import {
 import {
   AttachmentType,
   AttachmentTypeWithPath,
-  canDisplayImage,
+  canDisplayImagePreview,
   getExtensionForDisplay,
   hasImage,
   hasVideoScreenshot,
@@ -131,7 +131,7 @@ export const MessageAttachment = (props: Props) => {
   }
 
   const firstAttachment = attachments[0];
-  const displayImage = canDisplayImage(attachments);
+  const displayImage = canDisplayImagePreview(attachments);
 
   if (!isTrustedForAttachmentDownload) {
     return <ClickToTrustSender messageId={messageId} />;

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

@@ -21,7 +21,7 @@ import {
   getShouldHighlightMessage,
 } from '../../../../state/selectors/conversations';
 import { useSelectedIsPrivate } from '../../../../state/selectors/selectedConversation';
-import { canDisplayImage } from '../../../../types/Attachment';
+import { canDisplayImagePreview } from '../../../../types/Attachment';
 import { MessageAttachment } from './MessageAttachment';
 import { MessageAvatar } from './MessageAvatar';
 import { MessageHighlighter } from './MessageHighlighter';
@@ -154,7 +154,8 @@ export const MessageContent = (props: Props) => {
 
   const toolTipTitle = moment(serverTimestamp || timestamp).format('llll');
 
-  const isDetailViewAndSupportsAttachmentCarousel = isDetailView && canDisplayImage(attachments);
+  const isDetailViewAndSupportsAttachmentCarousel =
+    isDetailView && canDisplayImagePreview(attachments);
 
   return (
     <StyledMessageContent

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

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { isEmpty } from 'lodash';
@@ -160,7 +160,7 @@ const ExpiresInItem = ({ expirationTimestamp }: { expirationTimestamp?: number |
   );
 };
 
-export const MessageReactBar = ({ action, additionalAction, messageId }: Props): ReactElement => {
+export const MessageReactBar = ({ action, additionalAction, messageId }: Props) => {
   const recentReactions = getRecentReactions();
   const expirationTimestamp = useIsRenderedExpiresInItem(messageId);
 

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

@@ -1,5 +1,5 @@
 import { isEmpty, isEqual } from 'lodash';
-import React, { ReactElement, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useIsDetailMessageView } from '../../../../contexts/isDetailViewContext';
 import { useMessageReactsPropsById } from '../../../../hooks/useParamSelector';
@@ -66,7 +66,7 @@ const StyledReadLess = styled.span`
 
 type ReactionsProps = Omit<ReactionProps, 'emoji'>;
 
-const Reactions = (props: ReactionsProps): ReactElement => {
+const Reactions = (props: ReactionsProps) => {
   const { messageId, reactions, inModal } = props;
   return (
     <StyledMessageReactions
@@ -86,7 +86,7 @@ interface ExpandReactionsProps extends ReactionsProps {
   handleExpand: () => void;
 }
 
-const CompressedReactions = (props: ExpandReactionsProps): ReactElement => {
+const CompressedReactions = (props: ExpandReactionsProps) => {
   const { messageId, reactions, inModal, handleExpand } = props;
   return (
     <StyledMessageReactions
@@ -120,7 +120,7 @@ const CompressedReactions = (props: ExpandReactionsProps): ReactElement => {
   );
 };
 
-const ExpandedReactions = (props: ExpandReactionsProps): ReactElement => {
+const ExpandedReactions = (props: ExpandReactionsProps) => {
   const { handleExpand } = props;
   return (
     <Flex container={true} flexDirection={'column'} alignItems={'center'} margin="4px 0 0">

ts/components/conversation/message/reactions/Reaction.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useMouse } from 'react-use';
 import styled from 'styled-components';
 import { useRightOverlayMode } from '../../../../hooks/useUI';
@@ -62,7 +62,7 @@ export type ReactionProps = {
   handlePopupClick?: () => void;
 };
 
-export const Reaction = (props: ReactionProps): ReactElement => {
+export const Reaction = (props: ReactionProps) => {
   const {
     emoji,
     messageId,

ts/components/conversation/message/reactions/ReactionPopup.tsx

@@ -1,11 +1,11 @@
-import React, { ReactElement, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { Data } from '../../../../data/data';
+import { findAndFormatContact } from '../../../../models/message';
 import { PubKey } from '../../../../session/types/PubKey';
 import { isDarkTheme } from '../../../../state/selectors/theme';
 import { nativeEmojiData } from '../../../../util/emoji';
-import { findAndFormatContact } from '../../../../models/message';
 
 export type TipPosition = 'center' | 'left' | 'right';
 
@@ -142,7 +142,7 @@ type Props = {
   onClick: (...args: Array<any>) => void;
 };
 
-export const ReactionPopup = (props: Props): ReactElement => {
+export const ReactionPopup = (props: Props) => {
   const { messageId, emoji, count, senders, tooltipPosition = 'center', onClick } = props;
 
   const [contacts, setContacts] = useState<Array<string>>([]);

ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx

@@ -29,7 +29,7 @@ import {
   useMessageTimestamp,
 } from '../../../../../state/selectors';
 import { useSelectedConversationKey } from '../../../../../state/selectors/selectedConversation';
-import { canDisplayImage } from '../../../../../types/Attachment';
+import { canDisplayImagePreview } from '../../../../../types/Attachment';
 import { isAudio } from '../../../../../types/MIME';
 import {
   getAudioDuration,
@@ -222,7 +222,7 @@ export const OverlayMessageInfo = () => {
   const { errors, attachments } = messageInfo;
 
   const hasAttachments = attachments && attachments.length > 0;
-  const supportsAttachmentCarousel = canDisplayImage(attachments);
+  const supportsAttachmentCarousel = canDisplayImagePreview(attachments);
   const hasErrors = errors && errors.length > 0;
 
   const handleChangeAttachment = (changeDirection: 1 | -1) => {

ts/components/dialog/EditProfileDialog.tsx

@@ -1,6 +1,6 @@
 import { useDispatch } from 'react-redux';
 // eslint-disable-next-line import/no-named-default
-import { ChangeEvent, MouseEvent, default as React, ReactElement, useState } from 'react';
+import { ChangeEvent, MouseEvent, default as React, useState } from 'react';
 import { QRCode } from 'react-qr-svg';
 import styled from 'styled-components';
 import { Avatar, AvatarSize } from '../avatar/Avatar';
@@ -69,7 +69,7 @@ type ProfileAvatarProps = {
   ourId: string;
 };
 
-export const ProfileAvatar = (props: ProfileAvatarProps): ReactElement => {
+export const ProfileAvatar = (props: ProfileAvatarProps) => {
   const { newAvatarObjectUrl, avatarPath, profileName, ourId } = props;
   return (
     <Avatar
@@ -86,7 +86,7 @@ type ProfileHeaderProps = ProfileAvatarProps & {
   setMode: (mode: ProfileDialogModes) => void;
 };
 
-const ProfileHeader = (props: ProfileHeaderProps): ReactElement => {
+const ProfileHeader = (props: ProfileHeaderProps) => {
   const { avatarPath, profileName, ourId, onClick, setMode } = props;
 
   return (
@@ -114,7 +114,8 @@ const ProfileHeader = (props: ProfileHeaderProps): ReactElement => {
 };
 
 type ProfileDialogModes = 'default' | 'edit' | 'qr';
-export const EditProfileDialog = (): ReactElement => {
+
+export const EditProfileDialog = () => {
   const dispatch = useDispatch();
 
   const _profileName = useOurConversationUsername() || '';

ts/components/dialog/ReactClearAllModal.tsx

@@ -1,14 +1,14 @@
-import React, { ReactElement, useState } from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { useMessageReactsPropsById } from '../../hooks/useParamSelector';
 import { clearSogsReactionByServerId } from '../../session/apis/open_group_api/sogsv3/sogsV3ClearReaction';
 import { getConversationController } from '../../session/conversations';
 import { updateReactClearAllModal } from '../../state/ducks/modalDialog';
+import { SessionWrapperModal } from '../SessionWrapperModal';
 import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionSpinner } from '../basic/SessionSpinner';
-import { SessionWrapperModal } from '../SessionWrapperModal';
 
 type Props = {
   reaction: string;
@@ -46,7 +46,7 @@ const StyledReactClearAllContainer = styled(Flex)`
   }
 `;
 
-export const ReactClearAllModal = (props: Props): ReactElement => {
+export const ReactClearAllModal = (props: Props) => {
   const { reaction, messageId } = props;
 
   const [clearingInProgress, setClearingInProgress] = useState(false);

ts/components/dialog/ReactListModal.tsx

@@ -1,9 +1,10 @@
 import { isEmpty, isEqual } from 'lodash';
-import React, { ReactElement, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { Data } from '../../data/data';
 import { useMessageReactsPropsById } from '../../hooks/useParamSelector';
+import { findAndFormatContact } from '../../models/message';
 import { isUsAnySogsFromCache } from '../../session/apis/open_group_api/sogsv3/knownBlindedkeys';
 import { UserUtils } from '../../session/utils';
 import {
@@ -18,6 +19,7 @@ import {
 import { SortedReactionList } from '../../types/Reaction';
 import { nativeEmojiData } from '../../util/emoji';
 import { Reactions } from '../../util/reactions';
+import { SessionWrapperModal } from '../SessionWrapperModal';
 import { Avatar, AvatarSize } from '../avatar/Avatar';
 import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
@@ -25,8 +27,6 @@ import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
 import { ContactName } from '../conversation/ContactName';
 import { MessageReactions } from '../conversation/message/message-content/MessageReactions';
 import { SessionIconButton } from '../icon';
-import { SessionWrapperModal } from '../SessionWrapperModal';
-import { findAndFormatContact } from '../../models/message';
 
 const StyledReactListContainer = styled(Flex)`
   width: 376px;
@@ -218,7 +218,7 @@ const handleSenders = (senders: Array<string>, me: string) => {
   return updatedSenders;
 };
 
-export const ReactListModal = (props: Props): ReactElement => {
+export const ReactListModal = (props: Props) => {
   const { reaction, messageId } = props;
 
   const dispatch = useDispatch();

ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx

@@ -2,7 +2,7 @@ import { isString } from 'lodash';
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { AutoSizer, Index, List, ListRowProps } from 'react-virtualized';
-import styled from 'styled-components';
+import styled, { CSSProperties } from 'styled-components';
 import {
   DirectContactsByNameType,
   getDirectContactsByName,
@@ -51,10 +51,10 @@ const renderRow = (props: ListRowProps) => {
   }
 
   if (isString(item)) {
-    return <ContactRowBreak style={style} key={key} char={item} />;
+    return <ContactRowBreak style={style as CSSProperties} key={key} char={item} />;
   }
 
-  return <ContactRow style={style} key={key} {...item} />;
+  return <ContactRow style={style as CSSProperties} key={key} {...item} />;
 };
 
 const unknownSection = 'unknown';

ts/components/registration/AccentText.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const AccentText: React.FC = () => (
+export const AccentText = () => (
   <div className="session-content-accent-text">
     <div className="session-content-accent-text title">{window.i18n('beginYourSession')}</div>
   </div>

ts/components/search/SearchResults.tsx

@@ -1,8 +1,8 @@
+import { isString } from 'lodash';
 import React from 'react';
-import styled, { CSSProperties } from 'styled-components';
 import { useSelector } from 'react-redux';
 import { AutoSizer, List } from 'react-virtualized';
-import { isString } from 'lodash';
+import styled, { CSSProperties } from 'styled-components';
 
 import { ConversationListItem } from '../leftpane/conversation-list-item/ConversationListItem';
 import { MessageSearchResult } from './MessageSearchResults';
@@ -65,14 +65,14 @@ const VirtualizedList = () => {
               return null;
             }
             if (isString(row)) {
-              return <SectionHeader title={row} style={style} key={key} />;
+              return <SectionHeader title={row} style={style as CSSProperties} key={key} />;
             }
             if (isContact(row)) {
               return (
                 <ConversationListItem conversationId={row.contactConvoId} style={style} key={key} />
               );
             }
-            return <MessageSearchResult style={style} key={key} {...row} />;
+            return <MessageSearchResult style={style as CSSProperties} key={key} {...row} />;
           }}
           width={width}
           autoHeight={false}

ts/session/utils/Attachments.ts

@@ -3,6 +3,9 @@ import _ from 'lodash';
 
 import { Attachment } from '../../types/Attachment';
 
+import { encryptAttachment } from '../../util/crypto/attachmentsEncrypter';
+import { uploadFileToFsWithOnionV4 } from '../apis/file_server_api/FileServerApi';
+import { addAttachmentPadding } from '../crypto/BufferPadding';
 import {
   AttachmentPointer,
   AttachmentPointerWithUrl,
@@ -10,9 +13,6 @@ import {
   Quote,
   QuotedAttachmentWithUrl,
 } from '../messages/outgoing/visibleMessage/VisibleMessage';
-import { addAttachmentPadding } from '../crypto/BufferPadding';
-import { encryptAttachment } from '../../util/crypto/attachmentsEncrypter';
-import { uploadFileToFsWithOnionV4 } from '../apis/file_server_api/FileServerApi';
 
 interface UploadParams {
   attachment: Attachment;
@@ -107,7 +107,9 @@ export async function uploadLinkPreviewToFileServer(
 ): Promise<PreviewWithAttachmentUrl | undefined> {
   // some links do not have an image associated, and it makes the whole message fail to send
   if (!preview?.image) {
-    window.log.warn('tried to upload file to FileServer without image.. skipping');
+    if (!preview) {
+      window.log.warn('tried to upload file to FileServer without image.. skipping');
+    }
     return preview as any;
   }
   const image = await uploadToFileServer({

ts/types/Attachment.ts

@@ -104,9 +104,11 @@ export function isAudio(attachments?: Array<AttachmentType>) {
   );
 }
 
-export function canDisplayImage(attachments?: Array<AttachmentType>) {
+export function canDisplayImagePreview(attachments?: Array<AttachmentType>) {
+  // Note: when we display an image we usually display the preview.
+  // The preview is usually downscaled
   const { height, width } =
-    attachments && attachments[0] ? attachments[0] : { height: 0, width: 0 };
+    attachments && attachments[0]?.thumbnail ? attachments[0].thumbnail : { height: 0, width: 0 };
 
   return Boolean(
     height &&

ts/util/attachmentsUtil.ts

@@ -2,7 +2,7 @@
 import imageType from 'image-type';
 
 import { arrayBufferToBlob } from 'blob-util';
-import loadImage, { LoadImageOptions } from 'blueimp-load-image';
+import loadImage from 'blueimp-load-image';
 import { StagedAttachmentType } from '../components/conversation/composition/CompositionBox';
 import { SignalService } from '../protobuf';
 import { getDecryptedMediaUrl } from '../session/crypto/DecryptedAttachmentsManager';
@@ -68,7 +68,7 @@ export async function autoScaleForAvatar<T extends { contentType: string; blob:
   }
 
   if (DEBUG_ATTACHMENTS_SCALE) {
-    window.log.info('autoscale for avatar', maxMeasurements);
+    window.log.debug('autoscale for avatar', maxMeasurements);
   }
   return autoScale(attachment, maxMeasurements);
 }
@@ -96,7 +96,7 @@ export async function autoScaleForIncomingAvatar(incomingAvatar: ArrayBuffer) {
   }
 
   if (DEBUG_ATTACHMENTS_SCALE) {
-    window.log.info('autoscale for incoming avatar', maxMeasurements);
+    window.log.debug('autoscale for incoming avatar', maxMeasurements);
   }
 
   return autoScale(
@@ -121,7 +121,7 @@ export async function autoScaleForThumbnail<T extends { contentType: string; blo
   };
 
   if (DEBUG_ATTACHMENTS_SCALE) {
-    window.log.info('autoScaleForThumbnail', maxMeasurements);
+    window.log.debug('autoScaleForThumbnail', maxMeasurements);
   }
 
   return autoScale(attachment, maxMeasurements);
@@ -189,44 +189,58 @@ export async function autoScale<T extends { contentType: string; blob: Blob }>(
     throw new Error(`GIF is too large, required size is ${maxSize}`);
   }
 
-  const loadImgOpts: LoadImageOptions = {
-    maxWidth: makeSquare ? maxMeasurements?.maxSide : maxWidth,
-    maxHeight: makeSquare ? maxMeasurements?.maxSide : maxHeight,
-    crop: !!makeSquare,
-    orientation: 1,
-    aspectRatio: makeSquare ? 1 : undefined,
-    canvas: true,
-    imageSmoothingQuality: 'medium',
-  };
-
   perfStart(`loadimage-*${blob.size}`);
-  const canvas = await loadImage(blob, loadImgOpts);
+  const canvasLoad = await loadImage(blob, {});
+  const canvasScaled = loadImage.scale(
+    canvasLoad.image, // img or canvas element
+    {
+      maxWidth: makeSquare ? maxMeasurements?.maxSide : maxWidth,
+      maxHeight: makeSquare ? maxMeasurements?.maxSide : maxHeight,
+      crop: !!makeSquare,
+      cover: !!makeSquare,
+      orientation: 1,
+      canvas: true,
+      imageSmoothingQuality: 'medium',
+      meta: false,
+    }
+  );
   perfEnd(`loadimage-*${blob.size}`, `loadimage-*${blob.size}`);
-  if (!canvas || !canvas.originalWidth || !canvas.originalHeight) {
+  if (!canvasScaled || !canvasScaled.width || !canvasScaled.height) {
     throw new Error('failed to scale image');
   }
 
   let readAndResizedBlob = blob;
 
   if (
-    canvas.originalWidth <= maxWidth &&
+    canvasScaled.width <= maxWidth &&
-    canvas.originalHeight <= maxHeight &&
+    canvasScaled.height <= maxHeight &&
     blob.size <= maxSize &&
     !makeSquare
   ) {
+    if (DEBUG_ATTACHMENTS_SCALE) {
+      window.log.debug('canvasScaled used right away as width, height and size are fine', {
+        canvasScaledWidth: canvasScaled.width,
+        canvasScaledHeight: canvasScaled.height,
+        maxWidth,
+        maxHeight,
+        blobsize: blob.size,
+        maxSize,
+        makeSquare,
+      });
+    }
     // the canvas has a size of whatever was given by the caller of autoscale().
     // so we have to return those measures as the loaded file has now those measures.
     return {
-      ...attachment,
-      width: canvas.image.width,
-      height: canvas.image.height,
       blob,
+      contentType: attachment.contentType,
+      width: canvasScaled.width,
+      height: canvasScaled.height,
     };
   }
   if (DEBUG_ATTACHMENTS_SCALE) {
-    window.log.debug('canvas.originalWidth', {
+    window.log.debug('canvasOri.originalWidth', {
-      canvasOriginalWidth: canvas.originalWidth,
+      canvasOriginalWidth: canvasScaled.width,
-      canvasOriginalHeight: canvas.originalHeight,
+      canvasOriginalHeight: canvasScaled.height,
       maxWidth,
       maxHeight,
       blobsize: blob.size,
@@ -240,10 +254,10 @@ export async function autoScale<T extends { contentType: string; blob: Blob }>(
   do {
     i -= 1;
     if (DEBUG_ATTACHMENTS_SCALE) {
-      // window.log.info(`autoscale iteration: [${i}] for:`, attachment);
+      window.log.debug(`autoscale iteration: [${i}] for:`, JSON.stringify(readAndResizedBlob.size));
     }
     // eslint-disable-next-line no-await-in-loop
-    const tempBlob = await canvasToBlob(canvas.image as HTMLCanvasElement, 'image/jpeg', quality);
+    const tempBlob = await canvasToBlob(canvasScaled, 'image/jpeg', quality);
 
     if (!tempBlob) {
       throw new Error('Failed to get blob during canvasToBlob.');
@@ -265,8 +279,8 @@ export async function autoScale<T extends { contentType: string; blob: Blob }>(
     contentType: attachment.contentType,
     blob: readAndResizedBlob,
 
-    width: canvas.image.width,
+    width: canvasScaled.width,
-    height: canvas.image.height,
+    height: canvasScaled.height,
   };
 }