react-modern-audio-player 2.1.0 → 2.2.0

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

@@ -19,6 +19,7 @@ export interface AudioPlayerStateContext {
 }
 export type InitialStates = Partial<AudioState> & {
     curPlayId: number;
+    playListExpanded?: boolean;
 };
 export * from './audio';
 export * from './element';

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

@@ -7,5 +7,6 @@ export interface UIContext {
     interfacePlacement?: InterfacePlacement;
     volumeSliderPlacement?: VolumeSliderPlacement;
     colorScheme?: ColorScheme;
+    playListExpanded?: boolean;
 }
 export declare const uiContext: import('react').Context<UIContext | null>;

package/dist/types/{hooks/context → components/AudioPlayer/Context/hooks}/index.d.ts

@@ -1,4 +1,3 @@
-export * from './useNonNullableContext';
 export * from './usePlaybackContext';
 export * from './useTimeContext';
 export * from './useTrackContext';

package/dist/types/components/AudioPlayer/Context/hooks/useAudioAttrsContext.d.ts

@@ -0,0 +1,2 @@
+import { AudioAttrsContext } from '../AudioAttrsContext';
+export declare const useAudioAttrsContext: () => AudioAttrsContext;

package/dist/types/components/AudioPlayer/Context/hooks/usePlaybackContext.d.ts

@@ -0,0 +1,2 @@
+import { PlaybackContext } from '../PlaybackContext';
+export declare const usePlaybackContext: () => PlaybackContext;

package/dist/types/components/AudioPlayer/Context/hooks/useResourceContext.d.ts

@@ -0,0 +1,2 @@
+import { ResourceContext } from '../ResourceContext';
+export declare const useResourceContext: () => ResourceContext;

package/dist/types/components/AudioPlayer/Context/hooks/useTimeContext.d.ts

@@ -0,0 +1,2 @@
+import { TimeContext } from '../TimeContext';
+export declare const useTimeContext: () => TimeContext;

package/dist/types/components/AudioPlayer/Context/hooks/useTrackContext.d.ts

@@ -0,0 +1,2 @@
+import { TrackContext } from '../TrackContext';
+export declare const useTrackContext: () => TrackContext;

package/dist/types/components/AudioPlayer/Context/hooks/useUIContext.d.ts

@@ -0,0 +1 @@
+export declare const useUIContext: () => import('../UIContext').UIContext;

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

@@ -8,3 +8,4 @@ export * from './UIContext';
 export * from './ResourceContext';
 export * from './TimeContext';
 export * from './providerProps';
+export * from './hooks';

package/dist/types/components/AudioPlayer/Interface/Controller/Button/RepeatTypeBtn.d.ts

@@ -1,2 +1,4 @@
 import { FC } from 'react';
-export declare const RepeatTypeBtn: FC;
+import { GridItemLayoutProps } from '../../../../Grid';
+export type RepeatTypeBtnProps = GridItemLayoutProps;
+export declare const RepeatTypeBtn: FC<RepeatTypeBtnProps>;

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { GridItemLayoutProps } from '../../../../../Grid';
+export type TransportControlsProps = GridItemLayoutProps;
+export declare const TransportControls: FC<TransportControlsProps>;

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

@@ -1,5 +1,6 @@
-export * from './PlayBtn';
-export * from './PrevBtn';
-export * from './NextBtn';
+export * from './TransportControls';
+export * from './TransportControls/PlayBtn';
+export * from './TransportControls/PrevBtn';
+export * from './TransportControls/NextBtn';
 export * from './RepeatTypeBtn';
 export * from './VolumeIcon';

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

@@ -1,2 +1,6 @@
 import { FC } from 'react';
-export declare const SortablePlayList: FC;
+import { GridItemLayoutProps } from '../../../../../Grid';
+export interface SortablePlayListProps extends GridItemLayoutProps {
+    initialExpanded?: boolean;
+}
+export declare const SortablePlayList: FC<SortablePlayListProps>;

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

@@ -1,2 +1,13 @@
+import { GridItemLayoutProps } from '../../../../../Grid';
 import { FC } from 'react';
-export declare const Progress: FC;
+export type ProgressType = "bar" | "waveform";
+export interface ProgressProps extends GridItemLayoutProps {
+    /**
+     * Override which progress renderer to show. When omitted, falls back to
+     * `activeUI.progress`. Used when the preset is disabled but the compound
+     * `<AudioPlayer.Progress />` is still placed explicitly — without this,
+     * the component would render an empty grid slot.
+     */
+    type?: ProgressType;
+}
+export declare const Progress: FC<ProgressProps>;

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

