@arraypress/waveform-bar 1.0.0

package/src/js/dom.js

@@ -0,0 +1,84 @@
+/**
+ * @module dom
+ * @description DOM creation for WaveformBar
+ */
+
+import {ICONS} from './icons.js';
+
+/**
+ * Build the bar's inner HTML based on config
+ * @param {Object} config
+ * @returns {string}
+ */
+export function buildBarHTML(config) {
+    // --- Left zone: controls + track info ---
+    let left = '<div class="wb-left">';
+
+    left += '<div class="wb-controls">';
+    if (config.showPrevNext) {
+        left += `<button class="wb-btn wb-prev" aria-label="Previous" title="Previous">${ICONS.prev}</button>`;
+    }
+    left += `<button class="wb-btn wb-play" aria-label="Play/Pause" title="Play">
+        <span class="wb-icon-play">${ICONS.play}</span>
+        <span class="wb-icon-pause" style="display:none">${ICONS.pause}</span>
+    </button>`;
+    if (config.showPrevNext) {
+        left += `<button class="wb-btn wb-next" aria-label="Next" title="Next">${ICONS.next}</button>`;
+    }
+    if (config.showRepeat) {
+        left += `<button class="wb-btn wb-btn-sm wb-repeat" aria-label="Repeat" title="Repeat: Off">${ICONS.repeatOff}</button>`;
+    }
+    left += '</div>';
+
+    left += `<div class="wb-track">
+        <div class="wb-artwork">${ICONS.music}</div>
+        <div class="wb-track-text">
+            <div class="wb-title">No track selected</div>
+            <div class="wb-artist">&mdash;</div>
+        </div>
+    </div>`;
+    left += '</div>';
+
+    // --- Centre zone: waveform + time ---
+    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>
+    </div>`;
+
+    // --- Right zone: meta + actions + volume + queue ---
+    let right = '<div class="wb-right">';
+
+    if (config.showMeta) {
+        right += '<div class="wb-meta"></div>';
+    }
+
+    if (config.actions) {
+        right += '<div class="wb-actions">';
+        if (config.actions.favorite) {
+            right += `<button class="wb-btn wb-btn-sm wb-fav" aria-label="Favorite" title="Favorite">${ICONS.heart}</button>`;
+        }
+        if (config.actions.cart) {
+            right += `<button class="wb-btn wb-btn-sm wb-cart" aria-label="Add to cart" title="Add to Cart">${ICONS.cart}</button>`;
+        }
+        right += '</div>';
+    }
+
+    if (config.showMute || config.showVolume) {
+        right += '<div class="wb-volume">';
+        right += `<button class="wb-btn wb-btn-sm wb-mute" aria-label="Volume" title="Volume">${ICONS.volHigh}</button>`;
+        if (config.showVolume) {
+            right += `<div class="wb-volume-popup">
+                <input type="range" class="wb-volume-slider" min="0" max="100" value="100" orient="vertical" aria-label="Volume">
+            </div>`;
+        }
+        right += '</div>';
+    }
+
+    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>`;
+}

package/src/js/icons.js

@@ -0,0 +1,24 @@
+/**
+ * @module icons
+ * @description SVG icons for WaveformBar (inline, no external deps)
+ */
+
+export const ICONS = {
+    play: '<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>',
+    pause: '<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M6 4h4v16H6zM14 4h4v16h-4z"/></svg>',
+    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>',
+    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>',
+    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>',
+    heart: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
+    heartFilled: '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
+    cart: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>',
+    close: '<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',
+    speaker: '<svg viewBox="0 0 24 24" width="14" height="14" 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.02z"/></svg>',
+    repeatOff: '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/></svg>',
+    repeatAll: '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/></svg>',
+    repeatOne: '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/><text x="12" y="15" text-anchor="middle" font-size="7" font-weight="bold" fill="currentColor">1</text></svg>'
+};

package/src/js/index.js

@@ -0,0 +1,20 @@
+/**
+ * WaveformBar v1.0.0
+ * Persistent bottom audio player bar for WaveformPlayer
+ *
+ * @author ArrayPress
+ * @license MIT
+ */
+
+import {WaveformBar} from './core.js';
+
+// Create singleton instance
+const instance = new WaveformBar();
+
+// Browser global
+if (typeof window !== 'undefined') {
+    window.WaveformBar = instance;
+}
+
+export default instance;
+export {WaveformBar};

package/src/js/queue.js

