1 files changed, 18 insertions, 5 deletions
diff --git a/frontend/site/projects/museum/views/titles.overlay.js b/frontend/site/projects/museum/views/titles.overlay.js
index 169dd85..f82f08a 100644
--- a/frontend/site/projects/museum/views/titles.overlay.js
+++ b/frontend/site/projects/museum/views/titles.overlay.js
@@ -11,6 +11,8 @@ const HEADPHONES_SHOW_DELAY = 500
 const HEADPHONES_HIDE_DELAY = 3000
 const TITLE_SHOW_DELAY = 1000
 const TITLE_HIDE_DELAY = 6000
+const SUBTITLE_HIDE_DELAY = 1000
+
 const FIRST_SUBTITLE_DELAY = 3000
 const SUBTITLE_DELAY = 3500
 const LAST_SUBTITLE_DELAY = 5000
@@ -100,16 +102,27 @@ class TitlesOverlay extends Component {
     }, HEADPHONES_SHOW_DELAY)
   }
 
-  showTitle() {
+  showTitle(showSubtitle) {
     if (!this.titleRef.current) return
+    let title;
+    if (showSubtitle) {
+      title = (this.props.language === 'de' && this.state.content.subtitle_de) || this.state.content.subtitle
+    } else {
+      title = (this.props.language === 'en' && this.state.content.subtitle_en) || this.state.content.title
+    }
     this.titleRef.current.innerHTML = ""
     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.innerHTML = this.state.content.title
+      this.titleRef.current.innerHTML = `<div>${title}</div>`
       this.titleRef.current.style.opacity = 1
       this.titleTimeout = setTimeout(() => {
         this.titleRef.current.style.opacity = 0
+        if (this.state.content.subtitle && !showSubtitle) {
+          setTimeout(() => {
+            this.showTitle(true)
+          }, SUBTITLE_HIDE_DELAY)
+        }
       }, TITLE_HIDE_DELAY)
     }, TITLE_SHOW_DELAY)
   }
@@ -135,6 +148,7 @@ class TitlesOverlay extends Component {
     const { content, showText } = this.state
     const { popups, interactive } = this.props
     if (!interactive || !content) return null
+      console.log(content)
     return (
       <div>
         <div
@@ -148,9 +162,7 @@ class TitlesOverlay extends Component {
         <div
           ref={this.titleRef}
           className="chapter-title"
-        >
-          {this.state.content.title}
-        </div>
+        />
         <div
           ref={this.textRef}
           className={showText ? "charles-text visible" : "charles-text"}
@@ -176,6 +188,7 @@ const mapStateToProps = state => ({
   audio: state.audio,
   popups: state.site.popups,
   interactive: state.site.interactive,
+  language: state.site.language,
 })
 
 export default connect(mapStateToProps)(TitlesOverlay)