Spaces:
Running
Running
File size: 2,151 Bytes
f2bee8a |
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 55 56 57 58 59 60 61 62 63 |
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 AudioTrimmer = props => (
<div
className={classNames(styles.absolute, styles.trimmer)}
ref={props.containerRef}
>
{props.trimStart === null ? null : (
<Box
className={classNames(styles.absolute, styles.trimBackground, styles.startTrimBackground)}
style={{
width: `${100 * props.trimStart}%`
}}
onMouseDown={props.onTrimStartMouseDown}
onTouchStart={props.onTrimStartMouseDown}
>
<Box className={classNames(styles.absolute, styles.trimBackgroundMask)} />
<SelectionHandle
handleStyle={styles.leftHandle}
/>
</Box>
)}
{props.playhead ? (
<Playhead
playbackPosition={props.playhead}
/>
) : null}
{props.trimEnd === null ? null : (
<Box
className={classNames(styles.absolute, styles.trimBackground, styles.endTrimBackground)}
style={{
left: `${100 * props.trimEnd}%`,
width: `${100 - (100 * props.trimEnd)}%`
}}
onMouseDown={props.onTrimEndMouseDown}
onTouchStart={props.onTrimEndMouseDown}
>
<Box className={classNames(styles.absolute, styles.trimBackgroundMask)} />
<SelectionHandle
handleStyle={styles.rightHandle}
/>
</Box>
)}
</div>
);
AudioTrimmer.propTypes = {
containerRef: PropTypes.func,
onTrimEndMouseDown: PropTypes.func.isRequired,
onTrimStartMouseDown: PropTypes.func.isRequired,
playhead: PropTypes.number,
trimEnd: PropTypes.number,
trimStart: PropTypes.number
};
export default AudioTrimmer;
|