diff options
Diffstat (limited to 'animism-align/frontend/app/views/editor/align/containers')
| -rw-r--r-- | animism-align/frontend/app/views/editor/align/containers/sidebar.container.js | 42 | ||||
| -rw-r--r-- | animism-align/frontend/app/views/editor/align/containers/timeline.container.js | 196 |
2 files changed, 0 insertions, 238 deletions
diff --git a/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js b/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js deleted file mode 100644 index 8ff8181..0000000 --- a/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js +++ /dev/null @@ -1,42 +0,0 @@ -import React, { Component } from 'react' -import { connect } from 'react-redux' -// import { Link } from 'react-router-dom' - -import actions from 'app/actions' - -import Script from '../components/sidebar/script.component.js' -import TableOfContents from '../components/sidebar/tableOfContents.component.js' -import WaveUpload from '../components/sidebar/waveUpload.component.js' - -class Sidebar extends Component { - state = { - mode: "toc", - } - componentDidMount(){ - if (!this.props.peaks.length) { - this.setState({ mode: "wav" }) - } - } - - render() { - const { mode } = this.state - return ( - <div className='sidebar'> - <div className='buttons'> - <button onClick={() => this.setState({ mode: "txt" })}>text</button> - <button onClick={() => this.setState({ mode: "wav" })}>wav</button> - <button onClick={() => this.setState({ mode: "toc" })}>contents</button> - </div> - {mode === 'toc' && <TableOfContents />} - {mode === 'txt' && <Script />} - {mode === 'wav' && <WaveUpload />} - </div> - ) - } -} - -const mapStateToProps = state => ({ - peaks: state.align.peaks, -}) - -export default connect(mapStateToProps)(Sidebar) diff --git a/animism-align/frontend/app/views/editor/align/containers/timeline.container.js b/animism-align/frontend/app/views/editor/align/containers/timeline.container.js deleted file mode 100644 index dbef60f..0000000 --- a/animism-align/frontend/app/views/editor/align/containers/timeline.container.js +++ /dev/null @@ -1,196 +0,0 @@ -import React, { Component } from 'react' -// import { Link } from 'react-router-dom' -import { connect } from 'react-redux' - -import actions from 'app/actions' - -import Annotations from 'app/views/editor/annotation/annotations.container' -import Waveform from '../components/timeline/waveform.component' -import Ticks from '../components/timeline/ticks.component' -import Cursor from '../components/timeline/cursor.component' -import PlayCursor from '../components/timeline/playCursor.component' -import CursorRegion from '../components/timeline/cursorRegion.component' - -import { WAVEFORM_SIZE, ZOOM_STEPS, INNER_HEIGHT } from 'app/constants' -import { clamp } from 'app/utils' -import { positionToTime } from 'app/utils/align.utils' - -class Timeline extends Component { - state = { - dragging: false, - a_ts: -1, - } - constructor(props){ - super(props) - this.handleKeydown = this.handleKeydown.bind(this) - this.handleMouseMove = this.handleMouseMove.bind(this) - this.handleWheel = this.handleWheel.bind(this) - this.handleContainerClick = this.handleContainerClick.bind(this) - this.handleTimelineMouseDown = this.handleTimelineMouseDown.bind(this) - this.handleTimelineMouseUp = this.handleTimelineMouseUp.bind(this) - } - componentDidMount() { - this.bind() - } - componentWillUnmount() { - this.unbind() - } - shouldComponentUpdate(nextProps) { - return ( - nextProps.timeline !== this.props.timeline || - nextProps.annotation !== this.props.annotation - ) - } - bind() { - document.addEventListener('keydown', this.handleKeydown) - } - unbind() { - document.removeEventListener('keydown', this.handleKeydown) - } - handleKeydown(e) { - if (document.activeElement !== document.body) { - return - } - console.log(e.keyCode) - if (e.metaKey && this.props.selectedAnnotation.id) { - const { selectedAnnotation } = this.props - switch (e.keyCode) { - case 38: // up - e.preventDefault() - selectedAnnotation.start_ts = Math.max(selectedAnnotation.start_ts - (e.shiftKey ? 1 : 0.1), 0) - actions.align.updateSelectedAnnotation(selectedAnnotation) - actions.audio.seek(selectedAnnotation.start_ts) - actions.align.setCursor(selectedAnnotation.start_ts) - break - case 40: // down - e.preventDefault() - selectedAnnotation.start_ts += e.shiftKey ? 1 : 0.1 - actions.align.updateSelectedAnnotation(selectedAnnotation) - actions.audio.seek(selectedAnnotation.start_ts) - actions.align.setCursor(selectedAnnotation.start_ts) - break - case 68: // D - e.preventDefault() - actions.align.cloneSelectedAnnotation(selectedAnnotation) - } - return - } - if (e.shiftKey) { - switch (e.keyCode) { - case 187: // plus - actions.align.setZoom(this.props.timeline.zoom - 1) - break - case 189: // minus - actions.align.setZoom(this.props.timeline.zoom + 1) - break - } - } else { - // console.log(e.keyCode) - switch (e.keyCode) { - case 27: // escape - actions.align.hideAnnotationForm() - break - case 65: // A - add - e.preventDefault() - actions.align.showNewAnnotationForm(this.props.audio.play_ts, this.props.text) - break - case 32: // spacebar - actions.audio.toggle() - break - case 38: // up - actions.audio.jump(- ZOOM_STEPS[this.props.timeline.zoom] * 0.1) - break - case 40: // down - actions.audio.jump(ZOOM_STEPS[this.props.timeline.zoom] * 0.1) - break - } - } - } - handleWheel(e) { - let { start_ts, zoom, duration } = this.props.timeline - let { deltaY } = e - let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step - let widthTimeDuration = INNER_HEIGHT * secondsPerPixel // secs per pixel - start_ts += Math.round((deltaY) * ZOOM_STEPS[zoom]) - start_ts = clamp(start_ts, 0, Math.max(0, duration - widthTimeDuration / 2)) - if (e.shiftKey) { - if (Math.abs(deltaY) < 2) return - if (e.deltaY > 0) { - actions.align.throttledSetZoom(this.props.timeline.zoom + 1) - } else { - actions.align.throttledSetZoom(this.props.timeline.zoom - 1) - } - } else if (e.altKey) { - actions.audio.jump(e.deltaY * ZOOM_STEPS[zoom]) - } else { - actions.align.setScrollPosition(start_ts) - } - } - handleContainerClick(e) { - actions.align.clearSelectedAnnotation() - actions.align.clearSelectedParagraph() - } - handleTimelineMouseDown(e) { - const cursor_ts = positionToTime(e.pageY, this.props.timeline) - actions.align.clearCursorRegion() - actions.align.setCursor(cursor_ts) - this.setState({ - dragging: true, - a_ts: cursor_ts, - }) - } - handleMouseMove(e) { - const cursor_ts = positionToTime(e.pageY, this.props.timeline) - if (this.state.dragging) { - actions.align.setCursorRegion( - Math.min(this.state.a_ts, cursor_ts), - Math.max(this.state.a_ts, cursor_ts), - ) - } else { - actions.align.setCursor(cursor_ts) - } - } - handleTimelineMouseUp(e) { - this.setState({ dragging: false }) - const play_ts = positionToTime(e.pageY, this.props.timeline) - if (e.metaKey) { - actions.align.spliceTime(play_ts) - } else if (e.pageX < WAVEFORM_SIZE * 0.67) { - actions.audio.seek(play_ts) - } else { - actions.align.showNewAnnotationForm(play_ts, this.props.text) - } - } - render() { - return ( - <div - className='timeline' - onClick={this.handleContainerClick} - onWheel={this.handleWheel} - onMouseMove={this.handleMouseMove} - > - <div className='timelineColumn'> - <Waveform - onMouseDown={this.handleTimelineMouseDown} - onMouseUp={this.handleTimelineMouseUp} - /> - <Ticks timeline={this.props.timeline} /> - <Cursor timeline={this.props.timeline} annotation={this.props.annotation} /> - <CursorRegion timeline={this.props.timeline} /> - </div> - <Annotations timeline={this.props.timeline} /> - <PlayCursor /> - </div> - ) - } -} - -const mapStateToProps = state => ({ - timeline: state.align.timeline, - annotation: state.align.annotation, - selectedAnnotation: state.align.selectedAnnotation, - audio: state.audio, - text: state.align.text, -}) - -export default connect(mapStateToProps)(Timeline) |