From 4f490f77a615b1c816cbeb8b42bbfee2345a8d11 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 9 Sep 2021 16:29:25 +0200
Subject: adding a little fade i guess

---
 frontend/app/views/tile/handles/tile.image.js      | 104 ++++++++++++---------
 frontend/app/views/tile/handles/tile.video.js      |   3 +-
 frontend/site/projects/museum/views/petros.nav.css |   2 +-
 frontend/site/projects/museum/views/petros.nav.js  |  56 +++++++----
 frontend/site/projects/museum/views/petros.text.js |  10 +-
 frontend/site/viewer/viewer.container.js           |   4 +-
 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 })
-- 
cgit v1.2.3-70-g09d2