Skip to content

Commit

Permalink
feat: Add internal link preview for communities (#18484)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ibrkhalil
ibrkhalil authored Mar 12, 2024
1 parent 103c4b4 commit 2009199
Show file tree
Hide file tree
Showing 26 changed files with 388 additions and 132 deletions.
62 changes: 32 additions & 30 deletions src/legacy/status_im/data_store/activities_test.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,37 +29,39 @@

(testing "transforms messages from RPC response"
(is
(= {:last-message {:quoted-message nil
:outgoing-status nil
:command-parameters nil
:link-previews []
:content {:sticker nil
:rtl? nil
:ens-name nil
:parsed-text nil
:response-to nil
:chat-id nil
:image nil
:line-count nil
:links nil
:text nil}
:outgoing false}
(= {:last-message {:quoted-message nil
:outgoing-status nil
:command-parameters nil
:link-previews []
:status-link-previews []
:content {:sticker nil
:rtl? nil
:ens-name nil
:parsed-text nil
:response-to nil
:chat-id nil
:image nil
:line-count nil
:links nil
:text nil}
:outgoing false}
:message nil
:reply-message {:quoted-message nil
:outgoing-status nil
:command-parameters nil
:link-previews []
:content {:sticker nil
:rtl? nil
:ens-name nil
:parsed-text nil
:response-to nil
:chat-id nil
:image nil
:line-count nil
:links nil
:text nil}
:outgoing false}}
:reply-message {:quoted-message nil
:outgoing-status nil
:command-parameters nil
:link-previews []
:status-link-previews []
:content {:sticker nil
:rtl? nil
:ens-name nil
:parsed-text nil
:response-to nil
:chat-id nil
:image nil
:line-count nil
:links nil
:text nil}
:outgoing false}}
(-> raw-notification
store/<-rpc
(select-keys [:last-message :message :reply-message])))))
Expand Down
36 changes: 33 additions & 3 deletions src/legacy/status_im/data_store/messages.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,41 @@
:community-id :communityId
:clock-value :clock})))

(defn- <-status-link-previews-rpc
[preview]
(-> preview
(update :community
set/rename-keys
{:communityId :community-id
:displayName :display-name
:membersCount :members-count
:activeMembersCount :active-members-count})
(update-in [:community :banner] set/rename-keys {:dataUri :data-uri})
(update-in [:community :icon] set/rename-keys {:dataUri :data-uri})))

(defn ->status-link-previews-rpc
[preview]
(-> preview
(update :community
set/rename-keys
{:community-id :communityId
:display-name :displayName
:members-count :membersCount
:active-members-count :activeMembersCount})
(update-in [:community :banner] set/rename-keys {:data-uri :dataUri})
(update-in [:community :icon] set/rename-keys {:data-uri :dataUri})))

(defn- <-link-preview-rpc
[preview]
(update preview :thumbnail set/rename-keys {:dataUri :data-uri}))
(-> preview
(update :thumbnail set/rename-keys {:dataUri :data-uri})
(update :favicon set/rename-keys {:dataUri :data-uri})))

(defn ->link-preview-rpc
[preview]
(update preview :thumbnail set/rename-keys {:data-uri :dataUri}))
(-> preview
(update :thumbnail set/rename-keys {:data-uri :dataUri})
(update :favicon set/rename-keys {:data-uri :dataUri})))

