audio trim points: parse float, debounce

components/AudioPlotter.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useCallback } from 'react'
 
 import { AudioBuffer, AudioPeaks, MIN_BANDS, MAX_BANDS, DEFAULT_BANDS } from './AudioAnalyzer'
 import SvgFromAudioPeaks, {
@@ -10,7 +10,7 @@ import SvgFromAudioPeaks, {
   STROKE_WIDTH_STEP,
   calcMaxStrokeWidth,
 } from './SvgFromAudioPeaks'
-import { svgDomNodeToBlob } from '../util'
+import { debounce, Try, svgDomNodeToBlob } from '../util'
 
 const isDev = process.env.NODE_ENV === 'development'
 const DEV_HTTP_FETCH = false // do network calls even in dev mode, to test that it works
@@ -29,17 +29,20 @@ export default function AudioPlotter() {
   const [imgHeight, setImgHeight] = useState(DEFAULT_HEIGHT)
   const [numBands, setNumBands] = useState(DEFAULT_BANDS)
   const [audioTrimPoints, setAudioTrimPoints] = useState([0, 0])
+  const [audioTrimPointsDebounced, setAudioTrimPointsDebounced] = useState([0, 0])
   const [doNormalize, setDoNormalize] = useState(true)
   const [visStyle, setVisStyle] = useState(DEFAULT_VIS_STYLE)
   const [strokeWidth, setStrokeWidthRaw] = useState(DEFAULT_STROKE_WIDTH)
   const [addCaps, setAddCaps] = useState(true)
+
   // NOTE: The "Go" button is needed, because we can use Browser audio API only after a user interaction!
   const [runAnalysis, setRunAnalysis] = useState(false)
   // other state
   const [svgBlobURL, setSvgBlobURL] = useState(null)
   const svgEl = useRef(null)
 
   // related fields:
+  // * stroke width
   const maxStrokeWidth = calcMaxStrokeWidth(numBands)
   function setStrokeWidth(num) {
     setStrokeWidthRaw(num < maxStrokeWidth ? num : maxStrokeWidth)
@@ -48,6 +51,18 @@ export default function AudioPlotter() {
     if (strokeWidth > maxStrokeWidth) setStrokeWidthRaw(maxStrokeWidth)
   }, [numBands])
 
+  // * audio trim points
+  const debounceAudioTrimPoints = useCallback(
+    debounce((atp) => setAudioTrimPointsDebounced(atp), 50),
+    []
+  )
+  const onChangeTrimStart = (event, where = 'start') => {
+    const val = Try(() => parseFloat(event.target.value, 10))
+    setAudioTrimPoints((atp) => (where === 'start' ? [val, atp[1]] : [atp[0], val]))
+    debounceAudioTrimPoints((atp) => (where === 'start' ? [val, atp[1]] : [atp[0], val]))
+  }
+  const onChangeTrimEnd = (event) => onChangeTrimStart(event, 'end')
+
   // FIXME: does not work on initial render… either find the correct way to hook it up,
   //        or make a "display SVG with download button" wrapper that should be up to date always?
   // alternative: *only* make that blob from React.renderToString(<svg/>) and embed this in the DOM. should save memory and be fast enough?
@@ -164,7 +179,7 @@ export default function AudioPlotter() {
                           id="inputTrimStart"
                           labelTxt="trim start"
                           value={audioTrimPoints[0]}
-                          onChange={({ target: { value: v } }) => setAudioTrimPoints((a) => [v, a[1]])}
+                          onChange={onChangeTrimStart}
                           required
                           min={0}
                           max={99.99}
@@ -176,7 +191,7 @@ export default function AudioPlotter() {
                           id="inputTrimEnd"
                           labelTxt="trim end"
                           value={audioTrimPoints[1]}
-                          onChange={({ target: { value: v } }) => setAudioTrimPoints((a) => [a[0], v])}
+                          onChange={onChangeTrimEnd}
                           required
                           min={0}
                           max={99.99}
@@ -242,7 +257,12 @@ export default function AudioPlotter() {
                   <hr />
                 </div>
 
-                <AudioPeaks buffer={buffer} bands={numBands} normalize={doNormalize} trimPoints={audioTrimPoints}>
+                <AudioPeaks
+                  buffer={buffer}
+                  bands={numBands}
+                  normalize={doNormalize}
+                  trimPoints={audioTrimPointsDebounced}
+                >
                   {({ peaks, decodeError }) => {
                     if (decodeError) return <ErrorMessage error={decodeError} />
                     return (

package.json

@@ -15,6 +15,7 @@
     "audio-buffer-utils": "^5.1.2",
     "audio-context": "^1.0.3",
     "bootstrap": "^5.0.0-beta3",
+    "lodash.debounce": "^4.0.8",
     "next": "10.1.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",

util/index.js

@@ -1 +1,4 @@
+export { default as debounce } from 'lodash.debounce'
+
+export { default as Try } from './Try'
 export { default as svgDomNodeToBlob } from './svgDomNodeToBlob'