Add touch listeners for the audio trimmers

src/components/audio-trimmer/audio-trimmer.css

@@ -16,6 +16,7 @@ $hover-scale: 2;
 
 .trim-background {
     cursor: pointer;
+    touch-action: none;
 }
 
 .trim-background-mask {

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

@@ -17,6 +17,7 @@ const AudioTrimmer = props => (
                     width: `${100 * props.trimStart}%`
                 }}
                 onMouseDown={props.onTrimStartMouseDown}
+                onTouchStart={props.onTrimStartMouseDown}
             >
                 <Box className={classNames(styles.absolute, styles.trimBackgroundMask)} />
                 <Box className={classNames(styles.trimLine, styles.startTrimLine)}>
@@ -47,6 +48,7 @@ const AudioTrimmer = props => (
                     width: `${100 - (100 * props.trimEnd)}%`
                 }}
                 onMouseDown={props.onTrimEndMouseDown}
+                onTouchStart={props.onTrimEndMouseDown}
             >
                 <Box className={classNames(styles.absolute, styles.trimBackgroundMask)} />
                 <Box className={classNames(styles.trimLine, styles.endTrimLine)}>

src/containers/audio-trimmer.jsx

@@ -2,6 +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';
 
 class AudioTrimmer extends React.Component {
     constructor (props) {
@@ -18,14 +19,14 @@ class AudioTrimmer extends React.Component {
     }
     handleTrimStartMouseMove (e) {
         const containerSize = this.containerElement.getBoundingClientRect().width;
-        const dx = (e.clientX - this.initialX) / containerSize;
+        const dx = (getEventXY(e).x - this.initialX) / containerSize;
         const newTrim = Math.max(0, Math.min(this.props.trimEnd, this.initialTrim + dx));
         this.props.onSetTrimStart(newTrim);
         e.preventDefault();
     }
     handleTrimEndMouseMove (e) {
         const containerSize = this.containerElement.getBoundingClientRect().width;
-        const dx = (e.clientX - this.initialX) / containerSize;
+        const dx = (getEventXY(e).x - this.initialX) / containerSize;
         const newTrim = Math.min(1, Math.max(this.props.trimStart, this.initialTrim + dx));
         this.props.onSetTrimEnd(newTrim);
         e.preventDefault();
@@ -33,22 +34,30 @@ class AudioTrimmer extends React.Component {
     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 = e.clientX;
+        this.initialX = getEventXY(e).x;
         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);
     }
     handleTrimEndMouseDown (e) {
-        this.initialX = e.clientX;
+        this.initialX = getEventXY(e).x;
         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);
     }
     storeRef (el) {
         this.containerElement = el;

src/lib/touch-utils.js

+const getEventXY = e => {
+    if (e.touches && e.touches[0]) {
+        return {x: e.touches[0].clientX, y: e.touches[0].clientY};
+    } else if (e.changedTouches && e.changedTouches[0]) {
+        return {x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY};
+    }
+    return {x: e.clientX, y: e.clientY};
+};
+
+export {
+    getEventXY
+};