1 files changed, 25 insertions, 7 deletions

diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js
index d324874..ec6ddd3 100644
--- a/frontend/app/views/page/components/page.editor.js
+++ b/frontend/app/views/page/components/page.editor.js
@@ -5,17 +5,18 @@ import { connect } from 'react-redux'
 
 import { session } from 'app/session'
 import actions from 'app/actions'
-import * as pageActions from '../page.actions'
-import * as tileActions from '../../tile/tile.actions'
+import * as pageActions from 'app/views/page/page.actions'
+import * as tileActions from 'app/views/tile/tile.actions'
 
 import { Loader } from 'app/common'
 import { clamp, dist } from 'app/utils'
 
-import TileHandle from './tile.handle'
+import TileHandle from 'app/views/tile/components/tile.handle'
 
 const defaultState = {
   dragging: false,
   bounds: null,
+  videoBounds: null,
   mouseX: 0,
   mouseY: 0,
   box: {
@@ -37,6 +38,7 @@ class PageEditor extends Component {
     this.handleMouseMove = this.handleMouseMove.bind(this)
     this.handleMouseUp = this.handleMouseUp.bind(this)
     this.handleWindowResize = this.handleWindowResize.bind(this)
+    this.handlePlaybackEnded = this.handlePlaybackEnded.bind(this)
     this.pageRef = React.createRef()
   }
 
@@ -59,7 +61,8 @@ class PageEditor extends Component {
     document.body.addEventListener('mousemove', this.handleMouseMove)
     document.body.addEventListener('mouseup', this.handleMouseUp)
     window.addEventListener('resize', this.handleWindowResize)
-    this.setState({ bounds: this.getBoundingClientRect() })
+    const bounds = this.getBoundingClientRect()
+    this.setState({ bounds })
   }
 
   componentDidUpdate(prevProps) {
@@ -72,7 +75,12 @@ class PageEditor extends Component {
     this.setState({ bounds: this.getBoundingClientRect() })
   }
 
+  handlePlaybackEnded() {
+    //
+  }
+
   handleMouseDown(e, tile) {
+    if (e.metaKey || e.ctrlKey || e.altKey || e.button !== 0) return
     const bounds = this.getBoundingClientRect()
     const mouseX = e.pageX
     const mouseY = e.pageY
@@ -130,7 +138,7 @@ class PageEditor extends Component {
     const { dx, dy } = box
     let url = window.location.pathname
     this.setState({
-      page: null,
+      tile: null,
       box: null,
       initialBox: null,
       dragging: false,
@@ -142,6 +150,7 @@ class PageEditor extends Component {
     }
     const updatedTile = {
       ...tile,
+      target_page_id: tile.target_page_id || 0,
       settings: {
         ...tile.settings,
         x: tile.settings.x + dx,
@@ -158,7 +167,7 @@ class PageEditor extends Component {
     }
   }
 
-  render(){
+  render() {
     if (!this.state.bounds || (!this.props.page.show.res && !this.props.page.show.res.tiles)) {
       return (
         <div className='page' ref={this.pageRef} />
@@ -170,9 +179,14 @@ class PageEditor extends Component {
     const { res } = this.props.page.show
     const { settings } = res
     const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' }
+    const videoBounds = (res.tiles && res.tiles.length && res.tiles[0].type === 'video') ? {
+      width: res.tiles[0].settings.width,
+      height: res.tiles[0].settings.height,
+    } : this.state.bounds
     return (
       <div className='page' ref={this.pageRef} style={pageStyle}>
-        {res.tiles.map(tile => {
+        {res.tiles && res.tiles.map(tile => {
+          if (!this.props.page.editor.showingPopups && tile.settings.is_popup) return
           if (temporaryTile && temporaryTile.id === tile.id) {
             tile = temporaryTile
           }
@@ -181,9 +195,11 @@ class PageEditor extends Component {
               key={tile.id}
               tile={tile}
               bounds={this.state.bounds}
+              videoBounds={videoBounds}
               box={currentTile && tile.id === currentTile.id && currentBox}
               onMouseDown={e => this.handleMouseDown(e, tile)}
               onDoubleClick={e => this.props.pageActions.showEditTileForm(tile.id)}
+              onPlaybackEnded={this.handlePlaybackEnded}
             />
           )
         })}
@@ -192,8 +208,10 @@ class PageEditor extends Component {
             key={temporaryTile.id}
             tile={temporaryTile}
             bounds={this.state.bounds}
+            videoBounds={videoBounds}
             box={currentTile && temporaryTile.id === currentTile.id && currentBox}
             onMouseDown={e => this.handleMouseDown(e, temporaryTile)}
+            onPlaybackEnded={this.handlePlaybackEnded}
           />
         )}
       </div>