diff --git a/app/javascript/flavours/glitch/components/media_attachments.js b/app/javascript/flavours/glitch/components/media_attachments.js
new file mode 100644
index 0000000000..c8d133f09d
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/media_attachments.js
@@ -0,0 +1,119 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { MediaGallery, Video, Audio } from 'flavours/glitch/util/async-components';
+import Bundle from 'flavours/glitch/features/ui/components/bundle';
+import noop from 'lodash/noop';
+
+export default class MediaAttachments extends ImmutablePureComponent {
+
+ static propTypes = {
+ status: ImmutablePropTypes.map.isRequired,
+ height: PropTypes.number,
+ width: PropTypes.number,
+ revealed: PropTypes.bool,
+ };
+
+ static defaultProps = {
+ height: 110,
+ width: 239,
+ };
+
+ updateOnProps = [
+ 'status',
+ ];
+
+ renderLoadingMediaGallery = () => {
+ const { height, width } = this.props;
+
+ return (
+
+ );
+ }
+
+ renderLoadingVideoPlayer = () => {
+ const { height, width } = this.props;
+
+ return (
+
+ );
+ }
+
+ renderLoadingAudioPlayer = () => {
+ const { height, width } = this.props;
+
+ return (
+
+ );
+ }
+
+ render () {
+ const { status, width, height, revealed } = this.props;
+ const mediaAttachments = status.get('media_attachments');
+
+ if (mediaAttachments.size === 0) {
+ return null;
+ }
+
+ if (mediaAttachments.getIn([0, 'type']) === 'audio') {
+ const audio = mediaAttachments.get(0);
+
+ return (
+
+ {Component => (
+
+ )}
+
+ );
+ } else if (mediaAttachments.getIn([0, 'type']) === 'video') {
+ const video = mediaAttachments.get(0);
+
+ return (
+
+ {Component => (
+
+ )}
+
+ );
+ } else {
+ return (
+
+ {Component => (
+
+ )}
+
+ );
+ }
+ }
+
+}
diff --git a/app/javascript/flavours/glitch/features/report/components/status_check_box.js b/app/javascript/flavours/glitch/features/report/components/status_check_box.js
index adb5e77a7d..76bf0eb851 100644
--- a/app/javascript/flavours/glitch/features/report/components/status_check_box.js
+++ b/app/javascript/flavours/glitch/features/report/components/status_check_box.js
@@ -1,14 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
-import noop from 'lodash/noop';
import StatusContent from 'flavours/glitch/components/status_content';
-import { MediaGallery, Video } from 'flavours/glitch/util/async-components';
-import Bundle from 'flavours/glitch/features/ui/components/bundle';
import Avatar from 'flavours/glitch/components/avatar';
import DisplayName from 'flavours/glitch/components/display_name';
import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
import Option from './option';
+import MediaAttachments from 'flavours/glitch/components/media_attachments';
export default class StatusCheckBox extends React.PureComponent {
@@ -27,53 +25,10 @@ export default class StatusCheckBox extends React.PureComponent {
render () {
const { status, checked } = this.props;
- let media = null;
-
if (status.get('reblog')) {
return null;
}
- if (status.get('media_attachments').size > 0) {
- if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
-
- } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
- const video = status.getIn(['media_attachments', 0]);
-
- media = (
-
- {Component => (
-
- )}
-
- );
- } else {
- media = (
-
- {Component => (
-
- )}
-
- );
- }
- }
-
const labelComponent = (
@@ -84,7 +39,7 @@ export default class StatusCheckBox extends React.PureComponent {
ยท
-
+
} />
);
diff --git a/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.js b/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.js
index 1984432213..8fd528da0c 100644
--- a/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.js
@@ -9,6 +9,7 @@ import escapeTextContentForBrowser from 'escape-html';
import InlineAccount from 'flavours/glitch/components/inline_account';
import IconButton from 'flavours/glitch/components/icon_button';
import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
+import MediaAttachments from 'flavours/glitch/components/media_attachments';
const mapStateToProps = (state, { statusId }) => ({
versions: state.getIn(['history', statusId, 'items']),
@@ -70,6 +71,25 @@ class CompareHistoryModal extends React.PureComponent {
)}
+
+ {!!currentVersion.get('poll') && (
+
+
+ {currentVersion.getIn(['poll', 'options']).map(option => (
+ -
+
+
+
+
+ ))}
+
+
+ )}
+
+
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index 4143901e34..7e69183563 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -1074,6 +1074,12 @@
margin: 20px 0;
}
}
+
+ .media-gallery,
+ .audio-player,
+ .video-player {
+ margin-top: 15px;
+ }
}
.embed-modal {
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index a49299af10..ad6c24ea63 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -538,7 +538,7 @@
.media-gallery,
.audio-player,
.video-player {
- margin-top: 8px;
+ margin-top: 15px;
max-width: 250px;
}