status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Measuring the proper sizes of images in chat (#15675) 

* Measuring the proper sizes of images

* Style fix
This commit is contained in:
Alexander 2023-04-18 16:56:47 +02:00 committed by GitHub
parent 4fefa629fc
commit a0f2481406
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 48 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/status_im2/contexts/chat/messages/link_preview/view.cljs
View File

@ -89,45 +89,54 @@
(defn link-preview-loader (defn link-preview-loader
[link _] [link _]
(reagent/create-class (let [measured-width (reagent/atom 0)
{:component-did-mount measured-height (reagent/atom 0)]
(fn [] (reagent/create-class
(rf/dispatch [:chat.ui/load-link-preview-data link])) {:component-did-mount
:component-did-update (fn []
(fn [this [_ previous-props]] (rf/dispatch [:chat.ui/load-link-preview-data link]))
(let [[_ props] (.-argv (.-props ^js this)) :component-did-update
refresh-photo? (not= previous-props props)] (fn [this [_ previous-props]]
(when refresh-photo? (let [[_ props] (.-argv (.-props ^js this))
(rf/dispatch [:chat.ui/load-link-preview-data props])))) refresh-photo? (not= previous-props props)]
:reagent-render (when refresh-photo?
(fn [link {:keys [on-long-press]}] (rf/dispatch [:chat.ui/load-link-preview-data props]))))
(let [cached-preview-data (rf/sub [:link-preview/cache link])] :reagent-render
(when-let [{:keys [site title thumbnail-url error] :as preview-data} cached-preview-data] (fn [link {:keys [on-long-press]}]
(when (and (not error) site title) (let [cached-preview-data (rf/sub [:link-preview/cache link])]
[rn/touchable-opacity (when-let [{:keys [site title thumbnail-url error]} cached-preview-data]
{:style (when-not (is-gif? thumbnail-url) (when (and (not error) site title)
{:align-self :stretch}) [rn/touchable-opacity
:on-press #(when (security/safe-link? link) {:style (when-not (is-gif? thumbnail-url)
(rf/dispatch [:browser.ui/message-link-pressed link])) {:align-self :stretch})
:on-long-press on-long-press} :on-press #(when (security/safe-link? link)
[rn/view (style/wrapper) (rf/dispatch [:browser.ui/message-link-pressed link]))
(when-not (is-gif? thumbnail-url) :on-long-press on-long-press}
[:<> [rn/view (style/wrapper)
[rn/view (style/title-wrapper) (when-not (is-gif? thumbnail-url)
[rn/image {:style (style/title-site-image)}] [:<>
[rn/text {:style (style/title-text)} [rn/view (style/title-wrapper)
site]] [rn/image {:style (style/title-site-image)}]
[rn/text {:style (style/main-text)} [rn/text {:style (style/title-text)}
title] site]]
[rn/text {:style (style/extra-text)} [rn/text {:style (style/main-text)}
link]]) title]
(when-not (string/blank? thumbnail-url) [rn/text {:style (style/extra-text)}
[:<> link]])
[rn/view (style/separator)] (when-not (string/blank? thumbnail-url)
[fast-image/fast-image [:<>
{:source {:uri thumbnail-url} [rn/view (style/separator)]
:style (style/image (select-keys preview-data [:height :width])) [fast-image/fast-image
:accessibility-label :member-photo}]])]]))))})) {:source {:uri thumbnail-url}
:on-load (fn [e]
(let [{:keys [width height]} (js->clj (.-nativeEvent e)
:keywordize-keys
true)]
(reset! measured-width width)
(reset! measured-height height)))
:style (style/image {:width @measured-width
:height @measured-height})
:accessibility-label :member-photo}]])]]))))})))
(defn link-preview-enable-request (defn link-preview-enable-request
[] []