[Hold for payment 2023-03-17] [$2000] [Feature] We should be able to cycle between opened media in a chat - reported by @sig5

[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:

It will be a nice UX touch for the user, adding convenience while finding an old media file.

Solution:

Add an option to cycle between media when opened via swipe/arrow keys/buttons.

Action Performed:

1. Navigate to any chat
2. Send multiple attachment
3. Try to navigate through older attachments/media

Expected Result:

1. When the member is viewing the most recent attachment in the chat, there's only a left arrow icon on the attachment preview screen to navigate further back. Similarly, when the member is viewing the oldest attachment in the chat, there's only a right arrow to navigate forward.
2. If the member is previewing an attachment that isn't the oldest or latest in the chat history, there will be both left/right arrow icon to navigate "forward" or "back" to the next attachment preview.
3. On desktop/Web: The arrow can be clicked to navigate to the next attachment preview, or the left/right arrow keys on the keyboard can be used
4. On mobile/mWeb: The arrow can be tapped or the member can swipe left/right on the preview to navigate to the next attachment preview depending on the direction
5. On desktop/Web, the arrows are visible on hover. On mobile/mWeb, a single tap on the image hides/shows the arrows.

Actual Result:

We don't support cycling through attachments in a chat currently.

Workaround:

Close the attachment modal, then scroll to the next attachment and open it.

Platform:

Where is this issue occurring?

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

Version Number: 1.1.39-1 Reproducible in staging?: Y Reproducible in production?: Y Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos:

Upwork URL: https://www.upwork.com/jobs/~011ca7e66b62951030 Issue reported by: @sig5 Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1644597095180509

View all open jobs on GitHub

[Santhosh-Sellavel]

@JediWattson The proposal looks promising so far, I'm not sure what I'm missing cycling part doesn't work for me! If you can the working video or rewrite the proposal all details in case you missed something like ATTACHMENT_SRC. it will be helpful for us to make a decision here!

[JediWattson]

Hey that's great!

I made a couple changes because I realized the name of the file isn't being updated

I change the regex to use groups and now I'm matching the src url and name of the file here:

{
    ATTACHMENT_DATA: /(data-expensify-source|data-name)="([^"]+)"/g
}

I changed the matches function to the string function matchAll here's the docs on how this works, and I'm now saving the name in an object.

    useEffect(function(){
        const nextAttachments = actionsArr.reduce((arr, rep) => {
            const matchesIt = rep.originalMessage?.html.matchAll(CONST.REGEX.ATTACHMENT_DATA)
            if(matchesIt){
                const matches = [...matchesIt]
                if(matches.length === 2){
                    const [src, name] = matches
                    if(src[2].includes(sourceURL))
                        setPage(arr.length)
                    const url = src[2].replace(
                        CONFIG.EXPENSIFY.EXPENSIFY_URL,
                        CONFIG.EXPENSIFY.URL_API_ROOT,
                    )
                    arr.push({src: url, file: {name: name[2]}})
                }
            }                                                    
            return arr
        }, [])
        setAttachments(nextAttachments)
    }, [actionsArr.length])

This object is sent to a callback from the parent AttachmentModal and sets the state for the file.

    onArrowPress({src, file}){
        this.setState({sourceURL: src, file})
    }

A couple more things here too. I removed the ternary operator using props to parse the file name from this https://github.com/Expensify/App/blob/75d9014c75befb7655e78653c65f4d2e0c0f0cdf/src/components/AttachmentModal.js#L104 to this:

const fullFileName = lodashGet(this.state, 'file.name', '').trim();

and to prevent error, I defaulted the file in state here: https://github.com/Expensify/App/blob/75d9014c75befb7655e78653c65f4d2e0c0f0cdf/src/components/AttachmentModal.js#L75

to use the props or an empty string like this:

{
    file: {name: props.originalFileName || ""}
}

Also here's the video (with the name changing)

https://user-images.githubusercontent.com/6119181/169702382-a8a96980-f6d9-4cde-bd6a-87f716c7595d.mov

Edit: I made a fork of this repo and a branch for this feature if you'd like to take a hands on approach looking at this! https://github.com/JediWattson/App/tree/arrow-feature

[Santhosh-Sellavel]

@chiragsalian @JediWattson Proposal looks good to me! 🎀 👀 🎀 C+ reviewed

@JediWattson If you haven’t checked out already, please go through the following docs. CONTRIBUTING.md README.md PR_REVIEW_GUIDELINES.md STYLE.md STYLING.md

Can we could just go with Class component, instead of Pure Components with useEffects/useState. Because it's simple & readable and should do the Job!

Check out the above code guidelines do necessary changes before you mark PR ready!

Any comments @chiragsalian?

Thanks!

[chiragsalian]

Yup i like the proposal, including santhosh's suggestions. I would also recommend more verbose variables instead of arr and rep. Feel free to create the PR @JediWattson.

