summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--frontend/app/views/tile/handles/tile.image.js104
-rw-r--r--frontend/app/views/tile/handles/tile.video.js3
-rw-r--r--frontend/site/projects/museum/views/petros.nav.css2
-rw-r--r--frontend/site/projects/museum/views/petros.nav.js56
-rw-r--r--frontend/site/projects/museum/views/petros.text.js10
-rw-r--r--frontend/site/viewer/viewer.container.js4
6 files changed, 107 insertions, 72 deletions
diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js
index c020b08..ea34bbe 100644
--- a/frontend/app/views/tile/handles/tile.image.js
+++ b/frontend/app/views/tile/handles/tile.image.js
@@ -1,61 +1,79 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
import { generateTransform, pickCursor } from 'app/views/tile/tile.utils'
export default function TileImage({ tile, box, bounds, cursors, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter, onMouseLeave }) {
- // console.log(tile)
- const style = {
- transform: generateTransform(tile, box, bounds, videoBounds),
- opacity: tile.settings.opacity,
- }
- // console.log(generateTransform(tile))
- let content
- let className = ['tile', tile.type].join(' ')
+ const [style, setStyle] = useState({
+ transition: tile.settings.is_popup ? "opacity 0.2s" : "",
+ opacity: tile.settings.is_popup ? 0.0 : tile.settings.opacity,
+ })
+ const [className, setClassName] = useState("tile")
- let [cursorClass, cursorStyle] = pickCursor(tile, cursors, viewing)
- if (cursorClass) {
- className += " " + cursorClass
- }
- if (cursorStyle) {
- style.cursor = cursorStyle
- }
+ useEffect(() => {
+ // console.log(tile)
+ const style = {
+ transform: generateTransform(tile, box, bounds, videoBounds),
+ opacity: tile.settings.is_popup ? 0.0 : tile.settings.opacity,
+ transition: tile.settings.is_popup ? "opacity 0.2s" : ""
+ }
+ // console.log(generateTransform(tile))
+ let content
+ let className = ['tile', tile.type].join(' ')
+
+ let [cursorClass, cursorStyle] = pickCursor(tile, cursors, viewing)
+ if (cursorClass) {
+ className += " " + cursorClass
+ }
+ if (cursorStyle) {
+ style.cursor = cursorStyle
+ }
- if (!tile.settings.url) {
- return null
- }
- if (tile.settings.is_tiled) {
- style.backgroundImage = 'url(' + tile.settings.url + ')'
- style.backgroundPosition = tile.settings.align.replace('_', ' ')
- switch (tile.settings.tile_style) {
- default:
- case 'tile':
- break
- case 'cover':
- style.backgroundSize = 'cover'
- break
- case 'contain':
- style.backgroundSize = 'contain'
- break
- case 'contain no-repeat':
- style.backgroundSize = 'contain'
- style.backgroundRepeat = 'no-repeat'
- break
+ if (!tile.settings.url) {
+ return null
}
- className += ' is_tiled'
- } else {
- className += ' ' + tile.settings.align
- content = <img src={tile.settings.url} />
- }
+ if (tile.settings.is_tiled) {
+ style.backgroundImage = 'url(' + tile.settings.url + ')'
+ style.backgroundPosition = tile.settings.align.replace('_', ' ')
+ switch (tile.settings.tile_style) {
+ default:
+ case 'tile':
+ break
+ case 'cover':
+ style.backgroundSize = 'cover'
+ break
+ case 'contain':
+ style.backgroundSize = 'contain'
+ break
+ case 'contain no-repeat':
+ style.backgroundSize = 'contain'
+ style.backgroundRepeat = 'no-repeat'
+ break
+ }
+ className += ' is_tiled'
+ } else {
+ className += ' ' + tile.settings.align
+ }
+ setStyle(style)
+ setClassName(className)
+ if (tile.settings.is_popup) {
+ setTimeout(() => {
+ setStyle({
+ ...style,
+ opacity: tile.settings.opacity,
+ })
+ }, 10)
+ }
+ }, [])
return (
<div
+ style={style}
className={className}
onMouseDown={onMouseDown}
onDoubleClick={onDoubleClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
- style={style}
>
- {content}
+ {!tile.settings.is_tiled && <img src={tile.settings.url} />}
</div>
)
}
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index 77640ef..dfa6de7 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -19,7 +19,7 @@ export default class TileVideo extends Component {
this.bind()
setTimeout(() => {
this.setState({ ready: true })
- }, 1)
+ }, 10)
}
componentDidUpdate() {
@@ -100,6 +100,7 @@ export default class TileVideo extends Component {
const muted = viewing
? (tile.settings.muted || audio.muted)
: true
+
return (
<div
className={className}
diff --git a/frontend/site/projects/museum/views/petros.nav.css b/frontend/site/projects/museum/views/petros.nav.css
index 6720f5f..802e26e 100644
--- a/frontend/site/projects/museum/views/petros.nav.css
+++ b/frontend/site/projects/museum/views/petros.nav.css
@@ -51,7 +51,7 @@
.fade-words span {
opacity: 0;
- transition: opacity 0.2s;
+ transition: opacity 0.25s;
}
.fade-words span:after {
content: ' ';
diff --git a/frontend/site/projects/museum/views/petros.nav.js b/frontend/site/projects/museum/views/petros.nav.js
index fda1bb8..d7236ac 100644
--- a/frontend/site/projects/museum/views/petros.nav.js
+++ b/frontend/site/projects/museum/views/petros.nav.js
@@ -52,10 +52,10 @@ const INITIAL_VIEW = {
const FASTFORWARD = 0.1
const LOOP_TIMEOUT = 6000 * FASTFORWARD
-const MOVEMENT_TIMEOUT = 40000 * FASTFORWARD
+const MOVEMENT_TIMEOUT = 40500 * FASTFORWARD
const TEXT_LOAD_TIMEOUT = 15000 * FASTFORWARD
-const TEXT_SHOW_TIMEOUT = 20
-const TEXT_HIDE_TIMEOUT = 15000 *FASTFORWARD
+const SHOW_NAV_TIMEOUT = 10000 * FASTFORWARD
+const TEXT_HIDE_TIMEOUT = 20000 * FASTFORWARD
const SUBTITLE_COUNT = 12
@@ -72,7 +72,7 @@ class PetrosNav extends Component {
this.handleEnter = this.handleEnter.bind(this)
this.handleLeave = this.handleLeave.bind(this)
this.handleClickText = this.handleClickText.bind(this)
- this.textComplete = this.textComplete.bind(this)
+ this.handleTextComplete = this.handleTextComplete.bind(this)
this.navigate = this.navigate.bind(this)
}
@@ -157,6 +157,7 @@ class PetrosNav extends Component {
if (this.state.textActive || this.state.text) return
this.setState({
textActive: true,
+ textDone: false,
hovering: false,
textOpacity: 0.0,
text: null
@@ -180,28 +181,40 @@ class PetrosNav extends Component {
.then(text => this.setState({ text: text.trim() }))
this.textTimeout = setTimeout(() => {
- this.setState({
- textActive: false,
- textDone: true,
- textOpacity: 0.0,
- })
-
// Turn off the glyph
actions.site.setPopups({
...this.props.popups,
glyph: false,
})
- this.textTimeout = setTimeout(() => {
- this.setState({ textOpacity: 1.0, iconFade: true })
- this.textTimeout = setTimeout(() => {
- this.setState({ textOpacity: 0.0 })
- }, TEXT_HIDE_TIMEOUT)
- }, TEXT_SHOW_TIMEOUT)
+ // Prep the text component
+ this.setState({
+ textActive: false,
+ textDone: true,
+ })
+ // Start displaying the words after a brief delay
+ this.textTimeout = setTimeout(() => {
+ this.setState({
+ textActive: false,
+ textOpacity: 1.0,
+ })
+ }, 200)
}, TEXT_LOAD_TIMEOUT)
}
+ /** Called once the text is done displaying */
+ handleTextComplete() {
+ this.textTimeout = setTimeout(() => {
+ // After a delay, show the nav buttons
+ this.setState({ iconFade: true })
+ // After a longer delay, hide the text
+ this.textTimeout = setTimeout(() => {
+ this.setState({ textOpacity: 0.0 })
+ }, TEXT_HIDE_TIMEOUT)
+ }, SHOW_NAV_TIMEOUT)
+ }
+
/** Navigate using the links at the bottom */
navigate() {
const { index, textActive } = this.state
@@ -222,7 +235,11 @@ class PetrosNav extends Component {
...this.props.popups,
movement: true,
})
- this.setState({ ready: false, iconFade: false, textOpacity: 0 })
+ this.setState({
+ ready: false,
+ iconFade: false,
+ textOpacity: 0.0,
+ })
clearTimeout(this.textTimeout)
} else {
// otherwise, just advance immediately.
@@ -258,7 +275,7 @@ class PetrosNav extends Component {
{ready && (
<img
className={(textDone && iconFade) ? "petros-left visible" : "petros-left"}
- src={(hovering === "left" || textActive || index === leftIndex)
+ src={(hovering === "left" || textActive || index === 1)
? `/thelastmuseum/static/media/last-museum/petros-moris/NavBW${leftIndex}.png`
: `/thelastmuseum/static/media/last-museum/petros-moris/NavB${leftIndex}.png`
}
@@ -281,7 +298,7 @@ class PetrosNav extends Component {
)}
{!textActive && text && (
<div className="petros-subtitle" style={{ opacity: textOpacity }}>
- <PetrosText ready={textOpacity} text={text} timePerWord={TIME_PER_WORD} onComplete={this.textComplete} />
+ <PetrosText ready={!!textOpacity} text={text} timePerWord={TIME_PER_WORD} onComplete={this.handleTextComplete} />
</div>
)}
</div>
@@ -289,7 +306,6 @@ class PetrosNav extends Component {
}
}
-
const randint = n => Math.floor(Math.random() * n)
const mapStateToProps = state => ({
diff --git a/frontend/site/projects/museum/views/petros.text.js b/frontend/site/projects/museum/views/petros.text.js
index 96f5565..e28eb7a 100644
--- a/frontend/site/projects/museum/views/petros.text.js
+++ b/frontend/site/projects/museum/views/petros.text.js
@@ -4,17 +4,17 @@
import React, { Component } from 'react'
-export class PetrosText extends Component {
+export default class PetrosText extends Component {
constructor(props) {
super(props)
- this.state = { index: 0, words: [] }
+ this.state = { index: -1, words: [] }
this.next = this.next.bind(this)
}
componentDidUpdate(prevProps) {
if (this.props.ready && !prevProps.ready) {
this.start()
- } else {
+ } else if (!this.props.ready) {
clearTimeout(this.timeout)
}
}
@@ -24,13 +24,13 @@ export class PetrosText extends Component {
}
start() {
- const { perWord, text } = this.props
+ const { timePerWord, text } = this.props
this.setState({
words: this.props.text.trim().split(" "),
index: -1
})
clearTimeout(this.timeout)
- this.timeout = setTimeout(this.next, perWord)
+ this.timeout = setTimeout(this.next, timePerWord)
}
next() {
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index a3c8085..dd59302 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -77,8 +77,8 @@ class ViewerContainer extends Component {
}
const page = pages[page_path]
document.querySelector("title").innerText = page.title
- console.log(page)
- console.log("show page", page.id)
+ // console.log(page)
+ // console.log("show page", page.id)
// page !== pages[home_page] &&
if (!this.props.interactive && hasAutoplay(page)) {
this.setState({ page, hidden: {}, roadblock: true, unloaded: false })
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 07:37:27 +0000