3 files changed, 55 insertions, 5 deletions

diff --git a/frontend/app/views/page/components/page.header.js b/frontend/app/views/page/components/page.header.js
index 998572a..dbdf1b6 100644
--- a/frontend/app/views/page/components/page.header.js
+++ b/frontend/app/views/page/components/page.header.js
@@ -3,6 +3,9 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 
+import { Loader } from 'app/common'
+import { capitalize } from 'app/utils'
+
 import * as graphActions from '../../graph/graph.actions'
 import * as pageActions from '../page.actions'
 
@@ -10,13 +13,22 @@ function PageHeader(props) {
   return (
     <header>
       <div>
-        <Link to={props.graph.show.res ? "/" + props.graph.show.res.path : "/"} className="logo arrow">{"◁"}</Link>
+        <Link to={props.graph ? "/" + props.graph.path : "/"} className="logo arrow">{"◁"}</Link>
         <b>{props.site.siteTitle}</b>
+        {props.building && (
+          <div className='building'>
+            <div className='loader'>
+              <Loader />
+            </div>
+            {capitalize(props.building)}ing...
+          </div>
+        )}
       </div>
       <div>
         <button onClick={() => props.pageActions.toggleAddTileForm()}>+ Add tile</button>
         <button onClick={() => props.pageActions.toggleTileList()}>Sort tiles</button>
         <button onClick={() => props.graphActions.toggleEditPageForm()}>Edit page</button>
+        <button onClick={() => props.graphActions.viewPage(props.graph, props.page)}>View page</button>
       </div>
     </header>
   )
@@ -25,7 +37,9 @@ function PageHeader(props) {
 const mapStateToProps = (state) => ({
   // auth: state.auth,
   site: state.site,
-  graph: state.graph,
+  graph: state.graph.show.res,
+  page: state.page.show.res,
+  building: state.graph.editor.building,
   // isAuthenticated: state.auth.isAuthenticated,
 })
 
diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/page/components/tile.form.js
index da72e27..d6272bc 100644
--- a/frontend/app/views/page/components/tile.form.js
+++ b/frontend/app/views/page/components/tile.form.js
@@ -10,7 +10,7 @@ import {
   TextInput, NumberInput, ColorInput, Slider,
   Select, LabelDescription, TextArea, Checkbox,
   SubmitButton, Loader } from 'app/common'
-import { AudioSelect } from 'app/views/audio/components/audio.select'
+import AudioSelect from 'app/views/audio/components/audio.select'
 import { preloadImage, preloadVideo } from 'app/utils'
 
 import * as tileActions from '../../tile/tile.actions'
@@ -150,6 +150,10 @@ const newPosition = (data) => ({
   opacity: 1,
   units: false,
   align: "center_center",
+  has_audio: false,
+  audio_on_click_id: 0,
+  audio_on_hover_id: 0,
+  wait_for_audio_on_click: false,
   ...data,
 })
 
@@ -198,6 +202,7 @@ class TileForm extends Component {
       ...PAGE_LIST_TOP_OPTIONS,
       ...linkPages.map(page => ({ name: page.id, label: page.path }))
     ]
+    this.setState({ pageList })
     if (isNew) {
       const newTile = newImage({
         id: "new",
@@ -430,8 +435,8 @@ class TileForm extends Component {
           : ""}
 
           {this.renderHyperlinkForm()}
-          {this.renderAudioForm()}
           {this.renderMiscForm()}
+          {this.renderAudioForm()}
 
           <div className='row buttons'>
             <SubmitButton
@@ -753,8 +758,40 @@ class TileForm extends Component {
   }
 
   renderAudioForm() {
+    const { temporaryTile } = this.props
     return (
       <div>
+        <Checkbox
+          label="Play audio"
+          name="has_audio"
+          checked={temporaryTile.settings.has_audio}
+          onChange={this.handleSettingsSelect}
+        />
+        {temporaryTile.settings.has_audio && (
+          <div >
+            <AudioSelect
+              title="On click"
+              name="audio_on_click_id"
+              selected={temporaryTile.settings.audio_on_click_id}
+              onChange={this.handleSettingsSelect}
+            />
+
+            <Checkbox
+              label="Navigate when audio finishes"
+              name="wait_for_audio_on_click"
+              checked={temporaryTile.settings.wait_for_audio_on_click}
+              onChange={this.handleSettingsSelect}
+              autoComplete="off"
+            />
+
+            <AudioSelect
+              title="On hover"
+              name="audio_on_hover_id"
+              selected={temporaryTile.settings.audio_on_hover_id}
+              onChange={this.handleSettingsSelect}
+            />
+          </div>
+        )}
       </div>
     )
   }
diff --git a/frontend/app/views/page/components/tile.handle.js b/frontend/app/views/page/components/tile.handle.js
index f47c3cd..090069d 100644
--- a/frontend/app/views/page/components/tile.handle.js
+++ b/frontend/app/views/page/components/tile.handle.js
@@ -165,7 +165,6 @@ const generateTransform = (tile, box) => {
 }
 
 const generateVideoStyle = (tile, bounds) => {
-  // console.log(bounds)
   const style = {
     pointerEvents: "none",
   }