diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer')
5 files changed, 74 insertions, 17 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 64b4e48..3282db9 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,5 +1,7 @@ import React from 'react' +import { EPILEPSY_WARNING, ROMAN_NUMERALS } from 'app/constants' + export const FullscreenCurtain = ({ element, transitionDuration }) => { // console.log(element, isEntering) const { color } = element @@ -8,14 +10,40 @@ export const FullscreenCurtain = ({ element, transitionDuration }) => { color: color.textColor, transitionDuration, } + let texts = [] + console.log(element) + switch (element.settings.curtain_style) { + case 'section_heading': + texts.push(( + <div key='idx'>{ROMAN_NUMERALS[element.section.index]}{'.'}</div> + )) + texts.push(( + <div key='txt' dangerouslySetInnerHTML={{ __html: element.annotation.settings.curtain_text || element.section.title }} /> + )) + break + + case 'video_title': + texts.push(( + <i><div key='txt' dangerouslySetInnerHTML={{ __html: element.annotation.settings.curtain_text }} /></i> + )) + break + + default: + texts.push(( + <div key='txt' dangerouslySetInnerHTML={{ __html: element.annotation.settings.curtain_text }} /> + )) + break + } + if (element.settings.flashing_light_warning) { + texts.push(( + <div key='flashing_light_warning' className='flashing_light_warning'>{EPILEPSY_WARNING}</div> + )) + } return ( - <div - className='fullscreen-element curtain' - style={style} - > - {element.annotation.settings.curtain_text && ( - <span dangerouslySetInnerHTML={{ __html: element.annotation.settings.curtain_text }} /> - )} + <div className='fullscreen-element curtain' style={style}> + <div className='curtain-text'> + {texts} + </div> </div> ) } diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css index a35f2fa..37237c2 100644 --- a/animism-align/frontend/app/views/viewer/player/components.media/media.css +++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css @@ -445,10 +445,10 @@ } .video-subtitles span { display: inline-block; - box-shadow: -3px -2px 0 #000, - 3px -2px 0 #000, - -3px 2px 0 #000, - 3px 2px 0 #000; + box-shadow: -5px -3px 0 #000, + 5px -3px 0 #000, + -5px 3px 0 #000, + 5px 3px 0 #000; box-decoration-break: clone; background: black; color: white; diff --git a/animism-align/frontend/app/views/viewer/player/components.media/video.subtitles.js b/animism-align/frontend/app/views/viewer/player/components.media/video.subtitles.js index f056168..346977a 100644 --- a/animism-align/frontend/app/views/viewer/player/components.media/video.subtitles.js +++ b/animism-align/frontend/app/views/viewer/player/components.media/video.subtitles.js @@ -40,7 +40,7 @@ export default class VideoSubtitles extends Component { if (!current) return <div className="video-subtitles hidden" /> return ( <div className="video-subtitles"> - {current.lines.map(line => <span key={line}>{line}</span>)} + <span>{current.lines.join(" ")}</span> </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 6fa028e..57b3010 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css @@ -118,9 +118,31 @@ iframe { cursor: pointer; } -/* text plates */ +/* curtains and text plates */ -.fullscreen-element.curtain span, +.fullscreen-element.curtain .curtain-text { + height: calc(100vh - 3rem); + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.fullscreen-element.curtain div { + font-family: "Freight Text", serif; + max-width: 90%; + font-size: 10vh; + line-height: 1; + white-space: pre-line; + text-align: center; + margin: 0 auto; +} +.fullscreen-element.curtain div.flashing_light_warning { + line-height: 1.2; + font-size: 4vh; + max-width: 60rem; + margin-top: 5vh; +} .fullscreen-element.text-plate span { font-family: "Freight Text", serif; font-size: 3rem; diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index cd4b79f..2ac4665 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -132,7 +132,7 @@ export const loadSections = () => dispatch => { // build timeline of fullscreen events if ((FULLSCREEN_UTILITY_ANNOTATION_TYPES.has(annotation.type) || annotation.settings.fullscreen) && !annotation.settings.inline) { - const event = makeFullscreenEvent(eventIndex++, annotation) + const event = makeFullscreenEvent(eventIndex++, annotation, currentSection) currentSection.fullscreenTimeline.push(event) // for videos, we probably want to show a poster image if ((annotation.type === 'image' || annotation.type === 'video') && !annotation.settings.hide_poster_inline) { @@ -188,7 +188,7 @@ export const loadSections = () => dispatch => { fade_out_duration: '0:01', duration: '0:01.1', } - }) + }, currentSection) // currentSection.fullscreenTimeline.unshift(initial_curtain_event) } @@ -215,7 +215,7 @@ const newSection = (annotation, index, mediaIndex) => ({ section_nav_color: annotation.settings.section_nav_color || 'white', }) -export const makeFullscreenEvent = (index, annotation) => { +export const makeFullscreenEvent = (index, annotation, currentSection) => { const timing = annotationFadeTimings(annotation) const event = { ...timing, @@ -231,6 +231,13 @@ export const makeFullscreenEvent = (index, annotation) => { } else { event.color = CURTAIN_COLOR_LOOKUP.white } + if (annotation.type === 'curtain' && annotation.settings.curtain_style === 'section_heading') { + event.section = { + title: currentSection.title, + index: currentSection.index, + } + console.log(event.section) + } return event } |