Skip to content

feat(player): add speed control with popup menu and CSS theming#241

Merged
miguel-heygen merged 1 commit intomainfrom
feat/player-speed-control
Apr 10, 2026
Merged

feat(player): add speed control with popup menu and CSS theming#241
miguel-heygen merged 1 commit intomainfrom
feat/player-speed-control

Conversation

@miguel-heygen
Copy link
Copy Markdown
Collaborator

@miguel-heygen miguel-heygen commented Apr 10, 2026

Summary

  • Adds a playback speed control to the <hyperframes-player> controls bar with a popup menu (0.25x, 0.5x, 1x, 1.5x, 2x, 4x)
  • Customizable speed presets via speed-presets attribute (e.g. speed-presets="0.5,1,2")
  • Full CSS custom property theming — consumers can override colors, fonts, spacing, and menu styles from outside the shadow DOM
  • Dispatches ratechange event when speed changes
  • Fixes package.json export condition ordering (script before import/require)

Customization

Custom presets:

<hyperframes-player controls speed-presets="0.5,1,1.5,2"></hyperframes-player>

CSS theming:

hyperframes-player {
  --hfp-accent: #ff6b6b;
  --hfp-controls-bg: linear-gradient(transparent, rgba(0,0,0,0.9));
  --hfp-font: "Inter", sans-serif;
  --hfp-menu-bg: rgba(15,15,15,0.95);
}

Test plan

  • bun run test — 11/11 tests pass (4 new for SPEED_PRESETS + formatSpeed)
  • bun run build — full monorepo build passes
  • Pre-commit hooks pass (lint, format, typecheck, commitlint)
  • Manual: open test page, click speed button, verify popup menu appears
  • Manual: select different speeds, verify playback rate changes
  • Manual: verify menu closes on outside click
  • Manual: verify CSS custom properties override styles

Add playback speed control to the player controls bar:
- Popup menu with logarithmic presets (0.25x-4x)
- Custom presets via speed-presets attribute
- Full CSS custom property theming (--hfp-accent, --hfp-controls-bg, etc.)
- ratechange event dispatch
- Exports: SPEED_PRESETS, formatSpeed, ControlsOptions
- Fix package.json export condition ordering
@miguel-heygen miguel-heygen merged commit 0da93ce into main Apr 10, 2026
14 checks passed
@miguel-heygen miguel-heygen deleted the feat/player-speed-control branch April 10, 2026 18:47
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