Add "Change Avatar" button to account settings #1770

pinarol · 2024-05-17T14:00:35Z

Fixes # gravatarp2 -> 2024/06/10/pt-integrating-gravatar-into-pocket-casts

Adding the ability to change the avatar. Avatar is coming from user's Gravatar account. So the "Change Avatar" button opens the Gravatar web link via in-app Safari.

To test

Profile > Account > "Change Avatar"
Observe: In app Safari is presented

Inside the browser, if you are not logged in you should see the login first, then you'll be redirected to avatar update page.
The avatar change does not always get reflected to the app immediately even though we force refresh the avatar on the mobile side skipping all client-side caches. This is a known limitation. There's a backend cache too and it's not updated immediately. The plan is to show such a message inside the browser:

If you are not logged in to the app then "Change Avatar" button will not be present for you.

Known issue:

A strange auto-zoom happens when testing in a Simulator but this issue is not reproduced in real device. But let me know if you can reproduce this in a real device.

Checklist

I have considered if this change warrants user-facing release notes and have added them to CHANGELOG.md if necessary.
I have considered adding unit tests for my changes.
I have updated (or requested that someone edit) the spreadsheet to reflect any new or changed analytics.

CLAassistant · 2024-05-17T14:00:49Z

All committers have signed the CLA.

CookieyedCodes · 2024-05-19T08:36:31Z

Wouldn't it make more sence to just tap the icon?

pinarol · 2024-05-20T08:26:01Z

Wouldn't it make more sence to just tap the icon?

I think this is an experimental feature that's why, it's not a fully native experience to begin with. We just open a browser to change the avatar. But it's a fair question. cc @Luchadores and @david-gonzalez-a8c if you want to add anything.

Luchadores · 2024-05-20T09:23:27Z

I think we can try it, not sure if there's any other trigger that Pocket Casts already has on the Avatar itself. If not, we can do it, and see if users tap more directly the Avatar itself.

pinarol · 2024-07-02T12:55:47Z

We did some discussions and for now we'll move fwd with the "Change Avatar" button.

leandroalonso

@pinarol from the code side, all looks good. The only thing missing is updating the CHANGELOG.

I have a few questions/suggestions though. I understand that many of them are out of the scope of this task — and it involves changes in web/design. My main goal is just to make the experience as good as possible:

The email field has autocomplete and autocorrect on. I think we might want to disable those as it kinda keeps suggesting changes to email:

Do we need to enter the email? We already have this information, in theory, we could be directly redirected to the code phase, without requiring the user to type any info. This will likely reduce friction.
Not a big deal, but the icon feels a bit different from the rest to me. The border seems slightly thinner and the inside normally has a more subtle blue.

I felt an "avatar changed" confirmation is missing (either on the webpage or in the app). After cropping the image, there's no success message. I wonder if for any new user, this will confuse them as to whether they changed the avatar or not.

I don't think any of those comments are blockers but if we tackle them the experience will be smooth IMHO. Anyway, the only blocker is updating the CHANGELOG.

leandroalonso · 2024-07-02T14:41:13Z

podcasts/AccountViewController+TableView.swift

+                  let safariViewController = GravatarSafariViewController(destination: .avatarUpdate(email: email)) else { return }
+            safariViewController.modalPresentationStyle = .automatic
+            present(safariViewController, animated: true)
+            Analytics.track(.accountDetailsChangeAvatar)


We need to update this spreadsheet when adding new events. I went ahead and created the entry for this one.

Thank you! 🙇

pinarol · 2024-07-02T15:26:47Z

I'll fwd these feedbacks to @wellyshen @aaronfc

The email field has autocomplete and autocorrect on. I think we might want to disable those as it kinda keeps suggesting changes to email:

I agree, it would be better if those are disabled.

I felt an "avatar changed" confirmation is missing (either on the webpage or in the app). After cropping the image, there's no success message. I wonder if for any new user, this will confuse them as to whether they changed the avatar or not.

I think the confirmation is there but its position isn't right so it's not easily viewable to user. Seems like a bug.

issues created: https://github.a8c.com/Automattic/gravatar/issues/108240 https://github.a8c.com/Automattic/gravatar/issues/108241

