Extract selection handle and playhead components from trimmer and selector

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

@@ -3,7 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 import Box from '../box/box.jsx';
 import styles from './audio-trimmer.css';
-import handleIcon from './icon--handle.svg';
+import SelectionHandle from './selection-handle.jsx';
+import Playhead from './playhead.jsx';
 
 const AudioSelector = props => (
     <div
@@ -21,41 +22,20 @@ const AudioSelector = props => (
                 }}
             >
                 <Box className={classNames(styles.absolute, styles.selectionBackground)} />
-                <Box
-                    className={classNames(styles.trimLine, styles.startSelectionLine)}
+                <SelectionHandle
+                    handleStyle={styles.leftHandle}
                     onMouseDown={props.onTrimStartMouseDown}
-                    onTouchStart={props.onTrimStartMouseDown}
-                >
-                    <Box className={classNames(styles.trimHandle, styles.topTrimHandle, styles.startTrimHandle)}>
-                        <img src={handleIcon} />
-                    </Box>
-                    <Box className={classNames(styles.trimHandle, styles.bottomTrimHandle, styles.startTrimHandle)}>
-                        <img src={handleIcon} />
-                    </Box>
-                </Box>
-                <Box
-                    className={classNames(styles.trimLine, styles.endSelectionLine)}
+                />
+                <SelectionHandle
+                    handleStyle={styles.rightHandle}
                     onMouseDown={props.onTrimEndMouseDown}
-                    onTouchStart={props.onTrimEndMouseDown}
-                >
-                    <Box className={classNames(styles.trimHandle, styles.topTrimHandle, styles.endTrimHandle)}>
-                        <img src={handleIcon} />
-                    </Box>
-                    <Box className={classNames(styles.trimHandle, styles.bottomTrimHandle, styles.endTrimHandle)}>
-                        <img src={handleIcon} />
-                    </Box>
-                </Box>
+                />
             </Box>
         )}
         {props.playhead ? (
-            <div className={styles.playheadContainer}>
-                <div
-                    className={classNames(styles.trimLine, styles.playhead)}
-                    style={{
-                        transform: `translateX(${100 * props.playhead}%)`
-                    }}
-                />
-            </div>
+            <Playhead
+                playbackPosition={props.playhead}
+            />
         ) : null}
     </div>
 );

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

@@ -88,20 +88,20 @@ $hover-scale: 2;
     border-right: none;
 }
 
-.start-trim-line {
-    right: 0;
+.selector .left-handle {
+    left: 0
 }
 
-.start-selection-line {
-    left: 0;
+.selector .right-handle {
+    right: 0
 }
 
-.end-trim-line {
-    left: 0;
+.trimmer .left-handle {
+    right: 0
 }
 
-.end-selection-line {
-    right: 0;
+.trimmer .right-handle {
+    left: 0
 }
 
 .trim-handle {

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

@@ -3,11 +3,12 @@ import React from 'react';
 import classNames from 'classnames';
 import Box from '../box/box.jsx';
 import styles from './audio-trimmer.css';
-import handleIcon from './icon--handle.svg';
+import SelectionHandle from './selection-handle.jsx';
+import Playhead from './playhead.jsx';
 
 const AudioTrimmer = props => (
     <div
-        className={styles.absolute}
+        className={classNames(styles.absolute, styles.trimmer)}
         ref={props.containerRef}
     >
         {props.trimStart === null ? null : (
@@ -20,28 +21,16 @@ const AudioTrimmer = props => (
                 onTouchStart={props.onTrimStartMouseDown}
             >
                 <Box className={classNames(styles.absolute, styles.trimBackgroundMask)} />
-                <Box className={classNames(styles.trimLine, styles.startTrimLine)}>
-                    <Box className={classNames(styles.trimHandle, styles.topTrimHandle, styles.startTrimHandle)}>
-                        <img src={handleIcon} />
-                    </Box>
-                    <Box className={classNames(styles.trimHandle, styles.bottomTrimHandle, styles.startTrimHandle)}>
-                        <img src={handleIcon} />
-                    </Box>
-                </Box>
+                <SelectionHandle
+                    handleStyle={styles.leftHandle}
+                />
             </Box>
         )}
-
         {props.playhead ? (
-            <div className={styles.playheadContainer}>
-                <div
-                    className={classNames(styles.trimLine, styles.playhead)}
-                    style={{
-                        transform: `translateX(${100 * props.playhead}%)`
-                    }}
-                />
-            </div>
+            <Playhead
+                playbackPosition={props.playhead}
+            />
         ) : null}
-
         {props.trimEnd === null ? null : (
             <Box
                 className={classNames(styles.absolute, styles.trimBackground, styles.endTrimBackground)}
@@ -53,14 +42,9 @@ const AudioTrimmer = props => (
                 onTouchStart={props.onTrimEndMouseDown}
             >
                 <Box className={classNames(styles.absolute, styles.trimBackgroundMask)} />
-                <Box className={classNames(styles.trimLine, styles.endTrimLine)}>
-                    <Box className={classNames(styles.trimHandle, styles.topTrimHandle, styles.endTrimHandle)}>
-                        <img src={handleIcon} />
-                    </Box>
-                    <Box className={classNames(styles.trimHandle, styles.bottomTrimHandle, styles.endTrimHandle)}>
-                        <img src={handleIcon} />
-                    </Box>
-                </Box>
+                <SelectionHandle
+                    handleStyle={styles.rightHandle}
+                />
             </Box>
         )}
     </div>

src/components/audio-trimmer/playhead.jsx

+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './audio-trimmer.css';
+
+const Playhead = props => (
+    <div className={styles.playheadContainer}>
+        <div
+            className={classNames(styles.trimLine, styles.playhead)}
+            style={{
+                transform: `translateX(${100 * props.playbackPosition}%)`
+            }}
+        />
+    </div>
+);
+
+Playhead.propTypes = {
+    playbackPosition: PropTypes.number
+};
+
+export default Playhead;

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

+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import Box from '../box/box.jsx';
+import styles from './audio-trimmer.css';
+import handleIcon from './icon--handle.svg';
+
+const SelectionHandle = props => (
+    <Box
+        className={classNames(styles.trimLine, props.handleStyle)}
+        onMouseDown={props.onMouseDown}
+        onTouchStart={props.onMouseDown}
+    >
+        <Box className={classNames(styles.trimHandle, styles.topTrimHandle)}>
+            <img src={handleIcon} />
+        </Box>
+        <Box className={classNames(styles.trimHandle, styles.bottomTrimHandle)}>
+            <img src={handleIcon} />
+        </Box>
+    </Box>
+);
+
+SelectionHandle.propTypes = {
+    handleStyle: PropTypes.string,
+    onMouseDown: PropTypes.func
+};
+
+export default SelectionHandle;