better motion

1 files changed, 45 insertions, 37 deletions

diff --git a/frontend/site/projects/museum/views/petros.nav.js b/frontend/site/projects/museum/views/petros.nav.js
index 11d8e19..22e49a1 100644
--- a/frontend/site/projects/museum/views/petros.nav.js
+++ b/frontend/site/projects/museum/views/petros.nav.js
@@ -134,7 +134,7 @@ class PetrosNav extends Component {
     page.tiles.some(tile => {
       if (tile.settings.popup_group === "glyph") {
         let transform = generateTransform(tile, null, bounds, videoBounds)
-        transform = transform.replace(/scale(\d+\.\d+)/g, "")
+        transform = transform.replace(/scale(\d+\.\d+)/g, "scale(0.9)")
         this.setState({
           glyphTransform: {
             transform
@@ -163,14 +163,6 @@ class PetrosNav extends Component {
       text: null
     })
 
-    // Turn on the glyph
-    setTimeout(() => {
-      actions.site.setPopups({
-        ...this.props.popups,
-        glyph: true,
-      })
-    }, 500)
-
     // Fetch the subtitles
     const subtitle_index = 1
     const subtitle_choice = randint(SUBTITLE_COUNT) + 1
@@ -182,11 +174,6 @@ class PetrosNav extends Component {
 
     this.textTimeout = setTimeout(() => {
       // Turn off the glyph
-      actions.site.setPopups({
-        ...this.props.popups,
-        glyph: false,
-      })
-
       // Prep the text component
       this.setState({
         textActive: false,
@@ -223,29 +210,39 @@ class PetrosNav extends Component {
     if (textActive) return
     const side = event.target.className.match(/-(\w+)/)[1]
     // 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,
-          iconFade: false,
-          textOpacity: 0.0,
-        })
-        clearTimeout(this.textTimeout)
-      } else {
-        // otherwise, just advance immediately.
-        history.push(`/thelastmuseum/petros-${rightIndex}`)
+    this.setState({
+      iconFade: false,
+      textOpacity: 0.0,
+    })
+    setTimeout(() => {
+      this.setState({
+        ready: false,
+      })
+
+      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,
+            iconFade: false,
+            textOpacity: 0.0,
+          })
+          clearTimeout(this.textTimeout)
+        } else {
+          // otherwise, just advance immediately.
+          history.push(`/thelastmuseum/petros-${rightIndex}`)
+        }
       }
-    }
+    }, 2000)
   }
 
   render() {
@@ -261,6 +258,14 @@ class PetrosNav extends Component {
     return (
       <div>
         <img
+          className={textActive ? "petros-loader visible" : "petros-loader"}
+          style={glyphTransform}
+          src={
+            "/thelastmuseum/static/media/last-museum/petros-moris/NEWLoopingAnimation.png"
+          }
+        />
+
+        <img
           className={(ready && !(textActive || textDone)) ? "petros-text visible" : "petros-text"}
           style={glyphTransform}
           src={(hovering === "text" || textActive || textDone)
@@ -274,7 +279,10 @@ class PetrosNav extends Component {
 
         {ready && (
           <img
-            className={(textDone && iconFade) ? "petros-left visible" : "petros-left"}
+            className={[
+              (textDone && iconFade) ? "petros-left visible" : "petros-left",
+              index === 1 ? "noclick" : ""
+            ].join(" ")}
             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`