From a86e262571a77bd0402cc69e31d33899ccda4785 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 9 Jul 2020 00:09:36 +0200
Subject: displaying videos in paragraphs. style paragraphs to be a bit more
 textual

---
 .../views/paragraph/components/paragraph.types.js     | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

(limited to 'animism-align/frontend/views/paragraph/components')

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),
 }
-- 
cgit v1.2.3-70-g09d2