curtain backgrounds

1 files changed, 8 insertions, 0 deletions

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>