diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 1cd404ab9..0d26851f9 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -325,12 +325,51 @@ border-top-right-radius: 0px; } -.module-message__link-preview__icon_container { +.module-message__link-preview__image_container { margin: -2px; margin-inline-end: 8px; display: inline-block; } +.module-message__link-preview__icon_container { + flex: initial; + min-width: 54px; + width: 54px; + max-height: 54px; + position: relative; + margin-left: -2px; + margin-inline-end: 8px; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + &__inner { + top: 0; + right: 0; + bottom: 0; + left: 0; + + text-align: center; + display: flex; + align-items: center; + justify-content: center; + } +} + +.module-message__link-preview__icon-container__circle-background { + display: flex; + align-items: center; + justify-content: center; + + height: 32px; + width: 32px; + border-radius: 50%; + background-color: $color-gray-05; +} + .module-message__link-preview__text--with-icon { margin-top: 5px; } diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index e0e93674c..63f0d71e7 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -520,4 +520,8 @@ .module-message-search-result__body { color: $color-gray-05; } + + .module-message__link-preview__icon-container__circle-background { + background-color: $color-gray-25; + } } diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 96a633d2c..89cb65033 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -53,6 +53,8 @@ import { MessageContextMenu } from './MessageContextMenu'; import { ReadableMessage } from './ReadableMessage'; import { getConversationController } from '../../session/conversations'; import { MessageMetadata } from './message/MessageMetadata'; +import { SessionIcon } from '../session/icon/SessionIcon'; +import { SessionIconSize, SessionIconType } from '../session/icon/Icons'; // Same as MIN_WIDTH in ImageGrid.tsx const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = 200; @@ -382,7 +384,7 @@ class MessageInner extends React.PureComponent { )} > {first.image && previewHasImage && !isFullSizeImage ? ( -
+
{ onError={this.handleImageError} />
+ ) : !first.image || !previewHasImage ? ( +
+
+
+ +
+
+
) : null}
{ window.setSettingValue('link-preview-setting', newValue); if (!newValue) { await createOrUpdateItem({ id: hasLinkPreviewPopupBeenDisplayed, value: false }); + } else { + window.inboxStore?.dispatch( + updateConfirmModal({ + title: window.i18n('linkPreviewsTitle'), + message: window.i18n('linkPreviewsConfirmMessage'), + okTheme: SessionButtonColor.Danger, + }) + ); } }, content: undefined, comparisonValue: undefined, onClick: undefined, - confirmationDialogParams: { - shouldShowConfirm: !window.getSettingValue('link-preview-setting'), - title: window.i18n('linkPreviewsTitle'), - message: window.i18n('linkPreviewsConfirmMessage'), - okTheme: SessionButtonColor.Danger, - }, + confirmationDialogParams: undefined, }, { diff --git a/ts/models/message.ts b/ts/models/message.ts index 5a157515b..5c4611423 100644 --- a/ts/models/message.ts +++ b/ts/models/message.ts @@ -624,11 +624,6 @@ export class MessageModel extends Backbone.Model { } public getPropsForPreview() { - // Don't generate link previews if user has turned them off - if (!window.storage.get('link-preview-setting', false)) { - return null; - } - const previews = this.get('preview') || []; return previews.map((preview: any) => { diff --git a/ts/receiver/attachments.ts b/ts/receiver/attachments.ts index 3e2e77070..a9134a75e 100644 --- a/ts/receiver/attachments.ts +++ b/ts/receiver/attachments.ts @@ -169,13 +169,15 @@ async function processPreviews(message: MessageModel, convo: ConversationModel): } addedCount += 1; - const image = await AttachmentDownloads.addJob(item.image, { - messageId: message.id, - type: 'preview', - index, - isOpenGroupV2, - openGroupV2Details, - }); + const image = message.isTrustedForAttachmentDownload() + ? await AttachmentDownloads.addJob(item.image, { + messageId: message.id, + type: 'preview', + index, + isOpenGroupV2, + openGroupV2Details, + }) + : null; return { ...item, image }; }) diff --git a/ts/session/utils/Attachments.ts b/ts/session/utils/Attachments.ts index f24bf8f82..30c226365 100644 --- a/ts/session/utils/Attachments.ts +++ b/ts/session/utils/Attachments.ts @@ -119,7 +119,7 @@ export class AttachmentFsV2Utils { // some links does 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 fsv2 without image.. skipping'); - return undefined; + return preview as any; } const image = await this.uploadToFsV2({ attachment: preview.image,