@@ -1,2 +1,4 @@
 import { FC } from 'react';
-export declare const Volume: FC;
+import { GridItemLayoutProps } from '../../../../../Grid';
+export type VolumeProps = GridItemLayoutProps;
+export declare const Volume: FC<VolumeProps>;

package/dist/types/components/AudioPlayer/Interface/Information/Artwork.d.ts

@@ -1,2 +1,4 @@
 import { FC } from 'react';
-export declare const Artwork: FC;
+import { GridItemLayoutProps } from '../../../Grid';
+export type ArtworkProps = GridItemLayoutProps;
+export declare const Artwork: FC<ArtworkProps>;

package/dist/types/components/AudioPlayer/Interface/Information/TrackInfo.d.ts

@@ -1,2 +1,4 @@
 import { FC } from 'react';
-export declare const TrackInfo: FC;
+import { GridItemLayoutProps } from '../../../Grid';
+export type TrackInfoProps = GridItemLayoutProps;
+export declare const TrackInfo: FC<TrackInfoProps>;

package/dist/types/components/AudioPlayer/Interface/Information/TrackTime/index.d.ts

@@ -1,2 +1,4 @@
+import { GridItemLayoutProps } from '../../../../Grid';
 import { FC } from 'react';
-export declare const TrackTime: FC;
+export type TrackTimeProps = Pick<GridItemLayoutProps, "visible">;
+export declare const TrackTime: FC<TrackTimeProps>;

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

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from 'react';
+export declare const PLAYLIST_EMPTY_SLOT = "PlayListEmpty";
+export interface PlayListEmptyProps {
+    children?: ReactNode;
+}
+export declare const PlayListEmpty: FC<PlayListEmptyProps>;

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

@@ -0,0 +1,3 @@
+export * from './slotMetaMap';
+export * from './useCompoundSlots';
+export * from './useDuplicateSlotWarning';

package/dist/types/components/AudioPlayer/Interface/compound/slotMetaMap.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { ActiveUI } from '../../Context/StateContext';
+export type ActiveUIKey = keyof ActiveUI;
+export interface SlotMeta {
+    displayName: string;
+    activeUIKey: ActiveUIKey;
+}
+export declare const compoundSlotMetaMap: Record<string, SlotMeta>;
+export declare function isPresetActive(activeUI: ActiveUI, key: ActiveUIKey): boolean;
+export declare function resolveSlotKey(child: ReactElement): string | undefined;

package/dist/types/components/AudioPlayer/Interface/compound/useCompoundSlots.d.ts

@@ -0,0 +1,6 @@
+import { default as React, ReactElement, ReactNode } from 'react';
+export interface CompoundSlots {
+    compoundChildren: ReactElement[];
+    playListEmptyNode: ReactNode;
+}
+export declare function useCompoundSlots(children: React.ReactNode): CompoundSlots;

package/dist/types/components/AudioPlayer/Interface/compound/useDuplicateSlotWarning.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { ActiveUI } from '../../Context/StateContext';
+export interface DuplicateSlotWarningArgs {
+    compoundChildren: ReactElement[];
+    activeUI: ActiveUI;
+}
+export declare function useDuplicateSlotWarning({ compoundChildren, activeUI, }: DuplicateSlotWarningArgs): void;

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

@@ -0,0 +1,2 @@
+export * from './playListPortalContext';
+export * from './playListEmptyContext';

package/dist/types/components/AudioPlayer/Interface/contexts/playListEmptyContext.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const playListEmptyContext: import('react').Context<ReactNode>;

package/dist/types/components/AudioPlayer/Interface/contexts/playListPortalContext.d.ts

@@ -0,0 +1 @@
+export declare const playListPortalContext: import('react').Context<HTMLDivElement | null>;

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

@@ -0,0 +1,2 @@
+export * from './useResolvedGridArea';
+export * from './useGridTemplate';

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

@@ -0,0 +1,3 @@
+import { ActiveUI, InterfacePlacement } from '../../Context';
+import { ReactElement } from 'react';
+export declare const useGridTemplate: (activeUI: ActiveUI, templateArea: InterfacePlacement["templateArea"] | undefined, customComponentsArea?: InterfacePlacement["customComponentsArea"], compoundChildren?: ReactElement[]) => readonly [string[], string[]];

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

@@ -0,0 +1,2 @@
+import { InterfacePlacementKey } from '../../Context/StateContext';
+export declare function useResolvedGridArea(slotKey: InterfacePlacementKey, override?: string): string;

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

