@waveform-playlist/ui-components 13.1.1 → 13.1.3
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/README.md +71 -0
- package/package.json +3 -4
package/README.md
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# @waveform-playlist/ui-components
|
|
2
|
+
|
|
3
|
+
React UI components for waveform-playlist — canvas-rendered waveform/spectrogram/piano-roll channels, track controls, VU metering, and the styled-components theming layer.
|
|
4
|
+
|
|
5
|
+
Used internally by [`@waveform-playlist/browser`](https://www.npmjs.com/package/@waveform-playlist/browser), which composes these components into a full multitrack editor. Most users get this package transitively and never install it directly — reach for it standalone if you're building custom playlist UI (e.g. a bespoke VU meter or a themed control) without the full editor.
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- **Canvas waveform rendering** — `Channel` draws peaks as bars, with an optional `roundedBars` mode
|
|
10
|
+
- **Spectrogram & piano-roll channels** — `SpectrogramChannel` and `PianoRollChannel` render alongside waveform as alternate track visualizations
|
|
11
|
+
- **Track controls** — mute/solo/volume, track menu, and other transport-adjacent controls
|
|
12
|
+
- **Theming** — `ThemeProvider` + `WaveformPlaylistTheme` (with `defaultTheme` and `darkTheme`) drive every styled component from a single theme object
|
|
13
|
+
- **Virtual scrolling** — chunked canvases and viewport tracking so long timelines don't render off-screen content
|
|
14
|
+
- **`SegmentedVUMeter`** — standalone level meter with configurable color stops, orientation, and scale
|
|
15
|
+
- **`PlaylistErrorBoundary`** — catches render errors without depending on `ThemeProvider`
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install @waveform-playlist/ui-components
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Peer dependencies (install alongside):
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install react react-dom styled-components
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
`@dnd-kit/react` is an optional peer — only needed if you use the drag/trim-enabled clip components.
|
|
30
|
+
|
|
31
|
+
## Usage
|
|
32
|
+
|
|
33
|
+
Most components expect the context providers from `@waveform-playlist/browser`, but standalone pieces like `SegmentedVUMeter` work with just props:
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
import { SegmentedVUMeter } from '@waveform-playlist/ui-components';
|
|
37
|
+
|
|
38
|
+
function TrackMeter({ levels }: { levels: number[] }) {
|
|
39
|
+
return (
|
|
40
|
+
<SegmentedVUMeter
|
|
41
|
+
levels={levels}
|
|
42
|
+
channelLabels={['L', 'R']}
|
|
43
|
+
orientation="vertical"
|
|
44
|
+
showScale
|
|
45
|
+
/>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Theming
|
|
51
|
+
|
|
52
|
+
Wrap your tree in styled-components' `ThemeProvider` with a `WaveformPlaylistTheme` object — `defaultTheme` and `darkTheme` are exported as starting points and can be partially overridden:
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
import { ThemeProvider } from 'styled-components';
|
|
56
|
+
import { defaultTheme } from '@waveform-playlist/ui-components';
|
|
57
|
+
|
|
58
|
+
<ThemeProvider theme={{ ...defaultTheme, waveOutlineColor: '#ff6600' }}>
|
|
59
|
+
{/* playlist components */}
|
|
60
|
+
</ThemeProvider>;
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
`@waveform-playlist/browser`'s `WaveformPlaylistProvider` sets this up for you via its own `theme` prop — you only need `ThemeProvider` directly when using `ui-components` outside that provider.
|
|
64
|
+
|
|
65
|
+
## Examples & Documentation
|
|
66
|
+
|
|
67
|
+
Full guides, API reference, and live examples: [naomiaro.github.io/waveform-playlist](https://naomiaro.github.io/waveform-playlist/)
|
|
68
|
+
|
|
69
|
+
## License
|
|
70
|
+
|
|
71
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@waveform-playlist/ui-components",
|
|
3
|
-
"version": "13.1.
|
|
3
|
+
"version": "13.1.3",
|
|
4
4
|
"description": "React UI components for waveform-playlist",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -72,9 +72,8 @@
|
|
|
72
72
|
"@phosphor-icons/react": "^2.1.10",
|
|
73
73
|
"react-async-hook": "^4.0.0",
|
|
74
74
|
"waveform-data": "^4.5.2",
|
|
75
|
-
"@waveform-playlist/core": "12.
|
|
76
|
-
"@waveform-playlist/playout": "12.5.
|
|
77
|
-
"@waveform-playlist/loaders": "12.0.0"
|
|
75
|
+
"@waveform-playlist/core": "12.6.0",
|
|
76
|
+
"@waveform-playlist/playout": "12.5.2"
|
|
78
77
|
},
|
|
79
78
|
"scripts": {
|
|
80
79
|
"build": "tsup",
|