From f6d3715dab4d7e97e841e6bca21aae71e491f348 Mon Sep 17 00:00:00 2001
From: Brice-W <brice@loki.network>
Date: Mon, 16 Aug 2021 14:46:31 +1000
Subject: [PATCH] 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<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(
diff --git a/ts/components/session/icon/Icons.tsx b/ts/components/session/icon/Icons.tsx
index 4c4967d54..a942fa1ab 100644
--- a/ts/components/session/icon/Icons.tsx
+++ b/ts/components/session/icon/Icons.tsx
@@ -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',
diff --git a/ts/receiver/attachments.ts b/ts/receiver/attachments.ts
index 96dcf68b5..ec20817e1 100644
--- a/ts/receiver/attachments.ts
+++ b/ts/receiver/attachments.ts
@@ -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 };
     })