@arraypress/waveform-bar 1.3.1 → 1.4.0

package/src/js/dom.js

@@ -40,6 +40,8 @@ export function buildBarHTML(config) {
     left += '</div>';
 
     // --- Centre zone: waveform + time ---
+    // In classic mode (`waveform: false`) the embedded player renders its own
+    // built-in 'seekbar' style into this same container (see _initPlayer).
     const centre = `<div class="wb-centre">
         <div class="wb-waveform-container"></div>
         <div class="wb-time"><span class="wb-time-current">0:00</span> / <span class="wb-time-total">0:00</span></div>
@@ -74,11 +76,22 @@ export function buildBarHTML(config) {
         right += '</div>';
     }
 
+    if (config.share) {
+        right += `<button class="wb-btn wb-btn-sm wb-share" aria-label="Share" title="Copy share link">${ICONS.share}</button>`;
+    }
+
     if (config.showQueue) {
         right += `<button class="wb-btn wb-btn-sm wb-queue-btn" aria-label="Queue" title="Queue">${ICONS.queue}</button>`;
     }
 
     right += '</div>';
 
-    return `<div class="wb-inner">${left}${centre}${right}</div>`;
+    // Collapse-to-pill toggle. A direct child of .wb-inner (its own zone) so
+    // the collapsed-pill CSS can hide .wb-centre/.wb-right while keeping this
+    // button visible as the "expand" affordance.
+    const collapse = config.collapsible
+        ? `<button class="wb-btn wb-btn-sm wb-collapse" aria-label="Collapse" title="Collapse">${ICONS.collapse}</button>`
+        : '';
+
+    return `<div class="wb-inner">${left}${centre}${right}${collapse}</div>`;
 }

package/src/js/icons.js

@@ -9,7 +9,10 @@ export const ICONS = {
     prev: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>',
     next: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>',
     queue: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>',
+    share: '<svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>',
     music: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" opacity="0.5"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55C7.79 13 6 14.79 6 17s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>',
+    collapse: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>',
+    expand: '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>',
     volHigh: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>',
     volLow: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/></svg>',
     volMute: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>',

package/src/js/utils.js

@@ -27,6 +27,30 @@ export function escapeHtml(str) {
     return d.innerHTML;
 }
 
+/**
+ * Whether a URL is safe to navigate to (assign to `location.href`).
+ * Allows only `http`/`https` and relative URLs, rejecting `javascript:`,
+ * `data:`, `blob:`, `vbscript:` and other script-bearing schemes.
+ *
+ * TODO(harden): adopt `WaveformPlayer.utils.isSafeHref` once the peer dep
+ * is bumped to ^1.8.0 (which ships this helper). Inlined here so the
+ * open-redirect / XSS guard is fixed without a peer bump.
+ *
+ * @param {string} url
+ * @returns {boolean}
+ */
+export function isSafeHref(url) {
+    if (typeof url !== 'string' || url === '') return false;
+    try {
+        // Resolve relative URLs against the current document; only the
+        // scheme matters for the safety decision.
+        const u = new URL(url, location.href);
+        return u.protocol === 'http:' || u.protocol === 'https:';
+    } catch (e) {
+        return false;
+    }
+}
+
 /**
  * Format seconds to M:SS
  * @param {number} seconds
@@ -48,11 +72,32 @@ export function parseTrackFromElement(el) {
     const url = el.dataset.wbUrl || el.dataset.url;
     if (!url) return null;
 
+    // Parse + shape-coerce. JSON.parse only validates the syntax — a value
+    // like '"x"' or '[1,2]' parses cleanly but is the wrong shape and would
+    // strand the bar downstream (e.g. `.map()` on a non-array). Coerce each
+    // field to the shape the rest of the code expects.
     let meta = {};
-    try { meta = JSON.parse(el.dataset.wbMeta || el.dataset.meta || '{}'); } catch (e) {}
+    try {
+        const parsed = JSON.parse(el.dataset.wbMeta || el.dataset.meta || '{}');
+        meta = (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) ? parsed : {};
+    } catch (e) {}
+
+    let markers = [];
+    try {
+        const parsed = JSON.parse(el.dataset.wbMarkers || el.dataset.markers || 'null');
+        markers = Array.isArray(parsed) ? parsed : [];
+    } catch (e) {}
+    // Coerce each marker time to a finite number; drop entries that aren't
+    // usable objects or whose time can't be parsed.
+    markers = markers
+        .map(m => (m && typeof m === 'object') ? {...m, time: Number(m.time)} : null)
+        .filter(m => m && Number.isFinite(m.time));
 
-    let markers = null;
-    try { markers = JSON.parse(el.dataset.wbMarkers || el.dataset.markers || 'null'); } catch (e) {}
+    let waveform = null;
+    try {
+        const parsed = JSON.parse(el.dataset.wbWaveform || el.dataset.waveform || 'null');
+        waveform = Array.isArray(parsed) ? parsed : null;
+    } catch (e) {}
 
     return {
         url,
@@ -65,7 +110,7 @@ export function parseTrackFromElement(el) {
         duration: el.dataset.wbDuration || el.dataset.duration || '',
         bpm: el.dataset.wbBpm || el.dataset.bpm || '',
         key: el.dataset.wbKey || el.dataset.key || '',
-        waveform: el.dataset.wbWaveform || el.dataset.waveform || '',
+        waveform,
         markers,
         favorited: el.dataset.wbFavorited === 'true',
         inCart: el.dataset.wbInCart === 'true',