petros nav logic

1 files changed, 127 insertions, 10 deletions

diff --git a/frontend/site/projects/museum/views/petros.nav.js b/frontend/site/projects/museum/views/petros.nav.js
index ebabf51..0976f87 100644
--- a/frontend/site/projects/museum/views/petros.nav.js
+++ b/frontend/site/projects/museum/views/petros.nav.js
@@ -9,12 +9,30 @@ import './petros.nav.css'
 
 import { history } from "site/store"
 import { preloadImage } from 'app/utils'
+import actions from 'app/actions'
 
 const RESET_STATE = {
+  textActive: false,
+  textDone: false,
+  ready: false,
 }
 
-const LOADING_TIMEOUT = 15000
-const ADVANCE_TIMEOUT = 40000
+const MOVEMENT = "movement"
+const LOOP = "loop"
+
+const INITIAL_VIEW = {
+  1: MOVEMENT,
+  2: LOOP,
+  3: LOOP,
+  4: MOVEMENT,
+  5: MOVEMENT,
+  6: MOVEMENT,
+  7: LOOP,
+}
+
+const LOOP_TIMEOUT = 100
+const MOVEMENT_TIMEOUT = 40000
+const TEXT_LOAD_TIMEOUT = 15000
 
 class PetrosNav extends Component {
   state = {
@@ -25,6 +43,8 @@ class PetrosNav extends Component {
     super(props)
     this.handleEnter = this.handleEnter.bind(this)
     this.handleLeave = this.handleLeave.bind(this)
+    this.handleClickText = this.handleClickText.bind(this)
+    this.navigate = this.navigate.bind(this)
   }
 
   componentDidMount() {
@@ -49,8 +69,7 @@ class PetrosNav extends Component {
     const index = parseInt(page_partz[1])
 
     if (!isPetros) {
-      clearTimeout(this.autoadvanceTimeout)
-      clearTimeout(this.timeout)
+      clearTimeout(this.readyTimeout)
       this.setState({
         ...RESET_STATE,
       })
@@ -64,6 +83,11 @@ class PetrosNav extends Component {
       ...RESET_STATE,
       index
     })
+    this.readyTimeout = setTimeout(() => {
+      this.setState({
+        ready: true,
+      })
+    }, INITIAL_VIEW[index] === MOVEMENT ? MOVEMENT_TIMEOUT : LOOP_TIMEOUT)
   }
 
   handleEnter(event) {
@@ -71,23 +95,116 @@ class PetrosNav extends Component {
     this.setState({ hovering: side })
   }
   handleLeave(event) {
-    this.setState({ hovering: side })
+    this.setState({ hovering: false })
   }
+
+  /** Start text generation sequence */
   handleClickText() {
+    if (this.state.textActive) return
+    this.setState({
+      textActive: true,
+      hovering: false
+    })
+    // Turn on the glyph
+    actions.site.setPopups({
+      ...this.props.popups,
+      glyph: true,
+    })
+    // Fetch the subtitles
+    this.textTimeout = setTimeout(() => {
+      this.setState({
+        textActive: false,
+        textDone: true,
+      })
 
+      // Turn off the glyph
+      actions.site.setPopups({
+        ...this.props.popups,
+        glyph: false,
+      })
+    }, TEXT_LOAD_TIMEOUT)
   }
+
+  /** Navigate using the links at the bottom */
   navigate() {
-    // history.push(`/thelastmuseum/nilthamrong-${this.state.lateralLink}`)
+    const { index, textActive } = this.state
+    const leftIndex = Math.max(1, index - 1)
+    const rightIndex = Math.min(7, index + 1)
+    if (textActive) return
+    const side = event.target.className.split('-')
+    // if navigating to the left, just navigate.
+    if (side === "left") {
+      if (index !== leftIndex) {
+        history.push(`/thelastmuseum/petros-${leftIndex}`)
+      }
+    } else if (side === "right") {
+      // if this page starts with the loop, switch to movement
+      // this will autoadvance when the video is done (set in tile settings)
+      if (INITIAL_VIEW[index] === LOOP) {
+        actions.site.setPopups({
+          ...this.props.popups,
+          movement: true,
+        })
+        this.setState({ ready: false, index })
+      } else {
+        // otherwise, just advance immediately.
+        history.push(`/thelastmuseum/petros-${rightIndex}`)
+      }
+    }
   }
 
   render() {
-    const { index } = this.state
+    const { index, ready, hovering, textActive, textDone } = this.state
     if (!this.props.interactive || (!index)) return null
+    const leftIndex = Math.max(1, index - 1)
+    const rightIndex = Math.min(7, index + 1)
     return (
       <div>
-        <img className="petros-text" onMouseEnter={this.handleEnter} onMouseLeave={this.handleLeave} onClick={this.handleClickText} />
-        <img className="petros-left" onMouseEnter={this.handleEnter} onMouseLeave={this.handleLeave} onClick={this.navigate} />
-        <img className="petros-right" onMouseEnter={this.handleEnter} onMouseLeave={this.handleLeave} onClick={this.navigate} />
+        {ready && (
+          <img
+            className="petros-text"
+            src={(hovering === "text" || textActive)
+              ? `/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}-White.png`
+              : `/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}.png`
+            }
+            style={{
+              cursor: `url(/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}-White.png)`
+            }}
+            onMouseEnter={this.handleEnter}
+            onMouseLeave={this.handleLeave}
+            onClick={this.handleClickText}
+          />
+        )}
+        {ready && textDone && (
+          <img
+            className="petros-left"
+            src={(hovering === "left" || textActive || index === leftIndex)
+              ? `/thelastmuseum/static/media/last-museum/petros-moris/NavBW${leftIndex}.png`
+              : `/thelastmuseum/static/media/last-museum/petros-moris/NavB${leftIndex}.png`
+            }
+            style={{
+              cursor: `url(/thelastmuseum/static/media/last-museum/petros-moris/NavBW${leftIndex}-White.png), hand`
+            }}
+            onMouseEnter={this.handleEnter}
+            onMouseLeave={this.handleLeave}
+            onClick={this.navigate}
+          />
+        )}
+        {ready && textDone && (
+          <img
+            className="petros-right"
+            src={(hovering === "right" || textActive)
+              ? `/thelastmuseum/static/media/last-museum/petros-moris/NavBW${rightIndex}.png`
+              : `/thelastmuseum/static/media/last-museum/petros-moris/NavB${rightIndex}.png`
+            }
+            style={{
+              cursor: `url(/thelastmuseum/static/media/last-museum/petros-moris/NavBW${rightIndex}-White.png), hand`
+            }}
+            onMouseEnter={this.handleEnter}
+            onMouseLeave={this.handleLeave}
+            onClick={this.navigate}
+          />
+        )}
       </div>
     )
   }