1 files changed, 22 insertions, 14 deletions

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>
     )
   }