Skip to content

feat(skin): add title display to minimal skin#1604

Draft
Jerricho93 wants to merge 3 commits into
videojs:mainfrom
Jerricho93:pr/title-minimal
Draft

feat(skin): add title display to minimal skin#1604
Jerricho93 wants to merge 3 commits into
videojs:mainfrom
Jerricho93:pr/title-minimal

Conversation

@Jerricho93

Copy link
Copy Markdown
Collaborator

Warning

Blocked by #1603 — do not review or merge until feat: add title display and media metadata state (#1603) is merged first. The diff here includes all of PR #1603's changes; once that lands, this PR's diff will shrink to only the minimal skin files.

Summary

  • Add <media-title> / Title.Value to minimal skin templates (HTML and React, CSS and Tailwind variants)
  • Create minimal/css/components/title.css and minimal/tailwind/components/title.ts with the same fade-in behavior as the default skin
  • Update minimal skin overlay gradient to match the default skin: softer dual-direction scrim (0.3/0.15 top, 0.5/0.3 bottom) replacing the original single-direction dark gradient

Test plan

  • Sandbox: switch to minimal skin → title fades in with controls on first load (no need to switch skins first)
  • Verify overlay brightness matches the default skin
  • pnpm typecheck
  • pnpm lint
  • pnpm check:workspace

Jerricho93 and others added 2 commits May 26, 2026 13:38
Introduces MetadataFeature with title state, TitleCore/TitleElement
(HTML), Title.Value (React), and default skin styling. Includes:
- metadataFeature with setTitle and MediaSession sync
- <media-title> / Title.Value components reading from store
- Play button aria-label enriched with title when set
- Default skin overlay/title CSS and Tailwind variants
- Sandbox sources wired with title; site API reference page

Closes videojs#1123

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds media-title to minimal skin templates (HTML and React) and
creates the corresponding CSS/Tailwind styling. Adjusts the
overlay gradient to match the default skin (softer dual-direction
scrim, no fixed pixel stops).

Depends on: pr/title-core-default

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel

vercel Bot commented May 26, 2026

Copy link
Copy Markdown

@Jerricho93 is attempting to deploy a commit to the Mux Team on Vercel.

A member of the Team first needs to authorize it.

@netlify

netlify Bot commented May 26, 2026

Copy link
Copy Markdown

👷 Deploy request for vjs10-site pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit 5853759

Bottom gradient always visible; top gradient activates only when
a title is present via :has([data-has-title]). CSS and Tailwind
implementations aligned to match the default skin pattern.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

1 participant