starting form gallery

3 files changed, 158 insertions, 3 deletions

diff --git a/animism-align/frontend/app/views/media/components/media.form.js b/animism-align/frontend/app/views/media/components/media.form.js
index 76d6f3e..60b8736 100644
--- a/animism-align/frontend/app/views/media/components/media.form.js
+++ b/animism-align/frontend/app/views/media/components/media.form.js
@@ -8,9 +8,10 @@ import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton,
 import MediaImageForm from './media.formImage'
 import MediaVideoForm from './media.formVideo'
 import MediaFileForm from './media.formFile'
+import MediaGalleryForm from './media.formGallery'
 
 const newMedia = () => ({
-  type: 'image',
+  type: 'gallery',
   tag: 'media',
   url: '',
   title: '',
@@ -26,7 +27,7 @@ const newMedia = () => ({
 })
 
 const MEDIA_UPLOAD_TYPES = [
-  'image', 'video', 'file',
+  'image', 'video', 'file', 'gallery',
 ].map(name => ({ name, label: capitalize(name) }))
 
 export default class MediaForm extends Component {
@@ -181,6 +182,14 @@ export default class MediaForm extends Component {
             />
           }
 
+          {data.type === 'gallery' &&
+            <MediaGalleryForm
+              data={data}
+              onChange={this.handleSelect}
+              onSettingsChange={this.handleSettingsChange}
+            />
+          }
+
           <TextInput
             title="Author"
             name="author"
diff --git a/animism-align/frontend/app/views/media/components/media.formGallery.js b/animism-align/frontend/app/views/media/components/media.formGallery.js
new file mode 100644
index 0000000..2c1fa49
--- /dev/null
+++ b/animism-align/frontend/app/views/media/components/media.formGallery.js
@@ -0,0 +1,146 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { session } from 'app/session'
+import actions from 'app/actions'
+import { capitalize, preloadImage } from 'app/utils'
+
+import { TextInput, LabelDescription, UploadImage, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
+import { renderThumbnail } from 'app/common/upload.helpers'
+
+const DISPLAY_SIZE = 2000
+const DISPLAY_QUALITY= 80
+const THUMBNAIL_SIZE = 320
+const THUMBNAIL_QUALITY = 80
+
+export default class MediaGalleryForm extends Component {
+  state = {
+    img: null,
+  }
+
+  constructor(props) {
+    super(props)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSettingsChange = this.handleSettingsChange.bind(this)
+    this.handleUpload = this.handleUpload.bind(this)
+    this.replaceTaggedSize = this.replaceTaggedSize.bind(this)
+    this.uploadTaggedSize = this.uploadTaggedSize.bind(this)
+  }
+
+  componentDidMount() {
+    // this.setState({ })
+    if (this.props.data.settings.fullsize) {
+      preloadImage(this.props.data.settings.fullsize.url)
+      .then(img => this.setState({ img }))
+    }
+  }
+
+  handleChange(e) {
+    const { name, value } = e.target
+    this.handleSelect(name, value)
+  }
+
+  handleSelect(name, value) {
+    this.props.onSelect(name, value)
+  }
+
+  handleSettingsChange(name, value) {
+    this.props.onSettingsChange(name, value)
+  }
+
+  handleUpload({ file, img, canvas, blob }) {
+    // sizes: fullsize, display, thumbnail
+    this.replaceTaggedSize(file, 'fullsize')
+    .then(data => {
+      this.setState({ img })
+      this.props.onSettingsChange('multiple', {
+        fullsize: data,
+        crop: {},
+      })
+      return this.replaceTaggedSize(blob, 'display', file.name)
+    }).then(data => {
+      this.props.onSettingsChange('multiple', {
+        display: data,
+      })
+      this.uploadThumbnail(img)
+    })
+  }
+
+  uploadThumbnail(img) {
+    const { fn } = this.props.data.settings.fullsize
+    const thumbnailCanvas = renderThumbnail(img, { maxSide: THUMBNAIL_SIZE })
+    thumbnailCanvas.toBlob(thumbnail => {
+      this.replaceTaggedSize(thumbnail, 'thumbnail', fn).then(data => {
+        this.props.onSettingsChange('multiple', {
+          thumbnail: data,
+        })
+      })
+    }, 'image/jpeg', THUMBNAIL_QUALITY)
+  }
+
+  replaceTaggedSize(image, tag, fn) {
+    // when we upload an image, if the image already exists in this "position"
+    // on the record, we should also delete it
+    if (this.props.data.settings[tag] && this.props.data.settings[tag].id) {
+      return new Promise((resolve, reject) => {
+        actions.upload.destroy(this.props.data.settings[tag])
+        .then(() => {
+          console.log('destroy successful')
+          this.uploadTaggedSize(image, tag, fn).then(data => resolve(data))
+        })
+        .catch(() => {
+          console.log('error deleting the image')
+          this.uploadTaggedSize(image, tag, fn).then(data => resolve(data))
+        })
+      })
+    }
+    return this.uploadTaggedSize(image, tag, fn)
+  }
+
+  uploadTaggedSize(image, tag, fn) {
+    console.log('uploading size', tag)
+    const uploadData = {
+      image,
+      tag,
+      username: 'animism',
+    }
+    if (fn) {
+      uploadData['__image_filename'] = fn
+    }
+    // console.log(uploadData)
+    return actions.upload.upload(uploadData).then(data => {
+      // console.log(data)
+      return data.res
+    })
+  }
+
+  render() {
+    const { data } = this.props
+    // console.log(data)
+    return (
+      <div className='imageForm'>
+        {!data.url &&
+          <label className={'text fileInput'}>
+            <span>{"Upload image"}</span>
+            <div className="row">
+              <button>
+                {"Choose image"}
+              </button>
+              <FileInputField
+                title="Upload images"
+                mime="*/*"
+                onChange={this.handleUpload}
+              />
+            </div>
+          </label>
+        }
+        {data.settings.fullsize &&
+          <div>
+            {data.settings.fullsize.url}
+          </div>
+        }
+      </div>
+    )
+  }
+}
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 01f4232..1547606 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -131,7 +131,7 @@ export const loadSections = () => dispatch => {
     }
   }
 
-  console.log(sections)
+  // console.log(sections)
   // console.log(fullscreenTimeline)
   dispatch({ type: types.viewer.load_sections, sections, fullscreenTimeline })
 }