apm-react-audio-player 1.1.2 → 1.2.0

package/dist/index.js

@@ -27,15 +27,15 @@ function _iterableToArrayLimit(r, l) {
       i,
       u,
       a = [],
-      f = !0,
-      o = !1;
+      f = true,
+      o = false;
     try {
       if (i = (t = t.call(r)).next, 0 === l) {
         if (Object(t) !== t) return;
         f = !1;
       } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
     } catch (r) {
-      o = !0, n = r;
+      o = true, n = r;
     } finally {
       try {
         if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
@@ -91,9 +91,13 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     }
   }, [currentTime]);
   React.useEffect(function () {
-    // Cancel RAF loop if duration changes to Infinity (live stream metadata loaded)
-    if (duration === Infinity && animationRef.current) {
+    if (duration === Infinity) {
+      // Cancel RAF loop for live streams
+      if (animationRef.current) window.cancelAnimationFrame(animationRef.current);
+    } else if (duration && !isNaN(duration) && progressBarRef.current && audioRef.current && !audioRef.current.paused) {
+      // play() was called before metadata loaded — progressBarRef is now mounted, start loop
       window.cancelAnimationFrame(animationRef.current);
+      animationRef.current = window.requestAnimationFrame(_whilePlaying);
     }
   }, [duration]);
   var onLoadedMetadata = function onLoadedMetadata() {
@@ -319,7 +323,7 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
   // references
   var audioPlayerRef = (_props$audioPlayerRef = props.audioPlayerRef) !== null && _props$audioPlayerRef !== void 0 ? _props$audioPlayerRef : React.useRef(); // reference our audio component
   var progressBarRef = (_props$progressBarRef = props.progressBarRef) !== null && _props$progressBarRef !== void 0 ? _props$progressBarRef : React.useRef(); // reference our progress bar
-
+  var hasInitializedRef = React.useRef(false);
   var customStyles = props ? props.style : '';
   var title = props.title,
     audioSrc = props.audioSrc,
@@ -345,16 +349,23 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
   var audioDuration = duration && !isNaN(duration) && calculateTime(duration);
   var formatDuration = duration && !isNaN(duration) && audioDuration && formatCalculateTime(audioDuration);
 
-  // Reload audio when audioSrc changes
-  // Use JSON.stringify to handle array comparisons by value instead of reference
+  // Reload audio when audioSrc changes.
+  // Skip load() on initial mount — calling it pre-buffers live streams so that
+  // by the time the user clicks play the seekable window has advanced and
+  // segments are stale. On first play the browser fetches the live edge
+  // naturally. On subsequent src changes we do call load() to reset the element.
+  // Use JSON.stringify to handle array comparisons by value instead of reference.
   React.useEffect(function () {
     if (audioPlayerRef.current && audioSrc) {
-      resetDuration === null || resetDuration === void 0 ? void 0 : resetDuration();
-      try {
-        audioPlayerRef.current.load();
-      } catch (err) {
-        console.warn('Failed to reload audio source:', err);
+      if (hasInitializedRef.current) {
+        resetDuration === null || resetDuration === void 0 ? void 0 : resetDuration();
+        try {
+          audioPlayerRef.current.load();
+        } catch (err) {
+          console.warn('Failed to reload audio source:', err);
+        }
       }
+      hasInitializedRef.current = true;
     }
   }, [JSON.stringify(audioSrc)]);
 

package/dist/index.modern.js

@@ -25,15 +25,15 @@ function _iterableToArrayLimit(r, l) {
       i,
       u,
       a = [],
-      f = !0,
-      o = !1;
+      f = true,
+      o = false;
     try {
       if (i = (t = t.call(r)).next, 0 === l) {
         if (Object(t) !== t) return;
         f = !1;
       } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
     } catch (r) {
-      o = !0, n = r;
+      o = true, n = r;
     } finally {
       try {
         if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
@@ -89,9 +89,13 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     }
   }, [currentTime]);
   useEffect(function () {
-    // Cancel RAF loop if duration changes to Infinity (live stream metadata loaded)
-    if (duration === Infinity && animationRef.current) {
+    if (duration === Infinity) {
+      // Cancel RAF loop for live streams
+      if (animationRef.current) window.cancelAnimationFrame(animationRef.current);
+    } else if (duration && !isNaN(duration) && progressBarRef.current && audioRef.current && !audioRef.current.paused) {
+      // play() was called before metadata loaded — progressBarRef is now mounted, start loop
       window.cancelAnimationFrame(animationRef.current);
+      animationRef.current = window.requestAnimationFrame(_whilePlaying);
     }
   }, [duration]);
   var onLoadedMetadata = function onLoadedMetadata() {
@@ -317,7 +321,7 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
   // references
   var audioPlayerRef = (_props$audioPlayerRef = props.audioPlayerRef) !== null && _props$audioPlayerRef !== void 0 ? _props$audioPlayerRef : useRef(); // reference our audio component
   var progressBarRef = (_props$progressBarRef = props.progressBarRef) !== null && _props$progressBarRef !== void 0 ? _props$progressBarRef : useRef(); // reference our progress bar
-
+  var hasInitializedRef = useRef(false);
   var customStyles = props ? props.style : '';
   var title = props.title,
     audioSrc = props.audioSrc,
@@ -343,16 +347,23 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
   var audioDuration = duration && !isNaN(duration) && calculateTime(duration);
   var formatDuration = duration && !isNaN(duration) && audioDuration && formatCalculateTime(audioDuration);
 
-  // Reload audio when audioSrc changes
-  // Use JSON.stringify to handle array comparisons by value instead of reference
+  // Reload audio when audioSrc changes.
+  // Skip load() on initial mount — calling it pre-buffers live streams so that
+  // by the time the user clicks play the seekable window has advanced and
+  // segments are stale. On first play the browser fetches the live edge
+  // naturally. On subsequent src changes we do call load() to reset the element.
+  // Use JSON.stringify to handle array comparisons by value instead of reference.
   useEffect(function () {
     if (audioPlayerRef.current && audioSrc) {
-      resetDuration === null || resetDuration === void 0 ? void 0 : resetDuration();
-      try {
-        audioPlayerRef.current.load();
-      } catch (err) {
-        console.warn('Failed to reload audio source:', err);
+      if (hasInitializedRef.current) {
+        resetDuration === null || resetDuration === void 0 ? void 0 : resetDuration();
+        try {
+          audioPlayerRef.current.load();
+        } catch (err) {
+          console.warn('Failed to reload audio source:', err);
+        }
       }
+      hasInitializedRef.current = true;
     }
   }, [JSON.stringify(audioSrc)]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apm-react-audio-player",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "author": "Jason Phan <jphan@mpr.org>",
   "license": "MIT",
   "private": false,