From fb652afa3ad9069ec7bb7e6ec4621fc4b12968c3 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 14 Apr 2021 23:20:37 +0200 Subject: subtitles overlay --- frontend/site/projects/museum/charles-pages.js | 122 ------------------- frontend/site/projects/museum/subtitles.js | 134 +++++++++++++++++++++ frontend/site/projects/museum/views/nav.overlay.js | 2 + .../projects/museum/views/subtitles.overlay.js | 129 ++++++++++++++++++++ 4 files changed, 265 insertions(+), 122 deletions(-) delete mode 100644 frontend/site/projects/museum/charles-pages.js create mode 100644 frontend/site/projects/museum/subtitles.js create mode 100644 frontend/site/projects/museum/views/subtitles.overlay.js diff --git a/frontend/site/projects/museum/charles-pages.js b/frontend/site/projects/museum/charles-pages.js deleted file mode 100644 index 9fcb590..0000000 --- a/frontend/site/projects/museum/charles-pages.js +++ /dev/null @@ -1,122 +0,0 @@ -export const CHARLES_PAGES = { - 'stankievech-1': { - title: 'Mountain of the Sun, Cosmic Cave', - subtitles: [ - "This ‘mountain of the sun’, as it is also called,", - "is the equivalent of Meru, also entitled ‘white mountain’.", - "Meru is encircled by a green belt,", - "by the fact of being situated in the middle of the sea,", - "and a triangle of light radiates at its peak.", - "We have said that the zodiac’s two gates", - "which are respectively the entry to", - "and exit from the ‘cosmic cave’,", - "and which certain traditions designate as", - "the ‘gate of men’ and the ‘gate of the gods’,", - "inevitably must correspond to the two solstices.", - "Rene Guenon, Lord of the World, 1927." - ], - }, - 'stankievech-2': { - title: 'An Exhibition of Clammy Solitude', - subtitles: [ - "If an artist could see the world through the eyes of a caterpillar", - "he might be able to make some fascinating art.", - "Each one of these secret dens was also the entrance to the abyss.", - "Dungeons that dropped away from the eyes", - "into a damp cosmos of fungus and mold-", - "an exhibition of clammy solitude.", - "The double aspect of Quetzalcoatl is less a person", - "than an operation of totemic perception.", - "Quetzalcoatl becomes one half of an enantiomorph", - "(coatl means twin)", - "in search of the other half.", - "A mirror looking for its reflection but never quite finding it.", - "The morning star of Quetzal is apt to be polarized", - "in the shadowy reflection of the evening star.", - "Robert Smithson, Incidents of Mirror-Travel in the Yucatan, 1969" - ], - }, - 'stankievech-3': { - title: 'Superpositionality of the Hidden People', - 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.", - "Iceland spar is what hides the Hidden People,", - "makes it possible for them to move through the world", - "that thinks of itself as “era,”", - "provides that all-important ninety-degree twist to their light,", - "so they can exist alongside our own world but not be seen.", - "They and others as well, visitors from elsewhere, of non-human aspect.", - "Thomas Pynchon, Against the Day, 2006" - ], - }, - 'stankievech-4': { - title: 'They Simply Pointed to the Sky', - subtitles: [ - "The Sumerian word AN.BAR, the oldest word designating iron,", - "is made up of the pictograms ‘sky’ and ‘fire.’", - "We shall do well to bear in mind", - "the early religious significance attaching to aeroliths.", - "They fall to earth charged with celestial sanctity;", - "in a way, they represent heaven.", - "This suggests why so many meteorites were worshipped", - "or identified with a deity.", - "Peoples worked with meteoric iron for a long time", - "before learning how to use ferrous ores.", - "...When Cortez enquired of the Aztec chiefs", - "whence they obtained their knives", - "they simply pointed to the sky.", - "Mircea Eliade, The Forge and the Crucible, 1956", - ], - }, - 'stankievech-5': { - title: 'The Glass Key', - subtitles: [ - "Seeing the egg is impossible:", - "the egg is supervisible just as there are supersonic sounds.", - "No one can see the egg.", - "Does the dog see the egg?", - "Only machines see the egg.", - "The egg is invisible to the naked eye.", - "From one egg to another one arrives at God,", - "who is invisible to the naked eye.", - "The egg could have been a triangle", - "that rolled for so long in space that it became oval.", - "Is the egg basically a vessel?", - "Could it have been the first vessel sculpted by the Etruscans?", - "No.", - "The egg originated in Macedonia.", - "There it was calculated, fruit of the most arduous spontaneity.", - "In the sands of Macedonia a man holding a stick drew it.", - "And then erased it with his bare foot.", - "Clarice Lispector, The Egg and the Chicken, 1964" - ], - }, - 'stankievech-6': { - title: 'The Desert Turned to Glass', - subtitles: [ - "My anarchy obeys subterraneously a law", - "in which I deal occultly with astronomy, mathematics and mechanics.", - "And my hunger is fed by these putrefying beings in decomposition.", - "My rite is a purifier of forces.", - "But malignancy exists in the jungle.", - "I swallow a mouthful of blood that fills me entirely.", - "I hear cymbals and trumpets and tambourines", - "that fill the air with noise and uproar", - "drowning out the silence of the disc of the sun and its marvel.", - "I want a cloak woven from threads of solar gold.", - "The sun is the magical tension of the silence.", - "On my journey to the mysteries", - "I hear the carnivorous plant that laments times immemorial:", - "and I have obscene nightmares beneath the sick winds.", - "I am enchanted, seduced, transfixed by furtive voices.", - "The almost unintelligible cuneiform inscriptions", - "speak of how to conceive and give formulae", - "about how to feed from the force of darkness.", - "They speak of naked and crawling females.", - "And the solar eclipse causes secret terror", - "that nonetheless announces a splendor of heart.", - "Clarice Lispector, Agua Viva, 1973", - ], - }, -} diff --git a/frontend/site/projects/museum/subtitles.js b/frontend/site/projects/museum/subtitles.js new file mode 100644 index 0000000..9175e61 --- /dev/null +++ b/frontend/site/projects/museum/subtitles.js @@ -0,0 +1,134 @@ +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’.", + "Meru is encircled by a green belt,", + "by the fact of being situated in the middle of the sea,", + "and a triangle of light radiates at its peak.", + "We have said that the zodiac’s two gates", + "which are respectively the entry to", + "and exit from the ‘cosmic cave’,", + "and which certain traditions designate as", + "the ‘gate of men’ and the ‘gate of the gods’,", + "inevitably must correspond to the two solstices.", + "Rene Guenon, Lord of the World, 1927." + ], + }, + '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.", + "Each one of these secret dens was also the entrance to the abyss.", + "Dungeons that dropped away from the eyes", + "into a damp cosmos of fungus and mold-", + "an exhibition of clammy solitude.", + "The double aspect of Quetzalcoatl is less a person", + "than an operation of totemic perception.", + "Quetzalcoatl becomes one half of an enantiomorph", + "(coatl means twin)", + "in search of the other half.", + "A mirror looking for its reflection but never quite finding it.", + "The morning star of Quetzal is apt to be polarized", + "in the shadowy reflection of the evening star.", + "Robert Smithson, Incidents of Mirror-Travel in the Yucatan, 1969" + ], + }, + '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.", + "Iceland spar is what hides the Hidden People,", + "makes it possible for them to move through the world", + "that thinks of itself as “era,”", + "provides that all-important ninety-degree twist to their light,", + "so they can exist alongside our own world but not be seen.", + "They and others as well, visitors from elsewhere, of non-human aspect.", + "Thomas Pynchon, Against the Day, 2006" + ], + }, + '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.’", + "We shall do well to bear in mind", + "the early religious significance attaching to aeroliths.", + "They fall to earth charged with celestial sanctity;", + "in a way, they represent heaven.", + "This suggests why so many meteorites were worshipped", + "or identified with a deity.", + "Peoples worked with meteoric iron for a long time", + "before learning how to use ferrous ores.", + "...When Cortez enquired of the Aztec chiefs", + "whence they obtained their knives", + "they simply pointed to the sky.", + "Mircea Eliade, The Forge and the Crucible, 1956", + ], + }, + '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.", + "No one can see the egg.", + "Does the dog see the egg?", + "Only machines see the egg.", + "The egg is invisible to the naked eye.", + "From one egg to another one arrives at God,", + "who is invisible to the naked eye.", + "The egg could have been a triangle", + "that rolled for so long in space that it became oval.", + "Is the egg basically a vessel?", + "Could it have been the first vessel sculpted by the Etruscans?", + "No.", + "The egg originated in Macedonia.", + "There it was calculated, fruit of the most arduous spontaneity.", + "In the sands of Macedonia a man holding a stick drew it.", + "And then erased it with his bare foot.", + "Clarice Lispector, The Egg and the Chicken, 1964" + ], + }, + '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.", + "And my hunger is fed by these putrefying beings in decomposition.", + "My rite is a purifier of forces.", + "But malignancy exists in the jungle.", + "I swallow a mouthful of blood that fills me entirely.", + "I hear cymbals and trumpets and tambourines", + "that fill the air with noise and uproar", + "drowning out the silence of the disc of the sun and its marvel.", + "I want a cloak woven from threads of solar gold.", + "The sun is the magical tension of the silence.", + "On my journey to the mysteries", + "I hear the carnivorous plant that laments times immemorial:", + "and I have obscene nightmares beneath the sick winds.", + "I am enchanted, seduced, transfixed by furtive voices.", + "The almost unintelligible cuneiform inscriptions", + "speak of how to conceive and give formulae", + "about how to feed from the force of darkness.", + "They speak of naked and crawling females.", + "And the solar eclipse causes secret terror", + "that nonetheless announces a splendor of heart.", + "Clarice Lispector, Agua Viva, 1973", + ], + }, +} 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 { ) )} + ) } 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 ( +
+
+
+
+ ) + } +} + +const mapStateToProps = state => ({ + audio: state.audio, + popups: state.site.popups, + interactive: state.site.interactive, +}) + +export default connect(mapStateToProps)(SubtitlesOverlay) -- cgit v1.2.3-70-g09d2