[$250] Profile picture in Details view is low resolution

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.25-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1724699109965679

Action Performed:

1. Go to any chat
2. Click on the user avatar

Expected Result:

Profile picture should have high resolution of 2000x2000 for desktop and atleast 300x300 for high pixel mobile devices

Actual Result:

It is low solution with 128x128

Workaround:

visual

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c91a281a664a784a
• Upwork Job ID: 1830168335275102612
• Last Price Increase: 2024-09-01

Issue Owner

Current Issue Owner: @suneox

[melvin-bot]

Triggered auto assignment to @muttmuure (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

📣 @mayank785! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[dominictb]

Edited by proposal-police: This proposal was edited at 2023-10-02T10:00:00Z.

Proposal

Please re-state the problem that we are trying to solve in this issue.

It is low solution with 128x128

What is the root cause of that problem?

After upload avatar, BE return the original image url, but when they go to profile detail page, OpenPublicProfilePage API returns the avatar with lower resolution (128)

What changes do you think we should make in order to solve the problem?

Since we can display the avatar in many places, devices with different resolution

-> BE should return the original image url, then FE will choose which resolution should be shown

For example, the avatar url is url.jpeg, then we can display url_300.jpeg for mobile device and url.jpeg (original) in desktop device.

url_{resolution}.jpeg depends on what BE provides.

What alternative solutions did you explore? (Optional)

we can remove _128px if it's not full quality version

[melvin-bot]

@muttmuure Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01c91a281a664a784a

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @suneox (External)

[muttmuure]

Waiting for confirmation that this can be worked on externally

[muttmuure]

Waiting for confirmation that this can be worked on externally

[suneox]

@muttmuure Do we need to display the full image size for an avatar thumbnail? And currently, the backend returns the full image size. so I would like to confirm if this issue is reproducible?

[dominictb]

@suneox What do you think about my proposal? It's very common pattern

[suneox]

@suneox What do you think about my proposal? It's very common pattern

@dominictb Your proposal looks good, but currently the avatar is supported to get a small size (128x128) via the getSmallSizeAvatar function, so I think we don’t need BE support for this issue

We’re still waiting for confirmation on the expected result regarding the display of avatar thumbnail sizes (currently, the avatar thumbnail has shown full size)

I think the thumbnail should display in a small size and only show the full size when viewing details.

[shawnborton]

For the thumbnail that is seen in details view, I think we only need to show a version that is 3x larger than the size of the display area... so if we display it at 100x100, then a 300x300 avatar is perfect here.

[suneox]

@shawnborton Thanks for your confirmation. Based on the expected behavior, We need BE support to retrieve the image size dynamically (or at least support a size of 300x300 to handle this issue). Then we can proceed with @dominictb proposal.

@huult proposal LGTM

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @marcaaron, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[marcaaron]

Can we just remove the _128 part to get a better quality version? When an avatar is uploaded we upload 2 versions: one full quality and one thumbnail quality. It's not clear to me how we would "return a 300x300" 🤔

[dominictb]

When an avatar is uploaded we upload 2 versions

@marcaaron Should we update several versions: full quality, _128, _256, ...

If not I think we can remove _128

[suneox]

We’re still waiting for BE to create a proxy command

[marcaaron]

Bumping the priority down a bit here since I've got a few other things on my plate that are quite a bit higher than this.

[melvin-bot]

@suneox @marcaaron @muttmuure this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[marcaaron]

Unfortunately, not able to get to this right now. I'm going OOO on Friday so maybe we can find a new assignee who doesn't have something more valuable to implement.

[muttmuure]

Not overdue

[suneox]

@MelvinBot Not overdue

[melvin-bot]

This issue has not been updated in over 15 days. @suneox, @marcaaron, @muttmuure eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[marcaaron]

I'm going to preemptively make this a Hot Pick and offer it to the pool. It's not something that I will realistically have time to look into before I go on leave.

[tgolen]

I proposed a more simple alternative and posted it in the slack thread. If this is acceptable, I can start working on this.

[tgolen]

I was able to find other high-value things to work on so I am going to unassign this. If you refer to the slack thread, you can find the solution that we settled on for this.