pinarol · 2024-07-02T15:42:24Z

Do we need to enter the email? We already have this information, in theory, we could be directly redirected to the code phase, without requiring the user to type any info. This will likely reduce friction.

Unfortunately, we need the user to enter their email for now. In Gravatar, users can define multiple avatars for multiple emails under one account. But they can log in to Gravatar only with their primary email. If the user is using one of those secondary emails in Pocket Casts, then pre-filling the field would be misleading because the login attempt would fail. But there's an ongoing project to update the login flow to allow logins by secondary emails. After that the pre-filling can also be an option I think.

pinarol · 2024-07-02T15:57:16Z

Not a big deal, but the icon feels a bit different from the rest to me. The border seems slightly thinner and the inside normally has a more subtle blue.

cc: @Luchadores this is a feedback about the new change avatar icon.

pinarol · 2024-07-03T07:37:24Z

Icon updated:

aaronfc · 2024-07-03T08:44:27Z

Unfortunately, we need the user to enter their email for now. In Gravatar, users can define multiple avatars for multiple emails under one account. But they can log in to Gravatar only with their primary email. If the user is using one of those secondary emails in Pocket Casts, then pre-filling the field would be misleading because the login attempt would fail. But there's an ongoing project to update the login flow to allow logins by secondary emails. After that the pre-filling can also be an option I think.

Hey, sorry to jump in. But this is not accurate. You can (and you should) pass the ?email= query parameter to the URL. The login process already handles secondary emails (just released) (p8Slzc-2NM-p2), and as soon as Quick Editor project (p8Slzc-3i1-p2) is done it will also redirect to the correct avatars page.

The correct URL, I believe, should be https://gravatar.com/profile?is_quick_editor=true&email=xxxx&scope=avatars (once the Quick Editor project is done). cc/ @wellyshen @jcheringer

pinarol · 2024-07-19T12:29:44Z

I am applying the new icon. Does it look ok @david-gonzalez-a8c ?

sharing the developer view also, the size differences are related with inner insets of the icons:

Luchadores · 2024-07-19T12:59:55Z

Hey Pinar, before David replies, that looks nice, but we don't have the different hues in the icon like the rest. Sync with @etoledom, I believe he solved that last time.

Attached is a screenshot of the previous icon we used, but you can see the difference as it plays on the blue opacity color.

hamorillo · 2024-07-19T13:08:41Z

Hey Pinar, before David replies, that looks nice, but we don't have the different hues in the icon like the rest. Sync with @etoledom, I believe he solved that last time.

That's because the icon from the library doesn't have different opacities as other icons have (for example). I've just updated the icon in the Android PR, but let me know if you should use another one.

pinarol · 2024-07-19T13:14:38Z

@hamorillo is right. For that effect to happen the icon should have different opacities in it. @david-gonzalez-a8c could you check the icon and share an updated version if you think it doesn't look right #1770 (comment) ?

pinarol · 2024-07-19T13:19:29Z

Apart from the icon, this is ready for another look. @leandroalonso @danielebogo

pinarol · 2024-07-19T13:23:27Z

Modules/Utils/Sources/PocketCastsUtils/Feature Flags/FeatureFlag.swift

