From 384eecd9dcc02fafd91974cab43aee34f46a7ad6 Mon Sep 17 00:00:00 2001 From: Brice-W Date: Thu, 12 Aug 2021 15:58:41 +1000 Subject: [PATCH 1/3] allow receiving link previews when sending is disabled --- ts/models/message.ts | 5 ----- ts/session/utils/Attachments.ts | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/ts/models/message.ts b/ts/models/message.ts index 7eb86a6da..b3307256f 100644 --- a/ts/models/message.ts +++ b/ts/models/message.ts @@ -626,11 +626,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/session/utils/Attachments.ts b/ts/session/utils/Attachments.ts index 547311956..b2bf5b12f 100644 --- a/ts/session/utils/Attachments.ts +++ b/ts/session/utils/Attachments.ts @@ -121,7 +121,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, From e5ee3467ac81ed3163a021225c6737d63d306b8a Mon Sep 17 00:00:00 2001 From: Brice-W Date: Thu, 12 Aug 2021 16:17:10 +1000 Subject: [PATCH 2/3] fix popup issue around link preview setting --- .../session/settings/SessionSettings.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/ts/components/session/settings/SessionSettings.tsx b/ts/components/session/settings/SessionSettings.tsx index 4a285b060..c9930d5cc 100644 --- a/ts/components/session/settings/SessionSettings.tsx +++ b/ts/components/session/settings/SessionSettings.tsx @@ -19,7 +19,7 @@ import { SessionConfirmDialogProps } from '../../dialog/SessionConfirm'; import { mapDispatchToProps } from '../../../state/actions'; import { unblockConvoById } from '../../../interactions/conversationInteractions'; import { toggleAudioAutoplay } from '../../../state/ducks/userConfig'; -import { sessionPassword } from '../../../state/ducks/modalDialog'; +import { sessionPassword, updateConfirmModal } from '../../../state/ducks/modalDialog'; import { PasswordAction } from '../../dialog/SessionPasswordDialog'; import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon'; @@ -356,17 +356,20 @@ class SettingsViewInner extends React.Component { 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, }, { id: 'audio-message-autoplay-setting', From f6d3715dab4d7e97e841e6bca21aae71e491f348 Mon Sep 17 00:00:00 2001 From: Brice-W Date: Mon, 16 Aug 2021 14:46:31 +1000 Subject: [PATCH 3/3] add a link icon when there is no image available or when media download is not allowed --- stylesheets/_modules.scss | 41 +++++++++++++++++++++++++- stylesheets/_theme_dark.scss | 4 +++ ts/components/conversation/Message.tsx | 12 +++++++- ts/components/session/icon/Icons.tsx | 7 +++++ ts/receiver/attachments.ts | 14 +++++---- 5 files changed, 70 insertions(+), 8 deletions(-) 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 221a0e7b7..bf8bd1add 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}