Page MenuHomePhabricator

[web] Display encrypted image avatars
ClosedPublic

Authored by bartek on Oct 27 2023, 10:19 AM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Dec 26, 3:47 PM
Unknown Object (File)
Wed, Dec 25, 10:35 AM
Unknown Object (File)
Wed, Dec 25, 3:48 AM
Unknown Object (File)
Sun, Dec 15, 5:51 PM
Unknown Object (File)
Sun, Dec 15, 5:51 PM
Unknown Object (File)
Sun, Dec 15, 5:51 PM
Unknown Object (File)
Sun, Dec 15, 5:51 PM
Unknown Object (File)
Sun, Dec 15, 5:51 PM
Subscribers

Details

Summary

Added possibility to display encrypted image avatars on web.

Test Plan

Requires some further diffs to be able to upload encrypted avatar to blob service.
Opened edit screen on web and selected new avatar. Confirmed it displays in the settings page as well as on the chat list and in the chat.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

bartek held this revision as a draft.

Fix jest and babel being too dumb to understand imports syntax in thumbhash module

bartek published this revision for review.Oct 30 2023, 5:21 AM
bartek added inline comments.
web/package.json
109 ↗(On Diff #32487)

The Avatar component is used in some Jest unit tests and since it's now using components with thumbhash support, it failed because that module wasn't transpiled correctly

atul added inline comments.
web/media/encrypted-multimedia.react.js
87 ↗(On Diff #32487)

Nit: Not sure if this counts as "ternary in JSX," but would be good to skim https://www.notion.so/commapp/Use-ternary-conditionals-sparingly-f4ba44a10259403592a1d15440a9847e and see if this "complies" with team style

web/package.json
109 ↗(On Diff #32487)

Thanks for explaining

This revision is now accepted and ready to land.Nov 2 2023, 10:25 AM
web/media/encrypted-multimedia.react.js
87 ↗(On Diff #32487)

Technically, it complies:

  1. it's not nested
  2. it's not inside JSX, but rather wraps it
  3. formatting is clear to me

It's arguable, but tried the if-else too and it doesn't look much better

if (!source && !invisibleLoad) {
  if (props.loadingIndicatorComponent) {
    loadingIndicator = props.loadingIndicatorComponent
  } else {
    loadingIndicator = (
      <LoadingIndicator
        status="loading"
        size="large"
        color="white"
        loadingClassName={css.loadingIndicator}
      />
    );
  }
}