properly update display of annotation when adjusting time

2 files changed, 22 insertions, 0 deletions

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>
+  )
+}