From c57b5b04911dca9cf62d4aa0a115de6e548699af Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 30 Oct 2020 15:46:23 +0100
Subject: inline video captions

---
 .../annotations/annotationForms/annotationForm.video.js       |  8 ++++++++
 .../app/views/viewer/player/components.inline/inline.video.js | 11 +++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

(limited to 'animism-align/frontend/app')

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 12a322c..f4cf4c5 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
@@ -92,6 +92,14 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h
         defaultOption='Select size'
         onChange={handleSettingsSelect}
       />
+      <Select
+        title='Poster background color'
+        name='poster_background_color'
+        selected={annotation.settings.poster_background_color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
       <TextInput
         title="Video start time"
         name="video_start_ts"
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 86fc0df..85af05e 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
@@ -16,7 +16,7 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationCli
   const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
   const width = window.innerWidth
   const height = window.innerHeight - (17 * 16)
-  const style = {
+  let style = {
     color: color.textColor,
     height: height + 32,
     backgroundColor: color.backgroundColor,
@@ -24,13 +24,20 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationCli
 
   // if this is a fullscreen video, display the poster image
   if (annotation.settings.fullscreen && !annotation.settings.inline) {
+    const color = CURTAIN_COLOR_LOOKUP[annotation.settings.poster_background_color || annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
+    style.color = color.textColor
+    style.backgroundColor = color.backgroundColor
     style.backgroundImage = 'url(' + posterURL(item) + ')'
     if (annotation.settings.poster_size) {
       style.backgroundSize = annotation.settings.poster_size
     }
     return (
       <div className={className}>
-        <div className='videoPoster' style={style}>
+        <div
+          className='videoPoster'
+          style={style}
+          onClick={e => onAnnotationClick(e, paragraph, annotation)}
+        >
           <div className="speaker-icon">{SpeakerIcon}</div>
         </div>
         <MediaCitation media={item} />
-- 
cgit v1.2.3-70-g09d2