charles subtitles styles

4 files changed, 47 insertions, 15 deletions

diff --git a/frontend/site/projects/museum/subtitles.js b/frontend/site/projects/museum/subtitles.js
index 9175e61..951b357 100644
--- a/frontend/site/projects/museum/subtitles.js
+++ b/frontend/site/projects/museum/subtitles.js
@@ -106,6 +106,7 @@ export const SUBTITLES = {
     title: 'The Desert Turned to Glass',
     popup: "trinity",
     audio_url: "/last-museum/static/uploads/3/audio/Frame06-46sec.mp3",
+    color: "#000",
     subtitles: [
       "My anarchy obeys subterraneously a law",
       "in which I deal occultly with astronomy, mathematics and mechanics.",
diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
index e4a1a46..69cc67a 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -153,7 +153,7 @@ export default class NavOverlay extends Component {
           )
         )}
         <TextOverlay location={this.props.location} match={this.props.match} />
-        <Subtitles location={this.props.location} match={this.props.match} />
+        <SubtitlesOverlay location={this.props.location} match={this.props.match} />
       </div>
     )
   }
diff --git a/frontend/site/projects/museum/views/subtitles.css b/frontend/site/projects/museum/views/subtitles.css
new file mode 100644
index 0000000..c790259
--- /dev/null
+++ b/frontend/site/projects/museum/views/subtitles.css
@@ -0,0 +1,23 @@
+.chapter-title {
+  position: absolute;
+  top: 2vh;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  color: rgba(255, 121, 13, 1.0);
+  font-family: "Druk Wide";
+  font-size: 1.66vw;
+  transition: opacity 0.5s;
+  opacity: 0;
+}
+
+.subtitles {
+  position: absolute;
+  bottom: 5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  color: rgba(255, 121, 13, 1.0);
+  font-family: "Druk Wide";
+  font-size: 1.66vw;
+}
diff --git a/frontend/site/projects/museum/views/subtitles.overlay.js b/frontend/site/projects/museum/views/subtitles.overlay.js
index b3bea35..b34b5ef 100644
--- a/frontend/site/projects/museum/views/subtitles.overlay.js
+++ b/frontend/site/projects/museum/views/subtitles.overlay.js
@@ -1,13 +1,14 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
-import { SUBTITLES_OVERLAY } from '../subtitles.js'
+import { SUBTITLES } from '../subtitles.js'
 
-import './overlay.css'
+import './subtitles.css'
 
-const TITLE_SHOW_DELAY = 3000
+const TITLE_SHOW_DELAY = 1000
 const TITLE_HIDE_DELAY = 10000
-const SUBTITLE_DELAY = 2500
+const FIRST_SUBTITLE_DELAY = 3000
+const SUBTITLE_DELAY = 3000
 const LAST_SUBTITLE_DELAY = 5000
 
 class SubtitlesOverlay extends Component {
@@ -19,18 +20,22 @@ class SubtitlesOverlay extends Component {
     super(props)
     this.titleRef = React.createRef()
     this.subtitleRef = React.createRef()
-    this.toggle = this.toggle.bind(this)
     this.showTitle = this.showTitle.bind(this)
     this.nextSubtitle = this.nextSubtitle.bind(this)
   }
 
   componentDidMount() {
-    this.load()
+    if (this.props.interactive) {
+      this.load()
+    }
   }
 
   componentDidUpdate(prevProps) {
-    // console.log(this.props.location.pathname, prevProps.location.pathname)
-    if (this.props.location.pathname !== prevProps.location.pathname) {
+    console.log((this.props.interactive && this.props.interactive !== prevProps.interactive), this.props.location.pathname !== prevProps.location.pathname)
+    if (
+      (this.props.interactive && this.props.interactive !== prevProps.interactive)
+      || this.props.location.pathname !== prevProps.location.pathname
+    ) {
       this.load()
     }
     if (
@@ -64,6 +69,7 @@ class SubtitlesOverlay extends Component {
 
   showTitle() {
     if (!this.titleRef.current) return
+    this.titleRef.current.style.color = this.state.content.color || "rgba(255, 121, 13, 1.0)"
     this.titleRef.current.style.opacity = 0
     this.titleTimeout = setTimeout(() => {
       this.titleRef.current.style.opacity = 1
@@ -83,13 +89,14 @@ class SubtitlesOverlay extends Component {
     }
     clearTimeout(this.subtitleTimeout)
     this.index = -1
-    this.nextSubtitle()
+    this.subtitleTimeout = setTimeout(this.nextSubtitle, FIRST_SUBTITLE_DELAY)
   }
 
   nextSubtitle() {
     if (!this.subtitleRef.current) return
     this.index += 1
     const subtitle = this.state.content.subtitles[this.index] || ""
+    this.subtitleRef.current.style.color = this.state.content.color || "rgba(255, 121, 13, 1.0)"
     this.subtitleRef.current.innerHTML = subtitle
     if (this.index === (this.state.content.subtitles.length - 1)) {
       this.subtitleTimeout = setTimeout(this.nextSubtitle, LAST_SUBTITLE_DELAY)
@@ -103,7 +110,6 @@ class SubtitlesOverlay extends Component {
     const { content } = this.state
     const { popups, interactive } = this.props
     if (!interactive || !content) return null
-    if (content.popup && !popups[content.popup]) return null
     return (
       <div>
         <div
@@ -111,10 +117,12 @@ class SubtitlesOverlay extends Component {
           className="chapter-title"
           dangerouslySetInnerHTML={{ __html: content.title }}
         />
-        <div
-          ref={this.subtitleRef}
-          className="subtitles"
-        />
+        {content.popup && popups[content.popup] && (
+          <div
+            ref={this.subtitleRef}
+            className="subtitles"
+          />
+        )}
       </div>
     )
   }