curtain backgrounds

4 files changed, 36 insertions, 4 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>
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js
index 59d1ff5..9204a04 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js
@@ -55,7 +55,7 @@ const ScheduleComponent = ({ episodes }) => {
         {'Alwan, Beirut, 2014.'}
         <br/><br/>
         {'Presented here in its digital iteration, '}
-        {'the exhibition will be released in four episodes starting October 2020.'}
+        {'the exhibition will be released in four episodes starting November 2020.'}
       </div>
       <div className='schedule'>
         <div className='schedule-heading'>Episodes</div>
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
index 57b3010..28ac255 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -123,14 +123,38 @@ iframe {
 .fullscreen-element.curtain .curtain-text {
   height: calc(100vh - 3rem);
   width: 100%;
+  max-width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  position: absolute;
+  top: 0; left: 0;
+}
+.fullscreen-element.curtain .curtain-background {
+  position: absolute;
+  top: 0; left: 0;
+  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  z-index: 0;
+  transition: opacity 3.0s;
+  opacity: 0;
+}
+.fullscreen-element.curtain.fade-enter-done .curtain-background {
+  opacity: 0.3;
+}
+.fullscreen-element.curtain.fade-exit div,
+.fullscreen-element.curtain.fade-exit-done div {
+  transition: opacity 1.0s;
+  opacity: 0.0;
 }
+
 .fullscreen-element.curtain div {
   font-family: "Freight Text", serif;
-  max-width: 90%;
+  max-width: 96%;
   font-size: 10vh;
   line-height: 1;
   white-space: pre-line;
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index dcdcabb..0c28b78 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -196,8 +196,8 @@
 .speaker-icon svg {
   background: black;
   border-radius: 50%;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 3rem;
+  height: 3rem;
 }
 .speaker-icon svg path {
   fill: white;