Upgrading react to v17

README.md

@@ -1,6 +1,6 @@
 _ATTENTION_ Machine Learning Engineres, Data Scientists, & AI Developers using speech-recognition technologies.  Learn how to develop applications that capture voice on any device [here](https://react-mic-gold.professionalreactapp.com/optingejevo96)!
 
-# React-Mic
+# React-Voice-Recorder
 
 Record a user's voice and display as an oscillation (or frequency bars).  Plug-n-play component for React apps.
 
@@ -17,9 +17,9 @@ Companies that develop speech-recognition apps, voice-activated software, call c
 
 ## Installation
 
-`npm install --save react-mic`
+`npm install --save react-voice-recorder`
 
-`yarn add react-mic`
+`yarn add react-voice-recorder`
 
 ## Demos
 

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "react-mic",
-  "version": "12.4.6",
-  "description": "Record audio from your microphone and display as a sound oscillation",
+  "name": "react-voice-recorder",
+  "version": "1.0.0",
+  "description": "Record audio from your microphone",
   "main": "dist/index.js",
   "files": [
     "dist"
@@ -35,7 +35,7 @@
   },
   "peerDependencies": {
     "prop-types": "^15.5.10",
-    "react": "16.x"
+    "react": "17.x"
   },
   "devDependencies": {
     "gh-pages": "^1.0.0",
@@ -63,9 +63,8 @@
     "html-webpack-plugin": "^3.2.0",
     "husky": "^3.1.0",
     "lint-staged": "^9.5.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-ga": "^2.7.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "rimraf": "^3.0.0",
     "sass-loader": "^8.0.0",
     "style-loader": "^1.1.1",
@@ -79,7 +78,7 @@
   "repository": "https://github.com/hackingbeauty/react-mic",
   "dependencies": {
     "prop-types": "^15.5.10",
-    "react-ga": "^2.2.0"
+    "react-ga": "^3.3.1"
   },
   "lint-staged": {
     "./src/**/*.js": [

src/components/ReactMic.js

@@ -12,7 +12,6 @@ import { MicrophoneRecorder } from '../libs/MicrophoneRecorder'
 import AudioPlayer            from '../libs/AudioPlayer'
 import Visualizer             from '../libs/Visualizer'
 
-
 export default class ReactMic extends Component {
   constructor(props) {
     super(props)

src/index.js

@@ -1,3 +1,3 @@
-import ReactMic from './components/ReactMic';
+import ReactMic from './components/ReactMic'
 
-export { ReactMic };
+export { ReactMic }

src/libs/AudioContext.js

@@ -1,26 +1,26 @@
-const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-let analyser = audioCtx.createAnalyser();
+const audioCtx = new (window.AudioContext || window.webkitAudioContext)()
+let analyser = audioCtx.createAnalyser()
 
-const AudioContext  = {
+const AudioContext = {
 
   getAudioContext() {
-    return audioCtx;
+    return audioCtx
   },
 
   getAnalyser() {
-    return analyser;
+    return analyser
   },
 
   resetAnalyser() {
-    analyser = audioCtx.createAnalyser();
+    analyser = audioCtx.createAnalyser()
   },
 
   decodeAudioData() {
-    audioCtx.decodeAudioData(audioData).then(function(decodedData) {
+    audioCtx.decodeAudioData(audioData).then((decodedData) => {
       // use the decoded data here
-    });
+    })
   }
 
 }
 
-export default AudioContext;
+export default AudioContext

src/libs/AudioPlayer.js

@@ -1,22 +1,22 @@
-import AudioContext from './AudioContext';
+import AudioContext from './AudioContext'
 
-let audioSource;
+let audioSource
 
-const AudioPlayer =  {
+const AudioPlayer = {
 
   create(audioElem) {
-    const audioCtx = AudioContext.getAudioContext();
-    const analyser = AudioContext.getAnalyser();
+    const audioCtx = AudioContext.getAudioContext()
+    const analyser = AudioContext.getAnalyser()
 
-    if(audioSource === undefined){
-      const source = audioCtx.createMediaElementSource(audioElem);
-      source.connect(analyser);
-      audioSource = source;
+    if (audioSource === undefined) {
+      const source = audioCtx.createMediaElementSource(audioElem)
+      source.connect(analyser)
+      audioSource = source
     }
 
-    analyser.connect(audioCtx.destination);
+    analyser.connect(audioCtx.destination)
   }
 
 }
 
-export default AudioPlayer;
+export default AudioPlayer

src/libs/Visualizer.js

@@ -1,149 +1,145 @@
-import AudioContext from './AudioContext';
+import AudioContext from './AudioContext'
 
-
-let drawVisual;
+let drawVisual
 
 const Visualizer = {
 
   visualizeSineWave(canvasCtx, canvas, width, height, backgroundColor, strokeColor) {
-    let analyser = AudioContext.getAnalyser();
+    let analyser = AudioContext.getAnalyser()
 
-    const bufferLength = analyser.fftSize;
-    const dataArray = new Uint8Array(bufferLength);
+    const bufferLength = analyser.fftSize
+    const dataArray = new Uint8Array(bufferLength)
 
-    canvasCtx.clearRect(0, 0, width, height);
+    canvasCtx.clearRect(0, 0, width, height)
 
     function draw() {
+      drawVisual = requestAnimationFrame(draw)
 
-      drawVisual = requestAnimationFrame(draw);
-
-      analyser = AudioContext.getAnalyser();
+      analyser = AudioContext.getAnalyser()
 
-      analyser.getByteTimeDomainData(dataArray);
+      analyser.getByteTimeDomainData(dataArray)
 
-      canvasCtx.fillStyle = backgroundColor;
-      canvasCtx.fillRect(0, 0, width, height);
+      canvasCtx.fillStyle = backgroundColor
+      canvasCtx.fillRect(0, 0, width, height)
 
-      canvasCtx.lineWidth = 2;
-      canvasCtx.strokeStyle = strokeColor;
+      canvasCtx.lineWidth = 2
+      canvasCtx.strokeStyle = strokeColor
 
-      canvasCtx.beginPath();
+      canvasCtx.beginPath()
 
-      const sliceWidth = width * 1.0 / bufferLength;
-      let x = 0;
+      const sliceWidth = width * 1.0 / bufferLength
+      let x = 0
 
-      for(let i = 0; i < bufferLength; i++) {
-        const v = dataArray[i] / 128.0;
-        const y = v * height/2;
+      for (let i = 0; i < bufferLength; i++) {
+        const v = dataArray[i] / 128.0
+        const y = v * height / 2
 
-        if(i === 0) {
-          canvasCtx.moveTo(x, y);
+        if (i === 0) {
+          canvasCtx.moveTo(x, y)
         } else {
-          canvasCtx.lineTo(x, y);
+          canvasCtx.lineTo(x, y)
         }
 
-        x += sliceWidth;
+        x += sliceWidth
       }
 
-      canvasCtx.lineTo(canvas.width, canvas.height/2);
-      canvasCtx.stroke();
-    };
+      canvasCtx.lineTo(canvas.width, canvas.height / 2)
+      canvasCtx.stroke()
+    }
 
-    draw();
+    draw()
   },
 
   visualizeFrequencyBars(canvasCtx, canvas, width, height, backgroundColor, strokeColor) {
-    const self = this;
-    let analyser = AudioContext.getAnalyser();
-    analyser.fftSize = 256;
-    const bufferLength = analyser.frequencyBinCount;
-    const dataArray = new Uint8Array(bufferLength);
+    const self = this
+    let analyser = AudioContext.getAnalyser()
+    analyser.fftSize = 256
+    const bufferLength = analyser.frequencyBinCount
+    const dataArray = new Uint8Array(bufferLength)
 
-    canvasCtx.clearRect(0, 0, width, height);
+    canvasCtx.clearRect(0, 0, width, height)
 
     function draw() {
-      drawVisual = requestAnimationFrame(draw);
+      drawVisual = requestAnimationFrame(draw)
 
-      analyser = AudioContext.getAnalyser();
-      analyser.getByteFrequencyData(dataArray);
+      analyser = AudioContext.getAnalyser()
+      analyser.getByteFrequencyData(dataArray)
 
-      canvasCtx.fillStyle = backgroundColor;
-      canvasCtx.fillRect(0, 0, width, height);
+      canvasCtx.fillStyle = backgroundColor
+      canvasCtx.fillRect(0, 0, width, height)
 
-      const barWidth = (width / bufferLength) * 2.5;
-      let barHeight;
-      let x = 0;
+      const barWidth = (width / bufferLength) * 2.5
+      let barHeight
+      let x = 0
 
-      for(let i = 0; i < bufferLength; i++) {
-        barHeight = dataArray[i];
+      for (let i = 0; i < bufferLength; i++) {
+        barHeight = dataArray[i]
 
-        const rgb = self.hexToRgb(strokeColor);
+        const rgb = self.hexToRgb(strokeColor)
 
         // canvasCtx.fillStyle = `rgb(${barHeight+100},${rgb.g},${rgb.b})`;
-        canvasCtx.fillStyle = strokeColor;
-        canvasCtx.fillRect(x,height-barHeight/2,barWidth,barHeight/2);
+        canvasCtx.fillStyle = strokeColor
+        canvasCtx.fillRect(x, height - barHeight / 2, barWidth, barHeight / 2)
 
-        x += barWidth + 1;
+        x += barWidth + 1
       }
-    };
+    }
 
-    draw();
+    draw()
   },
 
   visualizeFrequencyCircles(canvasCtx, canvas, width, height, backgroundColor, strokeColor) {
-    const self = this;
-    let analyser = AudioContext.getAnalyser();
-    analyser.fftSize = 32;
-    const bufferLength = analyser.frequencyBinCount;
+    const self = this
+    let analyser = AudioContext.getAnalyser()
+    analyser.fftSize = 32
+    const bufferLength = analyser.frequencyBinCount
 
-    const dataArray = new Uint8Array(bufferLength);
-    canvasCtx.clearRect(0, 0, width, height);
+    const dataArray = new Uint8Array(bufferLength)
+    canvasCtx.clearRect(0, 0, width, height)
 
     function draw() {
-
-      drawVisual = requestAnimationFrame(draw);
-      analyser = AudioContext.getAnalyser();
-      analyser.getByteFrequencyData(dataArray);
-      const reductionAmount = 3;
-      const reducedDataArray = new Uint8Array(bufferLength / reductionAmount);
+      drawVisual = requestAnimationFrame(draw)
+      analyser = AudioContext.getAnalyser()
+      analyser.getByteFrequencyData(dataArray)
+      const reductionAmount = 3
+      const reducedDataArray = new Uint8Array(bufferLength / reductionAmount)
 
       for (let i = 0; i < bufferLength; i += reductionAmount) {
-        let sum = 0;
+        let sum = 0
         for (let j = 0; j < reductionAmount; j++) {
-          sum += dataArray[i + j];
+          sum += dataArray[i + j]
         }
-         reducedDataArray[i/reductionAmount] = sum / reductionAmount;
+        reducedDataArray[i / reductionAmount] = sum / reductionAmount
       }
 
-      canvasCtx.clearRect(0, 0, width, height);
-      canvasCtx.beginPath();
-      canvasCtx.arc(width / 2, height / 2, Math.min(height, width) / 2, 0, 2 * Math.PI);
-      canvasCtx.fillStyle = backgroundColor;
-      canvasCtx.fill();
-      const stepSize = (Math.min(height, width) / 2.0) / (reducedDataArray.length);
-      canvasCtx.strokeStyle = strokeColor;
+      canvasCtx.clearRect(0, 0, width, height)
+      canvasCtx.beginPath()
+      canvasCtx.arc(width / 2, height / 2, Math.min(height, width) / 2, 0, 2 * Math.PI)
+      canvasCtx.fillStyle = backgroundColor
+      canvasCtx.fill()
+      const stepSize = (Math.min(height, width) / 2.0) / (reducedDataArray.length)
+      canvasCtx.strokeStyle = strokeColor
 
       for (let i = 0; i < reducedDataArray.length; i++) {
-        canvasCtx.beginPath();
-        const normalized = reducedDataArray[i] / 128;
-        const r = (stepSize * i) + (stepSize * normalized);
-        canvasCtx.arc(width / 2, height / 2, r, 0, 2 * Math.PI);
-        canvasCtx.stroke();
+        canvasCtx.beginPath()
+        const normalized = reducedDataArray[i] / 128
+        const r = (stepSize * i) + (stepSize * normalized)
+        canvasCtx.arc(width / 2, height / 2, r, 0, 2 * Math.PI)
+        canvasCtx.stroke()
       }
-    };
-    draw();
+    }
+    draw()
   },
 
-
   hexToRgb(hex) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
     return result ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16)
-    } : null;
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    } : null
   }
 
 }
 
-export default Visualizer;
+export default Visualizer