Add tenor and giphy.com support

Signed-off-by: Andrea Maria Piana <andrea.maria.piana@gmail.com>

src/status_im/ui/screens/chat/message/link_preview.cljs

@@ -57,6 +57,9 @@
                 :type     :secondary}
     (i18n/label :t/dont-ask)]])
 
+(defn is-gif? [url]
+  (string/ends-with? url ".gif"))
+
 (defview link-preview-loader [link outgoing timeline]
   (letsubs [cache [:link-preview/cache]]
     (let [{:keys [site title thumbnailUrl error] :as preview-data} (get cache link)]
@@ -67,21 +70,23 @@
           nil)
         (when-not error
           [react/touchable-highlight
-           {:style {:align-self :stretch}
+           {:style (when-not (is-gif? thumbnailUrl) {:align-self :stretch})
             :on-press #(when (and (security/safe-link? link))
                          (re-frame/dispatch
                           [:browser.ui/message-link-pressed link]))}
            [react/view (styles/link-preview-wrapper outgoing timeline)
             [react/image {:source              {:uri thumbnailUrl}
-                          :style               (styles/link-preview-image outgoing)
+                          :style               (styles/link-preview-image outgoing (select-keys preview-data [:height :width]))
                           :accessibility-label :member-photo}]
+            (when-not (is-gif? thumbnailUrl)
+              [:<>
                [quo/text {:size  :small
                           :style styles/link-preview-title}
                 title]
                [quo/text {:size  :small
                           :color :secondary
                           :style styles/link-preview-site}
-             site]]])))))
+                site]])]])))))
 
 (defview link-preview-wrapper [links outgoing timeline]
   (letsubs

src/status_im/ui/screens/chat/message/styles.cljs

@@ -1,5 +1,6 @@
 (ns status-im.ui.screens.chat.message.styles
   (:require [quo.design-system.colors :as colors]
+            [status-im.ui.components.react :as react]
             [status-im.ui.screens.chat.styles.photos :as photos]
             [status-im.ui.components.colors :as components.colors]))
 
@@ -112,13 +113,31 @@
    :border-color               components.colors/gray-lighter
    :margin-vertical            4})
 
-(defn link-preview-image [outgoing]
+(def screen-width
-  {:height                     170
+  (-> "window"
-   :overflow                   :hidden
+      react/get-dimensions
+      :width))
+
+(defn scale-dimensions
+  "Scale a given height and width to be maximum percentage allowed of the screen width"
+  [{:keys [height width] :as dimensions}]
+  (let [max-cover    0.5
+        aspect-ratio (/ height width)
+        max-width    (* max-cover screen-width)]
+    (if (< width max-width)
+      dimensions
+      {:width  max-width
+       :height (* aspect-ratio max-width)})))
+
+(defn link-preview-image [outgoing {:keys [height width] :as dimensions}]
+  (merge (if (and height width)
+           (scale-dimensions dimensions)
+           {:height 170})
+         {:overflow                   :hidden
           :border-top-left-radius     16
           :border-top-right-radius    16
           :border-bottom-left-radius  (if outgoing 16 4)
-   :border-bottom-right-radius (if outgoing 4 16)})
+          :border-bottom-right-radius (if outgoing 4 16)}))
 
 (def link-preview-title
   {:margin-horizontal 12

src/status_im/utils/config.cljs

@@ -143,4 +143,4 @@
              default-networks)))
 
 (def link-preview-enabled-site?
-  #{"youtube.com" "youtu.be" "github.com"})
+  #{"youtube.com" "youtu.be" "github.com" "giphy.com" "gph.is" "media.giphy.com"})