I’m mostly looking for opinion if my project is “react enough”, i.e something isn’t done by react standards, but any feedback is greatly appreciated in advance.
Here’s a pen.
2 Likes
To compare it with element being clicked. If some element is being clicked, then corresponding sound is being played. Should i just hardcoded them?Example:
switch (e.target.id) {
case "Heater-1":
this.sounds.sound1.volume = this.state.volume;
this.sounds.sound1.play();
if(this.state.volume===0){
displayId = null;
}
else{
displayId = e.target.id;
}
break;
rest of code****
Or should i just outright, make arrays/object containing all ids and loop through them?
When your device is off, you can despite that increase volume, thus when you turn back on, it remembers that increased value. And on the slider side, you can increase volume i.e. move switch despite it’s turned off.
Light buttons when is turned of, ok, i’ll do change that.
About manual refs, not sure what you talking about … See, i’m new to React and at you suggestion in previous post, i looked at documentation … Is this some advanced technique? I’m just curious, don’t know any better.
Question: Should i use just for example this.H1.current as a “hook” of sorts or ReactDOM.findDOMNode(this.H1.current) which i saw somewhere that it need to be mounted/dismounted as event listeners do? Both produce same results:
console.log(this.H1.current.id);
and
console.log(ReactDOM.findDOMNode(this.H1.current).id);
Both of them in console display id.
Edit1: When i click with mouse, i don’t actually click on audio element, i click on it’s parent. So i must either compare it with harcoded id or with id taken from some array which position corresponds to it index i.e. position of case statement. Either way, it’s hardcoding. Long story/short: So i should either hardcode refs or id’s?
Edit2: I could use
.parentNode.id
on audio ref to get id which is later displayed in display component. But should i? Not sure if it’s this count towards as “directly manipulating dom”?
I think i managed to “repair” everything you suggested. Care to take a look again?
Cool! That takes burden from my heart.
Second thing: I think it’s gotta do of how long sound it is. For example, sound with id “Heater-1” have about quarter of its timeline a silence at the end. So i either crop the silence or stop it playing(sound) whenever is subsequently is clicked. Since it’s hosted outside my reach, i guess i should proceed with latter?
Done.
Before:
playAudio(par1, par2, par3){//Par1 is index of an given element be that be audio or outer div. Par2 is this.state.volume and Par3 is element itself.
//Assign par1 as index to know which element(by ref) should 'engage'.
sounds[par1].volume = par2;//After element is 'engaged', set it's volume.
sounds[par1].play();//After element is 'engaged', set it's to play.
return arguments;
}
After:
playAudio(par1, par2, par3){//Par1 is index of an given element be that be audio or outer div. Par2 is this.state.volume and Par3 is element itself.
//Assign par1 as index to know which element(by ref) should 'engage'.
sounds[par1].volume = par2;//After element is 'engaged', set it's volume.
sounds[par1].currentTime = 0;//Added this so you may for example, play sound 5 times subsequently.
sounds[par1].play();//After element is 'engaged', set it's to play.
return arguments;
}
1 Like
I also added an loop for refs, so if need adding more refs for whatever reason, person should just add them in said array.
//Constructor and it's things ...
//An array of all refs of audio elements.
this.audioRefs = [];
for(let elem in this.pads.reff){
this[elem] = React.createRef();
this.audioRefs.push(this[elem]);
}
}
componentDidMount() {
//Set event listeners for keypress
window.addEventListener("keyup", this.keyPress);
//Gather all audio objects through their respective refs.
for(let elem in this.audioRefs){
sounds.push(ReactDOM.findDOMNode(this[elem].current));
}
}
Now for componentWillUnmount() lifecycle method there’s no mention of disposing refs in documentation … In fact, i didn’t find anywhere how to dispose an array of disposable elements so to speak … That in fact if i need to explicitly dispose refs? Also in refs in documentation there is mounting of refs but there is no unmounting. Should i just “not unmount them”? Edit1: I also have global variable array “sounds” n which i put created refs. Should i use global in this case? Declaring constants will not do, nor declaring as “this.sounds = [];” in constructor. It says undefined … There;s also possibility to setState and not using this global. But should i do that? Should setState instead using global variable sounds? Edit2: Discard what i’m said about setState. It doesn’t work … Still … is there a alternative to using global variable in this case? Edit3: I also browsed again through refs documentation and didn’t find sign of use of “findDOMNode” in connection with refs, at least not in my example to play audios, so that’s a mistake from my side.
Well, i solved my problem concerning variable saying “undefined”. It’s because i didn’t used and arrow function inside a setTimeout and because of that and don’t have to use global variable called “sounds” anymore. And after sifting through various posts and documentation itself,
isn’t required(in my case) for use with refs.
Summary: There’s no “quirks” anymore, just one more final check and it of it goes.