@@ -1,10 +1,31 @@
 import { AudioPlayerContainerProps } from './Container';
 import { defaultInterfacePlacementMaxLength } 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 { 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;
 declare namespace AudioPlayerWithProviders {
     var displayName: string;
-    var CustomComponent: import("react").FC<import("./Interface/CustomComponent").CustomComponentProps>;
 }
-export default AudioPlayerWithProviders;
+type AudioPlayerComponent = typeof AudioPlayerWithProviders & {
+    Progress: typeof Progress;
+    Volume: typeof Volume;
+    PlayList: typeof SortablePlayList;
+    PlayListEmpty: typeof PlayListEmpty;
+    PlayButton: typeof TransportControls;
+    RepeatButton: typeof RepeatTypeBtn;
+    Artwork: typeof Artwork;
+    TrackInfo: typeof TrackInfo;
+    TrackTime: typeof TrackTime;
+    CustomComponent: typeof CustomComponent;
+};
+declare const AudioPlayerCompound: AudioPlayerComponent;
+export default AudioPlayerCompound;

package/dist/types/components/Drawer/Drawer.d.ts

@@ -5,6 +5,7 @@ import { DrawerContent } from './DrawerContent';
 export interface DrawerProps extends Omit<Partial<DrawerContext>, "setIsOpen"> {
     outboundClickActive?: boolean;
     placement?: "bottom" | "top";
+    initialOpen?: boolean;
 }
 declare const Drawer: FC<PropsWithChildren<DrawerProps>>;
 type DrawerComponent = typeof Drawer & {

package/dist/types/components/Grid/Item.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, HTMLAttributes } from 'react';
-export interface GridItemProps extends HTMLAttributes<HTMLDivElement> {
+export interface GridItemLayoutProps {
     gridArea?: string;
     width?: CSSProperties["width"];
     visible?: boolean;
@@ -7,4 +7,5 @@ export interface GridItemProps extends HTMLAttributes<HTMLDivElement> {
     justifySelf?: CSSProperties["justifySelf"];
     padding?: CSSProperties["padding"];
 }
-export declare const GridItem: import('react').ForwardRefExoticComponent<GridItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export type GridItemProps = GridItemLayoutProps & HTMLAttributes<HTMLDivElement>;
+export declare const GridItem: import('react').ForwardRefExoticComponent<GridItemLayoutProps & HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -6,4 +6,5 @@ type GridComponent = typeof BaseGrid & {
 declare const Grid: GridComponent;
 export type { NativeGridProps };
 export type { NativeGridProps as GridProps };
+export type { GridItemProps, GridItemLayoutProps } from './Item';
 export default Grid;

package/dist/types/hooks/index.d.ts

@@ -1,5 +1,4 @@
-export * from './context/useNonNullableContext';
+export * from './useNonNullableContext';
 export * from './useVariableColor';
 export * from './useClickOutside';
 export * from './useRefsDispatch';
-export * from './context';

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
-import { default as AudioPlayerWithProviders } from './components/AudioPlayer';
-export default AudioPlayerWithProviders;
+import { default as AudioPlayer } from './components/AudioPlayer';
+export default AudioPlayer;
 export * from './components/AudioPlayer';
 export * from './components/AudioPlayer/Context';
 export * from './components/AudioPlayer/Player';

package/dist/types/utils/ssr.d.ts

@@ -1,5 +1,3 @@
 import { useLayoutEffect } from 'react';
-/** true when running in a browser environment */
 export declare const isBrowser: boolean;
-/** useLayoutEffect that falls back to useEffect during SSR */
 export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;

package/llms.txt

@@ -0,0 +1,61 @@
+# React Modern Audio Player
+
+> 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. Published on npm as `react-modern-audio-player`.
+
+This library exports a single default `<AudioPlayer>` component driven by declarative props, plus a compound `<AudioPlayer.CustomComponent>` and a family of `useAudioPlayer*` hooks for programmatic control. Runtime requirements: React 18 or higher, `react-dom` 18 or higher. `wavesurfer.js` 6.x is an internal dependency (no peer install needed). The library entry point ships a `'use client'` directive so it can be imported directly from Next.js Server Components; hook consumers and compound children must themselves be Client Components.
+
+## Installation
+
+```
+npm install react-modern-audio-player
+```
+
+## Quick start
+
+```tsx
+import AudioPlayer from "react-modern-audio-player";
+
+const playList = [
+  { id: 1, src: "audio.mp3", name: "Track 1", writer: "Artist", img: "cover.jpg" },
+];
+
+export default function Page() {
+  return <AudioPlayer playList={playList} />;
+}
+```
+
+## Core API
+
+- `AudioPlayer` (default export) — accepts `playList`, `audioInitialState`, `activeUI`, `placement`, `colorScheme`, `customIcons`, `coverImgsCss`, `rootContainerProps`, `audioRef`.
+- `AudioPlayer.CustomComponent` — compound child that slots custom nodes into a named grid area (`placement.interface.customComponentsArea`). Requires `'use client'` in the consumer file.
+- `useAudioPlayer()` — control hook. Returns `{ isPlaying, volume, currentTime, duration, repeatType, muted, currentTrack, currentIndex, playList, play, pause, togglePlay, next, prev, seek, setVolume, toggleMute, setTrack }`.
+- Sub-hooks for minimal re-renders: `useAudioPlayerPlayback`, `useAudioPlayerTrack`, `useAudioPlayerVolume`, `useAudioPlayerTime`, `useAudioPlayerElement`.
+- Low-level context hooks (advanced): `usePlaybackContext`, `useTrackContext`, `useUIContext`, `useResourceContext`.
+
+## Key types
+
+```ts
+type AudioData = {
+  src: string;
+  id: number;
+  name?: string;
+  writer?: string;
+  img?: string;
+  description?: string | ReactNode;
+  customTrackInfo?: string | ReactNode;
+};
+type PlayList = AudioData[];
+type RepeatType = "ALL" | "ONE" | "NONE" | "SHUFFLE";
+type ProgressUI = "waveform" | "bar" | false;
+```
+
+## Docs
+
+- [README.md](https://unpkg.com/react-modern-audio-player/README.md): full reference — props tables, theme CSS variables, grid placement syntax, keyboard shortcuts, common integration pitfalls ("Gotchas"), and end-to-end examples.
+- [CHANGELOG.md](https://raw.githubusercontent.com/slash9494/react-modern-audio-player/main/package/CHANGELOG.md): version history, breaking changes, migration notes (served from GitHub — not shipped in the npm tarball).
+
+## Optional
+
+- [GitHub repository](https://github.com/slash9494/react-modern-audio-player)
+- [CodeSandbox demo](https://codesandbox.io/p/sandbox/basic-nfrpfq)
+- [npm page](https://www.npmjs.com/package/react-modern-audio-player)

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "react-modern-audio-player",
-  "version": "2.1.0",
+  "version": "2.2.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",
     "email": "slash9494@gmail.com",
@@ -12,7 +13,8 @@
   "esnext": "dist/index.es.js",
   "typings": "dist/types/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "llms.txt"
   ],
   "license": "MIT",
   "repository": {

package/dist/types/hooks/context/useAudioAttrsContext.d.ts

@@ -1,2 +0,0 @@
-import { AudioAttrsContext } from '../../components/AudioPlayer/Context/AudioAttrsContext';
-export declare const useAudioAttrsContext: () => AudioAttrsContext;

package/dist/types/hooks/context/usePlaybackContext.d.ts

@@ -1,2 +0,0 @@
-import { PlaybackContext } from '../../components/AudioPlayer/Context/PlaybackContext';
-export declare const usePlaybackContext: () => PlaybackContext;

package/dist/types/hooks/context/useResourceContext.d.ts

@@ -1,2 +0,0 @@
-import { ResourceContext } from '../../components/AudioPlayer/Context/ResourceContext';
-export declare const useResourceContext: () => ResourceContext;

package/dist/types/hooks/context/useTimeContext.d.ts

@@ -1,2 +0,0 @@
-import { TimeContext } from '../../components/AudioPlayer/Context/TimeContext';
-export declare const useTimeContext: () => TimeContext;

package/dist/types/hooks/context/useTrackContext.d.ts

@@ -1,2 +0,0 @@
-import { TrackContext } from '../../components/AudioPlayer/Context/TrackContext';
-export declare const useTrackContext: () => TrackContext;

package/dist/types/hooks/context/useUIContext.d.ts

@@ -1 +0,0 @@
-export declare const useUIContext: () => import('../../components/AudioPlayer/Context/UIContext').UIContext;

package/dist/types/hooks/useGridTemplate.d.ts

@@ -1,2 +0,0 @@
-import { ActiveUI, InterfacePlacement } from '../components/AudioPlayer/Context';
-export declare const useGridTemplate: (activeUI: ActiveUI, templateArea: InterfacePlacement["templateArea"] | undefined, customComponentsArea?: InterfacePlacement["customComponentsArea"]) => readonly [string[], string[]];