apm-react-audio-player 1.0.7 → 1.0.9
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/dist/index.js +374 -0
- package/package.json +1 -1
package/dist/index.js
ADDED
|
@@ -0,0 +1,374 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
6
|
+
|
|
7
|
+
var React = require('react');
|
|
8
|
+
var React__default = _interopDefault(React);
|
|
9
|
+
|
|
10
|
+
function _iterableToArrayLimit(arr, i) {
|
|
11
|
+
var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
|
|
12
|
+
if (null != _i) {
|
|
13
|
+
var _s,
|
|
14
|
+
_e,
|
|
15
|
+
_x,
|
|
16
|
+
_r,
|
|
17
|
+
_arr = [],
|
|
18
|
+
_n = !0,
|
|
19
|
+
_d = !1;
|
|
20
|
+
try {
|
|
21
|
+
if (_x = (_i = _i.call(arr)).next, 0 === i) {
|
|
22
|
+
if (Object(_i) !== _i) return;
|
|
23
|
+
_n = !1;
|
|
24
|
+
} else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
|
|
25
|
+
} catch (err) {
|
|
26
|
+
_d = !0, _e = err;
|
|
27
|
+
} finally {
|
|
28
|
+
try {
|
|
29
|
+
if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
|
|
30
|
+
} finally {
|
|
31
|
+
if (_d) throw _e;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
return _arr;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
function _extends() {
|
|
38
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
39
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
40
|
+
var source = arguments[i];
|
|
41
|
+
for (var key in source) {
|
|
42
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
43
|
+
target[key] = source[key];
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
return target;
|
|
48
|
+
};
|
|
49
|
+
return _extends.apply(this, arguments);
|
|
50
|
+
}
|
|
51
|
+
function _slicedToArray(arr, i) {
|
|
52
|
+
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
53
|
+
}
|
|
54
|
+
function _arrayWithHoles(arr) {
|
|
55
|
+
if (Array.isArray(arr)) return arr;
|
|
56
|
+
}
|
|
57
|
+
function _unsupportedIterableToArray(o, minLen) {
|
|
58
|
+
if (!o) return;
|
|
59
|
+
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
60
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
61
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
62
|
+
if (n === "Map" || n === "Set") return Array.from(o);
|
|
63
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
64
|
+
}
|
|
65
|
+
function _arrayLikeToArray(arr, len) {
|
|
66
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
67
|
+
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
68
|
+
return arr2;
|
|
69
|
+
}
|
|
70
|
+
function _nonIterableRest() {
|
|
71
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtrl) {
|
|
75
|
+
var _useState = React.useState(false),
|
|
76
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
77
|
+
isPlaying = _useState2[0],
|
|
78
|
+
setIsPlaying = _useState2[1];
|
|
79
|
+
var _useState3 = React.useState(0),
|
|
80
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
81
|
+
duration = _useState4[0],
|
|
82
|
+
setDuration = _useState4[1];
|
|
83
|
+
var _useState5 = React.useState(0),
|
|
84
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
85
|
+
currentTime = _useState6[0],
|
|
86
|
+
setCurrentTime = _useState6[1];
|
|
87
|
+
var _useState7 = React.useState(false),
|
|
88
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
89
|
+
isFinishedPlaying = _useState8[0],
|
|
90
|
+
setIsFinishedPlaying = _useState8[1];
|
|
91
|
+
var animationRef = React.useRef(); // reference the animation
|
|
92
|
+
var _useState9 = React.useState(false),
|
|
93
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
94
|
+
isMuted = _useState10[0],
|
|
95
|
+
setIsMuted = _useState10[1];
|
|
96
|
+
var isStream = audioRef.current && audioRef.current.currentSrc.includes('stream');
|
|
97
|
+
React.useEffect(function () {
|
|
98
|
+
if (currentTime === Number(duration)) {
|
|
99
|
+
// restart()
|
|
100
|
+
setIsFinishedPlaying(true);
|
|
101
|
+
}
|
|
102
|
+
}, [currentTime]);
|
|
103
|
+
var onLoadedMetadata = function onLoadedMetadata() {
|
|
104
|
+
var seconds = Math.floor(audioRef.current.duration);
|
|
105
|
+
setDuration(seconds);
|
|
106
|
+
if (!isStream) {
|
|
107
|
+
progressBarRef.current.max = seconds;
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
var updateCurrentTime = function updateCurrentTime() {
|
|
111
|
+
setCurrentTime(progressBarRef.current.value);
|
|
112
|
+
};
|
|
113
|
+
var whilePlaying = function whilePlaying() {
|
|
114
|
+
if (!isStream) {
|
|
115
|
+
progressBarRef.current.value = Math.floor(audioRef.current.currentTime);
|
|
116
|
+
}
|
|
117
|
+
progressBarRef.current.style.setProperty('--seek-before-width', "".concat(progressBarRef.current.value / duration * 100, "%"));
|
|
118
|
+
updateCurrentTime();
|
|
119
|
+
|
|
120
|
+
// when you reach the end of the song
|
|
121
|
+
if (!isStream && progressBarRef.current.value === duration) {
|
|
122
|
+
// restart()
|
|
123
|
+
setIsFinishedPlaying(true);
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
animationRef.current = window.requestAnimationFrame(whilePlaying);
|
|
127
|
+
};
|
|
128
|
+
var pause = function pause() {
|
|
129
|
+
setIsPlaying(false);
|
|
130
|
+
audioRef.current.pause();
|
|
131
|
+
window.cancelAnimationFrame(animationRef.current);
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
// const restart = () => {
|
|
135
|
+
// progressBarRef.current.value = 0
|
|
136
|
+
// updateCurrentTime()
|
|
137
|
+
// pause()
|
|
138
|
+
// }
|
|
139
|
+
|
|
140
|
+
var play = function play() {
|
|
141
|
+
setIsPlaying(true);
|
|
142
|
+
setIsFinishedPlaying(false);
|
|
143
|
+
audioRef.current.play();
|
|
144
|
+
if (!isStream) {
|
|
145
|
+
animationRef.current = window.requestAnimationFrame(whilePlaying);
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
var toggleMute = function toggleMute() {
|
|
149
|
+
setIsMuted(!isMuted);
|
|
150
|
+
};
|
|
151
|
+
var calculateTime = function calculateTime(secs) {
|
|
152
|
+
var minutes = Math.floor(secs / 60);
|
|
153
|
+
var returnedMinutes = minutes < 10 ? "0".concat(minutes) : "".concat(minutes);
|
|
154
|
+
var seconds = Math.floor(secs % 60);
|
|
155
|
+
var returnedSeconds = seconds < 10 ? "0".concat(seconds) : "".concat(seconds);
|
|
156
|
+
return "".concat(returnedMinutes, ":").concat(returnedSeconds);
|
|
157
|
+
};
|
|
158
|
+
var togglePlaying = function togglePlaying() {
|
|
159
|
+
if (!isPlaying) {
|
|
160
|
+
play();
|
|
161
|
+
} else {
|
|
162
|
+
pause();
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
var changePlayerCurrentTime = function changePlayerCurrentTime() {
|
|
166
|
+
audioRef.current.currentTime = progressBarRef.current.value;
|
|
167
|
+
setCurrentTime(progressBarRef.current.value);
|
|
168
|
+
progressBarRef.current.style.setProperty('--seek-before-width', "".concat(progressBarRef.current.value / duration * 100, "%"));
|
|
169
|
+
};
|
|
170
|
+
var timeTravel = function timeTravel(newTime) {
|
|
171
|
+
progressBarRef.current.value = newTime;
|
|
172
|
+
updateCurrentTime();
|
|
173
|
+
changePlayerCurrentTime();
|
|
174
|
+
};
|
|
175
|
+
var backThirty = function backThirty() {
|
|
176
|
+
timeTravel(Number(progressBarRef.current.value) - 30);
|
|
177
|
+
};
|
|
178
|
+
var forwardThirty = function forwardThirty() {
|
|
179
|
+
timeTravel(Number(progressBarRef.current.value) + 30);
|
|
180
|
+
};
|
|
181
|
+
var volumeControl = function volumeControl(e) {
|
|
182
|
+
var value = e.target.value;
|
|
183
|
+
var volume = value / 100;
|
|
184
|
+
audioRef.current.volume = volume;
|
|
185
|
+
};
|
|
186
|
+
return {
|
|
187
|
+
onLoadedMetadata: onLoadedMetadata,
|
|
188
|
+
calculateTime: calculateTime,
|
|
189
|
+
togglePlaying: togglePlaying,
|
|
190
|
+
changePlayerCurrentTime: changePlayerCurrentTime,
|
|
191
|
+
backThirty: backThirty,
|
|
192
|
+
forwardThirty: forwardThirty,
|
|
193
|
+
play: play,
|
|
194
|
+
pause: pause,
|
|
195
|
+
isPlaying: isPlaying,
|
|
196
|
+
isFinishedPlaying: isFinishedPlaying,
|
|
197
|
+
currentTime: currentTime,
|
|
198
|
+
duration: duration,
|
|
199
|
+
volumeCtrl: volumeCtrl,
|
|
200
|
+
volumeControl: volumeControl,
|
|
201
|
+
toggleMute: toggleMute,
|
|
202
|
+
isMuted: isMuted
|
|
203
|
+
};
|
|
204
|
+
};
|
|
205
|
+
|
|
206
|
+
var Play = function Play() {
|
|
207
|
+
return /*#__PURE__*/React__default.createElement("svg", {
|
|
208
|
+
stroke: "currentColor",
|
|
209
|
+
fill: "currentColor",
|
|
210
|
+
strokeWidth: "0",
|
|
211
|
+
viewBox: "0 0 448 512",
|
|
212
|
+
className: "play",
|
|
213
|
+
height: "1em",
|
|
214
|
+
width: "1em",
|
|
215
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
216
|
+
}, /*#__PURE__*/React__default.createElement("path", {
|
|
217
|
+
d: "M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"
|
|
218
|
+
}));
|
|
219
|
+
};
|
|
220
|
+
|
|
221
|
+
var Pause = function Pause() {
|
|
222
|
+
return /*#__PURE__*/React__default.createElement("svg", {
|
|
223
|
+
stroke: "currentColor",
|
|
224
|
+
fill: "currentColor",
|
|
225
|
+
strokeWidth: "0",
|
|
226
|
+
viewBox: "0 0 448 512",
|
|
227
|
+
height: "1em",
|
|
228
|
+
width: "1em",
|
|
229
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
230
|
+
}, /*#__PURE__*/React__default.createElement("path", {
|
|
231
|
+
d: "M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z"
|
|
232
|
+
}));
|
|
233
|
+
};
|
|
234
|
+
|
|
235
|
+
var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
|
|
236
|
+
var _props$audioPlayerRef, _props$progressBarRef;
|
|
237
|
+
// references
|
|
238
|
+
var audioPlayerRef = (_props$audioPlayerRef = props.audioPlayerRef) !== null && _props$audioPlayerRef !== void 0 ? _props$audioPlayerRef : React.useRef(); // reference our audio component
|
|
239
|
+
var progressBarRef = (_props$progressBarRef = props.progressBarRef) !== null && _props$progressBarRef !== void 0 ? _props$progressBarRef : React.useRef(); // reference our progress bar
|
|
240
|
+
|
|
241
|
+
var customStyles = props ? props.style : '';
|
|
242
|
+
var title = props.title,
|
|
243
|
+
description = props.description,
|
|
244
|
+
audioSrc = props.audioSrc,
|
|
245
|
+
volumeCtrl = props.volumeCtrl,
|
|
246
|
+
playBtnClass = props.playBtnClass,
|
|
247
|
+
customHtml = props.customHtml,
|
|
248
|
+
isLive = props.isLive,
|
|
249
|
+
onLoadedMetadata = props.onLoadedMetadata,
|
|
250
|
+
calculateTime = props.calculateTime,
|
|
251
|
+
togglePlaying = props.togglePlaying,
|
|
252
|
+
changePlayerCurrentTime = props.changePlayerCurrentTime,
|
|
253
|
+
isPlaying = props.isPlaying,
|
|
254
|
+
currentTime = props.currentTime,
|
|
255
|
+
duration = props.duration,
|
|
256
|
+
volumeControl = props.volumeControl,
|
|
257
|
+
toggleMute = props.toggleMute,
|
|
258
|
+
isMuted = props.isMuted;
|
|
259
|
+
return audioSrc && /*#__PURE__*/React__default.createElement("div", {
|
|
260
|
+
className: "audioPlayer",
|
|
261
|
+
style: customStyles && customStyles.audioPlayer
|
|
262
|
+
}, /*#__PURE__*/React__default.createElement("audio", {
|
|
263
|
+
ref: audioPlayerRef,
|
|
264
|
+
src: audioSrc,
|
|
265
|
+
preload: "metadata",
|
|
266
|
+
onLoadedMetadata: onLoadedMetadata,
|
|
267
|
+
muted: isMuted
|
|
268
|
+
}), /*#__PURE__*/React__default.createElement("div", {
|
|
269
|
+
className: "player-layout"
|
|
270
|
+
}, volumeCtrl && /*#__PURE__*/React__default.createElement("div", {
|
|
271
|
+
className: "player-controls-secondary-outer"
|
|
272
|
+
}, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("span", {
|
|
273
|
+
className: "player-volume-text"
|
|
274
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
275
|
+
className: "player-volume-icon"
|
|
276
|
+
}, /*#__PURE__*/React__default.createElement("button", {
|
|
277
|
+
onClick: toggleMute,
|
|
278
|
+
"aria-label": isMuted === true ? 'Muted' : 'Not Muted',
|
|
279
|
+
title: isMuted === true ? 'Muted' : 'Not Muted'
|
|
280
|
+
}, !isMuted ? /*#__PURE__*/React__default.createElement("img", {
|
|
281
|
+
src: "/img/icon-volume-low.svg",
|
|
282
|
+
alt: "Volume Button"
|
|
283
|
+
}) : /*#__PURE__*/React__default.createElement("img", {
|
|
284
|
+
src: "/img/icon-volume-mute.svg",
|
|
285
|
+
alt: "Volume Mute Button"
|
|
286
|
+
}))), /*#__PURE__*/React__default.createElement("span", null, "Volume")), /*#__PURE__*/React__default.createElement("div", {
|
|
287
|
+
className: "player-controls player-controls-secondary"
|
|
288
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
289
|
+
className: "player-volume"
|
|
290
|
+
}, /*#__PURE__*/React__default.createElement("input", {
|
|
291
|
+
id: "player-volume",
|
|
292
|
+
type: "range",
|
|
293
|
+
className: "player-timeline-progress js-player-volume-current",
|
|
294
|
+
min: 0,
|
|
295
|
+
max: 100,
|
|
296
|
+
"aria-hidden": "true",
|
|
297
|
+
onChange: function onChange(e) {
|
|
298
|
+
return volumeControl(e);
|
|
299
|
+
}
|
|
300
|
+
}))))), /*#__PURE__*/React__default.createElement("div", {
|
|
301
|
+
className: "player-controls"
|
|
302
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
303
|
+
className: "player-btn-play-pause-outer"
|
|
304
|
+
}, /*#__PURE__*/React__default.createElement("button", {
|
|
305
|
+
onClick: togglePlaying,
|
|
306
|
+
className: playBtnClass,
|
|
307
|
+
style: customStyles && customStyles.playPause
|
|
308
|
+
}, isPlaying ? /*#__PURE__*/React__default.createElement(Pause, null) : /*#__PURE__*/React__default.createElement(Play, null)))), customHtml && customHtml, !isLive && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
|
309
|
+
className: "player-currentTime"
|
|
310
|
+
}, calculateTime(currentTime)), /*#__PURE__*/React__default.createElement("div", {
|
|
311
|
+
className: "player-timeline"
|
|
312
|
+
}, /*#__PURE__*/React__default.createElement("input", {
|
|
313
|
+
type: "range",
|
|
314
|
+
className: "player-timeline-progress",
|
|
315
|
+
defaultValue: "0",
|
|
316
|
+
"aria-hidden": "true",
|
|
317
|
+
ref: progressBarRef,
|
|
318
|
+
onChange: changePlayerCurrentTime
|
|
319
|
+
})), /*#__PURE__*/React__default.createElement("div", {
|
|
320
|
+
className: "player-duration",
|
|
321
|
+
style: customStyles && customStyles.duration
|
|
322
|
+
}, duration && !isNaN(duration) && calculateTime(duration))), /*#__PURE__*/React__default.createElement("div", {
|
|
323
|
+
className: "player-content"
|
|
324
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
325
|
+
className: "player-audio-type type-sm"
|
|
326
|
+
}, isLive ? /*#__PURE__*/React__default.createElement("div", {
|
|
327
|
+
className: "player-live-label"
|
|
328
|
+
}, "On Air") : /*#__PURE__*/React__default.createElement("div", {
|
|
329
|
+
className: "player-title"
|
|
330
|
+
}, " ", title || '', " "), /*#__PURE__*/React__default.createElement("div", {
|
|
331
|
+
className: "player-description"
|
|
332
|
+
}, description || '', " ")))));
|
|
333
|
+
};
|
|
334
|
+
|
|
335
|
+
var ReactAudioPlayer = function ReactAudioPlayer(props) {
|
|
336
|
+
var _props$audioPlayerRef, _props$progressBarRef;
|
|
337
|
+
// references
|
|
338
|
+
var audioPlayerRef = (_props$audioPlayerRef = props.audioPlayerRef) !== null && _props$audioPlayerRef !== void 0 ? _props$audioPlayerRef : React.useRef(); // reference our audio component
|
|
339
|
+
var progressBarRef = (_props$progressBarRef = props.progressBarRef) !== null && _props$progressBarRef !== void 0 ? _props$progressBarRef : React.useRef(); // reference our progress bar
|
|
340
|
+
|
|
341
|
+
var customStyles = props ? props.style : '';
|
|
342
|
+
|
|
343
|
+
// hooks
|
|
344
|
+
var _useAudioPlayer = useAudioPlayer(audioPlayerRef, progressBarRef),
|
|
345
|
+
onLoadedMetadata = _useAudioPlayer.onLoadedMetadata,
|
|
346
|
+
calculateTime = _useAudioPlayer.calculateTime,
|
|
347
|
+
togglePlaying = _useAudioPlayer.togglePlaying,
|
|
348
|
+
changePlayerCurrentTime = _useAudioPlayer.changePlayerCurrentTime,
|
|
349
|
+
isPlaying = _useAudioPlayer.isPlaying,
|
|
350
|
+
currentTime = _useAudioPlayer.currentTime,
|
|
351
|
+
duration = _useAudioPlayer.duration,
|
|
352
|
+
volumeControl = _useAudioPlayer.volumeControl,
|
|
353
|
+
toggleMute = _useAudioPlayer.toggleMute,
|
|
354
|
+
isMuted = _useAudioPlayer.isMuted;
|
|
355
|
+
return /*#__PURE__*/React__default.createElement(ReactAudioPlayerInner, _extends({}, props, {
|
|
356
|
+
audioPlayerRef: audioPlayerRef,
|
|
357
|
+
progressBarRef: progressBarRef,
|
|
358
|
+
customStyles: customStyles,
|
|
359
|
+
onLoadedMetadata: onLoadedMetadata,
|
|
360
|
+
calculateTime: calculateTime,
|
|
361
|
+
togglePlaying: togglePlaying,
|
|
362
|
+
changePlayerCurrentTime: changePlayerCurrentTime,
|
|
363
|
+
isPlaying: isPlaying,
|
|
364
|
+
currentTime: currentTime,
|
|
365
|
+
duration: duration,
|
|
366
|
+
volumeControl: volumeControl,
|
|
367
|
+
toggleMute: toggleMute,
|
|
368
|
+
isMuted: isMuted
|
|
369
|
+
}));
|
|
370
|
+
};
|
|
371
|
+
|
|
372
|
+
exports.ReactAudioPlayer = ReactAudioPlayer;
|
|
373
|
+
exports.ReactAudioPlayerInner = ReactAudioPlayerInner;
|
|
374
|
+
exports.useAudioPlayer = useAudioPlayer;
|