headphone msg

2 files changed, 33 insertions, 41 deletions

diff --git a/frontend/site/projects/museum/subtitles.js b/frontend/site/projects/museum/subtitles.js
index 85f7ed5..4440ce9 100644
--- a/frontend/site/projects/museum/subtitles.js
+++ b/frontend/site/projects/museum/subtitles.js
@@ -1,5 +1,6 @@
 export const SUBTITLES = {
   'stankievech-1': {
+    headphones: true,
     title: 'Mountain of the Sun, Cosmic Cave',
     popup: "stars",
     audio_url: "/last-museum/static/uploads/3/audio/Frame01-24sec.mp3",
@@ -106,7 +107,6 @@ 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/titles.overlay.js b/frontend/site/projects/museum/views/titles.overlay.js
index 26acc05..a772559 100644
--- a/frontend/site/projects/museum/views/titles.overlay.js
+++ b/frontend/site/projects/museum/views/titles.overlay.js
@@ -5,6 +5,8 @@ import { SUBTITLES } from '../subtitles.js'
 
 import './titles.css'
 
+const HEADPHONES_SHOW_DELAY = 500
+const HEADPHONES_HIDE_DELAY = 3000
 const TITLE_SHOW_DELAY = 1000
 const TITLE_HIDE_DELAY = 6000
 const FIRST_SUBTITLE_DELAY = 3000
@@ -19,9 +21,8 @@ class TitlesOverlay extends Component {
   constructor(props) {
     super(props)
     this.titleRef = React.createRef()
-    this.subtitleRef = React.createRef()
     this.showTitle = this.showTitle.bind(this)
-    this.nextSubtitle = this.nextSubtitle.bind(this)
+    this.showHeadphones = this.showHeadphones.bind(this)
   }
 
   componentDidMount() {
@@ -43,21 +44,20 @@ class TitlesOverlay extends Component {
       && this.state.content.popup
       && this.props.popups[this.state.content.popup]
     ) {
-      this.startSubtitles()
+      this.startHeartbeat()
     }
   }
 
   load() {
     const { page_name } = this.props.match.params
     clearTimeout(this.titleTimeout)
-    clearTimeout(this.subtitleTimeout)
     this.props.audio.player.stop("text-overlay")
     if (SUBTITLES[page_name]) {
       this.setState({
         content: SUBTITLES[page_name],
         open: false,
       })
-      setTimeout(this.showTitle, 0)
+      setTimeout(SUBTITLES[page_name].headphones ? this.showHeadphones : this.showTitle, 0)
     } else {
       this.setState({
         content: null,
@@ -66,11 +66,36 @@ class TitlesOverlay extends Component {
     }
   }
 
+  startHeartbeat() {
+    if (this.state.content.audio_url) {
+      this.props.audio.player.stop("text-overlay")
+      this.props.audio.player.playURL({
+        id: "text-overlay",
+        url: this.state.content.audio_url,
+      })
+    }
+  }
+
+  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"
+    this.titleTimeout = setTimeout(() => {
+      this.titleRef.current.style.opacity = 1
+      this.titleTimeout = setTimeout(() => {
+        this.titleRef.current.style.opacity = 0
+        setTimeout(this.showTitle, TITLE_SHOW_DELAY)
+      }, HEADPHONES_HIDE_DELAY)
+    }, HEADPHONES_SHOW_DELAY)
+  }
+
   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.innerHTML = this.state.content.title
       this.titleRef.current.style.opacity = 1
       this.titleTimeout = setTimeout(() => {
         this.titleRef.current.style.opacity = 0
@@ -78,33 +103,6 @@ class TitlesOverlay extends Component {
     }, TITLE_SHOW_DELAY)
   }
 
-  startSubtitles() {
-    if (this.state.content.audio_url) {
-      this.props.audio.player.stop("text-overlay")
-      this.props.audio.player.playURL({
-        id: "text-overlay",
-        url: this.state.content.audio_url,
-      })
-    }
-    clearTimeout(this.subtitleTimeout)
-    this.index = -1
-    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)
-    }
-    else if (subtitle.length) {
-      this.subtitleTimeout = setTimeout(this.nextSubtitle, SUBTITLE_DELAY)
-    }
-  }
-
   render() {
     const { content } = this.state
     const { popups, interactive } = this.props
@@ -114,14 +112,8 @@ class TitlesOverlay extends Component {
         <div
           ref={this.titleRef}
           className="chapter-title"
-          dangerouslySetInnerHTML={{ __html: content.title }}
-        />
-        {content.popup && popups[content.popup] && (
-          <div
-            ref={this.subtitleRef}
-            className="subtitles"
-          />
-        )}
+        >{this.state.content.title}
+        </div>
       </div>
     )
   }