new curtain styles

1 files changed, 35 insertions, 7 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>
   )
 }