@arraypress/waveform-bar 1.6.1 → 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 +18 -14
  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 +18 -14
  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,37 +431,39 @@
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: 120px;
442
+ width: 104px;
443
+ height: 6px;
444
+ transform: rotate(-90deg);
439
445
  background: transparent;
440
446
  outline: none;
441
447
  cursor: pointer;
442
448
  }
443
449
 
444
- /* Track — Webkit (Chrome/Safari/Edge).
445
- `height: 100%` is load-bearing: without an explicit length the vertical
446
- track collapses in some engines, leaving a stubby toggle-looking popup. */
450
+ /* Track — Webkit (Chrome/Safari/Edge) */
447
451
  .wb-volume-slider::-webkit-slider-runnable-track {
448
- width: 6px;
449
- height: 100%;
452
+ width: 100%;
453
+ height: 6px;
450
454
  background: var(--wb-border);
451
455
  border-radius: 3px;
452
456
  }
453
457
 
454
- /* Thumb — Webkit */
458
+ /* Thumb — Webkit (margin-top centers the 16px thumb on the 6px track) */
455
459
  .wb-volume-slider::-webkit-slider-thumb {
456
460
  -webkit-appearance: none;
457
461
  width: 16px;
458
462
  height: 16px;
463
+ margin-top: -5px;
459
464
  background: var(--wb-accent);
460
465
  border-radius: 50%;
461
466
  cursor: pointer;
462
- margin-left: -5px;
463
467
  transition: transform 0.15s;
464
468
  }
465
469
 
@@ -469,8 +473,8 @@
469
473
 
470
474
  /* Track — Firefox */
471
475
  .wb-volume-slider::-moz-range-track {
472
- width: 6px;
473
- height: 100%;
476
+ width: 100%;
477
+ height: 6px;
474
478
  background: var(--wb-border);
475
479
  border-radius: 3px;
476
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:120px;background:transparent;outline:none;cursor:pointer}.wb-volume-slider::-webkit-slider-runnable-track{width:6px;height:100%;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;height:100%;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.1",
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,37 +431,39 @@
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: 120px;
442
+ width: 104px;
443
+ height: 6px;
444
+ transform: rotate(-90deg);
439
445
  background: transparent;
440
446
  outline: none;
441
447
  cursor: pointer;
442
448
  }
443
449
 
444
- /* Track — Webkit (Chrome/Safari/Edge).
445
- `height: 100%` is load-bearing: without an explicit length the vertical
446
- track collapses in some engines, leaving a stubby toggle-looking popup. */
450
+ /* Track — Webkit (Chrome/Safari/Edge) */
447
451
  .wb-volume-slider::-webkit-slider-runnable-track {
448
- width: 6px;
449
- height: 100%;
452
+ width: 100%;
453
+ height: 6px;
450
454
  background: var(--wb-border);
451
455
  border-radius: 3px;
452
456
  }
453
457
 
454
- /* Thumb — Webkit */
458
+ /* Thumb — Webkit (margin-top centers the 16px thumb on the 6px track) */
455
459
  .wb-volume-slider::-webkit-slider-thumb {
456
460
  -webkit-appearance: none;
457
461
  width: 16px;
458
462
  height: 16px;
463
+ margin-top: -5px;
459
464
  background: var(--wb-accent);
460
465
  border-radius: 50%;
461
466
  cursor: pointer;
462
- margin-left: -5px;
463
467
  transition: transform 0.15s;
464
468
  }
465
469
 
@@ -469,8 +473,8 @@
469
473
 
470
474
  /* Track — Firefox */
471
475
  .wb-volume-slider::-moz-range-track {
472
- width: 6px;
473
- height: 100%;
476
+ width: 100%;
477
+ height: 6px;
474
478
  background: var(--wb-border);
475
479
  border-radius: 3px;
476
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>';