react-modern-audio-player 1.1.5 → 1.2.0

package/README.md

@@ -18,6 +18,9 @@
   </a>
 </p>
 
+## DEMO
+https://codesandbox.io/s/basic-ypvpyv?file=/src/App.js
+
 # ****Flexible and Customizable UI****
 ## This can offer waveform by `wavesurfer.js`
 <img width="100%" src="https://user-images.githubusercontent.com/70849655/180435472-f043dbb4-54df-43e0-bc5c-67492510e817.png" alt="">
@@ -53,11 +56,10 @@ import AudioPlayer from 'react-modern-audio-player';
 const playList = [
   {
     name: 'name',
-    writer: 'write',
+    writer: 'writer',
     img: 'image.jpg',
     src: 'audio.mp3',
     id: 1,
-    index: 0,
   },
 ]
 function Player (){
@@ -80,6 +82,7 @@ interface AudioPlayerProps {
     player?: PlayerPlacement;
     playList?: PlayListPlacement;
     interface?: InterfacePlacement;
+    volumeSlider?: VolumeSliderPlacement;
   };
 }
 ```
@@ -88,7 +91,7 @@ Prop | Type | Default
 --- | --- | --- 
 `playList` | [PlayList](#playlist) | [ ] 
 `audioInitialState` | [AudioInitialState](#audioinitialstate) | isPlaying: false </br>repeatType: "ALL" </br>volume: 1 
-`activeUI` | [ActiveUI](#activeui) | playButton : true <br/> volumeSlider: true
+`activeUI` | [ActiveUI](#activeui) | playButton : true
 `customIcons` | [CustomIcons](#customicons) | undefined 
 `coverImgsCss` | [CoverImgsCss](#coverimgscss) | undefined 
 `placement` | [Placement](#placement) | playListPlacement : "bottom" </br>interfacePlacement :[DefaultInterfacePlacement](#default-interface-placement)
@@ -100,7 +103,6 @@ type PlayList = Array<AudioData>;
 type AudioData = {
   src: string;
   id: number;
-  index: number;
   name?: string | ReactNode;
   writer?: string | ReactNode;
   img?: string;
@@ -136,12 +138,11 @@ type ActiveUI = {
   volume: boolean;
   volumeSlider: boolean;
   repeatType: boolean;
-  trackTime: TrackTimeUI;
+  trackTime: boolean;
   trackInfo: boolean;
   artwork: boolean;
   progress: ProgressUI;
 };
-type TrackTimeUI = "separation-mode" | "unification-mode" | false;
 type ProgressUI = "waveform" | "bar" | false;
 type PlayListUI = "sortable" | "unSortable" | false;
 ```
@@ -187,8 +188,10 @@ type PlayerPlacement =
 
 type PlayListPlacement = "bottom" | "top";
 
+type VolumeSliderPlacement = "bottom" | "top";
+
 type InterfacePlacement = {
-  templateArea: InterfaceGridTemplateArea;
+  templateArea?: InterfaceGridTemplateArea;
   itemCustomArea?: InterfaceGridItemArea;
 };
 
@@ -201,9 +204,9 @@ type InterfacePlacementValue = "row1-1" | "row1-2" | "row1-3" | "row1-4" | ... m
 
 type InterfaceGridItemArea = Partial<Record<InterfacePlacementKey, string>>;
 	/** example
-          * check grid item MDN
 	* progress : 2-4
 	* repeatBtn : row1-4 / 2 / row1-4 / 10
+    * check grid item MDN
 	*/
 ```
 
@@ -293,7 +296,6 @@ function App() {
         }}
         activeUI={{
           all: true,
-          trackTime: "separation-mode",
           progress: "waveform",
         }}
       />