[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

[MelvinBot]

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

[MelvinBot]

Triggered auto assignment to @megankelso (Design), see these Stack Overflow questions for more details.

[trjExpensify]

Oh, this is cool! What are we thinking in terms of the UI for the controls for this? We should probably loop in design before moving this on to further, so I'm adding the design label for now and dropping the priority to weekly. After which, we can update the OP.

In the meantime, here are some quick thoughts:

• When the member is on the most recent attachment in the chat, there's only a left arrow icon (centered and left-aligned?) in the preview screen.

• If the member is previewing an attachment "further back" in the history, there will also be a right arrow icon (centered and right-aligned?) to navigate "forward" to the next attachment preview

• 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

• 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

• Should we give members the ability to dismiss/hide the navigation arrows in some capacity? On web/desktop I can see maybe only revealing the arrow(s) on hover? On smaller screens like mobile/mWeb they might get in the way, if we don't offer the ability to tap to dismiss/hide them in some capacity?

CC: @shawnborton

[shawnborton]

Yeah I'm mostly curious what we consider to be the total batch of attachments that you would cycle between. Is it only the attachments on a given message/thread, or could you cycle through all attachments across all messages in a chat?

Taking a look at Slack, it seems like on desktop you can only cycle through the group of attachments found throughout an entire message + subsequent thread messages. On mobile, it seems like you can cycle through everything found in a given chat/room.

@trjExpensify do you prefer one or the other? Maybe we can take this to the room for a quick discussion too.

[trjExpensify]

Yeah, good question. I personally prefer being able to cycle through all attachments across all messages in a chat. The limit on message + threaded messages on Slack desktop is always a bit of a pain, IMO.

A neat thing WhatsApp does if you exit out of the attachment is navigate you back in the chat history to where it was originally posted for the added context in and around when it was sent.

Posted on the original thread here.

[trjExpensify]

Followed up in the slack thread, sorry I missed the replies! 😅

[trjExpensify]

Pulling a couple of things out of the Slack thread..

• Is it only the attachments on a given message/thread, or could you cycle through all attachments across all messages in a chat?

We don't have threads yet, and similarly one message is one attachment, so cycling through all attachments across all messages in a chat seems to be where we're at here?

• Should we include a horizontal scrollview like WhatsApp?

I think we can probably descope this for now, though I agree it would be nice for speed scrolling. Especially if you know you're trying to get back to a point in time looking for something.

• Should the carousel of attachments "wrap". i.e: if I have the last attachment open, and I press ArrowLeft am I taken to the first attachment or does nothing happen? Is the > in the carousel disabled, or does it take me back to the beginning?

As I mentioned in the thread, I don’t have a strong opinion on looping back to the most recent/oldest when you reach the end/beginning. I think we’d need to make that clear if we allowed for it though, which presumably means including some indication of date/time as well. Otherwise you'd have the perception of infinitely scrolling back, unaware that you've looped back to the start.

[shawnborton]

Agree with your first two points. I think we can descope wrapping too.

[trjExpensify]

Nice, works for me! 👍

[trjExpensify]

Okay cool, so what are the next steps here? We're ready to mock it up at this point, right?

[shawnborton]

That makes sense to me - looks like this is already assigned to @megankelso.

@trjExpensify can you update the original comment to reflect what the desired solution/expected result should be, and then Megan can make some mocks? I think we'll just need some left/right arrows to exist in the attachment viewer modal.

[trjExpensify]

Okay cool, OP has been updated! The only thing I'm unsure of for how we're going to handle at this point is this one:

Should we give members the ability to dismiss/hide the navigation arrows in some capacity? On web/desktop I can see maybe only revealing the arrow(s) on hover? On smaller screens like mobile/mWeb they might get in the way, if we don't offer the ability to tap to dismiss/hide them in some capacity?

[shawnborton]

I like the idea of using hover for web. On mobile, we could just do it where a single tap on the image hides/shows the arrows?

[trjExpensify]

On mobile, we could just do it where a single tap on the image hides/shows the arrows?

Works for me! 👍

[megankelso]

some ideas for this

the hover/tap made me think y'all were suggesting the arrows as an overlay, would probably need to style differently but on first pass I prefer them not appearing over the image. curious for thoughts

[shawnborton]

I think it's pretty standard that the arrows would always be on the left & right edges of the screen, so I prefer those mockups in comparison to the mockups where the arrows are below the image.

My concern with using white arrows is that if the attachment was white, you wouldn't see the arrow. Could we see a version where the arrows just use our standard button styling? Perhaps even borrowing some of the round styles you used for the video call mocks you made.

[shawnborton]

Also a small nitpick: can you update the screenshots to use the current attachment modal styling? It has a subheader for the filename as well as a bottom border:

[trjExpensify]

PR review is ongoing Melvin, chill.

[MelvinBot]

@JediWattson, @chiragsalian, @trjExpensify, @Santhosh-Sellavel Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MelvinBot]

