summaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/site/projects/museum/subtitles.js (renamed from frontend/site/projects/museum/charles-pages.js)14
-rw-r--r--frontend/site/projects/museum/views/nav.overlay.js2
-rw-r--r--frontend/site/projects/museum/views/subtitles.overlay.js129
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)
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 13:08:34 +0000