diff options
| -rw-r--r-- | frontend/site/projects/museum/views/jakrawal.links.js | 3 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/titles.css | 18 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/titles.overlay.js | 28 | ||||
| -rw-r--r-- | package.json | 2 |
4 files changed, 36 insertions, 15 deletions
diff --git a/frontend/site/projects/museum/views/jakrawal.links.js b/frontend/site/projects/museum/views/jakrawal.links.js index 880d0e6..04eaf79 100644 --- a/frontend/site/projects/museum/views/jakrawal.links.js +++ b/frontend/site/projects/museum/views/jakrawal.links.js @@ -89,7 +89,6 @@ class JakrawalLinks extends Component { 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) @@ -106,7 +105,7 @@ class JakrawalLinks extends Component { history.push(`/last-museum/nilthamrong-${this.state.lateralLink}/`) } goVertical() { - history.push(`/last-museum/nilthamrong-${this.state.lateralLink}/`) + history.push(`/last-museum/nilthamrong-${this.state.verticalLink}/`) } render() { diff --git a/frontend/site/projects/museum/views/titles.css b/frontend/site/projects/museum/views/titles.css index 802dab7..6bfc8b3 100644 --- a/frontend/site/projects/museum/views/titles.css +++ b/frontend/site/projects/museum/views/titles.css @@ -11,6 +11,24 @@ opacity: 0; } +.chapter-headphones { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + white-space: nowrap; + color: #fff; + + padding: 1rem; + font-family: 'Helvetica', sans-serif; + font-size: 1.2rem; + pointer-events: none; + user-select: none; + + transition: opacity 0.5s; + opacity: 0; +} + .charles-text { position: absolute; top: 12vh; diff --git a/frontend/site/projects/museum/views/titles.overlay.js b/frontend/site/projects/museum/views/titles.overlay.js index b3d41e4..3927152 100644 --- a/frontend/site/projects/museum/views/titles.overlay.js +++ b/frontend/site/projects/museum/views/titles.overlay.js @@ -19,12 +19,13 @@ class TitlesOverlay extends Component { state = { content: null, showText: false, - beating: false, + showVideo: false, } constructor(props) { super(props) this.titleRef = React.createRef() + this.headphonesRef = React.createRef() this.showTitle = this.showTitle.bind(this) this.showHeadphones = this.showHeadphones.bind(this) this.advance = this.advance.bind(this) @@ -49,9 +50,10 @@ class TitlesOverlay extends Component { && this.state.content.popup ) { if (this.props.popups[this.state.content.popup]) { - this.startHeartbeat() - } else if (this.state.beating) { + this.setState({ showVideo: true }) + } else if (this.state.showVideo) { this.setState({ showText: true }) + this.startHeartbeat() } } } @@ -64,14 +66,14 @@ class TitlesOverlay extends Component { this.setState({ content: SUBTITLES[page_name], showText: false, - beating: false, + showVideo: false, }) setTimeout(SUBTITLES[page_name].headphones ? this.showHeadphones : this.showTitle, 0) } else { this.setState({ content: null, showText: false, - beating: false, + showVideo: false, }) } } @@ -83,19 +85,15 @@ class TitlesOverlay extends Component { id: "text-overlay", url: this.state.content.audio_url, }) - this.setState({ beating: true }) } } showHeadphones() { - if (!this.titleRef.current) return - this.titleRef.current.style.color = "rgba(255, 255, 255, 1.0)" - this.titleRef.current.style.opacity = 0 - this.titleRef.current.innerHTML = "Headphones recommended" + if (!this.headphonesRef.current) return this.titleTimeout = setTimeout(() => { - this.titleRef.current.style.opacity = 1 + this.headphonesRef.current.style.opacity = 1 this.titleTimeout = setTimeout(() => { - this.titleRef.current.style.opacity = 0 + this.headphonesRef.current.style.opacity = 0 setTimeout(this.showTitle, TITLE_SHOW_DELAY) }, HEADPHONES_HIDE_DELAY) }, HEADPHONES_SHOW_DELAY) @@ -125,6 +123,12 @@ class TitlesOverlay extends Component { return ( <div> <div + ref={this.headphonesRef} + className="headphones-title" + > + {"Headphones recommended"} + </div> + <div ref={this.titleRef} className="chapter-title" > diff --git a/package.json b/package.json index a4278f7..c1a1c7b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "swimmer", - "version": "1.0.0", + "version": "1.1.0", "description": "Network tile tool", "main": "frontend/index.js", "scripts": { |