From f0a18d3fd3fe2e5b00724867abc428d6780eda18 Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Tue, 16 Jul 2019 16:00:43 -0400
Subject: [PATCH] Extract selection handle and playhead components from trimmer
and selector
---
.../audio-trimmer/audio-selector.jsx | 42 +++++--------------
.../audio-trimmer/audio-trimmer.css | 16 +++----
.../audio-trimmer/audio-trimmer.jsx | 40 ++++++------------
src/components/audio-trimmer/playhead.jsx | 21 ++++++++++
.../audio-trimmer/selection-handle.jsx | 28 +++++++++++++
5 files changed, 80 insertions(+), 67 deletions(-)
create mode 100644 src/components/audio-trimmer/playhead.jsx
create mode 100644 src/components/audio-trimmer/selection-handle.jsx
diff --git a/src/components/audio-trimmer/audio-selector.jsx b/src/components/audio-trimmer/audio-selector.jsx
index 65d18c31a..3a7692216 100644
--- a/src/components/audio-trimmer/audio-selector.jsx
+++ b/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>
);
diff --git a/src/components/audio-trimmer/audio-trimmer.css b/src/components/audio-trimmer/audio-trimmer.css
index 8c0e23dc6..ce7d60213 100644
--- a/src/components/audio-trimmer/audio-trimmer.css
+++ b/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 {
diff --git a/src/components/audio-trimmer/audio-trimmer.jsx b/src/components/audio-trimmer/audio-trimmer.jsx
index 87ca75a98..d9874ddd1 100644
--- a/src/components/audio-trimmer/audio-trimmer.jsx
+++ b/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>
diff --git a/src/components/audio-trimmer/playhead.jsx b/src/components/audio-trimmer/playhead.jsx
new file mode 100644
index 000000000..5b3adddd6
--- /dev/null
+++ b/src/components/audio-trimmer/playhead.jsx
@@ -0,0 +1,21 @@
+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;
diff --git a/src/components/audio-trimmer/selection-handle.jsx b/src/components/audio-trimmer/selection-handle.jsx
new file mode 100644
index 000000000..f182ce6a4
--- /dev/null
+++ b/src/components/audio-trimmer/selection-handle.jsx
@@ -0,0 +1,28 @@
+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;
--
GitLab