@waveform-playlist/ui-components 9.0.3 → 9.1.0
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/index.d.mts +35 -11
- package/dist/index.d.ts +35 -11
- package/dist/index.js +530 -329
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +473 -272
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -4
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import react__default, { FunctionComponent, ReactNode, Dispatch, SetStateAction } from 'react';
|
|
3
|
-
import { Peaks, Bits, Fade, FadeType, SpectrogramData, RenderMode } from '@waveform-playlist/core';
|
|
3
|
+
import { Peaks, Bits, Fade, FadeType, MidiNoteData, SpectrogramData, RenderMode } from '@waveform-playlist/core';
|
|
4
4
|
import * as styled_components_dist_utils_hoist from 'styled-components/dist/utils/hoist';
|
|
5
5
|
import * as styled_components from 'styled-components';
|
|
6
6
|
import { DefaultTheme } from 'styled-components';
|
|
@@ -114,6 +114,10 @@ interface WaveformPlaylistTheme {
|
|
|
114
114
|
annotationResizeHandleColor: string;
|
|
115
115
|
annotationResizeHandleActiveColor: string;
|
|
116
116
|
annotationTextItemHoverBackground: string;
|
|
117
|
+
playlistBackgroundColor?: string;
|
|
118
|
+
pianoRollNoteColor: string;
|
|
119
|
+
pianoRollSelectedNoteColor: string;
|
|
120
|
+
pianoRollBackgroundColor: string;
|
|
117
121
|
borderRadius: string;
|
|
118
122
|
fontFamily: string;
|
|
119
123
|
fontSize: string;
|
|
@@ -307,6 +311,23 @@ interface MasterVolumeControlProps {
|
|
|
307
311
|
*/
|
|
308
312
|
declare const MasterVolumeControl: react__default.FC<MasterVolumeControlProps>;
|
|
309
313
|
|
|
314
|
+
interface PianoRollChannelProps {
|
|
315
|
+
index: number;
|
|
316
|
+
midiNotes: MidiNoteData[];
|
|
317
|
+
length: number;
|
|
318
|
+
waveHeight: number;
|
|
319
|
+
devicePixelRatio: number;
|
|
320
|
+
samplesPerPixel: number;
|
|
321
|
+
sampleRate: number;
|
|
322
|
+
clipOffsetSeconds: number;
|
|
323
|
+
noteColor?: string;
|
|
324
|
+
selectedNoteColor?: string;
|
|
325
|
+
isSelected?: boolean;
|
|
326
|
+
transparentBackground?: boolean;
|
|
327
|
+
backgroundColor?: string;
|
|
328
|
+
}
|
|
329
|
+
declare const PianoRollChannel: FunctionComponent<PianoRollChannelProps>;
|
|
330
|
+
|
|
310
331
|
/**
|
|
311
332
|
* Props passed to the default playhead component or custom render function.
|
|
312
333
|
*/
|
|
@@ -327,8 +348,8 @@ interface PlayheadProps {
|
|
|
327
348
|
samplesPerPixel: number;
|
|
328
349
|
/** Sample rate - for converting time to pixels */
|
|
329
350
|
sampleRate: number;
|
|
330
|
-
/** Controls offset in pixels */
|
|
331
|
-
controlsOffset
|
|
351
|
+
/** Controls offset in pixels (deprecated, always 0 — controls are now outside scroll area) */
|
|
352
|
+
controlsOffset?: number;
|
|
332
353
|
/** Function to get current audio context time - required for smooth animation */
|
|
333
354
|
getAudioContextTime?: () => number;
|
|
334
355
|
/** Returns current playback time (auto-wraps at loop boundaries). Preferred over manual elapsed calculation. */
|
|
@@ -360,7 +381,6 @@ interface PlaylistProps {
|
|
|
360
381
|
readonly timescale?: JSX.Element;
|
|
361
382
|
readonly timescaleWidth?: number;
|
|
362
383
|
readonly tracksWidth?: number;
|
|
363
|
-
readonly scrollContainerWidth?: number;
|
|
364
384
|
readonly controlsWidth?: number;
|
|
365
385
|
readonly onTracksClick?: (e: react__default.MouseEvent<HTMLDivElement>) => void;
|
|
366
386
|
readonly onTracksMouseDown?: (e: react__default.MouseEvent<HTMLDivElement>) => void;
|
|
@@ -371,6 +391,10 @@ interface PlaylistProps {
|
|
|
371
391
|
readonly isSelecting?: boolean;
|
|
372
392
|
/** Data attribute indicating playlist loading state ('loading' | 'ready') */
|
|
373
393
|
readonly 'data-playlist-state'?: 'loading' | 'ready';
|
|
394
|
+
/** Track control slots rendered in the controls column, one per track */
|
|
395
|
+
readonly trackControlsSlots?: react__default.ReactNode[];
|
|
396
|
+
/** Height of the timescale gap spacer in the controls column (matches timescale height) */
|
|
397
|
+
readonly timescaleGapHeight?: number;
|
|
374
398
|
}
|
|
375
399
|
declare const Playlist: FunctionComponent<PlaylistProps>;
|
|
376
400
|
declare const StyledPlaylist: react__default.ForwardRefExoticComponent<styled_components.ExecutionProps & react__default.RefAttributes<react__default.FunctionComponent<PlaylistProps>>> & styled_components_dist_utils_hoist.NonReactStatics<react__default.FunctionComponent<PlaylistProps>>;
|
|
@@ -426,8 +450,6 @@ interface TimescaleLoopRegionProps {
|
|
|
426
450
|
minPosition?: number;
|
|
427
451
|
/** Maximum position in pixels */
|
|
428
452
|
maxPosition?: number;
|
|
429
|
-
/** Offset for controls area (left margin) */
|
|
430
|
-
controlsOffset?: number;
|
|
431
453
|
}
|
|
432
454
|
/**
|
|
433
455
|
* Complete timescale loop region component with:
|
|
@@ -510,6 +532,12 @@ interface SmartChannelProps {
|
|
|
510
532
|
spectrogramClipId?: string;
|
|
511
533
|
/** Callback when canvases are registered with the worker */
|
|
512
534
|
spectrogramOnCanvasesReady?: (canvasIds: string[], canvasWidths: number[]) => void;
|
|
535
|
+
/** MIDI note data for piano-roll rendering */
|
|
536
|
+
midiNotes?: MidiNoteData[];
|
|
537
|
+
/** Sample rate for MIDI note time → pixel conversion */
|
|
538
|
+
sampleRate?: number;
|
|
539
|
+
/** Clip offset in seconds for MIDI note positioning */
|
|
540
|
+
clipOffsetSeconds?: number;
|
|
513
541
|
}
|
|
514
542
|
declare const SmartChannel: FunctionComponent<SmartChannelProps>;
|
|
515
543
|
|
|
@@ -595,10 +623,6 @@ interface TimeScalePropsWithTheme extends TimeScaleProps {
|
|
|
595
623
|
declare const TimeScale: FunctionComponent<TimeScalePropsWithTheme>;
|
|
596
624
|
declare const StyledTimeScale: FunctionComponent<TimeScaleProps>;
|
|
597
625
|
|
|
598
|
-
interface ControlsWrapperProps {
|
|
599
|
-
readonly $controlWidth: number;
|
|
600
|
-
readonly $isSelected?: boolean;
|
|
601
|
-
}
|
|
602
626
|
interface TrackProps {
|
|
603
627
|
className?: string;
|
|
604
628
|
children?: ReactNode;
|
|
@@ -850,4 +874,4 @@ declare const BaseSlider: styled_components_dist_types.IStyledComponentBase<"web
|
|
|
850
874
|
ref?: ((instance: HTMLInputElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLInputElement> | null | undefined;
|
|
851
875
|
}>, never>, never>> & string;
|
|
852
876
|
|
|
853
|
-
export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseLabel, BaseSelect, BaseSlider, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, Controls$1 as Controls,
|
|
877
|
+
export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseLabel, BaseSelect, BaseSlider, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, Controls$1 as Controls, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type RenderPlayheadFunction, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, type SpectrogramWorkerCanvasApi, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import react__default, { FunctionComponent, ReactNode, Dispatch, SetStateAction } from 'react';
|
|
3
|
-
import { Peaks, Bits, Fade, FadeType, SpectrogramData, RenderMode } from '@waveform-playlist/core';
|
|
3
|
+
import { Peaks, Bits, Fade, FadeType, MidiNoteData, SpectrogramData, RenderMode } from '@waveform-playlist/core';
|
|
4
4
|
import * as styled_components_dist_utils_hoist from 'styled-components/dist/utils/hoist';
|
|
5
5
|
import * as styled_components from 'styled-components';
|
|
6
6
|
import { DefaultTheme } from 'styled-components';
|
|
@@ -114,6 +114,10 @@ interface WaveformPlaylistTheme {
|
|
|
114
114
|
annotationResizeHandleColor: string;
|
|
115
115
|
annotationResizeHandleActiveColor: string;
|
|
116
116
|
annotationTextItemHoverBackground: string;
|
|
117
|
+
playlistBackgroundColor?: string;
|
|
118
|
+
pianoRollNoteColor: string;
|
|
119
|
+
pianoRollSelectedNoteColor: string;
|
|
120
|
+
pianoRollBackgroundColor: string;
|
|
117
121
|
borderRadius: string;
|
|
118
122
|
fontFamily: string;
|
|
119
123
|
fontSize: string;
|
|
@@ -307,6 +311,23 @@ interface MasterVolumeControlProps {
|
|
|
307
311
|
*/
|
|
308
312
|
declare const MasterVolumeControl: react__default.FC<MasterVolumeControlProps>;
|
|
309
313
|
|
|
314
|
+
interface PianoRollChannelProps {
|
|
315
|
+
index: number;
|
|
316
|
+
midiNotes: MidiNoteData[];
|
|
317
|
+
length: number;
|
|
318
|
+
waveHeight: number;
|
|
319
|
+
devicePixelRatio: number;
|
|
320
|
+
samplesPerPixel: number;
|
|
321
|
+
sampleRate: number;
|
|
322
|
+
clipOffsetSeconds: number;
|
|
323
|
+
noteColor?: string;
|
|
324
|
+
selectedNoteColor?: string;
|
|
325
|
+
isSelected?: boolean;
|
|
326
|
+
transparentBackground?: boolean;
|
|
327
|
+
backgroundColor?: string;
|
|
328
|
+
}
|
|
329
|
+
declare const PianoRollChannel: FunctionComponent<PianoRollChannelProps>;
|
|
330
|
+
|
|
310
331
|
/**
|
|
311
332
|
* Props passed to the default playhead component or custom render function.
|
|
312
333
|
*/
|
|
@@ -327,8 +348,8 @@ interface PlayheadProps {
|
|
|
327
348
|
samplesPerPixel: number;
|
|
328
349
|
/** Sample rate - for converting time to pixels */
|
|
329
350
|
sampleRate: number;
|
|
330
|
-
/** Controls offset in pixels */
|
|
331
|
-
controlsOffset
|
|
351
|
+
/** Controls offset in pixels (deprecated, always 0 — controls are now outside scroll area) */
|
|
352
|
+
controlsOffset?: number;
|
|
332
353
|
/** Function to get current audio context time - required for smooth animation */
|
|
333
354
|
getAudioContextTime?: () => number;
|
|
334
355
|
/** Returns current playback time (auto-wraps at loop boundaries). Preferred over manual elapsed calculation. */
|
|
@@ -360,7 +381,6 @@ interface PlaylistProps {
|
|
|
360
381
|
readonly timescale?: JSX.Element;
|
|
361
382
|
readonly timescaleWidth?: number;
|
|
362
383
|
readonly tracksWidth?: number;
|
|
363
|
-
readonly scrollContainerWidth?: number;
|
|
364
384
|
readonly controlsWidth?: number;
|
|
365
385
|
readonly onTracksClick?: (e: react__default.MouseEvent<HTMLDivElement>) => void;
|
|
366
386
|
readonly onTracksMouseDown?: (e: react__default.MouseEvent<HTMLDivElement>) => void;
|
|
@@ -371,6 +391,10 @@ interface PlaylistProps {
|
|
|
371
391
|
readonly isSelecting?: boolean;
|
|
372
392
|
/** Data attribute indicating playlist loading state ('loading' | 'ready') */
|
|
373
393
|
readonly 'data-playlist-state'?: 'loading' | 'ready';
|
|
394
|
+
/** Track control slots rendered in the controls column, one per track */
|
|
395
|
+
readonly trackControlsSlots?: react__default.ReactNode[];
|
|
396
|
+
/** Height of the timescale gap spacer in the controls column (matches timescale height) */
|
|
397
|
+
readonly timescaleGapHeight?: number;
|
|
374
398
|
}
|
|
375
399
|
declare const Playlist: FunctionComponent<PlaylistProps>;
|
|
376
400
|
declare const StyledPlaylist: react__default.ForwardRefExoticComponent<styled_components.ExecutionProps & react__default.RefAttributes<react__default.FunctionComponent<PlaylistProps>>> & styled_components_dist_utils_hoist.NonReactStatics<react__default.FunctionComponent<PlaylistProps>>;
|
|
@@ -426,8 +450,6 @@ interface TimescaleLoopRegionProps {
|
|
|
426
450
|
minPosition?: number;
|
|
427
451
|
/** Maximum position in pixels */
|
|
428
452
|
maxPosition?: number;
|
|
429
|
-
/** Offset for controls area (left margin) */
|
|
430
|
-
controlsOffset?: number;
|
|
431
453
|
}
|
|
432
454
|
/**
|
|
433
455
|
* Complete timescale loop region component with:
|
|
@@ -510,6 +532,12 @@ interface SmartChannelProps {
|
|
|
510
532
|
spectrogramClipId?: string;
|
|
511
533
|
/** Callback when canvases are registered with the worker */
|
|
512
534
|
spectrogramOnCanvasesReady?: (canvasIds: string[], canvasWidths: number[]) => void;
|
|
535
|
+
/** MIDI note data for piano-roll rendering */
|
|
536
|
+
midiNotes?: MidiNoteData[];
|
|
537
|
+
/** Sample rate for MIDI note time → pixel conversion */
|
|
538
|
+
sampleRate?: number;
|
|
539
|
+
/** Clip offset in seconds for MIDI note positioning */
|
|
540
|
+
clipOffsetSeconds?: number;
|
|
513
541
|
}
|
|
514
542
|
declare const SmartChannel: FunctionComponent<SmartChannelProps>;
|
|
515
543
|
|
|
@@ -595,10 +623,6 @@ interface TimeScalePropsWithTheme extends TimeScaleProps {
|
|
|
595
623
|
declare const TimeScale: FunctionComponent<TimeScalePropsWithTheme>;
|
|
596
624
|
declare const StyledTimeScale: FunctionComponent<TimeScaleProps>;
|
|
597
625
|
|
|
598
|
-
interface ControlsWrapperProps {
|
|
599
|
-
readonly $controlWidth: number;
|
|
600
|
-
readonly $isSelected?: boolean;
|
|
601
|
-
}
|
|
602
626
|
interface TrackProps {
|
|
603
627
|
className?: string;
|
|
604
628
|
children?: ReactNode;
|
|
@@ -850,4 +874,4 @@ declare const BaseSlider: styled_components_dist_types.IStyledComponentBase<"web
|
|
|
850
874
|
ref?: ((instance: HTMLInputElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLInputElement> | null | undefined;
|
|
851
875
|
}>, never>, never>> & string;
|
|
852
876
|
|
|
853
|
-
export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseLabel, BaseSelect, BaseSlider, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, Controls$1 as Controls,
|
|
877
|
+
export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseLabel, BaseSelect, BaseSlider, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, Controls$1 as Controls, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type RenderPlayheadFunction, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, type SpectrogramWorkerCanvasApi, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };
|