Merge branch 'media-compose-placeholders' into 'develop'

Add video and audio media placeholders in compose form

Closes #234

See merge request soapbox-pub/soapbox-fe!152

app/soapbox/features/compose/components/upload.js

@@ -95,12 +95,19 @@ class Upload extends ImmutablePureComponent {
     const focusY = media.getIn(['meta', 'focus', 'y']);
     const x = ((focusX /  2) + .5) * 100;
     const y = ((focusY / -2) + .5) * 100;
+    const mediaType = media.get('type');
 
     return (
       <div className='compose-form__upload' tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick} role='button'>
         <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
           {({ scale }) => (
-            <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
+            <div
+              className={classNames('compose-form__upload-thumbnail',  `${mediaType}`)}
+              style={{
+                transform: `scale(${scale})`,
+                backgroundImage: (mediaType !== 'video' && mediaType !== 'audio' ? `url(${media.get('preview_url')})` : null),
+                backgroundPosition: `${x}% ${y}%` }}
+            >
               <div className={classNames('compose-form__upload__actions', { active })}>
                 <button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
                 {this.props.features.focalPoint && media.get('type') === 'image' && <button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='crosshairs' /> <FormattedMessage id='upload_form.focus' defaultMessage='Change preview' /></button>}

app/styles/components/compose-form.scss

@@ -289,6 +289,16 @@
       height: 140px;
       width: 100%;
       overflow: hidden;
+
+      &.video {
+        background-image: url('../images/video-placeholder.png');
+        background-size: cover;
+      }
+
+      &.audio {
+        background-image: url('../images/audio-placeholder.png');
+        background-size: cover;
+      }
     }
   } // end .compose-form .compose-form__modifiers