@arraypress/waveform-bar 1.6.0 → 1.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/waveform-bar.css +17 -9
  2. package/dist/waveform-bar.esm.js +1 -1
  3. package/dist/waveform-bar.js +1 -1
  4. package/dist/waveform-bar.min.css +1 -1
  5. package/dist/waveform-bar.min.js +1 -1
  6. package/package.json +1 -1
  7. package/src/css/waveform-bar.css +17 -9
  8. package/src/js/dom.js +1 -1
package/dist/waveform-bar.css CHANGED
@@ -410,9 +410,11 @@
410
410
  -webkit-backdrop-filter: blur(20px);
411
411
  border: 1px solid var(--wb-border);
412
412
  border-radius: 10px;
413
- padding: 1rem 0.5rem;
414
413
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
415
414
  z-index: 10000;
415
+ /* Fixed box that holds the rotated slider (see below). */
416
+ width: 40px;
417
+ height: 132px;
416
418
  display: flex;
417
419
  align-items: center;
418
420
  justify-content: center;
@@ -429,13 +431,17 @@
429
431
  transform: translateX(-50%) translateY(0);
430
432
  }
431
433
 
434
+ /* A normal HORIZONTAL range input rotated -90deg — the only vertical-slider
435
+ technique that renders + drags reliably across engines. `writing-mode:
436
+ vertical` collapses the input to ~6px in Chrome 124+ (height is ignored),
437
+ leaving an ungrabbable dot. width = the volume travel; height = thickness.
438
+ rotate(-90deg) puts max (loud) at the top, 0 (mute) at the bottom. */
432
439
  .wb-volume-slider {
433
440
  -webkit-appearance: none;
434
441
  appearance: none;
435
- writing-mode: vertical-lr;
436
- direction: rtl;
437
- width: 6px;
438
- height: 100px;
442
+ width: 104px;
443
+ height: 6px;
444
+ transform: rotate(-90deg);
439
445
  background: transparent;
440
446
  outline: none;
441
447
  cursor: pointer;
@@ -443,20 +449,21 @@
443
449
 
444
450
  /* Track — Webkit (Chrome/Safari/Edge) */
445
451
  .wb-volume-slider::-webkit-slider-runnable-track {
446
- width: 6px;
452
+ width: 100%;
453
+ height: 6px;
447
454
  background: var(--wb-border);
448
455
  border-radius: 3px;
449
456
  }
450
457
 
451
- /* Thumb — Webkit */
458
+ /* Thumb — Webkit (margin-top centers the 16px thumb on the 6px track) */
452
459
  .wb-volume-slider::-webkit-slider-thumb {
453
460
  -webkit-appearance: none;
454
461
  width: 16px;
455
462
  height: 16px;
463
+ margin-top: -5px;
456
464
  background: var(--wb-accent);
457
465
  border-radius: 50%;
458
466
  cursor: pointer;
459
- margin-left: -5px;
460
467
  transition: transform 0.15s;
461
468
  }
462
469
 
@@ -466,7 +473,8 @@
466
473
 
467
474
  /* Track — Firefox */
468
475
  .wb-volume-slider::-moz-range-track {
469
- width: 6px;
476
+ width: 100%;
477
+ height: 6px;
470
478
  background: var(--wb-border);
471
479
  border-radius: 3px;
472
480
  border: none;
package/dist/waveform-bar.esm.js CHANGED
@@ -218,7 +218,7 @@ function buildBarHTML(config) {
218
218
  right += `<button class="wb-btn wb-btn-sm wb-mute" aria-label="Volume" title="Volume">${ICONS.volHigh}</button>`;
219
219
  if (config.showVolume) {
220
220
  right += `<div class="wb-volume-popup">
221
- <input type="range" class="wb-volume-slider" min="0" max="100" value="100" orient="vertical" aria-label="Volume">
221
+ <input type="range" class="wb-volume-slider" min="0" max="100" value="100" aria-label="Volume">
222
222
  </div>`;
223
223
  }
224
224
  right += "</div>";
package/dist/waveform-bar.js CHANGED
@@ -219,7 +219,7 @@
219
219
  right += `<button class="wb-btn wb-btn-sm wb-mute" aria-label="Volume" title="Volume">${ICONS.volHigh}</button>`;
220
220
  if (config.showVolume) {
221
221
  right += `<div class="wb-volume-popup">
222
- <input type="range" class="wb-volume-slider" min="0" max="100" value="100" orient="vertical" aria-label="Volume">
222
+ <input type="range" class="wb-volume-slider" min="0" max="100" value="100" aria-label="Volume">
223
223
  </div>`;
224
224
  }
225
225
  right += "</div>";
package/dist/waveform-bar.min.css CHANGED
@@ -1 +1 @@
1
- .waveform-bar,.wb-queue-panel{--wb-bg: rgba(17, 17, 17, .95);--wb-border: rgba(255, 255, 255, .1);--wb-text: #ffffff;--wb-text-muted: rgba(255, 255, 255, .5);--wb-accent: #fafafa;--wb-accent-light: #e4e4e7;--wb-on-accent: #18181b;--wb-hover: rgba(255, 255, 255, .08);--wb-tag-bg: rgba(255, 255, 255, .08);--wb-tag-text: rgba(255, 255, 255, .7);--wb-fav-color: #ef4444;--wb-cart-color: #4ade80}.waveform-bar.wb-light,.wb-queue-panel.wb-light{--wb-bg: rgba(255, 255, 255, .95);--wb-border: rgba(0, 0, 0, .1);--wb-text: #1a1a1a;--wb-text-muted: rgba(0, 0, 0, .5);--wb-accent: #18181b;--wb-accent-light: #3f3f46;--wb-on-accent: #fafafa;--wb-hover: rgba(0, 0, 0, .05);--wb-tag-bg: rgba(0, 0, 0, .06);--wb-tag-text: rgba(0, 0, 0, .6)}.waveform-bar.wb-light{box-shadow:0 -1px 8px #00000014}.wb-queue-panel.wb-light{box-shadow:0 -2px 16px #0000001a}.wb-light .wb-volume-popup{box-shadow:0 -2px 12px #0000001a}.waveform-bar{position:fixed;bottom:0;left:0;right:0;background:var(--wb-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--wb-border);z-index:9999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--wb-text);transform:translateY(100%);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease}.waveform-bar.wb-active{transform:translateY(0);opacity:1}.waveform-bar *{box-sizing:border-box}.wb-inner{max-width:var(--wb-max-width, 1400px);margin:0 auto;padding:.5rem 1.5rem;display:flex;align-items:center;gap:.75rem}.wb-left{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.wb-centre{flex:1;min-width:120px;display:flex;align-items:center;gap:.75rem}.wb-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.wb-controls{display:flex;align-items:center;gap:.125rem;flex-shrink:0}.wb-btn{width:36px;height:36px;border-radius:50%;border:none;background:transparent;color:var(--wb-text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0}.wb-btn:hover{background:var(--wb-hover);color:var(--wb-accent)}.wb-btn.wb-disabled{opacity:.25;pointer-events:none}.wb-share.wb-copied{color:#4ade80}.wb-btn-sm{width:32px;height:32px}.wb-play{width:40px;height:40px;background:var(--wb-accent);color:var(--wb-on-accent)}.wb-play:hover{background:var(--wb-accent-light);color:var(--wb-on-accent);transform:scale(1.05)}.wb-track{display:flex;align-items:center;gap:.625rem;min-width:0;max-width:200px;overflow:hidden}.wb-artwork{width:40px;height:40px;background:linear-gradient(135deg,var(--wb-accent),var(--wb-accent-light));display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.wb-artwork img{width:100%;height:100%;object-fit:cover}.wb-track-text{min-width:0;overflow:hidden;width:140px}.wb-title,.wb-artist{white-space:nowrap;line-height:1.3;display:block;overflow:hidden}.wb-title{font-size:.8rem;font-weight:600;color:var(--wb-text)}.wb-artist{font-size:.7rem;color:var(--wb-text-muted)}.wb-title.wb-scrolling,.wb-artist.wb-scrolling{overflow:visible}.wb-title.wb-scrolling .wb-scroll-inner,.wb-artist.wb-scrolling .wb-scroll-inner{display:inline-block;padding-right:3rem;animation:wb-marquee var(--wb-scroll-duration, 8s) ease-in-out infinite}@keyframes wb-marquee{0%,10%{transform:translate(0)}45%,55%{transform:translate(var(--wb-scroll-distance, -100px))}90%,to{transform:translate(0)}}.wb-time{font-size:.7rem;color:var(--wb-text-muted);white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums;min-width:70px;text-align:left}.wb-waveform-container{flex:1;min-width:0;width:100%}.wb-waveform-container .waveform-player{width:100%;background:transparent!important;border:none!important}.wb-waveform-container .waveform-player-inner{width:100%;padding:0!important}.wb-waveform-container .waveform-body{width:100%;gap:0!important}.wb-waveform-container .waveform-track{width:100%;padding:0!important}.wb-waveform-container .waveform-marker.wb-marker-active{animation:wb-marker-pulse 2s ease-in-out infinite}@keyframes wb-marker-pulse{0%,to{opacity:1}50%{opacity:.3}}.wb-meta{display:none;align-items:center;gap:.375rem;flex-shrink:0}.wb-tag{display:inline-block;padding:.15rem .5rem;background:var(--wb-tag-bg);color:var(--wb-tag-text);border-radius:4px;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.wb-tag-bpm{color:var(--wb-accent);background:color-mix(in srgb,var(--wb-accent) 12%,transparent)}.wb-tag-key{color:#4ade80;background:#4ade801f}.wb-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.wb-fav-active{color:var(--wb-fav-color)!important}.wb-fav-active:hover{background:#ef44441a}.wb-action-done{color:var(--wb-cart-color)!important;animation:wb-flash .3s ease}@keyframes wb-flash{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.wb-volume{position:relative;flex-shrink:0}.wb-mute.wb-muted{opacity:.4}.wb-volume-popup{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%) translateY(8px);background:var(--wb-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--wb-border);border-radius:10px;padding:1rem .5rem;box-shadow:0 -8px 30px #0006;z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s}.wb-volume-popup.wb-volume-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%) translateY(0)}.wb-volume-slider{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:6px;height:100px;background:transparent;outline:none;cursor:pointer}.wb-volume-slider::-webkit-slider-runnable-track{width:6px;background:var(--wb-border);border-radius:3px}.wb-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--wb-accent);border-radius:50%;cursor:pointer;margin-left:-5px;transition:transform .15s}.wb-volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.wb-volume-slider::-moz-range-track{width:6px;background:var(--wb-border);border-radius:3px;border:none}.wb-volume-slider::-moz-range-thumb{width:16px;height:16px;background:var(--wb-accent);border:none;border-radius:50%;cursor:pointer}.wb-volume-slider::-moz-range-thumb:hover{transform:scale(1.2)}.wb-repeat{opacity:.4;transition:opacity .15s,color .15s}.wb-repeat.wb-repeat-active{opacity:1;color:var(--wb-accent)}.wb-repeat.wb-repeat-active:hover{background:color-mix(in srgb,var(--wb-accent) 12%,transparent)}.wb-queue-btn.wb-active{color:var(--wb-accent);background:color-mix(in srgb,var(--wb-accent) 12%,transparent)}.wb-queue-panel{position:fixed;bottom:68px;width:340px;max-height:400px;background:var(--wb-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--wb-border);border-radius:12px;z-index:9999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--wb-text);display:flex;flex-direction:column;box-shadow:0 -8px 40px #0006;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s}.wb-queue-panel.wb-queue-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.wb-queue-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--wb-border);flex-shrink:0}.wb-queue-title{font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.wb-queue-title svg{width:16px;height:16px}.wb-queue-count{background:color-mix(in srgb,var(--wb-accent) 15%,transparent);color:var(--wb-accent);padding:.1rem .45rem;border-radius:10px;font-size:.7rem;font-weight:600}.wb-queue-clear{background:transparent;border:none;color:var(--wb-text-muted);cursor:pointer;font-size:.7rem;padding:.25rem .5rem;border-radius:4px;transition:all .15s;width:auto;height:auto}.wb-queue-clear:hover{color:var(--wb-accent);background:var(--wb-hover)}.wb-queue-body{flex:1;overflow-y:auto;padding:.375rem}.wb-queue-body::-webkit-scrollbar{width:5px}.wb-queue-body::-webkit-scrollbar-track{background:transparent}.wb-queue-body::-webkit-scrollbar-thumb{background:var(--wb-border);border-radius:3px}.wb-queue-label{padding:.4rem .5rem .2rem;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--wb-text-muted)}.wb-queue-item{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border-radius:6px;transition:background .15s;cursor:pointer}.wb-queue-item:hover{background:var(--wb-hover)}.wb-queue-current{background:color-mix(in srgb,var(--wb-accent) 10%,transparent)}.wb-queue-num{width:18px;text-align:center;font-size:.7rem;color:var(--wb-text-muted);flex-shrink:0;display:flex;align-items:center;justify-content:center}.wb-queue-current .wb-queue-num{color:var(--wb-accent)}.wb-queue-info{flex:1;min-width:0}.wb-queue-item-title{font-size:.75rem;font-weight:500;color:var(--wb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-queue-current .wb-queue-item-title{color:var(--wb-accent)}.wb-queue-played .wb-queue-item-title{color:var(--wb-text-muted)}.wb-queue-item-artist{font-size:.65rem;color:var(--wb-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-queue-remove{opacity:0;transition:opacity .15s;background:transparent;border:none;color:var(--wb-text-muted);cursor:pointer;padding:.2rem;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.wb-queue-item:hover .wb-queue-remove{opacity:1}.wb-queue-remove:hover{color:#ef4444;background:#ef44441a}.wb-queue-empty{display:flex;flex-direction:column;align-items:center;padding:2.5rem 1rem;color:var(--wb-text-muted);text-align:center}.wb-queue-empty svg{opacity:.3;margin-bottom:.5rem}.wb-queue-empty p{font-size:.8rem;margin:0}.wb-icon-swap .wb-show-pause{display:none}.wb-icon-swap .wb-show-play,.wb-icon-swap.wb-playing .wb-show-pause{display:inline}.wb-icon-swap.wb-playing .wb-show-play{display:none}.wb-eq-bars{display:inline-flex;gap:2px;align-items:flex-end;height:14px;vertical-align:middle}.wb-eq-bars span{width:3px;height:4px;background:currentColor;border-radius:1px;opacity:.3}.wb-playing .wb-eq-bars span{opacity:1;animation:wb-eq .8s ease-in-out infinite}.wb-playing .wb-eq-bars span:nth-child(1){animation-delay:0s}.wb-playing .wb-eq-bars span:nth-child(2){animation-delay:.15s}.wb-playing .wb-eq-bars span:nth-child(3){animation-delay:.3s}.wb-playing .wb-eq-bars span:nth-child(4){animation-delay:.45s}@keyframes wb-eq{0%,to{height:4px}50%{height:14px}}.wb-card-highlight{transition:border-color .2s,box-shadow .2s}.wb-card-highlight.wb-current{border-color:var(--wb-accent);box-shadow:0 0 0 1px var(--wb-accent)}.wb-current .wb-accent-current{color:var(--wb-accent)}.wb-pulse-playing.wb-playing{animation:wb-pulse 2s ease-in-out infinite}@keyframes wb-pulse{0%,to{opacity:1}50%{opacity:.7}}.wb-show-if-fav{display:none}.wb-favorited .wb-show-if-fav{display:inline}.wb-favorited .wb-hide-if-fav,.wb-show-if-cart{display:none}.wb-in-cart .wb-show-if-cart{display:inline}.wb-in-cart .wb-hide-if-cart{display:none}@media(max-width:768px){.wb-inner{padding:.5rem 1rem;gap:.5rem;flex-wrap:wrap}.wb-left{width:auto;min-width:auto;flex:1}.wb-centre{order:10;flex-basis:100%;min-width:100%}.wb-right{order:2}.wb-track-text{width:auto;max-width:200px}.wb-meta{display:none!important}.wb-actions,.wb-time{display:none}.wb-queue-panel{left:0;right:0;width:auto;bottom:90px;border-radius:12px 12px 0 0;max-height:50vh}.wb-volume-popup{left:auto;right:0;transform:none}}@media(max-width:480px){.wb-left{gap:.5rem}.wb-track-text{width:auto;max-width:140px}.wb-prev,.wb-next,.wb-repeat,.wb-volume{display:none}.wb-queue-panel{bottom:85px}}.waveform-bar.wb-top{top:0;bottom:auto;border-top:none;border-bottom:1px solid var(--wb-border);transform:translateY(-100%)}.waveform-bar.wb-top.wb-active{transform:translateY(0)}.wb-collapse{flex-shrink:0}.waveform-bar.wb-collapsed{left:auto;right:1rem;bottom:1rem;border:1px solid var(--wb-border);border-radius:999px;overflow:hidden;box-shadow:0 6px 24px #00000040}.waveform-bar.wb-top.wb-collapsed{top:1rem;bottom:auto}.waveform-bar.wb-collapsed .wb-inner{max-width:none;padding:.3rem .45rem;gap:.25rem}.waveform-bar.wb-collapsed .wb-centre,.waveform-bar.wb-collapsed .wb-right,.waveform-bar.wb-collapsed .wb-track,.waveform-bar.wb-collapsed .wb-repeat{display:none}
1
+ .waveform-bar,.wb-queue-panel{--wb-bg: rgba(17, 17, 17, .95);--wb-border: rgba(255, 255, 255, .1);--wb-text: #ffffff;--wb-text-muted: rgba(255, 255, 255, .5);--wb-accent: #fafafa;--wb-accent-light: #e4e4e7;--wb-on-accent: #18181b;--wb-hover: rgba(255, 255, 255, .08);--wb-tag-bg: rgba(255, 255, 255, .08);--wb-tag-text: rgba(255, 255, 255, .7);--wb-fav-color: #ef4444;--wb-cart-color: #4ade80}.waveform-bar.wb-light,.wb-queue-panel.wb-light{--wb-bg: rgba(255, 255, 255, .95);--wb-border: rgba(0, 0, 0, .1);--wb-text: #1a1a1a;--wb-text-muted: rgba(0, 0, 0, .5);--wb-accent: #18181b;--wb-accent-light: #3f3f46;--wb-on-accent: #fafafa;--wb-hover: rgba(0, 0, 0, .05);--wb-tag-bg: rgba(0, 0, 0, .06);--wb-tag-text: rgba(0, 0, 0, .6)}.waveform-bar.wb-light{box-shadow:0 -1px 8px #00000014}.wb-queue-panel.wb-light{box-shadow:0 -2px 16px #0000001a}.wb-light .wb-volume-popup{box-shadow:0 -2px 12px #0000001a}.waveform-bar{position:fixed;bottom:0;left:0;right:0;background:var(--wb-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--wb-border);z-index:9999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--wb-text);transform:translateY(100%);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease}.waveform-bar.wb-active{transform:translateY(0);opacity:1}.waveform-bar *{box-sizing:border-box}.wb-inner{max-width:var(--wb-max-width, 1400px);margin:0 auto;padding:.5rem 1.5rem;display:flex;align-items:center;gap:.75rem}.wb-left{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.wb-centre{flex:1;min-width:120px;display:flex;align-items:center;gap:.75rem}.wb-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.wb-controls{display:flex;align-items:center;gap:.125rem;flex-shrink:0}.wb-btn{width:36px;height:36px;border-radius:50%;border:none;background:transparent;color:var(--wb-text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0}.wb-btn:hover{background:var(--wb-hover);color:var(--wb-accent)}.wb-btn.wb-disabled{opacity:.25;pointer-events:none}.wb-share.wb-copied{color:#4ade80}.wb-btn-sm{width:32px;height:32px}.wb-play{width:40px;height:40px;background:var(--wb-accent);color:var(--wb-on-accent)}.wb-play:hover{background:var(--wb-accent-light);color:var(--wb-on-accent);transform:scale(1.05)}.wb-track{display:flex;align-items:center;gap:.625rem;min-width:0;max-width:200px;overflow:hidden}.wb-artwork{width:40px;height:40px;background:linear-gradient(135deg,var(--wb-accent),var(--wb-accent-light));display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.wb-artwork img{width:100%;height:100%;object-fit:cover}.wb-track-text{min-width:0;overflow:hidden;width:140px}.wb-title,.wb-artist{white-space:nowrap;line-height:1.3;display:block;overflow:hidden}.wb-title{font-size:.8rem;font-weight:600;color:var(--wb-text)}.wb-artist{font-size:.7rem;color:var(--wb-text-muted)}.wb-title.wb-scrolling,.wb-artist.wb-scrolling{overflow:visible}.wb-title.wb-scrolling .wb-scroll-inner,.wb-artist.wb-scrolling .wb-scroll-inner{display:inline-block;padding-right:3rem;animation:wb-marquee var(--wb-scroll-duration, 8s) ease-in-out infinite}@keyframes wb-marquee{0%,10%{transform:translate(0)}45%,55%{transform:translate(var(--wb-scroll-distance, -100px))}90%,to{transform:translate(0)}}.wb-time{font-size:.7rem;color:var(--wb-text-muted);white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums;min-width:70px;text-align:left}.wb-waveform-container{flex:1;min-width:0;width:100%}.wb-waveform-container .waveform-player{width:100%;background:transparent!important;border:none!important}.wb-waveform-container .waveform-player-inner{width:100%;padding:0!important}.wb-waveform-container .waveform-body{width:100%;gap:0!important}.wb-waveform-container .waveform-track{width:100%;padding:0!important}.wb-waveform-container .waveform-marker.wb-marker-active{animation:wb-marker-pulse 2s ease-in-out infinite}@keyframes wb-marker-pulse{0%,to{opacity:1}50%{opacity:.3}}.wb-meta{display:none;align-items:center;gap:.375rem;flex-shrink:0}.wb-tag{display:inline-block;padding:.15rem .5rem;background:var(--wb-tag-bg);color:var(--wb-tag-text);border-radius:4px;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.wb-tag-bpm{color:var(--wb-accent);background:color-mix(in srgb,var(--wb-accent) 12%,transparent)}.wb-tag-key{color:#4ade80;background:#4ade801f}.wb-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.wb-fav-active{color:var(--wb-fav-color)!important}.wb-fav-active:hover{background:#ef44441a}.wb-action-done{color:var(--wb-cart-color)!important;animation:wb-flash .3s ease}@keyframes wb-flash{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.wb-volume{position:relative;flex-shrink:0}.wb-mute.wb-muted{opacity:.4}.wb-volume-popup{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%) translateY(8px);background:var(--wb-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--wb-border);border-radius:10px;box-shadow:0 -8px 30px #0006;z-index:10000;width:40px;height:132px;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s}.wb-volume-popup.wb-volume-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%) translateY(0)}.wb-volume-slider{-webkit-appearance:none;appearance:none;width:104px;height:6px;transform:rotate(-90deg);background:transparent;outline:none;cursor:pointer}.wb-volume-slider::-webkit-slider-runnable-track{width:100%;height:6px;background:var(--wb-border);border-radius:3px}.wb-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;background:var(--wb-accent);border-radius:50%;cursor:pointer;transition:transform .15s}.wb-volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.wb-volume-slider::-moz-range-track{width:100%;height:6px;background:var(--wb-border);border-radius:3px;border:none}.wb-volume-slider::-moz-range-thumb{width:16px;height:16px;background:var(--wb-accent);border:none;border-radius:50%;cursor:pointer}.wb-volume-slider::-moz-range-thumb:hover{transform:scale(1.2)}.wb-repeat{opacity:.4;transition:opacity .15s,color .15s}.wb-repeat.wb-repeat-active{opacity:1;color:var(--wb-accent)}.wb-repeat.wb-repeat-active:hover{background:color-mix(in srgb,var(--wb-accent) 12%,transparent)}.wb-queue-btn.wb-active{color:var(--wb-accent);background:color-mix(in srgb,var(--wb-accent) 12%,transparent)}.wb-queue-panel{position:fixed;bottom:68px;width:340px;max-height:400px;background:var(--wb-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--wb-border);border-radius:12px;z-index:9999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--wb-text);display:flex;flex-direction:column;box-shadow:0 -8px 40px #0006;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s}.wb-queue-panel.wb-queue-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.wb-queue-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--wb-border);flex-shrink:0}.wb-queue-title{font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.wb-queue-title svg{width:16px;height:16px}.wb-queue-count{background:color-mix(in srgb,var(--wb-accent) 15%,transparent);color:var(--wb-accent);padding:.1rem .45rem;border-radius:10px;font-size:.7rem;font-weight:600}.wb-queue-clear{background:transparent;border:none;color:var(--wb-text-muted);cursor:pointer;font-size:.7rem;padding:.25rem .5rem;border-radius:4px;transition:all .15s;width:auto;height:auto}.wb-queue-clear:hover{color:var(--wb-accent);background:var(--wb-hover)}.wb-queue-body{flex:1;overflow-y:auto;padding:.375rem}.wb-queue-body::-webkit-scrollbar{width:5px}.wb-queue-body::-webkit-scrollbar-track{background:transparent}.wb-queue-body::-webkit-scrollbar-thumb{background:var(--wb-border);border-radius:3px}.wb-queue-label{padding:.4rem .5rem .2rem;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--wb-text-muted)}.wb-queue-item{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border-radius:6px;transition:background .15s;cursor:pointer}.wb-queue-item:hover{background:var(--wb-hover)}.wb-queue-current{background:color-mix(in srgb,var(--wb-accent) 10%,transparent)}.wb-queue-num{width:18px;text-align:center;font-size:.7rem;color:var(--wb-text-muted);flex-shrink:0;display:flex;align-items:center;justify-content:center}.wb-queue-current .wb-queue-num{color:var(--wb-accent)}.wb-queue-info{flex:1;min-width:0}.wb-queue-item-title{font-size:.75rem;font-weight:500;color:var(--wb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-queue-current .wb-queue-item-title{color:var(--wb-accent)}.wb-queue-played .wb-queue-item-title{color:var(--wb-text-muted)}.wb-queue-item-artist{font-size:.65rem;color:var(--wb-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-queue-remove{opacity:0;transition:opacity .15s;background:transparent;border:none;color:var(--wb-text-muted);cursor:pointer;padding:.2rem;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.wb-queue-item:hover .wb-queue-remove{opacity:1}.wb-queue-remove:hover{color:#ef4444;background:#ef44441a}.wb-queue-empty{display:flex;flex-direction:column;align-items:center;padding:2.5rem 1rem;color:var(--wb-text-muted);text-align:center}.wb-queue-empty svg{opacity:.3;margin-bottom:.5rem}.wb-queue-empty p{font-size:.8rem;margin:0}.wb-icon-swap .wb-show-pause{display:none}.wb-icon-swap .wb-show-play,.wb-icon-swap.wb-playing .wb-show-pause{display:inline}.wb-icon-swap.wb-playing .wb-show-play{display:none}.wb-eq-bars{display:inline-flex;gap:2px;align-items:flex-end;height:14px;vertical-align:middle}.wb-eq-bars span{width:3px;height:4px;background:currentColor;border-radius:1px;opacity:.3}.wb-playing .wb-eq-bars span{opacity:1;animation:wb-eq .8s ease-in-out infinite}.wb-playing .wb-eq-bars span:nth-child(1){animation-delay:0s}.wb-playing .wb-eq-bars span:nth-child(2){animation-delay:.15s}.wb-playing .wb-eq-bars span:nth-child(3){animation-delay:.3s}.wb-playing .wb-eq-bars span:nth-child(4){animation-delay:.45s}@keyframes wb-eq{0%,to{height:4px}50%{height:14px}}.wb-card-highlight{transition:border-color .2s,box-shadow .2s}.wb-card-highlight.wb-current{border-color:var(--wb-accent);box-shadow:0 0 0 1px var(--wb-accent)}.wb-current .wb-accent-current{color:var(--wb-accent)}.wb-pulse-playing.wb-playing{animation:wb-pulse 2s ease-in-out infinite}@keyframes wb-pulse{0%,to{opacity:1}50%{opacity:.7}}.wb-show-if-fav{display:none}.wb-favorited .wb-show-if-fav{display:inline}.wb-favorited .wb-hide-if-fav,.wb-show-if-cart{display:none}.wb-in-cart .wb-show-if-cart{display:inline}.wb-in-cart .wb-hide-if-cart{display:none}@media(max-width:768px){.wb-inner{padding:.5rem 1rem;gap:.5rem;flex-wrap:wrap}.wb-left{width:auto;min-width:auto;flex:1}.wb-centre{order:10;flex-basis:100%;min-width:100%}.wb-right{order:2}.wb-track-text{width:auto;max-width:200px}.wb-meta{display:none!important}.wb-actions,.wb-time{display:none}.wb-queue-panel{left:0;right:0;width:auto;bottom:90px;border-radius:12px 12px 0 0;max-height:50vh}.wb-volume-popup{left:auto;right:0;transform:none}}@media(max-width:480px){.wb-left{gap:.5rem}.wb-track-text{width:auto;max-width:140px}.wb-prev,.wb-next,.wb-repeat,.wb-volume{display:none}.wb-queue-panel{bottom:85px}}.waveform-bar.wb-top{top:0;bottom:auto;border-top:none;border-bottom:1px solid var(--wb-border);transform:translateY(-100%)}.waveform-bar.wb-top.wb-active{transform:translateY(0)}.wb-collapse{flex-shrink:0}.waveform-bar.wb-collapsed{left:auto;right:1rem;bottom:1rem;border:1px solid var(--wb-border);border-radius:999px;overflow:hidden;box-shadow:0 6px 24px #00000040}.waveform-bar.wb-top.wb-collapsed{top:1rem;bottom:auto}.waveform-bar.wb-collapsed .wb-inner{max-width:none;padding:.3rem .45rem;gap:.25rem}.waveform-bar.wb-collapsed .wb-centre,.waveform-bar.wb-collapsed .wb-right,.waveform-bar.wb-collapsed .wb-track,.waveform-bar.wb-collapsed .wb-repeat{display:none}
package/dist/waveform-bar.min.js CHANGED
@@ -11,7 +11,7 @@
11
11
  <div class="wb-waveform-container"></div>
12
12
  <div class="wb-time"><span class="wb-time-current">0:00</span> / <span class="wb-time-total">0:00</span></div>
13
13
  </div>`,i='<div class="wb-right">';a.showMeta&&(i+='<div class="wb-meta"></div>'),a.actions&&(i+='<div class="wb-actions">',a.actions.favorite&&(i+=`<button class="wb-btn wb-btn-sm wb-fav" aria-label="Favorite" title="Favorite">${n.heart}</button>`),a.actions.cart&&(i+=`<button class="wb-btn wb-btn-sm wb-cart" aria-label="Add to cart" title="Add to Cart">${n.cart}</button>`),i+="</div>"),(a.showMute||a.showVolume)&&(i+='<div class="wb-volume">',i+=`<button class="wb-btn wb-btn-sm wb-mute" aria-label="Volume" title="Volume">${n.volHigh}</button>`,a.showVolume&&(i+=`<div class="wb-volume-popup">
14
- <input type="range" class="wb-volume-slider" min="0" max="100" value="100" orient="vertical" aria-label="Volume">
14
+ <input type="range" class="wb-volume-slider" min="0" max="100" value="100" aria-label="Volume">
15
15
  </div>`),i+="</div>"),a.share&&(i+=`<button class="wb-btn wb-btn-sm wb-share" aria-label="Share" title="Copy share link">${n.share}</button>`),a.showQueue&&(i+=`<button class="wb-btn wb-btn-sm wb-queue-btn" aria-label="Queue" title="Queue">${n.queue}</button>`),i+="</div>";let s=a.collapsible?`<button class="wb-btn wb-btn-sm wb-collapse" aria-label="Collapse" title="Collapse">${n.collapse}</button>`:"";return`<div class="wb-inner">${t}${e}${i}${s}</div>`}function x(){let a=document.createElement("div");return a.className="wb-queue-panel",a.innerHTML=`
16
16
  <div class="wb-queue-header">
17
17
  <div class="wb-queue-title">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arraypress/waveform-bar",
3
- "version": "1.6.0",
3
+ "version": "1.6.2",
4
4
  "description": "Persistent bottom audio player bar for WaveformPlayer - queue management, page persistence, and seamless playback.",
5
5
  "main": "dist/waveform-bar.js",
6
6
  "module": "dist/waveform-bar.esm.js",
package/src/css/waveform-bar.css CHANGED
@@ -410,9 +410,11 @@
410
410
  -webkit-backdrop-filter: blur(20px);
411
411
  border: 1px solid var(--wb-border);
412
412
  border-radius: 10px;
413
- padding: 1rem 0.5rem;
414
413
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
415
414
  z-index: 10000;
415
+ /* Fixed box that holds the rotated slider (see below). */
416
+ width: 40px;
417
+ height: 132px;
416
418
  display: flex;
417
419
  align-items: center;
418
420
  justify-content: center;
@@ -429,13 +431,17 @@
429
431
  transform: translateX(-50%) translateY(0);
430
432
  }
431
433
 
434
+ /* A normal HORIZONTAL range input rotated -90deg — the only vertical-slider
435
+ technique that renders + drags reliably across engines. `writing-mode:
436
+ vertical` collapses the input to ~6px in Chrome 124+ (height is ignored),
437
+ leaving an ungrabbable dot. width = the volume travel; height = thickness.
438
+ rotate(-90deg) puts max (loud) at the top, 0 (mute) at the bottom. */
432
439
  .wb-volume-slider {
433
440
  -webkit-appearance: none;
434
441
  appearance: none;
435
- writing-mode: vertical-lr;
436
- direction: rtl;
437
- width: 6px;
438
- height: 100px;
442
+ width: 104px;
443
+ height: 6px;
444
+ transform: rotate(-90deg);
439
445
  background: transparent;
440
446
  outline: none;
441
447
  cursor: pointer;
@@ -443,20 +449,21 @@
443
449
 
444
450
  /* Track — Webkit (Chrome/Safari/Edge) */
445
451
  .wb-volume-slider::-webkit-slider-runnable-track {
446
- width: 6px;
452
+ width: 100%;
453
+ height: 6px;
447
454
  background: var(--wb-border);
448
455
  border-radius: 3px;
449
456
  }
450
457
 
451
- /* Thumb — Webkit */
458
+ /* Thumb — Webkit (margin-top centers the 16px thumb on the 6px track) */
452
459
  .wb-volume-slider::-webkit-slider-thumb {
453
460
  -webkit-appearance: none;
454
461
  width: 16px;
455
462
  height: 16px;
463
+ margin-top: -5px;
456
464
  background: var(--wb-accent);
457
465
  border-radius: 50%;
458
466
  cursor: pointer;
459
- margin-left: -5px;
460
467
  transition: transform 0.15s;
461
468
  }
462
469
 
@@ -466,7 +473,8 @@
466
473
 
467
474
  /* Track — Firefox */
468
475
  .wb-volume-slider::-moz-range-track {
469
- width: 6px;
476
+ width: 100%;
477
+ height: 6px;
470
478
  background: var(--wb-border);
471
479
  border-radius: 3px;
472
480
  border: none;
package/src/js/dom.js CHANGED
@@ -70,7 +70,7 @@ export function buildBarHTML(config) {
70
70
  right += `<button class="wb-btn wb-btn-sm wb-mute" aria-label="Volume" title="Volume">${ICONS.volHigh}</button>`;
71
71
  if (config.showVolume) {
72
72
  right += `<div class="wb-volume-popup">
73
- <input type="range" class="wb-volume-slider" min="0" max="100" value="100" orient="vertical" aria-label="Volume">
73
+ <input type="range" class="wb-volume-slider" min="0" max="100" value="100" aria-label="Volume">
74
74
  </div>`;
75
75
  }
76
76
  right += '</div>';