Skip to content

Commit 2009199

Browse files
ibrkhalilibrkhalil
authored
feat: Add internal link preview for communities (#18484)
1 parent 103c4b4 commit 2009199

File tree

26 files changed

+388
-132
lines changed

26 files changed

+388
-132
lines changed

‎src/legacy/status_im/data_store/activities_test.cljs

+32-30
Original file line numberDiff line numberDiff line change
@@ -29,37 +29,39 @@
2929

3030
(testing "transforms messages from RPC response"
3131
(is
32-
(= {:last-message {:quoted-message nil
33-
:outgoing-status nil
34-
:command-parameters nil
35-
:link-previews []
36-
:content {:sticker nil
37-
:rtl? nil
38-
:ens-name nil
39-
:parsed-text nil
40-
:response-to nil
41-
:chat-id nil
42-
:image nil
43-
:line-count nil
44-
:links nil
45-
:text nil}
46-
:outgoing false}
32+
(= {:last-message {:quoted-message nil
33+
:outgoing-status nil
34+
:command-parameters nil
35+
:link-previews []
36+
:status-link-previews []
37+
:content {:sticker nil
38+
:rtl? nil
39+
:ens-name nil
40+
:parsed-text nil
41+
:response-to nil
42+
:chat-id nil
43+
:image nil
44+
:line-count nil
45+
:links nil
46+
:text nil}
47+
:outgoing false}
4748
:message nil
48-
:reply-message {:quoted-message nil
49-
:outgoing-status nil
50-
:command-parameters nil
51-
:link-previews []
52-
:content {:sticker nil
53-
:rtl? nil
54-
:ens-name nil
55-
:parsed-text nil
56-
:response-to nil
57-
:chat-id nil
58-
:image nil
59-
:line-count nil
60-
:links nil
61-
:text nil}
62-
:outgoing false}}
49+
:reply-message {:quoted-message nil
50+
:outgoing-status nil
51+
:command-parameters nil
52+
:link-previews []
53+
:status-link-previews []
54+
:content {:sticker nil
55+
:rtl? nil
56+
:ens-name nil
57+
:parsed-text nil
58+
:response-to nil
59+
:chat-id nil
60+
:image nil
61+
:line-count nil
62+
:links nil
63+
:text nil}
64+
:outgoing false}}
6365
(-> raw-notification
6466
store/<-rpc
6567
(select-keys [:last-message :message :reply-message])))))

‎src/legacy/status_im/data_store/messages.cljs

+33-3
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,41 @@
1616
:community-id :communityId
1717
:clock-value :clock})))
1818

19+
(defn- <-status-link-previews-rpc
20+
[preview]
21+
(-> preview
22+
(update :community
23+
set/rename-keys
24+
{:communityId :community-id
25+
:displayName :display-name
26+
:membersCount :members-count
27+
:activeMembersCount :active-members-count})
28+
(update-in [:community :banner] set/rename-keys {:dataUri :data-uri})
29+
(update-in [:community :icon] set/rename-keys {:dataUri :data-uri})))
30+
31+
(defn ->status-link-previews-rpc
32+
[preview]
33+
(-> preview
34+
(update :community
35+
set/rename-keys
36+
{:community-id :communityId
37+
:display-name :displayName
38+
:members-count :membersCount
39+
:active-members-count :activeMembersCount})
40+
(update-in [:community :banner] set/rename-keys {:data-uri :dataUri})
41+
(update-in [:community :icon] set/rename-keys {:data-uri :dataUri})))
42+
1943
(defn- <-link-preview-rpc
2044
[preview]
21-
(update preview :thumbnail set/rename-keys {:dataUri :data-uri}))
45+
(-> preview
46+
(update :thumbnail set/rename-keys {:dataUri :data-uri})
47+
(update :favicon set/rename-keys {:dataUri :data-uri})))
2248

2349
(defn ->link-preview-rpc
2450
[preview]
25-
(update preview :thumbnail set/rename-keys {:data-uri :dataUri}))
51+
(-> preview
52+
(update :thumbnail set/rename-keys {:data-uri :dataUri})
53+
(update :favicon set/rename-keys {:data-uri :dataUri})))
2654

