Skip to content

Commit

Permalink
fetch stickers from multiple ipfs gateways
Browse files Browse the repository at this point in the history
  • Loading branch information
@msuess
msuess committed Jan 17, 2022
1 parent f7b47b2 commit 2a3c186
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 51 deletions.
23 changes: 18 additions & 5 deletions src/status_im/ui/components/image_with_loader.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
(:require [reagent.core :as reagent]
[quo.design-system.colors :as colors]
[status-im.ui.components.react :as react]
[status-im.ui.components.icons.icons :as icons]))
[status-im.ui.components.icons.icons :as icons]
[status-im.utils.contenthash :as contenthash]))

(defn- placeholder [props child]
(let [{:keys [accessibility-label style]} props]
Expand All @@ -13,10 +14,13 @@
:background-color colors/gray-lighter})}
child]))

(defn image-with-loader [props]
(defn source [props]
(let [{:keys [source style accessibility-labels]} props
loaded? (reagent/atom false)
error? (reagent/atom false)]
error? (reagent/atom false)
current-source (reagent/atom (if (seq? source)
source
[source]))]
(fn []
[react/view
(when @error?
Expand All @@ -29,7 +33,16 @@
[react/activity-indicator {:animating true}]])
(when (not @error?)
[react/fast-image {:accessibility-label (:success accessibility-labels)
:onError #(reset! error? true)
:onError #(if (empty? (rest @current-source))
(reset! error? true)
(reset! current-source
(rest @current-source)))
:onLoad #(reset! loaded? true)
:style (if @loaded? style {})
:source source}])])))
:source (first @current-source)}])])))

(defn ipfs [props]
(let [{:keys [hash]} props]
(source (merge (dissoc props :hash)
{:source (map (fn [u] {:uri u})
(contenthash/alternatives hash))}))))
8 changes: 4 additions & 4 deletions src/status_im/ui/screens/chat/message/message.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
[status-im.ui.screens.communities.icon :as communities.icon]
[status-im.ui.components.animation :as animation]
[status-im.chat.models.pin-message :as models.pin-message]
[status-im.ui.components.image-with-loader :refer [image-with-loader]])
[status-im.ui.components.image-with-loader :as image-with-loader])
(:require-macros [status-im.utils.views :refer [defview letsubs]]))

(defn message-timestamp-anim
Expand Down Expand Up @@ -565,9 +565,9 @@
[{:on-press #(when pack
(re-frame/dispatch [:chat.ui/show-profile from]))
:label (i18n/label :t/view-details)}])))})
[image-with-loader {:style {:margin 10 :width 140 :height 140 :border-radius 16}
;;TODO (perf) move to event
:source {:uri (contenthash/url (-> content :sticker :hash))}}]]
[image-with-loader/ipfs {:style {:margin 10 :width 140 :height 140 :border-radius 16}
;;TODO (perf) move to event
:hash (-> content :sticker :hash)}]]
reaction-picker]))

(defmethod ->message constants/content-type-image [{:keys [content in-popover?] :as message} {:keys [on-long-press modal]
Expand Down
66 changes: 33 additions & 33 deletions src/status_im/ui/screens/chat/stickers/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
[status-im.ui.screens.chat.stickers.styles :as styles]
[status-im.utils.contenthash :as contenthash]
[status-im.utils.debounce :as debounce]
[status-im.ui.components.image-with-loader :refer [image-with-loader]]))
[status-im.ui.components.image-with-loader :as image-with-loader]))

(def icon-size 28)
(def icon-horizontal-margin 8)
Expand Down Expand Up @@ -40,11 +40,11 @@
^{:key (str hash)}
[react/touchable-highlight {:style {:height 75 :width 75 :margin 5}
:on-press #(debounce/dispatch-and-chill [:chat/send-sticker sticker] 1000)}
[image-with-loader {:style {:width "100%" :height "100%" :border-radius 8}
:accessibility-labels {:success :sticker-icon
:loading :sticker-icon-loading
:error :sticker-icon-error}
:source {:uri (contenthash/url (str "0x" hash))}}]])]]])
[image-with-loader/ipfs {:style {:width "100%" :height "100%" :border-radius 8}
:accessibility-labels {:success :sticker-icon
:loading :sticker-icon-loading
:error :sticker-icon-error}
:hash (str "0x" hash)}]])]]])

