Skip to content

feat: configurable footer player width via size attribute (#62)#68

Merged
adurrr merged 1 commit into
mainfrom
feat/footer-size-attribute
Jun 28, 2026
Merged

feat: configurable footer player width via size attribute (#62)#68
adurrr merged 1 commit into
mainfrom
feat/footer-size-attribute

Conversation

@adurrr

@adurrr adurrr commented Jun 28, 2026

Copy link
Copy Markdown
Owner

A new size attribute on <podcast-footer> controls the bar's visual footprint through CSS custom properties:

  • size="small" (default): the current compact bar. 36px cover, 140px info column, 32px buttons.
  • size="medium": a wider bar with a 48px cover, 240px info column, 36px buttons, larger fonts.
  • size="large": a full-bleed banner with a 64px cover, 400px info column, 44-56px buttons, the largest fonts.

On viewports narrower than 768px, all three variants collapse to the same compact layout. Unknown values fall back to small. The attribute is purely visual; persistence, playback, and the audio source URL are unaffected.

Changes

  • assets/js/podcast-player.js:
    • PodcastFooter.observedAttributes += "size"
    • attributeChangedCallback adds a size no-op branch (CSS handles the visual change)
    • Shadow DOM style: two new :host([size="..."]) blocks declare 13 --podcast-footer-* custom properties each
    • Existing rules updated to consume the new vars with original hardcoded values as fallbacks (default = byte-equivalent to today)
    • Mobile media query extended to override the size vars for both medium and large, so all three sizes collapse to the compact layout on narrow viewports
  • exampleSite/layouts/_default/baseof.html: size="medium" added to the default footer to demonstrate the feature
  • exampleSite/content/docs/homepage-setup.md (+ ES mirror): new ## Footer Size H2 section
  • CHANGELOG.md: bullet under [Unreleased] / ### Added
  • tests/js/web-component.test.js: 13 new Vitest unit tests
  • tests/e2e/player.spec.js: 6 new Playwright E2E tests (incl. cover-width assertions at each size + responsive collapse + Turbolinks persistence)

Test plan

  • npx vitest run - 134/134 tests pass (121 pre-existing + 13 new)
  • npx playwright test ... tests/e2e/player.spec.js - 34/34 tests pass (28 pre-existing + 6 new), including computed-style assertions at each size
  • No em-dashes in any new doc or CHANGELOG content
  • Manual smoke test against the example site recommended before merge

Closes #62

The size attribute on <podcast-footer> controls the bar's visual
footprint through CSS custom properties: "small" (default) keeps the
current compact layout, "medium" widens the bar with a larger cover
and controls, and "large" reserves the most room for long titles.
On viewports narrower than 768px, all three variants collapse to the
same compact layout. The attribute is purely visual; persistence,
playback, and the audio source URL are unaffected.
@adurrr adurrr merged commit 296344d into main Jun 28, 2026
4 checks passed
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.

feat: configurable footer player width via size attribute (small / medium / large)

1 participant