From bc1efe107d7421a4a3a0c515982e0750f87bee05 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 12 Nov 2020 15:38:33 +0100 Subject: curtain backgrounds --- .../app/views/viewer/checklist/checklist.css | 2 +- .../frontend/app/views/viewer/forms/forms.css | 1 - .../frontend/app/views/viewer/nav/eflux.css | 2 +- .../components.fullscreen/fullscreen.utility.js | 8 +++++++ .../player/components.inline/inline.utility.js | 2 +- .../app/views/viewer/player/player.fullscreen.css | 26 +++++++++++++++++++++- .../app/views/viewer/player/player.transcript.css | 4 ++-- .../viewer/transcript/transcript.container.js | 9 +++++--- .../app/views/viewer/transcript/transcript.css | 3 ++- .../frontend/app/views/viewer/viewer.actions.js | 3 +++ 10 files changed, 49 insertions(+), 11 deletions(-) (limited to 'animism-align/frontend/app/views/viewer') 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 (
+ {element.mediaItem && ( +
+ )}
{texts}
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.'}

{'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.'}
Episodes
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} /> - - Download PDF -
) } } +/* + + Download PDF + +*/ + 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) -- cgit v1.2.3-70-g09d2