apm-react-audio-player 1.1.0 → 1.1.2

package/dist/index.js

@@ -27,15 +27,15 @@ function _iterableToArrayLimit(r, l) {
       i,
       u,
       a = [],
-      f = true,
-      o = false;
+      f = !0,
+      o = !1;
     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 = true, n = r;
+      o = !0, n = r;
     } finally {
       try {
         if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
@@ -104,6 +104,13 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
       progressBarRef.current.max = seconds;
     }
   };
+  var resetDuration = function resetDuration() {
+    setDuration(undefined);
+    setCurrentTime(0);
+    if (progressBarRef.current) {
+      progressBarRef.current.value = 0;
+    }
+  };
   var updateCurrentTime = function updateCurrentTime() {
     if (progressBarRef.current) {
       setCurrentTime(progressBarRef.current.value);
@@ -114,9 +121,10 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     if (!progressBarRef.current || !audioRef.current) {
       return;
     }
-    if (audioRef.current.duration !== Infinity) {
+    var liveDuration = audioRef.current.duration;
+    if (liveDuration !== Infinity) {
       progressBarRef.current.value = Math.floor(audioRef.current.currentTime);
-      progressBarRef.current.style.setProperty('--seek-before-width', "".concat(progressBarRef.current.value / duration * 100, "%"));
+      progressBarRef.current.style.setProperty('--seek-before-width', liveDuration > 0 ? "".concat(progressBarRef.current.value / liveDuration * 100, "%") : '0%');
     }
     updateCurrentTime();
 
@@ -143,6 +151,17 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
   var play = function play() {
     setIsPlaying(true);
     setIsFinishedPlaying(false);
+
+    // For live streams (duration === Infinity), reset the audio element before
+    // playing. The audioSrc useEffect in ReactAudioPlayerInner calls load() on
+    // mount, which causes the browser to pre-buffer the HLS stream. By the time
+    // the user clicks play the manifest's seekable window has moved forward and
+    // old segments are gone, so the browser auto-seeks to the earliest available
+    // position (e.g. 20s in), causing ads to start mid-stream. Calling load()
+    // here reconnects to the current live edge and gets a fresh manifest.
+    if (duration === Infinity) {
+      audioRef.current.load();
+    }
     audioRef.current.play();
 
     // Only start RAF loop for non-live streams with valid duration
@@ -172,7 +191,8 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     if (!progressBarRef.current || !audioRef.current) return;
     audioRef.current.currentTime = progressBarRef.current.value;
     setCurrentTime(progressBarRef.current.value);
-    progressBarRef.current.style.setProperty('--seek-before-width', "".concat(progressBarRef.current.value / duration * 100, "%"));
+    var liveDuration = audioRef.current.duration;
+    progressBarRef.current.style.setProperty('--seek-before-width', liveDuration > 0 ? "".concat(progressBarRef.current.value / liveDuration * 100, "%") : '0%');
   };
   var changeRange = function changeRange() {
     if (!progressBarRef.current || !audioRef.current) return;
@@ -215,6 +235,7 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
   };
   return {
     onLoadedMetadata: onLoadedMetadata,
+    resetDuration: resetDuration,
     calculateTime: calculateTime,
     togglePlaying: togglePlaying,
     changePlayerCurrentTime: changePlayerCurrentTime,
@@ -306,6 +327,7 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     playBtnClass = props.playBtnClass,
     customHtml = props.customHtml,
     onLoadedMetadata = props.onLoadedMetadata,
+    resetDuration = props.resetDuration,
     calculateTime = props.calculateTime,
     togglePlaying = props.togglePlaying,
     changePlayerCurrentTime = props.changePlayerCurrentTime,
@@ -327,6 +349,7 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
   // 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) {

package/dist/index.modern.js

@@ -25,15 +25,15 @@ function _iterableToArrayLimit(r, l) {
       i,
       u,
       a = [],
-      f = true,
-      o = false;
+      f = !0,
+      o = !1;
     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 = true, n = r;
+      o = !0, n = r;
     } finally {
       try {
         if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
@@ -102,6 +102,13 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
       progressBarRef.current.max = seconds;
     }
   };
+  var resetDuration = function resetDuration() {
+    setDuration(undefined);
+    setCurrentTime(0);
+    if (progressBarRef.current) {
+      progressBarRef.current.value = 0;
+    }
+  };
   var updateCurrentTime = function updateCurrentTime() {
     if (progressBarRef.current) {
       setCurrentTime(progressBarRef.current.value);
@@ -112,9 +119,10 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     if (!progressBarRef.current || !audioRef.current) {
       return;
     }
-    if (audioRef.current.duration !== Infinity) {
+    var liveDuration = audioRef.current.duration;
+    if (liveDuration !== Infinity) {
       progressBarRef.current.value = Math.floor(audioRef.current.currentTime);
-      progressBarRef.current.style.setProperty('--seek-before-width', "".concat(progressBarRef.current.value / duration * 100, "%"));
+      progressBarRef.current.style.setProperty('--seek-before-width', liveDuration > 0 ? "".concat(progressBarRef.current.value / liveDuration * 100, "%") : '0%');
     }
     updateCurrentTime();
 
@@ -141,6 +149,17 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
   var play = function play() {
     setIsPlaying(true);
     setIsFinishedPlaying(false);
+
+    // For live streams (duration === Infinity), reset the audio element before
+    // playing. The audioSrc useEffect in ReactAudioPlayerInner calls load() on
+    // mount, which causes the browser to pre-buffer the HLS stream. By the time
+    // the user clicks play the manifest's seekable window has moved forward and
+    // old segments are gone, so the browser auto-seeks to the earliest available
+    // position (e.g. 20s in), causing ads to start mid-stream. Calling load()
+    // here reconnects to the current live edge and gets a fresh manifest.
+    if (duration === Infinity) {
+      audioRef.current.load();
+    }
     audioRef.current.play();
 
     // Only start RAF loop for non-live streams with valid duration
@@ -170,7 +189,8 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     if (!progressBarRef.current || !audioRef.current) return;
     audioRef.current.currentTime = progressBarRef.current.value;
     setCurrentTime(progressBarRef.current.value);
-    progressBarRef.current.style.setProperty('--seek-before-width', "".concat(progressBarRef.current.value / duration * 100, "%"));
+    var liveDuration = audioRef.current.duration;
+    progressBarRef.current.style.setProperty('--seek-before-width', liveDuration > 0 ? "".concat(progressBarRef.current.value / liveDuration * 100, "%") : '0%');
   };
   var changeRange = function changeRange() {
     if (!progressBarRef.current || !audioRef.current) return;
@@ -213,6 +233,7 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
   };
   return {
     onLoadedMetadata: onLoadedMetadata,
+    resetDuration: resetDuration,
     calculateTime: calculateTime,
     togglePlaying: togglePlaying,
     changePlayerCurrentTime: changePlayerCurrentTime,
@@ -304,6 +325,7 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     playBtnClass = props.playBtnClass,
     customHtml = props.customHtml,
     onLoadedMetadata = props.onLoadedMetadata,
+    resetDuration = props.resetDuration,
     calculateTime = props.calculateTime,
     togglePlaying = props.togglePlaying,
     changePlayerCurrentTime = props.changePlayerCurrentTime,
@@ -325,6 +347,7 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
   // 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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apm-react-audio-player",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "author": "Jason Phan <jphan@mpr.org>",
   "license": "MIT",
   "private": false,
@@ -27,9 +27,6 @@
     "prettier:fix": "prettier --check '**/**.js' --write",
     "clean": "rm -rf node_modules dist package-lock.json yarn.lock"
   },
-  "assert": {
-    "type": "json"
-  },
   "peerDependencies": {
     "react": "^16.0.0"
   },
@@ -85,6 +82,8 @@
   ],
   "jest": {
     "testEnvironment": "jsdom",
-    "setupFilesAfterEnv": ["<rootDir>/jest.setup.js"]
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.js"
+    ]
   }
 }