[HOLD for payment 2022-05-20] Feature Request: Add the ability to view profile pictures in full screen/larger size by clicking/tapping on them

[mvtglobally]

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

---

Problem:

@garrett has what looks like an old timey phone and maybe some sort of necklace on in his picture, but I just can’t make it out!

Solution:

Let me tap on Garrett’s profile picture to get a good look at this crazy critter.

Action Performed:

1. Navigate to any chat
2. Click on user to open details
3. View avatar

Expected Result:

User should be able to view profile pictures in full screen/larger size by clicking/tapping on them

Actual Result:

User can't view profile pictures in full screen/larger size

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.43-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @twisterdotcom
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1646994875559189

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @sonialiap (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[melvin-bot]

Triggered auto assignment to @timszot (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[melvin-bot]

Triggered auto assignment to @dylanexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[dylanexpensify]

internal: https://www.upwork.com/ab/applicants/1505964204060225536/job-details
external: https://www.upwork.com/jobs/~01683d91a542e809a5

[melvin-bot]

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

[MelvinBot]

📣 @parasharrajat You have been assigned to this job by @melvin-bot[bot]!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

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

[parasharrajat]

@Expensify/design What are the design expectations for this feature? Thanks.

[tomivs]

internal: https://www.upwork.com/ab/applicants/1505964204060225536/job-details external: https://www.upwork.com/jobs/~01683d91a542e809a5

For this, we just have to add a modal component — which would contain the picture in full screen mode — and a click event that changes the state to show that modal.

Here is a prototype:
https://user-images.githubusercontent.com/6005972/159367991-49bcfbda-ab81-43d5-897b-a1bbf0dd0980.mp4

I'll be attentive to any comments and start working on this issue if my proposal if accepted.

Thanks.

[sobitneupane]

Proposal:
We can make use of existing AttachmentModal for this.
Wrap this code block with AttachmentModal.

App/src/pages/DetailsPage.js

Lines 101 to 105 in 690707f

	<Avatar
	containerStyles={[styles.avatarLarge, styles.mb3]}
	imageStyles={[styles.avatarLarge]}
	source={details.avatar}
	/>

<AttachmentModal
    sourceURL={details.imageUrl}
    isAuthTokenRequired
    displayName= {isSMSLogin ? props.toLocalPhone(details.displayName) : details.displayName}
    isProfilePicture
>
    {({show}) => (
        <TouchableWithoutFocus
            style={styles.noOutline}
            onPress={show}
        >
            <Avatar
                containerStyles={[styles.avatarLarge, styles.mb3]}
                imageStyles={[styles.avatarLarge]}
                source={details.avatar}
            />
        </TouchableWithoutFocus>
    )}
</AttachmentModal>

Add a prop isProfilePicture in AttachmentModal.

App/src/components/AttachmentModal.js

Lines 159 to 162 in 690707f

	<HeaderWithCloseButton
	title={this.props.isUploadingAttachment
	? this.props.translate('reportActionCompose.sendAttachment')
	: this.props.translate('common.attachment')}

<HeaderWithCloseButton
    title= {this.props.isProfilePicture ? this.props.displayName : 
        this.props.isUploadingAttachment
            ? this.props.translate('reportActionCompose.sendAttachment')
            : this.props.translate('common.attachment')
    }

For high quality image, we also have to add imageUrl in src/libs/actions/PersonalDetails.js formatPersonalDetails function.

function formatPersonalDetails(personalDetailsList) {
    Timing.start(CONST.TIMING.PERSONAL_DETAILS_FORMATTED);
    const formattedResult = {};

    // This method needs to be SUPER PERFORMANT because it can be called with a massive list of logins depending on the policies that someone belongs to
    // eslint-disable-next-line rulesdir/prefer-underscore-method
    Object.keys(personalDetailsList).forEach((login) => {
        const personalDetailsResponse = personalDetailsList[login];

        // Form the details into something that has all the data in an easy to use format.
        const avatar = getAvatar(personalDetailsResponse, login);
        const displayName = getDisplayName(login, personalDetailsResponse);
        const pronouns = personalDetailsResponse.pronouns || '';
        const timezone = personalDetailsResponse.timeZone || CONST.DEFAULT_TIME_ZONE;
        const firstName = personalDetailsResponse.firstName || '';
        const lastName = personalDetailsResponse.lastName || '';
        const payPalMeAddress = personalDetailsResponse.expensify_payPalMeAddress || '';
        const phoneNumber = personalDetailsResponse.phoneNumber || '';
+        const imageUrl = personalDetailsResponse.avatar || OptionsListUtils.getDefaultAvatar(login);;
        formattedResult[login] = {
            login,
            avatar,
            displayName,
            firstName,
            lastName,
            pronouns,
            timezone,
            payPalMeAddress,
            phoneNumber,
+            imageUrl
        };
    });
    Timing.end(CONST.TIMING.PERSONAL_DETAILS_FORMATTED);
    return formattedResult;
}

Output:

[parasharrajat]

Bump @Expensify/design #8197 (comment)

[dylanexpensify]

I'm heading on parental leave so reassigning! Thank you to whoever gets assigned this! ❤️

[melvin-bot]

Triggered auto assignment to @kadiealexander (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[kadiealexander]

@sobitneupane as per Dylan's message above, please let us know the latest update when you can. :)

[sobitneupane]

@sobitneupane as per Dylan's message above, please let us know the latest update when you can. :)

Deployed to staging. Awaiting PROD deployment

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.57-17 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Add feature to view Profile Picture in full screen #8483

If no regressions arise, payment will be issued on 2022-05-20. 🎊

[kadiealexander]

https://www.upwork.com/ab/applicants/1527517318879318016/job-details
https://www.upwork.com/jobs/~01b845f7502650aa01

Sorry @sobitneupane and @parasharrajat I had no idea the Upwork post had closed. Please apply here so I can pay you both!

[sobitneupane]

https://www.upwork.com/ab/applicants/1527517318879318016/job-details https://www.upwork.com/jobs/~01b845f7502650aa01

Sorry @sobitneupane and @parasharrajat I had no idea the Upwork post had closed. Please apply here so I can pay you both!

@kadiealexander Applied.

[kadiealexander]

Offer sent, please accept!

[kadiealexander]

@sobitneupane has been paid! Thanks for your work on this. :)

[sobitneupane]

@sobitneupane has been paid!

Thank you.

Thanks for your work on this. :)

My pleasure.

[parasharrajat]

@kadiealexander Applied

[sudharsanvishnu]

https://github.com/ascoders/react-native-image-viewer

[kadiealexander]

@parasharrajat contract sent!

[kadiealexander]

Everyone is paid!! Thanks team :)