@@ -0,0 +1,113 @@
+/**
+ * @module queue
+ * @description Queue panel rendering for WaveformBar
+ */
+
+import {ICONS} from './icons.js';
+import {escapeHtml} from './utils.js';
+
+/**
+ * Create the queue panel DOM element
+ * @returns {HTMLElement}
+ */
+export function createQueuePanel() {
+    const el = document.createElement('div');
+    el.className = 'wb-queue-panel';
+    el.innerHTML = `
+        <div class="wb-queue-header">
+            <div class="wb-queue-title">
+                ${ICONS.queue}
+                Queue
+                <span class="wb-queue-count">0</span>
+            </div>
+            <button class="wb-btn wb-btn-sm wb-queue-clear" aria-label="Clear queue">Clear</button>
+        </div>
+        <div class="wb-queue-body"></div>
+    `;
+    return el;
+}
+
+/**
+ * Render queue panel contents
+ * @param {HTMLElement} bodyEl - Queue body element
+ * @param {HTMLElement} countEl - Queue count badge element
+ * @param {Array} queue - Queue array
+ * @param {number} currentIndex - Current playing index
+ * @param {Object} callbacks - { onSkipTo, onRemove }
+ */
+export function renderQueue(bodyEl, countEl, queue, currentIndex, callbacks) {
+    if (!bodyEl) return;
+
+    const upcoming = Math.max(0, queue.length - 1 - currentIndex);
+    if (countEl) countEl.textContent = upcoming;
+
+    if (queue.length === 0) {
+        bodyEl.innerHTML = `<div class="wb-queue-empty">${ICONS.queue}<p>Queue is empty</p></div>`;
+        return;
+    }
+
+    let html = '';
+
+    // Now playing
+    if (currentIndex >= 0 && currentIndex < queue.length) {
+        const current = queue[currentIndex];
+        html += '<div class="wb-queue-label">Now Playing</div>';
+        html += `<div class="wb-queue-item wb-queue-current" data-qi="${currentIndex}">
+            <span class="wb-queue-num">${ICONS.speaker}</span>
+            <div class="wb-queue-info">
+                <div class="wb-queue-item-title">${escapeHtml(current.title)}</div>
+                <div class="wb-queue-item-artist">${escapeHtml(current.artist)}</div>
+            </div>
+        </div>`;
+    }
+
+    // Next up
+    let hasNext = false;
+    for (let i = currentIndex + 1; i < queue.length; i++) {
+        if (!hasNext) {
+            html += '<div class="wb-queue-label">Next Up</div>';
+            hasNext = true;
+        }
+        const t = queue[i];
+        html += `<div class="wb-queue-item" data-qi="${i}">
+            <span class="wb-queue-num">${i - currentIndex}</span>
+            <div class="wb-queue-info">
+                <div class="wb-queue-item-title">${escapeHtml(t.title)}</div>
+                <div class="wb-queue-item-artist">${escapeHtml(t.artist)}</div>
+            </div>
+            <button class="wb-queue-remove" data-qi="${i}" aria-label="Remove">${ICONS.close}</button>
+        </div>`;
+    }
+
+    // Previously played
+    if (currentIndex > 0) {
+        html += '<div class="wb-queue-label">Previously Played</div>';
+        for (let j = currentIndex - 1; j >= 0; j--) {
+            const t = queue[j];
+            html += `<div class="wb-queue-item wb-queue-played" data-qi="${j}">
+                <span class="wb-queue-num">${j + 1}</span>
+                <div class="wb-queue-info">
+                    <div class="wb-queue-item-title">${escapeHtml(t.title)}</div>
+                    <div class="wb-queue-item-artist">${escapeHtml(t.artist)}</div>
+                </div>
+            </div>`;
+        }
+    }
+
+    bodyEl.innerHTML = html;
+
+    // Bind click events
+    bodyEl.querySelectorAll('.wb-queue-item[data-qi]').forEach(el => {
+        el.addEventListener('click', (e) => {
+            if (e.target.closest('.wb-queue-remove')) return;
+            if (callbacks.onSkipTo) callbacks.onSkipTo(parseInt(el.dataset.qi));
+        });
+    });
+
+    bodyEl.querySelectorAll('.wb-queue-remove').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            if (callbacks.onRemove) callbacks.onRemove(parseInt(btn.dataset.qi));
+        });
+    });
+}

package/src/js/storage.js

