[native] Add thumbHash prop to image components
ClosedPublic
Actions

Authored by bartek on May 9 2023, 8:08 AM.

Details

Reviewers

ginsu
atul
inka

Commits

rCOMMc768750741aa: [native] Add thumbHash prop to image components

Summary

This diff exposes the expo-image's placeholder prop (docs). For <LoadableImage> and <RemoteImage> it is passed directly for flexibility.
For encrypted images, the thumbHash is encrypted so it must be decrypted before creating a placeholder. For non-encrypted images, it can be passed directly.

The part where multimedia.react.js receives the thumbhash prop will be added in next diffs whenkeyserver support is added.

Depends on D7761

Test Plan

Here are a few thumbhash examples that you can pass to the prop:

// these are raw, non-encrypted thumbhash strings
const thumbhashes = [
  '1EgOHYQImHiZZ4iCe3eWeAinolA8',
  '5xcSHQZpeI94KIenaHhoh2ufo/Y4',
  'EQgKHQZlh2122Hb4dm2Gh2hwkQc3',
  'GTSBBIAmOIlphnApR+P7ijmPhYUIR4h3Bg',
  'JRkaPQh4d394V4doeHd3h3iAgAcI',
  'TwgOFQKniXV1+JeYh3u2mLZ1b1v3',
  'YGkKHQKnh392CGdXpXVoeptu0IgF',
  'E9cJVRB6h493R3iIeHmXZ3hwhAg3',
];
const thumbhash = thumbhashes[Math.random() % thumbhashes.length];
const placeholder = { thumbhash };
`

Simulator Screen Shot - iPhone 14 Pro - 2023-05-09 at 17.31.58.png (2×1 px, 399 KB)

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

bartek created this revision.May 9 2023, 8:08 AM

bartek held this revision as a draft.

Herald added subscribers: tomek, ashoat. · View Herald TranscriptMay 9 2023, 8:08 AM

bartek edited the summary of this revision. (Show Details)May 9 2023, 8:13 AM

bartek added a parent revision: D7761: [native] Add utils to encrypt/decrypt base64 string.

bartek removed a parent revision: D7661: [Tunnelbroker] Add integration tests.

Harbormaster completed remote builds in B19213: Diff 26312.May 9 2023, 8:30 AM

bartek edited the test plan for this revision. (Show Details)May 9 2023, 8:32 AM

bartek attached a referenced file: F530790: Simulator Screen Shot - iPhone 14 Pro - 2023-05-09 at 17.31.58.png. (Show Details)

bartek published this revision for review.May 9 2023, 8:39 AM

bartek added a child revision: D7782: [native] Avoid transition delay during upload.May 10 2023, 7:52 AM

Looks good at a high level. Thanks for including examples in the Test Plan!

Requesting changes for response on thumbhash vs thumbHash naming convention, think we should be more clear there

native/media/encrypted-image.react.js
47 ↗	(On Diff #26312)	Personally, I think it would be cleaner for decrypted data to "flow down through" components instead of handling decryption within React components where data is displayed. Feel like decryption should be a "step" (like rehydrating redux?) that's done "up front" and "React" can just handle data that's been processed and "ready to render." Understand that might not be practical given the way the app is currently though (Nothing actionable here, just a thought)
47 ↗	(On Diff #26312)	Feel like the distinction between `thumbhash` and `thumbHash` isn't clear enough (capitalization of "H"). Could we add some prefixes (eg `encryptedThumbHash`/`decryptedThumbHash`) to clarify things?