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.

dangermattic · 2024-05-17T14:01:06Z

	1 Warning
⚠️	PR is not assigned to a milestone.

Generated by 🚫 Danger

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-03T12:09:30Z

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)

Okay just to avoid causing our Pocket Casts friends misunderstand the situation. Logging in with a secondary email flow was deployed just yesterday.

And the URL that enables us to pass the email is not completely ready yet, although it seems close to being ready. So I'll wait for it instead of opening a follow up PR which was the original plan. I'll communicate internally about this new URL and update the PR.

leandroalonso · 2024-07-03T13:42:42Z

Ok! Just ping me when it's ready for another review @pinarol!

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

Update with the new quick_editor URL

61baafe

Add custom encoding for +

af5e863

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

dangermattic 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 3, 2024

leandroalonso commented Jul 3, 2024

Add "Change Avatar" button to account settings #1770

Are you sure you want to change the base?

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

dangermattic 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

leandroalonso Jul 2, 2024

Choose a reason for hiding this comment

pinarol Jul 2, 2024

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 3, 2024

leandroalonso commented Jul 3, 2024

pinarol commented May 17, 2024 •

edited

Loading

CLAassistant commented May 17, 2024 •

edited

Loading

dangermattic 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