@arraypress/waveform-player 1.13.0 → 1.13.1
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.
package/dist/waveform-player.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.waveform-player{font-family:inherit;color:inherit;line-height:var(--waveform-line-height, 1.4);--wfp-accent: #71717a}.waveform-player *{box-sizing:border-box}.waveform-body{display:flex;flex-direction:column;gap:var(--waveform-body-gap, 8px)}.waveform-track{display:flex;align-items:center;gap:var(--waveform-track-gap, 12px);position:relative}.waveform-btn{width:36px;height:36px;min-width:36px;border-radius:50%;border:2px solid currentColor;background:transparent;color:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;opacity:.9;flex-shrink:0}.waveform-btn:hover:not(:disabled){opacity:1;transform:scale(1.05)}.waveform-btn-minimal{width:2.
|
|
1
|
+
.waveform-player{font-family:inherit;color:inherit;line-height:var(--waveform-line-height, 1.4);--wfp-accent: #71717a}.waveform-player *{box-sizing:border-box}.waveform-body{display:flex;flex-direction:column;gap:var(--waveform-body-gap, 8px)}.waveform-track{display:flex;align-items:center;gap:var(--waveform-track-gap, 12px);position:relative}.waveform-btn{width:36px;height:36px;min-width:36px;border-radius:50%;border:2px solid currentColor;background:transparent;color:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;opacity:.9;flex-shrink:0}.waveform-btn:hover:not(:disabled){opacity:1;transform:scale(1.05)}.waveform-btn-minimal{width:2.5rem;height:2.5rem;min-width:2.5rem;border:none;border-radius:0;opacity:.7}.waveform-btn-minimal:hover:not(:disabled){opacity:1;transform:none}.waveform-btn-minimal svg{width:36px;height:36px}.waveform-btn:disabled{cursor:not-allowed;opacity:.3}.waveform-btn>*{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.waveform-btn svg{width:16px;height:16px;fill:currentColor;display:block}.waveform-icon-play svg{margin-left:1px}.waveform-container{flex:1;position:relative;min-height:60px;cursor:pointer;min-width:0;width:100%}.waveform-container:focus-visible{outline:2px solid currentColor}.waveform-container canvas{display:block;width:100%;height:100%;max-width:100%;transition:opacity .3s ease;position:relative;z-index:1}.waveform-info{display:flex;align-items:center;gap:8px;font-size:13px;min-height:20px}.waveform-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.waveform-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.waveform-subtitle{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.waveform-time{font-size:11px;white-space:nowrap;flex-shrink:0}.waveform-bpm{font-size:11px;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:4px}.waveform-loading{position:absolute;inset:0;background:#0000001a;z-index:10}.waveform-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0003;z-index:10}.waveform-error-text{font-size:12px;opacity:.7;text-align:center;padding:0 20px}.waveform-markers{position:absolute;inset:0;pointer-events:none;z-index:5}.waveform-marker{position:absolute;top:0;width:2px;height:100%;background:#ffffff80;border:none;padding:0;cursor:pointer;pointer-events:all;transition:all .2s}.waveform-marker:hover{width:4px;z-index:20}.waveform-marker.active{width:4px;background:currentColor;z-index:10}.waveform-marker-tooltip{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%);background:#000000e6;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1000}.waveform-marker:hover .waveform-marker-tooltip{opacity:1}.waveform-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}.waveform-marker:focus-visible{outline:2px solid currentColor;outline-offset:1px;width:4px}.waveform-speed{position:relative;flex-shrink:0}.speed-btn{background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:4px 8px;color:inherit;font-size:11px;cursor:pointer;transition:all .2s;min-width:40px}.speed-btn:hover{background:#ffffff0d;border-color:#ffffff4d}.speed-value{font-weight:600}.speed-menu{position:absolute;bottom:100%;right:0;margin-bottom:4px;background:#000000f2;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:4px;z-index:100;min-width:60px}.speed-option{display:block;width:100%;background:transparent;border:none;color:#ffffffb3;padding:6px 12px;font-size:12px;cursor:pointer;transition:all .2s;text-align:left;border-radius:4px}.speed-option:hover{background:#ffffff1a;color:#fff}.speed-option.active{background:#ffffff29;color:#fff;font-weight:600}.waveform-player.waveform-focused{outline:2px solid var(--wfp-accent);outline-offset:2px;border-radius:4px}.waveform-player:focus{outline:none}.waveform-player:focus-visible{outline:1px solid var(--wfp-accent);outline-offset:1px}.waveform-layout-preview .waveform-meta{display:none!important}.waveform-layout-preview .waveform-info{justify-content:center}.waveform-layout-preview .waveform-text{flex:0 1 auto;align-items:center;text-align:center}.waveform-player.waveform-focused{outline:none}.waveform-track.waveform-align-top{align-items:flex-start}.waveform-track.waveform-align-top .waveform-btn{margin-top:5px}.waveform-track.waveform-align-center{align-items:center}.waveform-track.waveform-align-bottom{align-items:flex-end}.waveform-track.waveform-align-bottom .waveform-btn{margin-bottom:5px}@media(max-width:480px){.waveform-btn{width:32px;height:32px;min-width:32px}.waveform-container{min-height:50px}.waveform-info{font-size:12px}.waveform-subtitle,.waveform-time,.waveform-bpm{font-size:10px}}@media(prefers-reduced-motion:reduce){.waveform-player *,.waveform-player *:before,.waveform-player *:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
|
package/package.json
CHANGED
|
@@ -58,10 +58,12 @@
|
|
|
58
58
|
/* A FIXED box is essential: toggling the play glyph (which is optically
|
|
59
59
|
nudged 1px) for the pause glyph would otherwise change the button's
|
|
60
60
|
auto width, shifting the adjacent waveform — and re-sampling its bars —
|
|
61
|
-
on every play/pause. Fixed width keeps the canvas (and bars) stable.
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
61
|
+
on every play/pause. Fixed width keeps the canvas (and bars) stable.
|
|
62
|
+
Sized so the bare glyph reads at the same visual weight as the 36px
|
|
63
|
+
circle button (the glyph, not a ring, is the whole control here). */
|
|
64
|
+
width: 2.5rem;
|
|
65
|
+
height: 2.5rem;
|
|
66
|
+
min-width: 2.5rem;
|
|
65
67
|
border: none;
|
|
66
68
|
border-radius: 0;
|
|
67
69
|
opacity: 0.7;
|
|
@@ -73,8 +75,8 @@
|
|
|
73
75
|
}
|
|
74
76
|
|
|
75
77
|
.waveform-btn-minimal svg {
|
|
76
|
-
width:
|
|
77
|
-
height:
|
|
78
|
+
width: 36px;
|
|
79
|
+
height: 36px;
|
|
78
80
|
}
|
|
79
81
|
|
|
80
82
|
.waveform-btn:disabled {
|