adding vitrine thumbnail image

2 files changed, 42 insertions, 4 deletions

diff --git a/animism-align/frontend/app/utils/annotation.utils.js b/animism-align/frontend/app/utils/annotation.utils.js
index 1af08a2..89e6aea 100644
--- a/animism-align/frontend/app/utils/annotation.utils.js
+++ b/animism-align/frontend/app/utils/annotation.utils.js
@@ -19,12 +19,23 @@ export const annotationFadeTimings = annotation => {
 export const thumbnailURL = media => {
   // console.log(media)
   switch (media.type) {
-    case 'video': return media.settings.video.thumbnail_url
-    case 'image': return media.settings.thumbnail.url
+    case 'video':
+      return media.settings.video.thumbnail_url
+
+    case 'image':
+      return media.settings.thumbnail.url
+
     case 'gallery':
-      if (!media.settings.image_order || !media.settings.image_order.length) return null
+      if (media.settings.thumbnail) {
+        return media.settings.thumbnail.url
+      }
+      if (!media.settings.image_order || !media.settings.image_order.length) {
+        return null
+      }
       const image_id = media.settings.image_order[0]
       return media.settings.thumbnail_lookup[image_id].url
-    default:      return null
+
+    default:
+      return null
   }
 }
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 d978b83..25b715c 100644
--- a/animism-align/frontend/app/views/media/components/media.formGallery.js
+++ b/animism-align/frontend/app/views/media/components/media.formGallery.js
@@ -25,6 +25,7 @@ export default class MediaGalleryForm extends Component {
     this.handleUpload = this.handleUpload.bind(this)
     this.uploadSize = this.uploadSize.bind(this)
     this.handleSaveItem = this.handleSaveItem.bind(this)
+    this.handleUploadGalleryThumbnail = this.handleUploadGalleryThumbnail.bind(this)
   }
 
   handleChange(e) {
@@ -49,6 +50,21 @@ export default class MediaGalleryForm extends Component {
     })
   }
 
+  handleUploadGalleryThumbnail(file) {
+    this.setState({ loading: true })
+    if (this.props.data.thumbnail) {
+      actions.upload.destroy({ id: this.props.data.thumbnail.id })
+    }
+    this.uploadThumbnail(file, 'thumbnail', THUMBNAIL_SIZE, THUMBNAIL_QUALITY)
+    .then(data => {
+      console.log(data)
+      this.handleSettingsChange('multiple', {
+        thumbnail: data,
+      })
+      this.setState({ loading: false })
+    })
+  }
+
   uploadFullsize(files) {
     const { data } = this.props
     // first, upload all the fullsize files
@@ -258,6 +274,17 @@ export default class MediaGalleryForm extends Component {
             onSave={this.handleSaveItem}
           />
         }
+        <FileInputField
+          title="Upload thumbnail"
+          mime="*/*"
+          onChange={this.handleUploadGalleryThumbnail}
+        />
+        {data.settings.thumbnail &&
+          <div className='label'>
+            <span>Thumbnail</span>
+            <img src={data.settings.thumbnail.url} />
+          </div>
+        }
       </div>
     )
   }