(defn <-rpc
[message]
Expand Down Expand Up @@ -53,8 +81,10 @@
:new :new?
:albumImagesCount :album-images-count
:displayName :display-name
:linkPreviews :link-previews})
:linkPreviews :link-previews
:statusLinkPreviews :status-link-previews})
(update :link-previews #(map <-link-preview-rpc %))
(update :status-link-previews #(map <-status-link-previews-rpc %))
(update :quoted-message
set/rename-keys
{:parsedText :parsed-text
Expand Down
28 changes: 26 additions & 2 deletions src/legacy/status_im/data_store/messages_test.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,19 @@
:compressed-key "c"
:timestamp 3
:link-previews [{:thumbnail {:url "http://localhost"
:data-uri "data:image/png"}}]}
:data-uri "data:image/png"}
:favicon nil}]
:status-link-previews [{:url "http://localhost"
:community {:community-id "0x01"
:display-name "Test Comm"
:members-count 12
:active-members-count 12
:banner
{:data-uri
"data:image/png"}
:icon
{:data-uri
"data:image/png"}}}]}
message {:id message-id
:whisperTimestamp 1
:parsedText "parsed-text"
Expand All @@ -61,5 +73,17 @@
:timestamp 3
:outgoingStatus "sending"
:linkPreviews [{:thumbnail {:url "http://localhost"
:dataUri "data:image/png"}}]}]
:dataUri "data:image/png"}
:favicon nil}]
:statusLinkPreviews [{:url "http://localhost"
:community {:communityId "0x01"
:displayName "Test Comm"
:membersCount 12
:activeMembersCount 12
:banner
{:dataUri
"data:image/png"}
:icon
{:dataUri
"data:image/png"}}}]}]
(is (= expected (m/<-rpc message))))))
1 change: 1 addition & 0 deletions src/legacy/status_im/subs/root.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@
;;; Link previews
(reg-root-key-sub :link-previews-whitelist :link-previews-whitelist)
(reg-root-key-sub :chat/link-previews :chat/link-previews)
(reg-root-key-sub :chat/status-link-previews :chat/status-link-previews)

;;commands
(reg-root-key-sub :commands/select-account :commands/select-account)
Expand Down
4 changes: 1 addition & 3 deletions src/legacy/status_im/ui/screens/communities/invite.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,7 @@
:accessibility-label :share-community-link
:type :secondary
:on-press #(debounce/throttle-and-dispatch
[(if can-invite?
::communities/invite-people-confirmation-pressed
::communities/share-community-confirmation-pressed) @user-pk
[::communities/share-community-confirmation-pressed @user-pk
selected]
3000)}
(i18n/label (if can-invite? :t/invite :t/share))]}]]))))
4 changes: 2 additions & 2 deletions src/quo/components/links/internal_link_card/community/style.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,8 @@
:padding-horizontal 12
:padding-top 10
:padding-bottom 12
:height (if (= :message size) 245 266)
:width (if (= :message size) 295 335)})
:width (if (= :message size) 295 335)
:flex 1})

(def header-container
{:flex-direction :row
Expand Down
6 changes: 0 additions & 6 deletions src/quo/components/links/link_preview/component_spec.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
{:title "Some title"
:description "Some description"
:link "status.im"
:logo "data:image/png,logo-x"
:thumbnail "data:image/png,whatever"})

(h/describe "Links - Link Preview"
Expand All @@ -21,17 +20,12 @@
(h/is-truthy (h/query-by-text (:title props)))
(h/is-truthy (h/query-by-text (:description props)))
(h/is-truthy (h/query-by-text (:link props)))
(h/is-truthy (h/query-by-label-text :logo))
(h/is-truthy (h/query-by-label-text :thumbnail)))

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

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

(h/test "shows button to enable preview when preview is disabled"
(h/render [view/view
(assoc props
Expand Down
35 changes: 28 additions & 7 deletions src/quo/components/links/link_preview/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
(ns quo.components.links.link-preview.view
(:require
["react-native-blob-util" :default ReactNativeBlobUtil]
[oops.core :as oops]
[quo.components.buttons.button.view :as button]
[quo.components.links.link-preview.style :as style]
[quo.components.markdown.text :as text]
[react-native.core :as rn]))
[react-native.core :as rn]
[react-native.platform :as platform]
[react-native.svg :as svg]
[taoensso.timbre :as log]))

(defn- button-disabled
[disabled-text on-enable]
Expand Down Expand Up @@ -51,14 +56,30 @@
thumbnail)
:accessibility-label :thumbnail}])

