1 files changed, 19 insertions, 0 deletions
diff --git a/animism-align/frontend/views/paragraph/components/paragraph.types.js b/animism-align/frontend/views/paragraph/components/paragraph.types.js
index 54eb965..6fd8558 100644
--- a/animism-align/frontend/views/paragraph/components/paragraph.types.js
+++ b/animism-align/frontend/views/paragraph/components/paragraph.types.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import VimeoPlayer from '@u-wave/react-vimeo'
 
 import actions from '../../../actions'
 
@@ -37,8 +38,26 @@ export const ParagraphHeader = ({ paragraph, selectedParagraph, selectedAnnotati
   )
 }
 
+export const MediaVideo = ({ paragraph, media, selectedParagraph, selectedAnnotation, onAnnotationClick, onDoubleClick }) => {
+  if (!media.lookup) return <div />
+  const className = selectedParagraph ? 'media selected' : 'media'
+  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>
+  console.log(item)
+  return (
+    <div
+      className={className}
+      onDoubleClick={e => onDoubleClick(e, paragraph)}
+    >
+      <VimeoPlayer video={item.url} autoplay muted width="650" />
+    </div>
+  )
+}
+
 export const ParagraphElementLookup = {
   paragraph: React.memo(Paragraph),
   blockquote: React.memo(Paragraph),
   header: React.memo(ParagraphHeader),
+  video: React.memo(MediaVideo),
 }