Page MenuHomePhabricator

[web] Add loadable video component
ClosedPublic

Authored by bartek on May 23 2023, 7:29 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Apr 6, 1:26 AM
Unknown Object (File)
Thu, Apr 4, 1:35 AM
Unknown Object (File)
Feb 23 2024, 9:13 PM
Unknown Object (File)
Feb 23 2024, 9:13 PM
Unknown Object (File)
Feb 23 2024, 9:03 PM
Unknown Object (File)
Feb 23 2024, 8:32 PM
Unknown Object (File)
Feb 23 2024, 7:15 PM
Unknown Object (File)
Feb 23 2024, 5:42 PM
Subscribers

Details

Summary

Extracted the video logic from D7902 as this will also be needed for modals.
This component is intended to display thumbnail while video is loading. And while thumbnail is decrypted/loaded, the thumbhash is displayed. The component also supports encrypted thumbnails.

Test Plan

Tested together with D7902

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.May 23 2023, 8:09 AM
bartek added inline comments.
web/media/loadable-video.react.js
19–29 ↗(On Diff #26901)
ashoat requested changes to this revision.May 23 2023, 1:08 PM
ashoat added inline comments.
web/media/loadable-video.react.js
29 ↗(On Diff #26901)

I'd like to show the thumbnailURI as soon as it's loaded, rather than waiting for the whole video to be loaded. More context in my comment on D7902, but it should be a simple change here I think...

React.useEffect(() => {
  (async () => {
    // video thumbnail is used as a poster image when the video is loaded
    // preload it so the browser can immediately load it from cache
    if (!thumbnailURI) {
      return;
    }
    await preloadImage(thumbnailURI);
    setThumbnailLoaded(true);
  })();
}, [thumbnailURI]);

const poster = isThumbnailLoaded ? thumbnailURI : thumbHashDataURL;

Do you think that would work?

This revision now requires changes to proceed.May 23 2023, 1:08 PM
  • Changed logic to display actual video thumbnail as soon as possible
  • Added support for encrypted video thumbnails
  • Added a forwardRef to the video element which will be needed for encrypted media

The whole approach and diff tree changes discussed in D7902

ashoat added inline comments.
web/media/loadable-video.react.js
20–22 ↗(On Diff #26920)

Found myself wondering in what scenarios uri and thumbHashDataURL will not be set. Answered them by reading later parts of the stack:

  1. uri is not set for encrypted videos until the decryption concludes and a file URI is available for the actual video (happens in D7900)
  2. thumbHashDataURL is not set for newly-uploaded videos until the Thumbhash generation (handled by D7901) completes and the value is available (rendered in D7947)
This revision is now accepted and ready to land.May 24 2023, 9:00 AM