From 5e798cad1f7a4f198ab1ca36b083b07676c3c73e Mon Sep 17 00:00:00 2001 From: Adur Date: Sun, 28 Jun 2026 12:40:15 +0200 Subject: [PATCH] feat: configurable footer player width via size attribute (#62) The size attribute on 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. --- CHANGELOG.md | 5 + assets/js/podcast-player.js | 85 +++++-- exampleSite/content/docs/homepage-setup.md | 16 ++ exampleSite/content/es/docs/homepage-setup.md | 16 ++ exampleSite/layouts/_default/baseof.html | 2 +- tests/e2e/player.spec.js | 143 ++++++++++++ tests/js/web-component.test.js | 211 ++++++++++++++++++ 7 files changed, 463 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d4e782e..c094c2b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). - `url` shortcode parameter on `podcast-player` controls the footer source link: a URL makes the label clickable, `"none"` hides it, omitted auto-derives from the audio source (#64). +- `size` attribute on `` controls the bar's visual + footprint: `"small"` (default) keeps the compact layout, `"medium"` + widens the bar with larger cover and controls, and `"large"` reserves + the most room for long titles; all three collapse to the compact + layout on narrow viewports (#62). ## [1.3.0] - 2026-06-16 diff --git a/assets/js/podcast-player.js b/assets/js/podcast-player.js index 71d81c0..86bcb23 100644 --- a/assets/js/podcast-player.js +++ b/assets/js/podcast-player.js @@ -1711,7 +1711,7 @@ class PodcastFooter extends HTMLElement { * override applies whether the attribute is present at parse time or * changed at runtime via JavaScript. */ static get observedAttributes() { - return ["url"]; + return ["url", "size"]; } attributeChangedCallback(name, oldValue, newValue) { @@ -1727,6 +1727,10 @@ class PodcastFooter extends HTMLElement { this._setSourceLink(newValue || ""); } } + } else if (name === "size") { + // No imperative work needed; the visual change is driven entirely by + // the :host([size="..."]) CSS selectors in the shadow style block. + // Unknown values are ignored by CSS, falling back to the default. } } @@ -1737,31 +1741,67 @@ class PodcastFooter extends HTMLElement {