@waveform-playlist/ui-components 9.1.2 → 9.2.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 CHANGED
@@ -564,8 +564,13 @@ interface SpectrogramLabelsProps {
564
564
  declare const SpectrogramLabels: react__default.FC<SpectrogramLabelsProps>;
565
565
 
566
566
  interface SmartScaleProps {
567
- readonly renderTimestamp?: (timeMs: number, pixelPosition: number) => ReactNode;
567
+ readonly renderTick?: (label: string, pixelPosition: number) => ReactNode;
568
568
  }
569
+ declare function getScaleInfo(samplesPerPixel: number): {
570
+ marker: number;
571
+ bigStep: number;
572
+ smallStep: number;
573
+ };
569
574
  declare const SmartScale: FunctionComponent<SmartScaleProps>;
570
575
 
571
576
  /**
@@ -609,13 +614,17 @@ interface TimeInputProps {
609
614
  */
610
615
  declare const TimeInput: react__default.FC<TimeInputProps>;
611
616
 
617
+ interface PrecomputedTickData {
618
+ widthX: number;
619
+ canvasInfo: Map<number, number>;
620
+ timeMarkersWithPositions: Array<{
621
+ pix: number;
622
+ element: react__default.ReactNode;
623
+ }>;
624
+ }
612
625
  interface TimeScaleProps {
613
626
  readonly theme?: DefaultTheme;
614
- readonly duration: number;
615
- readonly marker: number;
616
- readonly bigStep: number;
617
- readonly secondStep: number;
618
- readonly renderTimestamp?: (timeMs: number, pixelPosition: number) => react__default.ReactNode;
627
+ readonly tickData: PrecomputedTickData;
619
628
  }
620
629
  interface TimeScalePropsWithTheme extends TimeScaleProps {
621
630
  readonly theme: DefaultTheme;
@@ -692,6 +701,23 @@ interface TrackMenuProps {
692
701
  }
693
702
  declare const TrackMenu: react__default.FC<TrackMenuProps>;
694
703
 
704
+ type SnapTo = 'bar' | 'beat' | 'off';
705
+ interface BeatsAndBarsContextValue {
706
+ bpm: number;
707
+ timeSignature: [number, number];
708
+ snapTo: SnapTo;
709
+ ticksPerBeat: number;
710
+ ticksPerBar: number;
711
+ }
712
+ interface BeatsAndBarsProviderProps {
713
+ bpm: number;
714
+ timeSignature: [number, number];
715
+ snapTo: SnapTo;
716
+ children: react__default.ReactNode;
717
+ }
718
+ declare function BeatsAndBarsProvider({ bpm, timeSignature, snapTo, children, }: BeatsAndBarsProviderProps): react_jsx_runtime.JSX.Element;
719
+ declare function useBeatsAndBars(): BeatsAndBarsContextValue | null;
720
+
695
721
  type Props$1 = {
696
722
  children: ReactNode;
697
723
  };
@@ -843,6 +869,12 @@ declare const BaseControlButton: styled_components_dist_types.IStyledComponentBa
843
869
  * Styling is controlled via the theme, making it easy to adapt to different environments.
844
870
  */
845
871
  declare const BaseInput: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
872
+ /**
873
+ * BaseInputSmall - A smaller variant for compact layouts
874
+ */
875
+ declare const BaseInputSmall: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>, "ref"> & {
876
+ 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;
877
+ }, never>> & string;
846
878
 
847
879
  /**
848
880
  * BaseLabel - A styled label component that uses theme values
@@ -863,6 +895,12 @@ declare const ScreenReaderOnly: styled_components_dist_types.IStyledComponentBas
863
895
  * This provides consistent styling across all select elements in the waveform playlist.
864
896
  */
865
897
  declare const BaseSelect: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>> & string;
898
+ /**
899
+ * BaseSelectSmall - A smaller variant for compact layouts
900
+ */
901
+ declare const BaseSelectSmall: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<styled_components.FastOmit<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>, "ref"> & {
902
+ ref?: ((instance: HTMLSelectElement | 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<HTMLSelectElement> | null | undefined;
903
+ }, never>> & string;
866
904
 
867
905
  /**
868
906
  * BaseSlider - Themed range input for volume controls, etc.
@@ -874,4 +912,4 @@ declare const BaseSlider: styled_components_dist_types.IStyledComponentBase<"web
874
912
  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;
875
913
  }>, never>, never>> & string;
876
914
 
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 };
915
+ export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseInputSmall, BaseLabel, BaseSelect, BaseSelectSmall, BaseSlider, type BeatsAndBarsContextValue, BeatsAndBarsProvider, type BeatsAndBarsProviderProps, 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 PrecomputedTickData, type RenderPlayheadFunction, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, type SnapTo, 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, getScaleInfo, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useBeatsAndBars, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };
package/dist/index.d.ts CHANGED
@@ -564,8 +564,13 @@ interface SpectrogramLabelsProps {
564
564
  declare const SpectrogramLabels: react__default.FC<SpectrogramLabelsProps>;
565
565
 
566
566
  interface SmartScaleProps {
567
- readonly renderTimestamp?: (timeMs: number, pixelPosition: number) => ReactNode;
567
+ readonly renderTick?: (label: string, pixelPosition: number) => ReactNode;
568
568
  }
569
+ declare function getScaleInfo(samplesPerPixel: number): {
570
+ marker: number;
571
+ bigStep: number;
572
+ smallStep: number;
573
+ };
569
574
  declare const SmartScale: FunctionComponent<SmartScaleProps>;
570
575
 
571
576
  /**
@@ -609,13 +614,17 @@ interface TimeInputProps {
609
614
  */
610
615
  declare const TimeInput: react__default.FC<TimeInputProps>;
611
616
 
617
+ interface PrecomputedTickData {
618
+ widthX: number;
619
+ canvasInfo: Map<number, number>;
620
+ timeMarkersWithPositions: Array<{
621
+ pix: number;
622
+ element: react__default.ReactNode;
623
+ }>;
624
+ }
612
625
  interface TimeScaleProps {
613
626
  readonly theme?: DefaultTheme;
614
- readonly duration: number;
615
- readonly marker: number;
616
- readonly bigStep: number;
617
- readonly secondStep: number;
618
- readonly renderTimestamp?: (timeMs: number, pixelPosition: number) => react__default.ReactNode;
627
+ readonly tickData: PrecomputedTickData;
619
628
  }
620
629
  interface TimeScalePropsWithTheme extends TimeScaleProps {
621
630
  readonly theme: DefaultTheme;
@@ -692,6 +701,23 @@ interface TrackMenuProps {
692
701
  }
693
702
  declare const TrackMenu: react__default.FC<TrackMenuProps>;
694
703
 
704
+ type SnapTo = 'bar' | 'beat' | 'off';
705
+ interface BeatsAndBarsContextValue {
706
+ bpm: number;
707
+ timeSignature: [number, number];
708
+ snapTo: SnapTo;
709
+ ticksPerBeat: number;
710
+ ticksPerBar: number;
711
+ }
712
+ interface BeatsAndBarsProviderProps {
713
+ bpm: number;
714
+ timeSignature: [number, number];
715
+ snapTo: SnapTo;
716
+ children: react__default.ReactNode;
717
+ }
718
+ declare function BeatsAndBarsProvider({ bpm, timeSignature, snapTo, children, }: BeatsAndBarsProviderProps): react_jsx_runtime.JSX.Element;
719
+ declare function useBeatsAndBars(): BeatsAndBarsContextValue | null;
720
+
695
721
  type Props$1 = {
696
722
  children: ReactNode;
697
723
  };
@@ -843,6 +869,12 @@ declare const BaseControlButton: styled_components_dist_types.IStyledComponentBa
843
869
  * Styling is controlled via the theme, making it easy to adapt to different environments.
844
870
  */
845
871
  declare const BaseInput: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
872
+ /**
873
+ * BaseInputSmall - A smaller variant for compact layouts
874
+ */
875
+ declare const BaseInputSmall: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>, "ref"> & {
876
+ 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;
877
+ }, never>> & string;
846
878
 
847
879
  /**
848
880
  * BaseLabel - A styled label component that uses theme values
@@ -863,6 +895,12 @@ declare const ScreenReaderOnly: styled_components_dist_types.IStyledComponentBas
863
895
  * This provides consistent styling across all select elements in the waveform playlist.
864
896
  */
865
897
  declare const BaseSelect: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>> & string;
898
+ /**
899
+ * BaseSelectSmall - A smaller variant for compact layouts
900
+ */
901
+ declare const BaseSelectSmall: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<styled_components.FastOmit<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>, "ref"> & {
902
+ ref?: ((instance: HTMLSelectElement | 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<HTMLSelectElement> | null | undefined;
903
+ }, never>> & string;
866
904
 
867
905
  /**
868
906
  * BaseSlider - Themed range input for volume controls, etc.
@@ -874,4 +912,4 @@ declare const BaseSlider: styled_components_dist_types.IStyledComponentBase<"web
874
912
  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;
875
913
  }>, never>, never>> & string;
876
914
 
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 };
915
+ export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseInputSmall, BaseLabel, BaseSelect, BaseSelectSmall, BaseSlider, type BeatsAndBarsContextValue, BeatsAndBarsProvider, type BeatsAndBarsProviderProps, 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 PrecomputedTickData, type RenderPlayheadFunction, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, type SnapTo, 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, getScaleInfo, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useBeatsAndBars, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };