Add tenor and giphy.com support
Signed-off-by: Andrea Maria Piana <andrea.maria.piana@gmail.com>
This commit is contained in:
parent
a7f9998d6c
commit
49d4b15761
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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"})
|
||||||
|
|
Loading…
Reference in New Issue