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

[roryabraham]

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

We have seen a number of issues come up related to images. Uploading them, editing them, making them available offline, copying them to clipboard, etc...

Onyx does have support for images, but AFAIK nobody has utilized that functionality to build any app features that follow our offline-first paradigm for images.

Overall, I think there's a lot of confusion around this topic (speaking for myself here, so feel free to comment if you disagree), and that leads to potentially disparate approaches or complex code surrounding images.

Solution

As these come up, we see the need for a common, unified approach to handling images, presumably using Onyx. This issue is meant to serve as a tracking issue for all image-related feature requests and bug fixes. We should look for commonality between these features, try to come up with a generalized, future-proof solution that's easy to work with, and implement it via the WN/Design Doc process.

Linked issues

Setting up Caching Issue(s)

• [Image][Performance] Better caching for iOS images #10792
• [HOLD for payment 2024-03-29] [HOLD for payment 2024-03-26] [$250] [Feature] RNW Image: Add support for http properties in source #12603
• [Image] Bundle default avatars as SVG to use as a fallback when custom avatars are not loaded or cached #9703
  • [HOLD for payment 2023-03-14] Implement better default avatars #12259
• [HOLD #10894][Image][Performance][$2000] Feature Request - Attachments should be cached after first load. It currently load from internet every time - Reported by: @parasharrajat #6527

Bugs based off caching [Holding on ^]

• [HOLD #10894] After reload the user avatar takes time to show up reported by @thesahindia  #12185
• [HOLD #12603][Image][Performance] Avatars appear grey as they're loaded from server for common mobile flows - reported by @sobitneupane #11425
• [HOLD #12603] [Image] Seeing blank modal for avatar, when offline reported by @thesahindia  #12707

"Flashing" / Image rerendering [Holding on ^]

• [MEDIUM] [Image][$1000] Improve NewDot image uploading experience, add large file support #9402
• [HOLD #10894 and #9402][Image] Settings - The grey avatar displayed for a brief moment when uploading a picture #10704
• [HOLD #12603][Image][Performance] Avatar images in a report are re-fetched when we hover on the message #11393

New Features

• [$250] [Image] Implement the ability to copy images to the clipboard #4629
• [Hold for payment 2023-03-17] [$2000] [Feature] We should be able to cycle between opened media in a chat - reported by @sig5 #7862
• [HOLD for payment 2023-02-18] [$2000] [Image][Feature] Show a user friendly name for the attachment images for take pictures option - reported by @parasharrajat #11085
• [HOLD for payment 2023-09-29] [Image] Feature Request: Introduce an ability to view workspace picture with a single tap - reported by @chauchausoup #11197
• Use Blurhash as image placeholders while they're loading (slack convo)
• Offline Image Support - Chat - Some photos show up in an empty frame when user is offline #17069

Bugs (in progress - not on hold)

• Default avatars: Use SVG asset that we can change the color
  • FallbackAvatar & FallbackWorkspaceAvatar
  • Note: Being handled in this issue: [HOLD for payment 2023-03-14] Implement better default avatars #12259
• [HOLD for payment 2023-03-09] [$1000] GIF attachments are either displayed as blank or there is infinite loading on attachment preview  #15288
• [HOLD for payment 2022-12-15] [Image] Web - Profile - The white background in the image changes to black #11063
  • [HOLD for payment 2023-02-23] [$1000] Figure out why svg images don't show immediately when uploading as avatar #13038
• [HOLD for payment 1/12][$8000] Profile - Create a limit for Avatar file types or size  #13006
• [HOLD for payment 2023-03-31] Display avatars & avatar thumbnails correctly in app #13555
• [HOLD for payment 2023-01-25] [$1000] mWeb - Chat - The avatar in the groupDM welcome message does not have the default grey background #13585
• Profile : Uploading high resolution avatar image fails  #13962
• [HOLD App #13216] The avatar of group chats change when hovering report rows. #14027

Resolved issues

• [HOLD #10894] [Bug] Attachment - Small image disappears for a brief moment after tap on send #10029
• WorkSpace photo not updating after navigating away - reported by @gadhiyamanan #10849
• [HOLD REFACTOR] [$250] Enlarged view of own avatar not getting updated after uploading new avatar - reported by @aswin-s #9418
• [Bug] Adding/removing Avatar in Profile and Workspace pages is not behaving the same - reported by @Puneet-here #9239
• [Bug] [$250] IOS - Profile - Uploaded picture have been rotated itself after saving. #10258
• [HOLD for payment 2022-10-18] [$250] Unresponsive camera opens on iOS if the camera permission is denied - reported by @adeel0202 #8846
• Cannot load images in production if they were uploaded from staging App #11639
• [HOLD for payment 2022-11-09] [$250] Web - Clicking on zoom photo line should zoom the photo and the large green button should be place at clicked point reported by @aneequeahmad  #10950
• [HOLD for payment 2022-11-16] [$250] [Image] Cant Share attachments between 40-49 mb - reported by @Tushu17 #8235
• [$500][Image] Web - Profile - The avatar is highlighted with a blue frame #10599
• [HOLD for payment 2022-11-29] [$2000][Image] Attachments uploaded via camera lose their rotation, appears sideways. #11854
• Android- Attachment - Picture looks small when taking photo in portrait mode #13300
• [HOLD #10894][Image] mWeb/Safari -Settings - Avatar is displayed a grey color when went back online #11511

Follow-up discussions:

• Stop storing full image URLs in the database
  • Decided this wasn't needed for "WhatsApp Quality" but still useful to do eventually

[parasharrajat]

Thanks for putting this up, much needed discussion.

[parasharrajat]

Should we create a Project for this one? For me, it's a big feature/migration.

[roryabraham]

A project would be fine – historically we've usually just used issues but a project board could be useful. More importantly, we need someone to take this on as a project manager.

One interesting idea could be to engage @thomas-coldwell from Margelo in this project, since @mrousavy told me that Thomas typically works on Video/Audio/Image/Graphics stuff. Thoughts @mrousavy? Right now this is a pretty open-ended issue.

[mrousavy]

@roryabraham yes, this would probably pretty interesting! 😄

I'll talk to Thomas about availability then get back to you here or on Slack :)

[roryabraham]

Added #9703 to this list.

[roryabraham]

There was some useful discussion in slack regarding this issue here

[Beamanator]

A few updates for today:

• Added points:
  • [HOLD #12603][Image][Performance] Avatars appear grey as they're loaded from server for common mobile flows - reported by @sobitneupane #11425
  • After reload the user avatar takes time to show up
  • [HOLD #10894][Image] mWeb/Safari -Settings - Avatar is displayed a grey color when went back online #11511
  • [HOLD for payment 2023-09-29] [Image] Feature Request: Introduce an ability to view workspace picture with a single tap - reported by @chauchausoup #11197
  • [HOLD for payment 2022-12-15] [Image] Web - Profile - The white background in the image changes to black #11063
  • [HOLD for payment 2022-11-09] [$250] Web - Clicking on zoom photo line should zoom the photo and the large green button should be place at clicked point reported by @aneequeahmad  #10950
  • [$500][Image] Web - Profile - The avatar is highlighted with a blue frame #10599
• Resolved points:
  • WorkSpace photo not updating after navigating away - reported by @gadhiyamanan #10849 (already fixed a month ago ish)
  • [HOLD REFACTOR] [$250] Enlarged view of own avatar not getting updated after uploading new avatar - reported by @aswin-s #9418 (already fixed)
  • [Bug] Adding/removing Avatar in Profile and Workspace pages is not behaving the same - reported by @Puneet-here #9239 (already fixed)
  • [Bug] [$250] IOS - Profile - Uploaded picture have been rotated itself after saving. #10258 (already fixed)
  • [HOLD for payment 2022-10-18] [$250] Unresponsive camera opens on iOS if the camera permission is denied - reported by @adeel0202 #8846 (almost implemented)

[trjExpensify]

#34505 is in review still!

[trjExpensify]

The image caching PR was reverted again, so we're back to figuring that out in #12603.

[trjExpensify]

New PR for #12603 is up.

[trjExpensify]

Plan being worked on!

[trjExpensify]

#36560 in the works!

[trjExpensify]

We merged it very recently. Looking good so far, no revert. So hopefully we can turn to #9402 soon.

[mallenexpensify]

Updated title to remove the hold cuz the issue it was held on hit production
#12603
(I have another issue that's held on this one)

[trjExpensify]

What issue is it, @mallenexpensify?

[mallenexpensify]

This one

• [PAY] Image infinite loading when offline #13826

[trjExpensify]

Interesting! I don't think that needs to hold on this issue, it looks like it's being addressed here: #35502

I'm going to go ahead and close this out now. We aren't adding anything new to it or require it for CAP or anything. The two remaining items we have are here and here, so follow along there if anyone is still interested!