|
| 1 | +import cuid from 'cuid'; |
| 2 | +import React, { useEffect, useRef, useState } from 'react'; |
| 3 | +import { Portal } from 'App/shared/Portal'; |
| 4 | +import { getGrid } from 'utils/getGrid'; |
| 5 | +import { Button } from 'App/shared/Button'; |
| 6 | +import { useTouchAndMouse } from 'hooks/useTouchAndMouse'; |
| 7 | +import { Knob } from './Knob'; |
| 8 | +import { useSelector } from 'react-redux'; |
| 9 | +import { Kit } from 'App/Tone'; |
| 10 | + |
| 11 | +export const FX = () => { |
| 12 | + const grid = getGrid(9); |
| 13 | + return ( |
| 14 | + <Portal targetId='overGridPortal'> |
| 15 | + <div id='mixer' className='mixer'> |
| 16 | + <div className='fxSamples'> |
| 17 | + {grid.map((i) => { |
| 18 | + return <FXSample key={cuid.slug()} i={i} />; |
| 19 | + })} |
| 20 | + </div> |
| 21 | + </div> |
| 22 | + </Portal> |
| 23 | + ); |
| 24 | +}; |
| 25 | + |
| 26 | +const FXSample = ({ i }) => { |
| 27 | + // const kitName = useSelector((state) => state.sequence.present.kit); |
| 28 | + // const sample = useSelector((state) => state.assets.kits[kitName].samples[i]); |
| 29 | + const sample = Kit.samples[i]; |
| 30 | + console.log(sample); |
| 31 | + |
| 32 | + const [edit, setEdit] = useState('filter'); |
| 33 | + const { value, startFunc, moveFunc, endFunc } = useRotaryKnob(); |
| 34 | + const touchAndMouse = useTouchAndMouse(startFunc, moveFunc, endFunc); |
| 35 | + useApplyFX(i, value); |
| 36 | + |
| 37 | + const onClick = (type) => setEdit(type); |
| 38 | + |
| 39 | + const id = `fxSample${i}`; |
| 40 | + return ( |
| 41 | + <div id={id} className='fxSample'> |
| 42 | + <p>{sample.name}</p> |
| 43 | + <div className='knob-wrapper'> |
| 44 | + <div className='knob' id='length-knob' {...touchAndMouse}> |
| 45 | + <label htmlFor='length-knob'>{edit}</label> |
| 46 | + <Knob value={value} /> |
| 47 | + </div> |
| 48 | + </div> |
| 49 | + <div className='smallBtns'> |
| 50 | + <FXButton type='delay' edit={edit} onClick={() => onClick('delay')}> |
| 51 | + delay |
| 52 | + </FXButton> |
| 53 | + <FXButton type='reverb' edit={edit} onClick={() => onClick('reverb')}> |
| 54 | + reverb |
| 55 | + </FXButton> |
| 56 | + </div> |
| 57 | + <div className={`fxSampleBorder border${i}`} /> |
| 58 | + </div> |
| 59 | + ); |
| 60 | +}; |
| 61 | + |
| 62 | +const useApplyFX = (i, value) => { |
| 63 | + useEffect(() => { |
| 64 | + Kit.samples[i].filter.set({ frequency: (20000 * value) / 100 }); |
| 65 | + }, [i, value]); |
| 66 | +}; |
| 67 | + |
| 68 | +const useRotaryKnob = () => { |
| 69 | + const [value, setValue] = useState(100); |
| 70 | + |
| 71 | + const prevYRef = useRef(null); |
| 72 | + |
| 73 | + const startFunc = (e) => { |
| 74 | + prevYRef.current = getY(e); |
| 75 | + }; |
| 76 | + const moveFunc = (e) => { |
| 77 | + const newY = getY(e); |
| 78 | + let amount = getKnobAmount(newY, prevYRef.current); |
| 79 | + prevYRef.current = newY; |
| 80 | + setValue((value) => { |
| 81 | + let newVal = value + amount; |
| 82 | + if (newVal < 0) newVal = 0; |
| 83 | + if (newVal > 100) newVal = 100; |
| 84 | + return newVal; |
| 85 | + }); |
| 86 | + }; |
| 87 | + const endFunc = () => { |
| 88 | + prevYRef.current = null; |
| 89 | + }; |
| 90 | + |
| 91 | + return { value, startFunc, moveFunc, endFunc }; |
| 92 | +}; |
| 93 | + |
| 94 | +const FXButton = ({ type, edit, onClick }) => { |
| 95 | + const id = `fx${type}`; |
| 96 | + const classes = edit === type ? 'active' : ''; |
| 97 | + return ( |
| 98 | + <Button id={id} classes={classes} edit={type} onClick={onClick}> |
| 99 | + <label htmlFor={id}>{type.substr(0, 1)}</label> |
| 100 | + </Button> |
| 101 | + ); |
| 102 | +}; |
| 103 | + |
| 104 | +const getY = (e) => { |
| 105 | + let y; |
| 106 | + if (e.touches) y = e.touches[0].clientY; |
| 107 | + else y = e.clientY; |
| 108 | + return y; |
| 109 | +}; |
| 110 | + |
| 111 | +const getKnobAmount = (newY, prevY) => { |
| 112 | + let amount = prevY - newY; |
| 113 | + return amount; |
| 114 | +}; |
0 commit comments