Spaces:
Running
Running
File size: 1,775 Bytes
6bcb42f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
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 SelectionHandle from './selection-handle.jsx';
import Playhead from './playhead.jsx';
const AudioSelector = props => (
<div
className={classNames(styles.absolute, styles.selector)}
ref={props.containerRef}
onMouseDown={props.onNewSelectionMouseDown}
onTouchStart={props.onNewSelectionMouseDown}
>
{props.trimStart === null ? null : (
<Box
className={classNames(styles.absolute)}
style={{
left: `${props.trimStart * 100}%`,
width: `${100 * (props.trimEnd - props.trimStart)}%`
}}
>
<Box className={classNames(styles.absolute, styles.selectionBackground)} />
<SelectionHandle
handleStyle={styles.leftHandle}
onMouseDown={props.onTrimStartMouseDown}
/>
<SelectionHandle
handleStyle={styles.rightHandle}
onMouseDown={props.onTrimEndMouseDown}
/>
</Box>
)}
{props.playhead ? (
<Playhead
playbackPosition={props.playhead}
/>
) : null}
</div>
);
AudioSelector.propTypes = {
containerRef: PropTypes.func,
onNewSelectionMouseDown: PropTypes.func.isRequired,
onTrimEndMouseDown: PropTypes.func.isRequired,
onTrimStartMouseDown: PropTypes.func.isRequired,
playhead: PropTypes.number,
trimEnd: PropTypes.number,
trimStart: PropTypes.number
};
export default AudioSelector;
|