diff options
8 files changed, 67 insertions, 15 deletions
diff --git a/animism-align/frontend/api/crud.reducer.js b/animism-align/frontend/api/crud.reducer.js index ece6cec..d94f69d 100644 --- a/animism-align/frontend/api/crud.reducer.js +++ b/animism-align/frontend/api/crud.reducer.js @@ -115,10 +115,10 @@ export const crudReducer = (type) => { ...state, update: action.data, index: addToIndex(state.index, action.data.res, state.options.sort), - show: state.show.res.id === action.data.res.id ? { + show: (state.show.res && state.show.res.id === action.data.res.id) ? { ...state.show.res, ...action.data.res, - } : state.show.res + } : state.show } case crud_type.index_error: return { diff --git a/animism-align/frontend/types.js b/animism-align/frontend/types.js index 3c460a9..b84df28 100644 --- a/animism-align/frontend/types.js +++ b/animism-align/frontend/types.js @@ -14,6 +14,8 @@ export const align = crud_type('align', [ 'set_temporary_annotation', 'update_temporary_annotation', 'update_temporary_annotation_settings', + 'set_selected_annotation', + 'clear_selected_annotation', ]) export const audio = with_type('audio', [ diff --git a/animism-align/frontend/views/align/align.actions.js b/animism-align/frontend/views/align/align.actions.js index 351b826..6d01fc0 100644 --- a/animism-align/frontend/views/align/align.actions.js +++ b/animism-align/frontend/views/align/align.actions.js @@ -4,6 +4,7 @@ import { api, post, pad, preloadImage } from '../../util' import actions from '../../actions' import { session } from '../../session' import throttle from 'lodash.throttle' +import debounce from 'lodash.debounce' import { ZOOM_STEPS } from './constants' import { getFirstPunctuationMarkIndex, cutFirstSentence } from './align.util' @@ -25,12 +26,21 @@ export const setCursor = cursor_ts => dispatch => ( dispatch({ type: types.align.set_display_setting, key: 'cursor_ts', value: cursor_ts }) ) -export const setSelectedAnnotation = annotation_id => dispatch => { - dispatch({ type: types.align.set_display_setting, key: 'selected_annotation_id', value: annotation_id }) +export const setSelectedAnnotation = annotation => dispatch => { + dispatch({ type: types.align.set_selected_annotation, data: annotation }) } -export const clearSelectedAnnotation = annotation_id => dispatch => { - dispatch({ type: types.align.set_display_setting, key: 'selected_annotation_id', value: -1 }) +export const clearSelectedAnnotation = () => dispatch => { + dispatch({ type: types.align.clear_selected_annotation, }) } +export const updateSelectedAnnotation = annotation => dispatch => { + dispatch({ type: types.align.set_selected_annotation, data: { ...annotation } }) + debouncedUpdateAnnotation(annotation) +} +export const debouncedUpdateAnnotation = debounce(annotation => { + console.log('updating annotation', annotation) + actions.annotation.update(annotation) +}, 2000, { leading: false, trailing: true }) + export const setSelectedParagraph = paragraph_id => dispatch => { dispatch({ type: types.align.set_display_setting, key: 'selected_paragraph_id', value: paragraph_id }) @@ -46,7 +56,7 @@ export const showNewAnnotationForm = (start_ts, text) => dispatch => { } else { croppedText = cutFirstSentence(text) } - console.log(croppedText) + // console.log(croppedText) dispatch({ type: types.align.set_temporary_annotation, data: { @@ -73,7 +83,6 @@ export const updateAnnotationSettings = (key, value) => dispatch => { dispatch({ type: types.align.update_temporary_annotation_settings, key, value }) } - export const hideAnnotationForm = () => dispatch => { dispatch({ type: types.align.set_temporary_annotation, diff --git a/animism-align/frontend/views/align/align.reducer.js b/animism-align/frontend/views/align/align.reducer.js index dc471a6..fc948e8 100644 --- a/animism-align/frontend/views/align/align.reducer.js +++ b/animism-align/frontend/views/align/align.reducer.js @@ -11,6 +11,7 @@ const initialState = { selected_paragraph_id: -1, }, annotation: {}, + selectedAnnotation: {}, options: { } } @@ -31,6 +32,26 @@ export default function alignReducer(state = initialState, action) { } } + case types.align.set_selected_annotation: + return { + ...state, + timeline: { + ...state.timeline, + selected_annotation_id: action.data.id, + }, + selectedAnnotation: action.data, + } + + case types.align.clear_selected_annotation: + return { + ...state, + timeline: { + ...state.timeline, + selected_annotation_id: -1, + }, + selectedAnnotation: {}, + } + case types.align.set_temporary_annotation: return { ...state, diff --git a/animism-align/frontend/views/align/components/annotations/annotation.index.js b/animism-align/frontend/views/align/components/annotations/annotation.index.js index dae64df..b055d60 100644 --- a/animism-align/frontend/views/align/components/annotations/annotation.index.js +++ b/animism-align/frontend/views/align/components/annotations/annotation.index.js @@ -48,18 +48,19 @@ class AnnotationIndex extends Component { this.handleParagraphSelection(annotation) } actions.audio.seek(annotation.start_ts) - actions.align.setSelectedAnnotation(annotation.id) + actions.align.setSelectedAnnotation(annotation) } handleParagraphSelection(annotation) { const { selected_paragraph_id } = this.props.timeline if (!selected_paragraph_id || selected_paragraph_id === -1) { if (annotation.paragraph_id) { actions.align.setSelectedParagraph(annotation.paragraph_id) + return } else { actions.paragraph.create({ type: 'paragraph', start_ts: annotation.start_ts, - }) .then(data => { + }).then(data => { actions.align.setSelectedParagraph(data.res.id) annotation.paragraph_id = data.res.id actions.annotation.update(annotation) diff --git a/animism-align/frontend/views/align/components/annotations/annotation.types.js b/animism-align/frontend/views/align/components/annotations/annotation.types.js index 309e42e..55cc3e7 100644 --- a/animism-align/frontend/views/align/components/annotations/annotation.types.js +++ b/animism-align/frontend/views/align/components/annotations/annotation.types.js @@ -20,9 +20,8 @@ export const AnnotationSentence = ({ y, annotation, selected, onClick, onDoubleC style={{ top: y }} onClick={e => onClick(e, annotation)} onDoubleClick={e => onDoubleClick(e, annotation)} - > - {text} - </div> + dangerouslySetInnerHTML={{ __html: text }} + /> ) } @@ -58,7 +57,6 @@ export const AnnotationParagraphEnd = ({ y, annotation, selected, onClick, onDou export const AnnotationVideo = ({ y, annotation, media, selected, onClick, onDoubleClick }) => { const { start_ts, text } = annotation const className = selected ? 'annotation media video selected' : 'annotation media video' - console.log(media) if (!media) { return ( <div diff --git a/animism-align/frontend/views/align/containers/timeline.container.js b/animism-align/frontend/views/align/containers/timeline.container.js index 69f2496..a0f4d3a 100644 --- a/animism-align/frontend/views/align/containers/timeline.container.js +++ b/animism-align/frontend/views/align/containers/timeline.container.js @@ -49,6 +49,26 @@ class Timeline extends Component { 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 -= e.shiftKey ? 1 : 0.1 + 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 + } + return + } if (e.shiftKey) { switch (e.keyCode) { case 187: // plus @@ -139,6 +159,7 @@ class Timeline extends Component { const mapStateToProps = state => ({ timeline: state.align.timeline, annotation: state.align.annotation, + selectedAnnotation: state.align.selectedAnnotation, audio: state.audio, text: state.site.text, }) diff --git a/animism-align/frontend/views/nav/header.component.js b/animism-align/frontend/views/nav/header.component.js index be9a6dc..efbaf08 100644 --- a/animism-align/frontend/views/nav/header.component.js +++ b/animism-align/frontend/views/nav/header.component.js @@ -13,7 +13,7 @@ function Header(props) { <PlayButton /> <div> <Link to="/align">Align</Link> - <Link to="/paragraph">Paragraphs</Link> + <Link to="/paragraph">Transcript</Link> <Link to="/media">Media</Link> </div> </header> |