new curtain styles

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
 }