From 4d334bd2b83349aa93232a23a9a492a56ec8b0fb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 1 Jul 2021 22:04:34 -0500
Subject: [PATCH] Add blurhash to upload form, fixes #661

---
 app/soapbox/features/compose/components/upload.js | 2 ++
 app/styles/components/compose-form.scss           | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/compose/components/upload.js b/app/soapbox/features/compose/components/upload.js
index f947c3c97..7fd373e7b 100644
--- a/app/soapbox/features/compose/components/upload.js
+++ b/app/soapbox/features/compose/components/upload.js
@@ -7,6 +7,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import Icon from 'soapbox/components/icon';
+import Blurhash from 'soapbox/components/blurhash';
 
 const messages = defineMessages({
   description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
@@ -102,6 +103,7 @@ class Upload extends ImmutablePureComponent {
 
     return (
       <div className='compose-form__upload' tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick} role='button'>
+        <Blurhash hash={media.get('blurhash')} className='media-gallery__preview' />
         <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
           {({ scale }) => (
             <div
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index e6a14d07e..c2ca1e573 100644
--- a/app/styles/components/compose-form.scss
+++ b/app/styles/components/compose-form.scss
@@ -219,6 +219,9 @@
       flex: 1 1 0;
       min-width: 40%;
       margin: 5px;
+      position: relative;
+      border-radius: 4px;
+      overflow: hidden;
 
       &__actions {
         background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
@@ -298,7 +301,6 @@
     }
 
     .compose-form__upload-thumbnail {
-      border-radius: 4px;
       background-position: center;
       background-size: contain;
       background-repeat: no-repeat;