add a link icon when there is no image available or when media download is not allowed

pull/1852/head
Brice-W 4 years ago
parent e5ee3467ac
commit f6d3715dab

@ -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;
}

@ -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;
}
}

@ -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<Props, State> {
)}
>
{first.image && previewHasImage && !isFullSizeImage ? (
<div className="module-message__link-preview__icon_container">
<div className="module-message__link-preview__image_container">
<Image
smallCurveTopLeft={!withContentAbove}
softCorners={true}
@ -394,6 +396,14 @@ class MessageInner extends React.PureComponent<Props, State> {
onError={this.handleImageError}
/>
</div>
) : !first.image || !previewHasImage ? (
<div className="module-message__link-preview__icon_container">
<div className="module-message__link-preview__icon_container__inner">
<div className="module-message__link-preview__icon-container__circle-background">
<SessionIcon iconType={SessionIconType.Link} iconSize={SessionIconSize.Small} />
</div>
</div>
</div>
) : null}
<div
className={classNames(

@ -21,6 +21,7 @@ export enum SessionIconType {
Gear = 'gear',
Globe = 'globe',
Info = 'info',
Link = 'link',
Lock = 'lock',
Microphone = 'microphone',
Moon = 'moon',
@ -204,6 +205,12 @@ export const icons = {
viewBox: '0 0 25 25',
ratio: 1,
},
[SessionIconType.Link]: {
path:
'M265.117,22.764l-9.877-8.737c-23.003-20.398-58.227-18.283-78.618,4.726l-28.267,31.89 c-6.38,7.199-5.717,18.251,1.479,24.637l2.653,2.354c7.221,6.402,18.239,5.741,24.646-1.481l28.265-31.889 c6.305-7.107,17.227-7.761,24.338-1.466l9.865,8.752c7.113,6.303,7.783,17.223,1.469,24.334l-61.808,69.726 c-5.231,5.911-13.791,7.505-20.816,3.875c-7.682-3.967-17.051-2.224-22.787,4.245l-0.482,0.544 c-3.881,4.377-5.499,10.188-4.439,15.943c1.061,5.752,4.642,10.604,9.825,13.313c8.197,4.284,17.049,6.358,25.814,6.358 c15.532,0,30.795-6.512,41.67-18.775l61.804-69.718C290.219,78.417,288.099,43.148,265.117,22.764zM133.998,208.581l-2.659-2.356c-7.204-6.383-18.259-5.712-24.64,1.489l-28.254,31.886 c-6.308,7.105-17.222,7.764-24.327,1.473l-9.879-8.764c-7.115-6.301-7.783-17.212-1.467-24.325l61.806-69.721 c5.124-5.787,13.555-7.442,20.504-4.028c7.986,3.924,17.683,2.016,23.595-4.656l0.222-0.25c3.798-4.288,5.396-9.979,4.386-15.614 c-1.01-5.636-4.484-10.417-9.533-13.119c-22.828-12.22-50.769-7.22-67.947,12.165l-61.81,69.707v0.001 c-20.371,22.978-18.252,58.246,4.726,78.622l9.877,8.749c10.583,9.383,23.77,13.992,36.913,13.992 c15.394,0,30.724-6.327,41.718-18.724l28.258-31.886C141.88,226.003,141.224,214.987,133.998,208.581z',
viewBox: '0 0 283.842 283.842',
ratio: 1,
},
[SessionIconType.Lock]: {
path:
'M417.684,188.632H94.316c-9.923,0-17.965,8.042-17.965,17.965v239.532c0,7.952,5.234,14.965,12.863,17.222l161.684,47.906 c1.665,0.497,3.383,0.743,5.102,0.743c1.719,0,3.437-0.246,5.108-0.743l161.684-47.906c7.623-2.258,12.857-9.27,12.857-17.222 V206.596C435.649,196.674,427.607,188.632,417.684,188.632z M399.719,432.715L256,475.298l-143.719-42.583V224.561h287.439 V432.715z M256,0c-69.345,0-125.754,56.949-125.754,126.952v76.052h35.93v-76.052c0-50.188,40.295-91.022,89.825-91.022 s89.825,40.834,89.825,91.022v76.65h35.93v-76.65C381.754,56.949,325.339,0,256,0z M256,308.398c-9.923,0-17.965,8.042-17.965,17.965v47.906c0,9.923,8.042,17.965,17.965,17.965 c9.923,0,17.965-8.042,17.965-17.965v-47.906C273.965,316.44,265.923,308.398,256,308.398z',

@ -168,12 +168,14 @@ async function processPreviews(message: MessageModel, convo: ConversationModel):
}
addedCount += 1;
const image = await AttachmentDownloads.addJob(item.image, {
messageId: message.id,
type: 'preview',
index,
isOpenGroupV2,
});
const image = message.isTrustedForAttachmentDownload()
? await AttachmentDownloads.addJob(item.image, {
messageId: message.id,
type: 'preview',
index,
isOpenGroupV2,
})
: null;
return { ...item, image };
})

Loading…
Cancel
Save