1 files changed, 39 insertions, 2 deletions

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>
     )
   }