From bc1efe107d7421a4a3a0c515982e0750f87bee05 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 12 Nov 2020 15:38:33 +0100
Subject: curtain backgrounds

---
 .../viewer/player/components.fullscreen/fullscreen.utility.js     | 8 ++++++++
 1 file changed, 8 insertions(+)

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

diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js
index 1002b8c..a58f29c 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js
@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { EPILEPSY_WARNING, ROMAN_NUMERALS } from 'app/constants'
+import { thumbnailURL } from 'app/utils/annotation.utils'
 
 export const FullscreenCurtain = ({ element, transitionDuration }) => {
   // console.log(element, isEntering)
@@ -10,6 +11,10 @@ export const FullscreenCurtain = ({ element, transitionDuration }) => {
     color: color.textColor,
     transitionDuration,
   }
+  console.log(element)
+  const curtainBackground = element.mediaItem && {
+    backgroundImage: 'url(' + (thumbnailURL(element.mediaItem)) + ')',
+  }
   let texts = []
   // console.log(element)
   switch (element.settings.curtain_style) {
@@ -41,6 +46,9 @@ export const FullscreenCurtain = ({ element, transitionDuration }) => {
   }
   return (
     <div className='fullscreen-element curtain' style={style}>
+      {element.mediaItem && (
+        <div className='curtain-background' style={curtainBackground} />
+      )}
       <div className='curtain-text'>
         {texts}
       </div>
-- 
cgit v1.2.3-70-g09d2