From 37cd7eeac7ee9cdeebfbf8729ac3e272ac65867e Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 10 Sep 2021 20:26:56 +0200
Subject: better motion

---
 frontend/site/projects/museum/views/petros.nav.css |  8 +++
 frontend/site/projects/museum/views/petros.nav.js  | 82 ++++++++++++----------
 2 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/frontend/site/projects/museum/views/petros.nav.css b/frontend/site/projects/museum/views/petros.nav.css
index 802e26e..cb9b523 100644
--- a/frontend/site/projects/museum/views/petros.nav.css
+++ b/frontend/site/projects/museum/views/petros.nav.css
@@ -18,6 +18,7 @@
   transition: opacity 0.4s;
   pointer-events: none;
 }
+.petros-loader,
 .petros-text {
   position: absolute;
   top: 50%; left: 50%;
@@ -27,12 +28,19 @@
   pointer-events: none;
 }
 
+.petros-left.visible.noclick {
+  pointer-events: none !important;
+}
+
 .petros-left.visible,
 .petros-right.visible,
 .petros-text.visible {
   opacity: 1.0;
   pointer-events: auto;
 }
+.petros-loader.visible {
+  opacity: 1.0;
+}
 
 .petros-subtitle {
   position: absolute;
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() {
@@ -260,6 +257,14 @@ class PetrosNav extends Component {
     const rightIndex = NAV_GLYPH[index].right
     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}
@@ -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`
-- 
cgit v1.2.3-70-g09d2