diff options
Diffstat (limited to 'animism-align/frontend/views/align')
4 files changed, 76 insertions, 53 deletions
diff --git a/animism-align/frontend/views/align/align.actions.js b/animism-align/frontend/views/align/align.actions.js index 82e4799..b3883ae 100644 --- a/animism-align/frontend/views/align/align.actions.js +++ b/animism-align/frontend/views/align/align.actions.js @@ -25,7 +25,7 @@ export const setCursor = cursor_ts => dispatch => ( dispatch({ type: types.align.set_display_setting, key: 'cursor_ts', value: cursor_ts }) ) -export const showNewTimestampForm = (start_ts, text) => dispatch => { +export const showNewAnnotationForm = (start_ts, text) => dispatch => { let croppedText; if (store.getState().align.annotation.start_ts) { croppedText = store.getState().align.annotation.text @@ -44,6 +44,13 @@ export const showNewTimestampForm = (start_ts, text) => dispatch => { }) } +export const updateAnnotationForm = (key, value) => dispatch => { + dispatch({ type: types.align.update_temporary_annotation, key, value }) +} +export const updateAnnotationSettings = (key, value) => dispatch => { + dispatch({ type: types.align.update_temporary_annotation_settings, key, value }) +} + const cutFirstSentence = text => { const textToCrop = text.trim().replace("\n", " ").split("\n")[0] let cropIndex = textToCrop.indexOf('. ') + 1 @@ -54,7 +61,7 @@ const cutFirstSentence = text => { return croppedText } -export const hideTimestampForm = () => dispatch => { +export const hideAnnotationForm = () => dispatch => { dispatch({ type: types.align.set_temporary_annotation, data: {} diff --git a/animism-align/frontend/views/align/align.reducer.js b/animism-align/frontend/views/align/align.reducer.js index 9064b56..f080c24 100644 --- a/animism-align/frontend/views/align/align.reducer.js +++ b/animism-align/frontend/views/align/align.reducer.js @@ -41,6 +41,27 @@ export default function alignReducer(state = initialState, action) { annotation: action.data, } + case types.align.update_temporary_annotation: + return { + ...state, + annotation: { + ...state.annotation, + [action.key]: action.value, + } + } + + case types.align.update_temporary_annotation_settings: + return { + ...state, + annotation: { + ...state.annotation, + settings: { + ...state.annotation.settings, + [action.key]: action.value, + } + } + } + default: return state } diff --git a/animism-align/frontend/views/align/components/annotations/annotation.form.js b/animism-align/frontend/views/align/components/annotations/annotation.form.js index 03e44e1..9432948 100644 --- a/animism-align/frontend/views/align/components/annotations/annotation.form.js +++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js @@ -11,36 +11,42 @@ import { clamp } from '../../../../util' import { timeToPosition } from '../../align.util' import { Select } from '../../../../common' -const TIMESTAMP_TYPES = ['sentence', 'header'].map(name => ({ name, label: name })) +const ANNOTATION_TYPES = [ + 'sentence', 'header' +].map(name => ({ name, label: name })) class AnnotationForm extends Component { - state = { - data: {}, - } constructor(props){ super(props) this.handleChange = this.handleChange.bind(this) this.handleSelect = this.handleSelect.bind(this) this.handleKeyDown = this.handleKeyDown.bind(this) - } - componentDidMount(){ - this.setState({ - data: { ...this.props.annotation }, - }) - } - componentDidUpdate(prevProps){ - if (this.props.annotation !== prevProps.annotation) { - this.setState({ - data: { - ...this.props.annotation, - text: this.state.data.text, - type: this.state.data.text, - }, - }) - } + this.handleSubmit = this.handleSubmit.bind(this) } handleKeyDown(e) { + if (!e.metaKey && !e.ctrlKey) return + let { start_ts } = this.props.annotation + console.log(e.keyCode) switch (e.keyCode) { + case 38: // up + e.preventDefault() + start_ts -= 0.1 + actions.align.updateAnnotationForm('start_ts', start_ts) + actions.audio.seek(start_ts) + actions.align.setCursor(start_ts) + break + case 40: // down + e.preventDefault() + start_ts += 0.1 + actions.align.updateAnnotationForm('start_ts', start_ts) + actions.audio.seek(start_ts) + actions.align.setCursor(start_ts) + break + case 83: // ctrl-S + e.preventDefault() + this.handleSubmit() + default: + break } } handleChange(e) { @@ -48,62 +54,57 @@ class AnnotationForm extends Component { this.handleSelect(name, value) } handleSelect(name, value) { - this.setState({ - data: { - ...this.state.data, - [name]: value, - } - }) + actions.align.updateAnnotationForm(name, value) } handleSubmit() { - const { data } = this.state - if (data.id === 'new') { - delete data.id - actions.graph.create(data) + const { annotation } = this.props + if (annotation.id === 'new') { + delete annotation.id + actions.annotation.create(annotation) .then(response => { console.log(response) - actions.align.hideTimestampForm() + actions.align.hideAnnotationForm() }) } else { - actions.graph.update(data) + actions.annotation.update(annotation) .then(response => { console.log(response) - actions.align.hideTimestampForm() + actions.align.hideAnnotationForm() }) } } render() { - const { timeline } = this.props - const { data } = this.state - if (!data.start_ts) return <div></div> + const { timeline, annotation } = this.props + if (!annotation.start_ts) return <div></div> return ( <div className='annotationForm' style={{ - top: timeToPosition(data.start_ts, timeline), + top: timeToPosition(annotation.start_ts, timeline), }} > - {data.type === 'sentence' && this.renderTextarea()} - {data.type === 'header' && this.renderTextarea()} + {annotation.type === 'sentence' && this.renderTextarea()} + {annotation.type === 'header' && this.renderTextarea()} <div className='row'> <Select name='type' - selected={data.type} - options={TIMESTAMP_TYPES} + selected={annotation.type} + options={ANNOTATION_TYPES} defaultOption='text' onChange={this.handleSelect} /> - <button>Save</button> + <button onClick={this.handleSubmit}>Save</button> </div> </div> ) } renderTextarea() { - const { data } = this.state + const { annotation } = this.props return ( <div> <textarea - value={data.text} + name='text' + value={annotation.text} onKeyDown={this.handleKeyDown} onChange={this.handleChange} /> @@ -112,12 +113,6 @@ class AnnotationForm extends Component { } } - -/* -- get the first sentence from the text -- display the form at that point -*/ - const mapStateToProps = state => ({ annotation: state.align.annotation, timeline: state.align.timeline, diff --git a/animism-align/frontend/views/align/containers/timeline.container.js b/animism-align/frontend/views/align/containers/timeline.container.js index 3795751..4167d2d 100644 --- a/animism-align/frontend/views/align/containers/timeline.container.js +++ b/animism-align/frontend/views/align/containers/timeline.container.js @@ -91,7 +91,7 @@ class Timeline extends Component { handleClick(e) { const play_ts = positionToTime(e.pageY, this.props.timeline) if (e.pageX > WAVEFORM_SIZE * 0.67) { - actions.align.showNewTimestampForm(play_ts, this.props.text) + actions.align.showNewAnnotationForm(play_ts, this.props.text) } else { actions.audio.seek(play_ts) } |