1 files changed, 49 insertions, 10 deletions
diff --git a/animism-align/frontend/views/media/components/media.form.js b/animism-align/frontend/views/media/components/media.form.js
index 848d1f8..94968df 100644
--- a/animism-align/frontend/views/media/components/media.form.js
+++ b/animism-align/frontend/views/media/components/media.form.js
@@ -6,6 +6,9 @@ import { capitalize } from '../../../util'
 
 import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
 
+import MediaImageForm from './media.formImage'
+import MediaVideoForm from './media.formVideo'
+
 const newMedia = () => ({
   type: 'image',
   tag: 'media',
@@ -33,6 +36,14 @@ export default class MediaForm extends Component {
     errorFields: new Set([]),
   }
 
+  constructor(props) {
+    super(props)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSettingsChange = this.handleSettingsChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
   componentDidMount() {
     const { data, isNew } = this.props
     const title = isNew ? 'New media' : 'Editing ' + data.title
@@ -67,6 +78,18 @@ export default class MediaForm extends Component {
     })
   }
 
+  handleSettingsChange(name, value) {
+    this.setState({
+      data: {
+        ...this.state.data,
+        settings: {
+          ...this.state.data.settings,
+          [name]: [value],
+        }
+      }
+    })
+  }
+
   handleSubmit(e) {
     e.preventDefault()
     const { isNew, onSubmit } = this.props
@@ -102,7 +125,7 @@ export default class MediaForm extends Component {
     return (
       <div className='form'>
         <h1>{title}</h1>
-        <form onSubmit={this.handleSubmit.bind(this)}>
+        <form onSubmit={this.handleSubmit}>
           <Select
             title='Media Type'
             name='type'
@@ -111,12 +134,28 @@ export default class MediaForm extends Component {
             onChange={this.handleSelect}
           />
 
+          {data.type === 'image' &&
+            <MediaImageForm
+              data={data}
+              onChange={this.handleSelect}
+              onSettingsChange={this.handleSettingsChange}
+            />
+          }
+
+          {data.type === 'video' &&
+            <MediaVideoForm
+              data={data}
+              onChange={this.handleSelect}
+              onSettingsChange={this.handleSettingsChange}
+            />
+          }
+
           <TextInput
             title="Author"
             name="author"
             required
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
             autoComplete="off"
           />
           <TextInput
@@ -124,7 +163,7 @@ export default class MediaForm extends Component {
             name="title"
             required
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
             autoComplete="off"
           />
           <TextInput
@@ -132,7 +171,7 @@ export default class MediaForm extends Component {
             name="pre_title"
             required
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
             autoComplete="off"
           />
           <TextInput
@@ -140,7 +179,7 @@ export default class MediaForm extends Component {
             name="translated_title"
             required
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
             autoComplete="off"
           />
           <TextInput
@@ -148,7 +187,7 @@ export default class MediaForm extends Component {
             name="date"
             required
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
             autoComplete="off"
           />
           <TextInput
@@ -156,7 +195,7 @@ export default class MediaForm extends Component {
             name="medium"
             required
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
           />
           <TextInput
             title="Source"
@@ -164,18 +203,18 @@ export default class MediaForm extends Component {
             placeholder="Courtesy of / Copyright"
             required
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
             autoComplete="off"
           />
           <TextArea
             title="Description"
             name="description"
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
           />
           <SubmitButton
             title={submitTitle}
-            onClick={this.handleSubmit.bind(this)}
+            onClick={this.handleSubmit}
           />
           {!!errorFields.size &&
             <label>