Skip to content

WEBDEV-8965: Migrate playback-controls into elements - #80

Open
jbuckner wants to merge 2 commits into
WEBDEV-8964-migrate-waveform-progressfrom
WEBDEV-8965-migrate-playback-controls
Open

WEBDEV-8965: Migrate playback-controls into elements#80
jbuckner wants to merge 2 commits into
WEBDEV-8964-migrate-waveform-progressfrom
WEBDEV-8965-migrate-playback-controls

Conversation

@jbuckner

@jbuckner jbuckner commented Aug 27, 2026

Copy link
Copy Markdown
Collaborator

WEBDEV-8965. Stacked on #78, part of WEBDEV-8962.

Beyond the move:

  • PlaybackMode was a numeric enum, which erasableSyntaxOnly rules out. It's a const object with string values now, so playbackmode="playing" works as an attribute. It never did: the component declared @property({ type: PlaybackMode }), which isn't a Lit converter, so the attribute path fell back to String and could only produce a string where the code compared against 0/1.
  • All seven buttons have accessible names. None had one before.
  • Icons use currentColor instead of hardcoded #fff/#333, so the controls can sit on a light background. The default variable values reproduce the old colours exactly.
  • Speed and volume clamp as well as wrap. An off-boundary value set from outside used to overshoot the range, and the === comparisons meant it could climb forever without ever hitting the wrap.
  • .jump-btn:active targets the button rather than an img. The icons are inline SVG, so the old rule matched nothing and the jump buttons had no pressed state.

The speed button's label stops at the number rather than saying "1 times" — @lit/localize has no plural support, so a unit baked into the string can't be corrected per language.

Event names are unchanged, mixed kebab-case and camelCase and all, because radio-player listens for them later in this stack.

Note: this PR shows only deploy-preview because CI skips PRs not based on main (WEBDEV-8972). Verified locally: pnpm run build, full suite 248 passing, eslint and prettier clean, 100% coverage on this component.

Move @internetarchive/playback-controls out of the iaux monorepo as
ia-playback-controls. Third of seven.

- PlaybackMode was a numeric enum, which erasableSyntaxOnly rules out. It's
  a const object with string values now, so playbackmode="playing" works as
  an attribute. It never did before: the component declared
  @Property({ type: PlaybackMode }), which isn't a Lit converter, so the
  attribute path quietly fell back to String and could only ever have
  produced a string where the code compared against 0 or 1.
- All seven buttons have accessible names now. None of them had one, so a
  screen reader announced seven unlabelled buttons.
- The icons use currentColor instead of hardcoded #fff and #333, so the
  controls can sit on a light background. The default variable values
  reproduce the old colours exactly.
- Speed and volume clamp to their range as well as wrapping. A value set
  from outside that isn't on a 0.25 boundary used to overshoot, and with ===
  comparisons it could climb forever without ever hitting the wrap.
- .jump-btn:active targets the button rather than an img. The icons are
  inline SVG, so the old rule matched nothing and the jump buttons had no
  pressed state at all.

The speed button's label deliberately stops at the number rather than
saying "1 times". @lit/localize has no plural support, so a unit baked into
the string can't be fixed per language.

Event names are left alone, mixed kebab-case and camelCase and all, because
radio-player listens for them later in this stack.

Claude-Session: https://claude.ai/code/session_01U6iNyGicKJywdrWJMTyFin

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Aug 27, 2026

Copy link
Copy Markdown
PR Preview Action v1.8.1

🚀 View preview at
https://internetarchive.github.io/elements/pr/pr-80/

Built to branch ghpages at 2026-08-27 20:28 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

…-migrate-playback-controls

* WEBDEV-8964-migrate-waveform-progress:
  WEBDEV-8972: Run CI on every PR, not just ones based on main (#90)
@codecov-commenter

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 86.66667% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 81.04%. Comparing base (f08bfcd) to head (55d2409).

Files with missing lines Patch % Lines
...ia-playback-controls/ia-playback-controls-story.ts 53.84% 5 Missing and 1 partial ⚠️
Additional details and impacted files
@@                            Coverage Diff                            @@
##           WEBDEV-8964-migrate-waveform-progress      #80      +/-   ##
=========================================================================
+ Coverage                                  80.51%   81.04%   +0.52%     
=========================================================================
  Files                                         31       34       +3     
  Lines                                       1047     1092      +45     
  Branches                                     245      254       +9     
=========================================================================
+ Hits                                         843      885      +42     
- Misses                                       133      135       +2     
- Partials                                      71       72       +1     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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.

2 participants