adjust annotation position without opening form

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>