react-modern-audio-player 1.0.0 → 1.1.2
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/README.md +28 -22
- package/dist/index.cjs +68 -158
- package/dist/index.css +1 -1
- package/dist/index.es.js +61 -144
- package/dist/types/components/AudioPlayer/Context/StateContext/element.d.ts +1 -0
- package/dist/types/components/AudioPlayer/Context/StateContext/placement.d.ts +1 -1
- package/dist/types/components/Dropdown/Dropdown.d.ts +1 -0
- package/package.json +4 -8
package/README.md
CHANGED
|
@@ -3,8 +3,10 @@
|
|
|
3
3
|
<h1 align="center">React Modern Audio Player</h1>
|
|
4
4
|
</p>
|
|
5
5
|
|
|
6
|
-
|
|
7
6
|
<p align="center">
|
|
7
|
+
<a href="https://github.com/slash9494/react-modern-audio-player/blob/main/package/LICENSE">
|
|
8
|
+
<img src="https://img.shields.io/npm/l/react-modern-audio-player" alt="License">
|
|
9
|
+
</a>
|
|
8
10
|
<a href="https://www.npmjs.com/package/react-modern-audio-player">
|
|
9
11
|
<img src="https://img.shields.io/npm/v/react-modern-audio-player" alt="Version">
|
|
10
12
|
</a>
|
|
@@ -12,7 +14,7 @@
|
|
|
12
14
|
<img src="https://img.shields.io/npm/dt/react-modern-audio-player" alt="Download">
|
|
13
15
|
</a>
|
|
14
16
|
<a href="https://bundlephobia.com/package/react-modern-audio-player@0.0.3">
|
|
15
|
-
<img src="https://
|
|
17
|
+
<img src="https://img.shields.io/bundlephobia/minzip/react-modern-audio-player" alt="BundleSize">
|
|
16
18
|
</a>
|
|
17
19
|
</p>
|
|
18
20
|
|
|
@@ -86,7 +88,7 @@ Prop | Type | Default
|
|
|
86
88
|
--- | --- | ---
|
|
87
89
|
`playList` | [PlayList](#playlist) | [ ]
|
|
88
90
|
`audioInitialState` | [AudioInitialState](#audioinitialstate) | isPlaying: false </br>repeatType: "ALL" </br>volume: 1
|
|
89
|
-
`activeUI` | [ActiveUI](#activeui) | playButton : true
|
|
91
|
+
`activeUI` | [ActiveUI](#activeui) | playButton : true <br/> volumeSlider: true
|
|
90
92
|
`customIcons` | [CustomIcons](#customicons) | undefined
|
|
91
93
|
`coverImgsCss` | [CoverImgsCss](#coverimgscss) | undefined
|
|
92
94
|
`placement` | [Placement](#placement) | playListPlacement : "bottom" </br>interfacePlacement :[DefaultInterfacePlacement](#default-interface-placement)
|
|
@@ -132,6 +134,7 @@ type ActiveUI = {
|
|
|
132
134
|
playList: PlayListUI;
|
|
133
135
|
prevNnext: boolean;
|
|
134
136
|
volume: boolean;
|
|
137
|
+
volumeSlider: boolean;
|
|
135
138
|
repeatType: boolean;
|
|
136
139
|
trackTime: TrackTimeUI;
|
|
137
140
|
trackInfo: boolean;
|
|
@@ -226,8 +229,9 @@ const defaultInterfacePlacement = {
|
|
|
226
229
|
### Theme mode ( dark-mode )
|
|
227
230
|
|
|
228
231
|
> it apply dark-mode depending on `system-theme`
|
|
229
|
-
|
|
230
|
-
>
|
|
232
|
+
> </br>
|
|
233
|
+
> you can customize color-theme by `css-variable` of `react-spectrum` `theme-default`
|
|
234
|
+
|
|
231
235
|
|
|
232
236
|
## ID & Classnames
|
|
233
237
|
|
|
@@ -242,23 +246,25 @@ you can customize color-theme by `css-variable` of `react-spectrum` `theme-defau
|
|
|
242
246
|
### color variables
|
|
243
247
|
|
|
244
248
|
```tsx
|
|
249
|
+
--rm-audio-player-interface-container:var(--spectrum-global-color-gray-100);
|
|
245
250
|
--rm-audio-player-volume-background: #ccc;
|
|
246
|
-
--rm-audio-player-volume-panel-background
|
|
247
|
-
--rm-audio-player-volume-panel-border
|
|
248
|
-
--rm-audio-player-volume-thumb: #
|
|
249
|
-
--rm-audio-player-volume-fill:
|
|
250
|
-
--rm-audio-player-volume-track
|
|
251
|
-
--rm-audio-player-track-current-time
|
|
252
|
-
--rm-audio-player-track-duration
|
|
253
|
-
--rm-audio-player-progress-bar
|
|
254
|
-
--rm-audio-player-progress-bar-background
|
|
255
|
-
--rm-audio-player-waveform-cursor:
|
|
256
|
-
--rm-audio-player-waveform-background:
|
|
257
|
-
--rm-audio-player-waveform-bar:
|
|
258
|
-
--rm-audio-player-sortable-list-
|
|
259
|
-
--rm-audio-player-
|
|
260
|
-
|
|
261
|
-
|
|
251
|
+
--rm-audio-player-volume-panel-background:#f2f2f2;
|
|
252
|
+
--rm-audio-player-volume-panel-border:#ccc;
|
|
253
|
+
--rm-audio-player-volume-thumb: #d3d3d3;
|
|
254
|
+
--rm-audio-player-volume-fill:rgba(0, 0, 0, 0.5);
|
|
255
|
+
--rm-audio-player-volume-track:#ababab;
|
|
256
|
+
--rm-audio-player-track-current-time:#0072F5;
|
|
257
|
+
--rm-audio-player-track-duration:#8c8c8c;
|
|
258
|
+
--rm-audio-player-progress-bar:#0072F5;
|
|
259
|
+
--rm-audio-player-progress-bar-background:#D1D1D1;
|
|
260
|
+
--rm-audio-player-waveform-cursor:var(--spectrum-global-color-gray-800);
|
|
261
|
+
--rm-audio-player-waveform-background:var(--rm-audio-player-progress-bar-background);
|
|
262
|
+
--rm-audio-player-waveform-bar:var(--rm-audio-player-progress-bar);
|
|
263
|
+
--rm-audio-player-sortable-list:var(--spectrum-global-color-gray-200);
|
|
264
|
+
--rm-audio-player-sortable-list-button-active:#0072F5;
|
|
265
|
+
--rm-audio-player-selected-list-item-background:var(--spectrum-global-color-gray-500);
|
|
266
|
+
|
|
267
|
+
// ...spectrum theme palette and so on... //
|
|
262
268
|
```
|
|
263
269
|
|
|
264
270
|
# ****Example****
|
|
@@ -294,4 +300,4 @@ function App() {
|
|
|
294
300
|
</div>
|
|
295
301
|
);
|
|
296
302
|
}
|
|
297
|
-
```
|
|
303
|
+
```
|