2755
(defn <-rpc
2856
[message]
@@ -53,8 +81,10 @@
5381
:new :new?
5482
:albumImagesCount :album-images-count
5583
:displayName :display-name
56-
:linkPreviews :link-previews})
84+
:linkPreviews :link-previews
85+
:statusLinkPreviews :status-link-previews})
5786
(update :link-previews #(map <-link-preview-rpc %))
87+
(update :status-link-previews #(map <-status-link-previews-rpc %))
5888
(update :quoted-message
5989
set/rename-keys
6090
{:parsedText :parsed-text

‎src/legacy/status_im/data_store/messages_test.cljs

+26-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,19 @@
3737
:compressed-key "c"
3838
:timestamp 3
3939
:link-previews [{:thumbnail {:url "http://localhost"
40-
:data-uri "data:image/png"}}]}
40+
:data-uri "data:image/png"}
41+
:favicon nil}]
42+
:status-link-previews [{:url "http://localhost"
43+
:community {:community-id "0x01"
44+
:display-name "Test Comm"
45+
:members-count 12
46+
:active-members-count 12
47+
:banner
48+
{:data-uri
49+
"data:image/png"}
50+
:icon
51+
{:data-uri
52+
"data:image/png"}}}]}
4153
message {:id message-id
4254
:whisperTimestamp 1
4355
:parsedText "parsed-text"
@@ -61,5 +73,17 @@
6173
:timestamp 3
6274
:outgoingStatus "sending"
6375
:linkPreviews [{:thumbnail {:url "http://localhost"
64-
:dataUri "data:image/png"}}]}]
76+
:dataUri "data:image/png"}
77+
:favicon nil}]
78+
:statusLinkPreviews [{:url "http://localhost"
79+
:community {:communityId "0x01"
80+
:displayName "Test Comm"
81+
:membersCount 12
82+
:activeMembersCount 12
83+
:banner
84+
{:dataUri
85+
"data:image/png"}
86+
:icon
87+
{:dataUri
88+
"data:image/png"}}}]}]
6589
(is (= expected (m/<-rpc message))))))

‎src/legacy/status_im/subs/root.cljs

+1
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@
100100
;;; Link previews
101101
(reg-root-key-sub :link-previews-whitelist :link-previews-whitelist)
102102
(reg-root-key-sub :chat/link-previews :chat/link-previews)
103+
(reg-root-key-sub :chat/status-link-previews :chat/status-link-previews)
103104

104105
;;commands
105106
(reg-root-key-sub :commands/select-account :commands/select-account)

‎src/legacy/status_im/ui/screens/communities/invite.cljs

+1-3
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,7 @@
8585
:accessibility-label :share-community-link
8686
:type :secondary
8787
:on-press #(debounce/throttle-and-dispatch
88-
[(if can-invite?
89-
::communities/invite-people-confirmation-pressed
90-
::communities/share-community-confirmation-pressed) @user-pk
88+
[::communities/share-community-confirmation-pressed @user-pk
9189
selected]
9290
3000)}
9391
(i18n/label (if can-invite? :t/invite :t/share))]}]]))))

‎src/quo/components/links/internal_link_card/community/style.cljs

+2-2
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@
6060
:padding-horizontal 12
6161
:padding-top 10
6262
:padding-bottom 12
63-
:height (if (= :message size) 245 266)
64-
:width (if (= :message size) 295 335)})
63+
:width (if (= :message size) 295 335)
64+
:flex 1})
6565

6666
(def header-container
6767
{:flex-direction :row

‎src/quo/components/links/link_preview/component_spec.cljs

-6
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
{:title "Some title"
88
:description "Some description"
99
:link "status.im"
10-
:logo "data:image/png,logo-x"
1110
:thumbnail "data:image/png,whatever"})
1211

1312
(h/describe "Links - Link Preview"
@@ -21,17 +20,12 @@
2120
(h/is-truthy (h/query-by-text (:title props)))
2221
(h/is-truthy (h/query-by-text (:description props)))
2322
(h/is-truthy (h/query-by-text (:link props)))
24-
(h/is-truthy (h/query-by-label-text :logo))
2523
(h/is-truthy (h/query-by-label-text :thumbnail)))
2624

2725
(h/test "does not render thumbnail if prop is not present"
2826
(h/render [view/view (dissoc props :thumbnail)])
2927
(h/is-null (h/query-by-label-text :thumbnail)))
3028

31-
(h/test "does not render logo if prop is not present"
32-
(h/render [view/view (dissoc props :logo)])
33-
(h/is-null (h/query-by-label-text :logo)))
34-
3529
(h/test "shows button to enable preview when preview is disabled"
3630
(h/render [view/view
3731
(assoc props

‎src/quo/components/links/link_preview/view.cljs

+28-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
(ns quo.components.links.link-preview.view
22
(:require
3+
["react-native-blob-util" :default ReactNativeBlobUtil]
4+
[oops.core :as oops]
35
[quo.components.buttons.button.view :as button]
46
[quo.components.links.link-preview.style :as style]
57
[quo.components.markdown.text :as text]
6-
[react-native.core :as rn]))
8+
[react-native.core :as rn]
9+
[react-native.platform :as platform]
10+
[react-native.svg :as svg]
11+
[taoensso.timbre :as log]))
712

813
(defn- button-disabled
914
[disabled-text on-enable]
@@ -51,14 +56,30 @@
5156
thumbnail)
5257
:accessibility-label :thumbnail}])
5358

