status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.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
[link _]
(reagent/create-class
{:component-did-mount
(fn []
(rf/dispatch [:chat.ui/load-link-preview-data link]))
:component-did-update
(fn [this [_ previous-props]]
(let [[_ props] (.-argv (.-props ^js this))
refresh-photo? (not= previous-props props)]
(when refresh-photo?
(rf/dispatch [:chat.ui/load-link-preview-data props]))))
:reagent-render
(fn [link {:keys [on-long-press]}]
(let [cached-preview-data (rf/sub [:link-preview/cache link])]
(when-let [{:keys [site title thumbnail-url error] :as preview-data} cached-preview-data]
(when (and (not error) site title)
[rn/touchable-opacity
{:style (when-not (is-gif? thumbnail-url)
{:align-self :stretch})
:on-press #(when (security/safe-link? link)
(rf/dispatch [:browser.ui/message-link-pressed link]))
:on-long-press on-long-press}
[rn/view (style/wrapper)
(when-not (is-gif? thumbnail-url)
[:<>
[rn/view (style/title-wrapper)
[rn/image {:style (style/title-site-image)}]
[rn/text {:style (style/title-text)}
site]]
[rn/text {:style (style/main-text)}
title]
[rn/text {:style (style/extra-text)}
link]])
(when-not (string/blank? thumbnail-url)
[:<>
[rn/view (style/separator)]
[fast-image/fast-image
{:source {:uri thumbnail-url}
:style (style/image (select-keys preview-data [:height :width]))
:accessibility-label :member-photo}]])]]))))}))
(let [measured-width (reagent/atom 0)
measured-height (reagent/atom 0)]
(reagent/create-class
{:component-did-mount
(fn []
(rf/dispatch [:chat.ui/load-link-preview-data link]))
:component-did-update
(fn [this [_ previous-props]]
(let [[_ props] (.-argv (.-props ^js this))
refresh-photo? (not= previous-props props)]
(when refresh-photo?
(rf/dispatch [:chat.ui/load-link-preview-data props]))))
:reagent-render
(fn [link {:keys [on-long-press]}]
(let [cached-preview-data (rf/sub [:link-preview/cache link])]
(when-let [{:keys [site title thumbnail-url error]} cached-preview-data]
(when (and (not error) site title)
[rn/touchable-opacity
{:style (when-not (is-gif? thumbnail-url)
{:align-self :stretch})
:on-press #(when (security/safe-link? link)
(rf/dispatch [:browser.ui/message-link-pressed link]))
:on-long-press on-long-press}
[rn/view (style/wrapper)
(when-not (is-gif? thumbnail-url)
[:<>
[rn/view (style/title-wrapper)
[rn/image {:style (style/title-site-image)}]
[rn/text {:style (style/title-text)}
site]]
[rn/text {:style (style/main-text)}
title]
[rn/text {:style (style/extra-text)}
link]])
(when-not (string/blank? thumbnail-url)
[:<>
[rn/view (style/separator)]
[fast-image/fast-image
{: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
[]