From bbdb90fdf6d38c28c2ee35915769235674ff95c3 Mon Sep 17 00:00:00 2001 From: Andrey Shovkoplyas Date: Tue, 19 Jun 2018 16:59:12 +0300 Subject: [PATCH] Support remote SVG images [#4709] Signed-off-by: Andrey Shovkoplyas --- src/status_im/ui/components/svgimage.cljs | 52 +++++++++++++++++++ .../wallet/collectibles/cryptokitties.cljs | 9 ++-- .../wallet/collectibles/cryptostrikers.cljs | 12 +++-- .../wallet/collectibles/etheremon.cljs | 13 +++-- .../screens/wallet/collectibles/styles.cljs | 3 +- 5 files changed, 73 insertions(+), 16 deletions(-) create mode 100644 src/status_im/ui/components/svgimage.cljs diff --git a/src/status_im/ui/components/svgimage.cljs b/src/status_im/ui/components/svgimage.cljs new file mode 100644 index 0000000000..82b44ff62d --- /dev/null +++ b/src/status_im/ui/components/svgimage.cljs @@ -0,0 +1,52 @@ +(ns status-im.ui.components.svgimage + (:require [status-im.ui.components.react :as react] + [reagent.core :as reagent] + [status-im.utils.platform :as platform])) + +(defn html [uri width height] + (str + "\n + + + + + +
+ +
+ + ")) + +(defn svgimage [{:keys [style source]}] + (let [width (reagent/atom nil) + {:keys [uri k] :or {k 1}} source] + (when (re-find #"^(https:)([/|.|\w|\s|-])*\.(?:jpg|svg|png)$" uri) + (fn [] + [react/view {:style style + :on-layout #(reset! width (-> % .-nativeEvent .-layout .-width))} + [react/web-view + {:java-script-enabled false + :third-party-cookies-enabled false + :scroll-enabled false + :bounces false + :scales-page-to-fit platform/android? + :style {:width @width :height (* @width k) :background-color :transparent} + :source {:html (html uri @width (* @width k))}}]])))) \ No newline at end of file diff --git a/src/status_im/ui/screens/wallet/collectibles/cryptokitties.cljs b/src/status_im/ui/screens/wallet/collectibles/cryptokitties.cljs index 876635de25..b57a7e9738 100644 --- a/src/status_im/ui/screens/wallet/collectibles/cryptokitties.cljs +++ b/src/status_im/ui/screens/wallet/collectibles/cryptokitties.cljs @@ -7,7 +7,8 @@ [status-im.ui.screens.wallet.collectibles.views :as collectibles] [status-im.ui.screens.wallet.collectibles.styles :as styles] [status-im.utils.handlers :as handlers] - [status-im.utils.http :as http])) + [status-im.utils.http :as http] + [status-im.ui.components.svgimage :as svgimage])) (def ck :CK) @@ -46,9 +47,9 @@ (defmethod collectibles/render-collectible ck [_ {:keys [id name bio image_url]}] [react/view {:style styles/details} [react/view {:style styles/details-text} - ;; TODO reenable image once SVG is supported - #_[react/image {:style {:width 80 :height 80 :margin 10 :background-color "red"} :source {:uri image_url}}] - [react/view {} + [svgimage/svgimage {:style styles/details-image + :source {:uri image_url}}] + [react/view {:flex 1} [react/text {:style styles/details-name} (or name (i18n/label :t/cryptokitty-name {:id id}))] [react/text {:number-of-lines 3 diff --git a/src/status_im/ui/screens/wallet/collectibles/cryptostrikers.cljs b/src/status_im/ui/screens/wallet/collectibles/cryptostrikers.cljs index 9b23a0d380..cb731fe5f1 100644 --- a/src/status_im/ui/screens/wallet/collectibles/cryptostrikers.cljs +++ b/src/status_im/ui/screens/wallet/collectibles/cryptostrikers.cljs @@ -6,12 +6,13 @@ [status-im.ui.components.react :as react] [status-im.ui.screens.wallet.collectibles.styles :as styles] [status-im.ui.screens.wallet.collectibles.views :as collectibles] - [status-im.utils.http :as http])) + [status-im.utils.http :as http] + [status-im.ui.components.svgimage :as svgimage])) (def strikers :STRK) (defmethod collectibles/load-collectible-fx strikers [_ id] - {:http-get {:url (str "https://us-central1-cryptostrikers-prod.cloudfunctions.net/cards/" id) + {:http-get {:url (str "https://us-central1-cryptostrikers-prod.cloudfunctions.net/cards/" id) :success-event-creator (fn [o] [:load-collectible-success strikers {id (http/parse-payload o)}]) :failure-event-creator (fn [o] @@ -20,9 +21,10 @@ (defmethod collectibles/render-collectible strikers [_ {:keys [external_url description name image]}] [react/view {:style styles/details} [react/view {:style styles/details-text} - [react/image {:style styles/details-image - :source {:uri image}}] - [react/view {:justify-content :center} + [svgimage/svgimage {:style styles/details-image + :source {:uri image + :k 1.4}}] + [react/view {:flex 1 :justify-content :center} [react/text {:style styles/details-name} name] [react/text diff --git a/src/status_im/ui/screens/wallet/collectibles/etheremon.cljs b/src/status_im/ui/screens/wallet/collectibles/etheremon.cljs index 2c2617420f..312e4ef278 100644 --- a/src/status_im/ui/screens/wallet/collectibles/etheremon.cljs +++ b/src/status_im/ui/screens/wallet/collectibles/etheremon.cljs @@ -6,12 +6,13 @@ [status-im.ui.components.react :as react] [status-im.ui.screens.wallet.collectibles.styles :as styles] [status-im.ui.screens.wallet.collectibles.views :as collectibles] - [status-im.utils.http :as http])) + [status-im.utils.http :as http] + [status-im.ui.components.svgimage :as svgimage])) (def emona :EMONA) (defmethod collectibles/load-collectible-fx emona [_ id] - {:http-get {:url (str "https://www.etheremon.com/api/monster/get_data?monster_ids=" id) + {:http-get {:url (str "https://www.etheremon.com/api/monster/get_data?monster_ids=" id) :success-event-creator (fn [o] [:load-collectible-success emona (:data (http/parse-payload o))]) :failure-event-creator (fn [o] @@ -22,9 +23,11 @@ (defmethod collectibles/render-collectible emona [_ {:keys [monster_id user_defined_name image]}] [react/view {:style styles/details} [react/view {:style styles/details-text} - [react/image {:style styles/details-image - :source {:uri image}}] - [react/view {:justify-content :center} + [react/view {:flex 1} + [svgimage/svgimage {:style styles/details-image + :source {:uri image + :k 2}}]] + [react/view {:flex 1 :justify-content :center} [react/text {:style styles/details-name} user_defined_name]]] [action-button/action-button {:label (i18n/label :t/view-etheremon) diff --git a/src/status_im/ui/screens/wallet/collectibles/styles.cljs b/src/status_im/ui/screens/wallet/collectibles/styles.cljs index c34d49b6c8..3c7df70d25 100644 --- a/src/status_im/ui/screens/wallet/collectibles/styles.cljs +++ b/src/status_im/ui/screens/wallet/collectibles/styles.cljs @@ -25,6 +25,5 @@ :margin-bottom 10}) (def details-image - {:width 80 - :height 80 + {:flex 1 :margin 10})