@@ -170,6 +175,8 @@ public enum FeatureFlag: String, CaseIterable {
            "default_player_filter_callback_fix"
        case .upNextOnTabBar:
            "up_next_on_tab_bar"
+        case .gravatarChangeAvatar:
+            "gravatar_change_avatar"


Let me know if this is the right thing to do to make the FF controllable remotely.

Nit: In theory if the value doesn't change, you don't need to specify the lower snake case as it will be automatically converted below by rawValue.lowerSnakeCased()

pinarol · 2024-07-19T13:23:54Z

Modules/Utils/Sources/PocketCastsUtils/Feature Flags/FeatureFlag.swift

@@ -139,6 +142,8 @@ public enum FeatureFlag: String, CaseIterable {
            false
        case .transcripts:
            false
+        case .gravatarChangeAvatar:
+            true


I made it true by default, let me know if you think it needs to be false.

@bjtitus correct me if I'm wrong, but in theory we can switch off a FF if the default value is true right?

Yes, that's right. This value is just used to set the initial value so that it's enabled or disabled prior to connecting to Firebase. We also tend to leave this value false while testing until we are mostly sure we want to release in whichever version this is going into.

Luchadores · 2024-07-19T13:34:37Z

👋 I recreated that specific icon with transparency. Attached is an SVG, and PNGs (1x, 2x, 3x). Hope it helps 🤞
@pinarol, @hamorillo. @david-gonzalez-a8c, hope it's the right icon :D

ProfileIcon.zip

pinarol · 2024-07-19T13:47:25Z

I recreated that specific icon with transparency.

Okay I've used them. This is how it looks now:

danielebogo

Hey @pinarol I tested the feature and it worked for me. Also the avatar changed pretty fast after the vc has been dismissed. I left one comment and a question to @bjtitus about the FF.

danielebogo · 2024-07-22T11:14:46Z

Modules/Utils/Sources/PocketCastsUtils/Feature Flags/FeatureFlag.swift

@@ -170,6 +175,8 @@ public enum FeatureFlag: String, CaseIterable {
            "default_player_filter_callback_fix"
        case .upNextOnTabBar:
            "up_next_on_tab_bar"
+        case .gravatarChangeAvatar:
+            "gravatar_change_avatar"


Nit: In theory if the value doesn't change, you don't need to specify the lower snake case as it will be automatically converted below by rawValue.lowerSnakeCased()

danielebogo · 2024-07-22T12:27:46Z

Modules/Utils/Sources/PocketCastsUtils/Feature Flags/FeatureFlag.swift

@@ -139,6 +142,8 @@ public enum FeatureFlag: String, CaseIterable {
            false
        case .transcripts:
            false
+        case .gravatarChangeAvatar:
+            true


@bjtitus correct me if I'm wrong, but in theory we can switch off a FF if the default value is true right?

pinarol · 2024-07-22T13:01:11Z

Also the avatar changed pretty fast after the vc has been dismissed

Yes that's the case now since we introduced a kind of cache buster parameter with this commit. 04d8c08.

CHANGELOG.md

Co-authored-by: Brandon Titus <[email protected]>

pinarol · 2024-07-23T07:15:03Z

I think we are ready to merge. 🎉 Thank you all for your help and feedback. 🙇

pinarol · 2024-07-23T07:31:52Z

We need 👍 from @leandroalonso as well.

pinarol added the In progress label May 17, 2024

pinarol force-pushed the wppinar/add-AvatarChange-button branch from eec048c to 7f05c4d Compare June 10, 2024 11:33

pinarol and others added 5 commits July 2, 2024 13:57

Add "Change Avatar" button to account settings

9b14d1e

Track accountDetailsChangeAvatar

ae221a1

Add GravatarSafariViewController

f37522b

Force refresh profile image when browser is closed

25dd8e9

Show toast

508531f

pinarol force-pushed the wppinar/add-AvatarChange-button branch 2 times, most recently from 7eebc46 to 43aeef4 Compare July 2, 2024 12:25

Fix warning

7d8b730

pinarol force-pushed the wppinar/add-AvatarChange-button branch from 43aeef4 to 7d8b730 Compare July 2, 2024 12:34

pinarol marked this pull request as ready for review July 2, 2024 12:58

pinarol requested a review from a team as a code owner July 2, 2024 12:58

pinarol requested review from leandroalonso and removed request for a team July 2, 2024 12:58

pinarol self-assigned this Jul 2, 2024

pinarol requested a review from etoledom July 2, 2024 13:00

leandroalonso requested changes Jul 2, 2024

View reviewed changes

Update icon

5d965c0

Update URL

f1d68c2

pinarol added 2 commits July 19, 2024 16:03

Update the icon

5f21187

Add "gravatar_change_avatar" feature flag

60c26d8

pinarol commented Jul 19, 2024

View reviewed changes

Update with multi opacity icon

dd86b66

pinarol modified the milestones: 7.69, 7.70 Jul 19, 2024

pinarol added 2 commits July 19, 2024 17:52

Add changelog

22fa5a3

Merge branch 'trunk' into wppinar/add-AvatarChange-button

62842e2

danielebogo approved these changes Jul 22, 2024

View reviewed changes

pinarol added 2 commits July 22, 2024 18:21

Merge branch 'trunk' into wppinar/add-AvatarChange-button

9bad2d0

Use `rawValue.lowerSnakeCased() instead

0f3f56f

bjtitus reviewed Jul 22, 2024

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

Update CHANGELOG.md

415422b

Co-authored-by: Brandon Titus <[email protected]>

pinarol requested a review from leandroalonso July 23, 2024 07:15

Merge branch 'trunk' into wppinar/add-AvatarChange-button

b9e2271

leandroalonso approved these changes Jul 23, 2024

View reviewed changes

pinarol merged commit 4df9302 into trunk Jul 23, 2024
4 of 6 checks passed

pinarol deleted the wppinar/add-AvatarChange-button branch July 23, 2024 11:10

andrewdmontgomery mentioned this pull request Sep 16, 2024

Properly encode literal + characters in URLQueryItems Automattic/Gravatar-SDK-iOS#409

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add "Change Avatar" button to account settings #1770

Add "Change Avatar" button to account settings #1770

pinarol commented May 17, 2024 •

edited

Loading

CLAassistant commented May 17, 2024 •

edited

Loading

CookieyedCodes commented May 19, 2024

pinarol commented May 20, 2024 •

edited

Loading

Luchadores commented May 20, 2024

pinarol commented Jul 2, 2024

leandroalonso left a comment

leandroalonso Jul 2, 2024

pinarol Jul 2, 2024

pinarol commented Jul 2, 2024 •

edited

Loading

pinarol commented Jul 2, 2024 •

edited

Loading

pinarol commented Jul 2, 2024

pinarol commented Jul 3, 2024 •

edited

Loading

aaronfc commented Jul 3, 2024 •

edited

Loading

pinarol commented Jul 19, 2024

Luchadores commented Jul 19, 2024

hamorillo commented Jul 19, 2024

pinarol commented Jul 19, 2024

pinarol commented Jul 19, 2024

pinarol Jul 19, 2024

danielebogo Jul 22, 2024

pinarol Jul 19, 2024

danielebogo Jul 22, 2024

bjtitus Jul 22, 2024

Luchadores commented Jul 19, 2024 •

edited

Loading

pinarol commented Jul 19, 2024

danielebogo left a comment

danielebogo Jul 22, 2024

danielebogo Jul 22, 2024

pinarol commented Jul 22, 2024

pinarol commented Jul 23, 2024

pinarol commented Jul 23, 2024

Add "Change Avatar" button to account settings #1770

Add "Change Avatar" button to account settings #1770

Conversation

pinarol commented May 17, 2024 • edited Loading

To test

Checklist

CLAassistant commented May 17, 2024 • edited Loading

CookieyedCodes commented May 19, 2024

pinarol commented May 20, 2024 • edited Loading

Luchadores commented May 20, 2024

pinarol commented Jul 2, 2024

leandroalonso left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pinarol commented Jul 2, 2024 • edited Loading

pinarol commented Jul 2, 2024 • edited Loading

pinarol commented Jul 2, 2024

pinarol commented Jul 3, 2024 • edited Loading

aaronfc commented Jul 3, 2024 • edited Loading

pinarol commented Jul 19, 2024

Luchadores commented Jul 19, 2024

hamorillo commented Jul 19, 2024

pinarol commented Jul 19, 2024

pinarol commented Jul 19, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Luchadores commented Jul 19, 2024 • edited Loading

pinarol commented Jul 19, 2024

danielebogo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pinarol commented Jul 22, 2024

pinarol commented Jul 23, 2024

pinarol commented Jul 23, 2024

pinarol commented May 17, 2024 •

edited

Loading

CLAassistant commented May 17, 2024 •

edited

Loading

pinarol commented May 20, 2024 •

edited

Loading

pinarol commented Jul 2, 2024 •

edited

Loading

pinarol commented Jul 2, 2024 •

edited

Loading

pinarol commented Jul 3, 2024 •

edited

Loading

aaronfc commented Jul 3, 2024 •

edited

Loading

Luchadores commented Jul 19, 2024 •

edited

Loading