fix minor issues with charles and jak

3 files changed, 35 insertions, 14 deletions

diff --git a/frontend/site/projects/museum/views/jakrawal.links.js b/frontend/site/projects/museum/views/jakrawal.links.js
index 880d0e6..04eaf79 100644
--- a/frontend/site/projects/museum/views/jakrawal.links.js
+++ b/frontend/site/projects/museum/views/jakrawal.links.js
@@ -89,7 +89,6 @@ class JakrawalLinks extends Component {
       text,
       hovering: false,
     })
-    console.log(isOnA, lateralLink, verticalLink)
     if (!lastParams || lastParams.page_name !== ('nilthamrong' + lateralLink)) {
       clearTimeout(this.timeout)
       this.timeout = setTimeout(this.goVertical, VERTICAL_TIMEOUT)
@@ -106,7 +105,7 @@ class JakrawalLinks extends Component {
     history.push(`/last-museum/nilthamrong-${this.state.lateralLink}/`)
   }
   goVertical() {
-    history.push(`/last-museum/nilthamrong-${this.state.lateralLink}/`)
+    history.push(`/last-museum/nilthamrong-${this.state.verticalLink}/`)
   }
 
   render() {
diff --git a/frontend/site/projects/museum/views/titles.css b/frontend/site/projects/museum/views/titles.css
index 802dab7..6bfc8b3 100644
--- a/frontend/site/projects/museum/views/titles.css
+++ b/frontend/site/projects/museum/views/titles.css
@@ -11,6 +11,24 @@
   opacity: 0;
 }
 
+.chapter-headphones {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  color: #fff;
+
+  padding: 1rem;
+  font-family: 'Helvetica', sans-serif;
+  font-size: 1.2rem;
+  pointer-events: none;
+  user-select: none;
+
+  transition: opacity 0.5s;
+  opacity: 0;
+}
+
 .charles-text {
   position: absolute;
   top: 12vh;
diff --git a/frontend/site/projects/museum/views/titles.overlay.js b/frontend/site/projects/museum/views/titles.overlay.js
index b3d41e4..3927152 100644
--- a/frontend/site/projects/museum/views/titles.overlay.js
+++ b/frontend/site/projects/museum/views/titles.overlay.js
@@ -19,12 +19,13 @@ class TitlesOverlay extends Component {
   state = {
     content: null,
     showText: false,
-        beating: false,
+    showVideo: false,
   }
 
   constructor(props) {
     super(props)
     this.titleRef = React.createRef()
+    this.headphonesRef = React.createRef()
     this.showTitle = this.showTitle.bind(this)
     this.showHeadphones = this.showHeadphones.bind(this)
     this.advance = this.advance.bind(this)
@@ -49,9 +50,10 @@ class TitlesOverlay extends Component {
       && this.state.content.popup
     ) {
       if (this.props.popups[this.state.content.popup]) {
-        this.startHeartbeat()
-      } else if (this.state.beating) {
+        this.setState({ showVideo: true })
+      } else if (this.state.showVideo) {
         this.setState({ showText: true })
+        this.startHeartbeat()
       }
     }
   }
@@ -64,14 +66,14 @@ class TitlesOverlay extends Component {
       this.setState({
         content: SUBTITLES[page_name],
         showText: false,
-        beating: false,
+        showVideo: false,
       })
       setTimeout(SUBTITLES[page_name].headphones ? this.showHeadphones : this.showTitle, 0)
     } else {
       this.setState({
         content: null,
         showText: false,
-        beating: false,
+        showVideo: false,
       })
     }
   }
@@ -83,19 +85,15 @@ class TitlesOverlay extends Component {
         id: "text-overlay",
         url: this.state.content.audio_url,
       })
-      this.setState({ beating: true })
     }
   }
 
   showHeadphones() {
-    if (!this.titleRef.current) return
-    this.titleRef.current.style.color = "rgba(255, 255, 255, 1.0)"
-    this.titleRef.current.style.opacity = 0
-    this.titleRef.current.innerHTML = "Headphones recommended"
+    if (!this.headphonesRef.current) return
     this.titleTimeout = setTimeout(() => {
-      this.titleRef.current.style.opacity = 1
+      this.headphonesRef.current.style.opacity = 1
       this.titleTimeout = setTimeout(() => {
-        this.titleRef.current.style.opacity = 0
+        this.headphonesRef.current.style.opacity = 0
         setTimeout(this.showTitle, TITLE_SHOW_DELAY)
       }, HEADPHONES_HIDE_DELAY)
     }, HEADPHONES_SHOW_DELAY)
@@ -125,6 +123,12 @@ class TitlesOverlay extends Component {
     return (
       <div>
         <div
+          ref={this.headphonesRef}
+          className="headphones-title"
+        >
+          {"Headphones recommended"}
+        </div>
+        <div
           ref={this.titleRef}
           className="chapter-title"
         >