Add tenor and giphy.com support

Signed-off-by: Andrea Maria Piana <andrea.maria.piana@gmail.com>
This commit is contained in:
Shivek Khurana 2021-01-25 16:21:46 +05:30 committed by Andrea Maria Piana
parent a7f9998d6c
commit 49d4b15761
No known key found for this signature in database
GPG Key ID: AA6CCA6DE0E06424
3 changed files with 42 additions and 18 deletions

View File

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

View File

@ -1,5 +1,6 @@
(ns status-im.ui.screens.chat.message.styles (ns status-im.ui.screens.chat.message.styles
(:require [quo.design-system.colors :as colors] (: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.screens.chat.styles.photos :as photos]
[status-im.ui.components.colors :as components.colors])) [status-im.ui.components.colors :as components.colors]))
@ -112,13 +113,31 @@
:border-color components.colors/gray-lighter :border-color components.colors/gray-lighter
:margin-vertical 4}) :margin-vertical 4})
(defn link-preview-image [outgoing] (def screen-width
{:height 170 (-> "window"
:overflow :hidden react/get-dimensions
:border-top-left-radius 16 :width))
:border-top-right-radius 16
:border-bottom-left-radius (if outgoing 16 4) (defn scale-dimensions
:border-bottom-right-radius (if outgoing 4 16)}) "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)}))
(def link-preview-title (def link-preview-title
{:margin-horizontal 12 {:margin-horizontal 12

View File

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