[web] Use video.js to support HLS video playback
ClosedPublic
Actions

Authored by bartek on Sep 14 2025, 10:02 AM.

Details

Reviewers

kamil
tomek

Commits

rCOMM6cddd983d28b: [web] Use video.js to support HLS video playback

Summary

ENG-11252.
Attempt to support HLS videos on web, based on this article and videojs docs.
Used Claude to help generate Flow types based on the library's TypeScript definitions and official docs (TS types are missing for the options object).

Depends on D15343

Test Plan

Farcaster video message is now shown and playable on both Chrome and Safari. Its sizing/responsiveness matches what we have for non-HLS messages.

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

bartek created this revision.Sep 14 2025, 10:02 AM

bartek held this revision as a draft.

Herald added a subscriber: ashoat. · View Herald TranscriptSep 14 2025, 10:02 AM

Harbormaster failed remote builds in B35719: Diff 50296!Sep 14 2025, 10:07 AM

Rebase

Harbormaster failed remote builds in B35722: Diff 50299!Sep 14 2025, 10:26 AM

bartek mentioned this in D15343: [lib] Basic support for viewing video messages.Sep 15 2025, 6:22 AM

Fix responsiveness, add basic Flow definitions

Harbormaster failed remote builds in B35723: Diff 50300!Sep 15 2025, 8:04 AM

bartek edited the summary of this revision. (Show Details)Sep 15 2025, 8:45 AM

bartek edited the test plan for this revision. (Show Details)

bartek published this revision for review.Sep 15 2025, 8:48 AM

bartek added inline comments.

web/media/loadable-video.react.js
109 ↗	(On Diff #50300)	This is to let the player display all controls in its minimal version. The video itself maintains its aspect ratio and maximum height (200px in chat), it only makes the controls bar this wide. The video is centered horizontally relative to the controls bar.

tomek accepted this revision.Sep 15 2025, 2:17 PM

tomek added inline comments.

web/media/loadable-video.react.js
162 ↗	(On Diff #50300)	Is it possible that this effect is executed while `containerRef` is still not set? In that case, we will fail to append a child to it, so the player won't be visible

This revision is now accepted and ready to land.Sep 15 2025, 2:17 PM

bartek added inline comments.Sep 16 2025, 8:49 AM

web/media/loadable-video.react.js
162 ↗	(On Diff #50300)	It will never be null. Refs are mounted to DOM nodes before effects are executed. IIRC, the former happens in the "render" phase, while the later in the "commit" phase of a React component. In fact, I should make this non-nullable (unless Flow disallows me from doing so)