[melvin-bot[bot]]

📣 @JediWattson You have been assigned to this job by @chiragsalian! 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 📖

[trjExpensify]

👋 I've sent you the offer on Upwork, @JediWattson!

[Santhosh-Sellavel]

@chiragsalian I'm going OOO, requested @JediWattson to create a new PR. I believe this is not a pressing feature request. So once the new PR is ready for review, I request to add a hold back for my review here until I am back. If you feel otherwise feel free to un-assign me and assign a new C+ here, thanks!

cc: @trjExpensify

[trjExpensify]

Sounds good, @Santhosh-Sellavel. I've also been OOO. Are you back today as well to keep this review moving?

[chiragsalian]

Santhosh is back from OOO on June 15th. As requested above he's asked if we can hold review until he's back. I'm okay with holding for a week. Let me know if you guys feel differently.

[Santhosh-Sellavel]

Thanks for holding this back, I will review this soon!

[trjExpensify]

Latest from @JediWattson here on the PR.

I just got most of the changes here up. I just need to add the functionality for the arrows to show and not show

[Santhosh-Sellavel]

Any update on the PR @JediWattson?

[JediWattson]

Hey I should have everything up except making it swipable. I have some changes for that, but I haven't worked out a transform in Animation.View

[chiragsalian]

Not overdue, PR is still in progress.

[chiragsalian]

Any update for us @JediWattson. The PR is pretty close to the finish line. Friendly reminder of our contribution guidelines,

Daily updates on weekdays are highly recommended. If you know you won’t be able to provide updates for > 1 week, please comment on the PR or issue how long you plan to be out so that we may plan accordingly. We understand everyone needs a little vacation here and there. Any issue that doesn't receive an update for 1 full week may be considered abandoned and the original contract terminated.

[JediWattson]

yes @chiragsalian I believe I got all the requirements in the PR for this. I'm just trying to record some demos on android that are taking a bit for me. I'll try to finish them this week-end

[trjExpensify]

Where are we at here, guys? Did we get anywhere on figuring out why the arrows can't be toggled on mWeb (and both mWeb & Native for PDFs)? If not, let's start a discussion in #expensify-open-source for more 👀 if we need them!

[JediWattson]

That sounds like a great idea to me

On Mon, Aug 8, 2022 at 8:05 PM Tom Rhys Jones @.***> wrote:

Where are we at here, guys?

• Did we get anywhere on figuring out why the arrows can't be toggled on mWeb (and both mWeb & Native for PDFs)? If not, let's start a discussion in #expensify-open-source for more 👀 if we need them!

— Reply to this email directly, view it on GitHub https://github.com/Expensify/App/issues/7862#issuecomment-1208743744, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABOV6DL4GF3Y24P3SZU2AZ3VYGOEXANCNFSM5PAKPABA . You are receiving this because you were mentioned.Message ID: @.***>

[trjExpensify]

Cool, do you want to do that @JediWattson and link the thread here? You can share what you've tried, or any inclinations you have right now as to what the problem might be.

[JediWattson]

I really don’t have the time to put into this anymore

On Tue, Aug 9, 2022 at 9:22 AM Tom Rhys Jones @.***> wrote:

Cool, do you want to do that @JediWattson https://github.com/JediWattson and link the thread here? You can share what you've tried, or any inclinations you have right now as to what the problem might be.

— Reply to this email directly, view it on GitHub https://github.com/Expensify/App/issues/7862#issuecomment-1209376084, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABOV6DL334N3ZRDLVL4VXGLVYJLR7ANCNFSM5PAKPABA . You are receiving this because you were mentioned.Message ID: @.***>

[Santhosh-Sellavel]

@JediWattson

I really don’t have the time to put into this anymore

I have roughly tested your PR, seems you addressed most of the requirements. Don't let your effort go in vain. Please let us know your concerns, if possible we can work it out. Thanks!

[JediWattson]

I can try to do something’s this weekend

On Wed, Aug 10, 2022 at 10:22 AM Santhoshkumar Sellavel < @.***> wrote:

@JediWattson https://github.com/JediWattson

I really don’t have the time to put into this anymore

I have roughly tested your PR, seems you addressed most of the requirements. Don't let your effort go in vain. Please let us know your concerns, if possible we can work it out. Thanks!

— Reply to this email directly, view it on GitHub https://github.com/Expensify/App/issues/7862#issuecomment-1210745628, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABOV6DLOKC64B66XXORZXCLVYO3KNANCNFSM5PAKPABA . You are receiving this because you were mentioned.Message ID: @.***>

[trjExpensify]

Nice! Looks like you got to the bottom of it, @JediWattson. 🎉

@Santhosh-Sellavel is asking for the OP of the PR to be updated to reflect the changes, and then this should be ready to go?

[JediWattson]

