inline video

2 files changed, 26 insertions, 9 deletions

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
@@ -24,6 +24,12 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h
         onChange={handleSettingsSelect}
       />
       <Checkbox
+        label="Autoplay"
+        name="autoplay"
+        checked={annotation.settings.autoplay}
+        onChange={handleSettingsSelect}
+      />
+      <Checkbox
         label="Fullscreen"
         name="fullscreen"
         checked={annotation.settings.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>
   )