From 2eeedc8e328bd42fd2f5f17d9e047cd8db550ec5 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 7 Aug 2020 23:48:41 +0200
Subject: inline video

---
 .../annotationForms/annotationForm.video.js        |  6 +++++
 .../player/components.inline/inline.video.js       | 29 +++++++++++++++-------
 2 files changed, 26 insertions(+), 9 deletions(-)

(limited to 'animism-align/frontend')

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
index 50ca033..6f58d60 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
@@ -23,6 +23,12 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h
         defaultOption='Choose a video'
         onChange={handleSettingsSelect}
       />
+      <Checkbox
+        label="Autoplay"
+        name="autoplay"
+        checked={annotation.settings.autoplay}
+        onChange={handleSettingsSelect}
+      />
       <Checkbox
         label="Fullscreen"
         name="fullscreen"
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
index 72ed67b..74303b5 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
@@ -1,27 +1,38 @@
 import React, { Component } from 'react'
 import VimeoPlayer from '@u-wave/react-vimeo'
-
+import {
+  CURTAIN_COLOR_LOOKUP,
+} from 'app/constants'
 import { MediaCitation } from './inline.image'
 
 export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   if (!media.lookup) return <div />
+  // const { color } = element
   const className = currentParagraph ? 'media current' : 'media'
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
+  const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
+  const style = {
+    backgroundColor: color.backgroundColor,
+    color: color.textColor,
+  }
   if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
   return (
     <div
       className={className}
       onDoubleClick={e => onDoubleClick(e, paragraph)}
     >
-      <VimeoPlayer
-        video={item.url}
-        autoplay muted
-        controls={false}
-        byline={false}
-        width={window.innerWidth}
-        height={window.innerHeight * 0.8}
-      />
+      <div style={style}>
+        <VimeoPlayer
+          video={item.url}
+          autoplay={item.autoplay}
+          muted
+          controls={false}
+          byline={false}
+          width={window.innerWidth}
+          height={window.innerHeight * 0.8}
+        />
+      </div>
       <MediaCitation media={item} />
     </div>
   )
-- 
cgit v1.2.3-70-g09d2