@@ -0,0 +1,92 @@
+/**
+ * @module storage
+ * @description Persistence helpers for WaveformBar
+ */
+
+/**
+ * Save queue state to sessionStorage
+ * @param {string} key - Storage key
+ * @param {Object} state - State to save
+ */
+export function saveQueueState(key, state) {
+    try {
+        sessionStorage.setItem(key, JSON.stringify(state));
+    } catch (e) {}
+}
+
+/**
+ * Restore queue state from sessionStorage
+ * @param {string} key - Storage key
+ * @returns {Object|null}
+ */
+export function restoreQueueState(key) {
+    try {
+        const raw = sessionStorage.getItem(key);
+        if (!raw) return null;
+        const d = JSON.parse(raw);
+        if (!d || !d.queue || !d.queue.length) return null;
+        return d;
+    } catch (e) {
+        sessionStorage.removeItem(key);
+        return null;
+    }
+}
+
+/**
+ * Save volume to localStorage (persists across sessions)
+ * @param {string} key - Storage key
+ * @param {number} volume
+ * @param {boolean} muted
+ * @param {number} volumeBeforeMute
+ */
+export function saveVolume(key, volume, muted, volumeBeforeMute) {
+    try {
+        localStorage.setItem(key + '-vol', JSON.stringify({
+            v: volume, m: muted, b: volumeBeforeMute
+        }));
+    } catch (e) {}
+}
+
+/**
+ * Restore volume from localStorage
+ * @param {string} key - Storage key
+ * @returns {Object|null} { volume, muted, volumeBeforeMute }
+ */
+export function restoreVolume(key) {
+    try {
+        const d = JSON.parse(localStorage.getItem(key + '-vol'));
+        if (!d) return null;
+        return {
+            volume: d.v != null ? d.v : 1,
+            muted: d.m || false,
+            volumeBeforeMute: d.b || 1
+        };
+    } catch (e) {
+        return null;
+    }
+}
+
+/**
+ * Save favorites to localStorage
+ * @param {string} key - Storage key
+ * @param {Set} favorites
+ */
+export function saveFavorites(key, favorites) {
+    try {
+        localStorage.setItem(key + '-favs', JSON.stringify([...favorites]));
+    } catch (e) {}
+}
+
+/**
+ * Restore favorites from localStorage
+ * @param {string} key - Storage key
+ * @returns {Set}
+ */
+export function restoreFavorites(key) {
+    try {
+        const d = JSON.parse(localStorage.getItem(key + '-favs'));
+        return Array.isArray(d) ? new Set(d) : new Set();
+    } catch (e) {
+        return new Set();
+    }
+}

package/src/js/utils.js

@@ -0,0 +1,74 @@
+/**
+ * @module utils
+ * @description Utility functions for WaveformBar
+ */
+
+/**
+ * Extract a display title from a URL
+ * @param {string} url
+ * @returns {string}
+ */
+export function extractTitle(url) {
+    if (!url) return 'Untitled';
+    return url.split('/').pop().split('.')[0]
+        .replace(/[-_]/g, ' ')
+        .replace(/\b\w/g, l => l.toUpperCase());
+}
+
+/**
+ * Escape HTML to prevent XSS
+ * @param {string} str
+ * @returns {string}
+ */
+export function escapeHtml(str) {
+    if (!str) return '';
+    const d = document.createElement('div');
+    d.textContent = str;
+    return d.innerHTML;
+}
+
+/**
+ * Format seconds to M:SS
+ * @param {number} seconds
+ * @returns {string}
+ */
+export function formatTime(seconds) {
+    if (!seconds || isNaN(seconds)) return '0:00';
+    const m = Math.floor(seconds / 60);
+    const s = Math.floor(seconds % 60);
+    return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+/**
+ * Parse track metadata from a trigger element
+ * @param {HTMLElement} el
+ * @returns {Object|null}
+ */
+export function parseTrackFromElement(el) {
+    const url = el.dataset.wbUrl || el.dataset.url;
+    if (!url) return null;
+
+    let meta = {};
+    try { meta = JSON.parse(el.dataset.wbMeta || el.dataset.meta || '{}'); } catch (e) {}
+
+    let markers = null;
+    try { markers = JSON.parse(el.dataset.wbMarkers || el.dataset.markers || 'null'); } catch (e) {}
+
+    return {
+        url,
+        id: el.dataset.wbId || el.dataset.id || url,
+        title: el.dataset.wbTitle || el.dataset.title || extractTitle(url),
+        artist: el.dataset.wbArtist || el.dataset.artist || '',
+        artwork: el.dataset.wbArtwork || el.dataset.artwork || '',
+        album: el.dataset.wbAlbum || el.dataset.album || '',
+        link: el.dataset.wbLink || el.dataset.link || '',
+        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 || '',
+        markers,
+        favorited: el.dataset.wbFavorited === 'true',
+        inCart: el.dataset.wbInCart === 'true',
+        meta
+    };
+}