Skip to content

Commit ac518c3

Browse files
hcientisthcientist
authored
Merge pull request #31 from Lab-Lab-Lab/main
Merge in the standardized format.
2 parents c95abea + 07132a5 commit ac518c3

File tree

6 files changed

+87
-63
lines changed

6 files changed

+87
-63
lines changed

‎components/recorder.js

+55-47
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// with thanks to https://medium.com/front-end-weekly/recording-audio-in-mp3-using-reactjs-under-5-minutes-5e960defaf10
22

33
import MicRecorder from 'mic-recorder-to-mp3';
4-
import { useEffect, useRef, useState } from 'react';
4+
import { useEffect, useRef, useState, useCallback } from 'react';
55
import Button from 'react-bootstrap/Button';
66
import {
77
FaMicrophone,
@@ -33,9 +33,58 @@ function AudioViewer({ src }) {
3333
const containerW = useRef(null);
3434
const waveSurf = useRef(null);
3535
const volume = useRef(null);
36+
let vMute;
37+
let vOff;
38+
let vDown;
39+
let vUp;
3640
const play = <FaPlay style={{ paddingLeft: '2px' }} />;
3741
const pause = <FaPause />;
38-
const vMute = (
42+
const [playing, setPlay] = useState(play);
43+
const [volumeIndex, changeVolume] = useState(null);
44+
45+
const toggleVolume = useCallback(() => {
46+
if (volume.current) {
47+
const volumeValue = parseFloat(volume.current.value);
48+
if (volumeValue !== 0) {
49+
volume.current.value = 0;
50+
waveSurf.current.setVolume(volume.current.value);
51+
volume.current.style.setProperty('--volumePercent', `${0}%`);
52+
changeVolume(vMute);
53+
} else {
54+
volume.current.value = 1;
55+
waveSurf.current.setVolume(volume.current.value);
56+
volume.current.style.setProperty('--volumePercent', `${100}%`);
57+
changeVolume(vUp);
58+
}
59+
}
60+
}, []);
61+
62+
const playPause = useCallback(() => {
63+
if (waveSurf.current.isPlaying()) {
64+
setPlay(play);
65+
waveSurf.current.pause();
66+
} else {
67+
setPlay(pause);
68+
waveSurf.current.play();
69+
}
70+
}, []);
71+
72+
function handleVolumeChange() {
73+
waveSurf.current.setVolume(volume.current.value);
74+
const volumeNum = volume.current.value * 100;
75+
volume.current.style.setProperty('--volumePercent', `${volumeNum}%`);
76+
if (volume.current.value === 0) {
77+
changeVolume(vMute);
78+
} else if (volume.current.value < 0.25) {
79+
changeVolume(vOff);
80+
} else if (volume.current.value < 0.5) {
81+
changeVolume(vDown);
82+
} else if (volume.current.value < 0.75) {
83+
changeVolume(vUp);
84+
}
85+
}
86+
87+
vMute = (
3988
<FaVolumeMute
4089
style={{
4190
width: '1.05em',
@@ -47,19 +96,19 @@ function AudioViewer({ src }) {
4796
onClick={toggleVolume}
4897
/>
4998
);
50-
const vOff = (
99+
vOff = (
51100
<FaVolumeOff
52101
style={{ cursor: 'pointer', paddingRight: '9px' }}
53102
onClick={toggleVolume}
54103
/>
55104
);
56-
const vDown = (
105+
vDown = (
57106
<FaVolumeDown
58107
style={{ cursor: 'pointer', paddingRight: '3px' }}
59108
onClick={toggleVolume}
60109
/>
61110
);
62-
const vUp = (
111+
vUp = (
63112
<FaVolumeUp
64113
style={{
65114
width: '1.23em',
@@ -70,10 +119,9 @@ function AudioViewer({ src }) {
70119
onClick={toggleVolume}
71120
/>
72121
);
73-
const [playing, setPlay] = useState(play);
74-
const [volumeIndex, changeVolume] = useState(vUp);
75122

76123
useEffect(() => {
124+
changeVolume(vUp);
77125
if (containerW.current && !waveSurf.current) {
78126
waveSurf.current = WaveSurfer.create({
79127
container: containerW.current,
@@ -101,46 +149,6 @@ function AudioViewer({ src }) {
101149
}
102150
}, []);
103151

104-
function handleVolumeChange() {
105-
waveSurf.current.setVolume(volume.current.value);
106-
const volumeNum = volume.current.value * 100;
107-
volume.current.style.setProperty('--volumePercent', `${volumeNum}%`);
108-
if (volume.current.value === 0) {
109-
changeVolume(vMute);
110-
} else if (volume.current.value < 0.25) {
111-
changeVolume(vOff);
112-
} else if (volume.current.value < 0.5) {
113-
changeVolume(vDown);
114-
} else if (volume.current.value < 0.75) {
115-
changeVolume(vUp);
116-
}
117-
}
118-
119-
function toggleVolume() {
120-
if (volume.current) {
121-
if (volume.current.value !== 0) {
122-
volume.current.value = 0;
123-
waveSurf.current.setVolume(volume.current.value);
124-
volume.current.style.setProperty('--volumePercent', `${0}%`);
125-
changeVolume(vMute);
126-
} else {
127-
volume.current.value = 1;
128-
waveSurf.current.setVolume(volume.current.value);
129-
volume.current.style.setProperty('--volumePercent', `${100}%`);
130-
changeVolume(vUp);
131-
}
132-
}
133-
}
134-
135-
function playPause() {
136-
if (waveSurf.current.isPlaying()) {
137-
setPlay(play);
138-
waveSurf.current.pause();
139-
} else {
140-
setPlay(pause);
141-
waveSurf.current.play();
142-
}
143-
}
144152
if (waveSurf.current) {
145153
waveSurf.current.on('finish', () => {
146154
setPlay(play);

‎components/student/create/explore.js

+6-7
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,9 @@ export default function CreativityActivity() {
5656
useState(false);
5757

5858
const selectedMeasure = useRef({});
59-
6059
const setSelectedMeasure = useCallback((measure) => {
6160
selectedMeasure.current = measure;
62-
});
61+
}, []);
6362

6463
const {
6564
isLoading: loaded,
@@ -106,20 +105,20 @@ export default function CreativityActivity() {
106105

107106
const handleTonicUpdate = useCallback((data) => {
108107
tonicJson.current = data;
109-
});
108+
}, []);
110109

111110
const handleSubdominantUpdate = useCallback((data) => {
112111
subdominantJson.current = data;
113-
});
112+
}, []);
114113

115114
const handleDominantUpdate = useCallback((data) => {
116115
dominantJson.current = data;
117-
});
116+
}, []);
118117

119-
const generateVariations = useCallback(() => {
118+
const generateVariations = useCallback((data) => {
120119
if (startedVariationGeneration) return;
121120
setStartedVariationGeneration(true);
122-
});
121+
}, []);
123122

124123
return flatIOScoreForTransposition ? (
125124
<div className="cpr-create">

‎components/student/create/theoretical.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { v4 as uuidv4 } from 'uuid';
12
import { useRouter } from 'next/router';
23
import { useCallback, useEffect, useRef, useState } from 'react';
34
import { useMutation, useQuery } from 'react-query';
@@ -149,7 +150,7 @@ export default function CreativityActivity() {
149150

150151
const onMerged = useCallback((mergedData) => {
151152
totalScoreJSON.current = mergedData;
152-
});
153+
}, []);
153154

154155
function handleSubmit(i) {
155156
return (data) => {
@@ -194,7 +195,7 @@ export default function CreativityActivity() {
194195
<Col md>
195196
{subScores &&
196197
subScores.map((subScore, idx) => (
197-
<div key={idx}>
198+
<div key={uuidv4()}>
198199
<h2 id={`step-${idx + 1}`}>Step {idx + 1}</h2>
199200
<ExploratoryCompose
200201
referenceScoreJSON={subScore}

‎lib/variations.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -82,9 +82,9 @@ function correctScore(orig, key, clef, notes, div) {
8282
const resultAttributes =
8383
result['score-partwise'].part[0].measure[0].attributes[0];
8484

85-
Object.keys(resultScorePart).forEach((k) => {
86-
if (Object.hasOwn(origScorePart, k) && k !== 'uuid') {
87-
resultScorePart[k] = origScorePart[k];
85+
Object.keys(resultScorePart).forEach((keyItem) => {
86+
if (Object.hasOwn(origScorePart, keyItem) && keyItem !== 'uuid') {
87+
resultScorePart[keyItem] = origScorePart[keyItem];
8888
}
8989
});
9090

‎package-lock.json

+19-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"redux-devtools-extension": "^2.13.8",
2828
"redux-thunk": "^2.3.0",
2929
"swr": "^1.1.2",
30+
"uuid": "^10.0.0",
3031
"wavesurfer.js": "^7.7.15"
3132
},
3233
"devDependencies": {

0 commit comments

Comments
 (0)