From 3684497c695edb23748d007564a3a6f8c46b403c Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 3 Nov 2020 18:17:03 +0100
Subject: fullscreen images in the inline flow

---
 .../views/viewer/player/components.inline/inline.image.js    | 12 ++++++++++--
 .../views/viewer/player/components.inline/inline.video.js    | 11 ++++++++---
 2 files changed, 18 insertions(+), 5 deletions(-)

(limited to 'animism-align/frontend/app/views/viewer/player/components.inline')

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
-- 
cgit v1.2.3-70-g09d2