Skip to content

Commit

Permalink
Refactor image server uri helpers (#19271)
Browse files Browse the repository at this point in the history 
* tweak: refactor image-uri helpers

* fix: add `:primary` as customization color for profile images

primary is being used as the default color for accounts that were migrated without customization color to a default color
  • Loading branch information
@seanstrom
seanstrom authored May 9, 2024
1 parent 7f40f41 commit 3e5d758
Show file tree
Hide file tree
Showing 6 changed files with 174 additions and 186 deletions.
9 changes: 6 additions & 3 deletions src/legacy/status_im/ui/components/chat_icon/screen.cljs
View file
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
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
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
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
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

0 comments on commit 3e5d758

Please sign in to comment.