diff options
Diffstat (limited to 'animism-align')
8 files changed, 108 insertions, 20 deletions
diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js index 73cc5e7..c2e9c9b 100644 --- a/animism-align/frontend/app/constants.js +++ b/animism-align/frontend/app/constants.js @@ -94,6 +94,12 @@ export const BLACK_WHITE_SELECT_OPTIONS = [ { label: 'black', name: 'black'}, ] +export const CURTAIN_STYLE_SELECT_OPTIONS = [ + { label: 'section heading', name: 'section_heading'}, + { label: 'video title', name: 'video_title'}, + { label: 'default', name: 'default'}, +] + export const CURTAIN_COLOR_SELECT_OPTIONS = CURTAIN_COLORS.map(color => ({ label: color.label, name: color.label, @@ -129,4 +135,6 @@ export const GROWL = { REACHED_END_OF_FIRST_SECTION: "Click \"Next\" to advance the exhibition.", } +export const EPILEPSY_WARNING = "WARNING: This video may potentially trigger seizures for people with photosensitive epilepsy. Viewer discretion is advised." + export const VIDEO_SCRUBBER_HIDE_DELAY = 1000 diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js index cc7cc41..9c94435 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js +++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js @@ -1,6 +1,6 @@ import React, { Component } from 'react' -import { CURTAIN_COLOR_SELECT_OPTIONS, BLACK_WHITE_SELECT_OPTIONS } from 'app/constants' +import { CURTAIN_COLOR_SELECT_OPTIONS, CURTAIN_STYLE_SELECT_OPTIONS, BLACK_WHITE_SELECT_OPTIONS } from 'app/constants' import { Select, Checkbox, TextInput, LabelDescription } from 'app/common' import { AnnotationFormFullscreen } from './annotationForm.utility' @@ -74,7 +74,14 @@ export const AnnotationFormTextPlate = ({ annotation, handleSettingsSelect, hand defaultOption='Pick a color' onChange={handleSettingsSelect} /> - + <Select + title='Curtain style' + name='transition_color' + selected={annotation.settings.transition_color} + options={CURTAIN_STYLE_SELECT_OPTIONS} + defaultOption='Pick a style' + onChange={handleSettingsSelect} + /> <AnnotationFormFullscreen annotation={annotation} handleSettingsChange={handleSettingsChange} diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js index d83005e..7e823cc 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js +++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js @@ -2,7 +2,7 @@ import React, { Component } from 'react' import { timestamp } from 'app/utils' import { TextInput, LabelDescription, Select, Checkbox } from 'app/common' -import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants' +import { CURTAIN_COLOR_SELECT_OPTIONS, CURTAIN_STYLE_SELECT_OPTIONS } from 'app/constants' import { annotationFadeTimings } from 'app/utils/annotation.utils' import { makeMediaItems } from 'app/utils/annotation.utils' @@ -90,6 +90,22 @@ export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handle onChange={handleSettingsSelect} /> + <Select + title='Style' + name='curtain_style' + selected={annotation.settings.curtain_style} + options={CURTAIN_STYLE_SELECT_OPTIONS} + defaultOption='Pick a style' + onChange={handleSettingsSelect} + /> + + <Checkbox + label="Contains flashing light" + name="flashing_light_warning" + checked={annotation.settings.flashing_light_warning} + onChange={handleSettingsSelect} + /> + <AnnotationFormFullscreen alwaysAccessible annotation={annotation} 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 } |