Use DragRecognizer in AudioTrimmer

Author: ericrosenbaum

src/containers/audio-trimmer.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import bindAll from 'lodash.bindall';
 import AudioTrimmerComponent from '../components/audio-trimmer/audio-trimmer.jsx';
-import {getEventXY} from '../lib/touch-utils';
+import DragRecognizer from '../lib/drag-recognizer';
 
 const MIN_LENGTH = 0.01; // Used to stop sounds being trimmed smaller than 1%
 
@@ -14,54 +14,39 @@ class AudioTrimmer extends React.Component {
             'handleTrimEndMouseDown',
             'handleTrimStartMouseMove',
             'handleTrimEndMouseMove',
-            'handleTrimStartMouseUp',
-            'handleTrimEndMouseUp',
             'storeRef'
         ]);
+        this.trimStartDragRecognizer = new DragRecognizer({
+            onDrag: this.handleTrimStartMouseMove,
+            touchDragAngle: 90,
+            distanceThreshold: 0
+        });
+        this.trimEndDragRecognizer = new DragRecognizer({
+            onDrag: this.handleTrimEndMouseMove,
+            touchDragAngle: 90,
+            distanceThreshold: 0
+        });
+
     }
-    handleTrimStartMouseMove (e) {
-        const containerSize = this.containerElement.getBoundingClientRect().width;
-        const dx = (getEventXY(e).x - this.initialX) / containerSize;
+    handleTrimStartMouseMove (currentOffset, initialOffset) {
+        const dx = (currentOffset.x - initialOffset.x) / this.containerSize;
         const newTrim = Math.max(0, Math.min(this.props.trimEnd - MIN_LENGTH, this.initialTrim + dx));
         this.props.onSetTrimStart(newTrim);
-        e.preventDefault();
     }
-    handleTrimEndMouseMove (e) {
-        const containerSize = this.containerElement.getBoundingClientRect().width;
-        const dx = (getEventXY(e).x - this.initialX) / containerSize;
+    handleTrimEndMouseMove (currentOffset, initialOffset) {
+        const dx = (currentOffset.x - initialOffset.x) / this.containerSize;
         const newTrim = Math.min(1, Math.max(this.props.trimStart + MIN_LENGTH, this.initialTrim + dx));
         this.props.onSetTrimEnd(newTrim);
-        e.preventDefault();
-    }
-    handleTrimStartMouseUp () {
-        window.removeEventListener('mousemove', this.handleTrimStartMouseMove);
-        window.removeEventListener('mouseup', this.handleTrimStartMouseUp);
-        window.removeEventListener('touchmove', this.handleTrimStartMouseMove);
-        window.removeEventListener('touchend', this.handleTrimStartMouseUp);
-    }
-    handleTrimEndMouseUp () {
-        window.removeEventListener('mousemove', this.handleTrimEndMouseMove);
-        window.removeEventListener('mouseup', this.handleTrimEndMouseUp);
-        window.removeEventListener('touchmove', this.handleTrimEndMouseMove);
-        window.removeEventListener('touchend', this.handleTrimEndMouseUp);
     }
     handleTrimStartMouseDown (e) {
-        this.initialX = getEventXY(e).x;
+        this.containerSize = this.containerElement.getBoundingClientRect().width;
+        this.trimStartDragRecognizer.start(e);
         this.initialTrim = this.props.trimStart;
-        window.addEventListener('mousemove', this.handleTrimStartMouseMove);
-        window.addEventListener('mouseup', this.handleTrimStartMouseUp);
-        window.addEventListener('touchmove', this.handleTrimStartMouseMove);
-        window.addEventListener('touchend', this.handleTrimStartMouseUp);
-        e.preventDefault();
     }
     handleTrimEndMouseDown (e) {
-        this.initialX = getEventXY(e).x;
+        this.containerSize = this.containerElement.getBoundingClientRect().width;
+        this.trimEndDragRecognizer.start(e);
         this.initialTrim = this.props.trimEnd;
-        window.addEventListener('mousemove', this.handleTrimEndMouseMove);
-        window.addEventListener('mouseup', this.handleTrimEndMouseUp);
-        window.addEventListener('touchmove', this.handleTrimEndMouseMove);
-        window.addEventListener('touchend', this.handleTrimEndMouseUp);
-        e.preventDefault();
     }
     storeRef (el) {
         this.containerElement = el;