frontend. export/view button. interactivity sanity check

1 files changed, 51 insertions, 9 deletions

diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index 1b3d564..3f1c9c5 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -12,12 +12,17 @@ import 'app/views/page/page.css'
 class ViewerContainer extends Component {
   state = {
     page: {},
+    bounds: { width: window.innerWidth, height: window.innerHeight },
+    roadblock: false,
   }
 
   constructor(props) {
     super(props)
     this.pageRef = React.createRef()
     this.handleMouseDown = this.handleMouseDown.bind(this)
+    this.handleResize = this.handleResize.bind(this)
+    this.removeRoadblock = this.removeRoadblock.bind(this)
+    window.addEventListener('resize', this.handleResize)
   }
 
   componentDidUpdate(prevProps) {
@@ -27,20 +32,30 @@ class ViewerContainer extends Component {
     }
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+    actions.site.interact()
+  }
+
+  handleResize() {
+    this.setState({
+      bounds: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+      }
+    })
+  }
+
   load() {
     const { graph_name, page_name } = this.props.match.params
     const page_path = ["", graph_name, page_name].join('/')
     const { pages, home_page } = this.props.graph
-    const page = pages[page_path]
-    if (!page) {
-      // console.log('-> home page')
-      console.log(page_path)
-      const { home_page } = this.props.graph
-      this.setState({ page: pages[home_page] })
+    const page = pages[page_path] || pages[home_page]
+    if (!this.props.interactive && hasAutoplayVideo(page)) {
+      this.setState({ page, roadblock: true })
     } else {
-      // console.log(page)
-      console.log(page_path)
-      this.setState({ page })
+      this.setState({ page, roadblock: false })
+      actions.site.interact()
     }
   }
 
@@ -50,6 +65,9 @@ class ViewerContainer extends Component {
 
   render() {
     const { page } = this.state
+    if (this.state.roadblock) {
+      return this.renderRoadblock()
+    }
     if (this.props.graph.loading || !page.id) {
       return (
         <div>
@@ -83,11 +101,35 @@ class ViewerContainer extends Component {
       </div>
     )
   }
+
+  removeRoadblock() {
+    actions.site.interact()
+    this.setState({ roadblock: false })
+  }
+  
+  renderRoadblock() {
+    const { title } = this.props.graph
+    return (
+      <div className='roadblock' onClick={this.removeRoadblock}>
+        <div>
+          <h2>{title}</h2>
+          <button>Enter</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+const hasAutoplayVideo = page => {
+  return page.tiles.some(tile => {
+    return tile.type === 'video' && !tile.settings.muted
+  })
 }
 
 const mapStateToProps = state => ({
   site: state.site,
   graph: state.site.graph,
+  interactive: state.site.interactive,
 })
 
 const mapDispatchToProps = dispatch => ({