Skip to content

feat(core): add mute button component#455

Merged
mihar-22 merged 2 commits intomainfrom
feat/mute-button
Feb 4, 2026
Merged

feat(core): add mute button component#455
mihar-22 merged 2 commits intomainfrom
feat/mute-button

Conversation

@mihar-22
Copy link
Copy Markdown
Member

@mihar-22 mihar-22 commented Feb 4, 2026

Closes #268

Summary

Implement the MuteButton component for toggling media mute state. Includes core interaction logic, data attributes for styling, and platform implementations for HTML custom elements and React. Also aligns PlayButton API for consistency.

Changes

  • Core MuteButtonCore class with state derivation (muted, volumeLevel levels: off/low/medium/high)
  • HTML MuteButtonElement custom element with Lit reactive properties
  • React MuteButton component with render prop support and ref forwarding
  • Enhanced state-data-attrs utilities to support explicit attribute mapping (e.g., data-volume-level instead of data-volumelevel)
  • Added stateAttrMap parameter to React's renderElement for consistent attribute naming
  • Convert PlayButtonDataAttrs from enum to const object for consistency

PlayButton alignment

  • Move logMissingFeature from update() to connectedCallback() for consistency
  • Support function labels: label={(state) => state.paused ? 'Start' : 'Stop'}

Testing

pnpm -F @videojs/core test src/core/ui/mute-button
pnpm -F @videojs/core test src/core/ui/play-button
pnpm -F @videojs/core test src/dom/utils/tests/state-data-attrs
pnpm -F @videojs/react test src/utils/tests/use-render

- Core logic class with state derivation (muted, volumeLevel)
- HTML custom element (MuteButtonElement)
- React component with render prop support
- Enhanced state-data-attrs with explicit attribute mapping
- Convert PlayButtonDataAttrs from enum to const object

Closes #268
@vercel
Copy link
Copy Markdown

vercel bot commented Feb 4, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
vjs-10-demo-react Ignored Ignored Preview Feb 4, 2026 0:07am

Request Review

@netlify
Copy link
Copy Markdown

netlify bot commented Feb 4, 2026

Deploy Preview for vjs10-site failed. Why did it fail? →

Name Link
🔨 Latest commit eb836c8
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/6983369c59e1a60008a4e3b8

- Move logMissingFeature from update() to connectedCallback()
- Support function labels: label={(state) => state.paused ? 'Start' : 'Stop'}
- Add tests for function label behavior
@mihar-22 mihar-22 changed the title feat(packages): add MuteButton component feat(packages): add mute button component Feb 4, 2026
@mihar-22 mihar-22 changed the title feat(packages): add mute button component feat(core): add mute button component Feb 4, 2026
@mihar-22 mihar-22 merged commit aa189ee into main Feb 4, 2026
4 of 8 checks passed
@mihar-22 mihar-22 deleted the feat/mute-button branch February 4, 2026 12:10
@github-actions github-actions bot mentioned this pull request Feb 4, 2026
@github-actions github-actions bot mentioned this pull request Feb 26, 2026
@github-actions github-actions bot mentioned this pull request Mar 10, 2026
@luwes luwes mentioned this pull request Apr 11, 2026
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.

UI: Mute Button Component

1 participant