Page MenuHomePhabricator

[web] Support thumbhash in modals
ClosedPublic

Authored by bartek on Tue, May 23, 7:34 AM.
Tags
None
Referenced Files
F570618: D7947.id26900.diff
Sat, Jun 3, 1:29 PM
F570322: D7947.id26922.diff
Fri, Jun 2, 11:42 PM
Unknown Object (File)
Mon, May 29, 1:27 PM
Subscribers

Details

Summary

This adds support for thumb hash in modals. Unfortunately, CSS in encrypted media does not know its width and height so had to do measuring magic to get it to work with thumbhash, before actual src is available. Encrypted video support is added in D7900

Test Plan

Throttled network, slowed down decryption. Ensured the loading behavior is the same as for in-chat media (both non-encrypted images and videos). Resized browser window. Ensured the aspect ratio is maintained.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

bartek held this revision as a draft.
bartek published this revision for review.Tue, May 23, 8:12 AM
bartek added inline comments.
web/media/multimedia-modal.react.js
149 ↗(On Diff #26900)

Unfortunately, CSS in encrypted media does not know its width and height before its decrypted so we need this to resize the thumbhash image manually. This function does the same as the following CSS:

width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
display: block;
ashoat added inline comments.
web/media/multimedia-modal.react.js
73–77 ↗(On Diff #26900)

Seems like we could move this inside the conditional on line 78, to make it clear it's only used for that case

149 ↗(On Diff #26900)

Thanks for explaining!

web/media/multimedia.react.js
100–112 ↗(On Diff #26900)

I think if you rebase on the latest version of D7902, this change will be gone

This revision is now accepted and ready to land.Tue, May 23, 1:15 PM
bartek edited the test plan for this revision. (Show Details)
bartek edited the summary of this revision. (Show Details)

Reworked the diff to the new approach. The only significant change here is that one usage of the state defined in this diff is moved to D7900.

The whole approach and diff tree changes discussed in D7902

web/media/multimedia-modal.react.js
48–50 ↗(On Diff #26922)

This state is used in the next diff: D7900

ashoat added inline comments.
web/media/multimedia-modal.react.js
53–58 ↗(On Diff #26922)

Arguably this way is cleaner, but both work

This revision was automatically updated to reflect the committed changes.