Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor image server uri helpers #19271

Merged
merged 2 commits into from
May 9, 2024
Merged

Refactor image server uri helpers #19271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4f2f6b6
tweak: refactor image-uri helpers
seanstrom Mar 14, 2024
baa23e5
fix: add `:primary` as customization color for profile images
seanstrom Apr 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/legacy/status_im/ui/components/chat_icon/screen.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
[re-frame.core :as re-frame.core]
[react-native.core :as rn]
[status-im.contexts.profile.utils :as profile.utils]
[utils.ens.core :as utils.ens]))
[utils.ens.core :as utils.ens]
[utils.image-server :as image-server]))

;;TODO REWORK THIS NAMESPACE

Expand Down Expand Up @@ -156,9 +157,11 @@
(styles/default-chat-icon-text size)
(styles/emoji-chat-icon-text size))}
override-styles)
photo-path (if (:fn photo-path)
img-config (:config photo-path)
photo-path (if img-config
;; temp support new media server avatar for old component
{:uri ((:fn photo-path)
{:uri (image-server/get-image-uri
img-config
{:size size
:full-name name
:font-size (get-in styles [:default-chat-icon-text :font-size])
Expand Down
28 changes: 15 additions & 13 deletions src/quo/components/avatars/user_avatar/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
[react-native.core :as rn]
[react-native.fast-image :as fast-image]
[schema.core :as schema]
[utils.image-server :as image-server]
utils.string))

(defn initials-avatar
Expand Down Expand Up @@ -38,32 +39,33 @@
online? true
ring? true}
:as props}]
(let [theme (quo.theme/use-theme)
full-name (or full-name "Your Name")
(let [theme (quo.theme/use-theme)
picture-config (:config profile-picture)
full-name (or full-name "Your Name")
;; image generated with `profile-picture-fn` is round cropped
;; no need to add border-radius for them
outer-styles (style/outer size (not (:fn profile-picture)))
outer-styles (style/outer size (not picture-config))
;; Once image is loaded, fast image re-renders view with the help of reagent atom,
;; But dynamic updates don't work when user-avatar is used inside hole-view
;; https://github.com/status-im/status-mobile/issues/15553
image-view (if static? no-flicker-image/image fast-image/fast-image)
font-size (get-in style/sizes [size :font-size])
amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)
sizes (get style/sizes size)
indicator-color (get (style/indicator-color theme) (if online? :online :offline))
profile-picture-fn (:fn profile-picture)]
image-view (if static? no-flicker-image/image fast-image/fast-image)
font-size (get-in style/sizes [size :font-size])
amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)
sizes (get style/sizes size)
indicator-color (get (style/indicator-color theme) (if online? :online :offline))]

[rn/view {:style outer-styles :accessibility-label :user-avatar}
(if (and full-name (not (or profile-picture-fn profile-picture)))
(if (and full-name (not (or picture-config profile-picture)))
;; this is for things that's not user-avatar but are currently using user-avatar to render
;; the initials e.g. community avatar
[initials-avatar props]
[image-view
{:accessibility-label :profile-picture
:style outer-styles
:source
(cond profile-picture-fn
{:uri (profile-picture-fn
(cond picture-config
{:uri (image-server/get-image-uri
picture-config
{:length amount-initials
:full-name full-name
:font-size (:font-size (text/text-style {:size
Expand All @@ -76,7 +78,7 @@
:indicator-center-to-edge (when status-indicator?
(:status-indicator-center-to-edge sizes))
:indicator-color indicator-color
:override-theme theme
:theme theme
:color (:color style/initials-avatar-text)
:size (:width outer-styles)
:ring? ring?
Expand Down
61 changes: 54 additions & 7 deletions src/schema/quo.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,77 @@
[quo.foundations.colors :as colors]
[schema.registry :as registry]))

(def ^:private ?profile-picture-fn-params
(def ^:private ?customization-color (into [:enum :primary] colors/account-colors))

(def ^:private ?profile-picture-options
[:map
[:length :int]
[:full-name :string]
[:font-size :int]
[:indicator-size {:optional true} [:maybe :int]]
[:indicator-color {:optional true} [:maybe :string]]
[:indicator-center-to-edge {:optional true} [:maybe :int]]
[:override-theme :schema.common/theme]
[:background-color :string]
[:theme :schema.common/theme]
[:color :string]
[:size :int]
[:ring? :boolean]
[:ring-width :int]])

(def ^:private ?account-image-uri-options
[:map
[:port :int]
[:ratio :double]
[:key-uid :string]
[:image-name :string]
[:theme :schema.common/theme]
[:override-ring? [:maybe :boolean]]])

(def ^:private ?initials-image-uri-options
[:map
[:port :int]
[:ratio :double]
[:uppercase-ratio :double]
[:font-file :string]
[:theme :schema.common/theme]
[:customization-color ?customization-color]
[:key-uid {:optional true} [:maybe :string]]
[:public-key {:optional true} [:maybe :string]]
[:override-ring? {:optional true} [:maybe :boolean]]])

(def ^:private ?contact-image-uri-options
[:map
[:port :int]
[:clock :int]
[:ratio :double]
[:image-name :string]
[:public-key :string]
[:theme :schema.common/theme]
[:override-ring? [:maybe :boolean]]])

(def ^:private ?image-uri-config
[:multi {:dispatch :type}
[:account
[:map
[:type [:= :account]]
[:options ?account-image-uri-options]]]
[:contact
[:map
[:type [:= :contact]]
[:options ?contact-image-uri-options]]]
[:initials
[:map
[:type [:= :initials]]
[:options ?initials-image-uri-options]]]])

(def ^:private ?profile-picture-source
[:or
:schema.common/image-source
[:map
[:fn [:=> [:cat ?profile-picture-fn-params] :string]]]])

(def ^:private ?customization-color (into [:enum] colors/account-colors))
[:config ?image-uri-config]]])

(defn register-schemas
[]
(registry/register ::customization-color ?customization-color)
(registry/register ::image-uri-config ?image-uri-config)
(registry/register ::profile-picture-source ?profile-picture-source)
(registry/register ::customization-color ?customization-color))
(registry/register ::profile-picture-options ?profile-picture-options))
56 changes: 29 additions & 27 deletions src/status_im/subs/contact.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@
[status-im.subs.chat.utils :as chat.utils]
[utils.address :as address]
[utils.collection]
[utils.i18n :as i18n]
[utils.image-server :as image-server]))
[utils.i18n :as i18n]))

(defn query-chat-contacts
[{:keys [contacts]} all-contacts query-fn]
Expand Down Expand Up @@ -45,37 +44,40 @@
(reduce (fn [acc image]
(let [image-name (:type image)
clock (:clock image)
uri (image-server/get-contact-image-uri-fn
{:port port
:ratio pixel-ratio/ratio
:public-key
public-key
:image-name
image-name
; We pass the clock so that we reload the
; image if the image is updated
:clock
clock
:theme
theme
:override-ring?
(when ens-name false)})]
(assoc-in acc [(keyword image-name) :fn] uri)))
options {:port port
:ratio pixel-ratio/ratio
:public-key
public-key
:image-name
image-name
; We pass the clock so that we reload the
; image if the image is updated
:clock
clock
:theme
theme
:override-ring?
(when ens-name false)}]
(assoc-in acc
[(keyword image-name) :config]
{:type :contact
:options options})))
images
(vals images))

images (if (seq images)
images
{:thumbnail
{:fn (image-server/get-initials-avatar-uri-fn
{:port port
:ratio pixel-ratio/ratio
:public-key public-key
:override-ring? (when ens-name false)
:uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf)
:customization-color customization-color
:theme theme
:font-file font-file})}})]
{:config {:type :initials
:options {:port port
:ratio pixel-ratio/ratio
:public-key public-key
:override-ring? (when ens-name false)
:uppercase-ratio (:uppercase-ratio
constants/initials-avatar-font-conf)
:customization-color customization-color
:theme theme
:font-file font-file}}}})]

(assoc contact :images images)))

