fullscreen images in the inline flow

4 files changed, 35 insertions, 11 deletions

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
index b06916f..3d52db8 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
@@ -59,12 +59,22 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h
       />
 
       {(annotation.settings.fullscreen && !annotation.settings.inline) && (
-        <Checkbox
-          label="Hide inline image"
-          name="hide_poster_inline"
-          checked={annotation.settings.hide_poster_inline}
-          onChange={handleSettingsSelect}
-        />
+        <div>
+          <Checkbox
+            label="Hide inline image"
+            name="hide_poster_inline"
+            checked={annotation.settings.hide_poster_inline}
+            onChange={handleSettingsSelect}
+          />
+          <Select
+            title='Inline background color'
+            name='inline_color'
+            selected={annotation.settings.inline_color}
+            options={CURTAIN_COLOR_SELECT_OPTIONS}
+            defaultOption='Pick a color'
+            onChange={handleSettingsSelect}
+          />
+        </div>
       )}
 
       <Checkbox
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
index 880d17b..24723a8 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 
+import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
 import { SpeakerIcon } from '../../nav/viewer.icons'
 import { MediaCitation } from '../components.media'
 
@@ -9,7 +10,7 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati
   const item = media.lookup[annotation.settings.media_id]
   if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
 
-  let url, captionItem;
+  let url, captionItem, colorName;
   if (item.type === 'gallery') {
     const index = parseInt(annotation.settings.frame_index)
     const frame_id = item.settings.image_order[index]
@@ -20,13 +21,20 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati
     }
     url = frame.url
     captionItem = item.settings.caption_lookup[frame_id] || item
+    colorName = annotation.settings.inline_color || annotation.settings.color || 'white'
   } else {
     url = item.settings.display.url
     captionItem = item
+    colorName = annotation.settings.inline_color || annotation.settings.color || 'white'
   }
+
   if (annotation.settings.hide_caption) {
     captionItem = null
   }
+  const color = CURTAIN_COLOR_LOOKUP[colorName]
+  const style = {
+    backgroundColor: color.backgroundColor,
+  }
 
   // "fullscreen-style inline images"
   // if (annotation.settings.fullscreen) {
@@ -41,7 +49,7 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati
   // } else {
   return (
     <div className="media image" onClick={e => onAnnotationClick(e, paragraph, annotation)}>
-      <div className="image-container">
+      <div className="image-container" style={style}>
         <img src={url} />
         <div className="speaker-icon">{SpeakerIcon}</div>
       </div>
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 513293a..f831078 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
@@ -36,9 +36,14 @@ export class MediaVideo extends Component {
 
     // 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
+      const colorName = annotation.settings.poster_background_color || annotation.settings.color || 'white'
+      const color = CURTAIN_COLOR_LOOKUP[colorName]
+      const elementStyle = {
+        color: color.textColor,
+        backgroundColor: color.backgroundColor,
+      }
+      style.color = color.textColor,
+      style.backgroundColor = color.backgroundColor,
       style.backgroundImage = 'url(' + posterURL(item) + ')'
       if (annotation.settings.poster_size) {
         style.backgroundSize = annotation.settings.poster_size
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css
index 8cfeb54..ffb3988 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css
@@ -95,6 +95,7 @@
 /* carousel */
 
 .inline-element .carousel-container {
+  padding-top: 1.5rem;
   margin-bottom: 1.5rem;
   position: relative;
 }