From f66dd644e228592cb72e03b44cb63df1ea27e5f2 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 10 Nov 2020 15:25:09 +0100
Subject: new curtain styles

---
 .../components.fullscreen/fullscreen.utility.js    | 42 ++++++++++++++++++----
 .../views/viewer/player/components.media/media.css |  8 ++---
 .../player/components.media/video.subtitles.js     |  2 +-
 .../app/views/viewer/player/player.fullscreen.css  | 26 ++++++++++++--
 4 files changed, 64 insertions(+), 14 deletions(-)

(limited to 'animism-align/frontend/app/views/viewer/player')

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;
-- 
cgit v1.2.3-70-g09d2