[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 ^]

• [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.

[melvin-bot]

⚠️ Looks like this issue was linked to a possible regression on PRODUCTION here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a production regression has occurred a Root Cause Analysis is required. Please follow the instructions here.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

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

[melvin-bot]

⚠️ Looks like this issue was linked to a possible regression on PRODUCTION here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a production regression has occurred a Root Cause Analysis is required. Please follow the instructions here.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.