1 files changed, 56 insertions, 37 deletions

diff --git a/animism-align/frontend/app/views/media/components/media.formGallery.js b/animism-align/frontend/app/views/media/components/media.formGallery.js
index e5311cb..f785b40 100644
--- a/animism-align/frontend/app/views/media/components/media.formGallery.js
+++ b/animism-align/frontend/app/views/media/components/media.formGallery.js
@@ -4,16 +4,12 @@ import { ReactSortable } from "react-sortablejs"
 
 import { session } from 'app/session'
 import actions from 'app/actions'
-import { capitalize, preloadImage } from 'app/utils'
+import { capitalize, preloadImage, simpleArraysEqual } from 'app/utils'
+import { DISPLAY_SIZE, DISPLAY_QUALITY, THUMBNAIL_SIZE, THUMBNAIL_QUALITY } from 'app/constants'
 
 import { TextInput, LabelDescription, FileInputField, 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 = {
     loading: false,
@@ -44,13 +40,20 @@ export default class MediaGalleryForm extends Component {
   handleUpload(files) {
     const { data } = this.props
     this.setState({ loading: true })
+    this.uploadFullsize(files)
+    .then(() => {
+      this.setState({ loading: false })
+    })
+  }
+
+  uploadFullsize(files) {
+    const { data } = this.props
     // first, upload all the fullsize files
     let fullsizeUploadPromises = files.map(file => {
       return this.uploadSize(file, 'fullsize')
     })
     // when these are done
-    Promise.all(fullsizeUploadPromises)
-    .then(results => {
+    return Promise.all(fullsizeUploadPromises).then(results => {
       // get the added IDs in order 
       const added_image_order = results.map(result => result.id)
       // append the new IDs to the image order
@@ -66,29 +69,44 @@ export default class MediaGalleryForm extends Component {
         image_lookup: image_lookup,
         thumbnail_lookup: data.settings.thumbnail_lookup || {},
       })
-      // construct thumbnails and upload these
-      const thumbnailUploadPromises = files.map(file => {
-        return this.uploadThumbnail(file)
+      return this.uploadResizedFiles(files, added_image_order)
+    })
+  }
+
+  uploadResizedFiles(files, added_image_order) {
+    return (
+      this.uploadThumbnails(files, added_image_order, 'thumbnail', THUMBNAIL_SIZE, THUMBNAIL_QUALITY)
+      .then(() => {
+        return this.uploadThumbnails(files, added_image_order, 'display', DISPLAY_SIZE, DISPLAY_QUALITY)
       })
-      // once the thumbnails are done uploading
-      Promise.all(thumbnailUploadPromises)
-      .then(thumbnail_results => {
-        // add them to the thumbnail lookup, keyed off the ID of the fullsize image
-        const thumbnail_lookup = thumbnail_results.reduce((a, b, i) => {
-          const id = added_image_order[i]
-          a[id] = b
-          return a
-        }, (data.settings.thumbnail_lookup || {}))
-        // update the settings object
-        this.handleSettingsChange('multiple', {
-          thumbnail_lookup: thumbnail_lookup,
-        })
-        this.setState({ loading: false })
+    )
+  }
+
+  uploadThumbnails(files, added_image_order, tag, maxSide, quality) {
+    const { data } = this.props
+    // construct thumbnails and upload these
+    const thumbnailUploadPromises = files.map(file => {
+      return this.uploadThumbnail(file, tag, maxSide, quality)
+    })
+    // once the thumbnails are done uploading...
+    return Promise.all(thumbnailUploadPromises).then(thumbnail_results => {
+      // decide which lookup we're adding to
+      const tag_lookup_name = tag + '_lookup'
+      const tag_lookup = data.settings[tag_lookup_name] || {}
+      // add them to the thumbnail lookup, keyed off the ID of the fullsize image
+      const thumbnail_lookup = thumbnail_results.reduce((a, b, i) => {
+        const id = added_image_order[i]
+        a[id] = b
+        return a
+      }, tag_lookup)
+      // update the settings object
+      this.handleSettingsChange('multiple', {
+        [tag_lookup_name]: thumbnail_lookup,
       })
     })
   }
 
-  uploadThumbnail(file) {
+  uploadThumbnail(file, tag, maxSide, quality) {
     return new Promise((resolve, reject) => {
       const type = (file.name.match('.png') !== -1) ? 'image/png' : 'image/jpg'
       const fr = new FileReader()
@@ -97,16 +115,16 @@ export default class MediaGalleryForm extends Component {
         const image = new Image()
         image.onload = () => {
           image.onload = null
-          const thumbnailCanvas = renderThumbnail(image, { maxSide: THUMBNAIL_SIZE })
+          const thumbnailCanvas = renderThumbnail(image, { maxSide })
           thumbnailCanvas.toBlob(thumbnail => {
-            this.uploadSize(thumbnail, 'thumbnail', file.name)
+            this.uploadSize(thumbnail, tag, file.name)
             .then(res => {
               resolve(res)
             })
             .catch(err => {
               reject(err)
             })
-          }, type, THUMBNAIL_QUALITY)
+          }, type, quality)
         }
         image.src = fileReaderEvent.target.result
       }
@@ -115,7 +133,7 @@ export default class MediaGalleryForm extends Component {
   }
 
   uploadSize(image, tag, fn) {
-    console.log('uploading size', tag)
+    // console.log('uploading size', tag)
     const uploadData = {
       image,
       tag,
@@ -131,12 +149,13 @@ export default class MediaGalleryForm extends Component {
     })
   }
 
-  handleOrderChanged(image_order) {
-    console.log(image_order)
-    // if (image_order !== this.props.data.settings.image_order) {
-      // console.log('handle order chagned', image_order)
-      // this.handleSettingsChange('image_order', image_order)
-    // }
+  handleOrderChanged(new_image_order) {
+    // console.log(new_image_order)
+    const image_order = new_image_order.map(el => el.id)
+    if (!simpleArraysEqual(image_order, this.props.data.settings.image_order)) {
+      console.log('order changed', image_order)
+      this.handleSettingsChange('image_order', image_order)
+    }
   }
 
   render() {
@@ -173,7 +192,7 @@ export default class MediaGalleryForm extends Component {
 }
 
 const GalleryImageForm = ({ id, key, image, thumbnail }) => {
-  console.log(image, thumbnail)
+  // console.log(image, thumbnail)
   return (
     <div>
       {thumbnail