diff --git a/app/javascript/flavours/glitch/components/attachment_list.js b/app/javascript/flavours/glitch/components/attachment_list.js
index 3a28c70f3..b31d40b04 100644
--- a/app/javascript/flavours/glitch/components/attachment_list.js
+++ b/app/javascript/flavours/glitch/components/attachment_list.js
@@ -1,5 +1,6 @@
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component';
const filename = url => url.split('/').pop().split('#')[0].split('?')[0];
@@ -8,10 +9,29 @@ export default class AttachmentList extends ImmutablePureComponent {
static propTypes = {
media: ImmutablePropTypes.list.isRequired,
+ compact: PropTypes.bool,
};
render () {
- const { media } = this.props;
+ const { media, compact } = this.props;
+
+ if (compact) {
+ return (
+
+
+ {media.map(attachment => {
+ const displayUrl = attachment.get('remote_url') || attachment.get('url');
+
+ return (
+ -
+ {filename(displayUrl)}
+
+ );
+ })}
+
+
+ );
+ }
return (
@@ -20,11 +40,13 @@ export default class AttachmentList extends ImmutablePureComponent {
);
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 77477fe95..2fcc44882 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -6,6 +6,7 @@ import StatusHeader from './status_header';
import StatusIcons from './status_icons';
import StatusContent from './status_content';
import StatusActionBar from './status_action_bar';
+import AttachmentList from './attachment_list';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { MediaGallery, Video } from 'flavours/glitch/util/async-components';
import { HotKeys } from 'react-hotkeys';
@@ -301,17 +302,22 @@ export default class Status extends ImmutablePureComponent {
background = status.getIn(['account', 'header']);
}
- // This handles our media attachments. Note that we don't show media on
- // muted (notification) statuses. If the media type is unknown, then we
- // simply ignore it.
+ // This handles our media attachments.
+ // If a media file is of unknwon type or if the status is muted
+ // (notification), we show a list of links instead of embedded media.
// After we have generated our appropriate media element and stored it in
// `media`, we snatch the thumbnail to use as our `background` if media
// backgrounds for collapsed statuses are enabled.
attachments = status.get('media_attachments');
- if (attachments.size > 0 && !muted) {
- if (attachments.some(item => item.get('type') === 'unknown')) { // Media type is 'unknown'
- /* Do nothing */
+ if (attachments.size > 0) {
+ if (muted || attachments.some(item => item.get('type') === 'unknown')) {
+ media = (
+
+ );
} else if (attachments.getIn([0, 'type']) === 'video') { // Media type is 'video'
const video = status.getIn(['media_attachments', 0]);
diff --git a/app/javascript/flavours/glitch/styles/components/lists.scss b/app/javascript/flavours/glitch/styles/components/lists.scss
index de0783b6d..85f416ceb 100644
--- a/app/javascript/flavours/glitch/styles/components/lists.scss
+++ b/app/javascript/flavours/glitch/styles/components/lists.scss
@@ -5,45 +5,59 @@
border-radius: 4px;
margin-top: 14px;
overflow: hidden;
-}
-.attachment-list__icon {
- flex: 0 0 auto;
- color: $ui-base-lighter-color;
- padding: 8px 18px;
- cursor: default;
- border-right: 1px solid lighten($ui-base-color, 8%);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: 26px;
-
- .fa {
- display: block;
+ &__icon {
+ flex: 0 0 auto;
+ color: $ui-base-lighter-color;
+ padding: 8px 18px;
+ cursor: default;
+ border-right: 1px solid lighten($ui-base-color, 8%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: 26px;
+
+ .fa {
+ display: block;
+ }
}
-}
-
-.attachment-list__list {
- list-style: none;
- padding: 4px 0;
- padding-left: 8px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- li {
- display: block;
+ &__list {
+ list-style: none;
padding: 4px 0;
+ padding-left: 8px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ li {
+ display: block;
+ padding: 4px 0;
+ }
+
+ a {
+ text-decoration: none;
+ color: $ui-base-lighter-color;
+ font-weight: 500;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
}
- a {
- text-decoration: none;
- color: $ui-base-lighter-color;
- font-weight: 500;
+ &.compact {
+ border: 0;
+ margin-top: 4px;
+
+ .attachment-list__list {
+ padding: 0;
+ display: block;
+ }
- &:hover {
- text-decoration: underline;
+ .fa {
+ color: $ui-base-lighter-color;
}
}
}