fullscreen images in the inline flow

1 files changed, 10 insertions, 2 deletions

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>