apm-react-audio-player 1.0.0

package/README.md

@@ -0,0 +1,107 @@
+# apm-react-audio-player
+
+This is a light react audio player that is wrapped around a HTML5 audio tag, created for use on American Public Media and Minnesota Public Radio's websites.
+
+The library was designed to add a audio player to a body of a story which will not trigger the static audio player.
+
+![audio player img](/public/audioPlayerImg.jpg)
+
+## Table of Contents
+
+[Dependencies](#dependencies)
+
+[Installation](#installation)
+  - [NPM](#npm)
+  - [YARN](#yarn)
+
+[Importing](#importing)
+  - [ES6 Import](#es6-import)
+
+[Usage](#usage)
+  - [Props](#props)
+  - [Example](#example)
+
+[License] (#License)
+
+
+## Dependencies
+
+As of version 1.0.0, this library has no dependencies for usage.
+
+## Installation
+
+There are several ways to install APM Player on your site.
+
+### NPM
+
+```sh
+npm install apm-react-audio-player
+```
+
+or to use yarn:
+
+### YARN
+
+```sh
+yarn add apm-react-audio-player
+```
+
+## Importing
+
+### ES6 Import
+
+The easiest way to include this in modern javascript, assuming you are using something like and Babel, is to use an `import` statement.
+The library uses named exports for all modules.
+
+To import the player module:
+
+```javascript
+import { ReactAudioPlayer } from 'apm-react-audio-player';
+```
+## Usage
+
+### Props
+See the [audio tag documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) for detailed explanations of these attributes.
+
+Prop | Type | Default | Notes
+--- | --- | --- | ---
+`title` | String | *empty string* | ---
+`description` | String | *empty string* | ---
+`url` | String | *empty string* | ---
+`customStyles` | Object | --- | ---
+`forwardBackward` | Boolean | false | ---
+
+### Example
+
+```javascript
+class Example extends Component {
+  const url='example.mp3'
+  const audioStyles = {
+    audioPlayer: {
+      width: '1200px',
+      backgroundColor: 'lightBlue'
+    },
+    playPause: {
+      background: 'blue'
+    },
+    duration: {
+      color: '#26c9c3'
+    }
+  };
+  render() {
+    return (
+      <ReactAudioPlayer
+      title={'title'}
+      description={'description'}
+      audioSrc={url}
+      audioStyles={audioStyles}
+      forwardBackward={true}
+    />
+    )
+  }
+}
+```
+
+## License
+
+MIT © [Phanx091](https://github.com/Phanx091)

package/dist/index.js

@@ -0,0 +1,221 @@
+'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 bs = require('react-icons/bs');
+var fa = require('react-icons/fa');
+
+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) {
+  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 animationRef = React.useRef(); // reference the animation
+
+  var onLoadedMetadata = function onLoadedMetadata() {
+    var seconds = Math.floor(audioRef.current.duration);
+    setDuration(seconds);
+    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();
+      return;
+    }
+    animationRef.current = window.requestAnimationFrame(whilePlaying);
+  };
+  var pause = function pause() {
+    audioRef.current.pause();
+    window.cancelAnimationFrame(animationRef.current);
+  };
+  var restart = function restart() {
+    progressBarRef.current.value = 0;
+    updateCurrentTime();
+    pause();
+  };
+  var play = function play() {
+    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() {
+    var prevState = isPlaying;
+    setIsPlaying(!prevState);
+    if (!prevState) {
+      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);
+  };
+  return {
+    onLoadedMetadata: onLoadedMetadata,
+    calculateTime: calculateTime,
+    togglePlaying: togglePlaying,
+    changePlayerCurrentTime: changePlayerCurrentTime,
+    backThirty: backThirty,
+    forwardThirty: forwardThirty,
+    isPlaying: isPlaying,
+    currentTime: currentTime,
+    duration: duration
+  };
+};
+
+var ReactAudioPlayer = function ReactAudioPlayer(props) {
+  // references
+  var audioPlayer = React.useRef(); // reference our audio component
+  var progressBar = React.useRef(); // reference our progress bar
+
+  var customStyles = props ? props.style : '';
+  var title = props.title,
+    description = props.description,
+    audioSrc = props.audioSrc,
+    forwardBackward = props.forwardBackward;
+
+  // hooks
+  var _useAudioPlayer = useAudioPlayer(audioPlayer, progressBar),
+    onLoadedMetadata = _useAudioPlayer.onLoadedMetadata,
+    calculateTime = _useAudioPlayer.calculateTime,
+    togglePlaying = _useAudioPlayer.togglePlaying,
+    changePlayerCurrentTime = _useAudioPlayer.changePlayerCurrentTime,
+    backThirty = _useAudioPlayer.backThirty,
+    forwardThirty = _useAudioPlayer.forwardThirty,
+    isPlaying = _useAudioPlayer.isPlaying,
+    currentTime = _useAudioPlayer.currentTime,
+    duration = _useAudioPlayer.duration;
+  return audioSrc && /*#__PURE__*/React__default.createElement("div", {
+    className: "audioPlayer",
+    style: customStyles && customStyles.audioPlayer
+  }, /*#__PURE__*/React__default.createElement("audio", {
+    ref: audioPlayer,
+    src: audioSrc,
+    preload: "metadata",
+    onLoadedMetadata: onLoadedMetadata
+  }), forwardBackward && /*#__PURE__*/React__default.createElement("button", {
+    className: "forwardBackward",
+    onClick: backThirty
+  }, "30", /*#__PURE__*/React__default.createElement(bs.BsArrowLeftShort, null)), /*#__PURE__*/React__default.createElement("div", {
+    className: "playPauseContainer"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    onClick: togglePlaying,
+    className: "playPause",
+    style: customStyles && customStyles.playPause
+  }, isPlaying ? /*#__PURE__*/React__default.createElement(fa.FaPause, null) : /*#__PURE__*/React__default.createElement(fa.FaPlay, {
+    className: "play"
+  }))), forwardBackward && /*#__PURE__*/React__default.createElement("button", {
+    className: "forwardBackward",
+    onClick: forwardThirty
+  }, /*#__PURE__*/React__default.createElement(bs.BsArrowRightShort, null), "30"), /*#__PURE__*/React__default.createElement("div", {
+    className: "currentTime"
+  }, calculateTime(currentTime)), /*#__PURE__*/React__default.createElement("div", {
+    className: "progressBarContainer"
+  }, /*#__PURE__*/React__default.createElement("input", {
+    type: "range",
+    className: "progressBar",
+    defaultValue: "0",
+    ref: progressBar,
+    onChange: changePlayerCurrentTime
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "duration",
+    style: customStyles && customStyles.duration
+  }, duration && !isNaN(duration) && calculateTime(duration)), /*#__PURE__*/React__default.createElement("div", {
+    className: "textBox"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "textBoxTitle"
+  }, title || 'Audio Player missing title'), /*#__PURE__*/React__default.createElement("div", {
+    className: "textBoxDescription"
+  }, description || 'Audio Player missing description')));
+};
+
+exports.ReactAudioPlayer = ReactAudioPlayer;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "apm-react-audio-player",
+  "version": "1.0.0",
+  "author": "Jason Phan <jphan@mpr.org>",
+  "license": "MIT",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "APMG/apm-react-audio-player.git"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.modern.js",
+  "source": "src/index.js",
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "jest --watch",
+    "test:ci": "jest",
+    "test:coverage": "jest --coverage",
+    "eslint": "eslint .",
+    "prettier": "prettier --check '**/**.js'",
+    "prettier:fix": "prettier --check '**/**.js' --write",
+    "clean": "rm -rf node_modules dist package-lock.json yarn.lock"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0"
+  },
+  "dependencies": {
+    "react-icons": "^4.7.1",
+    "rollup": "^1.17.0",
+    "rollup-plugin-babel": "^4.3.3"
+  },
+  "devDependencies": {
+    "babel-eslint": "^10.0.3",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-react": "^7.0.0",
+    "babel-polyfill": "^6.26.0",
+    "@testing-library/react": "^8.0.5",
+    "cross-env": "^7.0.2",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-config-standard": "^14.1.0",
+    "eslint-config-standard-react": "^9.2.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-standard": "^4.0.1",
+    "prettier": "^2.0.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.1",
+    "rollup-plugin-json": "^4.0.0",
+    "jest": "^24.8.0",
+    "jest-environment-jsdom-fourteen": "^0.1.0",
+    "jest-prop-type-error": "^1.1.0"
+  },
+  "files": [
+    "dist"
+  ]
+}