(defview recent-stickers-panel [window-width]
(letsubs [stickers [:stickers/recent]]
Expand Down Expand Up @@ -122,30 +122,30 @@
(defview stickers-view []
(letsubs [selected-pack [:stickers/selected-pack]
installed-packs [:stickers/installed-packs-vals]]
[react/view {:style {:background-color colors/white
:flex 1}}
(cond
(= selected-pack :recent) [stickers-paging-panel installed-packs selected-pack]
(not (seq installed-packs)) [no-stickers-yet-panel]
:else [stickers-paging-panel installed-packs selected-pack])
[react/view {:style {:flex-direction :row :padding-horizontal 4}}
[pack-icon {:on-press #(do
(re-frame/dispatch [:stickers/load-packs])
(re-frame/dispatch [:navigate-to :stickers]))
:selected? false :background-color colors/blue}
[icons/icon :main-icons/add {:width 20 :height 20 :color colors/white-persist}]]
[react/view {:width 2}]
[react/scroll-view {:horizontal true :style {:padding-left 2}}
[react/view
[react/view {:style {:flex-direction :row}}
[pack-icon {:id :recent :background-color colors/white}
[icons/icon :stickers-icons/recent {:color colors/gray
:width 44
:height 44}]]
(for [{:keys [id thumbnail]} installed-packs]
^{:key id}
[pack-icon {:id id
:background-color colors/white}
[image-with-loader {:style {:width icon-size :height icon-size :border-radius (/ icon-size 2)}
:source {:uri (contenthash/url thumbnail)}}]])]
[scroll-indicator]]]]]))
[react/view {:style {:background-color colors/white
:flex 1}}
(cond
(= selected-pack :recent) [stickers-paging-panel installed-packs selected-pack]
(not (seq installed-packs)) [no-stickers-yet-panel]
:else [stickers-paging-panel installed-packs selected-pack])
[react/view {:style {:flex-direction :row :padding-horizontal 4}}
[pack-icon {:on-press #(do
(re-frame/dispatch [:stickers/load-packs])
(re-frame/dispatch [:navigate-to :stickers]))
:selected? false :background-color colors/blue}
[icons/icon :main-icons/add {:width 20 :height 20 :color colors/white-persist}]]
[react/view {:width 2}]
[react/scroll-view {:horizontal true :style {:padding-left 2}}
[react/view
[react/view {:style {:flex-direction :row}}
[pack-icon {:id :recent :background-color colors/white}
[icons/icon :stickers-icons/recent {:color colors/gray
:width 44
:height 44}]]
(for [{:keys [id thumbnail]} installed-packs]
^{:key id}
[pack-icon {:id id
:background-color colors/white}
[image-with-loader/ipfs {:style {:width icon-size :height icon-size :border-radius (/ icon-size 2)}
:hash thumbnail}]])]
[scroll-indicator]]]]]))
18 changes: 9 additions & 9 deletions src/status_im/ui/screens/stickers/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@
[quo.design-system.colors :as colors]
[status-im.ui.components.icons.icons :as icons]
[status-im.ui.components.react :as react]
[status-im.ui.components.image-with-loader :refer [image-with-loader]]
[status-im.ui.components.image-with-loader :as image-with-loader]
[status-im.ui.screens.stickers.styles :as styles]
[status-im.utils.contenthash :as contenthash]
[status-im.utils.money :as money])
(:require-macros [status-im.utils.views :refer [defview letsubs]]))

(defn- thumbnail-icon [uri size]
[image-with-loader {:style {:width size :height size :border-radius (/ size 2)}
:source {:uri uri}}])
(defn- thumbnail-icon [hash size]
[image-with-loader/ipfs {:style {:width size :height size :border-radius (/ size 2)}
:hash hash}])

(defn- installed-icon []
[react/view styles/installed-icon
Expand Down Expand Up @@ -44,9 +44,9 @@
(defn pack-badge [{:keys [name author price thumbnail preview id installed owned pending]}]
[react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :stickers-pack {:id id}])}
[react/view {:margin-bottom 27}
[image-with-loader {:style {:height 200 :border-radius 20} :source {:uri (contenthash/url preview)}}]
[image-with-loader/ipfs {:style {:height 200 :border-radius 20} :hash preview}]
[react/view {:height 64 :align-items :center :flex-direction :row}
[thumbnail-icon (contenthash/url thumbnail) 40]
[thumbnail-icon thumbnail 40]
[react/view {:padding-horizontal 16 :flex 1}
[react/text {:accessibility-label :sticker-pack-name} name]
[react/text {:style {:color colors/gray :margin-top 6}
Expand Down Expand Up @@ -79,7 +79,7 @@
(if pack
[react/view {:flex 1}
[react/view {:height 74 :align-items :center :flex-direction :row :padding-horizontal 16}
[thumbnail-icon (contenthash/url thumbnail) 64]
[thumbnail-icon thumbnail 64]
[react/view {:padding-horizontal 16 :flex 1}
[react/text {:style {:typography :header}} name]
[react/text {:style {:color colors/gray :margin-top 6}} author]]
Expand All @@ -91,8 +91,8 @@
[react/view {:flex-direction :row :flex-wrap :wrap}
(for [{:keys [hash]} stickers]
^{:key hash}
[image-with-loader {:style (styles/sticker-image sticker-icon-size)
:source {:uri (contenthash/url hash)}}])]]]]
[image-with-loader/ipfs {:style (styles/sticker-image sticker-icon-size)
:hash hash}])]]]]
[react/view {:flex 1 :align-items :center :justify-content :center}
[react/activity-indicator {:animating true}]])]))

Expand Down
13 changes: 13 additions & 0 deletions src/status_im/utils/contenthash.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,16 @@
"")))

(def url (memoize url-fn))

(defn ipfs-alternatives [hash]
[(str "https://" hash ".ipfs.cf-ipfs.com")
(str "https://" hash ".ipfs.dweb.link")
(str "https://ipfs.io/ipfs/" hash)])

(defn alternatives-fn [hex]
(let [{:keys [namespace hash]} (decode (ethereum/normalized-hex hex))]
(case namespace
:ipfs (ipfs-alternatives hash)
"")))

(def alternatives (memoize alternatives-fn))

0 comments on commit 2a3c186

Please sign in to comment.