From a20da98081b91bcdb8d02c68edf6fcccf8fb046a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 16 Apr 2021 21:33:09 +0200 Subject: basic jakrawal --- frontend/site/projects/museum/views/_subtitles.css | 25 ++++ .../projects/museum/views/_subtitles.overlay.js | 136 +++++++++++++++++++++ frontend/site/projects/museum/views/artists.css | 7 +- frontend/site/projects/museum/views/artists.js | 10 ++ frontend/site/projects/museum/views/credits.css | 1 + frontend/site/projects/museum/views/credits.js | 10 ++ frontend/site/projects/museum/views/essay.css | 33 ++++- frontend/site/projects/museum/views/essay.js | 10 ++ .../site/projects/museum/views/jakrawal.links.css | 49 ++++++++ .../site/projects/museum/views/jakrawal.links.js | 130 ++++++++++++++++++++ frontend/site/projects/museum/views/nav.css | 4 +- frontend/site/projects/museum/views/nav.overlay.js | 8 +- frontend/site/projects/museum/views/subtitles.css | 25 ---- .../projects/museum/views/subtitles.overlay.js | 136 --------------------- frontend/site/projects/museum/views/titles.css | 12 ++ .../site/projects/museum/views/titles.overlay.js | 136 +++++++++++++++++++++ 16 files changed, 564 insertions(+), 168 deletions(-) create mode 100644 frontend/site/projects/museum/views/_subtitles.css create mode 100644 frontend/site/projects/museum/views/_subtitles.overlay.js create mode 100644 frontend/site/projects/museum/views/jakrawal.links.css create mode 100644 frontend/site/projects/museum/views/jakrawal.links.js delete mode 100644 frontend/site/projects/museum/views/subtitles.css delete mode 100644 frontend/site/projects/museum/views/subtitles.overlay.js create mode 100644 frontend/site/projects/museum/views/titles.css create mode 100644 frontend/site/projects/museum/views/titles.overlay.js diff --git a/frontend/site/projects/museum/views/_subtitles.css b/frontend/site/projects/museum/views/_subtitles.css new file mode 100644 index 0000000..059acec --- /dev/null +++ b/frontend/site/projects/museum/views/_subtitles.css @@ -0,0 +1,25 @@ +.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: 4rem; + left: 50%; + transform: translateX(-50%); + white-space: nowrap; + color: white; + text-shadow: 0 0 6px #000; + /*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 new file mode 100644 index 0000000..6d5a32a --- /dev/null +++ b/frontend/site/projects/museum/views/_subtitles.overlay.js @@ -0,0 +1,136 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' + +import { SUBTITLES } from '../subtitles.js' + +import './subtitles.css' + +const TITLE_SHOW_DELAY = 1000 +const TITLE_HIDE_DELAY = 6000 +const FIRST_SUBTITLE_DELAY = 3000 +const SUBTITLE_DELAY = 3500 +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.showTitle = this.showTitle.bind(this) + this.nextSubtitle = this.nextSubtitle.bind(this) + } + + componentDidMount() { + if (this.props.interactive) { + this.load() + } + } + + componentDidUpdate(prevProps) { + if ( + (this.props.interactive && this.props.interactive !== prevProps.interactive) + || 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.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 + 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.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 + if (!interactive || !content) return null + return ( +
+
+ {content.popup && popups[content.popup] && ( +
+ )} +
+ ) + } +} + +const mapStateToProps = state => ({ + audio: state.audio, + popups: state.site.popups, + interactive: state.site.interactive, +}) + +export default connect(mapStateToProps)(SubtitlesOverlay) diff --git a/frontend/site/projects/museum/views/artists.css b/frontend/site/projects/museum/views/artists.css index 015a4db..c2350a6 100644 --- a/frontend/site/projects/museum/views/artists.css +++ b/frontend/site/projects/museum/views/artists.css @@ -69,9 +69,14 @@ pointer-events: none; } .page-artists .artist-detail.visible { + color: #000; + background: #FF790D; pointer-events: auto; opacity: 1; } +.page.page-artists .artist-detail.visible a { + color: #000; +} .page-artists .artist-detail-name { font-size: 14.5vh; @@ -87,7 +92,7 @@ } .page-artists .nav-arrow path { stroke: #FF790D; - fill: transparent; + fill: #FF790D; } .page-artists .artist-content { diff --git a/frontend/site/projects/museum/views/artists.js b/frontend/site/projects/museum/views/artists.js index 912e0e8..591b1d5 100644 --- a/frontend/site/projects/museum/views/artists.js +++ b/frontend/site/projects/museum/views/artists.js @@ -6,6 +6,8 @@ import "./artists.css" import { ARTISTS, ARTIST_ORDER } from "site/projects/museum/constants" import { ArrowLeft, ArrowRight } from "site/projects/museum/icons" +import { history } from "site/store" + export default class Artists extends Component { state = { currentIndex: 0, @@ -18,6 +20,7 @@ export default class Artists extends Component { this.showArtist = this.showArtist.bind(this) this.previousArtist = this.previousArtist.bind(this) this.nextArtist = this.nextArtist.bind(this) + this.goHome = this.goHome.bind(this) } componentDidMount() { @@ -43,6 +46,10 @@ export default class Artists extends Component { this.scrollToTop() } + goHome() { + history.push(`/last-museum/home/`) + } + scrollToTop() { setTimeout(() => { Array.from(this.ref.current.querySelectorAll(".artist-content")).forEach(el => { @@ -79,6 +86,9 @@ export default class Artists extends Component {
{ArrowLeft}
{ArrowRight}
+
+ Home +
) } diff --git a/frontend/site/projects/museum/views/credits.css b/frontend/site/projects/museum/views/credits.css index 73343f7..d7c6f35 100644 --- a/frontend/site/projects/museum/views/credits.css +++ b/frontend/site/projects/museum/views/credits.css @@ -22,6 +22,7 @@ text-align: center; line-height: 1; white-space: nowrap; + cursor: default; } .page-title span { margin-left: -0.45vw; diff --git a/frontend/site/projects/museum/views/credits.js b/frontend/site/projects/museum/views/credits.js index 8e91ea5..fd17045 100644 --- a/frontend/site/projects/museum/views/credits.js +++ b/frontend/site/projects/museum/views/credits.js @@ -1,12 +1,15 @@ import React, { Component } from 'react' import actions from 'site/actions' +import { history } from "site/store" + import "./credits.css" export default class Credits extends Component { constructor(props) { super(props) this.handleClick = this.handleClick.bind(this) + this.goHome = this.goHome.bind(this) this.state = { } } @@ -19,6 +22,10 @@ export default class Credits extends Component { e && e.preventDefault() } + goHome() { + history.push(`/last-museum/home/`) + } + render() { return (
@@ -114,6 +121,9 @@ export default class Credits extends Component {
+
+ Home +
) } diff --git a/frontend/site/projects/museum/views/essay.css b/frontend/site/projects/museum/views/essay.css index 24917fd..0cc66a9 100644 --- a/frontend/site/projects/museum/views/essay.css +++ b/frontend/site/projects/museum/views/essay.css @@ -1,3 +1,25 @@ + +.page .home-link { + position: fixed; + top: 0; + left: 0; + padding: 1rem; + color: black; + font-family: 'Helvetica', sans-serif; + font-size: 1.2rem; + cursor: pointer; + user-select: none; + transition: color 0.1s; + color: rgb(255, 121, 13); +} +.page .home-link:hover { + color: #fff; +} +.page .home-link.black { + color: #000; +} + + .page-essay.page-artists .artist-list { justify-content: flex-start; } @@ -19,6 +41,14 @@ line-height: 1.4; } +.page-essay.page-artists .artist-detail.visible { + background: rgb(255, 121, 13); + color: #000; +} +.page.page-essay.page-artists .artist-detail.visible a { + color: #000; +} + .page-essay a:hover { text-decoration: underline; } @@ -46,7 +76,8 @@ width: 100%; } .globe path { - stroke: rgb(255, 121, 13); + /*stroke: rgb(255, 121, 13);*/ + stroke: rgb(0, 0, 0); stroke-miterlimit: 10; stroke-linecap: round; stroke-linejoin: round; diff --git a/frontend/site/projects/museum/views/essay.js b/frontend/site/projects/museum/views/essay.js index e271934..ddfbfcb 100644 --- a/frontend/site/projects/museum/views/essay.js +++ b/frontend/site/projects/museum/views/essay.js @@ -7,6 +7,8 @@ import "./essay.css" import { ARTISTS, ARTIST_ORDER, ESSAYS, ESSAY_ORDER } from "site/projects/museum/constants" import { ArrowLeft, ArrowRight, Globe } from "site/projects/museum/icons" +import { history } from "site/store" + export default class Essays extends Component { state = { currentIndex: 0, @@ -20,6 +22,7 @@ export default class Essays extends Component { this.previousEssay = this.previousEssay.bind(this) this.nextEssay = this.nextEssay.bind(this) this.close = this.close.bind(this) + this.goHome = this.goHome.bind(this) } componentDidMount() { @@ -45,6 +48,10 @@ export default class Essays extends Component { this.scrollToTop() } + goHome() { + history.push(`/last-museum/home/`) + } + scrollToTop() { setTimeout(() => { Array.from(this.ref.current.querySelectorAll(".artist-detail")).forEach(el => { @@ -88,6 +95,9 @@ export default class Essays extends Component {
{ArrowLeft}
{ArrowRight}
+
+ Home +
) } diff --git a/frontend/site/projects/museum/views/jakrawal.links.css b/frontend/site/projects/museum/views/jakrawal.links.css new file mode 100644 index 0000000..96cc0d3 --- /dev/null +++ b/frontend/site/projects/museum/views/jakrawal.links.css @@ -0,0 +1,49 @@ +.jakrawal-left { + position: absolute; + top: 0; + left: 0; + width: 20%; + min-width: 140px; + height: 100%; + background-image: url(/last-museum/static/media/last-museum/jakrawal-nilthamrong/left.png); + background-position: left 40px center; + background-repeat: no-repeat; + cursor: url(/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-102.png) 50 50, pointer; +} + +.jakrawal-right { + position: absolute; + top: 0; + right: 0; + width: 20%; + min-width: 140px; + height: 100%; + background-image: url(/last-museum/static/media/last-museum/jakrawal-nilthamrong/right.png); + background-position: right 40px center; + background-repeat: no-repeat; + cursor: url(/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-102.png) 50 50, pointer; +} + +.jakrawal-text { + position: absolute; + bottom: 5rem; + left: 0; + width: 100%; + padding: 0 5rem 0 5rem; + color: rgba(255, 121, 13, 1.0); + font-family: "Druk Wide"; + font-size: 1.66vw; + transition: opacity 0.2s; + opacity: 0; + text-align: center; +} +.jakrawal-text.hovering { + opacity: 1; +} + +.jakrawal-text-icon { + position: absolute; + top: 1rem; + right: 1rem; + cursor: url(/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-103.png), pointer; +} diff --git a/frontend/site/projects/museum/views/jakrawal.links.js b/frontend/site/projects/museum/views/jakrawal.links.js new file mode 100644 index 0000000..880d0e6 --- /dev/null +++ b/frontend/site/projects/museum/views/jakrawal.links.js @@ -0,0 +1,130 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' + +import './jakrawal.links.css' + +import { history } from "site/store" + +const JAKRAWAL_TEXTS = [ + "Wildfires occur frequently during the dry season in northern Thailand’s high mountains. The source of fire is not natural but arson.", + "In the past it was hypothesized that local people set the fires to clear land for agricultural use, or for hunting. There were efforts to solve the problem at the community level, but the fires only became more severe.", + "Strangely, the blazes often occurred in the national park—an area difficult for villagers to access.", + "During the wildfire suppression efforts of May 2020, a group of scholars and volunteers discovered important evidence that would change the original hypothesis.", + "They found several instances of improvised devices made of clothes pegs connected to a small battery by a power cable.", + "Combustion was triggered by a small clod of clay positioned in the middle between the pegs, acting as a timer. After melting in the heat the wires attached to the batteries would ignite.", + "Villagers who were interviewed said that this was not a technique that they were familiar with.", + "Although we cannot know the intention of the burners, it is likely that the park’s natural resources are being used to benefit some group of people. And the poor have always been condemned.", +] + +const RESET_STATE = { + left: null, + right: null, + lateralLink: null, + verticalLink: null, + text: null, + hovering: false, +} + +const VERTICAL_TIMEOUT = 40000 + +class JakrawalLinks extends Component { + state = { + ...RESET_STATE + } + + constructor(props) { + super(props) + this.goLateral = this.goLateral.bind(this) + this.goVertical = this.goVertical.bind(this) + this.handleEnter = this.handleEnter.bind(this) + this.handleLeave = this.handleLeave.bind(this) + } + + componentDidMount() { + if (this.props.interactive) { + this.load() + } + } + + componentDidUpdate(prevProps) { + if ( + (this.props.interactive && this.props.interactive !== prevProps.interactive) + || this.props.location.pathname !== prevProps.location.pathname + ) { + this.load(prevProps.match && prevProps.match.params) + } + } + + load(lastParams) { + const { page_name } = this.props.match.params + const page_partz = page_name.split("-") + const isJakrawal = page_partz[0] === 'nilthamrong' + + if (!isJakrawal || page_partz[1] === 'home') { + clearTimeout(this.timeout) + this.setState({ + ...RESET_STATE, + }) + return + } + if (page_partz[1] === 'a9') { + clearTimeout(this.timeout) + this.timeout = setTimeout(this.goVertical, VERTICAL_TIMEOUT) + this.setState({ + ...RESET_STATE, + verticalLink: "home", + }) + return + } + const partz = page_partz[1].split("") + const isOnA = partz[0] === 'a'; + const lateralLink = (isOnA ? 'b' : 'a') + partz[1] + const verticalLink = partz[0] + (parseInt(partz[1]) + 1) + const text = JAKRAWAL_TEXTS[parseInt(partz[1]) - 1] + this.setState({ + left: !isOnA, + right: isOnA, + lateralLink, + verticalLink, + text, + hovering: false, + }) + console.log(isOnA, lateralLink, verticalLink) + if (!lastParams || lastParams.page_name !== ('nilthamrong' + lateralLink)) { + clearTimeout(this.timeout) + this.timeout = setTimeout(this.goVertical, VERTICAL_TIMEOUT) + } + } + + handleEnter() { + this.setState({ hovering: true }) + } + handleLeave() { + this.setState({ hovering: false }) + } + goLateral() { + history.push(`/last-museum/nilthamrong-${this.state.lateralLink}/`) + } + goVertical() { + history.push(`/last-museum/nilthamrong-${this.state.lateralLink}/`) + } + + render() { + const { left, right, text, hovering } = this.state + if (!this.props.interactive || !text) return null + return ( +
+ {left &&
} + {right &&
} + {text &&
{text}
} + {text &&
} +
+ ) + } +} + +const mapStateToProps = state => ({ + interactive: state.site.interactive, +}) + +export default connect(mapStateToProps)(JakrawalLinks) diff --git a/frontend/site/projects/museum/views/nav.css b/frontend/site/projects/museum/views/nav.css index 27b9190..bd584a6 100644 --- a/frontend/site/projects/museum/views/nav.css +++ b/frontend/site/projects/museum/views/nav.css @@ -46,12 +46,12 @@ transform: translateY(3rem); } .nav-arrow path { - fill: transparent; - + fill: rgba(255, 121, 13, 1.0); stroke: rgba(255, 121, 13, 1.0); stroke-width: 2px; } .nav-arrow:hover path { + fill: rgba(255, 255, 255, 1.0); stroke: rgba(255, 255, 255, 1.0); } .nav-arrow.arrow-left { diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js index c2bd94b..f9ece7a 100644 --- a/frontend/site/projects/museum/views/nav.overlay.js +++ b/frontend/site/projects/museum/views/nav.overlay.js @@ -5,7 +5,8 @@ import actions from 'site/actions' import "./nav.css" import TextOverlay from './text.overlay' -import SubtitlesOverlay from './subtitles.overlay' +import JakrawalLinks from './jakrawal.links' +import TitlesOverlay from './titles.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" @@ -68,7 +69,7 @@ export default class NavOverlay extends Component { } else if (PROJECT_PAGE_SET.has(pathkey)) { this.setState({ - showHome: true, + showHome: false, showFooter: false, showArtist: false, showCounter: false, @@ -131,6 +132,7 @@ export default class NavOverlay extends Component { const { showArtist, showHome, showCounter, showFooter, artist } = this.state return (
+ {showHome && (
Home @@ -153,7 +155,7 @@ export default class NavOverlay extends Component {
) )} - +
) } diff --git a/frontend/site/projects/museum/views/subtitles.css b/frontend/site/projects/museum/views/subtitles.css deleted file mode 100644 index 059acec..0000000 --- a/frontend/site/projects/museum/views/subtitles.css +++ /dev/null @@ -1,25 +0,0 @@ -.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: 4rem; - left: 50%; - transform: translateX(-50%); - white-space: nowrap; - color: white; - text-shadow: 0 0 6px #000; - /*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 deleted file mode 100644 index 6d5a32a..0000000 --- a/frontend/site/projects/museum/views/subtitles.overlay.js +++ /dev/null @@ -1,136 +0,0 @@ -import React, { Component } from 'react' -import { connect } from 'react-redux' - -import { SUBTITLES } from '../subtitles.js' - -import './subtitles.css' - -const TITLE_SHOW_DELAY = 1000 -const TITLE_HIDE_DELAY = 6000 -const FIRST_SUBTITLE_DELAY = 3000 -const SUBTITLE_DELAY = 3500 -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.showTitle = this.showTitle.bind(this) - this.nextSubtitle = this.nextSubtitle.bind(this) - } - - componentDidMount() { - if (this.props.interactive) { - this.load() - } - } - - componentDidUpdate(prevProps) { - if ( - (this.props.interactive && this.props.interactive !== prevProps.interactive) - || 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.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 - 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.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 - if (!interactive || !content) return null - return ( -
-
- {content.popup && popups[content.popup] && ( -
- )} -
- ) - } -} - -const mapStateToProps = state => ({ - audio: state.audio, - popups: state.site.popups, - interactive: state.site.interactive, -}) - -export default connect(mapStateToProps)(SubtitlesOverlay) diff --git a/frontend/site/projects/museum/views/titles.css b/frontend/site/projects/museum/views/titles.css new file mode 100644 index 0000000..a02ab26 --- /dev/null +++ b/frontend/site/projects/museum/views/titles.css @@ -0,0 +1,12 @@ +.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; +} diff --git a/frontend/site/projects/museum/views/titles.overlay.js b/frontend/site/projects/museum/views/titles.overlay.js new file mode 100644 index 0000000..26acc05 --- /dev/null +++ b/frontend/site/projects/museum/views/titles.overlay.js @@ -0,0 +1,136 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' + +import { SUBTITLES } from '../subtitles.js' + +import './titles.css' + +const TITLE_SHOW_DELAY = 1000 +const TITLE_HIDE_DELAY = 6000 +const FIRST_SUBTITLE_DELAY = 3000 +const SUBTITLE_DELAY = 3500 +const LAST_SUBTITLE_DELAY = 5000 + +class TitlesOverlay extends Component { + state = { + content: null, + } + + constructor(props) { + super(props) + this.titleRef = React.createRef() + this.subtitleRef = React.createRef() + this.showTitle = this.showTitle.bind(this) + this.nextSubtitle = this.nextSubtitle.bind(this) + } + + componentDidMount() { + if (this.props.interactive) { + this.load() + } + } + + componentDidUpdate(prevProps) { + if ( + (this.props.interactive && this.props.interactive !== prevProps.interactive) + || 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.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 + 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.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 + if (!interactive || !content) return null + return ( +
+
+ {content.popup && popups[content.popup] && ( +
+ )} +
+ ) + } +} + +const mapStateToProps = state => ({ + audio: state.audio, + popups: state.site.popups, + interactive: state.site.interactive, +}) + +export default connect(mapStateToProps)(TitlesOverlay) -- cgit v1.2.3-70-g09d2