@arraypress/waveform-bar 1.1.0 → 1.2.1

package/README.md

@@ -47,6 +47,9 @@ Think Spotify's bottom player — but lightweight, zero-config, and works on any
 <!-- WaveformBar -->
 <link rel="stylesheet" href="https://unpkg.com/@arraypress/waveform-bar@latest/dist/waveform-bar.css">
 <script src="https://unpkg.com/@arraypress/waveform-bar@latest/dist/waveform-bar.js"></script>
+
+<!-- Optional: Page icons (play/pause overlays, hearts, carts, etc.) -->
+<link rel="stylesheet" href="https://unpkg.com/@arraypress/waveform-bar@latest/dist/waveform-bar-icons.css">
 ```
 
 ### NPM
@@ -130,21 +133,62 @@ Add to any element to queue a track without immediately playing it.
 </button>
 ```
 
-### Pre-Generated Waveform Data
+### Pre-Generated Waveforms
+
+Skip client-side audio analysis by providing pre-generated waveform data. The `data-wb-waveform` attribute accepts three
+formats:
 
-Skip client-side audio analysis by providing pre-generated waveform peaks.
-Use [waveform-gen](https://github.com/arraypress/waveform-gen) to generate the data.
+| Format        | Example                  | Description                                      |
+|---------------|--------------------------|--------------------------------------------------|
+| JSON file URL | `waveforms/song.json`    | Fetches peaks from `{ peaks: [...] }` or `[...]` |
+| Inline array  | `[0.2, 0.37, 0.41, ...]` | JSON array string                                |
+| CSV string    | `0.2,0.37,0.41,...`      | Comma-separated values                           |
 
 ```html
+<!-- JSON file — fetched automatically by the player -->
+<div data-wb-play
+     data-url="audio/song.mp3"
+     data-title="My Song"
+     data-wb-waveform="waveforms/song.json">
+</div>
 
+<!-- Inline peaks -->
 <div data-wb-play
-     data-url="song.mp3"
+     data-url="audio/song.mp3"
      data-title="My Song"
-     data-wb-waveform='[0.12,0.45,0.89,0.34,0.67,0.92,0.15,0.78]'>
+     data-wb-waveform="[0.12,0.45,0.89,0.34,0.67]">
 </div>
 ```
 
-The waveform displays instantly on load without downloading and decoding the audio file.
+Generate JSON files with [WaveformGen](https://github.com/arraypress/waveform-gen):
+
+```bash
+npx @arraypress/waveform-gen ./audio/*.mp3 --output ./waveforms/ --bpm
+```
+
+JSON waveform files can also include markers, which are loaded automatically if none are set via data attributes:
+
+```json
+{
+  "peaks": [
+    0.12,
+    0.45,
+    0.89,
+    0.34,
+    ...
+  ],
+  "markers": [
+    {
+      "time": 0,
+      "label": "Intro"
+    },
+    {
+      "time": 30,
+      "label": "Chorus"
+    }
+  ]
+}
+```
 
 ### DJ Mode Markers
 
@@ -166,32 +210,31 @@ and metadata at each marker boundary.
 </div>
 ```
 
-Markers can include: `time` (seconds, required), `label` (required), `title`, `artist`, `artwork`, `bpm`, `key`,
-`color`.
+Markers can include: `time` (seconds, required), `label` (required), `title`, `artist`, `artwork`, `bpm`, `key`,`color`.
 
 The active marker on the waveform gently pulses to indicate the current section.
 
 ### Attribute Reference
 
-| Attribute           | Description                                                |
-|---------------------|------------------------------------------------------------|
-| `data-wb-play`      | Makes element a play trigger (click to play)               |
-| `data-wb-queue`     | Makes element a queue trigger (click to add to queue)      |
-| `data-url`          | Audio file URL (required)                                  |
-| `data-id`           | Unique track identifier (defaults to URL)                  |
-| `data-title`        | Track title                                                |
-| `data-artist`       | Artist or subtitle                                         |
-| `data-artwork`      | Album artwork URL                                          |
-| `data-album`        | Album name (for Media Session API)                         |
-| `data-link`         | URL to navigate when clicking track info in the bar        |
-| `data-duration`     | Display duration string                                    |
-| `data-bpm`          | BPM value — displayed as a tag in the bar                  |
-| `data-key`          | Musical key — displayed as a tag in the bar                |
-| `data-meta`         | JSON object of custom metadata (e.g. `'{"genre":"Trap"}'`) |
-| `data-wb-waveform`  | Pre-generated waveform peaks JSON array                    |
-| `data-wb-markers`   | JSON array of marker objects for DJ mode                   |
-| `data-wb-favorited` | `"true"` to pre-set favorite state (server-side seeding)   |
-| `data-wb-in-cart`   | `"true"` to pre-set cart state (server-side seeding)       |
+| Attribute           | Description                                                               |
+|---------------------|---------------------------------------------------------------------------|
+| `data-wb-play`      | Makes element a play trigger (click to play)                              |
+| `data-wb-queue`     | Makes element a queue trigger (click to add to queue)                     |
+| `data-url`          | Audio file URL (required)                                                 |
+| `data-id`           | Unique track identifier (defaults to URL)                                 |
+| `data-title`        | Track title                                                               |
+| `data-artist`       | Artist or subtitle                                                        |
+| `data-artwork`      | Album artwork URL                                                         |
+| `data-album`        | Album name (for Media Session API)                                        |
+| `data-link`         | URL to navigate when clicking track info in the bar                       |
+| `data-duration`     | Display duration string                                                   |
+| `data-bpm`          | BPM value — displayed as a tag in the bar                                 |
+| `data-key`          | Musical key — displayed as a tag in the bar                               |
+| `data-meta`         | JSON object of custom metadata (e.g. `'{"genre":"Trap"}'`)                |
+| `data-wb-waveform`  | Pre-generated waveform peaks: JSON array, CSV string, or `.json` file URL |
+| `data-wb-markers`   | JSON array of marker objects for DJ mode                                  |
+| `data-wb-favorited` | `"true"` to pre-set favorite state (server-side seeding)                  |
+| `data-wb-in-cart`   | `"true"` to pre-set cart state (server-side seeding)                      |
 
 All attributes also accept `data-wb-` prefixed versions (`data-wb-url`, `data-wb-title`, etc.) to avoid conflicts with
 other libraries.
@@ -238,11 +281,11 @@ WaveformBar.init({
     // Server-side actions (REST callbacks)
     actions: {
         favorite: {
-            endpoint: '/api/favorites',     // POST URL
+            endpoint: '/api/favorites',
             method: 'POST'
         },
         cart: {
-            endpoint: '/api/cart',          // POST URL
+            endpoint: '/api/cart',
             method: 'POST'
         }
     },
@@ -270,7 +313,6 @@ WaveformBar.init({
 ### Playback
 
 ```javascript
-// Play a track object
 WaveformBar.play({
     url: 'audio/song.mp3',
     title: 'My Song',
@@ -281,15 +323,12 @@ WaveformBar.play({
     link: '/products/my-song'
 });
 
-// Play by URL shorthand
 WaveformBar.play('audio/song.mp3');
-
-// Playback controls
 WaveformBar.togglePlay();
 WaveformBar.pause();
-WaveformBar.next();                      // Next track (wraps if repeat: 'all')
-WaveformBar.previous();                  // Previous track (restarts if >3s in)
-WaveformBar.skipTo(3);                   // Jump to queue index 3
+WaveformBar.next();
+WaveformBar.previous();
+WaveformBar.skipTo(3);
 ```
 
 ### Repeat
@@ -299,102 +338,57 @@ WaveformBar.cycleRepeat();               // Cycles: off → all → one → off
 WaveformBar.setRepeat('all');            // Set directly: 'off', 'all', 'one'
 ```
 
-- **off** — Stops at end of queue
-- **all** — Loops back to first track after last; prev/next wrap around
-- **one** — Replays the current track indefinitely
-
 ### Markers / DJ Mode
 
 ```javascript
-// Seek to marker by index (0-based) on current track
 WaveformBar.seekToMarker(3);
-
-// Seek to marker by label name on current track
 WaveformBar.seekToMarkerByLabel('Horizon');
 ```
 
-Both methods auto-play if the player is paused. They only work on the currently loaded track's markers — if the track
-with markers isn't loaded, they silently return.
-
 ### Volume
 
 ```javascript
-WaveformBar.setVolume(0.5);              // Set to 50%
-WaveformBar.getVolume();                 // Returns 0.5
+WaveformBar.setVolume(0.5);
+WaveformBar.getVolume();
 WaveformBar.toggleMute();
-WaveformBar.isMutedState();              // true/false
 ```
 
-Volume and mute state persist in localStorage across sessions.
-
 ### Queue
 
 ```javascript
-// Add to end of queue
 WaveformBar.addToQueue({url: 'track.mp3', title: 'Next Up', artist: 'Someone'});
-
-// Remove by index
 WaveformBar.removeFromQueue(2);
-
-// Replay a previously played track (by URL)
-WaveformBar.replay('audio/old-track.mp3');
-
-// Clear upcoming tracks
 WaveformBar.clearQueue();
-
-// Clear play history
-WaveformBar.clearHistory();
 ```
 
-The queue panel shows three sections: **Now Playing** (click to toggle play/pause), **Up Next**, and **Previously Played
-**. Tracks can be removed individually from the queue via the × button on hover.
-
-### Favorites
+### Favorites & Cart
 
 ```javascript
-WaveformBar.toggleFavorite();            // Toggle current track's favorite state
-WaveformBar.isFavorited('beat-001');     // Check by track ID
+WaveformBar.toggleFavorite();
+WaveformBar.isFavorited('beat-001');
+WaveformBar.addToCart();
+WaveformBar.isInCart('beat-001');
 ```
 
-Favorites persist in localStorage. Server-side state can be seeded via `data-wb-favorited="true"` on trigger elements —
-this is authoritative and overrides localStorage on page load.
-
-When a track is favorited/unfavorited, the `.wb-favorited` class is toggled on all matching trigger elements on the
-page.
-
-### Cart
-
-```javascript
-WaveformBar.addToCart();                 // Add current track to cart
-WaveformBar.isInCart('beat-001');        // Check by track ID
-```
-
-Cart state is NOT persisted to localStorage — it's server-authoritative. Seed from your server via
-`data-wb-in-cart="true"`. The `.wb-in-cart` class is toggled on matching trigger elements.
-
-If an `actions.cart.endpoint` is configured, a POST request fires automatically with the track data.
-
 ### State
 
 ```javascript
-WaveformBar.getCurrentTrack();           // { url, title, artist, bpm, key, ... }
-WaveformBar.isCurrentlyPlaying('song.mp3'); // true if this URL is actively playing
-WaveformBar.isCurrentTrack('song.mp3');  // true if current (playing or paused)
-WaveformBar.getQueue();                  // Full queue array
-WaveformBar.getHistory();                // Previously played tracks
-WaveformBar.getPlayer();                 // Underlying WaveformPlayer instance
+WaveformBar.getCurrentTrack();
+WaveformBar.isCurrentlyPlaying('song.mp3');
+WaveformBar.isCurrentTrack('song.mp3');
+WaveformBar.getQueue();
+WaveformBar.getCurrentIndex();
+WaveformBar.getPlayer();
 ```
 
 ### UI
 
 ```javascript
-WaveformBar.show();                      // Show the bar
-WaveformBar.hide();                      // Hide the bar
-WaveformBar.toggleQueuePanel();          // Toggle queue panel visibility
-WaveformBar.toggleVolumePopup();         // Toggle volume popup
-WaveformBar.closeQueuePanel();
-WaveformBar.closeVolumePopup();
-WaveformBar.destroy();                   // Remove bar and clean up
+WaveformBar.show();
+WaveformBar.hide();
+WaveformBar.toggleQueuePanel();
+WaveformBar.toggleVolumePopup();
+WaveformBar.destroy();
 ```
 
 ## DOM Events
@@ -405,10 +399,6 @@ All events bubble from the bar element and are prefixed with `waveformbar:`.
 document.addEventListener('waveformbar:play', (e) => {
     console.log('Playing:', e.detail.track);
 });
-
-document.addEventListener('waveformbar:trackchange', (e) => {
-    console.log('Track changed:', e.detail.track, 'Index:', e.detail.index);
-});
 ```
 
 | Event                      | Detail                     |
@@ -434,16 +424,10 @@ WaveformBar automatically adds CSS classes to trigger elements on the page:
 | `.wb-favorited` | The element's track is favorited                  |
 | `.wb-in-cart`   | The element's track is in the cart                |
 
-These update in real-time as the user interacts with the bar.
-
 ## Helper CSS Classes
 
-Ready-made utility classes for common UI patterns. Add them to your trigger elements.
-
 ### Icon Swap (`wb-icon-swap`)
 
-Swaps play/pause content automatically based on playback state.
-
 ```html
 
 <button data-wb-play data-url="song.mp3" class="wb-icon-swap">
@@ -454,100 +438,74 @@ Swaps play/pause content automatically based on playback state.
 
 ### Equalizer Bars (`wb-eq-bars`)
 
-Animated equalizer bars that activate when the track is playing.
-
 ```html
-
-<tr data-wb-play data-url="song.mp3">
-    <td>
-        <span class="wb-eq-bars">
-            <span></span><span></span><span></span><span></span>
-        </span>
-    </td>
-    <td>Track Title</td>
-</tr>
+<span class="wb-eq-bars"><span></span><span></span><span></span><span></span></span>
 ```
 
 ### Card Highlight (`wb-card-highlight`)
 
-Adds accent border and glow when the element's track is current.
-
-```html
-
-<div data-wb-play data-url="song.mp3"
-     class="wb-card-highlight"
-     style="border: 1px solid transparent; border-radius: 8px;">
-    <h3>Track Title</h3>
-</div>
-```
+Adds accent border when the element's track is current.
 
 ### Accent Text (`wb-accent-current`)
 
 Colors text with the accent color when the parent track is current.
 
-```html
-
-<div data-wb-play data-url="song.mp3">
-    <span class="wb-accent-current">Track Title</span>
-</div>
-```
-
-### Pulse Animation (`wb-pulse-playing`)
-
-Subtle opacity pulse on playing elements.
+### Favorite/Cart Visibility
 
 ```html
-
-<div data-wb-play data-url="song.mp3" class="wb-pulse-playing">
-    <img src="cover.jpg">
-</div>
+<span class="wb-hide-if-fav">♡ Save</span>
+<span class="wb-show-if-fav">❤ Saved</span>
+<span class="wb-hide-if-cart">🛒 Add</span>
+<span class="wb-show-if-cart">✓ In Cart</span>
 ```
 
-### Favorite/Cart Visibility
+## Page Icons
 
-Show or hide content based on favorite/cart state.
+The optional `waveform-bar-icons.css` provides a lightweight SVG icon set for use in your page elements (play/pause
+overlays, hearts, carts, etc.):
 
 ```html
 
-<div data-wb-play data-url="song.mp3" data-id="beat-001">
-    <button>
-        <span class="wb-hide-if-fav">♡ Save</span>
-        <span class="wb-show-if-fav">❤ Saved</span>
-    </button>
-    <button>
-        <span class="wb-hide-if-cart">🛒 Add to Cart</span>
-        <span class="wb-show-if-cart">✓ In Cart</span>
-    </button>
-</div>
-```
+<link rel="stylesheet" href="https://unpkg.com/@arraypress/waveform-bar@latest/dist/waveform-bar-icons.css">
+
+<span class="wbi wbi-play"></span>
+<span class="wbi wbi-pause"></span>
+<span class="wbi wbi-heart"></span>
+<span class="wbi wbi-heart-filled"></span>
+<span class="wbi wbi-cart"></span>
+<span class="wbi wbi-cart-check"></span>
+<span class="wbi wbi-queue"></span>
+<span class="wbi wbi-skip-back"></span>
+<span class="wbi wbi-skip-forward"></span>
+<span class="wbi wbi-volume-high"></span>
+<span class="wbi wbi-volume-low"></span>
+<span class="wbi wbi-volume-mute"></span>
+<span class="wbi wbi-repeat"></span>
+<span class="wbi wbi-repeat-one"></span>
+<span class="wbi wbi-close"></span>
+<span class="wbi wbi-check"></span>
+<span class="wbi wbi-link"></span>
+<span class="wbi wbi-download"></span>
+<span class="wbi wbi-share"></span>
+<span class="wbi wbi-music-note"></span>
+```
+
+Icons inherit `color` from their parent and scale with `font-size`. Size variants: `.wbi-sm`, `.wbi-lg`, `.wbi-xl`,
+`.wbi-2x`, `.wbi-3x`.
+
+These are for your page elements only — the bar itself uses its own internal SVG icons and does not require this file.
 
 ## Persistence
 
-WaveformBar uses two storage mechanisms:
-
-**sessionStorage** (cleared when browser closes):
+**sessionStorage** (cleared when browser closes): queue, current track index, playback position, playing state.
 
-- Queue contents and order
-- Current track index
-- Playback position
-- Playing state
-
-**localStorage** (persists across sessions):
-
-- Volume level
-- Mute state
-- Favorite track IDs
-
-When a user navigates between pages, the bar restores the queue, seeks to the saved position, and optionally resumes
-playback (if `autoResume: true`). Position is saved on every page unload for accuracy.
+**localStorage** (persists across sessions): volume level, mute state, favorite track IDs.
 
 Cart state is intentionally NOT persisted — it seeds from `data-wb-in-cart` attributes on page load, making the server
 the source of truth.
 
 ## Custom Styling
 
-Override CSS custom properties to theme the bar:
-
 ```css
 .waveform-bar,
 .wb-queue-panel {
@@ -555,178 +513,32 @@ Override CSS custom properties to theme the bar:
     --wb-border: rgba(255, 255, 255, 0.1);
     --wb-text: #ffffff;
     --wb-text-muted: rgba(255, 255, 255, 0.5);
-    --wb-accent: #1db954; /* e.g. Spotify green */
+    --wb-accent: #1db954;
     --wb-accent-light: #1ed760;
     --wb-hover: rgba(255, 255, 255, 0.08);
-    --wb-tag-bg: rgba(29, 185, 84, 0.12);
-    --wb-tag-text: #1db954;
     --wb-fav-color: #ef4444;
     --wb-cart-color: #4ade80;
 }
 ```
 
-A `.wb-light` class is available for light backgrounds:
-
-```css
-.waveform-bar.wb-light {
-    --wb-bg: rgba(255, 255, 255, 0.95);
-    --wb-text: #1a1a1a;
-    --wb-text-muted: rgba(0, 0, 0, 0.5);
-}
-```
-
-## Layout
-
-The bar uses a three-zone flex layout:
-
-```
-[Left: controls + track info] — [Centre: waveform + time] — [Right: meta + actions + volume + queue]
-```
-
-- **Left zone** — Prev, Play/Pause, Next, Repeat buttons + artwork + title/artist
-- **Centre zone** — Full-width waveform visualization + elapsed/total time
-- **Right zone** — BPM/key tags, favorite/cart buttons, volume popup, queue toggle
-
-On mobile (≤768px):
-
-- Left + Right share the top row
-- Waveform drops to a full-width second row
-- Meta tags, actions, and time display are hidden
-- Queue panel becomes full-width
-
-On small mobile (≤480px):
-
-- Prev/Next and Repeat buttons are hidden
-- Volume is hidden
-- Only play button, track info, and waveform remain
-
-## Use Cases
-
-### Beat Store
-
-```html
-
-<div class="beat-card wb-card-highlight"
-     data-wb-play
-     data-url="beats/trap-42.mp3"
-     data-id="beat-42"
-     data-title="Trap Beat #42"
-     data-artist="ProducerName"
-     data-bpm="140"
-     data-key="Cm"
-     data-artwork="covers/trap-42.jpg"
-     data-link="/beats/trap-42"
-     data-wb-favorited="true">
-    <img src="covers/trap-42.jpg">
-    <h3 class="wb-accent-current">Trap Beat #42</h3>
-    <p>140 BPM · Cm · $29.99</p>
-    <span class="wb-eq-bars"><span></span><span></span><span></span><span></span></span>
-    <button>
-        <span class="wb-hide-if-fav">♡ Save</span>
-        <span class="wb-show-if-fav">❤ Saved</span>
-    </button>
-</div>
-<button data-wb-queue data-url="beats/trap-42.mp3" data-title="Trap Beat #42">+ Queue</button>
-```
-
-### Sample Library Table
-
-```html
-
-<table>
-    <tr data-wb-play
-        data-url="samples/kick.wav"
-        data-title="808 Kick"
-        data-artist="Drum Kit Vol. 3"
-        data-bpm="128"
-        data-meta='{"format":"WAV"}'>
-        <td><span class="wb-eq-bars"><span></span><span></span><span></span><span></span></span></td>
-        <td class="wb-accent-current">808 Kick</td>
-        <td>128 BPM</td>
-        <td>WAV</td>
-    </tr>
-</table>
-```
-
-### DJ Mix with Clickable Tracklist
-
-```html
-<!-- Mix trigger with markers -->
-<div data-wb-play
-     data-url="mixes/guestmix.mp3"
-     data-title="Guest Mix"
-     data-artist="Various Artists"
-     data-wb-waveform='[0.1,0.3,0.5,...]'
-     data-wb-markers='[
-         {"time":0,"label":"Intro","title":"Opening","artist":"DJ One"},
-         {"time":180,"label":"Drop","title":"Big Tune","artist":"Producer X"},
-         {"time":360,"label":"Chill","title":"Wind Down","artist":"Ambient Co"}
-     ]'>
-    🎧 Play Guest Mix
-</div>
-
-<!-- Clickable tracklist buttons -->
-<button onclick="WaveformBar.seekToMarkerByLabel('Intro')">00:00 — DJ One — Opening</button>
-<button onclick="WaveformBar.seekToMarkerByLabel('Drop')">03:00 — Producer X — Big Tune</button>
-<button onclick="WaveformBar.seekToMarkerByLabel('Chill')">06:00 — Ambient Co — Wind Down</button>
-```
-
-### Podcast
-
-```html
-
-<button data-wb-play
-        data-url="episodes/ep42.mp3"
-        data-title="Ep 42: The Future of AI"
-        data-artist="with Dr. Sarah Chen"
-        data-artwork="ep42-cover.jpg"
-        data-link="/episodes/42"
-        class="wb-icon-swap">
-    <span class="wb-show-play">▶ Listen</span>
-    <span class="wb-show-pause">⏸ Playing</span>
-</button>
-```
-
-## Pre-Generating Waveforms
-
-Use [@arraypress/waveform-gen](https://github.com/arraypress/waveform-gen) to batch-generate waveform data:
-
-```bash
-# Generate JSON files for all audio
-npx @arraypress/waveform-gen ./audio/*.mp3 --output ./waveforms/
-
-# Generate ready-to-paste HTML markup
-npx @arraypress/waveform-gen ./audio/*.mp3 --format html --output ./
-```
-
-Then reference the data in your HTML:
-
-```html
-
-<div data-wb-play
-     data-url="song.mp3"
-     data-title="My Song"
-     data-wb-waveform='[0.12,0.45,0.89,0.34,0.67]'>
-</div>
-```
-
 ## Browser Support
 
-- Chrome/Edge 90+
-- Firefox 88+
-- Safari 14+
-- Mobile browsers (iOS Safari, Chrome Android)
+Chrome/Edge 90+, Firefox 88+, Safari 14+, iOS Safari, Chrome Android
 
 ## Dependencies
 
-- [WaveformPlayer](https://github.com/arraypress/waveform-player) ≥1.3.5 — must be loaded before WaveformBar
+- [WaveformPlayer](https://github.com/arraypress/waveform-player) ≥1.5.0 — must be loaded before WaveformBar
 
-## License
+## Ecosystem
 
-MIT © [ArrayPress](https://github.com/arraypress)
+| Package                                                                 | Description                                                       |
+|-------------------------------------------------------------------------|-------------------------------------------------------------------|
+| **[WaveformPlayer](https://github.com/arraypress/waveform-player)**     | Core audio player with waveform visualization                     |
+| **[WaveformBar](https://github.com/arraypress/waveform-bar)**           | Persistent bottom-bar player with queue, favorites, cart, DJ mode |
+| **[WaveformGen](https://github.com/arraypress/waveform-generator)**     | CLI tool to pre-generate waveform JSON from audio files           |
+| **[WaveformPlaylist](https://github.com/arraypress/waveform-playlist)** | Playlist and chapter support addon                                |
+| **[WaveformTracker](https://github.com/arraypress/waveform-tracker)**   | Audio engagement analytics                                        |
 
-## Related
+## License
 
-- [WaveformPlayer](https://github.com/arraypress/waveform-player) — Core audio player with waveform visualization
-- [WaveformPlaylist](https://github.com/arraypress/waveform-playlist) — On-page playlist and chapter navigation
-- [WaveformGen](https://github.com/arraypress/waveform-generator) — CLI tool for batch waveform data generation
+MIT © [ArrayPress](https://github.com/arraypress)

package/dist/waveform-bar-icons.css

@@ -5,12 +5,21 @@
  * MIT License
  *
  * Usage:
- * <span class="wbi wbi-play"></span>
+ *   <span class="wbi wbi-play"></span>
  */
 
-.wbi-heart-filled {
-    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' 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>");
-    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' 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>");
+.wbi {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-color: currentColor;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    vertical-align: -0.125em;
 }
 
 .wbi-sm {
@@ -136,4 +145,4 @@
 .wbi-share {
     -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/></svg>");
     mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/></svg>");
-}
+}

package/dist/waveform-bar.esm.js

@@ -971,7 +971,9 @@ var WaveformBar = class {
     this._updateTrackDisplay(track);
     this._updateFavoriteUI();
     const loadOpts = { artwork: track.artwork, album: track.album };
-    if (track.waveform) loadOpts.waveform = track.waveform;
+    if (track.waveform) {
+      loadOpts.waveform = track.waveform;
+    }
     if (track.markers && track.markers.length) {
       const defaultColor = this.config.markerColor;
       loadOpts.markers = track.markers.map((m) => ({
@@ -1309,7 +1311,9 @@ var WaveformBar = class {
     this._updateTrackDisplay(track);
     this._updateFavoriteUI();
     this._updateNavButtons();
-    if (track.waveform) this.player.options.waveform = track.waveform;
+    if (track.waveform) {
+      this.player.options.waveform = track.waveform;
+    }
     this.player.options.title = track.title || "";
     this.player.options.subtitle = track.artist || "";
     if (track.markers && track.markers.length) {
@@ -1326,7 +1330,6 @@ var WaveformBar = class {
     this._currentMarkerIndex = -1;
     this.player.load(track.url).then(() => {
       if (this.player) this.player.setVolume(this.isMuted ? 0 : this.volume);
-      console.log("RESTORE: position =", state.position, "duration =", this.player?.audio?.duration);
       if (state.isPlaying && this.config.autoResume) {
         try {
           const p = this.player.play();

package/dist/waveform-bar.js

@@ -972,7 +972,9 @@
       this._updateTrackDisplay(track);
       this._updateFavoriteUI();
       const loadOpts = { artwork: track.artwork, album: track.album };
-      if (track.waveform) loadOpts.waveform = track.waveform;
+      if (track.waveform) {
+        loadOpts.waveform = track.waveform;
+      }
       if (track.markers && track.markers.length) {
         const defaultColor = this.config.markerColor;
         loadOpts.markers = track.markers.map((m) => ({
@@ -1310,7 +1312,9 @@
       this._updateTrackDisplay(track);
       this._updateFavoriteUI();
       this._updateNavButtons();
-      if (track.waveform) this.player.options.waveform = track.waveform;
+      if (track.waveform) {
+        this.player.options.waveform = track.waveform;
+      }
       this.player.options.title = track.title || "";
       this.player.options.subtitle = track.artist || "";
       if (track.markers && track.markers.length) {
@@ -1327,7 +1331,6 @@
       this._currentMarkerIndex = -1;
       this.player.load(track.url).then(() => {
         if (this.player) this.player.setVolume(this.isMuted ? 0 : this.volume);
-        console.log("RESTORE: position =", state.position, "duration =", this.player?.audio?.duration);
         if (state.isPlaying && this.config.autoResume) {
           try {
             const p = this.player.play();

package/dist/waveform-bar.min.js

@@ -41,7 +41,7 @@
                     <div class="wb-queue-item-title">${u(h.title)}</div>
                     <div class="wb-queue-item-artist">${u(h.artist)}</div>
                 </div>
-            </div>`}}s.innerHTML=l,s.querySelectorAll(".wb-queue-item[data-qi]").forEach(o=>{o.addEventListener("click",h=>{h.target.closest(".wb-queue-remove")||r.onSkipTo&&r.onSkipTo(parseInt(o.dataset.qi))})}),s.querySelectorAll(".wb-queue-remove").forEach(o=>{o.addEventListener("click",h=>{h.stopPropagation(),r.onRemove&&r.onRemove(parseInt(o.dataset.qi))})})}var x={persist:!0,autoResume:!0,continuous:!0,repeat:"off",showRepeat:!0,showQueue:!0,showPrevNext:!0,showVolume:!0,showMute:!0,showMeta:!0,showTime:!0,showTrackLink:!0,maxMeta:3,defaultArtwork:null,theme:null,waveformStyle:"mirror",waveformHeight:32,barWidth:2,barSpacing:0,waveformColor:null,progressColor:null,markerColor:"rgba(255, 255, 255, 0.25)",volume:1,storageKey:"waveform-bar",actions:null,onPlay:null,onPause:null,onTrackChange:null,onQueueChange:null,onVolumeChange:null,onFavorite:null,onCart:null},f=class{constructor(){this.config=null,this.player=null,this.queue=[],this.currentIndex=-1,this.isPlaying=!1,this.isInitialized=!1,this.queueOpen=!1,this.volume=1,this.isMuted=!1,this._volumeBeforeMute=1,this._lastPosition=0,this._favorites=new Set,this._cartItems=new Set,this._observer=null,this._activeMarkers=null,this._currentMarkerIndex=-1,this.repeat="off",this.barEl=null,this.queueEl=null,this.waveformContainer=null,this.volumePopupEl=null,this.titleEl=null,this.artistEl=null,this.metaEl=null,this.playBtnEl=null,this.repeatBtnEl=null,this.queueBtnEl=null,this.queueBodyEl=null,this.queueCountEl=null,this.volumeSliderEl=null,this.muteBtnEl=null,this.favBtnEl=null,this.cartBtnEl=null,this.timeCurrentEl=null,this.timeTotalEl=null}init(t={}){return this.isInitialized&&this.destroy(),this.config={...x,...t},this.volume=this.config.volume,typeof window.WaveformPlayer>"u"?(console.error("WaveformBar: WaveformPlayer is required."),this):(this._createBar(),this._createQueue(),this._initPlayer(),this._bindTriggers(),this._observeDOM(),this.config.persist&&(this._restoreVolume(),this._restoreFavorites()),this._seedFromAttributes(),this.config.persist&&this._restoreState(),this.isInitialized=!0,this._beforeUnloadHandler=()=>this._saveState(),window.addEventListener("beforeunload",this._beforeUnloadHandler),this)}destroy(){return this.player&&(this.player.destroy(),this.player=null),this.barEl&&(this.barEl.remove(),this.barEl=null),this.queueEl&&(this.queueEl.remove(),this.queueEl=null),this._observer&&(this._observer.disconnect(),this._observer=null),this._beforeUnloadHandler&&(window.removeEventListener("beforeunload",this._beforeUnloadHandler),this._beforeUnloadHandler=null),document.querySelectorAll("[data-wb-play],[data-wb-queue]").forEach(t=>delete t._wbBound),document.querySelectorAll(".wb-current,.wb-playing").forEach(t=>t.classList.remove("wb-current","wb-playing")),this.queue=[],this.currentIndex=-1,this.isPlaying=!1,this.queueOpen=!1,this.isInitialized=!1,this.config=null,this}_createBar(){this.barEl=document.createElement("div"),this.barEl.className="waveform-bar";let t=this.config.theme||this._detectTheme();t==="light"&&this.barEl.classList.add("wb-light"),this._resolvedTheme=t,this.barEl.id="waveform-bar",this.barEl.innerHTML=k(this.config),document.body.appendChild(this.barEl),this.titleEl=this.barEl.querySelector(".wb-title"),this.artistEl=this.barEl.querySelector(".wb-artist"),this.metaEl=this.barEl.querySelector(".wb-meta"),this.playBtnEl=this.barEl.querySelector(".wb-play"),this.waveformContainer=this.barEl.querySelector(".wb-waveform-container"),this.queueBtnEl=this.barEl.querySelector(".wb-queue-btn"),this.muteBtnEl=this.barEl.querySelector(".wb-mute"),this.volumeSliderEl=this.barEl.querySelector(".wb-volume-slider"),this.favBtnEl=this.barEl.querySelector(".wb-fav"),this.cartBtnEl=this.barEl.querySelector(".wb-cart"),this.timeCurrentEl=this.barEl.querySelector(".wb-time-current"),this.timeTotalEl=this.barEl.querySelector(".wb-time-total"),this.playBtnEl.addEventListener("click",()=>this.togglePlay());let e=this.barEl.querySelector(".wb-prev"),i=this.barEl.querySelector(".wb-next");e&&e.addEventListener("click",()=>this.previous()),i&&i.addEventListener("click",()=>this.next()),this.repeatBtnEl=this.barEl.querySelector(".wb-repeat"),this.repeatBtnEl&&(this.repeat=this.config.repeat||"off",this._updateRepeatButton(),this.repeatBtnEl.addEventListener("click",()=>this.cycleRepeat())),this.queueBtnEl&&this.queueBtnEl.addEventListener("click",()=>this.toggleQueuePanel()),this.volumePopupEl=this.barEl.querySelector(".wb-volume-popup");let r=this.barEl.querySelector(".wb-volume");if(this.muteBtnEl&&this.muteBtnEl.addEventListener("click",a=>{a.stopPropagation(),this.toggleMute()}),r&&this.volumePopupEl){let a;r.addEventListener("mouseenter",()=>{clearTimeout(a),this.openVolumePopup()}),r.addEventListener("mouseleave",()=>{a=setTimeout(()=>this.closeVolumePopup(),300)})}this.volumeSliderEl&&this.volumeSliderEl.addEventListener("input",a=>{a.stopPropagation(),this.setVolume(parseInt(a.target.value)/100)}),document.addEventListener("click",a=>{this.volumePopupEl?.classList.contains("wb-volume-open")&&!this.barEl.querySelector(".wb-volume")?.contains(a.target)&&this.closeVolumePopup()}),this.favBtnEl&&this.favBtnEl.addEventListener("click",()=>this.toggleFavorite()),this.cartBtnEl&&this.cartBtnEl.addEventListener("click",()=>this.addToCart()),this.config.showTrackLink&&this.barEl.querySelector(".wb-track").addEventListener("click",()=>{let a=this.getCurrentTrack();a&&a.link&&(window.location.href=a.link)})}_createQueue(){this.config.showQueue&&(this.queueEl=q(),this._resolvedTheme==="light"&&this.queueEl.classList.add("wb-light"),document.body.appendChild(this.queueEl),this.queueBodyEl=this.queueEl.querySelector(".wb-queue-body"),this.queueCountEl=this.queueEl.querySelector(".wb-queue-count"),this.queueEl.querySelector(".wb-queue-clear").addEventListener("click",()=>this.clearQueue()),document.addEventListener("click",t=>{this.queueOpen&&!this.queueEl.contains(t.target)&&!this.queueBtnEl.contains(t.target)&&this.closeQueuePanel()}))}_initPlayer(){let t={showControls:!1,showInfo:!1,waveformStyle:this.config.waveformStyle,height:this.config.waveformHeight,barWidth:this.config.barWidth,barSpacing:this.config.barSpacing,singlePlay:!1,onPlay:()=>{this.isPlaying=!0,this._updatePlayButton(),this._syncPageState();let e=this.getCurrentTrack();this._emit("play",{track:e}),this.config.onPlay&&this.config.onPlay(e)},onPause:()=>{this.isPlaying=!1,this._updatePlayButton(),this._syncPageState(),this._saveState();let e=this.getCurrentTrack();this._emit("pause",{track:e}),this.config.onPause&&this.config.onPause(e)},onEnd:()=>{if(this.isPlaying=!1,this._updatePlayButton(),this._syncPageState(),this.timeCurrentEl&&(this.timeCurrentEl.textContent="0:00"),this.repeat==="one"){this.player&&(this.player.seekTo(0),this.player.play().catch(()=>{}));return}this.config.continuous&&this.currentIndex<this.queue.length-1?(this.currentIndex++,this._loadCurrentTrack()):this.repeat==="all"&&this.queue.length>0&&(this.currentIndex=0,this._loadCurrentTrack())},onTimeUpdate:(e,i)=>{this._lastPosition=e,this.timeCurrentEl&&(this.timeCurrentEl.textContent=v(e)),this.timeTotalEl&&(this.timeTotalEl.textContent=v(i)),(!this._lastSaveTime||e-this._lastSaveTime>2)&&(this._lastSaveTime=e,this._saveState()),this._activeMarkers&&this._checkMarkerBoundary(e)},onLoad:null};this.config.waveformColor&&(t.waveformColor=this.config.waveformColor),this.config.progressColor&&(t.progressColor=this.config.progressColor),this.player=new window.WaveformPlayer(this.waveformContainer,t),this.player.setVolume(this.volume)}_bindTriggers(){document.querySelectorAll("[data-wb-play]").forEach(t=>{t._wbBound||(t._wbBound=!0,t.addEventListener("click",e=>{e.preventDefault();let i=m(t);i&&this.play(i)}))}),document.querySelectorAll("[data-wb-queue]").forEach(t=>{t._wbBound||(t._wbBound=!0,t.addEventListener("click",e=>{e.preventDefault(),e.stopPropagation();let i=m(t);i&&this.addToQueue(i)}))})}_observeDOM(){typeof MutationObserver>"u"||(this._observer=new MutationObserver(()=>{this._bindTriggers(),this._syncPageState()}),this._observer.observe(document.body,{childList:!0,subtree:!0}))}play(t){let e=typeof t=="string"?{url:t,id:t,title:d(t)}:t;if(!e||!e.url)return this;let i=this.getCurrentTrack();if(i&&i.url===e.url)return this.togglePlay(),this;let r=this.queue.findIndex(a=>a.url===e.url);if(r>=0)this.queue[r]={...this.queue[r],...e},this.currentIndex=r;else{let a=this.currentIndex+1;this.queue.splice(a,0,e),this.currentIndex=a}return this._loadCurrentTrack(),this}addToQueue(t){let e=typeof t=="string"?{url:t,id:t,title:d(t)}:t;return!e||!e.url?this:this.queue.find(i=>i.url===e.url)?this:(this.queue.push(e),this._renderQueue(),this._saveState(),this._updateNavButtons(),this.currentIndex===-1&&(this.currentIndex=0,this._loadCurrentTrack()),this.config.onQueueChange&&this.config.onQueueChange(this.queue,this.currentIndex),this)}togglePlay(){return this.player?(this.isPlaying?this.player.pause():this.player.play(),this):this}pause(){return this.player&&this.isPlaying&&this.player.pause(),this}next(){return this.currentIndex<this.queue.length-1?(this.currentIndex++,this._loadCurrentTrack()):this.repeat==="all"&&this.queue.length>0&&(this.currentIndex=0,this._loadCurrentTrack()),this}previous(){return this.player&&this.player.audio&&this.player.audio.currentTime>3?(this.player.seekTo(0),this):(this.currentIndex>0?(this.currentIndex--,this._loadCurrentTrack()):this.repeat==="all"&&this.queue.length>0&&(this.currentIndex=this.queue.length-1,this._loadCurrentTrack()),this)}skipTo(t){return t<0||t>=this.queue.length?this:t===this.currentIndex?(this.togglePlay(),this):(this.currentIndex=t,this._loadCurrentTrack(),this)}seekToMarker(t){if(!this._activeMarkers||t<0||t>=this._activeMarkers.length)return this;let e=this._activeMarkers[t];return this.player&&(this.player.seekTo(e.time),this.isPlaying||this.togglePlay()),this}seekToMarkerByLabel(t){if(!this._activeMarkers)return this;let e=this._activeMarkers.findIndex(i=>(i.label||i.title||"").toLowerCase()===t.toLowerCase());return e>=0&&this.seekToMarker(e),this}setVolume(t){return this.volume=Math.max(0,Math.min(1,t)),this.isMuted=this.volume===0,this.player&&this.player.setVolume(this.volume),this._updateVolumeUI(),y(this.config.storageKey,this.volume,this.isMuted,this._volumeBeforeMute),this._emit("volumechange",{volume:this.volume}),this.config.onVolumeChange&&this.config.onVolumeChange(this.volume),this}getVolume(){return this.volume}toggleMute(){return this.isMuted?this.setVolume(this._volumeBeforeMute||1):(this._volumeBeforeMute=this.volume,this.isMuted=!0,this.player&&this.player.setVolume(0),this._updateVolumeUI()),this}toggleFavorite(){let t=this.getCurrentTrack();if(!t)return this;let e=t.id||t.url,i=this._favorites.has(e);return i?this._favorites.delete(e):this._favorites.add(e),this._updateFavoriteUI(),this._syncFavoriteAttributes(t.url,!i),p(this.config.storageKey,this._favorites),this._emit("favorite",{track:t,favorited:!i}),this.config.onFavorite&&this.config.onFavorite(t,!i),this.config.actions?.favorite&&b(this.config.actions.favorite,{action:"favorite",id:e,url:t.url,title:t.title,favorited:!i}),this}addToCart(){let t=this.getCurrentTrack();if(!t)return this;let e=t.id||t.url;return this._cartItems.add(e),this.cartBtnEl&&(this.cartBtnEl.classList.add("wb-action-done"),setTimeout(()=>this.cartBtnEl.classList.remove("wb-action-done"),1500)),this._syncCartAttributes(t.url,!0),this._emit("cart",{track:t}),this.config.onCart&&this.config.onCart(t),this.config.actions?.cart&&b(this.config.actions.cart,{action:"cart",id:e,url:t.url,title:t.title}),this}isFavorited(t){if(!t){let e=this.getCurrentTrack();t=e?e.id||e.url:null}return t?this._favorites.has(t):!1}isInCart(t){if(!t){let e=this.getCurrentTrack();t=e?e.id||e.url:null}return t?this._cartItems.has(t):!1}removeFromQueue(t){return t<0||t>=this.queue.length||t===this.currentIndex?this:(this.queue.splice(t,1),t<this.currentIndex&&this.currentIndex--,this._renderQueue(),this._saveState(),this._updateNavButtons(),this._emit("queuechange",{queue:this.queue,currentIndex:this.currentIndex}),this.config.onQueueChange&&this.config.onQueueChange(this.queue,this.currentIndex),this)}clearQueue(){let t=this.getCurrentTrack();return this.queue=t?[t]:[],this.currentIndex=t?0:-1,this._renderQueue(),this._saveState(),this._updateNavButtons(),this._emit("queuechange",{queue:this.queue,currentIndex:this.currentIndex}),this.config.onQueueChange&&this.config.onQueueChange(this.queue,this.currentIndex),this}getCurrentTrack(){return this.currentIndex>=0&&this.currentIndex<this.queue.length?this.queue[this.currentIndex]:null}getQueue(){return[...this.queue]}getCurrentIndex(){return this.currentIndex}isCurrentlyPlaying(t){let e=this.getCurrentTrack();return this.isPlaying&&e&&e.url===t}isCurrentTrack(t){let e=this.getCurrentTrack();return e&&e.url===t}getPlayer(){return this.player}_emit(t,e={}){this.barEl&&this.barEl.dispatchEvent(new CustomEvent("waveformbar:"+t,{bubbles:!0,detail:e}))}show(){return this.barEl&&this.barEl.classList.add("wb-active"),this}hide(){return this.barEl&&this.barEl.classList.remove("wb-active"),this.closeQueuePanel(),this.closeVolumePopup(),this}toggleQueuePanel(){return this.queueOpen?this.closeQueuePanel():this.openQueuePanel()}openQueuePanel(){if(!this.queueEl)return this;if(this.queueOpen=!0,this.closeVolumePopup(),this.queueBtnEl){let t=this.queueBtnEl.getBoundingClientRect();this.queueEl.style.right=window.innerWidth-t.right+"px"}return this.queueEl.classList.add("wb-queue-open"),this.queueBtnEl&&this.queueBtnEl.classList.add("wb-active"),this._renderQueue(),this}closeQueuePanel(){return this.queueEl?(this.queueOpen=!1,this.queueEl.classList.remove("wb-queue-open"),this.queueBtnEl&&this.queueBtnEl.classList.remove("wb-active"),this):this}toggleVolumePopup(){return this.volumePopupEl?.classList.contains("wb-volume-open")?this.closeVolumePopup():this.openVolumePopup(),this}openVolumePopup(){return this.volumePopupEl?(this.closeQueuePanel(),this.volumePopupEl.classList.add("wb-volume-open"),this.muteBtnEl&&this.muteBtnEl.classList.add("wb-active"),this):this}closeVolumePopup(){return this.volumePopupEl?(this.volumePopupEl.classList.remove("wb-volume-open"),this.muteBtnEl&&this.muteBtnEl.classList.remove("wb-active"),this):this}_loadCurrentTrack(){let t=this.getCurrentTrack();if(!t||!this.player)return;this.show(),this._updateTrackDisplay(t),this._updateFavoriteUI();let e={artwork:t.artwork,album:t.album};if(t.waveform&&(e.waveform=t.waveform),t.markers&&t.markers.length){let i=this.config.markerColor;e.markers=t.markers.map(r=>({...r,color:r.color||i}))}else e.markers=[];this.player.loadTrack(t.url,t.title,t.artist,e),this._activeMarkers=t.markers&&t.markers.length?t.markers:null,this._currentMarkerIndex=-1,this.player&&this.player.setVolume(this.isMuted?0:this.volume),this._renderQueue(),this._syncPageState(),this._saveState(),this._updateNavButtons(),this._emit("trackchange",{track:t,index:this.currentIndex}),this.config.onTrackChange&&this.config.onTrackChange(t,this.currentIndex)}_updateTrackDisplay(t){this.titleEl&&this._setScrollText(this.titleEl,t.title||"Untitled"),this.artistEl&&this._setScrollText(this.artistEl,t.artist||"");let e=this.barEl.querySelector(".wb-artwork");if(e){let r=t.artwork||this.config.defaultArtwork;e.innerHTML=r?`<img src="${u(r)}" alt="${u(t.title)}" />`:n.music}this.metaEl&&this.config.showMeta&&this._renderMeta(t);let i=this.barEl.querySelector(".wb-track");i&&(i.style.cursor=t.link?"pointer":"default"),this.timeCurrentEl&&(this.timeCurrentEl.textContent="0:00"),this.timeTotalEl&&(this.timeTotalEl.textContent="0:00")}_setScrollText(t,e){t.classList.remove("wb-scrolling"),t.textContent=e,requestAnimationFrame(()=>{if(t.scrollWidth>t.clientWidth){let i=t.scrollWidth-t.clientWidth,r=Math.max(4,i/20);t.innerHTML=`<span class="wb-scroll-inner">${u(e)}</span>`,t.style.setProperty("--wb-scroll-distance",`-${i+48}px`),t.style.setProperty("--wb-scroll-duration",`${r}s`),t.classList.add("wb-scrolling")}})}_renderMeta(t){if(!this.metaEl)return;let e=[];if(t.bpm&&e.push({label:t.bpm+" BPM",type:"bpm"}),t.key&&e.push({label:t.key,type:"key"}),t.duration&&e.push({label:t.duration,type:"duration"}),t.meta)for(let[r,a]of Object.entries(t.meta))a&&e.length<this.config.maxMeta&&e.push({label:String(a),type:r});let i=e.slice(0,this.config.maxMeta);this.metaEl.style.display=i.length?"flex":"none",this.metaEl.innerHTML=i.map(r=>`<span class="wb-tag wb-tag-${u(r.type)}">${u(r.label)}</span>`).join("")}_updatePlayButton(){if(!this.playBtnEl)return;let t=this.playBtnEl.querySelector(".wb-icon-play"),e=this.playBtnEl.querySelector(".wb-icon-pause");t&&(t.style.display=this.isPlaying?"none":"block"),e&&(e.style.display=this.isPlaying?"block":"none"),this.playBtnEl.title=this.isPlaying?"Pause":"Play"}_updateNavButtons(){let t=this.barEl?.querySelector(".wb-prev"),e=this.barEl?.querySelector(".wb-next");this.repeat==="all"?(t&&t.classList.remove("wb-disabled"),e&&e.classList.remove("wb-disabled")):(t&&t.classList.toggle("wb-disabled",this.currentIndex<=0),e&&e.classList.toggle("wb-disabled",this.currentIndex>=this.queue.length-1))}cycleRepeat(){let t=["off","all","one"],e=t.indexOf(this.repeat);return this.repeat=t[(e+1)%t.length],this._updateRepeatButton(),this._updateNavButtons(),this._emit("repeatchange",{mode:this.repeat}),this}setRepeat(t){return["off","all","one"].includes(t)&&(this.repeat=t,this._updateRepeatButton(),this._updateNavButtons(),this._emit("repeatchange",{mode:this.repeat})),this}_updateRepeatButton(){if(!this.repeatBtnEl)return;let t={off:n.repeatOff,all:n.repeatAll,one:n.repeatOne},e={off:"Repeat: Off",all:"Repeat: All",one:"Repeat: One"};this.repeatBtnEl.innerHTML=t[this.repeat],this.repeatBtnEl.title=e[this.repeat],this.repeatBtnEl.classList.toggle("wb-repeat-active",this.repeat!=="off")}_checkMarkerBoundary(t){if(!this._activeMarkers)return;let e=-1;for(let l=this._activeMarkers.length-1;l>=0;l--)if(t>=this._activeMarkers[l].time){e=l;break}if(e===this._currentMarkerIndex||(this._currentMarkerIndex=e,e<0))return;let i=this._activeMarkers[e],r=this.getCurrentTrack();i.title&&this.titleEl&&this._setScrollText(this.titleEl,i.title),i.artist&&this.artistEl&&this._setScrollText(this.artistEl,i.artist);let a=this.waveformContainer?.querySelectorAll(".waveform-marker");if(a&&a.forEach((l,c)=>l.classList.toggle("wb-marker-active",c===e)),i.artwork){let l=this.barEl.querySelector(".wb-artwork");l&&(l.innerHTML=`<img src="${i.artwork}" alt="${i.title||""}" />`)}if(this.metaEl&&(i.bpm||i.key)){let l={...r||{},bpm:i.bpm||"",key:i.key||""};this._renderMeta(l)}this._emit("markerchange",{marker:i,index:e,track:r})}_updateVolumeUI(){this.volumeSliderEl&&(this.volumeSliderEl.value=this.isMuted?0:Math.round(this.volume*100)),this.muteBtnEl&&(this.isMuted||this.volume===0?(this.muteBtnEl.innerHTML=n.volMute,this.muteBtnEl.classList.add("wb-muted"),this.muteBtnEl.title="Unmute"):this.volume<.5?(this.muteBtnEl.innerHTML=n.volLow,this.muteBtnEl.classList.remove("wb-muted"),this.muteBtnEl.title="Mute"):(this.muteBtnEl.innerHTML=n.volHigh,this.muteBtnEl.classList.remove("wb-muted"),this.muteBtnEl.title="Mute"))}_detectTheme(){let t=document.documentElement,e=document.body,i=["dark","dark-mode","theme-dark"],r=["light","light-mode","theme-light"];for(let a of i)if(t.classList.contains(a)||e.classList.contains(a))return"dark";if(t.getAttribute("data-theme")==="dark"||e.getAttribute("data-theme")==="dark")return"dark";for(let a of r)if(t.classList.contains(a)||e.classList.contains(a))return"light";if(t.getAttribute("data-theme")==="light"||e.getAttribute("data-theme")==="light")return"light";try{let l=getComputedStyle(e).backgroundColor.match(/\d+/g);if(l&&l.length>=3){let c=(l[0]*299+l[1]*587+l[2]*114)/1e3;if(c>128)return"light";if(c<128)return"dark"}}catch{}return window.matchMedia?.("(prefers-color-scheme: light)").matches?"light":"dark"}_updateFavoriteUI(){if(!this.favBtnEl)return;let t=this.isFavorited();this.favBtnEl.innerHTML=t?n.heartFilled:n.heart,this.favBtnEl.classList.toggle("wb-fav-active",t)}_renderQueue(){B(this.queueBodyEl,this.queueCountEl,this.queue,this.currentIndex,{onSkipTo:t=>this.skipTo(t),onRemove:t=>this.removeFromQueue(t)})}_syncPageState(){let t=this.getCurrentTrack(),e=t?t.url:null;document.querySelectorAll("[data-wb-play]").forEach(i=>{let r=i.dataset.wbUrl||i.dataset.url,a=i.dataset.wbId||i.dataset.id||r,l=r&&r===e;i.classList.toggle("wb-current",l),i.classList.toggle("wb-playing",l&&this.isPlaying),i.classList.toggle("wb-favorited",this._favorites.has(a)),i.classList.toggle("wb-in-cart",this._cartItems.has(a))})}_seedFromAttributes(){let t=!1,e=!1;document.querySelectorAll("[data-wb-play]").forEach(i=>{let r=i.dataset.wbId||i.dataset.id||i.dataset.wbUrl||i.dataset.url;r&&(i.dataset.wbFavorited==="true"&&(this._favorites.add(r),t=!0),i.dataset.wbInCart==="true"&&(this._cartItems.add(r),e=!0))}),t&&p(this.config.storageKey,this._favorites)}_syncFavoriteAttributes(t,e){document.querySelectorAll("[data-wb-play]").forEach(i=>{(i.dataset.wbUrl||i.dataset.url)===t&&(i.dataset.wbFavorited=e?"true":"false",i.classList.toggle("wb-favorited",e))})}_syncCartAttributes(t,e){document.querySelectorAll("[data-wb-play]").forEach(i=>{(i.dataset.wbUrl||i.dataset.url)===t&&(i.dataset.wbInCart=e?"true":"false",i.classList.toggle("wb-in-cart",e))})}_saveState(){this.config.persist&&g(this.config.storageKey,{queue:this.queue,currentIndex:this.currentIndex,position:this._lastPosition||0,isPlaying:this.isPlaying})}_restoreState(){if(!this.config.persist)return;let t=w(this.config.storageKey);if(!t)return;this.queue=t.queue,this.currentIndex=t.currentIndex;let e=this.getCurrentTrack();if(e){if(this.show(),this._updateTrackDisplay(e),this._updateFavoriteUI(),this._updateNavButtons(),e.waveform&&(this.player.options.waveform=e.waveform),this.player.options.title=e.title||"",this.player.options.subtitle=e.artist||"",e.markers&&e.markers.length){let i=this.config.markerColor;this.player.options.markers=e.markers.map(r=>({...r,color:r.color||i})),this._activeMarkers=e.markers}else this.player.options.markers=[],this._activeMarkers=null;this._currentMarkerIndex=-1,this.player.load(e.url).then(()=>{if(this.player&&this.player.setVolume(this.isMuted?0:this.volume),console.log("RESTORE: position =",t.position,"duration =",this.player?.audio?.duration),t.isPlaying&&this.config.autoResume)try{let i=this.player.play();i&&typeof i.catch=="function"&&i.catch(()=>{this.isPlaying=!1,this._updatePlayButton(),this._syncPageState()})}catch{this.isPlaying=!1,this._updatePlayButton(),this._syncPageState()}t.position>0&&setTimeout(()=>{this.player&&(this.player.seekTo(t.position),this._lastPosition=t.position)},100)}).catch(()=>{}),this._renderQueue(),this._syncPageState()}}_restoreVolume(){let t=E(this.config.storageKey);t&&(this.volume=t.volume,this.isMuted=t.muted,this._volumeBeforeMute=t.volumeBeforeMute,this.player&&this.player.setVolume(this.isMuted?0:this.volume),this._updateVolumeUI())}_restoreFavorites(){this._favorites=_(this.config.storageKey)}};var C=new f;typeof window<"u"&&(window.WaveformBar=C);var W=C;})();
+            </div>`}}s.innerHTML=l,s.querySelectorAll(".wb-queue-item[data-qi]").forEach(o=>{o.addEventListener("click",h=>{h.target.closest(".wb-queue-remove")||r.onSkipTo&&r.onSkipTo(parseInt(o.dataset.qi))})}),s.querySelectorAll(".wb-queue-remove").forEach(o=>{o.addEventListener("click",h=>{h.stopPropagation(),r.onRemove&&r.onRemove(parseInt(o.dataset.qi))})})}var x={persist:!0,autoResume:!0,continuous:!0,repeat:"off",showRepeat:!0,showQueue:!0,showPrevNext:!0,showVolume:!0,showMute:!0,showMeta:!0,showTime:!0,showTrackLink:!0,maxMeta:3,defaultArtwork:null,theme:null,waveformStyle:"mirror",waveformHeight:32,barWidth:2,barSpacing:0,waveformColor:null,progressColor:null,markerColor:"rgba(255, 255, 255, 0.25)",volume:1,storageKey:"waveform-bar",actions:null,onPlay:null,onPause:null,onTrackChange:null,onQueueChange:null,onVolumeChange:null,onFavorite:null,onCart:null},f=class{constructor(){this.config=null,this.player=null,this.queue=[],this.currentIndex=-1,this.isPlaying=!1,this.isInitialized=!1,this.queueOpen=!1,this.volume=1,this.isMuted=!1,this._volumeBeforeMute=1,this._lastPosition=0,this._favorites=new Set,this._cartItems=new Set,this._observer=null,this._activeMarkers=null,this._currentMarkerIndex=-1,this.repeat="off",this.barEl=null,this.queueEl=null,this.waveformContainer=null,this.volumePopupEl=null,this.titleEl=null,this.artistEl=null,this.metaEl=null,this.playBtnEl=null,this.repeatBtnEl=null,this.queueBtnEl=null,this.queueBodyEl=null,this.queueCountEl=null,this.volumeSliderEl=null,this.muteBtnEl=null,this.favBtnEl=null,this.cartBtnEl=null,this.timeCurrentEl=null,this.timeTotalEl=null}init(t={}){return this.isInitialized&&this.destroy(),this.config={...x,...t},this.volume=this.config.volume,typeof window.WaveformPlayer>"u"?(console.error("WaveformBar: WaveformPlayer is required."),this):(this._createBar(),this._createQueue(),this._initPlayer(),this._bindTriggers(),this._observeDOM(),this.config.persist&&(this._restoreVolume(),this._restoreFavorites()),this._seedFromAttributes(),this.config.persist&&this._restoreState(),this.isInitialized=!0,this._beforeUnloadHandler=()=>this._saveState(),window.addEventListener("beforeunload",this._beforeUnloadHandler),this)}destroy(){return this.player&&(this.player.destroy(),this.player=null),this.barEl&&(this.barEl.remove(),this.barEl=null),this.queueEl&&(this.queueEl.remove(),this.queueEl=null),this._observer&&(this._observer.disconnect(),this._observer=null),this._beforeUnloadHandler&&(window.removeEventListener("beforeunload",this._beforeUnloadHandler),this._beforeUnloadHandler=null),document.querySelectorAll("[data-wb-play],[data-wb-queue]").forEach(t=>delete t._wbBound),document.querySelectorAll(".wb-current,.wb-playing").forEach(t=>t.classList.remove("wb-current","wb-playing")),this.queue=[],this.currentIndex=-1,this.isPlaying=!1,this.queueOpen=!1,this.isInitialized=!1,this.config=null,this}_createBar(){this.barEl=document.createElement("div"),this.barEl.className="waveform-bar";let t=this.config.theme||this._detectTheme();t==="light"&&this.barEl.classList.add("wb-light"),this._resolvedTheme=t,this.barEl.id="waveform-bar",this.barEl.innerHTML=k(this.config),document.body.appendChild(this.barEl),this.titleEl=this.barEl.querySelector(".wb-title"),this.artistEl=this.barEl.querySelector(".wb-artist"),this.metaEl=this.barEl.querySelector(".wb-meta"),this.playBtnEl=this.barEl.querySelector(".wb-play"),this.waveformContainer=this.barEl.querySelector(".wb-waveform-container"),this.queueBtnEl=this.barEl.querySelector(".wb-queue-btn"),this.muteBtnEl=this.barEl.querySelector(".wb-mute"),this.volumeSliderEl=this.barEl.querySelector(".wb-volume-slider"),this.favBtnEl=this.barEl.querySelector(".wb-fav"),this.cartBtnEl=this.barEl.querySelector(".wb-cart"),this.timeCurrentEl=this.barEl.querySelector(".wb-time-current"),this.timeTotalEl=this.barEl.querySelector(".wb-time-total"),this.playBtnEl.addEventListener("click",()=>this.togglePlay());let e=this.barEl.querySelector(".wb-prev"),i=this.barEl.querySelector(".wb-next");e&&e.addEventListener("click",()=>this.previous()),i&&i.addEventListener("click",()=>this.next()),this.repeatBtnEl=this.barEl.querySelector(".wb-repeat"),this.repeatBtnEl&&(this.repeat=this.config.repeat||"off",this._updateRepeatButton(),this.repeatBtnEl.addEventListener("click",()=>this.cycleRepeat())),this.queueBtnEl&&this.queueBtnEl.addEventListener("click",()=>this.toggleQueuePanel()),this.volumePopupEl=this.barEl.querySelector(".wb-volume-popup");let r=this.barEl.querySelector(".wb-volume");if(this.muteBtnEl&&this.muteBtnEl.addEventListener("click",a=>{a.stopPropagation(),this.toggleMute()}),r&&this.volumePopupEl){let a;r.addEventListener("mouseenter",()=>{clearTimeout(a),this.openVolumePopup()}),r.addEventListener("mouseleave",()=>{a=setTimeout(()=>this.closeVolumePopup(),300)})}this.volumeSliderEl&&this.volumeSliderEl.addEventListener("input",a=>{a.stopPropagation(),this.setVolume(parseInt(a.target.value)/100)}),document.addEventListener("click",a=>{this.volumePopupEl?.classList.contains("wb-volume-open")&&!this.barEl.querySelector(".wb-volume")?.contains(a.target)&&this.closeVolumePopup()}),this.favBtnEl&&this.favBtnEl.addEventListener("click",()=>this.toggleFavorite()),this.cartBtnEl&&this.cartBtnEl.addEventListener("click",()=>this.addToCart()),this.config.showTrackLink&&this.barEl.querySelector(".wb-track").addEventListener("click",()=>{let a=this.getCurrentTrack();a&&a.link&&(window.location.href=a.link)})}_createQueue(){this.config.showQueue&&(this.queueEl=q(),this._resolvedTheme==="light"&&this.queueEl.classList.add("wb-light"),document.body.appendChild(this.queueEl),this.queueBodyEl=this.queueEl.querySelector(".wb-queue-body"),this.queueCountEl=this.queueEl.querySelector(".wb-queue-count"),this.queueEl.querySelector(".wb-queue-clear").addEventListener("click",()=>this.clearQueue()),document.addEventListener("click",t=>{this.queueOpen&&!this.queueEl.contains(t.target)&&!this.queueBtnEl.contains(t.target)&&this.closeQueuePanel()}))}_initPlayer(){let t={showControls:!1,showInfo:!1,waveformStyle:this.config.waveformStyle,height:this.config.waveformHeight,barWidth:this.config.barWidth,barSpacing:this.config.barSpacing,singlePlay:!1,onPlay:()=>{this.isPlaying=!0,this._updatePlayButton(),this._syncPageState();let e=this.getCurrentTrack();this._emit("play",{track:e}),this.config.onPlay&&this.config.onPlay(e)},onPause:()=>{this.isPlaying=!1,this._updatePlayButton(),this._syncPageState(),this._saveState();let e=this.getCurrentTrack();this._emit("pause",{track:e}),this.config.onPause&&this.config.onPause(e)},onEnd:()=>{if(this.isPlaying=!1,this._updatePlayButton(),this._syncPageState(),this.timeCurrentEl&&(this.timeCurrentEl.textContent="0:00"),this.repeat==="one"){this.player&&(this.player.seekTo(0),this.player.play().catch(()=>{}));return}this.config.continuous&&this.currentIndex<this.queue.length-1?(this.currentIndex++,this._loadCurrentTrack()):this.repeat==="all"&&this.queue.length>0&&(this.currentIndex=0,this._loadCurrentTrack())},onTimeUpdate:(e,i)=>{this._lastPosition=e,this.timeCurrentEl&&(this.timeCurrentEl.textContent=v(e)),this.timeTotalEl&&(this.timeTotalEl.textContent=v(i)),(!this._lastSaveTime||e-this._lastSaveTime>2)&&(this._lastSaveTime=e,this._saveState()),this._activeMarkers&&this._checkMarkerBoundary(e)},onLoad:null};this.config.waveformColor&&(t.waveformColor=this.config.waveformColor),this.config.progressColor&&(t.progressColor=this.config.progressColor),this.player=new window.WaveformPlayer(this.waveformContainer,t),this.player.setVolume(this.volume)}_bindTriggers(){document.querySelectorAll("[data-wb-play]").forEach(t=>{t._wbBound||(t._wbBound=!0,t.addEventListener("click",e=>{e.preventDefault();let i=m(t);i&&this.play(i)}))}),document.querySelectorAll("[data-wb-queue]").forEach(t=>{t._wbBound||(t._wbBound=!0,t.addEventListener("click",e=>{e.preventDefault(),e.stopPropagation();let i=m(t);i&&this.addToQueue(i)}))})}_observeDOM(){typeof MutationObserver>"u"||(this._observer=new MutationObserver(()=>{this._bindTriggers(),this._syncPageState()}),this._observer.observe(document.body,{childList:!0,subtree:!0}))}play(t){let e=typeof t=="string"?{url:t,id:t,title:d(t)}:t;if(!e||!e.url)return this;let i=this.getCurrentTrack();if(i&&i.url===e.url)return this.togglePlay(),this;let r=this.queue.findIndex(a=>a.url===e.url);if(r>=0)this.queue[r]={...this.queue[r],...e},this.currentIndex=r;else{let a=this.currentIndex+1;this.queue.splice(a,0,e),this.currentIndex=a}return this._loadCurrentTrack(),this}addToQueue(t){let e=typeof t=="string"?{url:t,id:t,title:d(t)}:t;return!e||!e.url?this:this.queue.find(i=>i.url===e.url)?this:(this.queue.push(e),this._renderQueue(),this._saveState(),this._updateNavButtons(),this.currentIndex===-1&&(this.currentIndex=0,this._loadCurrentTrack()),this.config.onQueueChange&&this.config.onQueueChange(this.queue,this.currentIndex),this)}togglePlay(){return this.player?(this.isPlaying?this.player.pause():this.player.play(),this):this}pause(){return this.player&&this.isPlaying&&this.player.pause(),this}next(){return this.currentIndex<this.queue.length-1?(this.currentIndex++,this._loadCurrentTrack()):this.repeat==="all"&&this.queue.length>0&&(this.currentIndex=0,this._loadCurrentTrack()),this}previous(){return this.player&&this.player.audio&&this.player.audio.currentTime>3?(this.player.seekTo(0),this):(this.currentIndex>0?(this.currentIndex--,this._loadCurrentTrack()):this.repeat==="all"&&this.queue.length>0&&(this.currentIndex=this.queue.length-1,this._loadCurrentTrack()),this)}skipTo(t){return t<0||t>=this.queue.length?this:t===this.currentIndex?(this.togglePlay(),this):(this.currentIndex=t,this._loadCurrentTrack(),this)}seekToMarker(t){if(!this._activeMarkers||t<0||t>=this._activeMarkers.length)return this;let e=this._activeMarkers[t];return this.player&&(this.player.seekTo(e.time),this.isPlaying||this.togglePlay()),this}seekToMarkerByLabel(t){if(!this._activeMarkers)return this;let e=this._activeMarkers.findIndex(i=>(i.label||i.title||"").toLowerCase()===t.toLowerCase());return e>=0&&this.seekToMarker(e),this}setVolume(t){return this.volume=Math.max(0,Math.min(1,t)),this.isMuted=this.volume===0,this.player&&this.player.setVolume(this.volume),this._updateVolumeUI(),y(this.config.storageKey,this.volume,this.isMuted,this._volumeBeforeMute),this._emit("volumechange",{volume:this.volume}),this.config.onVolumeChange&&this.config.onVolumeChange(this.volume),this}getVolume(){return this.volume}toggleMute(){return this.isMuted?this.setVolume(this._volumeBeforeMute||1):(this._volumeBeforeMute=this.volume,this.isMuted=!0,this.player&&this.player.setVolume(0),this._updateVolumeUI()),this}toggleFavorite(){let t=this.getCurrentTrack();if(!t)return this;let e=t.id||t.url,i=this._favorites.has(e);return i?this._favorites.delete(e):this._favorites.add(e),this._updateFavoriteUI(),this._syncFavoriteAttributes(t.url,!i),p(this.config.storageKey,this._favorites),this._emit("favorite",{track:t,favorited:!i}),this.config.onFavorite&&this.config.onFavorite(t,!i),this.config.actions?.favorite&&b(this.config.actions.favorite,{action:"favorite",id:e,url:t.url,title:t.title,favorited:!i}),this}addToCart(){let t=this.getCurrentTrack();if(!t)return this;let e=t.id||t.url;return this._cartItems.add(e),this.cartBtnEl&&(this.cartBtnEl.classList.add("wb-action-done"),setTimeout(()=>this.cartBtnEl.classList.remove("wb-action-done"),1500)),this._syncCartAttributes(t.url,!0),this._emit("cart",{track:t}),this.config.onCart&&this.config.onCart(t),this.config.actions?.cart&&b(this.config.actions.cart,{action:"cart",id:e,url:t.url,title:t.title}),this}isFavorited(t){if(!t){let e=this.getCurrentTrack();t=e?e.id||e.url:null}return t?this._favorites.has(t):!1}isInCart(t){if(!t){let e=this.getCurrentTrack();t=e?e.id||e.url:null}return t?this._cartItems.has(t):!1}removeFromQueue(t){return t<0||t>=this.queue.length||t===this.currentIndex?this:(this.queue.splice(t,1),t<this.currentIndex&&this.currentIndex--,this._renderQueue(),this._saveState(),this._updateNavButtons(),this._emit("queuechange",{queue:this.queue,currentIndex:this.currentIndex}),this.config.onQueueChange&&this.config.onQueueChange(this.queue,this.currentIndex),this)}clearQueue(){let t=this.getCurrentTrack();return this.queue=t?[t]:[],this.currentIndex=t?0:-1,this._renderQueue(),this._saveState(),this._updateNavButtons(),this._emit("queuechange",{queue:this.queue,currentIndex:this.currentIndex}),this.config.onQueueChange&&this.config.onQueueChange(this.queue,this.currentIndex),this}getCurrentTrack(){return this.currentIndex>=0&&this.currentIndex<this.queue.length?this.queue[this.currentIndex]:null}getQueue(){return[...this.queue]}getCurrentIndex(){return this.currentIndex}isCurrentlyPlaying(t){let e=this.getCurrentTrack();return this.isPlaying&&e&&e.url===t}isCurrentTrack(t){let e=this.getCurrentTrack();return e&&e.url===t}getPlayer(){return this.player}_emit(t,e={}){this.barEl&&this.barEl.dispatchEvent(new CustomEvent("waveformbar:"+t,{bubbles:!0,detail:e}))}show(){return this.barEl&&this.barEl.classList.add("wb-active"),this}hide(){return this.barEl&&this.barEl.classList.remove("wb-active"),this.closeQueuePanel(),this.closeVolumePopup(),this}toggleQueuePanel(){return this.queueOpen?this.closeQueuePanel():this.openQueuePanel()}openQueuePanel(){if(!this.queueEl)return this;if(this.queueOpen=!0,this.closeVolumePopup(),this.queueBtnEl){let t=this.queueBtnEl.getBoundingClientRect();this.queueEl.style.right=window.innerWidth-t.right+"px"}return this.queueEl.classList.add("wb-queue-open"),this.queueBtnEl&&this.queueBtnEl.classList.add("wb-active"),this._renderQueue(),this}closeQueuePanel(){return this.queueEl?(this.queueOpen=!1,this.queueEl.classList.remove("wb-queue-open"),this.queueBtnEl&&this.queueBtnEl.classList.remove("wb-active"),this):this}toggleVolumePopup(){return this.volumePopupEl?.classList.contains("wb-volume-open")?this.closeVolumePopup():this.openVolumePopup(),this}openVolumePopup(){return this.volumePopupEl?(this.closeQueuePanel(),this.volumePopupEl.classList.add("wb-volume-open"),this.muteBtnEl&&this.muteBtnEl.classList.add("wb-active"),this):this}closeVolumePopup(){return this.volumePopupEl?(this.volumePopupEl.classList.remove("wb-volume-open"),this.muteBtnEl&&this.muteBtnEl.classList.remove("wb-active"),this):this}_loadCurrentTrack(){let t=this.getCurrentTrack();if(!t||!this.player)return;this.show(),this._updateTrackDisplay(t),this._updateFavoriteUI();let e={artwork:t.artwork,album:t.album};if(t.waveform&&(e.waveform=t.waveform),t.markers&&t.markers.length){let i=this.config.markerColor;e.markers=t.markers.map(r=>({...r,color:r.color||i}))}else e.markers=[];this.player.loadTrack(t.url,t.title,t.artist,e),this._activeMarkers=t.markers&&t.markers.length?t.markers:null,this._currentMarkerIndex=-1,this.player&&this.player.setVolume(this.isMuted?0:this.volume),this._renderQueue(),this._syncPageState(),this._saveState(),this._updateNavButtons(),this._emit("trackchange",{track:t,index:this.currentIndex}),this.config.onTrackChange&&this.config.onTrackChange(t,this.currentIndex)}_updateTrackDisplay(t){this.titleEl&&this._setScrollText(this.titleEl,t.title||"Untitled"),this.artistEl&&this._setScrollText(this.artistEl,t.artist||"");let e=this.barEl.querySelector(".wb-artwork");if(e){let r=t.artwork||this.config.defaultArtwork;e.innerHTML=r?`<img src="${u(r)}" alt="${u(t.title)}" />`:n.music}this.metaEl&&this.config.showMeta&&this._renderMeta(t);let i=this.barEl.querySelector(".wb-track");i&&(i.style.cursor=t.link?"pointer":"default"),this.timeCurrentEl&&(this.timeCurrentEl.textContent="0:00"),this.timeTotalEl&&(this.timeTotalEl.textContent="0:00")}_setScrollText(t,e){t.classList.remove("wb-scrolling"),t.textContent=e,requestAnimationFrame(()=>{if(t.scrollWidth>t.clientWidth){let i=t.scrollWidth-t.clientWidth,r=Math.max(4,i/20);t.innerHTML=`<span class="wb-scroll-inner">${u(e)}</span>`,t.style.setProperty("--wb-scroll-distance",`-${i+48}px`),t.style.setProperty("--wb-scroll-duration",`${r}s`),t.classList.add("wb-scrolling")}})}_renderMeta(t){if(!this.metaEl)return;let e=[];if(t.bpm&&e.push({label:t.bpm+" BPM",type:"bpm"}),t.key&&e.push({label:t.key,type:"key"}),t.duration&&e.push({label:t.duration,type:"duration"}),t.meta)for(let[r,a]of Object.entries(t.meta))a&&e.length<this.config.maxMeta&&e.push({label:String(a),type:r});let i=e.slice(0,this.config.maxMeta);this.metaEl.style.display=i.length?"flex":"none",this.metaEl.innerHTML=i.map(r=>`<span class="wb-tag wb-tag-${u(r.type)}">${u(r.label)}</span>`).join("")}_updatePlayButton(){if(!this.playBtnEl)return;let t=this.playBtnEl.querySelector(".wb-icon-play"),e=this.playBtnEl.querySelector(".wb-icon-pause");t&&(t.style.display=this.isPlaying?"none":"block"),e&&(e.style.display=this.isPlaying?"block":"none"),this.playBtnEl.title=this.isPlaying?"Pause":"Play"}_updateNavButtons(){let t=this.barEl?.querySelector(".wb-prev"),e=this.barEl?.querySelector(".wb-next");this.repeat==="all"?(t&&t.classList.remove("wb-disabled"),e&&e.classList.remove("wb-disabled")):(t&&t.classList.toggle("wb-disabled",this.currentIndex<=0),e&&e.classList.toggle("wb-disabled",this.currentIndex>=this.queue.length-1))}cycleRepeat(){let t=["off","all","one"],e=t.indexOf(this.repeat);return this.repeat=t[(e+1)%t.length],this._updateRepeatButton(),this._updateNavButtons(),this._emit("repeatchange",{mode:this.repeat}),this}setRepeat(t){return["off","all","one"].includes(t)&&(this.repeat=t,this._updateRepeatButton(),this._updateNavButtons(),this._emit("repeatchange",{mode:this.repeat})),this}_updateRepeatButton(){if(!this.repeatBtnEl)return;let t={off:n.repeatOff,all:n.repeatAll,one:n.repeatOne},e={off:"Repeat: Off",all:"Repeat: All",one:"Repeat: One"};this.repeatBtnEl.innerHTML=t[this.repeat],this.repeatBtnEl.title=e[this.repeat],this.repeatBtnEl.classList.toggle("wb-repeat-active",this.repeat!=="off")}_checkMarkerBoundary(t){if(!this._activeMarkers)return;let e=-1;for(let l=this._activeMarkers.length-1;l>=0;l--)if(t>=this._activeMarkers[l].time){e=l;break}if(e===this._currentMarkerIndex||(this._currentMarkerIndex=e,e<0))return;let i=this._activeMarkers[e],r=this.getCurrentTrack();i.title&&this.titleEl&&this._setScrollText(this.titleEl,i.title),i.artist&&this.artistEl&&this._setScrollText(this.artistEl,i.artist);let a=this.waveformContainer?.querySelectorAll(".waveform-marker");if(a&&a.forEach((l,c)=>l.classList.toggle("wb-marker-active",c===e)),i.artwork){let l=this.barEl.querySelector(".wb-artwork");l&&(l.innerHTML=`<img src="${i.artwork}" alt="${i.title||""}" />`)}if(this.metaEl&&(i.bpm||i.key)){let l={...r||{},bpm:i.bpm||"",key:i.key||""};this._renderMeta(l)}this._emit("markerchange",{marker:i,index:e,track:r})}_updateVolumeUI(){this.volumeSliderEl&&(this.volumeSliderEl.value=this.isMuted?0:Math.round(this.volume*100)),this.muteBtnEl&&(this.isMuted||this.volume===0?(this.muteBtnEl.innerHTML=n.volMute,this.muteBtnEl.classList.add("wb-muted"),this.muteBtnEl.title="Unmute"):this.volume<.5?(this.muteBtnEl.innerHTML=n.volLow,this.muteBtnEl.classList.remove("wb-muted"),this.muteBtnEl.title="Mute"):(this.muteBtnEl.innerHTML=n.volHigh,this.muteBtnEl.classList.remove("wb-muted"),this.muteBtnEl.title="Mute"))}_detectTheme(){let t=document.documentElement,e=document.body,i=["dark","dark-mode","theme-dark"],r=["light","light-mode","theme-light"];for(let a of i)if(t.classList.contains(a)||e.classList.contains(a))return"dark";if(t.getAttribute("data-theme")==="dark"||e.getAttribute("data-theme")==="dark")return"dark";for(let a of r)if(t.classList.contains(a)||e.classList.contains(a))return"light";if(t.getAttribute("data-theme")==="light"||e.getAttribute("data-theme")==="light")return"light";try{let l=getComputedStyle(e).backgroundColor.match(/\d+/g);if(l&&l.length>=3){let c=(l[0]*299+l[1]*587+l[2]*114)/1e3;if(c>128)return"light";if(c<128)return"dark"}}catch{}return window.matchMedia?.("(prefers-color-scheme: light)").matches?"light":"dark"}_updateFavoriteUI(){if(!this.favBtnEl)return;let t=this.isFavorited();this.favBtnEl.innerHTML=t?n.heartFilled:n.heart,this.favBtnEl.classList.toggle("wb-fav-active",t)}_renderQueue(){B(this.queueBodyEl,this.queueCountEl,this.queue,this.currentIndex,{onSkipTo:t=>this.skipTo(t),onRemove:t=>this.removeFromQueue(t)})}_syncPageState(){let t=this.getCurrentTrack(),e=t?t.url:null;document.querySelectorAll("[data-wb-play]").forEach(i=>{let r=i.dataset.wbUrl||i.dataset.url,a=i.dataset.wbId||i.dataset.id||r,l=r&&r===e;i.classList.toggle("wb-current",l),i.classList.toggle("wb-playing",l&&this.isPlaying),i.classList.toggle("wb-favorited",this._favorites.has(a)),i.classList.toggle("wb-in-cart",this._cartItems.has(a))})}_seedFromAttributes(){let t=!1,e=!1;document.querySelectorAll("[data-wb-play]").forEach(i=>{let r=i.dataset.wbId||i.dataset.id||i.dataset.wbUrl||i.dataset.url;r&&(i.dataset.wbFavorited==="true"&&(this._favorites.add(r),t=!0),i.dataset.wbInCart==="true"&&(this._cartItems.add(r),e=!0))}),t&&p(this.config.storageKey,this._favorites)}_syncFavoriteAttributes(t,e){document.querySelectorAll("[data-wb-play]").forEach(i=>{(i.dataset.wbUrl||i.dataset.url)===t&&(i.dataset.wbFavorited=e?"true":"false",i.classList.toggle("wb-favorited",e))})}_syncCartAttributes(t,e){document.querySelectorAll("[data-wb-play]").forEach(i=>{(i.dataset.wbUrl||i.dataset.url)===t&&(i.dataset.wbInCart=e?"true":"false",i.classList.toggle("wb-in-cart",e))})}_saveState(){this.config.persist&&g(this.config.storageKey,{queue:this.queue,currentIndex:this.currentIndex,position:this._lastPosition||0,isPlaying:this.isPlaying})}_restoreState(){if(!this.config.persist)return;let t=w(this.config.storageKey);if(!t)return;this.queue=t.queue,this.currentIndex=t.currentIndex;let e=this.getCurrentTrack();if(e){if(this.show(),this._updateTrackDisplay(e),this._updateFavoriteUI(),this._updateNavButtons(),e.waveform&&(this.player.options.waveform=e.waveform),this.player.options.title=e.title||"",this.player.options.subtitle=e.artist||"",e.markers&&e.markers.length){let i=this.config.markerColor;this.player.options.markers=e.markers.map(r=>({...r,color:r.color||i})),this._activeMarkers=e.markers}else this.player.options.markers=[],this._activeMarkers=null;this._currentMarkerIndex=-1,this.player.load(e.url).then(()=>{if(this.player&&this.player.setVolume(this.isMuted?0:this.volume),t.isPlaying&&this.config.autoResume)try{let i=this.player.play();i&&typeof i.catch=="function"&&i.catch(()=>{this.isPlaying=!1,this._updatePlayButton(),this._syncPageState()})}catch{this.isPlaying=!1,this._updatePlayButton(),this._syncPageState()}t.position>0&&setTimeout(()=>{this.player&&(this.player.seekTo(t.position),this._lastPosition=t.position)},100)}).catch(()=>{}),this._renderQueue(),this._syncPageState()}}_restoreVolume(){let t=E(this.config.storageKey);t&&(this.volume=t.volume,this.isMuted=t.muted,this._volumeBeforeMute=t.volumeBeforeMute,this.player&&this.player.setVolume(this.isMuted?0:this.volume),this._updateVolumeUI())}_restoreFavorites(){this._favorites=_(this.config.storageKey)}};var C=new f;typeof window<"u"&&(window.WaveformBar=C);var W=C;})();
 /**
  * WaveformBar v1.0.0
  * Persistent bottom audio player bar for WaveformPlayer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arraypress/waveform-bar",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Persistent bottom audio player bar for WaveformPlayer - queue management, page persistence, and seamless playback.",
   "main": "dist/waveform-bar.js",
   "module": "dist/waveform-bar.esm.js",

package/src/css/waveform-bar-icons.css

@@ -5,12 +5,21 @@
  * MIT License
  *
  * Usage:
- * <span class="wbi wbi-play"></span>
+ *   <span class="wbi wbi-play"></span>
  */
 
-.wbi-heart-filled {
-    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' 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>");
-    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' 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>");
+.wbi {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-color: currentColor;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    vertical-align: -0.125em;
 }
 
 .wbi-sm {
@@ -136,4 +145,4 @@
 .wbi-share {
     -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/></svg>");
     mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/></svg>");
-}
+}

package/src/js/core.js

@@ -5,7 +5,14 @@
 
 import {ICONS} from './icons.js';
 import {extractTitle, escapeHtml, formatTime, parseTrackFromElement} from './utils.js';
-import {saveQueueState, restoreQueueState, saveVolume, restoreVolume, saveFavorites, restoreFavorites} from './storage.js';
+import {
+    saveQueueState,
+    restoreQueueState,
+    saveVolume,
+    restoreVolume,
+    saveFavorites,
+    restoreFavorites
+} from './storage.js';
 import {fireAction} from './actions.js';
 import {buildBarHTML} from './dom.js';
 import {createQueuePanel, renderQueue} from './queue.js';
@@ -142,11 +149,26 @@ export class WaveformBar {
      * @returns {WaveformBar}
      */
     destroy() {
-        if (this.player) { this.player.destroy(); this.player = null; }
-        if (this.barEl) { this.barEl.remove(); this.barEl = null; }
-        if (this.queueEl) { this.queueEl.remove(); this.queueEl = null; }
-        if (this._observer) { this._observer.disconnect(); this._observer = null; }
-        if (this._beforeUnloadHandler) { window.removeEventListener('beforeunload', this._beforeUnloadHandler); this._beforeUnloadHandler = null; }
+        if (this.player) {
+            this.player.destroy();
+            this.player = null;
+        }
+        if (this.barEl) {
+            this.barEl.remove();
+            this.barEl = null;
+        }
+        if (this.queueEl) {
+            this.queueEl.remove();
+            this.queueEl = null;
+        }
+        if (this._observer) {
+            this._observer.disconnect();
+            this._observer = null;
+        }
+        if (this._beforeUnloadHandler) {
+            window.removeEventListener('beforeunload', this._beforeUnloadHandler);
+            this._beforeUnloadHandler = null;
+        }
 
         document.querySelectorAll('[data-wb-play],[data-wb-queue]').forEach(el => delete el._wbBound);
         document.querySelectorAll('.wb-current,.wb-playing').forEach(el => el.classList.remove('wb-current', 'wb-playing'));
@@ -315,7 +337,8 @@ export class WaveformBar {
                     // Repeat current track
                     if (this.player) {
                         this.player.seekTo(0);
-                        this.player.play().catch(() => {});
+                        this.player.play().catch(() => {
+                        });
                     }
                     return;
                 }
@@ -549,7 +572,9 @@ export class WaveformBar {
         return this;
     }
 
-    getVolume() { return this.volume; }
+    getVolume() {
+        return this.volume;
+    }
 
     toggleMute() {
         if (this.isMuted) {
@@ -672,11 +697,27 @@ export class WaveformBar {
         return (this.currentIndex >= 0 && this.currentIndex < this.queue.length) ? this.queue[this.currentIndex] : null;
     }
 
-    getQueue() { return [...this.queue]; }
-    getCurrentIndex() { return this.currentIndex; }
-    isCurrentlyPlaying(url) { const c = this.getCurrentTrack(); return this.isPlaying && c && c.url === url; }
-    isCurrentTrack(url) { const c = this.getCurrentTrack(); return c && c.url === url; }
-    getPlayer() { return this.player; }
+    getQueue() {
+        return [...this.queue];
+    }
+
+    getCurrentIndex() {
+        return this.currentIndex;
+    }
+
+    isCurrentlyPlaying(url) {
+        const c = this.getCurrentTrack();
+        return this.isPlaying && c && c.url === url;
+    }
+
+    isCurrentTrack(url) {
+        const c = this.getCurrentTrack();
+        return c && c.url === url;
+    }
+
+    getPlayer() {
+        return this.player;
+    }
 
     // =====================================================================
     // Events
@@ -712,10 +753,21 @@ export class WaveformBar {
     // UI: Bar visibility & Queue panel
     // =====================================================================
 
-    show() { if (this.barEl) this.barEl.classList.add('wb-active'); return this; }
-    hide() { if (this.barEl) this.barEl.classList.remove('wb-active'); this.closeQueuePanel(); this.closeVolumePopup(); return this; }
+    show() {
+        if (this.barEl) this.barEl.classList.add('wb-active');
+        return this;
+    }
+
+    hide() {
+        if (this.barEl) this.barEl.classList.remove('wb-active');
+        this.closeQueuePanel();
+        this.closeVolumePopup();
+        return this;
+    }
 
-    toggleQueuePanel() { return this.queueOpen ? this.closeQueuePanel() : this.openQueuePanel(); }
+    toggleQueuePanel() {
+        return this.queueOpen ? this.closeQueuePanel() : this.openQueuePanel();
+    }
 
     openQueuePanel() {
         if (!this.queueEl) return this;
@@ -779,7 +831,11 @@ export class WaveformBar {
         this._updateFavoriteUI();
 
         const loadOpts = {artwork: track.artwork, album: track.album};
-        if (track.waveform) loadOpts.waveform = track.waveform;
+
+        // Pass pre-existing waveform data if available
+        if (track.waveform) {
+            loadOpts.waveform = track.waveform;
+        }
 
         // Always pass markers — empty array clears previous track's markers
         if (track.markers && track.markers.length) {
@@ -1045,7 +1101,8 @@ export class WaveformBar {
                 if (brightness > 128) return 'light';
                 if (brightness < 128) return 'dark';
             }
-        } catch (e) {}
+        } catch (e) {
+        }
 
         // 3. System preference
         if (window.matchMedia?.('(prefers-color-scheme: light)').matches) return 'light';
@@ -1199,7 +1256,10 @@ export class WaveformBar {
 
         // Use load() instead of loadTrack() to avoid auto-play.
         // We handle seek and play manually after the audio is ready.
-        if (track.waveform) this.player.options.waveform = track.waveform;
+        if (track.waveform) {
+            this.player.options.waveform = track.waveform;
+        }
+
         this.player.options.title = track.title || '';
         this.player.options.subtitle = track.artist || '';
 
@@ -1220,8 +1280,6 @@ export class WaveformBar {
         this.player.load(track.url).then(() => {
             if (this.player) this.player.setVolume(this.isMuted ? 0 : this.volume);
 
-            console.log('RESTORE: position =', state.position, 'duration =', this.player?.audio?.duration);
-
             if (state.isPlaying && this.config.autoResume) {
                 try {
                     const p = this.player.play();
@@ -1249,7 +1307,8 @@ export class WaveformBar {
                     }
                 }, 100);
             }
-        }).catch(() => {});
+        }).catch(() => {
+        });
 
         this._renderQueue();
         this._syncPageState();
@@ -1268,4 +1327,5 @@ export class WaveformBar {
     _restoreFavorites() {
         this._favorites = restoreFavorites(this.config.storageKey);
     }
-}
+
+}