59+
(defn- get-image-data
60+
[logo set-is-svg on-success]
61+
(-> (.config ReactNativeBlobUtil (clj->js {:trusty platform/ios?}))
62+
(.fetch "GET" logo)
63+
(.then (fn [imgObj]
64+
(set-is-svg (= "image/svg"
65+
(oops/oget imgObj
66+
["respInfo" "headers" "Content-Type"])))
67+
(on-success (oops/oget imgObj "data"))))
68+
(.catch #(log/error "could not fetch favicon " logo))))
69+
5470
(defn- logo-comp
5571
[logo]
56-
[rn/image
57-
{:accessibility-label :logo
58-
:source (if (string? logo)
59-
{:uri logo}
60-
logo)
61-
:style style/logo}])
72+
(let [[image-data set-image-data] (rn/use-state nil)
73+
[is-svg? set-is-svg] (rn/use-state nil)
74+
on-success (fn [data-uri]
75+
(set-image-data data-uri))
76+
_get-image-data (get-image-data logo set-is-svg on-success)]
77+
(if is-svg?
78+
[svg/svg-xml (merge style/logo {:xml image-data})]
79+
[rn/image
80+
{:accessibility-label :logo
81+
:source {:uri (str "data:image/png;base64," image-data)}
82+
:style style/logo}])))
6283

6384
(defn view
6485
[{:keys [title logo description link thumbnail

‎src/quo/components/links/url_preview/style.cljs

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
:border-radius 12
2222
:border-style :dashed
2323
:align-items :center
24+
:flex-direction :row
2425
:justify-content :center
2526
:align-self :stretch
2627
:padding horizontal-padding

‎src/quo/components/links/url_preview/view.cljs

+27-8
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,31 @@
11
(ns quo.components.links.url-preview.view
22
(:require
3+
[clojure.string :as string]
34
[quo.components.icon :as icon]
45
[quo.components.links.url-preview.style :as style]
56
[quo.components.markdown.text :as text]
67
[quo.foundations.colors :as colors]
7-
[react-native.core :as rn]))
8+
[react-native.core :as rn]
9+
[react-native.svg :as svg]))
10+
11+
(def base64-svg-prefix "data:image/svg;base64,")
812

913
(defn- logo-comp
1014
[{:keys [logo]}]
11-
[rn/image
12-
{:accessibility-label :logo
13-
:source (if (string? logo)
14-
{:uri logo}
15-
logo)
16-
:style style/logo}])
15+
(if (and (string? logo)
16+
(string/starts-with? logo base64-svg-prefix))
17+
[svg/svg-xml
18+
(merge style/logo
19+
{:xml (-> logo
20+
(string/replace base64-svg-prefix "")
21+
js/atob)})]
22+
[rn/image
23+
{:accessibility-label :logo
24+
:source (if (string? logo)
25+
{:uri logo}
26+
logo)
27+
:style style/logo
28+
:resize-mode :cover}]))
1729

1830
(defn- content
1931
[{:keys [title body]}]
@@ -50,6 +62,10 @@
5062
[rn/view
5163
{:accessibility-label :url-preview-loading
5264
:style (merge (style/loading-container) container-style)}
65+
[icon/icon :i/loading
66+
{:size 12
67+
:color (colors/theme-colors colors/neutral-50 colors/neutral-40)
68+
:container-style {:margin-right 8}}]
5369
[rn/text
5470
{:size :paragraph-2
5571
:weight :medium
@@ -60,6 +76,9 @@
6076
{:accessibility-label :url-preview
6177
:style (merge (style/container) container-style)}
6278
(when logo
63-
[logo-comp {:logo logo}])
79+
[logo-comp
80+
{:logo (if (map? logo)
81+
(:data-uri logo)
82+
logo)}])
6483
[content {:title title :body body}]
6584
[clear-button {:on-press on-clear}]]))

‎src/quo/components/links/url_preview_list/view.cljs

+3-2
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
[rn/view {:style style/url-preview-separator}])
3333

3434
(defn- item-component
35-
[{:keys [title body loading? logo]} _ _
35+
[{:keys [title body loading? logo url]} _ _
3636
{:keys [width on-clear loading-message container-style]}]
3737
[url-preview/view
3838
{:logo logo
@@ -41,7 +41,8 @@
4141
:loading? loading?
4242
:loading-message loading-message
4343
:on-clear on-clear
44-
:container-style (merge container-style {:width width})}])
44+
:container-style (merge container-style {:width width})
45+
:url url}])
4546

4647
(defn- f-view
4748
[]

‎src/status_im/common/biometric/events_test.cljs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
(ns status-im.common.biometric.events-test
2-
(:require [cljs.test :refer [deftest testing is]]
2+
(:require [cljs.test :refer [deftest is testing]]
33
matcher-combinators.test
44
[status-im.common.biometric.events :as sut]
55
[status-im.constants :as constants]

‎src/status_im/constants.cljs

+2
Original file line numberDiff line numberDiff line change
@@ -467,3 +467,5 @@
467467
(def ^:const bridge-name-erc-721-transfer "ERC721Transfer")
468468

469469
(def ^:const alert-banner-height 40)
470+
471+
(def ^:const status-hostname "status.app")

0 commit comments

Comments
 (0)