apm-react-audio-player 1.0.6 → 1.0.7

package/package.json

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

package/dist/index.js

@@ -1,289 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = require('react');
-var React__default = _interopDefault(React);
-
-var Play = function Play() {
-  return /*#__PURE__*/React__default.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"
-  }, /*#__PURE__*/React__default.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__default.createElement("svg", {
-    stroke: "currentColor",
-    fill: "currentColor",
-    strokeWidth: "0",
-    viewBox: "0 0 448 512",
-    height: "1em",
-    width: "1em",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.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"
-  }));
-};
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
-    try {
-      if (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
-    } finally {
-      try {
-        if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-    return _arr;
-  }
-}
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-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.");
-}
-
-var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtrl) {
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPlaying = _useState2[0],
-    setIsPlaying = _useState2[1];
-  var _useState3 = React.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    duration = _useState4[0],
-    setDuration = _useState4[1];
-  var _useState5 = React.useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    currentTime = _useState6[0],
-    setCurrentTime = _useState6[1];
-  var _useState7 = React.useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isFinishedPlaying = _useState8[0],
-    setIsFinishedPlaying = _useState8[1];
-  var animationRef = React.useRef(); // reference the animation
-
-  var onLoadedMetadata = function onLoadedMetadata() {
-    var seconds = Math.floor(audioRef.current.duration);
-    setDuration(seconds);
-    if (!audioRef.current.currentSrc.includes('stream')) {
-      progressBarRef.current.max = seconds;
-    }
-  };
-  var updateCurrentTime = function updateCurrentTime() {
-    setCurrentTime(progressBarRef.current.value);
-  };
-  var whilePlaying = function whilePlaying() {
-    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 (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);
-  };
-  var restart = function restart() {
-    progressBarRef.current.value = 0;
-    updateCurrentTime();
-    pause();
-  };
-  var play = function play() {
-    setIsPlaying(true);
-    audioRef.current.play();
-    animationRef.current = window.requestAnimationFrame(whilePlaying);
-  };
-  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() {
-    audioRef.current.currentTime = progressBarRef.current.value;
-    setCurrentTime(progressBarRef.current.value);
-    progressBarRef.current.style.setProperty('--seek-before-width', "".concat(progressBarRef.current.value / duration * 100, "%"));
-  };
-  var timeTravel = function timeTravel(newTime) {
-    progressBarRef.current.value = newTime;
-    updateCurrentTime();
-    changePlayerCurrentTime();
-  };
-  var backThirty = function backThirty() {
-    timeTravel(Number(progressBarRef.current.value) - 30);
-  };
-  var forwardThirty = function forwardThirty() {
-    timeTravel(Number(progressBarRef.current.value) + 30);
-  };
-  var volumeControl = function volumeControl(e) {
-    var value = e.target.value;
-    var volume = value / 100;
-    audioRef.current.volume = volume;
-  };
-  return {
-    onLoadedMetadata: onLoadedMetadata,
-    calculateTime: calculateTime,
-    togglePlaying: togglePlaying,
-    changePlayerCurrentTime: changePlayerCurrentTime,
-    backThirty: backThirty,
-    forwardThirty: forwardThirty,
-    isPlaying: isPlaying,
-    isFinished: isFinishedPlaying,
-    currentTime: currentTime,
-    duration: duration,
-    volumeCtrl: volumeCtrl,
-    volumeControl: volumeControl
-  };
-};
-
-var ReactAudioPlayer = function ReactAudioPlayer(props) {
-  var _props$audioPlayerRef, _props$progressBarRef;
-  // 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 customStyles = props ? props.style : '';
-  var title = props.title,
-    description = props.description,
-    audioSrc = props.audioSrc,
-    volumeCtrl = props.volumeCtrl,
-    playBtnClass = props.playBtnClass,
-    customHtml = props.customHtml,
-    isLive = props.isLive;
-
-  // hooks
-  var _useAudioPlayer = useAudioPlayer(audioPlayerRef, progressBarRef),
-    onLoadedMetadata = _useAudioPlayer.onLoadedMetadata,
-    calculateTime = _useAudioPlayer.calculateTime,
-    togglePlaying = _useAudioPlayer.togglePlaying,
-    changePlayerCurrentTime = _useAudioPlayer.changePlayerCurrentTime,
-    isPlaying = _useAudioPlayer.isPlaying,
-    currentTime = _useAudioPlayer.currentTime,
-    duration = _useAudioPlayer.duration,
-    volumeControl = _useAudioPlayer.volumeControl;
-  return audioSrc && /*#__PURE__*/React__default.createElement("div", {
-    className: "audioPlayer",
-    style: customStyles && customStyles.audioPlayer
-  }, /*#__PURE__*/React__default.createElement("audio", {
-    ref: audioPlayerRef,
-    src: audioSrc,
-    preload: "metadata",
-    onLoadedMetadata: onLoadedMetadata
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "player-layout"
-  }, volumeCtrl && /*#__PURE__*/React__default.createElement("div", {
-    className: "player-controls-secondary-outer"
-  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("span", {
-    className: "player-volume-text"
-  }, /*#__PURE__*/React__default.createElement("img", {
-    src: "/img/icon-volume-low.svg",
-    alt: ""
-  }), "Volume"), /*#__PURE__*/React__default.createElement("div", {
-    className: "player-controls player-controls-secondary"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "player-volume"
-  }, /*#__PURE__*/React__default.createElement("input", {
-    id: "player-volume",
-    type: "range",
-    className: "player-timeline-progress js-player-volume-current",
-    min: 0,
-    max: 100,
-    "aria-hidden": "true",
-    onChange: function onChange(e) {
-      return volumeControl(e);
-    }
-  }))))), /*#__PURE__*/React__default.createElement("div", {
-    className: "player-controls"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "player-btn-play-pause-outer"
-  }, /*#__PURE__*/React__default.createElement("button", {
-    onClick: togglePlaying,
-    className: playBtnClass,
-    style: customStyles && customStyles.playPause
-  }, 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", {
-    className: "player-currentTime"
-  }, calculateTime(currentTime)), /*#__PURE__*/React__default.createElement("div", {
-    className: "player-timeline"
-  }, /*#__PURE__*/React__default.createElement("input", {
-    type: "range",
-    className: "player-timeline-progress",
-    defaultValue: "0",
-    "aria-hidden": "true",
-    ref: progressBarRef,
-    onChange: changePlayerCurrentTime
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "player-duration",
-    style: customStyles && customStyles.duration
-  }, duration && !isNaN(duration) && calculateTime(duration))), /*#__PURE__*/React__default.createElement("div", {
-    className: "player-content"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "player-audio-type type-sm"
-  }, isLive ? /*#__PURE__*/React__default.createElement("div", {
-    className: "player-live-label"
-  }, "On Air") : /*#__PURE__*/React__default.createElement("div", {
-    className: "player-title"
-  }, " ", title || '', " "), /*#__PURE__*/React__default.createElement("div", {
-    className: "player-description"
-  }, description || '', " ")))));
-};
-
-exports.ReactAudioPlayer = ReactAudioPlayer;
-exports.useAudioPlayer = useAudioPlayer;