@arraypress/waveform-player 1.8.1 → 1.10.0

package/index.d.ts

@@ -127,6 +127,12 @@ export interface WaveformPlayerOptions {
 	// ── Layout / UI toggles ───────────────────────────────────────
 	/** Play-button alignment. @default 'auto' */
 	buttonAlign?: ButtonAlign;
+	/**
+	 * Player layout. `'preview'` centers the title under the waveform and trims
+	 * the meta row (time/speed/BPM) — ideal for sample-pack previews.
+	 * @default 'default'
+	 */
+	layout?: 'default' | 'preview';
 	/** Show transport controls. @default true */
 	showControls?: boolean;
 	/** Show the info (title/subtitle) block. @default true */
@@ -329,6 +335,12 @@ export declare class WaveformPlayer {
 		escapeHtml(str: unknown): string;
 		/** Whether a URL uses a safe (`http`/`https`/relative) scheme. */
 		isSafeHref(url: string): boolean;
+		/**
+		 * Parse every recognised `data-*` attribute off an element into a
+		 * sparse options object (the player's full declarative contract).
+		 * Lets wrappers inherit the complete option surface without drifting.
+		 */
+		parseDataAttributes(element: HTMLElement): Partial<WaveformPlayerOptions>;
 	};
 }
 

package/package.json

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

package/src/css/waveform-player.css

@@ -3,6 +3,9 @@
     font-family: inherit;
     color: inherit;
     line-height: var(--waveform-line-height, 1.4);
+    /* Neutral accent for the keyboard-focus ring + active states. Monochrome
+       by default (shadcn-style); override this variable to re-tint it. */
+    --wfp-accent: #71717a;
 }
 
 .waveform-player * {
@@ -302,13 +305,13 @@
 }
 
 .speed-option.active {
-    background: rgba(168, 85, 247, 0.2);
-    color: #a855f7;
+    background: rgba(255, 255, 255, 0.16);
+    color: #fff;
     font-weight: 600;
 }
 
 .waveform-player.waveform-focused {
-    outline: 2px solid rgba(168, 85, 247, 0.5);
+    outline: 2px solid var(--wfp-accent);
     outline-offset: 2px;
     border-radius: 4px;
 }
@@ -320,10 +323,28 @@
 
 /* Only show focus indicator when keyboard navigating (not clicking) */
 .waveform-player:focus-visible {
-    outline: 1px solid rgba(168, 85, 247, 0.3);
+    outline: 1px solid var(--wfp-accent);
     outline-offset: 1px;
 }
 
+/* ==========================================================================
+   'preview' layout — compact, centered title under the waveform, trimmed
+   meta row. Ideal for sample-pack previews and dense grids.
+   ========================================================================== */
+.waveform-layout-preview .waveform-meta {
+    display: none !important;
+}
+
+.waveform-layout-preview .waveform-info {
+    justify-content: center;
+}
+
+.waveform-layout-preview .waveform-text {
+    flex: 0 1 auto;
+    align-items: center;
+    text-align: center;
+}
+
 /* Remove the class-based focus indicator since we're using :focus-visible */
 .waveform-player.waveform-focused {
     outline: none;

package/src/js/core.js

@@ -224,6 +224,13 @@ export class WaveformPlayer {
             }
         }
 
+        // Compact 'preview' layout: centered title under the waveform with the
+        // meta row trimmed. Set via the `layout` option / data-layout="preview".
+        const isPreview = this.options.layout === 'preview';
+        if (isPreview) {
+            this.container.classList.add('waveform-layout-preview');
+        }
+
         // Build play button HTML (conditional)
         const buttonHTML = this.options.showControls ? `
         <button class="waveform-btn" aria-label="Play/Pause" style="
@@ -251,7 +258,7 @@ export class WaveformPlayer {
           <span class="waveform-title" style="color: ${this.options.textColor};"></span>
           ${this.options.subtitle ? `<span class="waveform-subtitle" style="color: ${this.options.textSecondaryColor};">${this.options.subtitle}</span>` : ''}
         </div>
-        <div style="display: flex; align-items: center; gap: 1rem;">
+        <div class="waveform-meta" style="display: flex; align-items: center; gap: 1rem;">
           ${this.options.showBPM ? `
             <span class="waveform-bpm" style="color: ${this.options.textSecondaryColor}; display: none;">
               <span class="bpm-value">--</span> BPM

package/src/js/index.js

@@ -12,12 +12,15 @@
 
 // Import the main class
 import {WaveformPlayer} from './core.js';
-import {formatTime, extractTitleFromUrl, escapeHtml, isSafeHref} from './utils.js';
+import {formatTime, extractTitleFromUrl, escapeHtml, isSafeHref, parseDataAttributes} from './utils.js';
 
 // Expose a small set of pure helpers as a single source of truth so consumers
-// (e.g. @arraypress/waveform-bar) can reuse them instead of shipping divergent
-// copies. Attached to the class so it's reachable from the IIFE global too.
-WaveformPlayer.utils = {formatTime, extractTitleFromUrl, escapeHtml, isSafeHref};
+// (e.g. @arraypress/waveform-bar, @arraypress/waveform-playlist) can reuse them
+// instead of shipping divergent copies. `parseDataAttributes` lets wrappers read
+// the player's full `data-*` option surface off a host element without
+// re-implementing (and drifting from) the contract. Attached to the class so
+// it's reachable from the IIFE global too.
+WaveformPlayer.utils = {formatTime, extractTitleFromUrl, escapeHtml, isSafeHref, parseDataAttributes};
 
 /**
  * Whether we're running in a browser (vs. SSR / Node), where `window` and

package/src/js/themes.js

@@ -169,6 +169,11 @@ export const DEFAULT_OPTIONS = {
 
     // Layout Options
     buttonAlign: 'auto',
+    // Player layout. 'default' = play button + waveform with a left-aligned
+    // info row below. 'preview' = compact: the title is centered under the
+    // waveform and the meta row (time / speed / BPM) is trimmed — ideal for
+    // sample-pack sample previews and dense grids.
+    layout: 'default',
 
     // Default waveform style
     waveformStyle: 'mirror',

package/src/js/utils.js

@@ -137,6 +137,7 @@ export function parseDataAttributes(element) {
     setNum('barSpacing');
     setNum('barRadius');
     if (element.dataset.buttonAlign) options.buttonAlign = element.dataset.buttonAlign;
+    if (element.dataset.layout) options.layout = element.dataset.layout;
 
     // Color preset
     if (element.dataset.colorPreset) options.colorPreset = element.dataset.colorPreset;