react-modern-audio-player 1.1.5 → 1.2.0

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

@@ -1,7 +1,6 @@
 import { ReactNode } from "react";
 import { AudioData } from "./audio";
 export declare type PlayList = Array<AudioData>;
-export declare type TrackTimeUI = "separation-mode" | "unification-mode" | false;
 export declare type ProgressUI = "waveform" | "bar" | false;
 export declare type PlayListUI = "sortable" | "unSortable" | false;
 export declare type ActiveUI = Partial<{
@@ -12,7 +11,7 @@ export declare type ActiveUI = Partial<{
     volume: boolean;
     volumeSlider: boolean;
     repeatType: boolean;
-    trackTime: TrackTimeUI;
+    trackTime: boolean;
     trackInfo: boolean;
     artwork: boolean;
     progress: ProgressUI;

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

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

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

@@ -1,13 +1,14 @@
 import { NumbersToUnionNum } from '../../../../utils/generateUnionNumType';
 import { ActiveUI } from "./element";
+export declare type VolumeSliderPlacement = "bottom" | "top";
 export declare type PlayListPlacement = "bottom" | "top";
-export declare type PlayerPlacement = "bottom" | "top" | "bottom-left" | "bottom-right" | "top-left" | "top-right";
+export declare type PlayerPlacement = "bottom" | "top" | "bottom-left" | "bottom-right" | "top-left" | "top-right" | "static";
 export declare const interfacePlacementMaxLength = 10;
 export declare type InterfacePlacementKey = Exclude<keyof ActiveUI, "all" | "prevNnext" | "trackTime" | "volumeSlider"> | "trackTimeCurrent" | "trackTimeDuration";
 export declare type InterfaceGridTemplateArea = Partial<Record<InterfacePlacementKey, `row${NumbersToUnionNum<typeof interfacePlacementMaxLength>}-${NumbersToUnionNum<typeof interfacePlacementMaxLength>}`>>;
 export declare type InterfaceGridItemArea = Partial<Record<InterfacePlacementKey, string>>;
 export declare type InterfacePlacement = {
-    templateArea: InterfaceGridTemplateArea;
+    templateArea?: InterfaceGridTemplateArea;
     itemCustomArea?: InterfaceGridItemArea;
 };
 export declare const defaultInterfacePlacement: {

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

@@ -1,5 +1,5 @@
 import { Dispatch } from "react";
-import { RepeatType, PlayList, PlayListPlacement, PlayerPlacement, ActiveUI, ElementRefs, CustomIcons, AudioInitialState, InterfacePlacement, CoverImgsCss } from "./StateContext";
+import { RepeatType, PlayList, PlayListPlacement, PlayerPlacement, ActiveUI, ElementRefs, CustomIcons, AudioInitialState, InterfacePlacement, CoverImgsCss, VolumeSliderPlacement } from "./StateContext";
 export declare type AudioContextAction = {
     type: "NEXT_AUDIO";
 } | {
@@ -11,7 +11,7 @@ export declare type AudioContextAction = {
     type: "SET_INITIAL_AUDIO_STATE";
     audioInitialState: AudioInitialState;
 } | {
-    type: "SET_PlAY_STATE";
+    type: "CHANGE_PLAYING_STATE";
     state?: boolean;
 } | {
     type: "SET_CURRENT_AUDIO";
@@ -20,11 +20,6 @@ export declare type AudioContextAction = {
 } | {
     type: "SET_REPEAT_TYPE";
     repeatType: RepeatType;
-} | {
-    type: "SET_PLACEMENTS";
-    playerPlacement?: PlayerPlacement;
-    playListPlacement?: PlayListPlacement;
-    interfacePlacement?: InterfacePlacement;
 } | {
     type: "SET_VOLUME";
     volume: number;
@@ -43,6 +38,12 @@ export declare type AudioContextAction = {
 } | {
     type: "SET_COVER_IMGS_CSS";
     coverImgsCss: CoverImgsCss;
+} | {
+    type: "SET_PLACEMENTS";
+    playerPlacement?: PlayerPlacement;
+    playListPlacement?: PlayListPlacement;
+    interfacePlacement?: InterfacePlacement;
+    volumeSliderPlacement?: VolumeSliderPlacement;
 };
 export declare type AudioPlayerDispatchContext = Dispatch<AudioContextAction>;
 export declare const audioPlayerDispatchContext: import("react").Context<AudioPlayerDispatchContext | null>;

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

@@ -1,2 +1,4 @@
 import { FC } from "react";
-export declare const BarProgress: FC;
+export declare const BarProgress: FC<{
+    isActive: boolean;
+}>;

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

@@ -1,2 +1,4 @@
 import { FC } from "react";
-export declare const WaveformProgress: FC;
+export declare const WaveformProgress: FC<{
+    isActive: boolean;
+}>;

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

@@ -1,5 +1,5 @@
 import { VolumeSliderPlacement } from "./Content";
-export declare const useVolumeSliderPlacement: ({ ref, initialState, }: {
-    ref: React.RefObject<HTMLElement>;
+export declare const useVolumeSliderPlacement: ({ triggerRef, initialState, }: {
+    triggerRef: React.RefObject<HTMLElement>;
     initialState: VolumeSliderPlacement;
 }) => VolumeSliderPlacement;

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

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { TrackTimeChildrenProps } from "./Types";
+export declare const Current: FC<TrackTimeChildrenProps>;

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

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { TrackTimeChildrenProps } from "./Types";
+export declare const Duration: FC<TrackTimeChildrenProps>;

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

@@ -0,0 +1,6 @@
+import { TrackTimePosition } from "./Types";
+export interface TrackTimeContainerProps {
+    position: TrackTimePosition;
+    childrenClassName: string;
+}
+export declare const TrackTimeContainer: import("styled-components").StyledComponent<"div", any, TrackTimeContainerProps, never>;

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

@@ -0,0 +1,4 @@
+export declare type TrackTimePosition = "left" | "right" | "separation";
+export interface TrackTimeChildrenProps {
+    position: TrackTimePosition;
+}

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

@@ -0,0 +1,2 @@
+import { FC } from "react";
+export declare const TrackTime: FC;

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

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { ActiveUI, PlayListPlacement, CustomIcons, PlayerPlacement, PlayList, AudioInitialState, InterfacePlacement, CoverImgsCss } from '../../AudioPlayer/Context';
+import { ActiveUI, PlayListPlacement, CustomIcons, PlayerPlacement, PlayList, AudioInitialState, InterfacePlacement, CoverImgsCss, VolumeSliderPlacement } from '../../AudioPlayer/Context';
 export interface AudioPlayerProps {
     playList: PlayList;
     audioInitialState?: AudioInitialState;
@@ -10,6 +10,7 @@ export interface AudioPlayerProps {
         player?: PlayerPlacement;
         playList?: PlayListPlacement;
         interface?: InterfacePlacement;
+        volumeSlider?: VolumeSliderPlacement;
     };
 }
 export declare const AudioPlayer: FC<AudioPlayerProps>;

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

@@ -1,6 +1,6 @@
 import { Grid as SpectrumGrid } from "@react-spectrum/layout";
 import { GridItem } from "./Item";
-export declare const Grid: import("react").ForwardRefExoticComponent<import("@react-types/layout").GridProps & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>>;
+export declare const Grid: import("react").ForwardRefExoticComponent<import("@react-spectrum/layout").GridProps & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>>;
 declare type GridComponent = typeof SpectrumGrid & {
     Item: typeof GridItem;
 };

package/dist/types/components/Provider/AudioPlayerProvider.d.ts

@@ -1,2 +1,3 @@
 import { PropsWithChildren, FC } from "react";
-export declare const AudioPlayerProvider: FC<PropsWithChildren<unknown>>;
+import { AudioPlayerProps } from "../AudioPlayer/Player";
+export declare const AudioPlayerProvider: FC<PropsWithChildren<AudioPlayerProps>>;

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

@@ -0,0 +1,4 @@
+export * from "./useNonNullableContext";
+export * from "./useVariableColor";
+export * from "./useClickOutside";
+export * from "./useRefsDispatch";

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

@@ -0,0 +1,5 @@
+import { ElementRefs } from '../components/AudioPlayer/Context';
+export declare type ElementRefsRecord = Partial<Record<keyof ElementRefs, React.RefObject<ElementRefs[keyof ElementRefs]>>>;
+export declare const useRefsDispatch: ({ refs }: {
+    refs: ElementRefsRecord;
+}, deps: Array<any>) => void;

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

@@ -1,5 +1,5 @@
-import { ActiveUI } from '../components/AudioPlayer/Context/StateContext';
-export declare const generateGridTemplateValues: (activeUi: ActiveUI, placement?: Partial<Record<import('../components/AudioPlayer/Context/StateContext').InterfacePlacementKey, "row1-1" | "row1-2" | "row1-3" | "row1-4" | "row1-5" | "row1-6" | "row1-7" | "row1-8" | "row1-9" | "row2-1" | "row2-2" | "row2-3" | "row2-4" | "row2-5" | "row2-6" | "row2-7" | "row2-8" | "row2-9" | "row3-1" | "row3-2" | "row3-3" | "row3-4" | "row3-5" | "row3-6" | "row3-7" | "row3-8" | "row3-9" | "row4-1" | "row4-2" | "row4-3" | "row4-4" | "row4-5" | "row4-6" | "row4-7" | "row4-8" | "row4-9" | "row5-1" | "row5-2" | "row5-3" | "row5-4" | "row5-5" | "row5-6" | "row5-7" | "row5-8" | "row5-9" | "row6-1" | "row6-2" | "row6-3" | "row6-4" | "row6-5" | "row6-6" | "row6-7" | "row6-8" | "row6-9" | "row7-1" | "row7-2" | "row7-3" | "row7-4" | "row7-5" | "row7-6" | "row7-7" | "row7-8" | "row7-9" | "row8-1" | "row8-2" | "row8-3" | "row8-4" | "row8-5" | "row8-6" | "row8-7" | "row8-8" | "row8-9" | "row9-1" | "row9-2" | "row9-3" | "row9-4" | "row9-5" | "row9-6" | "row9-7" | "row9-8" | "row9-9">> | undefined) => {
+import { ActiveUI, InterfacePlacement } from '../components/AudioPlayer/Context/StateContext';
+export declare const generateGridTemplateValues: (activeUi: ActiveUI, placement?: InterfacePlacement["templateArea"]) => {
     gridAreas: string[];
     gridColumns: string[];
 };

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

@@ -1,9 +1,2 @@
-export declare const resetAudioValues: (elementRefs?: Partial<{
-    audioEl: HTMLAudioElement;
-    trackCurTimeEl: HTMLSpanElement;
-    trackDurationEl: HTMLSpanElement;
-    progressBarEl: HTMLDivElement;
-    progressValueEl: HTMLDivElement;
-    progressHandleEl: HTMLDivElement;
-    waveformInst: import("wavesurfer.js");
-}> | undefined, duration?: number | undefined, restart?: boolean | undefined) => void;
+import { ElementRefs } from '../components/AudioPlayer/Context/StateContext';
+export declare const resetAudioValues: (elementRefs?: ElementRefs, duration?: number, restart?: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-modern-audio-player",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "author": {
     "name": "LYH",
     "email": "slash9494@naver.com",
@@ -33,8 +33,6 @@
     "@react-spectrum/provider": "^3.4.1",
     "@react-spectrum/theme-default": "^3.3.1",
     "@react-spectrum/view": "^3.2.1",
-    "@types/styled-components": "^5.1.25",
-    "@types/wavesurfer.js": "^6.0.3",
     "classnames": "^2.3.1",
     "react-icons": "^4.4.0",
     "styled-components": "^5.3.5",
@@ -44,11 +42,18 @@
     "@types/node": "^17.0.25",
     "@types/react": "^18.0.1",
     "@types/react-dom": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@types/wavesurfer.js": "^6.0.3",
     "@vitejs/plugin-react": "^1.0.7",
     "typescript": "^4.6.3",
     "vite": "^2.9.0",
     "vite-plugin-dts": "^1.1.0",
     "vite-plugin-libcss": "^1.0.5"
   },
-  "keywords": ["audio", "player", "react", "react-modern-audio-player"]
+  "keywords": [
+    "audio",
+    "player",
+    "react",
+    "react-modern-audio-player"
+  ]
 }

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

@@ -1,3 +0,0 @@
-import { FC } from "react";
-export declare const TrackTimeCurrent: FC;
-export declare const TrackTimeDuration: FC;