subtitles overlay

3 files changed, 144 insertions, 1 deletions

diff --git a/frontend/site/projects/museum/charles-pages.js b/frontend/site/projects/museum/subtitles.js
index 9fcb590..9175e61 100644
--- a/frontend/site/projects/museum/charles-pages.js
+++ b/frontend/site/projects/museum/subtitles.js
@@ -1,6 +1,8 @@
-export const CHARLES_PAGES = {
+export const SUBTITLES = {
   'stankievech-1': {
     title: 'Mountain of the Sun, Cosmic Cave',
+    popup: "stars",
+    audio_url: "/last-museum/static/uploads/3/audio/Frame01-24sec.mp3",
     subtitles: [
       "This ‘mountain of the sun’, as it is also called,",
       "is the equivalent of Meru, also entitled ‘white mountain’.",
@@ -18,6 +20,8 @@ export const CHARLES_PAGES = {
   },
   'stankievech-2': {
     title: 'An Exhibition of Clammy Solitude',
+    popup: "temple",
+    audio_url: "/last-museum/static/uploads/3/audio/Frame02-33sec.mp3",
     subtitles: [
       "If an artist could see the world through the eyes of a caterpillar",
       "he might be able to make some fascinating art.",
@@ -38,6 +42,8 @@ export const CHARLES_PAGES = {
   },
   'stankievech-3': {
     title: 'Superpositionality of the Hidden People',
+    popup: "hypercard",
+    audio_url: "/last-museum/static/uploads/3/audio/Frame03-24sec.mp3",
     subtitles: [
       "Down where the “Hidden People” live, inside their private rock dwellings,",
       "where humans who visit them can be closed in and never find a way out again.",
@@ -52,6 +58,8 @@ export const CHARLES_PAGES = {
   },
   'stankievech-4': {
     title: 'They Simply Pointed to the Sky',
+    popup: "vr",
+    audio_url: "/last-museum/static/uploads/3/audio/Frame04-30sec.mp3",
     subtitles: [
       "The Sumerian word AN.BAR, the oldest word designating iron,",
       "is made up of the pictograms ‘sky’ and ‘fire.’",
@@ -71,6 +79,8 @@ export const CHARLES_PAGES = {
   },
   'stankievech-5': {
     title: 'The Glass Key',
+    popup: "magritte",
+    audio_url: "/last-museum/static/uploads/3/audio/Frame05-36sec.mp3",
     subtitles: [
       "Seeing the egg is impossible:",
       "the egg is supervisible just as there are supersonic sounds.",
@@ -94,6 +104,8 @@ export const CHARLES_PAGES = {
   },
   'stankievech-6': {
     title: 'The Desert Turned to Glass',
+    popup: "trinity",
+    audio_url: "/last-museum/static/uploads/3/audio/Frame06-46sec.mp3",
     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 dc059f5..e4a1a46 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -5,6 +5,7 @@ import actions from 'site/actions'
 import "./nav.css"
 
 import TextOverlay from './text.overlay'
+import SubtitlesOverlay from './subtitles.overlay'
 import { ARTISTS, ARTIST_ORDER, PROJECT_PAGE_SET } from "site/projects/museum/constants"
 import { ArrowLeft, ArrowRight } from "site/projects/museum/icons"
 import { history } from "site/store"
@@ -152,6 +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} />
       </div>
     )
   }
diff --git a/frontend/site/projects/museum/views/subtitles.overlay.js b/frontend/site/projects/museum/views/subtitles.overlay.js
new file mode 100644
index 0000000..b3bea35
--- /dev/null
+++ b/frontend/site/projects/museum/views/subtitles.overlay.js
@@ -0,0 +1,129 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import { SUBTITLES_OVERLAY } from '../subtitles.js'
+
+import './overlay.css'
+
+const TITLE_SHOW_DELAY = 3000
+const TITLE_HIDE_DELAY = 10000
+const SUBTITLE_DELAY = 2500
+const LAST_SUBTITLE_DELAY = 5000
+
+class SubtitlesOverlay extends Component {
+  state = {
+    content: null,
+  }
+
+  constructor(props) {
+    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()
+  }
+
+  componentDidUpdate(prevProps) {
+    // console.log(this.props.location.pathname, prevProps.location.pathname)
+    if (this.props.location.pathname !== prevProps.location.pathname) {
+      this.load()
+    }
+    if (
+      this.props.popups !== prevProps.popups
+      && this.state.content
+      && this.state.content.popup
+      && this.props.popups[this.state.content.popup]
+    ) {
+      this.startSubtitles()
+    }
+  }
+
+  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)
+    } else {
+      this.setState({
+        content: null,
+        open: false,
+      })
+    }
+  }
+
+  showTitle() {
+    if (!this.titleRef.current) return
+    this.titleRef.current.style.opacity = 0
+    this.titleTimeout = setTimeout(() => {
+      this.titleRef.current.style.opacity = 1
+      this.titleTimeout = setTimeout(() => {
+        this.titleRef.current.style.opacity = 0
+      }, TITLE_HIDE_DELAY)
+    }, 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.nextSubtitle()
+  }
+
+  nextSubtitle() {
+    if (!this.subtitleRef.current) return
+    this.index += 1
+    const subtitle = this.state.content.subtitles[this.index] || ""
+    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
+    if (!interactive || !content) return null
+    if (content.popup && !popups[content.popup]) return null
+    return (
+      <div>
+        <div
+          ref={this.titleRef}
+          className="chapter-title"
+          dangerouslySetInnerHTML={{ __html: content.title }}
+        />
+        <div
+          ref={this.subtitleRef}
+          className="subtitles"
+        />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  audio: state.audio,
+  popups: state.site.popups,
+  interactive: state.site.interactive,
+})
+
+export default connect(mapStateToProps)(SubtitlesOverlay)