@arraypress/waveform-player 1.13.0 → 1.14.0

package/index.d.ts

@@ -139,6 +139,13 @@ export interface WaveformPlayerOptions {
 	 * @default 'circle'
 	 */
 	buttonStyle?: 'circle' | 'minimal';
+	/**
+	 * Play/pause button size. A number is treated as px; a string (e.g. `'4rem'`)
+	 * is used verbatim. Sets the `--wfp-btn-size` CSS variable, scaling both the
+	 * `circle` and `minimal` styles — box and glyph — proportionally.
+	 * @default null
+	 */
+	buttonSize?: number | string | null;
 	/** Show transport controls. @default true */
 	showControls?: boolean;
 	/** Show the info (title/subtitle) block. @default true */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arraypress/waveform-player",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "Lightweight, customizable audio player with waveform visualization",
   "type": "module",
   "types": "./index.d.ts",

package/src/css/waveform-player.css

@@ -27,11 +27,15 @@
     position: relative;
 }
 
-/* Play button */
+/* Play button.
+   Size knob: set `--wfp-btn-size` (via the `buttonSize` option /
+   `data-button-size`) to scale BOTH button styles — box AND glyph —
+   proportionally. Defaults to 36px; every dimension below derives from it so
+   there is a single source of truth (no per-style magic numbers to drift). */
 .waveform-btn {
-    width: 36px;
-    height: 36px;
-    min-width: 36px;
+    width: var(--wfp-btn-size, 36px);
+    height: var(--wfp-btn-size, 36px);
+    min-width: var(--wfp-btn-size, 36px);
     border-radius: 50%;
     border: 2px solid currentColor;
     background: transparent;
@@ -58,10 +62,12 @@
     /* A FIXED box is essential: toggling the play glyph (which is optically
        nudged 1px) for the pause glyph would otherwise change the button's
        auto width, shifting the adjacent waveform — and re-sampling its bars —
-       on every play/pause. Fixed width keeps the canvas (and bars) stable. */
-    width: 2.25rem;
-    height: 2.25rem;
-    min-width: 2.25rem;
+       on every play/pause. Fixed width keeps the canvas (and bars) stable.
+       Sized (1.1×) so the bare glyph reads at the same visual weight as the
+       circle button — the glyph, not a ring, is the whole control here. */
+    width: calc(var(--wfp-btn-size, 36px) * 1.1);
+    height: calc(var(--wfp-btn-size, 36px) * 1.1);
+    min-width: calc(var(--wfp-btn-size, 36px) * 1.1);
     border: none;
     border-radius: 0;
     opacity: 0.7;
@@ -72,9 +78,12 @@
     transform: none;
 }
 
-.waveform-btn-minimal svg {
-    width: 28px;
-    height: 28px;
+/* NOTE: must out-specify `.waveform-btn svg { width:16px }` below — that rule
+   has equal specificity but later source order, so it was pinning the minimal
+   glyph to 16px. The compound `.waveform-btn.waveform-btn-minimal` wins. */
+.waveform-btn.waveform-btn-minimal svg {
+    width: calc(var(--wfp-btn-size, 36px) * 0.94);
+    height: calc(var(--wfp-btn-size, 36px) * 0.94);
 }
 
 .waveform-btn:disabled {
@@ -92,8 +101,8 @@
 }
 
 .waveform-btn svg {
-    width: 16px;
-    height: 16px;
+    width: calc(var(--wfp-btn-size, 36px) * 0.45);
+    height: calc(var(--wfp-btn-size, 36px) * 0.45);
     fill: currentColor;
     display: block;
 }

package/src/js/core.js

@@ -246,6 +246,7 @@ export class WaveformPlayer {
         <button class="waveform-btn${this.options.buttonStyle === 'minimal' ? ' waveform-btn-minimal' : ''}" aria-label="Play/Pause" style="
             border-color: ${this.options.buttonColor};
             color: ${this.options.buttonColor};
+            ${this.options.buttonSize != null ? `--wfp-btn-size: ${typeof this.options.buttonSize === 'number' ? `${this.options.buttonSize}px` : this.options.buttonSize};` : ''}
         ">
           <span class="waveform-icon-play">${this.options.playIcon}</span>
           <span class="waveform-icon-pause" style="display:none;">${this.options.pauseIcon}</span>

package/src/js/themes.js

@@ -181,6 +181,11 @@ export const DEFAULT_OPTIONS = {
     // 'minimal' = a bare play/pause glyph with no circle — the look sample-pack
     // and beat stores use in their preview grids.
     buttonStyle: 'circle',
+    // Play/pause button size. null = the stylesheet default (36px circle /
+    // proportional minimal). A number is treated as px; a string (e.g. '4rem')
+    // is used verbatim. Sets the `--wfp-btn-size` CSS var, which scales BOTH
+    // styles — box and glyph — proportionally.
+    buttonSize: null,
 
     // Default waveform style
     waveformStyle: 'mirror',

package/src/js/utils.js

@@ -139,6 +139,12 @@ export function parseDataAttributes(element) {
     if (element.dataset.buttonAlign) options.buttonAlign = element.dataset.buttonAlign;
     if (element.dataset.layout) options.layout = element.dataset.layout;
     if (element.dataset.buttonStyle) options.buttonStyle = element.dataset.buttonStyle;
+    // buttonSize: a bare number is px (data-button-size="64"); a unit string
+    // (e.g. "4rem") is kept verbatim.
+    if (element.dataset.buttonSize) {
+        const bs = element.dataset.buttonSize;
+        options.buttonSize = /^\d+(\.\d+)?$/.test(bs.trim()) ? parseFloat(bs) : bs;
+    }
 
     // Color preset
     if (element.dataset.colorPreset) options.colorPreset = element.dataset.colorPreset;