curtain backgrounds

10 files changed, 49 insertions, 11 deletions

diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.css b/animism-align/frontend/app/views/viewer/checklist/checklist.css
index a572b84..6794f6e 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.css
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.css
@@ -10,7 +10,7 @@
   width: 100%;
   height: calc(100vh - 3rem);
   transform: translateZ(0) translateY(100vh);
-  transition: transform 0.2s;
+  transition: transform 0.4s;
   background: white;
   color: black;
   font-size: 16px;
diff --git a/animism-align/frontend/app/views/viewer/forms/forms.css b/animism-align/frontend/app/views/viewer/forms/forms.css
index d0feaea..30b5fcb 100644
--- a/animism-align/frontend/app/views/viewer/forms/forms.css
+++ b/animism-align/frontend/app/views/viewer/forms/forms.css
@@ -21,7 +21,6 @@
   padding: 0 11rem 0 0;
   width: 100%;
   border-bottom: 1px solid #ddd;
-  margin-right: 1rem;
 }
 .credits-content .subscription-form input[type='email']::placeholder {
   color: #bbb;
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css
index 85cbe64..2f8bd78 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.css
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.css
@@ -38,7 +38,7 @@
   height: 3rem;
   background: white;
   border-radius: 50%;
-  margin-left: 1.75rem;
+  margin-left: 1rem;
   cursor: pointer;
 }
 .eflux-nav .playToggle:hover,
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;
diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
index 6031912..3288a0a 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
@@ -163,14 +163,17 @@ class Transcript extends Component {
           className='close'
           onClick={this.handleClose}
         />
-        <a className='footer' href='#'>
-          Download PDF
-        </a>
       </div>
     )
   }
 }
 
+/*
+  <a className='footer' href='#'>
+    Download PDF
+  </a>
+*/
+
 const mapStateToProps = state => ({
   viewer: state.viewer,
   play_ts: state.audio.play_ts,
diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.css b/animism-align/frontend/app/views/viewer/transcript/transcript.css
index 8b2903e..8b75652 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.css
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.css
@@ -48,7 +48,8 @@
   overflow-x: hidden;
   overflow-y: hidden;
   width: 100%;
-  height: calc(100% - 3rem);
+  /*height: calc(100% - 3rem);*/
+  height: 100%;
   padding: 1.5rem 4rem 6rem 2rem;
   border-left: 1px solid #000;
   position: relative;
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 277cb21..fa63804 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -192,6 +192,9 @@ export const loadSections = () => dispatch => {
       // 
       currentSection.fullscreenTimeline.unshift(initial_curtain_event)
     }
+    if (currentSection.fullscreenTimeline.length && currentSection.fullscreenTimeline[0].type === 'curtain' && currentSection.media.length) {
+      currentSection.fullscreenTimeline[0].mediaItem = currentSection.media[0].media
+    }
     currentSection.duration = currentSection.end_ts - currentSection.start_ts
     currentSection.inlineParagraphCount = currentSection.paragraphs.filter(p => !p.hidden).length
     // console.log(i, currentSection.inlineParagraphCount)