(defn- get-image-data
[logo set-is-svg on-success]
(-> (.config ReactNativeBlobUtil (clj->js {:trusty platform/ios?}))
(.fetch "GET" logo)
(.then (fn [imgObj]
(set-is-svg (= "image/svg"
(oops/oget imgObj
["respInfo" "headers" "Content-Type"])))
(on-success (oops/oget imgObj "data"))))
(.catch #(log/error "could not fetch favicon " logo))))

(defn- logo-comp
[logo]
[rn/image
{:accessibility-label :logo
:source (if (string? logo)
{:uri logo}
logo)
:style style/logo}])
(let [[image-data set-image-data] (rn/use-state nil)
[is-svg? set-is-svg] (rn/use-state nil)
on-success (fn [data-uri]
(set-image-data data-uri))
_get-image-data (get-image-data logo set-is-svg on-success)]
(if is-svg?
[svg/svg-xml (merge style/logo {:xml image-data})]
[rn/image
{:accessibility-label :logo
:source {:uri (str "data:image/png;base64," image-data)}
:style style/logo}])))

(defn view
[{:keys [title logo description link thumbnail
Expand Down
1 change: 1 addition & 0 deletions src/quo/components/links/url_preview/style.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
:border-radius 12
:border-style :dashed
:align-items :center
:flex-direction :row
:justify-content :center
:align-self :stretch
:padding horizontal-padding
Expand Down
35 changes: 27 additions & 8 deletions src/quo/components/links/url_preview/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,31 @@
(ns quo.components.links.url-preview.view
(:require
[clojure.string :as string]
[quo.components.icon :as icon]
[quo.components.links.url-preview.style :as style]
[quo.components.markdown.text :as text]
[quo.foundations.colors :as colors]
[react-native.core :as rn]))
[react-native.core :as rn]
[react-native.svg :as svg]))

(def base64-svg-prefix "data:image/svg;base64,")

(defn- logo-comp
[{:keys [logo]}]
[rn/image
{:accessibility-label :logo
:source (if (string? logo)
{:uri logo}
logo)
:style style/logo}])
(if (and (string? logo)
(string/starts-with? logo base64-svg-prefix))
[svg/svg-xml
(merge style/logo
{:xml (-> logo
(string/replace base64-svg-prefix "")
js/atob)})]
[rn/image
{:accessibility-label :logo
:source (if (string? logo)
{:uri logo}
logo)
:style style/logo
:resize-mode :cover}]))

(defn- content
[{:keys [title body]}]
Expand Down Expand Up @@ -50,6 +62,10 @@
[rn/view
{:accessibility-label :url-preview-loading
:style (merge (style/loading-container) container-style)}
[icon/icon :i/loading
{:size 12
:color (colors/theme-colors colors/neutral-50 colors/neutral-40)
:container-style {:margin-right 8}}]
[rn/text
{:size :paragraph-2
:weight :medium
Expand All @@ -60,6 +76,9 @@
{:accessibility-label :url-preview
:style (merge (style/container) container-style)}
(when logo
[logo-comp {:logo logo}])
[logo-comp
{:logo (if (map? logo)
(:data-uri logo)
logo)}])
[content {:title title :body body}]
[clear-button {:on-press on-clear}]]))
5 changes: 3 additions & 2 deletions src/quo/components/links/url_preview_list/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
[rn/view {:style style/url-preview-separator}])

(defn- item-component
[{:keys [title body loading? logo]} _ _
[{:keys [title body loading? logo url]} _ _
{:keys [width on-clear loading-message container-style]}]
[url-preview/view
{:logo logo
Expand All @@ -41,7 +41,8 @@
:loading? loading?
:loading-message loading-message
:on-clear on-clear
:container-style (merge container-style {:width width})}])
:container-style (merge container-style {:width width})
:url url}])

(defn- f-view
[]
Expand Down
2 changes: 1 addition & 1 deletion src/status_im/common/biometric/events_test.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
(ns status-im.common.biometric.events-test
(:require [cljs.test :refer [deftest testing is]]
(:require [cljs.test :refer [deftest is testing]]
matcher-combinators.test
[status-im.common.biometric.events :as sut]
[status-im.constants :as constants]
Expand Down
2 changes: 2 additions & 0 deletions src/status_im/constants.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -467,3 +467,5 @@
(def ^:const bridge-name-erc-721-transfer "ERC721Transfer")

(def ^:const alert-banner-height 40)

(def ^:const status-hostname "status.app")
Loading

0 comments on commit 2009199

Please sign in to comment.