@JediWattson, @chiragsalian, @trjExpensify, @Santhosh-Sellavel Huh... This is 4 days overdue. Who can take care of this?

[MelvinBot]

@JediWattson, @chiragsalian, @trjExpensify, @Santhosh-Sellavel 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[Santhosh-Sellavel]

Close to completion!

[mallenexpensify]

This appears to be live on production?!??!?
https://www.screencast.com/t/iuWw0UHe3

[MelvinBot]

@JediWattson, @chiragsalian, @trjExpensify, @Santhosh-Sellavel Whoops! This issue is 2 days overdue. Let's get this updated quick!

[trjExpensify]

Oh hm, the title didn't update automatically. Done that!

@Santhosh-Sellavel @chiragsalian @luacmartins what are the next steps on the follow-up items? Seems like the most pressing item is figuring out how to "go back" further versus only as far as reportActions we have loaded, right?

I think we'd go ahead and create a new issue for that.

[chiragsalian]

what are the next steps on the follow-up items?

Create an issue for each, discuss within each if they are worth it at this time, and then mark them all as external.

Seems like the most pressing item is figuring out how to "go back" further versus only as far as reportActions we have loaded, right?

Personally yeah I would like to see this one implemented. It will involve some backend changes.

[trjExpensify]

Create an issue for each, discuss within each if they are worth it at this time, and then mark them all as external.

What are those? I seem to recall the debounce improvement and going back further being the only ones worth continuing.

Personally yeah I would like to see this one implemented. It will involve some backend changes.

Okay cool, so shall we have an internal issue spun up for that, who's going to take it on?

[MelvinBot]

@JediWattson, @chiragsalian, @trjExpensify, @Santhosh-Sellavel Huh... This is 4 days overdue. Who can take care of this?

[MelvinBot]

@JediWattson, @chiragsalian, @trjExpensify, @Santhosh-Sellavel 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[trjExpensify]

Alrighty, I've sent offers for the increased values:

@JediWattson $4k for the fix
@Santhosh-Sellavel $4k for C+

[trjExpensify]

Settled up with @JediWattson ✅ , over to you @Santhosh-Sellavel!

[trjExpensify]

Settled up with @Santhosh-Sellavel ✅, we're done here. Closing!

[sig5]

I think I have not been paid the bounty for the 🐛

[MelvinBot]

📣 @sig5! 📣

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. 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.
2. 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.
3. 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>

[sig5]

Contributor details
Your Expensify account email: singhalsakar@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01bd078f22eaeb58dd

[MelvinBot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[trjExpensify]

Hey, @sig5. This was a feature request and not a bug, so we don't pay a bug report bounty for those: https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#proposing-a-job-that-expensify-hasnt-posted

[sig5]

https://github.com/Expensify/App/blob/b1a08ca2e41e5f43f4865c6518a2813a21b4b514/CONTRIBUTING.md It wasn't the case when the issue had started. Seems like there was a change in rules in the meanwhile. But I think old rules should be honoured because it was reported then.

[sig5]

Bump###

[sig5]

Need to get done with this, So BUMP @trjExpensify

[trjExpensify]

Hey @sig5, easy on the caps lock, I've been out of office until today. 🙂

I checked the feature request freeze and you're right it did come into play after the issue creation. I've sent you a contract for the bug report on Upwork.

[sig5]

Ayy, thanks man. Didn't mean to be rude if felt that way.

[trjExpensify]

All good, that's settled now.