audio select

5 files changed, 133 insertions, 49 deletions

diff --git a/frontend/app/utils/index.js b/frontend/app/utils/index.js
index ce8d75c..1114d65 100644
--- a/frontend/app/utils/index.js
+++ b/frontend/app/utils/index.js
@@ -8,6 +8,7 @@ export const formatDateTime = dateStr => format(new Date(dateStr), 'd MMM yyyy H
 export const formatDate = dateStr => format(new Date(dateStr), 'd MMM yyyy')
 export const formatTime = dateStr => format(new Date(dateStr), 'H:mm')
 export const formatAge = dateStr => formatDistance(new Date(), new Date(dateStr)) + ' ago.'
+export const unslugify = fn => fn.replace(/-/g, ' ').replace(/_/g, ' ').replace('.mp3', '')
 
 /* Mobile check */
 
diff --git a/frontend/app/views/audio/components/audio.select.js b/frontend/app/views/audio/components/audio.select.js
new file mode 100644
index 0000000..73142f0
--- /dev/null
+++ b/frontend/app/views/audio/components/audio.select.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import { Select } from 'app/common'
+
+const NO_AUDIO = 0
+const AUDIO_TOP_OPTIONS = [
+  { name: NO_AUDIO, label: 'No Audio' },
+  { name: -2, label: '──────────', disabled: true },
+]
+
+class AudioSelect extends Component {
+  state = {
+    audioList: []
+  }
+
+  constructor(props) {
+    super(props)
+    this.handleSelect = this.handleSelect.bind(this)
+  }
+
+  componentDidMount(){
+    const { uploads } = this.props.graph.show.res
+    const audioUploads = uploads
+      .filter(upload => upload.tag === 'audio')
+      .map(page => ({ name: upload.id, label: page.path }))
+    let audioList = [
+      ...AUDIO_TOP_OPTIONS,
+      ...audioUploads,
+    ]
+    this.setState({
+      audioList,
+    })
+  }
+
+  render() {
+    return (
+      <Select
+        title={this.props.title || "Audio"}
+        name={this.props.name}
+        selected={this.props.selected || NO_AUDIO}
+        options={this.state.audioList}
+        onChange={this.props.onChange}
+      />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+})
+
+export default connect(mapStateToProps)(AudioSelect)
diff --git a/frontend/app/views/graph/components/audio.list.js b/frontend/app/views/graph/components/audio.list.js
index b7bf19a..011ab08 100644
--- a/frontend/app/views/graph/components/audio.list.js
+++ b/frontend/app/views/graph/components/audio.list.js
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 
 import { history } from 'app/store'
+import { unslugify } from 'app/utils'
 import actions from 'app/actions'
 
 class AudioList extends Component {
@@ -132,8 +133,6 @@ class AudioList extends Component {
   }
 }
 
-const unslugify = fn => fn.replace(/-/g, ' ').replace(/_/g, ' ').replace('.mp3', '')
-
 const mapStateToProps = state => ({
   graph: state.graph.show.res,
 })
diff --git a/frontend/app/views/graph/components/page.form.js b/frontend/app/views/graph/components/page.form.js
index 2c283aa..91a40a6 100644
--- a/frontend/app/views/graph/components/page.form.js
+++ b/frontend/app/views/graph/components/page.form.js
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom'
 import { session } from 'app/session'
 
 import { TextInput, ColorInput, Checkbox, LabelDescription, TextArea, SubmitButton, Loader } from 'app/common'
+import { AudioSelect } from 'app/views/audio/components/audio.select'
 
 const newPage = (data) => ({
   path: '',
@@ -28,6 +29,16 @@ export default class PageForm extends Component {
     errorFields: new Set([]),
   }
 
+  constructor(props){
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleSettingsChange = this.handleSettingsChange.bind(this)
+    this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleDelete = this.handleDelete.bind(this)
+  }
+
   componentDidMount() {
     const { graph, data, isNew } = this.props
     const title = isNew ? 'new page' : 'editing ' + data.title
@@ -130,14 +141,14 @@ export default class PageForm extends Component {
     return (
       <div className='box'>
         <h1>{title}</h1>
-        <form onSubmit={this.handleSubmit.bind(this)}>
+        <form onSubmit={this.handleSubmit}>
           <TextInput
             title="Path"
             name="path"
             required
             data={data}
             error={errorFields.has('path')}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
             autoComplete="off"
           />
           <LabelDescription>
@@ -149,49 +160,48 @@ export default class PageForm extends Component {
             required
             data={data}
             error={errorFields.has('title')}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
             autoComplete="off"
           />
           <ColorInput
             title='BG Color'
             name='background_color'
             data={data.settings}
-            onChange={this.handleSettingsChange.bind(this)}
+            onChange={this.handleSettingsChange}
             autoComplete="off"
           />
           <TextArea
             title="Description"
             name="description"
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
           />
 
-          <TextInput
-            title="Background Audio URL"
-            name="audio"
-            required
-            data={data.settings}
-            onChange={this.handleSettingsChange.bind(this)}
-            autoComplete="off"
+          <AudioSelect
+            title="Background Audio"
+            name="background_audio_id"
+            selected={data.settings.background_audio_id}
+            onChange={this.handleSettingsSelect}
           />
+
           <Checkbox
             label="Restart audio on load"
             name="restartAudio"
             checked={data.settings.restartAudio}
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
             autoComplete="off"
           />
 
           <div className='row buttons'>
             <SubmitButton
               title={submitTitle}
-              onClick={this.handleSubmit.bind(this)}
+              onClick={this.handleSubmit}
             />
             {!isNew && 
               <SubmitButton
                 title={'Delete'}
                 className='destroy'
-                onClick={this.handleDelete.bind(this)}
+                onClick={this.handleDelete}
               />
             }
           </div>
diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/page/components/tile.form.js
index 3e31758..da72e27 100644
--- a/frontend/app/views/page/components/tile.form.js
+++ b/frontend/app/views/page/components/tile.form.js
@@ -10,6 +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 { preloadImage, preloadVideo } from 'app/utils'
 
 import * as tileActions from '../../tile/tile.actions'
@@ -169,6 +170,19 @@ class TileForm extends Component {
     pageList: [],
   }
 
+  constructor(props){
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleSettingsChange = this.handleSettingsChange.bind(this)
+    this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
+    this.handleAlignment = this.handleAlignment.bind(this)
+    this.handleImageChange = this.handleImageChange.bind(this)
+    this.handleVideoChange = this.handleVideoChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleDelete = this.handleDelete.bind(this)
+  }
+
   componentDidMount() {
     const { graph, page, isNew, initialData, sortOrder } = this.props
     const title = isNew ? 'new tile' : 'editing tile'
@@ -184,7 +198,6 @@ 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",
@@ -384,21 +397,21 @@ class TileForm extends Component {
     return (
       <div className='box'>
         <h1>{title}</h1>
-        <form onSubmit={this.handleSubmit.bind(this)}>
+        <form onSubmit={this.handleSubmit}>
           <div className="row selects">
             <Select
               name='type'
               selected={temporaryTile.type}
               options={SELECT_TYPES}
               title=''
-              onChange={this.handleSelect.bind(this)}
+              onChange={this.handleSelect}
             />
             <Select
               name='align'
               selected={temporaryTile.settings.align}
               options={ALIGNMENTS}
               title=''
-              onChange={this.handleAlignment.bind(this)}
+              onChange={this.handleAlignment}
             />
           </div>
 
@@ -417,18 +430,19 @@ class TileForm extends Component {
           : ""}
 
           {this.renderHyperlinkForm()}
+          {this.renderAudioForm()}
           {this.renderMiscForm()}
 
           <div className='row buttons'>
             <SubmitButton
               title={submitTitle}
-              onClick={this.handleSubmit.bind(this)}
+              onClick={this.handleSubmit}
             />
             {!isNew && 
               <SubmitButton
                 title={'Delete'}
                 className='destroy'
-                onClick={this.handleDelete.bind(this)}
+                onClick={this.handleDelete}
               />
             }
           </div>
@@ -473,7 +487,7 @@ class TileForm extends Component {
             required
             data={temporaryTile.settings}
             error={errorFields.has('url')}
-            onChange={this.handleImageChange.bind(this)}
+            onChange={this.handleImageChange}
             autoComplete="off"
           />
         </div>
@@ -482,7 +496,7 @@ class TileForm extends Component {
             label="Tiled"
             name="is_tiled"
             checked={temporaryTile.settings.is_tiled}
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
             autoComplete="off"
           />
           {temporaryTile.settings.is_tiled &&
@@ -491,7 +505,7 @@ class TileForm extends Component {
               selected={temporaryTile.settings.tile_style || 'tile'}
               options={IMAGE_TILE_STYLES}
               title=''
-              onChange={this.handleSettingsSelect.bind(this)}
+              onChange={this.handleSettingsSelect}
             />
           }
         </div>
@@ -514,7 +528,7 @@ class TileForm extends Component {
             required
             data={temporaryTile.settings}
             error={errorFields.has('url')}
-            onChange={this.handleVideoChange.bind(this)}
+            onChange={this.handleVideoChange}
             autoComplete="off"
           />
         </div>
@@ -524,13 +538,13 @@ class TileForm extends Component {
             selected={temporaryTile.settings.video_style || 'none'}
             options={VIDEO_STYLES}
             title=''
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
           />
           <Checkbox
             label="Loop"
             name="loop"
             checked={temporaryTile.settings.loop}
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
             autoComplete="off"
           />
         </div>
@@ -539,14 +553,14 @@ class TileForm extends Component {
             label="Muted"
             name="muted"
             checked={temporaryTile.settings.muted}
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
             autoComplete="off"
           />
           <Checkbox
             label="Autoadvance"
             name="autoadvance"
             checked={temporaryTile.settings.autoadvance}
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
             autoComplete="off"
           />
         </div>
@@ -565,7 +579,7 @@ class TileForm extends Component {
           required
           data={temporaryTile.settings}
           error={errorFields.has('content')}
-          onChange={this.handleSettingsChange.bind(this)}
+          onChange={this.handleSettingsChange}
           autoComplete="off"
         />
         <div className='row font'>
@@ -575,7 +589,7 @@ class TileForm extends Component {
             selected={temporaryTile.settings.font_family || 'sans-serif'}
             options={TEXT_FONT_FAMILIES}
             title=''
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
           />
           <NumberInput
             title=''
@@ -584,7 +598,7 @@ class TileForm extends Component {
             min={1}
             max={1200}
             error={errorFields.has('font_size')}
-            onChange={this.handleSettingsChange.bind(this)}
+            onChange={this.handleSettingsChange}
             autoComplete="off"
           />
           <Select
@@ -592,7 +606,7 @@ class TileForm extends Component {
             selected={temporaryTile.settings.font_style || 'normal'}
             options={TEXT_FONT_STYLES}
             title=''
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
           />
         </div>
         <ColorInput
@@ -600,7 +614,7 @@ class TileForm extends Component {
           name='font_color'
           data={temporaryTile.settings}
           error={errorFields.has('font_color')}
-          onChange={this.handleSettingsChange.bind(this)}
+          onChange={this.handleSettingsChange}
           autoComplete="off"
         />
         <ColorInput
@@ -608,7 +622,7 @@ class TileForm extends Component {
           name='background_color'
           data={temporaryTile.settings}
           error={errorFields.has('background_color')}
-          onChange={this.handleSettingsChange.bind(this)}
+          onChange={this.handleSettingsChange}
           autoComplete="off"
         />
         <div className='row pair'>
@@ -619,7 +633,7 @@ class TileForm extends Component {
             min={0}
             max={1200}
             error={errorFields.has('width')}
-            onChange={this.handleSettingsChange.bind(this)}
+            onChange={this.handleSettingsChange}
             autoComplete="off"
           />
           <NumberInput
@@ -629,7 +643,7 @@ class TileForm extends Component {
             min={0}
             max={1200}
             error={errorFields.has('height')}
-            onChange={this.handleSettingsChange.bind(this)}
+            onChange={this.handleSettingsChange}
             autoComplete="off"
           />
         </div>
@@ -650,7 +664,7 @@ class TileForm extends Component {
             min={0}
             max={1200}
             error={errorFields.has('width')}
-            onChange={this.handleSettingsChange.bind(this)}
+            onChange={this.handleSettingsChange}
             autoComplete="off"
           />
           <NumberInput
@@ -660,7 +674,7 @@ class TileForm extends Component {
             min={0}
             max={1200}
             error={errorFields.has('height')}
-            onChange={this.handleSettingsChange.bind(this)}
+            onChange={this.handleSettingsChange}
             autoComplete="off"
           />
         </div>
@@ -670,7 +684,7 @@ class TileForm extends Component {
             name="units"
             data={temporaryTile.settings}
             error={errorFields.has('units')}
-            onChange={this.handleSettingsChange.bind(this)}
+            onChange={this.handleSettingsChange}
             autoComplete="off"
           />
         </div>
@@ -689,7 +703,7 @@ class TileForm extends Component {
           required
           data={temporaryTile.settings}
           error={errorFields.has('content')}
-          onChange={this.handleSettingsChange.bind(this)}
+          onChange={this.handleSettingsChange}
           autoComplete="off"
         />
         <div>
@@ -711,7 +725,7 @@ class TileForm extends Component {
             name='target_page_id'
             selected={temporaryTile.target_page_id || NO_LINK}
             options={pageList}
-            onChange={this.handleSelect.bind(this)}
+            onChange={this.handleSelect}
           />
           <Select
             title=''
@@ -719,7 +733,7 @@ class TileForm extends Component {
             selected={temporaryTile.settings.cursor}
             options={CURSORS}
             defaultOption="Cursor"
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
           />
         </div>
         <div>
@@ -729,7 +743,7 @@ class TileForm extends Component {
               placeholder='http://'
               name="external_link_url"
               data={temporaryTile.settings}
-              onChange={this.handleSettingsChange.bind(this)}
+              onChange={this.handleSettingsChange}
               autoComplete="off"
             />
           }
@@ -738,6 +752,13 @@ class TileForm extends Component {
     )
   }
 
+  renderAudioForm() {
+    return (
+      <div>
+      </div>
+    )
+  }
+
   renderMiscForm() {
     const { temporaryTile } = this.props
     return (
@@ -746,7 +767,7 @@ class TileForm extends Component {
           title='Opacity'
           name='opacity'
           value={temporaryTile.settings.opacity}
-          onChange={this.handleSettingsSelect.bind(this)}
+          onChange={this.handleSettingsSelect}
           min={0.0}
           max={1.0}
           step={0.01}
@@ -755,7 +776,7 @@ class TileForm extends Component {
           title='Scale'
           name='scale'
           value={temporaryTile.settings.scale}
-          onChange={this.handleSettingsSelect.bind(this)}
+          onChange={this.handleSettingsSelect}
           min={0.01}
           max={10.0}
           step={0.01}
@@ -764,7 +785,7 @@ class TileForm extends Component {
           title='Rotation'
           name='rotation'
           value={temporaryTile.settings.rotation}
-          onChange={this.handleSettingsSelect.bind(this)}
+          onChange={this.handleSettingsSelect}
           min={-180.0}
           max={180.0}
           step={1}