react-modern-audio-player 2.2.0 → 2.3.0

package/dist/types/api/useAudioPlayer.d.ts

@@ -6,6 +6,7 @@ export interface AudioPlayerControls {
     duration: number;
     repeatType: RepeatType;
     muted: boolean;
+    playbackRate: number;
     currentTrack: AudioData | null;
     currentIndex: number;
     playList: ReadonlyArray<AudioData>;
@@ -18,6 +19,7 @@ export interface AudioPlayerControls {
     setVolume: (volume: number) => void;
     toggleMute: () => void;
     setTrack: (index: number) => void;
+    setPlaybackRate: (rate: number) => void;
 }
 /**
  * Convenience facade that composes all domain sub-hooks into a single flat

package/dist/types/api/useAudioPlayerPlayback.d.ts

@@ -2,8 +2,10 @@ import { RepeatType } from '../components/AudioPlayer/Context/StateContext';
 export interface AudioPlayerPlaybackControls {
     isPlaying: boolean;
     repeatType: RepeatType;
+    playbackRate: number;
     play: () => void;
     pause: () => void;
     togglePlay: () => void;
+    setPlaybackRate: (rate: number) => void;
 }
 export declare const useAudioPlayerPlayback: () => AudioPlayerPlaybackControls;

package/dist/types/components/AudioPlayer/Context/PlaybackContext.d.ts

@@ -6,5 +6,6 @@ export interface PlaybackContext {
     repeatType: RepeatType;
     isLoadedMetaData: boolean | undefined;
     audioResetKey: number;
+    playbackRate: number;
 }
 export declare const playbackContext: import('react').Context<PlaybackContext | null>;

package/dist/types/components/AudioPlayer/Context/StateContext/audio.d.ts

@@ -8,6 +8,7 @@ export type AudioCustomProps = {
     volume?: number;
     currentTime?: number;
     duration?: number;
+    playbackRate?: number;
 };
 export declare const DEFAULT_AUDIO_STATE: {
     readonly isPlaying: false;
@@ -16,6 +17,7 @@ export declare const DEFAULT_AUDIO_STATE: {
     readonly repeatType: RepeatType;
     readonly currentTime: 0;
     readonly duration: 0;
+    readonly playbackRate: 1;
 };
 export type AudioData = {
     src: string;

package/dist/types/components/AudioPlayer/Context/StateContext/element.d.ts

@@ -15,6 +15,7 @@ export type ActiveUI = Partial<{
     trackInfo: boolean;
     artwork: boolean;
     progress: ProgressUI;
+    playbackRate: boolean;
 }>;
 export type CustomIcons = Partial<{
     play: ReactNode;

package/dist/types/components/AudioPlayer/Context/StateContext/index.d.ts

@@ -1,6 +1,6 @@
 import { AudioState } from './audio';
 import { ActiveUI, CoverImgsCss, ElementRefs, CustomIcons, PlayList } from './element';
-import { PlayListPlacement, InterfacePlacement, PlayerPlacement, VolumeSliderPlacement } from './placement';
+import { PlayListPlacement, InterfacePlacement, PlayerPlacement, SpeedSelectorPlacement, VolumeSliderPlacement } from './placement';
 export interface AudioPlayerStateContext {
     playList: PlayList;
     curPlayId: number;
@@ -11,6 +11,7 @@ export interface AudioPlayerStateContext {
     playerPlacement?: PlayerPlacement;
     interfacePlacement?: InterfacePlacement;
     volumeSliderPlacement?: VolumeSliderPlacement;
+    speedSelectorPlacement?: SpeedSelectorPlacement;
     elementRefs?: ElementRefs;
     customIcons?: CustomIcons;
     coverImgsCss?: CoverImgsCss;

package/dist/types/components/AudioPlayer/Context/StateContext/placement.d.ts

@@ -2,24 +2,26 @@ import { DropdownContentPlacement } from '../../../Dropdown';
 import { NumbersToUnionNum } from '../../../../utils/generateUnionNumType';
 import { ActiveUI } from './element';
 export type VolumeSliderPlacement = DropdownContentPlacement;
+export type SpeedSelectorPlacement = DropdownContentPlacement;
 export type PlayListPlacement = "bottom" | "top";
 export type PlayerPlacement = "bottom" | "top" | "bottom-left" | "bottom-right" | "top-left" | "top-right" | "static";
-export declare const defaultInterfacePlacementMaxLength = 10;
+export declare const DEFAULT_INTERFACE_GRID_BOUND = 11;
 export type InterfacePlacementKey = Exclude<keyof ActiveUI, "all" | "prevNnext" | "trackTime" | "volumeSlider"> | "trackTimeCurrent" | "trackTimeDuration";
-export type InterfaceGridTemplateArea<TMaxLength extends number = typeof defaultInterfacePlacementMaxLength> = Partial<Record<InterfacePlacementKey, `row${NumbersToUnionNum<TMaxLength>}-${NumbersToUnionNum<TMaxLength>}`>>;
+export type InterfaceGridTemplateArea<TMaxLength extends number = typeof DEFAULT_INTERFACE_GRID_BOUND> = Partial<Record<InterfacePlacementKey, `row${NumbersToUnionNum<TMaxLength>}-${NumbersToUnionNum<TMaxLength>}`>>;
 export type InterfaceGridCustomComponentsArea<TMaxLength extends number> = Partial<Record<string, `row${NumbersToUnionNum<TMaxLength>}-${NumbersToUnionNum<TMaxLength>}`>>;
 export type InterfaceGridItemArea = Partial<Record<InterfacePlacementKey, string>>;
-export type InterfacePlacement<TMaxLength extends number = typeof defaultInterfacePlacementMaxLength> = {
+export type InterfacePlacement<TMaxLength extends number = typeof DEFAULT_INTERFACE_GRID_BOUND> = {
     templateArea?: InterfaceGridTemplateArea<TMaxLength>;
     customComponentsArea?: InterfaceGridCustomComponentsArea<TMaxLength>;
     itemCustomArea?: InterfaceGridItemArea;
 };
 export declare const defaultInterfacePlacement: {
-    templateArea: Required<InterfaceGridTemplateArea<typeof defaultInterfacePlacementMaxLength>>;
+    templateArea: Required<InterfaceGridTemplateArea<typeof DEFAULT_INTERFACE_GRID_BOUND>>;
 };
-export interface Placements<TInterfacePlacementLength extends number = typeof defaultInterfacePlacementMaxLength> {
+export interface Placements<TInterfacePlacementLength extends number = typeof DEFAULT_INTERFACE_GRID_BOUND> {
     playListPlacement: PlayListPlacement;
     interfacePlacement: InterfacePlacement<TInterfacePlacementLength>;
     volumeSliderPlacement: VolumeSliderPlacement | undefined;
+    speedSelectorPlacement: SpeedSelectorPlacement | undefined;
     playerPlacement: PlayerPlacement | undefined;
 }

package/dist/types/components/AudioPlayer/Context/UIContext.d.ts

@@ -1,4 +1,4 @@
-import { ActiveUI, InterfacePlacement, PlayListPlacement, PlayerPlacement, VolumeSliderPlacement } from './StateContext';
+import { ActiveUI, InterfacePlacement, PlayListPlacement, PlayerPlacement, SpeedSelectorPlacement, VolumeSliderPlacement } from './StateContext';
 export type ColorScheme = "light" | "dark";
 export interface UIContext {
     activeUI: ActiveUI;
@@ -6,6 +6,7 @@ export interface UIContext {
     playerPlacement?: PlayerPlacement;
     interfacePlacement?: InterfacePlacement;
     volumeSliderPlacement?: VolumeSliderPlacement;
+    speedSelectorPlacement?: SpeedSelectorPlacement;
     colorScheme?: ColorScheme;
     playListExpanded?: boolean;
 }

package/dist/types/components/AudioPlayer/Context/dispatchContext.d.ts

@@ -1,6 +1,6 @@
 import { Dispatch } from 'react';
-import { RepeatType, PlayList, PlayListPlacement, PlayerPlacement, ActiveUI, ElementRefs, CustomIcons, InterfacePlacement, CoverImgsCss, VolumeSliderPlacement, defaultInterfacePlacementMaxLength, AudioState } from './StateContext';
-export type AudioContextAction<TInterfacePlacementLength extends number = typeof defaultInterfacePlacementMaxLength> = {
+import { RepeatType, PlayList, PlayListPlacement, PlayerPlacement, ActiveUI, ElementRefs, CustomIcons, InterfacePlacement, CoverImgsCss, VolumeSliderPlacement, DEFAULT_INTERFACE_GRID_BOUND, AudioState } from './StateContext';
+export type AudioContextAction<TInterfacePlacementLength extends number = typeof DEFAULT_INTERFACE_GRID_BOUND> = {
     type: "NEXT_AUDIO";
 } | {
     type: "PREV_AUDIO";
@@ -34,6 +34,9 @@ export type AudioContextAction<TInterfacePlacementLength extends number = typeof
 } | {
     type: "SET_MUTED";
     muted: boolean;
+} | {
+    type: "SET_PLAYBACK_RATE";
+    playbackRate: number;
 } | {
     type: "SET_ACTIVE_UI";
     activeUI: ActiveUI;

package/dist/types/components/AudioPlayer/Context/providerProps.d.ts

@@ -1,4 +1,4 @@
-import { ActiveUI, CoverImgsCss, CustomIcons, InitialStates, InterfacePlacement, PlayList, PlayListPlacement, PlayerPlacement, VolumeSliderPlacement } from './StateContext';
+import { ActiveUI, CoverImgsCss, CustomIcons, InitialStates, InterfacePlacement, PlayList, PlayListPlacement, PlayerPlacement, SpeedSelectorPlacement, VolumeSliderPlacement } from './StateContext';
 export interface AudioPlayerStateProviderProps<TInterfacePlacementLength extends number> {
     playList: PlayList;
     audioInitialState?: InitialStates;
@@ -10,5 +10,6 @@ export interface AudioPlayerStateProviderProps<TInterfacePlacementLength extends
         playList?: PlayListPlacement;
         interface?: InterfacePlacement<TInterfacePlacementLength>;
         volumeSlider?: VolumeSliderPlacement;
+        speedSelector?: SpeedSelectorPlacement;
     };
 }

package/dist/types/components/AudioPlayer/Interface/Controller/SpeedSelector/SpeedSelector.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { GridItemLayoutProps } from '../../../../Grid';
+import { SpeedSelectorPlacement } from '../../../Context/StateContext';
+export interface SpeedSelectorProps extends GridItemLayoutProps {
+    options?: number[];
+    formatRate?: (rate: number) => string;
+    triggerType?: "click" | "hover";
+    placement?: SpeedSelectorPlacement;
+}
+export declare const SpeedSelector: FC<SpeedSelectorProps>;

package/dist/types/components/AudioPlayer/Interface/Controller/SpeedSelector/index.d.ts

@@ -0,0 +1,2 @@
+export { SpeedSelector } from './SpeedSelector';
+export type { SpeedSelectorProps } from './SpeedSelector';

package/dist/types/components/AudioPlayer/Interface/Controller/Tooltip/Volume/index.d.ts

@@ -1,4 +1,8 @@
 import { FC } from 'react';
 import { GridItemLayoutProps } from '../../../../../Grid';
-export type VolumeProps = GridItemLayoutProps;
+import { VolumeSliderPlacement } from '../../../../Context/StateContext';
+export interface VolumeProps extends GridItemLayoutProps {
+    triggerType?: "click" | "hover";
+    placement?: VolumeSliderPlacement;
+}
 export declare const Volume: FC<VolumeProps>;

package/dist/types/components/AudioPlayer/Interface/hooks/index.d.ts

@@ -1,2 +1,4 @@
 export * from './useResolvedGridArea';
 export * from './useGridTemplate';
+export * from './useDropdownAutoPlacement';
+export * from './useResolvedDropdownProps';

package/dist/types/components/AudioPlayer/Interface/hooks/useDropdownAutoPlacement.d.ts

@@ -0,0 +1,5 @@
+import { DropdownContentPlacement } from '../../../Dropdown';
+export declare const useDropdownAutoPlacement: ({ triggerRef, initialState, }: {
+    triggerRef: React.RefObject<HTMLElement>;
+    initialState: DropdownContentPlacement;
+}) => DropdownContentPlacement;

package/dist/types/components/AudioPlayer/Interface/hooks/useResolvedDropdownProps.d.ts

@@ -0,0 +1,18 @@
+import { DropdownContentPlacement } from '../../../Dropdown';
+type TriggerType = "click" | "hover";
+interface UseResolvedDropdownPropsParams {
+    triggerType: TriggerType | undefined;
+    placement: DropdownContentPlacement | undefined;
+    contextPlacement: DropdownContentPlacement | undefined;
+    triggerRef: React.RefObject<HTMLElement>;
+    defaults: {
+        triggerType: TriggerType;
+        placement: DropdownContentPlacement;
+    };
+}
+export declare const useResolvedDropdownProps: ({ triggerType, placement, contextPlacement, triggerRef, defaults, }: UseResolvedDropdownPropsParams) => {
+    triggerType: TriggerType;
+    placement: DropdownContentPlacement;
+    contentRole: "dialog" | "tooltip";
+};
+export {};

package/dist/types/components/AudioPlayer/Player/index.d.ts

@@ -1,4 +1,4 @@
-import { AudioPlayerStateProviderProps, defaultInterfacePlacementMaxLength } from '../Context';
+import { AudioPlayerStateProviderProps, DEFAULT_INTERFACE_GRID_BOUND } from '../Context';
 export interface AudioPlayerProps<TInterfacePlacementLength extends number> extends AudioPlayerStateProviderProps<TInterfacePlacementLength> {
     children?: React.ReactNode;
     audioRef?: React.MutableRefObject<HTMLAudioElement>;
@@ -9,4 +9,4 @@ export interface AudioPlayerProps<TInterfacePlacementLength extends number> exte
      */
     colorScheme?: "light" | "dark";
 }
