[HOLD for payment 2024-07-22] [HOLD for payment 2024-07-17] [$1000] mWeb - Chat – Unable to zoom the image with pinching

[kbecciv]

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: v1.4.42-1 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: Applause - Interna; Team Slack conversation:

Issue found when executing PR https://github.com/Expensify/App/pull/34080

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Login
3. Go to a report with attachments
4. Open an (image) attachment
5. Check that image gestures/transformations are working (pinching)

Expected Result:

Able to zoom the image with pinching

Actual Result:

Unable to zoom the image with pinching

Workaround:

Unknown

Platforms:

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

• [ ] Android: Native
• [x] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/93399543/ce464be6-14ca-4d7a-a2eb-598f8ae21ba6

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016170309acaa20014
• Upwork Job ID: 1758158238713884672
• Last Price Increase: 2024-06-04
• Automatic offers:
• situchan | Contributor | 0
• dukenv0307 | Reviewer | 102684851
• ZhenjaHorbach | Contributor | 102711497

Issue Owner

Current Issue Owner: @dukenv0307

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~016170309acaa20014

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Triggered auto assignment to @laurenreidexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[kbecciv]

We think that this bug might be related #vip-vsb CC @quinthar

[andreasnw]

Proposal

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

gestures won't work when viewing image attachments on the web app

What is the root cause of that problem?

new feature

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

on web ImageView component, if the device has a touch screen (canUseTouchScreen is true), https://github.com/Expensify/App/blob/8bdb753045cf0eee6cf1d342adf8b76040cabac4/src/components/ImageView/index.tsx#L194-L215

we display images using the Lightbox component instead of regular images. This will allow users to interact with the images using touch gestures.

 if (canUseTouchScreen) {
        return (
            <Lightbox
                uri={url}
                zoomRange={zoomRange}
                isAuthTokenRequired={isAuthTokenRequired}
                onError={onError}
                style={style}
            />
        );
    }

Lightbox component also requires additional zoomScale to define how images are resized.

const zoomScale = Math.min((canvasSize?.width ?? 0) / (contentSize?.width ?? 0), (canvasSize?.height?? 0) / (contentSize?.height ?? 0));

this controls how the image fits within the frame when its original size differs from the frame's dimensions.

 <MultiGestureCanvas
                                isActive={isActive}
                                canvasSize={canvasSize}
                                contentSize={contentSize}
                                zoomRange={zoomRange}
                                pagerRef={pagerRef}
                                shouldDisableTransformationGestures={isPagerScrolling}
                                onTap={onTap}
                                onScaleChanged={scaleChange}
                            >
                                <Image
                                    source={{uri}}
                                    style={contentSize ?? DEFAULT_IMAGE_DIMENSION}
                                    isAuthTokenRequired={isAuthTokenRequired}
                                    onError={onError}
                                    onLoad={updateContentSize}
                                    onLoadEnd={() => {
                                        setLightboxImageLoaded(true);
                                    }}
                                    resizeMode={zoomScale > 1 ? RESIZE_MODES.center : RESIZE_MODES.contain}
                                />
                            </MultiGestureCanvas>

result:

https://github.com/Expensify/App/assets/60419079/6daf30ef-b1e4-4d73-8b11-1469b4046c81

https://github.com/Expensify/App/assets/60419079/33ef5846-5069-4caa-ae78-995cd4c799db

What alternative solutions did you explore? (Optional)

[thesahindia]

Please reassign. I can't take it!

[situchan]

I can take over.

We are not yet supporting zoom image in mobile web. Is it right time to implement this new feature?

[melvin-bot[bot]]

📣 @situchan 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer 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 📖

[laurenreidexpensify]

Asking internally here https://expensify.slack.com/archives/C066HJM2CAZ/p1708364190263029 whether we need to fix this

[laurenreidexpensify]

Still chatting internally

[melvin-bot[bot]]

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

[laurenreidexpensify]

Bumped thread internally for further clarity

[laurenreidexpensify]

@situchan confirmed internally - let's do it!

[situchan]

@laurenreidexpensify thanks

[situchan]

@andreasnw thanks for the proposal. Please test your solution yourself on android chrome and iOS safari.

[situchan]

Waiting proposals

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[andreasnw]

Proposal

Updated

[jeremy-croff]

Proposal

What is the root cause of that problem?

We only have gestures like pinch on native because of the lightbox implementation here: https://github.com/Expensify/App/blob/8bdb753045cf0eee6cf1d342adf8b76040cabac4/src/components/ImageView/index.native.tsx

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

1. Similar to @andreasnw, we want to replace the Image component in https://github.com/Expensify/App/blob/8bdb753045cf0eee6cf1d342adf8b76040cabac4/src/components/ImageView/index.tsx#L200

However additionally: With the lightbox implementation exactly as defined in https://github.com/Expensify/App/blob/8bdb753045cf0eee6cf1d342adf8b76040cabac4/src/components/ImageView/index.native.tsx

2. We should clean up the native implementation as it will be a redudancy.
3. We should ensure that the new lightbox implementation for touch devices, has the default values such as zoomRange with DEFAULT_ZOOM_RANGE from '@components/MultiGestureCanvas'; As well as other's as defined in the native lightbox implementation.
4. We can remove the existing loading logic from. https://github.com/Expensify/App/blob/8bdb753045cf0eee6cf1d342adf8b76040cabac4/src/components/ImageView/index.tsx#L212 and rely in the Lightbox's loading logic
5. We don't need a zoomScale on lightbox

What alternative solutions did you explore? (Optional)

[jeremy-croff]

proposed implementation experience: Android: https://github.com/Expensify/App/assets/157416545/7f1d7a51-1dc8-4cfb-ac33-8fc24b648368 IOS:

https://github.com/Expensify/App/assets/157416545/7315f00a-0cc8-471e-a401-a873d32b9cdc

[andreasnw]

@jeremy-croff zoomScale is necessary to prevent tiny images from looking like this

[jeremy-croff]

@jeremy-croff zoomScale is necessary to . The native implementation does not have this behaviour; either it's intentional, or if we want to add a scale factor, both experiencesges.githubusercontent.com/60419079/307819073-342ef517-062c-45d2-9bf3-56f89faffc37.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDg5NTY3NDQsIm5iZiI6MTcwODk1NjQ0NCwicGF0aCI6Ii82MDQxOTA3OS8zMDc4MTkwNzMtMzQyZWY1MTctMDYyYy00NWQyLTliZjMtNTZmODlmYWZmYzM3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAyMjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMjI2VDE0MDcyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ0Zjg2MGFlNWRkNDEwZmFkMGVmZDRlM2RlMzYyYTA1NmE5MzJiZWU3MGQ4YmQ1OGI2MGE1YTcxZmQwZjc5Y2MmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Vg6CjitMNGlPA5VbSgW1FOM-FsdFT2ky1SElXEGUFSE)

Thanks for the example, So my basis is that it's not a requirement, the native implementation does not have this behaviour either it's intentional, or if we want to add a scale factor both experience will need it.

[laurenreidexpensify]

@situchan some new proposals to review ^^

[situchan]

@andreasnw @jeremy-croff do you mind sharing test branches?

[jeremy-croff]

@andreasnw @jeremy-croff do you mind sharing test branches?

https://github.com/Expensify/App/pull/37424/files

[andreasnw]

sure @situchan https://github.com/andreasnw/Expensify/tree/feat/web_app_gesture_handler

[melvin-bot[bot]]

@laurenreidexpensify @situchan this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[situchan]

proposals are in review & testing

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[laurenreidexpensify]

@situchan any update on the review and testing yet? thanks

[melvin-bot[bot]]

@laurenreidexpensify @situchan this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

[situchan]

I will provide feedback soon

[melvin-bot[bot]]

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

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[laurenreidexpensify]

waiting on feedback from @situchan

[laurenreidexpensify]

@situchan any feedback here from testing?

[melvin-bot[bot]]

@laurenreidexpensify @situchan this issue is now 4 weeks old and preventing us from maintaining WAQ, can you:

• Decide whether any proposals currently meet our guidelines and can be approved as-is today
• If no proposals meet that standard, please take this issue internal and treat it as one of your highest priorities
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[melvin-bot[bot]]

Current assignee @situchan is eligible for the Internal assigner, not assigning anyone new.

[situchan]

updating today

[situchan]

On web, we want exact replication of native approach so replace Image with Lightbox on touchable devices. @andreasnw proposed first. @jeremy-croff I don't find significant difference from your proposal. Please let me know if I am missing anything.

[jeremy-croff]

@situchan I provided about 4 bullet points of differences, included a major experience change of zoomScale. Do you confirm you don't want any of these differences?

[situchan]

I checked but all of them look to me minor changes and code refactor which could be addressed in PR review and testing.

[jeremy-croff]

I checked but all of them look to me minor changes and code refactor which could be addressed in PR review and testing.

Anything can be addressed in the PR during review, and testing. I believe I added my value by drafting a complete proposal that mentioned key things that have to be done differently that were not done in the proposal.

When we avoid these steps, the BZ cannot expect that we will address these things during the PR.

It seems you are not missing anything, @situchan, but do want my proposed changes. Maybe the nitpick is that you devalued my effort by saying there are no significant changes, did I just wast my time and should not have posted? Should I have suggested these things not in a proposal template? It's actually not about winning the bid, I am happy the original poster got it, but I do believe I have helped them or you.

[jeremy-croff]

Additionally, why ask me for a branch if it wasn't significant of a change? The UX is actually a significant change based on the zoomScale alone

[situchan]

@andreasnw @jeremy-croff please update your branches up-to-date with main based on proposals submitted. Please make sure to test yourselves and fix any issues found. I'd like to test and approve one without any minor regression. While this being new feature, easy to cause regressions.

Regarding UX matter, it should behave exactly same as native in production version.

[andreasnw]

@situchan

updated https://github.com/andreasnw/Expensify/tree/feat/web_app_gesture_handler

[andreasnw]

@situchan

Out of the four points Jeremy mentioned, the first one seems identical to what I proposed earlier. I didn't include point three because it's quite clear - the app wouldn't function without passing the required properties. I still believe the zoomScale parameter is necessary to avoid the regressions I mentioned previously https://github.com/Expensify/App/issues/36597#issuecomment-1964222929.

[jeremy-croff]

2. We should clean up the native implementation as it will be a redudancy.

@situchan

Out of the four points Jeremy mentioned, the first one seems identical to what I proposed earlier. I didn't include point three because it's quite clear - the app wouldn't function without passing the required properties. I still believe the zoomScale parameter is necessary to avoid the regressions I mentioned previously #36597 (comment).

I visually separated the first point from the remaining ones to clearly indicate that it is also part of your proposal!

And yep, the third point you're right about and shouldn't be a detractor.

I'm curious if the zoomScale is desired. It's a major part of your proposal's complexity, but to determine its validity, I brought in native testing for parity to confirm it would actually behave differently from the original. Hence, I view it as a regression, not a feature, since there are no established requirements for this yet.

EDIT: After @situchan posted "Regarding UX matter, it should behave exactly same as native in production version." I think we can confirm we will need to drop zoomScale here.

[melvin-bot[bot]]

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

[laurenreidexpensify]

I think this is fine to remain as external for now if we have a chance of resolving. Adding help wanted back.

@situchan what are you thinking re: latest proposals