diff --git a/src/status_im/ui/screens/chat/message/link_preview.cljs b/src/status_im/ui/screens/chat/message/link_preview.cljs index 2960ff7867..d26d17863b 100644 --- a/src/status_im/ui/screens/chat/message/link_preview.cljs +++ b/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}] - [quo/text {:size :small - :style styles/link-preview-title} - title] - [quo/text {:size :small - :color :secondary - :style styles/link-preview-site} - site]]]))))) + (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]])]]))))) (defview link-preview-wrapper [links outgoing timeline] (letsubs diff --git a/src/status_im/ui/screens/chat/message/styles.cljs b/src/status_im/ui/screens/chat/message/styles.cljs index e39a71a8b1..9c644a9312 100644 --- a/src/status_im/ui/screens/chat/message/styles.cljs +++ b/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] - {: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 screen-width + (-> "window" + 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)})) (def link-preview-title {:margin-horizontal 12 @@ -127,4 +146,4 @@ (def link-preview-site {:margin-horizontal 12 :margin-top 2 - :margin-bottom 10}) \ No newline at end of file + :margin-bottom 10}) diff --git a/src/status_im/utils/config.cljs b/src/status_im/utils/config.cljs index e8bf0de6d9..75d22212ff 100644 --- a/src/status_im/utils/config.cljs +++ b/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"})