-export declare const AudioPlayer: <TInterfacePlacementLength extends number = typeof defaultInterfacePlacementMaxLength>({ audioRef, children, ...restProps }: AudioPlayerProps<TInterfacePlacementLength>) => import("react/jsx-runtime").JSX.Element;
+export declare const AudioPlayer: <TInterfacePlacementLength extends number = typeof DEFAULT_INTERFACE_GRID_BOUND>({ audioRef, children, ...restProps }: AudioPlayerProps<TInterfacePlacementLength>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/AudioPlayer/Provider/AudioPlayerStateProvider.d.ts

@@ -1,7 +1,7 @@
-import { defaultInterfacePlacementMaxLength, AudioPlayerStateProviderProps } from '../Context';
+import { DEFAULT_INTERFACE_GRID_BOUND, AudioPlayerStateProviderProps } from '../Context';
 import { PropsWithChildren } from 'react';
 interface AudioPlayerStateProviderOwnProps<T extends number = number> extends AudioPlayerStateProviderProps<T> {
     colorScheme?: "light" | "dark";
 }
-export declare const AudioPlayerStateProvider: <TInterfacePlacementLength extends number = typeof defaultInterfacePlacementMaxLength>({ children, colorScheme, ...initProps }: PropsWithChildren<AudioPlayerStateProviderOwnProps<TInterfacePlacementLength>>) => import("react/jsx-runtime").JSX.Element;
+export declare const AudioPlayerStateProvider: <TInterfacePlacementLength extends number = typeof DEFAULT_INTERFACE_GRID_BOUND>({ children, colorScheme, ...initProps }: PropsWithChildren<AudioPlayerStateProviderOwnProps<TInterfacePlacementLength>>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/AudioPlayer/index.d.ts

@@ -1,17 +1,18 @@
 import { AudioPlayerContainerProps } from './Container';
-import { defaultInterfacePlacementMaxLength } from './Context';
+import { DEFAULT_INTERFACE_GRID_BOUND } from './Context';
 import { CustomComponent } from './Interface/CustomComponent';
 import { PlayListEmpty } from './Interface/PlayListEmpty';
 import { AudioPlayerProps } from './Player';
 import { Progress } from './Interface/Controller/Input';
 import { Volume } from './Interface/Controller/Tooltip';
 import { SortablePlayList } from './Interface/Controller/Drawer';
+import { SpeedSelector } from './Interface/Controller/SpeedSelector';
 import { TransportControls, RepeatTypeBtn } from './Interface/Controller/Button';
 import { Artwork } from './Interface/Information/Artwork';
 import { TrackInfo } from './Interface/Information/TrackInfo';
 import { TrackTime } from './Interface/Information/TrackTime';
-export type RMAudioPlayerProps<TInterfacePlacementLength extends number = typeof defaultInterfacePlacementMaxLength> = AudioPlayerProps<TInterfacePlacementLength> & AudioPlayerContainerProps;
-declare function AudioPlayerWithProviders<TInterfacePlacementLength extends number = typeof defaultInterfacePlacementMaxLength>({ rootContainerProps, ...audioPlayProps }: RMAudioPlayerProps<TInterfacePlacementLength>): import("react/jsx-runtime").JSX.Element;
+export type RMAudioPlayerProps<TInterfacePlacementLength extends number = typeof DEFAULT_INTERFACE_GRID_BOUND> = AudioPlayerProps<TInterfacePlacementLength> & AudioPlayerContainerProps;
+declare function AudioPlayerWithProviders<TInterfacePlacementLength extends number = typeof DEFAULT_INTERFACE_GRID_BOUND>({ rootContainerProps, ...audioPlayProps }: RMAudioPlayerProps<TInterfacePlacementLength>): import("react/jsx-runtime").JSX.Element;
 declare namespace AudioPlayerWithProviders {
     var displayName: string;
 }
@@ -22,6 +23,7 @@ type AudioPlayerComponent = typeof AudioPlayerWithProviders & {
     PlayListEmpty: typeof PlayListEmpty;
     PlayButton: typeof TransportControls;
     RepeatButton: typeof RepeatTypeBtn;
+    SpeedSelector: typeof SpeedSelector;
     Artwork: typeof Artwork;
     TrackInfo: typeof TrackInfo;
     TrackTime: typeof TrackTime;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-modern-audio-player",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Modern, customizable React audio player with waveform visualization, drag-and-drop playlist, WAI-ARIA accessibility, TypeScript-first API, and Next.js App Router (Server Components) support.",
   "author": {
     "name": "MAXX",

package/dist/types/components/AudioPlayer/Interface/Controller/Tooltip/Volume/useVolume.d.ts

@@ -1,5 +0,0 @@
-import { VolumeSliderPlacement } from '../../../../Context';
-export declare const useVolumeSliderPlacement: ({ triggerRef, initialState, }: {
-    triggerRef: React.RefObject<HTMLElement>;
-    initialState: VolumeSliderPlacement;
-}) => import('../../../../../Dropdown').DropdownContentPlacement;