dimensions based on video

1 files changed, 26 insertions, 3 deletions

diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index 6f6b850..d1fa885 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -15,6 +15,7 @@ class ViewerContainer extends Component {
     page: {},
     bounds: { width: window.innerWidth, height: window.innerHeight },
     roadblock: false,
+    popups: {},
   }
 
   constructor(props) {
@@ -44,9 +45,9 @@ class ViewerContainer extends Component {
     const { pages, home_page } = this.props.graph
     const page = pages[page_path] || pages[home_page]
     if (!this.props.interactive && hasAutoplay(page)) {
-      this.setState({ page, roadblock: true })
+      this.setState({ page, popups: {}, roadblock: true })
     } else {
-      this.setState({ page, roadblock: false })
+      this.setState({ page, popups: {}, roadblock: false })
       actions.site.interact()
       this.props.audio.player.playPage(page)
     }
@@ -67,6 +68,22 @@ class ViewerContainer extends Component {
         window.location.href = tile.href
         return
       }
+      else if (tile.href === '__open_popup') {
+        this.setState({
+          popups: {
+            ...this.state.popups,
+            [tile.settings.target_popup]: true,
+          }
+        })
+      }
+      else if (tile.href === '__close_popup') {
+        this.setState({
+          popups: {
+            ...this.state.popups,
+            [tile.settings.target_popup]: false,
+          }
+        })
+      }
       else if (!tile.settings.navigate_when_audio_finishes) {
         history.push(tile.href)
       }
@@ -86,7 +103,7 @@ class ViewerContainer extends Component {
   }
 
   render() {
-    const { page, audio } = this.state
+    const { page, audio, popups } = this.state
     if (this.state.roadblock) {
       return this.renderRoadblock()
     }
@@ -103,11 +120,16 @@ class ViewerContainer extends Component {
     }
     const { settings } = page
     const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' }
+    const videoBounds = (page.tiles.length && page.tiles[0].type === 'video') ? {
+      width: page.tiles[0].settings.width,
+      height: page.tiles[0].settings.height,
+    } : this.state.bounds
     // console.log(page)
     return (
       <div className='body'>
         <div className='page' ref={this.pageRef} style={pageStyle}>
           {page.tiles.map(tile => {
+            if (tile.settings.is_popup && !popups[tile.settings.popup_group]) return
             return (
               <TileHandle
                 viewing
@@ -115,6 +137,7 @@ class ViewerContainer extends Component {
                 tile={tile}
                 audio={audio}
                 bounds={this.state.bounds}
+                videoBounds={videoBounds}
                 onMouseDown={e => this.handleMouseDown(e, tile)}
                 onPlaybackEnded={e => this.handlePlaybackEnded(e, tile)}
                 onDoubleClick={e => {}}