diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index d3944b0c3e..b72c2417c2 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -516,8 +516,8 @@ class Status extends ImmutablePureComponent {
const { isExpanded, isCollapsed, forceFilter } = this.state;
let background = null;
let attachments = null;
- let media = null;
- let mediaIcon = null;
+ let media = [];
+ let mediaIcons = [];
if (status === null) {
return null;
@@ -586,25 +586,27 @@ class Status extends ImmutablePureComponent {
// 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 (status.get('poll')) {
- media = ;
- mediaIcon = 'tasks';
- } else if (usingPiP) {
- media = ;
- mediaIcon = 'video-camera';
+ media.push();
+ mediaIcons.push('tasks');
+ }
+ if (usingPiP) {
+ media.push();
+ mediaIcons.push('video-camera');
} else if (attachments.size > 0) {
if (muted || attachments.some(item => item.get('type') === 'unknown')) {
- media = (
+ media.push(
+ />,
);
} else if (attachments.getIn([0, 'type']) === 'audio') {
const attachment = status.getIn(['media_attachments', 0]);
- media = (
+ media.push(
{Component => (
)}
-
+ ,
);
- mediaIcon = 'music';
+ mediaIcons.push('music');
} else if (attachments.getIn([0, 'type']) === 'video') {
const attachment = status.getIn(['media_attachments', 0]);
- media = (
+ media.push(
{Component => ()}
-
+ ,
);
- mediaIcon = 'video-camera';
+ mediaIcons.push('video-camera');
} else { // Media type is 'image' or 'gifv'
- media = (
+ media.push(
{Component => (
)}
-
+ ,
);
- mediaIcon = 'picture-o';
+ mediaIcons.push('picture-o');
}
if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0) && settings.getIn(['collapsed', 'backgrounds', 'preview_images'])) {
background = attachments.getIn([0, 'preview_url']);
}
} else if (status.get('card') && settings.get('inline_preview_cards')) {
- media = (
+ media.push(
+ />,
);
- mediaIcon = 'link';
+ mediaIcons.push('link');
}
// Here we prepare extra data-* attributes for CSS selectors.
@@ -753,7 +755,7 @@ class Status extends ImmutablePureComponent {
)).reduce((aggregate, item) => [...aggregate, item, ' '], []);
- const toggleText = hidden ? [
- ,
- mediaIcon ? (
- ,
+ ];
+ if (mediaIcon) {
+ toggleText.push(
+ ,
+ );
+ }
+ } else {
+ toggleText = (
+
- ) : null,
- ] : [
- ,
- ];
+ );
+ }
if (hidden) {
mentionsPlaceholder = {mentionLinks}
;
diff --git a/app/javascript/flavours/glitch/components/status_icons.js b/app/javascript/flavours/glitch/components/status_icons.js
index f4d0a74051..e66947f4ae 100644
--- a/app/javascript/flavours/glitch/components/status_icons.js
+++ b/app/javascript/flavours/glitch/components/status_icons.js
@@ -27,7 +27,7 @@ class StatusIcons extends React.PureComponent {
static propTypes = {
status: ImmutablePropTypes.map.isRequired,
- mediaIcon: PropTypes.string,
+ mediaIcons: PropTypes.arrayOf(PropTypes.string),
collapsible: PropTypes.bool,
collapsed: PropTypes.bool,
directMessage: PropTypes.bool,
@@ -44,8 +44,8 @@ class StatusIcons extends React.PureComponent {
}
}
- mediaIconTitleText () {
- const { intl, mediaIcon } = this.props;
+ mediaIconTitleText (mediaIcon) {
+ const { intl } = this.props;
switch (mediaIcon) {
case 'link':
@@ -61,11 +61,24 @@ class StatusIcons extends React.PureComponent {
}
}
+ renderIcon (mediaIcon) {
+ return (
+
+ );
+ }
+
// Rendering.
render () {
const {
status,
- mediaIcon,
+ mediaIcons,
collapsible,
collapsed,
directMessage,
@@ -90,15 +103,7 @@ class StatusIcons extends React.PureComponent {
aria-hidden='true'
title={intl.formatMessage(messages.localOnly)}
/>}
- {mediaIcon ? (
-
- ) : null}
+ { !!mediaIcons && mediaIcons.map(icon => this.renderIcon(icon)) }
{!directMessage && }
{collapsible ? (
;
- mediaIcon = 'tasks';
- } else if (usingPiP) {
- media = ;
- mediaIcon = 'video-camera';
+ media.push();
+ mediaIcons.push('tasks');
+ }
+ if (usingPiP) {
+ media.push();
+ mediaIcons.push('video-camera');
} else if (status.get('media_attachments').size > 0) {
if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
- media = ;
+ media.push();
} else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
const attachment = status.getIn(['media_attachments', 0]);
- media = (
+ media.push(
+ />,
);
- mediaIcon = 'music';
+ mediaIcons.push('music');
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
const attachment = status.getIn(['media_attachments', 0]);
- media = (
+ media.push(
+ />,
);
- mediaIcon = 'video-camera';
+ mediaIcons.push('video-camera');
} else {
- media = (
+ media.push(
+ />,
);
- mediaIcon = 'picture-o';
+ mediaIcons.push('picture-o');
}
} else if (status.get('card')) {
- media = ;
- mediaIcon = 'link';
+ media.push();
+ mediaIcons.push('link');
}
if (status.get('application')) {
@@ -268,7 +269,7 @@ export default class DetailedStatus extends ImmutablePureComponent {