From 30265efd64167e9fd6b5a489bd7f8239b496ed35 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 20 Mar 2021 23:28:50 +0100
Subject: defer appearance of items on a timer. setup ok for julia and charles
 popups

---
 frontend/app/views/tile/components/tile.form.js |  2 +-
 frontend/site/viewer/viewer.container.js        | 25 ++++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

(limited to 'frontend')

diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index c2f2f60..c2a8f79 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -811,7 +811,7 @@ class TileForm extends Component {
           </div>
         )}
         {(temporaryTile.target_page_id === OPEN_POPUP_LINK || temporaryTile.target_page_id === CLOSE_POPUP_LINK) && (
-          <div>
+          <div className='row single'>
             <Select
               title="Popup"
               name='target_popup'
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index d1fa885..f68a1d3 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -16,6 +16,8 @@ class ViewerContainer extends Component {
     bounds: { width: window.innerWidth, height: window.innerHeight },
     roadblock: false,
     popups: {},
+    time: 0,
+    maxDeferTime: 0,
   }
 
   constructor(props) {
@@ -24,6 +26,7 @@ class ViewerContainer extends Component {
     this.handleMouseDown = this.handleMouseDown.bind(this)
     this.handleResize = this.handleResize.bind(this)
     this.removeRoadblock = this.removeRoadblock.bind(this)
+    this.updateTimer = this.updateTimer.bind(this)
     window.addEventListener('resize', this.handleResize)
   }
 
@@ -50,6 +53,24 @@ class ViewerContainer extends Component {
       this.setState({ page, popups: {}, roadblock: false })
       actions.site.interact()
       this.props.audio.player.playPage(page)
+      this.resetTimer(page)
+    }
+  }
+
+  resetTimer(page) {
+    clearTimeout(this.timeout)
+    const maxDeferTime = page.tiles.reduce((max_time, tile) => Math.max(tile.settings.appear_after || 0, max_time), 0)
+    if (maxDeferTime) {
+      this.setState({ time: 0, maxDeferTime })
+      this.timeout = setTimeout(this.updateTimer, 500)
+    }
+  }
+
+  updateTimer() {
+    clearTimeout(this.timeout)
+    this.setState({ time: this.state.time + 0.500 })
+    if (this.state.time < this.state.maxDeferTime) {
+      this.timeout = setTimeout(this.updateTimer, 500)
     }
   }
 
@@ -103,7 +124,7 @@ class ViewerContainer extends Component {
   }
 
   render() {
-    const { page, audio, popups } = this.state
+    const { page, audio, popups, time } = this.state
     if (this.state.roadblock) {
       return this.renderRoadblock()
     }
@@ -130,6 +151,7 @@ class ViewerContainer extends Component {
         <div className='page' ref={this.pageRef} style={pageStyle}>
           {page.tiles.map(tile => {
             if (tile.settings.is_popup && !popups[tile.settings.popup_group]) return
+            if (tile.settings.appear_after && time < tile.settings.appear_after) return
             return (
               <TileHandle
                 viewing
@@ -154,6 +176,7 @@ class ViewerContainer extends Component {
     actions.site.interact()
     this.setState({ roadblock: false })
     this.props.audio.player.playPage(this.state.page)
+    this.resetTimer(this.state.page)
   }
   
   renderRoadblock() {
-- 
cgit v1.2.3-70-g09d2