defer appearance of items on a timer. setup ok for julia and charles popups

1 files changed, 24 insertions, 1 deletions

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() {