Move to using 0-1 instead of 0-100 range for trim

src/components/audio-trimmer/audio-trimmer.jsx

@@ -13,7 +13,7 @@ const AudioTrimmer = props => (
         <Box
             className={classNames(styles.trimBackground, styles.startTrimBackground)}
             style={{
-                width: `${props.trimStart}%`
+                width: `${100 * props.trimStart}%`
             }}
             onMouseDown={props.onTrimStartMouseDown}
         >
@@ -32,7 +32,7 @@ const AudioTrimmer = props => (
             <Box
                 className={classNames(styles.trimLine, styles.playhead)}
                 style={{
-                    left: `${props.playhead}%`
+                    left: `${100 * props.playhead}%`
                 }}
             />
         ) : null}
@@ -40,8 +40,8 @@ const AudioTrimmer = props => (
         <Box
             className={classNames(styles.trimBackground, styles.endTrimBackground)}
             style={{
-                left: `${props.trimEnd}%`,
-                width: `${100 - props.trimEnd}%`
+                left: `${100 * props.trimEnd}%`,
+                width: `${100 - 100 * props.trimEnd}%`
             }}
             onMouseDown={props.onTrimEndMouseDown}
         >

src/containers/audio-trimmer.jsx

@@ -17,14 +17,14 @@ class AudioTrimmer extends React.Component {
     }
     handleTrimStartMouseMove (e) {
         const containerSize = this.containerElement.getBoundingClientRect().width;
-        const dx = 100 * (e.clientX - this.initialX) / containerSize;
-        const newTrim = Math.max(1, Math.min(this.props.trimEnd, this.initialTrim + dx));
+        const dx = (e.clientX - this.initialX) / containerSize;
+        const newTrim = Math.max(0.01, Math.min(this.props.trimEnd, this.initialTrim + dx));
         this.props.onSetTrimStart(newTrim);
     }
     handleTrimEndMouseMove (e) {
         const containerSize = this.containerElement.getBoundingClientRect().width;
-        const dx = 100 * (e.clientX - this.initialX) / containerSize;
-        const newTrim = Math.min(99, Math.max(this.props.trimStart, this.initialTrim + dx));
+        const dx = (e.clientX - this.initialX) / containerSize;
+        const newTrim = Math.min(0.99, Math.max(this.props.trimStart, this.initialTrim + dx));
         this.props.onSetTrimEnd(newTrim);
     }
     handleTrimStartMouseUp () {

src/containers/record-modal.jsx

@@ -66,8 +66,8 @@ class RecordModal extends React.Component {
     handleSubmit () {
         this.setState({encoding: true}, () => {
             const sampleCount = this.state.samples.length;
-            const startIndex = Math.floor(this.state.trimStart * sampleCount / 100);
-            const endIndex = Math.floor(this.state.trimEnd * sampleCount / 100);
+            const startIndex = Math.floor(this.state.trimStart * sampleCount);
+            const endIndex = Math.floor(this.state.trimEnd * sampleCount);
             const clippedSamples = this.state.samples.slice(startIndex, endIndex);
             WavEncoder.encode({
                 sampleRate: this.state.sampleRate,

src/lib/audio/audio-buffer-player.js

@@ -16,8 +16,8 @@ class AudioBufferPlayer {
         this.trimEnd = trimEnd;
         this.startTime = Date.now();
 
-        const trimStartTime = this.buffer.duration * trimStart / 100;
-        const trimmedDuration = this.buffer.duration * trimEnd / 100 - trimStartTime;
+        const trimStartTime = this.buffer.duration * trimStart;
+        const trimmedDuration = this.buffer.duration * trimEnd - trimStartTime;
 
         this.source = this.audioContext.createBufferSource();
         this.source.onended = onEnded;
@@ -30,7 +30,7 @@ class AudioBufferPlayer {
 
     update () {
         const timeSinceStart = (Date.now() - this.startTime) / 1000;
-        const percentage = 100 * timeSinceStart / this.buffer.duration;
+        const percentage = timeSinceStart / this.buffer.duration;
         if (percentage + this.trimStart < this.trimEnd && this.source.onended) {
             requestAnimationFrame(this.update.bind(this));
             this.updateCallback(percentage + this.trimStart);

src/lib/audio/audio-recorder.js

@@ -102,8 +102,8 @@ class AudioRecorder {
             }
         }
 
-        const trimStart = 100 * Math.max(2, firstChunkAboveThreshold - 2) / this.buffers.length;
-        const trimEnd = 100 * Math.min(this.buffers.length - 2, lastChunkAboveThreshold + 2) / this.buffers.length;
+        const trimStart = Math.max(2, firstChunkAboveThreshold - 2) / this.buffers.length;
+        const trimEnd = Math.min(this.buffers.length - 2, lastChunkAboveThreshold + 2) / this.buffers.length;
 
         const buffer = new Float32Array(this.buffers.length * this.bufferLength);