properly update display of annotation when adjusting time

3 files changed, 27 insertions, 1 deletions

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 65de5dd..4c3631f 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.index.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.index.js
@@ -76,7 +76,7 @@ class AnnotationIndex extends Component {
     actions.align.showEditAnnotationForm(annotation)
   }
   render() {
-    const { timeline, media, annotationInForm } = this.props
+    const { timeline, media, annotationInForm, selectedAnnotation } = this.props
     const { start_ts, zoom, selected_annotation_id } = timeline
     const { items } = this.state
     const className = (zoom < 2)
@@ -90,6 +90,9 @@ class AnnotationIndex extends Component {
           if (annotationInForm && annotation.id === annotationInForm.id) {
             return null
           }
+          if (annotation.id === selected_annotation_id) {
+            annotation = selectedAnnotation
+          }
           const { id, type, start_ts } = annotation
           const AnnotationElement = AnnotationElementLookup[type]
           const y = timeToPosition(start_ts, timeline)
@@ -113,6 +116,7 @@ class AnnotationIndex extends Component {
 const mapStateToProps = state => ({
   timeline: state.align.timeline,
   annotationInForm: state.align.annotation,
+  selectedAnnotation: state.align.selectedAnnotation,
   index: state.annotation.index,
   media: state.media.index.lookup,
 })
diff --git a/animism-align/frontend/views/paragraph/components/paragraphTypes/index.js b/animism-align/frontend/views/paragraph/components/paragraphTypes/index.js
index 04546f6..bf68ed0 100644
--- a/animism-align/frontend/views/paragraph/components/paragraphTypes/index.js
+++ b/animism-align/frontend/views/paragraph/components/paragraphTypes/index.js
@@ -8,10 +8,15 @@ import {
   MediaVideo
 } from './paragraphTypes.video'
 
+import {
+  MediaImage
+} from './paragraphTypes.image'
+
 export const ParagraphElementLookup = {
   paragraph: React.memo(Paragraph),
   hidden: React.memo(Paragraph),
   blockquote: React.memo(Paragraph),
   header: React.memo(ParagraphHeader),
   video: React.memo(MediaVideo),
+  image: React.memo(MediaImage),
 }
diff --git a/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.image.js b/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.image.js
new file mode 100644
index 0000000..36c72e9
--- /dev/null
+++ b/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.image.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+
+export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+  if (!media.lookup) return <div />
+  const className = currentParagraph ? 'media image current' : 'media image'
+  const annotation = paragraph.annotations[0]
+  const item = media.lookup[annotation.settings.media_id]
+  if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
+  return (
+    <div
+      className={className}
+      onDoubleClick={e => onDoubleClick(e, paragraph)}
+    >
+      <img src={item.settings.display.url} />
+    </div>
+  )
+}