From c4046cbf7e6446d200b90341d37ebf121a06383b Mon Sep 17 00:00:00 2001
From: Mary Kate <mk@marykatefain.com>
Date: Mon, 10 Aug 2020 20:46:37 -0500
Subject: [PATCH] add video and audio media placeholders in compose form

---
 app/images/audio-placeholder.png                 | Bin 0 -> 4892 bytes
 app/images/video-placeholder.png                 | Bin 0 -> 3460 bytes
 .../features/compose/components/upload.js        |   9 ++++++++-
 app/styles/components/compose-form.scss          |  10 ++++++++++
 4 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 app/images/audio-placeholder.png
 create mode 100644 app/images/video-placeholder.png

diff --git a/app/images/audio-placeholder.png b/app/images/audio-placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..879131a46c129c3a20bc73301d94fdaa204288fa
GIT binary patch
literal 4892
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
E0JE@MS^xk5

literal 0
HcmV?d00001

diff --git a/app/images/video-placeholder.png b/app/images/video-placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..01a8d4f3bd9b76b0656a441b063bbbf69aaf81b4
GIT binary patch
literal 3460
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

literal 0
HcmV?d00001

diff --git a/app/soapbox/features/compose/components/upload.js b/app/soapbox/features/compose/components/upload.js
index d640823ff..29e60d8ca 100644
--- a/app/soapbox/features/compose/components/upload.js
+++ b/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>}
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index edb565832..af8d11861 100644
--- a/app/styles/components/compose-form.scss
+++ b/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