apm-react-audio-player 1.1.1 → 1.1.3

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.
Files changed (3) hide show
  1. package/dist/index.js +21 -5
  2. package/dist/index.modern.js +21 -5
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -91,9 +91,13 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
91
91
  }
92
92
  }, [currentTime]);
93
93
  React.useEffect(function () {
94
- // Cancel RAF loop if duration changes to Infinity (live stream metadata loaded)
95
- if (duration === Infinity && animationRef.current) {
94
+ if (duration === Infinity) {
95
+ // Cancel RAF loop for live streams
96
+ if (animationRef.current) window.cancelAnimationFrame(animationRef.current);
97
+ } else if (duration && !isNaN(duration) && progressBarRef.current && audioRef.current && !audioRef.current.paused) {
98
+ // play() was called before metadata loaded — progressBarRef is now mounted, start loop
96
99
  window.cancelAnimationFrame(animationRef.current);
100
+ animationRef.current = window.requestAnimationFrame(_whilePlaying);
97
101
  }
98
102
  }, [duration]);
99
103
  var onLoadedMetadata = function onLoadedMetadata() {
@@ -104,6 +108,13 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
104
108
  progressBarRef.current.max = seconds;
105
109
  }
106
110
  };
111
+ var resetDuration = function resetDuration() {
112
+ setDuration(undefined);
113
+ setCurrentTime(0);
114
+ if (progressBarRef.current) {
115
+ progressBarRef.current.value = 0;
116
+ }
117
+ };
107
118
  var updateCurrentTime = function updateCurrentTime() {
108
119
  if (progressBarRef.current) {
109
120
  setCurrentTime(progressBarRef.current.value);
@@ -114,9 +125,10 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
114
125
  if (!progressBarRef.current || !audioRef.current) {
115
126
  return;
116
127
  }
117
- if (audioRef.current.duration !== Infinity) {
128
+ var liveDuration = audioRef.current.duration;
129
+ if (liveDuration !== Infinity) {
118
130
  progressBarRef.current.value = Math.floor(audioRef.current.currentTime);
119
- progressBarRef.current.style.setProperty('--seek-before-width', "".concat(progressBarRef.current.value / duration * 100, "%"));
131
+ progressBarRef.current.style.setProperty('--seek-before-width', liveDuration > 0 ? "".concat(progressBarRef.current.value / liveDuration * 100, "%") : '0%');
120
132
  }
121
133
  updateCurrentTime();
122
134
 
@@ -183,7 +195,8 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
183
195
  if (!progressBarRef.current || !audioRef.current) return;
184
196
  audioRef.current.currentTime = progressBarRef.current.value;
185
197
  setCurrentTime(progressBarRef.current.value);
186
- progressBarRef.current.style.setProperty('--seek-before-width', "".concat(progressBarRef.current.value / duration * 100, "%"));
198
+ var liveDuration = audioRef.current.duration;
199
+ progressBarRef.current.style.setProperty('--seek-before-width', liveDuration > 0 ? "".concat(progressBarRef.current.value / liveDuration * 100, "%") : '0%');
187
200
  };
188
201
  var changeRange = function changeRange() {
189
202
  if (!progressBarRef.current || !audioRef.current) return;
@@ -226,6 +239,7 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
226
239
  };
227
240
  return {
228
241
  onLoadedMetadata: onLoadedMetadata,
242
+ resetDuration: resetDuration,
229
243
  calculateTime: calculateTime,
230
244
  togglePlaying: togglePlaying,
231
245
  changePlayerCurrentTime: changePlayerCurrentTime,
@@ -317,6 +331,7 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
317
331
  playBtnClass = props.playBtnClass,
318
332
  customHtml = props.customHtml,
319
333
  onLoadedMetadata = props.onLoadedMetadata,
334
+ resetDuration = props.resetDuration,
320
335
  calculateTime = props.calculateTime,
321
336
  togglePlaying = props.togglePlaying,
322
337
  changePlayerCurrentTime = props.changePlayerCurrentTime,
@@ -338,6 +353,7 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
338
353
  // Use JSON.stringify to handle array comparisons by value instead of reference
339
354
  React.useEffect(function () {
340
355
  if (audioPlayerRef.current && audioSrc) {
356
+ resetDuration === null || resetDuration === void 0 ? void 0 : resetDuration();
341
357
  try {
342
358
  audioPlayerRef.current.load();
343
359
  } catch (err) {
package/dist/index.modern.js CHANGED
@@ -89,9 +89,13 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
89
89
  }
90
90
  }, [currentTime]);
91
91
  useEffect(function () {
92
- // Cancel RAF loop if duration changes to Infinity (live stream metadata loaded)
93
- if (duration === Infinity && animationRef.current) {
92
+ if (duration === Infinity) {
93
+ // Cancel RAF loop for live streams
94
+ if (animationRef.current) window.cancelAnimationFrame(animationRef.current);
95
+ } else if (duration && !isNaN(duration) && progressBarRef.current && audioRef.current && !audioRef.current.paused) {
96
+ // play() was called before metadata loaded — progressBarRef is now mounted, start loop
94
97
  window.cancelAnimationFrame(animationRef.current);
98
+ animationRef.current = window.requestAnimationFrame(_whilePlaying);
95
99
  }
96
100
  }, [duration]);
97
101
  var onLoadedMetadata = function onLoadedMetadata() {
@@ -102,6 +106,13 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
102
106
  progressBarRef.current.max = seconds;
103
107
  }
104
108
  };
109
+ var resetDuration = function resetDuration() {
110
+ setDuration(undefined);
111
+ setCurrentTime(0);
112
+ if (progressBarRef.current) {
113
+ progressBarRef.current.value = 0;
114
+ }
115
+ };
105
116
  var updateCurrentTime = function updateCurrentTime() {
106
117
  if (progressBarRef.current) {
107
118
  setCurrentTime(progressBarRef.current.value);
@@ -112,9 +123,10 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
112
123
  if (!progressBarRef.current || !audioRef.current) {
113
124
  return;
114
125
  }
115
- if (audioRef.current.duration !== Infinity) {
126
+ var liveDuration = audioRef.current.duration;
127
+ if (liveDuration !== Infinity) {
116
128
  progressBarRef.current.value = Math.floor(audioRef.current.currentTime);
117
- progressBarRef.current.style.setProperty('--seek-before-width', "".concat(progressBarRef.current.value / duration * 100, "%"));
129
+ progressBarRef.current.style.setProperty('--seek-before-width', liveDuration > 0 ? "".concat(progressBarRef.current.value / liveDuration * 100, "%") : '0%');
118
130
  }
119
131
  updateCurrentTime();
120
132
 
@@ -181,7 +193,8 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
181
193
  if (!progressBarRef.current || !audioRef.current) return;
182
194
  audioRef.current.currentTime = progressBarRef.current.value;
183
195
  setCurrentTime(progressBarRef.current.value);
184
- progressBarRef.current.style.setProperty('--seek-before-width', "".concat(progressBarRef.current.value / duration * 100, "%"));
196
+ var liveDuration = audioRef.current.duration;
197
+ progressBarRef.current.style.setProperty('--seek-before-width', liveDuration > 0 ? "".concat(progressBarRef.current.value / liveDuration * 100, "%") : '0%');
185
198
  };
186
199
  var changeRange = function changeRange() {
187
200
  if (!progressBarRef.current || !audioRef.current) return;
@@ -224,6 +237,7 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
224
237
  };
225
238
  return {
226
239
  onLoadedMetadata: onLoadedMetadata,
240
+ resetDuration: resetDuration,
227
241
  calculateTime: calculateTime,
228
242
  togglePlaying: togglePlaying,
229
243
  changePlayerCurrentTime: changePlayerCurrentTime,
@@ -315,6 +329,7 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
315
329
  playBtnClass = props.playBtnClass,
316
330
  customHtml = props.customHtml,
317
331
  onLoadedMetadata = props.onLoadedMetadata,
332
+ resetDuration = props.resetDuration,
318
333
  calculateTime = props.calculateTime,
319
334
  togglePlaying = props.togglePlaying,
320
335
  changePlayerCurrentTime = props.changePlayerCurrentTime,
@@ -336,6 +351,7 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
336
351
  // Use JSON.stringify to handle array comparisons by value instead of reference
337
352
  useEffect(function () {
338
353
  if (audioPlayerRef.current && audioSrc) {
354
+ resetDuration === null || resetDuration === void 0 ? void 0 : resetDuration();
339
355
  try {
340
356
  audioPlayerRef.current.load();
341
357
  } catch (err) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "apm-react-audio-player",
3
- "version": "1.1.1",
3
+ "version": "1.1.3",
4
4
  "author": "Jason Phan <jphan@mpr.org>",
5
5
  "license": "MIT",
6
6
  "private": false,