diff --git a/src/legacy/status_im/ui/components/chat_icon/screen.cljs b/src/legacy/status_im/ui/components/chat_icon/screen.cljs index b19d3e2fc93..d053164c080 100644 --- a/src/legacy/status_im/ui/components/chat_icon/screen.cljs +++ b/src/legacy/status_im/ui/components/chat_icon/screen.cljs @@ -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 @@ -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]) diff --git a/src/quo/components/avatars/user_avatar/view.cljs b/src/quo/components/avatars/user_avatar/view.cljs index fa93e06ab85..7d7b4437006 100644 --- a/src/quo/components/avatars/user_avatar/view.cljs +++ b/src/quo/components/avatars/user_avatar/view.cljs @@ -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 @@ -38,23 +39,23 @@ 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] @@ -62,8 +63,9 @@ {: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 @@ -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? diff --git a/src/schema/quo.cljs b/src/schema/quo.cljs index 9a7b93ec250..a6cb76f1484 100644 --- a/src/schema/quo.cljs +++ b/src/schema/quo.cljs @@ -3,7 +3,9 @@ [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] @@ -11,22 +13,67 @@ [: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)) diff --git a/src/status_im/subs/contact.cljs b/src/status_im/subs/contact.cljs index d5ef2550125..20fd37b36d1 100644 --- a/src/status_im/subs/contact.cljs +++ b/src/status_im/subs/contact.cljs @@ -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] @@ -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))) diff --git a/src/status_im/subs/profile.cljs b/src/status_im/subs/profile.cljs index 1f38431fd22..316e1a8de61 100644 --- a/src/status_im/subs/profile.cljs +++ b/src/status_im/subs/profile.cljs @@ -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 @@ -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 @@ -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 diff --git a/src/utils/image_server.cljs b/src/utils/image_server.cljs index 834933087a0..a1f24f53a11 100644 --- a/src/utils/image_server.cljs +++ b/src/utils/image_server.cljs @@ -4,6 +4,7 @@ [react-native.fs :as utils.fs] [react-native.platform :as platform] [schema.core :as schema] + [schema.quo] [utils.datetime :as datetime])) (def ^:const image-server-uri-prefix "https://localhost:") @@ -54,8 +55,7 @@ 4)) (defn get-account-image-uri - "fn to get the avatar uri when multiaccount has custom image set - not directly called, check `get-account-image-uri-fn` + "fn to get the avatar uri when multiaccount has custom image set. color formats (for all color options): #RRGGBB @@ -67,7 +67,8 @@ placeholder-avatar: pass image file path as `image-name` `indicator-size` is outer indicator radius - `indicator-size` - `indicator-border` is inner indicator radius" + `indicator-size` - `indicator-border` is inner indicator radius + `ring?` shows or hides ring for account with ens name" [{:keys [port public-key image-name key-uid size theme indicator-size indicator-border indicator-center-to-edge indicator-color ring? ring-width ratio]}] @@ -100,38 +101,8 @@ "&ringWidth=" (* ring-width ratio))) -(defn get-account-image-uri-fn - "pass the result fn to user-avatar component as `:profile-picture` - - use this fn in subs to set multiaccount `:images` as [{:fn ...}] - pass the image to user-avatar - user-avatar can fill the rest style related options - - set `override-ring?` to a non-nil value to override `ring?`, mainly used to - hide ring for account with ens name - - check `get-account-image-uri` for color formats" - [{:keys [port public-key key-uid image-name theme override-ring? ratio]}] - (fn [{:keys [size indicator-size indicator-border indicator-center-to-edge - indicator-color ring? ring-width override-theme]}] - (get-account-image-uri - {:port port - :image-name image-name - :size size - :public-key public-key - :ratio ratio - :key-uid key-uid - :theme (if (nil? override-theme) theme override-theme) - :indicator-size indicator-size - :indicator-border indicator-border - :indicator-center-to-edge indicator-center-to-edge - :indicator-color indicator-color - :ring? (if (nil? override-ring?) ring? override-ring?) - :ring-width ring-width}))) - (defn get-initials-avatar-uri "fn to get the avatar uri when account/contact/placeholder has no custom pic set - not directly called, check `get-account-initials-uri-fn` multiaccount: at least one of `key-uid`, `public-key` is required to render the ring contact: `public-key` is required to render the ring @@ -139,6 +110,7 @@ check `get-account-image-uri` for color formats check `get-font-file-ready` for `font-file` + `ring?` shows or hides ring for account with ens name `uppercase-ratio` is the uppercase-height/line-height for `font-file`" [{:keys [port public-key key-uid theme ring? length size customization-color color font-size font-file uppercase-ratio indicator-size @@ -185,56 +157,13 @@ "&ringWidth=" (* ring-width ratio))) -(schema/=> get-initials-avatar-uri - [:=> - [:cat - [:map - [:theme :schema.common/theme] - [:color string?] - [:background-color {:optional true} [:maybe string?]] - [:size number?] - [:ratio float?] - [:uppercase-ratio number?] - [:customization-color :schema.common/customization-color] - [:font-size number?] - [:font-file string?]]] - [:string]]) - -(defn get-initials-avatar-uri-fn - "return a fn that calls `get-account-initials-uri` - pass the fn to user-avatar component to fill the style related options - - check `get-account-image-uri` for color formats +(defn get-contact-image-uri + "check `get-account-image-uri` for color formats check `get-font-file-ready` for `font-file` - check `get-account-image-uri-fn` for `override-ring?`" - [{:keys [port public-key key-uid theme override-ring? font-file ratio - uppercase-ratio customization-color]}] - (fn [{:keys [full-name length size font-size color indicator-size indicator-border - indicator-color indicator-center-to-edge ring? ring-width - override-theme]}] - (get-initials-avatar-uri - {:port port - :public-key public-key - :ratio ratio - :key-uid key-uid - :full-name full-name - :length length - :size size - :customization-color customization-color - :theme (if (nil? override-theme) theme override-theme) - :ring? (if (nil? override-ring?) ring? override-ring?) - :ring-width ring-width - :font-size font-size - :color color - :font-file font-file - :uppercase-ratio uppercase-ratio - :indicator-size indicator-size - :indicator-border indicator-border - :indicator-center-to-edge indicator-center-to-edge - :indicator-color indicator-color}))) - -(defn get-contact-image-uri + `public-key` is required to render the ring + `ring?` shows or hides ring for account with ens name + `uppercase-ratio` is the uppercase-height/line-height for `font-file`" [{:keys [port public-key image-name clock theme indicator-size indicator-border indicator-center-to-edge indicator-color size ring? ring-width ratio]}] (str @@ -264,24 +193,6 @@ "&ringWidth=" (* ring-width ratio))) -(defn get-contact-image-uri-fn - [{:keys [port public-key image-name theme override-ring? clock ratio]}] - (fn [{:keys [size indicator-size indicator-border indicator-center-to-edge - indicator-color ring? ring-width override-theme]}] - (get-contact-image-uri {:port port - :ratio ratio - :image-name image-name - :public-key public-key - :size size - :theme (if (nil? override-theme) theme override-theme) - :clock clock - :indicator-size indicator-size - :indicator-border indicator-border - :indicator-center-to-edge indicator-center-to-edge - :indicator-color indicator-color - :ring? (if (nil? override-ring?) ring? override-ring?) - :ring-width ring-width}))) - (defn get-qr-image-uri-for-any-url [{:keys [url port qr-size error-level]}] (let [qr-url-base64 (js/btoa url) @@ -299,3 +210,24 @@ "&size=" qr-size)] media-server-url)) + +(defn get-image-uri + [{:keys [type options]} + profile-picture-options] + ((case type + :account get-account-image-uri + :contact get-contact-image-uri + :initials get-initials-avatar-uri + str) + (-> (merge options profile-picture-options) + (assoc :ring? + (if (nil? (:override-ring? options)) + (:ring? profile-picture-options) + (:override-ring? options)))))) + +(schema/=> get-image-uri + [:=> + [:cat + :schema.quo/image-uri-config + :schema.quo/profile-picture-options] + :string])