Hey @trjExpensify that's what I'm hearing. I need about a day or two before I can get that up, but I will be making time for it for sure!

[trjExpensify]

Awesome yeah, thanks!

[JediWattson]

I just update the videos in the PR and updated the branch with main, hopefully that does it!

[Santhosh-Sellavel]

@chiragsalian @trjExpensify

Based on my review, I believe this job is definitely time consuming, requesting a price increase to $4k. That would be reasonably fair.

Thanks!

[trjExpensify]

I think it would be good to re-evaluate once the job is complete at this point.

[Santhosh-Sellavel]

Fair call!

[trjExpensify]

PR is still in review, with active discussion.

[trjExpensify]

Marc & Chirag have offered some additional thoughts in the PR for going in the direction of a Carousel component.

[Santhosh-Sellavel]

Any update for us @JediWattson. The PR is pretty close to the finish line. Friendly reminder of our contribution guidelines,

Daily updates on weekdays are highly recommended. If you know you won’t be able to provide updates for > 1 week, please comment on the PR or issue how long you plan to be out so that we may plan accordingly. We understand everyone needs a little vacation here and there. Any issue that doesn't receive an update for 1 full week may be considered abandoned and the original contract terminated.

@JediWattson

[JediWattson]

@Santhosh-Sellavel Yes during the week I plan to try and finish this

[trjExpensify]

Thanks, @JediWattson. I'm incredibly excited to get this one over the line! ❤️

[chiragsalian]

Any update for us @JediWattson. The PR is pretty close to the finish line. Reminder of our contribution guidelines once again,

Daily updates on weekdays are highly recommended. If you know you won’t be able to provide updates for > 1 week, please comment on the PR or issue how long you plan to be out so that we may plan accordingly. We understand everyone needs a little vacation here and there. Any issue that doesn't receive an update for 1 full week may be considered abandoned and the original contract terminated.

More than a week has passed with no commits on the PR or any update here so it's hard to tell if you are actively working on the issue.

[chiragsalian]

Looks like there is movement on the PR. Thanks @JediWattson. Let us know if you've got any questions. Excited to see this through.

[mallenexpensify]

@trjExpensify I got assigned to the tracking issue for 'polish' and this is on there, I'm going to co-assign with you as BugZero/Contributor Manager. (Since it's moving along I don't want to 👢 you since you know what's going on and I don't :)

[Tracking] [Polish] Image-related feature request and improvements #10894

[mallenexpensify]

@Beamanator we have most image-related issues on hold in the #10894 tracking issue. This one is in-progress, the PR is here - https://github.com/Expensify/react-native-onyx/pull/198 Is there any reason we shouldn't keep moving forward here?

[Santhosh-Sellavel]

@mallenexpensify That https://github.com/Expensify/react-native-onyx/pull/198 is for a different issue

[Santhosh-Sellavel]

Here is the PR for this issue https://github.com/Expensify/App/pull/9279

[mallenexpensify]

eeeps, sorry. Thanks for the catch @Santhosh-Sellavel

[trjExpensify]

Yep, we should get this over the line. @Santhosh-Sellavel, can we get an update on where we are at and can we have the PR merged by the end of the week? :excited:

[Santhosh-Sellavel]

Yeah, the changes requested are done. Waiting for re-review.

Not sure it will be able to merge this week. But mostly will try to get it merged by next week. Code Review is only in progress, still testing needs to be done if there are no surprises we will be close next week!

[trjExpensify]

Oh hm, will it take 2 weeks to review the PR? That seems like quite a lengthy time. Can @chiragsalian get going on his initial code review while you finish up on the tests or something?

[Santhosh-Sellavel]

Yeah, we could do that it helps speed up!

[trjExpensify]

Cool, @chiragsalian feel free to take a look at the PR. In the meantime, where are you at with the tests @Santhosh-Sellavel?

[trjExpensify]

Alrighttty.. it's Monday! What's it going to take to get this PR merged this week?

[Santhosh-Sellavel]

Followed by our discussion here. I did a review and left a review here. Not all questions are answered Still waiting for an update from @JediWattson, no changes post the review!

[Santhosh-Sellavel]

@JediWattson Can you provide an update here, whenever PR is ready for review if you need input from us gives a bump! Let's try and get this merged soon!

[JediWattson]

I will take a look later today and finish up some changes I had started last week!

On Mon, Nov 7, 2022 at 11:16 AM Santhoshkumar Sellavel < @.***> wrote:

@JediWattson https://github.com/JediWattson Can you provide an update here, whenever PR is ready for review if you need input from us gives a bump! Let's try and get this merged soon!

— Reply to this email directly, view it on GitHub https://github.com/Expensify/App/issues/7862#issuecomment-1305849874, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABOV6DM6I4BXKVM7KDAPDV3WHETMLANCNFSM5PAKPABA . You are receiving this because you were mentioned.Message ID: @.***>