Skip to content

feat: add Video component - #459

Open
braianj wants to merge 1 commit into
masterfrom
feat/video-component
Open

feat: add Video component#459
braianj wants to merge 1 commit into
masterfrom
feat/video-component

Conversation

@braianj

@braianj braianj commented Jul 23, 2026

Copy link
Copy Markdown
Collaborator

Adds a thin, autoplay-safe wrapper over a native <video>. Consuming apps (sites) hand-roll this same element to drive background/hero videos; this promotes it into the shared library.

Behavior:

  • When play is a boolean, the component imperatively plays/pauses the element.
  • If the browser blocks autoplay with sound, it retries muted before giving up (the common mobile/Safari autoplay-policy failure).
  • Leave play undefined to fall back to native attribute control (autoPlay, controls, …). All other props are forwarded to the underlying <video>.

ref is intentionally omitted from the public props: the component keeps its own internal ref to control playback, and HTMLProps' legacy string-ref type is incompatible with the library's strict React config.

Public API (Video, VideoProps) exported through src/index.ts. Additive; no existing component or type changed. It currently has 2 in-app consumers (Create/Earn, Create/Hero), and covers a gap ui2's AssetPreviewPlayer/Media don't (a bare autoplay-safe video element).

Verified locally: prettier, eslint, lint:package-json, tsc build (strict) and the jest suite all pass. Storybook stories added (Decentraland UI/Video): native controls and imperative play.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying ui2 with  Cloudflare Pages  Cloudflare Pages

Latest commit: 191cdc3
Status: ✅  Deploy successful!
Preview URL: https://b44039c6.ui2-423.pages.dev
Branch Preview URL: https://feat-video-component.ui2-423.pages.dev

View logs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant