Merge pull request #31 from Lab-Lab-Lab/main

Merge in the standardized format.
Lab-Lab-Lab · Aug 8, 2024 · ac518c3 · ac518c3
2 parents c95abea + 07132a5
commit ac518c3
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 63 deletions.
diff --git a/components/recorder.js b/components/recorder.js
@@ -1,7 +1,7 @@
 // with thanks to https://medium.com/front-end-weekly/recording-audio-in-mp3-using-reactjs-under-5-minutes-5e960defaf10
 
 import MicRecorder from 'mic-recorder-to-mp3';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 import Button from 'react-bootstrap/Button';
 import {
   FaMicrophone,
@@ -33,9 +33,58 @@ function AudioViewer({ src }) {
   const containerW = useRef(null);
   const waveSurf = useRef(null);
   const volume = useRef(null);
+  let vMute;
+  let vOff;
+  let vDown;
+  let vUp;
   const play = <FaPlay style={{ paddingLeft: '2px' }} />;
   const pause = <FaPause />;
-  const vMute = (
+  const [playing, setPlay] = useState(play);
+  const [volumeIndex, changeVolume] = useState(null);
+
+  const toggleVolume = useCallback(() => {
+    if (volume.current) {
+      const volumeValue = parseFloat(volume.current.value);
+      if (volumeValue !== 0) {
+        volume.current.value = 0;
+        waveSurf.current.setVolume(volume.current.value);
+        volume.current.style.setProperty('--volumePercent', `${0}%`);
+        changeVolume(vMute);
+      } else {
+        volume.current.value = 1;
+        waveSurf.current.setVolume(volume.current.value);
+        volume.current.style.setProperty('--volumePercent', `${100}%`);
+        changeVolume(vUp);
+      }
+    }
+  }, []);
+
+  const playPause = useCallback(() => {
+    if (waveSurf.current.isPlaying()) {
+      setPlay(play);
+      waveSurf.current.pause();
+    } else {
+      setPlay(pause);
+      waveSurf.current.play();
+    }
+  }, []);
+
+  function handleVolumeChange() {
+    waveSurf.current.setVolume(volume.current.value);
+    const volumeNum = volume.current.value * 100;
+    volume.current.style.setProperty('--volumePercent', `${volumeNum}%`);
+    if (volume.current.value === 0) {
+      changeVolume(vMute);
+    } else if (volume.current.value < 0.25) {
+      changeVolume(vOff);
+    } else if (volume.current.value < 0.5) {
+      changeVolume(vDown);
+    } else if (volume.current.value < 0.75) {
+      changeVolume(vUp);
+    }
+  }
+
+  vMute = (
     <FaVolumeMute
       style={{
         width: '1.05em',
@@ -47,19 +96,19 @@ function AudioViewer({ src }) {
       onClick={toggleVolume}
     />
   );
-  const vOff = (
+  vOff = (
     <FaVolumeOff
       style={{ cursor: 'pointer', paddingRight: '9px' }}
       onClick={toggleVolume}
     />
   );
-  const vDown = (
+  vDown = (
     <FaVolumeDown
       style={{ cursor: 'pointer', paddingRight: '3px' }}
       onClick={toggleVolume}
     />
   );
-  const vUp = (
+  vUp = (
     <FaVolumeUp
       style={{
         width: '1.23em',
@@ -70,10 +119,9 @@ function AudioViewer({ src }) {
       onClick={toggleVolume}
     />
   );
-  const [playing, setPlay] = useState(play);
-  const [volumeIndex, changeVolume] = useState(vUp);
 
   useEffect(() => {
+    changeVolume(vUp);
     if (containerW.current && !waveSurf.current) {
       waveSurf.current = WaveSurfer.create({
         container: containerW.current,
@@ -101,46 +149,6 @@ function AudioViewer({ src }) {
     }
   }, []);
 
-  function handleVolumeChange() {
-    waveSurf.current.setVolume(volume.current.value);
-    const volumeNum = volume.current.value * 100;
-    volume.current.style.setProperty('--volumePercent', `${volumeNum}%`);
-    if (volume.current.value === 0) {
-      changeVolume(vMute);
-    } else if (volume.current.value < 0.25) {
-      changeVolume(vOff);
-    } else if (volume.current.value < 0.5) {
-      changeVolume(vDown);
-    } else if (volume.current.value < 0.75) {
-      changeVolume(vUp);
-    }
-  }
-
-  function toggleVolume() {
-    if (volume.current) {
-      if (volume.current.value !== 0) {
-        volume.current.value = 0;
-        waveSurf.current.setVolume(volume.current.value);
-        volume.current.style.setProperty('--volumePercent', `${0}%`);
-        changeVolume(vMute);
-      } else {
-        volume.current.value = 1;
-        waveSurf.current.setVolume(volume.current.value);
-        volume.current.style.setProperty('--volumePercent', `${100}%`);
-        changeVolume(vUp);
-      }
-    }
-  }
-
-  function playPause() {
-    if (waveSurf.current.isPlaying()) {
-      setPlay(play);
-      waveSurf.current.pause();
-    } else {
-      setPlay(pause);
-      waveSurf.current.play();
-    }
-  }
   if (waveSurf.current) {
     waveSurf.current.on('finish', () => {
       setPlay(play);

diff --git a/components/student/create/explore.js b/components/student/create/explore.js
@@ -56,10 +56,9 @@ export default function CreativityActivity() {
     useState(false);
 
   const selectedMeasure = useRef({});
-
   const setSelectedMeasure = useCallback((measure) => {
     selectedMeasure.current = measure;
-  });
+  }, []);
 
   const {
     isLoading: loaded,
@@ -106,20 +105,20 @@ export default function CreativityActivity() {
 
   const handleTonicUpdate = useCallback((data) => {
     tonicJson.current = data;
-  });
+  }, []);
 
   const handleSubdominantUpdate = useCallback((data) => {
     subdominantJson.current = data;
-  });
+  }, []);
 
   const handleDominantUpdate = useCallback((data) => {
     dominantJson.current = data;
-  });
+  }, []);
 
-  const generateVariations = useCallback(() => {
+  const generateVariations = useCallback((data) => {
     if (startedVariationGeneration) return;
     setStartedVariationGeneration(true);
-  });
+  }, []);
 
   return flatIOScoreForTransposition ? (
     <div className="cpr-create">

diff --git a/components/student/create/theoretical.js b/components/student/create/theoretical.js
@@ -1,3 +1,4 @@
+import { v4 as uuidv4 } from 'uuid';
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useMutation, useQuery } from 'react-query';
@@ -149,7 +150,7 @@ export default function CreativityActivity() {
 
   const onMerged = useCallback((mergedData) => {
     totalScoreJSON.current = mergedData;
-  });
+  }, []);
 
   function handleSubmit(i) {
     return (data) => {
@@ -194,7 +195,7 @@ export default function CreativityActivity() {
           <Col md>
             {subScores &&
               subScores.map((subScore, idx) => (
-                <div key={idx}>
+                <div key={uuidv4()}>
                   <h2 id={`step-${idx + 1}`}>Step {idx + 1}</h2>
                   <ExploratoryCompose
                     referenceScoreJSON={subScore}

diff --git a/lib/variations.js b/lib/variations.js
@@ -82,9 +82,9 @@ function correctScore(orig, key, clef, notes, div) {
   const resultAttributes =
     result['score-partwise'].part[0].measure[0].attributes[0];
 
-  Object.keys(resultScorePart).forEach((k) => {
-    if (Object.hasOwn(origScorePart, k) && k !== 'uuid') {
-      resultScorePart[k] = origScorePart[k];
+  Object.keys(resultScorePart).forEach((keyItem) => {
+    if (Object.hasOwn(origScorePart, keyItem) && keyItem !== 'uuid') {
+      resultScorePart[keyItem] = origScorePart[keyItem];
     }
   });
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
     "swr": "^1.1.2",
+    "uuid": "^10.0.0",
     "wavesurfer.js": "^7.7.15"
   },
   "devDependencies": {