diff --git a/app/images/audio-placeholder.png b/app/images/audio-placeholder.png new file mode 100644 index 000000000..879131a46 Binary files /dev/null and b/app/images/audio-placeholder.png differ diff --git a/app/images/video-placeholder.png b/app/images/video-placeholder.png new file mode 100644 index 000000000..01a8d4f3b Binary files /dev/null and b/app/images/video-placeholder.png differ 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 (
{({ scale }) => ( -
+
{this.props.features.focalPoint && media.get('type') === 'image' && } 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