Expand Down
76 changes: 39 additions & 37 deletions src/status_im/subs/profile.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
[status-im.common.pixel-ratio :as pixel-ratio]
[status-im.constants :as constants]
[status-im.contexts.profile.utils :as profile.utils]
[utils.image-server :as image-server]
[utils.security.core :as security]))

(re-frame/reg-sub
Expand Down Expand Up @@ -43,23 +42,24 @@
image-name (-> images first :type)
override-ring? (when ens-name? false)]
(when profile
{:fn
{:config
(if image-name
(image-server/get-account-image-uri-fn {:port port
:ratio pixel-ratio/ratio
:image-name image-name
:key-uid target-key-uid
:theme theme
:override-ring? override-ring?})
(image-server/get-initials-avatar-uri-fn
{:port port
:ratio pixel-ratio/ratio
:key-uid target-key-uid
:theme theme
:uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf)
:customization-color customization-color
:override-ring? override-ring?
:font-file font-file}))}))))
{:type :account
:options {:port port
:ratio pixel-ratio/ratio
:image-name image-name
:key-uid target-key-uid
:theme theme
:override-ring? override-ring?}}
{:type :initials
:options {:port port
:ratio pixel-ratio/ratio
:key-uid target-key-uid
:theme theme
:uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf)
:customization-color customization-color
:override-ring? override-ring?
:font-file font-file}})}))))

;; DEPRECATED
;; use `:profile/public-key` instead
Expand Down Expand Up @@ -244,29 +244,31 @@
ens-name? (or ens-name? (seq ens-names))
avatar-opts (assoc avatar-opts :override-ring? (when ens-name? false))
images-with-uri (mapv (fn [{key-uid :keyUid image-name :type :as image}]
(let [uri-fn (image-server/get-account-image-uri-fn
(merge
{:port port
:ratio pixel-ratio/ratio
:image-name image-name
:key-uid key-uid
:theme theme}
avatar-opts))]
(assoc image :fn uri-fn)))
(assoc image
:config
{:type :account
:options (merge
{:port port
:ratio pixel-ratio/ratio
:image-name image-name
:key-uid key-uid
:theme theme}
avatar-opts)}))
images)
new-images (if (seq images-with-uri)
images-with-uri
[{:fn (image-server/get-initials-avatar-uri-fn
(merge {:port port
:ratio pixel-ratio/ratio
:uppercase-ratio
(:uppercase-ratio
constants/initials-avatar-font-conf)
:key-uid key-uid
:customization-color customization-color
:theme theme
:font-file font-file}
avatar-opts))}])]
[{:config {:type :initials
:options (merge
{:port port
:ratio pixel-ratio/ratio
:uppercase-ratio
(:uppercase-ratio
constants/initials-avatar-font-conf)
:key-uid key-uid
:customization-color customization-color
:theme theme
:font-file font-file}
avatar-opts)}}])]
(assoc profile :images new-images)))

(re-frame/reg-sub
Expand Down
Loading