diff options
4 files changed, 47 insertions, 15 deletions
diff --git a/frontend/site/projects/museum/subtitles.js b/frontend/site/projects/museum/subtitles.js index 9175e61..951b357 100644 --- a/frontend/site/projects/museum/subtitles.js +++ b/frontend/site/projects/museum/subtitles.js @@ -106,6 +106,7 @@ 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/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js index e4a1a46..69cc67a 100644 --- a/frontend/site/projects/museum/views/nav.overlay.js +++ b/frontend/site/projects/museum/views/nav.overlay.js @@ -153,7 +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} /> + <SubtitlesOverlay location={this.props.location} match={this.props.match} /> </div> ) } diff --git a/frontend/site/projects/museum/views/subtitles.css b/frontend/site/projects/museum/views/subtitles.css new file mode 100644 index 0000000..c790259 --- /dev/null +++ b/frontend/site/projects/museum/views/subtitles.css @@ -0,0 +1,23 @@ +.chapter-title { + position: absolute; + top: 2vh; + left: 50%; + transform: translateX(-50%); + white-space: nowrap; + color: rgba(255, 121, 13, 1.0); + font-family: "Druk Wide"; + font-size: 1.66vw; + transition: opacity 0.5s; + opacity: 0; +} + +.subtitles { + position: absolute; + bottom: 5rem; + left: 50%; + transform: translateX(-50%); + white-space: nowrap; + color: rgba(255, 121, 13, 1.0); + font-family: "Druk Wide"; + font-size: 1.66vw; +} diff --git a/frontend/site/projects/museum/views/subtitles.overlay.js b/frontend/site/projects/museum/views/subtitles.overlay.js index b3bea35..b34b5ef 100644 --- a/frontend/site/projects/museum/views/subtitles.overlay.js +++ b/frontend/site/projects/museum/views/subtitles.overlay.js @@ -1,13 +1,14 @@ import React, { Component } from 'react' import { connect } from 'react-redux' -import { SUBTITLES_OVERLAY } from '../subtitles.js' +import { SUBTITLES } from '../subtitles.js' -import './overlay.css' +import './subtitles.css' -const TITLE_SHOW_DELAY = 3000 +const TITLE_SHOW_DELAY = 1000 const TITLE_HIDE_DELAY = 10000 -const SUBTITLE_DELAY = 2500 +const FIRST_SUBTITLE_DELAY = 3000 +const SUBTITLE_DELAY = 3000 const LAST_SUBTITLE_DELAY = 5000 class SubtitlesOverlay extends Component { @@ -19,18 +20,22 @@ class SubtitlesOverlay extends Component { 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() + if (this.props.interactive) { + this.load() + } } componentDidUpdate(prevProps) { - // console.log(this.props.location.pathname, prevProps.location.pathname) - if (this.props.location.pathname !== prevProps.location.pathname) { + console.log((this.props.interactive && this.props.interactive !== prevProps.interactive), this.props.location.pathname !== prevProps.location.pathname) + if ( + (this.props.interactive && this.props.interactive !== prevProps.interactive) + || this.props.location.pathname !== prevProps.location.pathname + ) { this.load() } if ( @@ -64,6 +69,7 @@ class SubtitlesOverlay extends Component { 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.style.opacity = 1 @@ -83,13 +89,14 @@ class SubtitlesOverlay extends Component { } clearTimeout(this.subtitleTimeout) this.index = -1 - this.nextSubtitle() + 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) @@ -103,7 +110,6 @@ class SubtitlesOverlay extends Component { 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 @@ -111,10 +117,12 @@ class SubtitlesOverlay extends Component { className="chapter-title" dangerouslySetInnerHTML={{ __html: content.title }} /> - <div - ref={this.subtitleRef} - className="subtitles" - /> + {content.popup && popups[content.popup] && ( + <div + ref={this.subtitleRef} + className="subtitles" + /> + )} </div> ) } |