apm-react-audio-player 1.0.27 → 1.1.1

package/README.md

@@ -21,7 +21,21 @@ The library was designed to add a audio player to a body of a story which will n
   - [Props](#props)
   - [Example](#example)
 
-[License] (#License)
+[Breaking Changes](#breaking-changes)
+
+[HLS Support](#hls-support)
+  - [Browser Compatibility](#browser-compatibility)
+  - [HLS Usage Examples](#hls-usage-examples)
+  - [Live Stream Detection](#live-stream-detection)
+  - [Supported Audio Formats](#supported-audio-formats)
+
+[Examples](#examples)
+  - [Running the Examples](#running-the-examples)
+  - [Building the Examples](#building-the-examples)
+
+[Publishing](#publishing)
+
+[License](#license)
 
 
 ## Dependencies
@@ -67,7 +81,7 @@ See the [audio tag documentation](https://developer.mozilla.org/en-US/docs/Web/H
 Prop | Type | Default | Notes
 --- | --- | --- | ---
 `title` | String | *empty string* | The title of the audio track
-`audioSrc` | String | *empty string* | The source URL of the audio file
+`audioSrc` | String or Array | *empty string* | **String:** Single audio source URL<br>**Array:** Multiple source URLs for progressive enhancement (e.g., `['stream.m3u8', 'audio.aac', 'audio.mp3']`)
 `description` | String | *empty string* | The description of the audio track
 `audioPlayerRef` | Object | *empty object* | A ref object for the audio player
 `progressBarRef` | Object | *empty object* | A ref object for the progress bar
@@ -76,7 +90,8 @@ Prop | Type | Default | Notes
 `isPlaying` | Boolean | false | Whether the audio is currently playing
 `isMuted` | Boolean | false | Whether the audio is currently muted
 `toggleMute` | Function | --- | A function to toggle the mute state
-`volumeCtrl` | Function | --- | A function to control the volume
+`volumeCtrl` | Boolean | false | Whether to show volume controls
+`volumeControl` | Function | --- | A function to handle volume changes
 `currentTime` | Number | null | The current time of the audio track
 `duration` | Number | null | The duration of the audio track
 `rewindControl` | Function | --- | A function to rewind the audio track
@@ -133,7 +148,8 @@ const Example = () => {
         duration={duration}
         isAudioFinished={isFinishedPlaying}
         toggleMute={toggleMute}
-        volumeCtrl={volumeControl}
+        volumeCtrl={true}
+        volumeControl={volumeControl}
         changePlayerCurrentTime={changePlayerCurrentTime}
         rewindControl={rewindControl}
         forwardControl={forwardControl}
@@ -145,6 +161,169 @@ const Example = () => {
 }
 ```
 
+## Breaking Changes
+
+### Version 1.0.29+
+
+**Removed `isLive` prop:** The `isLive` prop has been removed from `ReactAudioPlayerInner`. Live stream detection is now **automatic** based on the HTML5 audio `duration` property.
+
+- **Old behavior:** You had to manually pass `isLive={true}` for live streams
+- **New behavior:** The player automatically detects live streams when `duration === Infinity`
+
+**Migration:**
+```javascript
+// ❌ Old - Remove the isLive prop
+<ReactAudioPlayerInner
+  audioSrc="https://example.com/live.m3u8"
+  isLive={true}  // <-- Remove this
+  // ... other props
+/>
+
+// ✅ New - Detection is automatic
+<ReactAudioPlayerInner
+  audioSrc="https://example.com/live.m3u8"
+  // ... other props
+/>
+```
+
+The UI will automatically adapt based on the audio metadata - no manual configuration needed.
+
+## HLS Support
+
+The audio player now supports HLS (HTTP Live Streaming) for both live streams and pre-recorded content using native browser support. The player uses HTML5 `<source>` tags for progressive enhancement, allowing browsers to fall back to alternate formats if HLS is not supported.
+
+### Browser Compatibility
+
+| Browser | HLS Support | Fallback Behavior |
+|---------|------------|-------------------|
+| Safari 11+ | Native ✓ | N/A |
+| iOS Safari | Native ✓ | N/A |
+| Chrome 142+ | Native ✓ | N/A |
+| Edge 142+ | Native ✓ | N/A |
+| Mobile Chrome/Android | Native ✓ | N/A |
+| Chrome <142 | None | Automatically uses AAC/MP3 |
+| Firefox | None | Automatically uses AAC/MP3 |
+| Edge <142 | None | Automatically uses AAC/MP3 |
+| Safari <11 | None | Automatically uses AAC/MP3 |
+
+**Note:** Chrome and Edge added native HLS support in version 142 (December 2024). Older versions will automatically skip HLS sources and use alternative formats.
+
+### HLS Usage Examples
+
+**See `examples/hls-example.jsx` for a complete working example with multiple HLS scenarios.**
+
+#### Basic HLS with Progressive Enhancement
+
+Provide multiple source formats to ensure compatibility across all browsers:
+
+```javascript
+<ReactAudioPlayerInner
+  title="Podcast Episode"
+  audioSrc={[
+    'https://example.com/episode.m3u8',
+    'https://example.com/episode.aac',
+    'https://example.com/episode.mp3'
+  ]}
+  // ... other props
+/>
+```
+
+Browsers will try sources in order:
+1. Modern browsers (Safari, Chrome 142+, Edge 142+) will play the HLS stream
+2. Older browsers will skip the .m3u8 and fall back to AAC or MP3
+
+#### Live Radio Stream
+
+```javascript
+<ReactAudioPlayerInner
+  title="Live Radio"
+  audioSrc={['https://stream.example.com/live.m3u8']}
+  // ... other props
+/>
+```
+
+#### Single Source (Backward Compatible)
+
+The player maintains backward compatibility with the original single-source API:
+
+```javascript
+<ReactAudioPlayerInner
+  title="Audio Track"
+  audioSrc="https://example.com/audio.mp3"
+  // ... other props
+/>
+```
+
+### Live Stream Detection
+
+The player automatically detects live streams using the HTML5 audio `duration` property:
+
+- **Live streams:** `duration === Infinity`
+  - Timeline/seek controls are hidden
+  - Rewind/forward buttons are hidden
+  - "On Air" label is displayed
+
+- **Pre-recorded audio:** `duration` is a finite number
+  - Timeline/seek controls are shown
+  - Rewind/forward buttons are shown
+  - Duration is displayed
+
+No additional props are needed - the player automatically adapts its UI based on whether the content is live or pre-recorded.
+
+### Supported Audio Formats
+
+The player automatically detects MIME types from file extensions:
+
+| Extension | MIME Type |
+|-----------|-----------|
+| `.m3u8` | `application/x-mpegURL` |
+| `.mp3` | `audio/mpeg` |
+| `.aac` | `audio/aac` |
+| `.ogg` | `audio/ogg` |
+| `.wav` | `audio/wav` |
+
+## Examples
+
+The `examples/` directory contains working demonstrations of the audio player with HLS support.
+
+### Running the Examples
+
+**Option 1: Using the serve script (recommended)**
+```bash
+# Start local server and open examples in browser
+yarn serve:examples
+
+# Or using npm
+npm run serve:examples
+```
+
+This will start a local server on port 8000 and automatically open the examples page in your browser.
+
+**Option 2: Open HTML file directly**
+1. Open `examples/index.html` in a web browser
+2. The page includes three examples:
+   - HLS with progressive enhancement (fallback sources)
+   - Live HLS stream (MPR Current)
+   - Regular MP3 (backward compatible)
+
+### Building the Examples
+
+The examples use a pre-built bundle (`examples/bundle.js`). If you modify the source code and want to rebuild the examples:
+
+```bash
+# Rebuild the examples bundle
+yarn build:examples
+
+# Or using npm
+npm run build:examples
+```
+
+**Files:**
+- `examples/index.html` - Main example page with CSS and layout
+- `examples/hls-example.jsx` - React components demonstrating HLS features
+- `examples/bundle.js` - Compiled bundle (auto-generated, don't edit directly)
+- `examples/hls-test.html` - Additional test page for development
+
 ## Publishing
 
 1. Ensure every merge request and/or change to `apm-react-audio-player` should always come with an updated version (ex. 1.0.17 to 1.0.18) in the package.json.

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;
@@ -83,32 +83,41 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     _useState10 = _slicedToArray(_useState9, 2),
     isMuted = _useState10[0],
     setIsMuted = _useState10[1];
-  var isStream = audioRef.current && audioRef.current.currentSrc.includes('stream');
+  var isStream = audioRef.current && audioRef.current.duration === Infinity;
   React.useEffect(function () {
     if (currentTime === Number(duration)) {
       // restart()
       setIsFinishedPlaying(true);
     }
   }, [currentTime]);
+  React.useEffect(function () {
+    // Cancel RAF loop if duration changes to Infinity (live stream metadata loaded)
+    if (duration === Infinity && animationRef.current) {
+      window.cancelAnimationFrame(animationRef.current);
+    }
+  }, [duration]);
   var onLoadedMetadata = function onLoadedMetadata() {
-    var _audioRef$current;
+    if (!audioRef.current) return;
     var seconds = Math.floor(audioRef.current.duration);
     setDuration(seconds);
-    if (!(audioRef !== null && audioRef !== void 0 && (_audioRef$current = audioRef.current) !== null && _audioRef$current !== void 0 && _audioRef$current.currentSrc.includes('stream'))) {
+    if (audioRef.current.duration !== Infinity && progressBarRef.current) {
       progressBarRef.current.max = seconds;
     }
   };
   var updateCurrentTime = function updateCurrentTime() {
-    setCurrentTime(progressBarRef.current.value);
+    if (progressBarRef.current) {
+      setCurrentTime(progressBarRef.current.value);
+    }
   };
   var _whilePlaying = function whilePlaying() {
-    var _audioRef$current2;
-    if (!(audioRef !== null && audioRef !== void 0 && (_audioRef$current2 = audioRef.current) !== null && _audioRef$current2 !== void 0 && _audioRef$current2.currentSrc.includes('stream'))) {
-      // isStream isn't correct here
-
+    // Guard against null refs (can happen when timeline unmounts for live streams)
+    if (!progressBarRef.current || !audioRef.current) {
+      return;
+    }
+    if (audioRef.current.duration !== 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', "".concat(progressBarRef.current.value / duration * 100, "%"));
     updateCurrentTime();
 
     // when you reach the end of the song
@@ -134,9 +143,22 @@ 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();
-    if (!audioRef.current.currentSrc.includes('stream')) {
-      // isStream isn't correctly set here
+
+    // Only start RAF loop for non-live streams with valid duration
+    var dur = audioRef.current.duration;
+    if (dur !== Infinity && !isNaN(dur) && isFinite(dur)) {
       animationRef.current = window.requestAnimationFrame(_whilePlaying);
     }
   };
@@ -158,24 +180,29 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     }
   };
   var changePlayerCurrentTime = function changePlayerCurrentTime() {
+    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 changeRange = function changeRange() {
+    if (!progressBarRef.current || !audioRef.current) return;
     audioRef.current.currentTime = progressBarRef.current.value;
     updateCurrentTime();
     changePlayerCurrentTime();
   };
   var rewindControl = function rewindControl() {
+    if (!progressBarRef.current) return;
     progressBarRef.current.value = Number(progressBarRef.current.value) - 15;
     changeRange();
   };
   var forwardControl = function forwardControl() {
+    if (!progressBarRef.current) return;
     progressBarRef.current.value = Number(progressBarRef.current.value) + 15;
     changeRange();
   };
   var volumeControl = function volumeControl(e) {
+    if (!audioRef.current) return;
     var value = e.target.value;
     var volume = value / 100;
     audioRef.current.volume = volume;
@@ -259,6 +286,24 @@ var Pause = function Pause() {
   }));
 };
 
+var getTypeFromExtension = function getTypeFromExtension(url) {
+  var extension = url.split('.').pop().split('?')[0];
+  switch (extension) {
+    case 'm3u8':
+      return 'application/x-mpegURL';
+    case 'aac':
+      return 'audio/aac';
+    case 'mp3':
+      return 'audio/mpeg';
+    case 'ogg':
+      return 'audio/ogg';
+    case 'wav':
+      return 'audio/wav';
+    default:
+      return undefined;
+    // Let browser auto-detect
+  }
+};
 var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
   var _props$audioPlayerRef, _props$progressBarRef;
   // references
@@ -271,7 +316,6 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     volumeCtrl = props.volumeCtrl,
     playBtnClass = props.playBtnClass,
     customHtml = props.customHtml,
-    isLive = props.isLive,
     onLoadedMetadata = props.onLoadedMetadata,
     calculateTime = props.calculateTime,
     togglePlaying = props.togglePlaying,
@@ -289,16 +333,46 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     prefix = props.prefix;
   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
+  React.useEffect(function () {
+    if (audioPlayerRef.current && audioSrc) {
+      try {
+        audioPlayerRef.current.load();
+      } catch (err) {
+        console.warn('Failed to reload audio source:', err);
+      }
+    }
+  }, [JSON.stringify(audioSrc)]);
+
+  // Set initial volume to 100%
+  React.useEffect(function () {
+    if (audioPlayerRef.current) {
+      audioPlayerRef.current.volume = 1.0;
+    }
+  }, []);
+
+  // Helper to determine if controls should show
+  var showControls = duration !== Infinity && duration !== undefined && !isNaN(duration) && isFinite(duration);
   return audioSrc && /*#__PURE__*/React.createElement("div", {
     className: "audioPlayer",
     style: customStyles && customStyles.audioPlayer
   }, /*#__PURE__*/React.createElement("audio", {
     ref: audioPlayerRef,
-    src: audioSrc,
     preload: "none",
     onLoadedMetadata: onLoadedMetadata,
     muted: isMuted
-  }), /*#__PURE__*/React.createElement("div", {
+  }, Array.isArray(audioSrc) ? audioSrc.map(function (src, index) {
+    return /*#__PURE__*/React.createElement("source", {
+      key: index,
+      src: src,
+      type: getTypeFromExtension(src)
+    });
+  }) : audioSrc ? /*#__PURE__*/React.createElement("source", {
+    src: audioSrc,
+    type: getTypeFromExtension(audioSrc)
+  }) : null, "Your browser does not support the audio element."), /*#__PURE__*/React.createElement("div", {
     className: "player-layout"
   }, volumeCtrl && /*#__PURE__*/React.createElement("div", {
     className: "player-controls-secondary-outer"
@@ -324,6 +398,7 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     className: "player-volume-progress",
     min: 0,
     max: 100,
+    defaultValue: 100,
     "aria-hidden": "true",
     "aria-valuetext": "100%",
     onChange: function onChange(e) {
@@ -336,7 +411,7 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     className: "player-volume-label"
   }, "Volume")), /*#__PURE__*/React.createElement("div", {
     className: "player-controls"
-  }, !isLive && /*#__PURE__*/React.createElement("div", {
+  }, showControls && /*#__PURE__*/React.createElement("div", {
     className: "player-backward-forward-controls"
   }, /*#__PURE__*/React.createElement("button", {
     onClick: rewindControl
@@ -350,14 +425,14 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     className: playBtnClass,
     style: customStyles && customStyles.playPause,
     id: "playbutton"
-  }, isPlaying ? /*#__PURE__*/React.createElement(Pause, null) : /*#__PURE__*/React.createElement(Play, null))), !isLive && /*#__PURE__*/React.createElement("div", {
+  }, isPlaying ? /*#__PURE__*/React.createElement(Pause, null) : /*#__PURE__*/React.createElement(Play, null))), showControls && /*#__PURE__*/React.createElement("div", {
     className: "player-backward-forward-controls"
   }, /*#__PURE__*/React.createElement("button", {
     onClick: forwardControl
   }, /*#__PURE__*/React.createElement("img", {
     src: "/img/icon-forward-15.svg",
     alt: "Forward 15 seconds"
-  })))), !isLive && /*#__PURE__*/React.createElement("div", {
+  })))), showControls && /*#__PURE__*/React.createElement("div", {
     className: "player-timeline"
   }, /*#__PURE__*/React.createElement("div", {
     className: "player-currentTime"
@@ -378,7 +453,7 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     className: "player-content"
   }, customHtml && customHtml, /*#__PURE__*/React.createElement("div", {
     className: "player-audio-type type-sm"
-  }, isLive ? /*#__PURE__*/React.createElement("div", {
+  }, duration === Infinity ? /*#__PURE__*/React.createElement("div", {
     className: "player-live-label"
   }, prefix ? prefix : 'On Air') : /*#__PURE__*/React.createElement("div", {
     className: "player-label"

package/dist/index.modern.js

@@ -0,0 +1,508 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      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 = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtrl) {
+  var initialDuration = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPlaying = _useState2[0],
+    setIsPlaying = _useState2[1];
+  var _useState3 = useState(initialDuration),
+    _useState4 = _slicedToArray(_useState3, 2),
+    duration = _useState4[0],
+    setDuration = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentTime = _useState6[0],
+    setCurrentTime = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isFinishedPlaying = _useState8[0],
+    setIsFinishedPlaying = _useState8[1];
+  var animationRef = useRef(); // reference the animation
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isMuted = _useState10[0],
+    setIsMuted = _useState10[1];
+  var isStream = audioRef.current && audioRef.current.duration === Infinity;
+  useEffect(function () {
+    if (currentTime === Number(duration)) {
+      // restart()
+      setIsFinishedPlaying(true);
+    }
+  }, [currentTime]);
+  useEffect(function () {
+    // Cancel RAF loop if duration changes to Infinity (live stream metadata loaded)
+    if (duration === Infinity && animationRef.current) {
+      window.cancelAnimationFrame(animationRef.current);
+    }
+  }, [duration]);
+  var onLoadedMetadata = function onLoadedMetadata() {
+    if (!audioRef.current) return;
+    var seconds = Math.floor(audioRef.current.duration);
+    setDuration(seconds);
+    if (audioRef.current.duration !== Infinity && progressBarRef.current) {
+      progressBarRef.current.max = seconds;
+    }
+  };
+  var updateCurrentTime = function updateCurrentTime() {
+    if (progressBarRef.current) {
+      setCurrentTime(progressBarRef.current.value);
+    }
+  };
+  var _whilePlaying = function whilePlaying() {
+    // Guard against null refs (can happen when timeline unmounts for live streams)
+    if (!progressBarRef.current || !audioRef.current) {
+      return;
+    }
+    if (audioRef.current.duration !== Infinity) {
+      progressBarRef.current.value = Math.floor(audioRef.current.currentTime);
+      progressBarRef.current.style.setProperty('--seek-before-width', "".concat(progressBarRef.current.value / duration * 100, "%"));
+    }
+    updateCurrentTime();
+
+    // when you reach the end of the song
+    if (!isStream && progressBarRef.current.value === duration) {
+      // restart()
+      setIsFinishedPlaying(true);
+      return;
+    }
+    animationRef.current = window.requestAnimationFrame(_whilePlaying);
+  };
+  var pause = function pause() {
+    setIsPlaying(false);
+    audioRef.current.pause();
+    window.cancelAnimationFrame(animationRef.current);
+  };
+
+  // const restart = () => {
+  //   progressBarRef.current.value = 0
+  //   updateCurrentTime()
+  //   pause()
+  // }
+
+  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
+    var dur = audioRef.current.duration;
+    if (dur !== Infinity && !isNaN(dur) && isFinite(dur)) {
+      animationRef.current = window.requestAnimationFrame(_whilePlaying);
+    }
+  };
+  var toggleMute = function toggleMute() {
+    setIsMuted(!isMuted);
+  };
+  var calculateTime = function calculateTime(secs) {
+    var minutes = Math.floor(secs / 60);
+    var returnedMinutes = minutes < 10 ? "0".concat(minutes) : "".concat(minutes);
+    var seconds = Math.floor(secs % 60);
+    var returnedSeconds = seconds < 10 ? "0".concat(seconds) : "".concat(seconds);
+    return "".concat(returnedMinutes, ":").concat(returnedSeconds);
+  };
+  var togglePlaying = function togglePlaying() {
+    if (!isPlaying) {
+      play();
+    } else {
+      pause();
+    }
+  };
+  var changePlayerCurrentTime = function changePlayerCurrentTime() {
+    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 changeRange = function changeRange() {
+    if (!progressBarRef.current || !audioRef.current) return;
+    audioRef.current.currentTime = progressBarRef.current.value;
+    updateCurrentTime();
+    changePlayerCurrentTime();
+  };
+  var rewindControl = function rewindControl() {
+    if (!progressBarRef.current) return;
+    progressBarRef.current.value = Number(progressBarRef.current.value) - 15;
+    changeRange();
+  };
+  var forwardControl = function forwardControl() {
+    if (!progressBarRef.current) return;
+    progressBarRef.current.value = Number(progressBarRef.current.value) + 15;
+    changeRange();
+  };
+  var volumeControl = function volumeControl(e) {
+    if (!audioRef.current) return;
+    var value = e.target.value;
+    var volume = value / 100;
+    audioRef.current.volume = volume;
+  };
+  var formatCalculateTime = function formatCalculateTime(timeString) {
+    var toString = String(timeString);
+    if (toString.split(':').length === 3) {
+      var _toString$split = toString.split(':'),
+        _toString$split2 = _slicedToArray(_toString$split, 3),
+        hours = _toString$split2[0],
+        minutes = _toString$split2[1],
+        seconds = _toString$split2[2];
+      return "".concat(parseInt(hours), "hr ").concat(parseInt(minutes), "min ").concat(parseInt(seconds), "sec");
+    } else if (toString.split(':').length === 2) {
+      var _toString$split3 = toString.split(':'),
+        _toString$split4 = _slicedToArray(_toString$split3, 2),
+        _minutes = _toString$split4[0],
+        _seconds = _toString$split4[1];
+      return "".concat(parseInt(_minutes), "min ").concat(parseInt(_seconds), "sec");
+    }
+  };
+  return {
+    onLoadedMetadata: onLoadedMetadata,
+    calculateTime: calculateTime,
+    togglePlaying: togglePlaying,
+    changePlayerCurrentTime: changePlayerCurrentTime,
+    rewindControl: rewindControl,
+    forwardControl: forwardControl,
+    play: play,
+    pause: pause,
+    isPlaying: isPlaying,
+    isFinishedPlaying: isFinishedPlaying,
+    currentTime: currentTime,
+    duration: duration,
+    volumeCtrl: volumeCtrl,
+    isMuted: isMuted,
+    volumeControl: volumeControl,
+    toggleMute: toggleMute,
+    formatCalculateTime: formatCalculateTime
+  };
+};
+
+var Play = function Play() {
+  return /*#__PURE__*/React.createElement("svg", {
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: "0",
+    viewBox: "0 0 448 512",
+    className: "play",
+    height: "1em",
+    width: "1em",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-labelledby": "play playButton"
+  }, /*#__PURE__*/React.createElement("title", {
+    id: "play"
+  }, "Play"), /*#__PURE__*/React.createElement("desc", {
+    id: "playButton"
+  }, "Play Button"), /*#__PURE__*/React.createElement("path", {
+    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"
+  }));
+};
+
+var Pause = function Pause() {
+  return /*#__PURE__*/React.createElement("svg", {
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: "0",
+    viewBox: "0 0 448 512",
+    height: "1em",
+    width: "1em",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-labelledby": "pause pauseButton"
+  }, /*#__PURE__*/React.createElement("title", {
+    id: "pause"
+  }, "Pause"), /*#__PURE__*/React.createElement("desc", {
+    id: "pauseButton"
+  }, "Pause Button"), /*#__PURE__*/React.createElement("path", {
+    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"
+  }));
+};
+
+var getTypeFromExtension = function getTypeFromExtension(url) {
+  var extension = url.split('.').pop().split('?')[0];
+  switch (extension) {
+    case 'm3u8':
+      return 'application/x-mpegURL';
+    case 'aac':
+      return 'audio/aac';
+    case 'mp3':
+      return 'audio/mpeg';
+    case 'ogg':
+      return 'audio/ogg';
+    case 'wav':
+      return 'audio/wav';
+    default:
+      return undefined;
+    // Let browser auto-detect
+  }
+};
+var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
+  var _props$audioPlayerRef, _props$progressBarRef;
+  // 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 customStyles = props ? props.style : '';
+  var title = props.title,
+    audioSrc = props.audioSrc,
+    volumeCtrl = props.volumeCtrl,
+    playBtnClass = props.playBtnClass,
+    customHtml = props.customHtml,
+    onLoadedMetadata = props.onLoadedMetadata,
+    calculateTime = props.calculateTime,
+    togglePlaying = props.togglePlaying,
+    changePlayerCurrentTime = props.changePlayerCurrentTime,
+    isPlaying = props.isPlaying,
+    currentTime = props.currentTime,
+    duration = props.duration,
+    volumeControl = props.volumeControl,
+    toggleMute = props.toggleMute,
+    isMuted = props.isMuted,
+    formatCalculateTime = props.formatCalculateTime,
+    rewindControl = props.rewindControl,
+    forwardControl = props.forwardControl,
+    subtitle = props.subtitle,
+    prefix = props.prefix;
+  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
+  useEffect(function () {
+    if (audioPlayerRef.current && audioSrc) {
+      try {
+        audioPlayerRef.current.load();
+      } catch (err) {
+        console.warn('Failed to reload audio source:', err);
+      }
+    }
+  }, [JSON.stringify(audioSrc)]);
+
+  // Set initial volume to 100%
+  useEffect(function () {
+    if (audioPlayerRef.current) {
+      audioPlayerRef.current.volume = 1.0;
+    }
+  }, []);
+
+  // Helper to determine if controls should show
+  var showControls = duration !== Infinity && duration !== undefined && !isNaN(duration) && isFinite(duration);
+  return audioSrc && /*#__PURE__*/React.createElement("div", {
+    className: "audioPlayer",
+    style: customStyles && customStyles.audioPlayer
+  }, /*#__PURE__*/React.createElement("audio", {
+    ref: audioPlayerRef,
+    preload: "none",
+    onLoadedMetadata: onLoadedMetadata,
+    muted: isMuted
+  }, Array.isArray(audioSrc) ? audioSrc.map(function (src, index) {
+    return /*#__PURE__*/React.createElement("source", {
+      key: index,
+      src: src,
+      type: getTypeFromExtension(src)
+    });
+  }) : audioSrc ? /*#__PURE__*/React.createElement("source", {
+    src: audioSrc,
+    type: getTypeFromExtension(audioSrc)
+  }) : null, "Your browser does not support the audio element."), /*#__PURE__*/React.createElement("div", {
+    className: "player-layout"
+  }, volumeCtrl && /*#__PURE__*/React.createElement("div", {
+    className: "player-controls-secondary-outer"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "player-volume-control"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "player-volume-icon"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: toggleMute,
+    "aria-label": isMuted === true ? 'Muted' : 'Not Muted',
+    title: isMuted === true ? 'Muted' : 'Not Muted'
+  }, !isMuted ? /*#__PURE__*/React.createElement("img", {
+    src: "/img/icon-volume-low.svg",
+    alt: "Volume Button"
+  }) : /*#__PURE__*/React.createElement("img", {
+    src: "/img/icon-volume-mute.svg",
+    alt: "Volume Mute Button"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "player-timeline player-controls-secondary"
+  }, /*#__PURE__*/React.createElement("input", {
+    id: "player-volume",
+    type: "range",
+    className: "player-volume-progress",
+    min: 0,
+    max: 100,
+    defaultValue: 100,
+    "aria-hidden": "true",
+    "aria-valuetext": "100%",
+    onChange: function onChange(e) {
+      return volumeControl(e);
+    }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
+    src: "/img/icon-volume-high.svg",
+    alt: "Volume Button"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "player-volume-label"
+  }, "Volume")), /*#__PURE__*/React.createElement("div", {
+    className: "player-controls"
+  }, showControls && /*#__PURE__*/React.createElement("div", {
+    className: "player-backward-forward-controls"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: rewindControl
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/img/icon-rewind-15.svg",
+    alt: "Backward 15 seconds"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(isPlaying ? 'is-playing' : '', " player-btn-play-pause-outer")
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: togglePlaying,
+    className: playBtnClass,
+    style: customStyles && customStyles.playPause,
+    id: "playbutton"
+  }, isPlaying ? /*#__PURE__*/React.createElement(Pause, null) : /*#__PURE__*/React.createElement(Play, null))), showControls && /*#__PURE__*/React.createElement("div", {
+    className: "player-backward-forward-controls"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: forwardControl
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/img/icon-forward-15.svg",
+    alt: "Forward 15 seconds"
+  })))), showControls && /*#__PURE__*/React.createElement("div", {
+    className: "player-timeline"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "player-currentTime"
+  }, calculateTime(currentTime)), /*#__PURE__*/React.createElement("div", {
+    className: "player-timeline-progress-outer"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "range",
+    className: "player-timeline-progress",
+    defaultValue: "0",
+    ref: progressBarRef,
+    onChange: changePlayerCurrentTime,
+    "aria-label": "Audio progress",
+    max: duration
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "player-duration",
+    style: customStyles && customStyles.duration
+  }, duration && !isNaN(duration) ? calculateTime(duration) : '-- : --')), /*#__PURE__*/React.createElement("div", {
+    className: "player-content"
+  }, customHtml && customHtml, /*#__PURE__*/React.createElement("div", {
+    className: "player-audio-type type-sm"
+  }, duration === Infinity ? /*#__PURE__*/React.createElement("div", {
+    className: "player-live-label"
+  }, prefix ? prefix : 'On Air') : /*#__PURE__*/React.createElement("div", {
+    className: "player-label"
+  }, "listen", /*#__PURE__*/React.createElement("div", {
+    className: "player-label-duration"
+  }, "[".concat(formatDuration, "]"))), /*#__PURE__*/React.createElement("div", {
+    className: "player-title"
+  }, title || '', " ", subtitle && "by ".concat(subtitle), ' ')))));
+};
+
+var ReactAudioPlayer = function ReactAudioPlayer(props) {
+  var _props$audioPlayerRef, _props$progressBarRef;
+  // 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 customStyles = props ? props.style : '';
+
+  // hooks
+  var _useAudioPlayer = useAudioPlayer(audioPlayerRef, progressBarRef),
+    isPlaying = _useAudioPlayer.isPlaying,
+    currentTime = _useAudioPlayer.currentTime,
+    duration = _useAudioPlayer.duration,
+    isMuted = _useAudioPlayer.isMuted,
+    onLoadedMetadata = _useAudioPlayer.onLoadedMetadata,
+    calculateTime = _useAudioPlayer.calculateTime,
+    togglePlaying = _useAudioPlayer.togglePlaying,
+    changePlayerCurrentTime = _useAudioPlayer.changePlayerCurrentTime,
+    volumeControl = _useAudioPlayer.volumeControl,
+    toggleMute = _useAudioPlayer.toggleMute,
+    formatCalculateTime = _useAudioPlayer.formatCalculateTime,
+    rewindControl = _useAudioPlayer.rewindControl,
+    forwardControl = _useAudioPlayer.forwardControl;
+  return /*#__PURE__*/React.createElement(ReactAudioPlayerInner, _extends({}, props, {
+    audioPlayerRef: audioPlayerRef,
+    progressBarRef: progressBarRef,
+    isPlaying: isPlaying,
+    isMuted: isMuted,
+    currentTime: currentTime,
+    duration: duration,
+    customStyles: customStyles,
+    onLoadedMetadata: onLoadedMetadata,
+    calculateTime: calculateTime,
+    togglePlaying: togglePlaying,
+    changePlayerCurrentTime: changePlayerCurrentTime,
+    volumeControl: volumeControl,
+    toggleMute: toggleMute,
+    formatCalculateTime: formatCalculateTime,
+    rewindControl: rewindControl,
+    forwardControl: forwardControl
+  }));
+};
+
+export { ReactAudioPlayer, ReactAudioPlayerInner, useAudioPlayer };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "apm-react-audio-player",
-  "version": "1.0.27",
+  "version": "1.1.1",
   "author": "Jason Phan <jphan@mpr.org>",
   "license": "MIT",
   "private": false,
   "repository": {
     "type": "git",
-    "url": "APMG/apm-react-audio-player.git"
+    "url": "git+https://github.com/APMG/apm-react-audio-player.git"
   },
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -16,6 +16,8 @@
   },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",
+    "build:examples": "esbuild examples/hls-example.jsx --bundle --format=esm --outfile=examples/bundle.js --external:react --external:react-dom --external:react/jsx-runtime --loader:.js=jsx",
+    "serve:examples": "npx http-server . -p 8000 -o /examples/index.html",
     "dev": "rollup -c -w",
     "test": "jest --watch",
     "test:ci": "jest",
@@ -25,14 +27,11 @@
     "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"
   },
   "dependencies": {
-    "rollup": "^4.29.1",
+    "rollup": "^4.59.0",
     "rollup-plugin-babel": "^4.3.3"
   },
   "devDependencies": {
@@ -41,8 +40,9 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
-    "@testing-library/react": "^8.0.5",
+    "@testing-library/react": "^14.0.0",
     "cross-env": "^7.0.2",
+    "esbuild": "^0.27.4",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.7.0",
     "eslint-config-standard": "^14.1.0",
@@ -53,8 +53,8 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-standard": "^4.0.1",
-    "jest": "^24.8.0",
-    "jest-environment-jsdom-fourteen": "^0.1.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^30.3.0",
     "jest-prop-type-error": "^1.1.0",
     "prettier": "^2.0.4",
     "react": "^18",
@@ -63,9 +63,27 @@
   },
   "resolutions": {
     "braces": ">=3.0.3",
-    "react-scripts": "^5.0.1"
+    "react-scripts": "^5.0.1",
+    "micromatch": ">=4.0.8",
+    "minimatch": ">=3.1.4",
+    "tough-cookie": ">=4.1.3",
+    "ajv": ">=6.14.0",
+    "qs": ">=6.14.1",
+    "lodash": ">=4.17.21",
+    "js-yaml": ">=4.1.0",
+    "@babel/helpers": ">=7.26.0",
+    "@babel/runtime": ">=7.26.0",
+    "flatted": ">=3.3.3",
+    "brace-expansion": ">=2.0.1",
+    "tmp": ">=0.2.3"
   },
   "files": [
     "dist"
-  ]
+  ],
+  "jest": {
+    "testEnvironment": "jsdom",
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.js"
+    ]
+  }
 }